JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></script>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div id="tooltip">
            <span id="tooltipLabel">Year:${item.Year}</span>
            <span id="tooltipValue">Value:${item.Value}</span>
        </div>
    </script>
<div id="container">
        <div class="topBar">
            <!-- These need to be separate because the chart will otherwise make a table out of all of them killing the layout -->
            <div id='firstLegend'></div>
            <div id='secLegend'></div>
            <div id='areaLegend' style="display: none;"></div>
             <select id="series">
                <option value="Rating" selected="selected" data-path="RAT">Rating</option>
                <option value="Completion Percentage" data-path="Comp">Completions</option>
                <option value="Interception Percentage" data-path="Int">Interceptions</option>
                <option value="Touchdown Percentage" data-path="TD">Touchdown</option>
                <option value="Touchdowns cumulated" data-path="TDcm">Touchdowns cumulated</option>
                <option value="Total Yards cumulated" data-path="Ydscm">Total Yards cumulated</option>
                <option value="Yards per Game cumulated" data-path="YGcm">Yards per Game cumulated</option>
                <option value="Yards per Attempt cumulated" data-path="YAcm">Yards per Attempt cumulated</option>
            </select>
        </div>
    </div>
    <div id="chartContainer">
        <div class="topLabel">
                <p id="unit">
                    rating
                </p>
        </div>
        <div id="chart"></div>
    </div>

CSS

html,body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Segoe UI, Tahoma, Verdana, Arial, sans-serif;
}
.topLabel > p{
    float: left;
    padding-left: 1.5em;
    margin: 0;
    font-size: smaller;
}
.topBar, .topLabel{
    overflow: auto;
    padding: 0.2em;
}
.topBar > div{
    float: left;
    /* override border from ui-corner-all*/
    border: none;
}
.topBar > select{
    float: right;
    right: 2em;
    height: 100%
}

#chartContainer{
    height: 80%;
    background-color: #f3f1ea;
}
#chart_chart_container{
    border-top: none;
}
#container{
    background-color: #f3f1ea;
}
.ui-widget-content{
    background-color: #f3f1ea !important;
}
.ui-corner-all{
    border-radius: 0px !important;
}

JavaScript

var width;
var height;
var lastWidth = width;
var lastHeight = height;

var mainLineData = [];
var leagueLineData = [];
var mainAreaData = [];
var linePath = "RAT";
var areaPath = "TDcm";

//This is updating the existing arrays that are bound against the chart series rather than changing member paths, etc.
var updateData = function() {
    var clear = false;
    if (mainLineData.length > 0) {
       clear = true;   
    }
         
   mainLineData.length = 0;
   leagueLineData.length = 0;
   mainAreaData.length = 0;
  
   
    
    for (var i = 0; i < data.length; i++) {
        mainLineData[i] = { Year: data[i].Year, Value: parseFloat(data[i][linePath]) };
    } 
    for (var i = 0; i < leagueData.length; i++) {
        leagueLineData[i] = { Year: leagueData[i].Year, Value: parseFloat(leagueData[i][linePath]) };
    } 
     for (var i = 0; i < data.length; i++) {
        mainAreaData[i] = { Year: data[i].Year, Value: parseFloat(data[i][areaPath]) };
    }       

    if (clear) {        
        $("#chart").igDataChart("notifyClearItems", mainLineData);
        $("#chart").igDataChart("notifyClearItems", leagueLineData);
        $("#chart").igDataChart("notifyClearItems", mainAreaData);
    }
}

var columnSeriesGap = 10;
 /* brushes */
var transperantBrush = "rgba(0,0,0,0)", leagueLineBrush = "#5e7086", joeLineBrush = "#2d2e35", percentSeriesBrush = "#ca3525", leagueComparisonBrush = 'rgba(255, 0, 0, 0.5)', plotAreaBrush = "#f3f1ea";
 
$(window).resize(function() {
        var width = $("#chartContainer").width();
        var height = $("#chartContainer").height();

        if (width != lastWidth || height != lastHeight) {
            $("#chart").igDataChart("option", "size", {
                width: width,
                height: height
            });
            $("#chart").igDataChart("flush");
            lastWidth = width;
            lastHeight = height;
        }
    });
$.ig.loader({
    scriptPath:...