JSFiddle - React, Tailwind, and code Playground

by damyanpetev

HTML

<script src="http://cdn-na.infragistics.com/jquery/20122/latest/js/infragistics.loader.js"></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='pctLegend'></div>
            <div id='leagueLegend'></div>
             <select id="series">
                <option value="Completions" selected="selected" data-path="Comp" data-percentPath="ComplPct">Completions</option>
                <option value="Touchdowns" data-path="TD" data-percentPath="TDpct">Touchdowns</option>
                <option value="Interceptions" data-path="INT" data-percentPath="INTpct">Interceptions</option>
                <option value="Total Yards" data-path="Yds">Total Yards</option>
                <option value="Yards Per Attempt" data-path="YA">Yards Details</option>
            </select>
        </div>
    </div>
    <div id="chartContainer">
            <div id="seriesSwitch" ><input name="cbx" id="cbx" type="checkbox" checked="checked" onchange="seriesCheckboxChanged(event)"/><label for="cbx"> League Comparison </label> </div>
            <div id="yardsSwitch">
                <ol id="selectable" style="display: none">
                    <li class="ui-state-default ui-selected" data-path="YA">Yards Per Attempt</li>
                    <li class="ui-state-default" data-path="YG">Yards Per Game</li>
                </ol>
            </div>
        <div id="chart"></div>
    </div>

CSS

html,body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Segoe UI, Tahoma, Verdana, Arial, sans-serif;
}
.topBar{
    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%;
}
#container{
    background-color: #f3f1ea;
}
.ui-widget-content{
    background-color: #f3f1ea !important;
}
.ui-corner-all{
    border-radius: 0px !important;
}
#seriesSwitch {
    float:right; 
    top: 2em;
    right: 2em;
    z-index: 9999; 
    padding: .1em;
    background: rgba(255, 255, 255, 0.5);
    position: relative
}
#selectable li { 
    float: left; 
    text-align: center; 
    cursor: default;
}
#yardsSwitch {
    float:left; 
    top: 2em;
    left: 2em;
    z-index: 9999; 
    list-style-type: none;
    position: relative
}
#yardsSwitch > ol{
    list-style-type: none;
}

#yardsSwitch > ol > li{
    padding-top: 0.1em;
    padding-right: 0.3em;
    padding-bottom: 0.1em;
    padding-left: 0.3em;
    text-shadow: none;
    color: #000;
    
}
#selectable .ui-selecting { background: #917272; }
#selectable .ui-selected { background: #f3f1ea;}

JavaScript

var width;
var height;
var lastWidth = width;
var lastHeight = height;
var columnSeriesGap = 10;
 /* brushes */
var transperantBrush = "rgba(0,0,0,0)", attemptsBrush = "#5e7086", secondCoumnSeriesBrush = "#2d2e35", percentSeriesBrush = "#ca3525", leagueComparisonBrush = '#D08504', 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: "http://cdn-na.infragistics.com/jquery/20121/2049/js",
    cssPath: "http://cdn-na.infragistics.com/jquery/20122/latest/css",
    resources: "igDataChart.Category.RangeCategory"
});
$.ig.loader(function() {
    $( "#selectable" ).selectable({
        selected: function (e, ui) {
            var newPath = $(ui.selected).data("path");    
            var index = $("#selectable li").index(ui.selected);
            $("#chart").igDataChart("option", "series", [{ name: "Attempts", title: ui.selected.textContent, valueMemberPath: newPath}]); 
            $("#chart").igDataChart("option", "series", [{ name: "leagueAttempts", title: ui.selected.textContent, lowMemberPath: newPath, highMemberPath: newPath}]); 
            if(index == 1){
                $("#chart").igDataChart("option", "axes", [{ name: "yAxis", maximumValue: 300}]);
            }
            else{
                $("#chart").igDataChart("option", "axes", [{ name: "yAxis", maximumValue: 50}]);
            }
        }
    });
    $( "#selectable" ).hide();
    width = $("#chartContainer").width();
    height = $("#chartContainer").height();
    
    $("#chart").igDataChart({
        gridMode: "none",
        width: width + "px",
...