JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>

<div id="container" style="width:1240px;height:688px;overflow:auto;border:1px solid #dbdbdb;border-radius:10px;"></div>

CSS

@font-face {
                    font-family: "KantarBrownWeb-LightItalic";
                    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
                    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"),
                         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"),
                         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
                    font-weight: normal;
                    font-style: normal;
                }
                
                @font-face {
                    font-family: "KantarBrownWeb-BoldItalic";
                    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
                    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"),
                         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"),
                         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
                    font-weight: normal;
                    font-style: normal;
                }
                
                @font-face {
                    font-family: "KantarBrownWeb-Italic";
                    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
                    src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"),
                         url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2")...

JavaScript

(input => {
    var chartWrapper = $("<div></div>").appendTo("#container")
        .attr("id", "chart_wrapper");

    var chartDiv = $("<div></div>").appendTo("#chart_wrapper")
        .attr("id", "chart_div");

    $('#chart_wrapper').append(`<style>
 #chart_wrapper{ 
 	width:1240px;
  height:688px;   
  position:relative;  
  padding: 35px 30px 20px 30px;  
  box-sizing:border-box;   
 }
 
 #chart_div{ 	
  	width:100%;
    height:100%;
 }
 
 #chart_wrapper div {
 	margin : 0px; 
 }
 
  #chart_wrapper p{
  	display: block;
    margin-top:0px;
    margin-bottom:0px;
 }
</style>`);
    var _incrementalDetails = [],
        _portfolioCanib = [],
        _brandCanib = [];

    input.chart_data.trial_growth.data_series.map(function (segment) {
        var name = segment.name;
        switch (classify(name)) {
            case "Incremental":
                _incrementalDetails.push(+segment.data);
                break;
            case "Portfolio":
                _portfolioCanib.push(+segment.data);
                break;
            case "Brand":
                _brandCanib.push(+segment.data);
                break;
        }
    });

    function classify(name) {
        if (name.includes("Incremental")) {
            return "Incremental";
        } else if (name.includes("Portfolio")) {
            return "Portfolio";
        }
        else if (name.includes("Brand")) {
            return "Brand";
        }
    }
    var max = 100, min = 0;
    var caldata = parseInt(((_incrementalDetails[0] + _portfolioCanib[0]) * 1.1));

    max = Math.round((parseInt(caldata / 10, 10) + 1) * 10);

    if (max > 100) {
        max = 100;
    }
    var chartHeader = `<div id=title></div>
        <div id=subTitle ></div>
        <div  id=chartTitle ></div>`;

    var trialGrowthSummary = `<div class='trialGrowthSummaryDiv' >
                                        <div id='trialGrowthSummaryChart' ></div>
                                             <div id="incCanvasDiv">
     ...