JSFiddle - React, Tailwind, and code Playground

JavaScript

import React 				from 'react';
import { createElement } 	from 'react-faux-dom';
import * as d3 				from "d3";
import {checkKey} 			from 'actions/ActionCreator' 
import Preloader 			from 'components/preloader'
import moment 				from 'moment'
import language_variant 	from 'store/languages.jsx'
import _ 					from 'lodash'
import {task_parking, task_fueling, task_speed_exceeding, task_oil_replace, task_termo_exceeding, 
task_voltage}				from '../../modules/simple_svg_icons.jsx'
let colors = ['#b22222', '#1954b3', '#1c0b0b', '#7f34d0', '#23a393', '#80461b', '#4a709f', '#1c0b0b', '#cccccc', '#6a5acd', '#dc143c', '#2eb3bf', '#e8a735']
export default class Itinerary extends React.Component{
	constructor(props) {
		super(props);
		this.state = {
			data: this.props.data,
			chart: '',
			scalefrombutton: this.props.scalefrombutton,// zoom from parrent container (button in right corner parrent container)
			k: undefined, // coefficient scale (value from d3)
			
		}
		this.zoomByBtn = 		this.zoomByBtn.bind(this)
		this.drawGraph = 		this.drawGraph.bind(this);
		this.ctx = 				undefined; // context canvas 
		this.gX = 				undefined;  // x axis, zoom will be on this value
		this.svg  = 			undefined; // svg node
		this.container = 		undefined; // container where all chart info drawed
		this.activeCharts = 	undefined; // count active charts		
		this.focus = 			undefined; //value what return control
		this.control_trigger = 	undefined;
		this.control_line = 	undefined;
		this.width;
		this.height; 
		this.canvas; // canvas node
		this.x;
		this.y;
		this.yAxis;
		this.xAxis;
		this.names = {}; //names of charts
		this.EventItenerary; // EventItenerary node
		this.progressLine;
		this.grafInfo = [];
		this.drag = false;
		this.curr_zoom = undefined; // current zoom chart
		this.events = this.props.events; //aray if json events like {name: .., timestamp: .., start: ..., stop..,} 
	}
	componentWillReceiveProps(nextProps) {
			if (!!this.curr_zoom || !!this.svg){
				if...