JSFiddle - React, Tailwind, and code Playground

by brendaz

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

body {
    font: 12px Arial;
}
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);

            });
            this.options.data.future.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...