JSFiddle - React, Tailwind, and code Playground

by axman

HTML

<body>
    <div id="chartarea" style="position:absolute; left:100px;top:50px;"></div>	
</body>

CSS

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: optimizeSpeed;
}

.axis
{
    font: 9px sans-serif;
}

.nodataContainer
{
    border: thin solid #FF0000;
    background-color: #fff;
    height: 200px;
    width: 450px;
    position: absolute;
    left: 250px;
    top: 300px;
    opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 15px;
    font-size: 14px;
}

.minutebar {
  fill: #336699;
}

.daybar {
  fill: #336699;  
  cursor: pointer;
}

.daybarincomplete
{
    fill: #ff9933;
    cursor: pointer;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line
{
    fill: none;
    stroke: #FF6600;
    stroke-width: 1px;    
}


.open
{
    fill: #cccccc;    
}

.SelectionBox
{
    font-weight: bold;
    border: 1px dotted #C0C0C0;
    padding: 3px;
    cursor: pointer;
}

.navBack
{
    width: 20px;
    height: 20px;
    background-color: green;
}

.moveForward
{
    width: 20px;
    height: 20px;    
    background-image: url('../../Images/navLeft.png');
}

JavaScript

var ChartDraw = function () {

	//#region enum
	AggregationPeriod = {
		day: 1,
		month: 3,
		year: 4
	}
	//#endregion

	//#region properties
	var _aggretionPeriod = 3;
	var _actualDateMode = 0;
	var _maindataPoint = null;
	var _facilityId = null;
	var _selectedDate = null;
	var _selectedAggregation = null;
	var _svg = null;
	var _hierachy = null;
	var _label = null;
	var _formatLabel = d3.time.format("%a %d.%m.%Y");
	var _formatTime = d3.time.format("%H:%M ");
	var _maxYValue = 0;
	var _minYValue = 0;

	var chartWidth = 920; // 1116;
	var margin = { top: 20, right: 20, bottom: 10, left: 40 },
           width = chartWidth - margin.left - margin.right,
           height = 500 - margin.top - margin.bottom;


	var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
	var formatToHMtime = d3.time.format("%H:%M");
	var formatToMM = d3.time.format("%b");
	var formatToDDtime = d3.time.format("%a %d");
	var temperatureBuffer = 1;

	//#endregion	

	//initialize
	var initChart = function (maindatapoint, facilityid, date, actualDateMode) {
		//_maindataPoint = maindatapoint;
		//_facilityId = facilityid;
		//_selectedDate = date;
		//_actualDateMode = actualDateMode;
		//_aggretionPeriod = _actualDateMode;
		//_selectedAggregation = $("#ddlAggregation")[0].value;

		// Clear the barChart Container before it is rendered again
		
		//chartarea.innerHTML = '';

		_svg = d3.select("#chartarea").append("svg")
			.attr("width", width + margin.left + margin.right)
			.attr("height", height + margin.top + margin.bottom + 10)
			.append("g")
			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	};

	//#region Rendering
	var x = d3.time.scale().range([0, width]);
	var y = d3.scale.linear().range([height, 0]);

	var xAxis = function () {

		if (_aggretionPeriod == AggregationPeriod.year)
			return d3.svg.axis().scale(x).ticks(d3.time.months, 1).tickFormat(d3.time.format("%b")).orient("bottom");

		var d3ticks = null;
		var format = formatToDDtime;
		if...