JSFiddle - React, Tailwind, and code Playground

by saurabh_nitc10

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<div id="dualAxis" style="height: 350px; width: 1020px"></div>
<script>

    
  
</script>

CSS

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line ,.lineHigh,.lineLow{
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
	  stroke-linejoin: round;
  stroke-linecap: round;
}
.lineMedium{
  fill: none;
  stroke: rgb(0, 0, 0);
  stroke-width: 2px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

JavaScript

(function($) {
	$.dualAxis = {};
	var xMapObject=[];
	var svg = '';
	var focus = '';
	var tip = '';
	function DualAxis(element, options) {
		this.$element = $(element);
        this.options = options;
		this.margin = {top: 20, right: 80, bottom: 30, left: 40},
		width = $(this.$element.selector).width() - this.margin.left - this.margin.right,
		height = $(this.$element.selector).height() - this.margin.top - this.margin.bottom;
        this.options.height = (this.options.height == null? height: this.options.height);
        this.options.width = (this.options.width == null? width: this.options.width);
        this.rangeMax = this.getMaxX().length*100;
        if (this.rangeMax > 14000) this.rangeMax = 14000;
        this.enabled = true;
    }
	  
	DualAxis.prototype = {
		draw: function(){
              var parseDate = d3.time.format("%j_%Y").parse;
			this.options.data.bar.forEach(function(d) {
                d.date = parseDate(d.date);
				d.value = +d.value;
			});
			this.options.data.line.forEach(function(d) {
                d.date = parseDate(d.date);
				d.value = +d.value;
			});
            this.options.data.dateForxAxis.forEach(function(d) {
                d.date = parseDate(d.date);
				
			});
			tip = d3.tip()
		      .attr('class', 'd3-tip')
		      .html(function(d) { 
		    	var name= xMapObject[d.date];if(name == undefined){name=d.date;}
		    	var table = '<table class="table table-condensed">'
		    				+ '<thead>'
		    				+ '<tr><th colspan="2" style="text-align:center"class="city">'+name+'</th></tr>'
		    				+ '</thead>'
		    				+ '<tbody>'
		    				+ '<tr><td>Total Sales</td><td class="visits">'+d.value+'</td></tr>'
		    				+ '</tbody>'
		    				+ '</table>';
		      	return table; 
		      })
		      .style({border: '1px solid #fff', 'box-shadow': '1px 1px 4px rgba(0,0,0,0.5)', 'border-radius': 'none','background':'#fff','color':'#555'})
		      .offset([-12, 0]);
			// if(this.options.data.events.length > 1){
				// xOffset =...