JSFiddle - React, Tailwind, and code Playground

by axman

HTML

<body>
    <input type="button" onclick="ChartDraw.Rescale();" value="rescale">
    <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 _data = null;
            var _bars;

			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) {
			
				_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 + ")");
			};

			var rescale = function () {
                //in this function the new _maxYValue is set
			    renderLineView();
                var data = 
                     [{ "month": 1, "year": 2012, "value": 26326.07169, "countRecords": 2976, "complete": true, "date": "2012-01-01T00:00:00", "costsVariable": 19769.796247500002, "costsFix": 0.4557, "xValue": "2011-12-31T23:00:00.000Z" }];
                formatData(data);
                
			    y.domain([_minYValue, _maxYValue]);
			    _svg.select(".y.axis")
                           ...