JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="width: 1240px;height: 688px;border-radius: 10px;border: 1px solid #dbdbdb;position:relative"></div>

CSS

/*
 * Legal Disclaimer
 *
    print '\n', 'Note that the webfonts share the TT sources'
 * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */



@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 => {
  //-chart one input
  var steadyvalue = input.grouped[1].data;
  var riskValue = input.grouped[0].data;
  var opportunityValue = input.grouped[2].data;
  //--chart two input
  var shareLostValue = input.ungrouped[0].data;
  var decreaseSpendValue = input.ungrouped[1].data;
  var shareGainedValue = input.ungrouped[2].data;
  var increaseSpendValue = input.ungrouped[3].data;
  var chart1boxvalueList = [];
  var chart2boxvalueList = [];
  var Chart1MaxValueList = [Math.max.apply(null, steadyvalue), Math.max.apply(null, riskValue), Math.max.apply(null, opportunityValue)];
  var chart1MaxValue = Math.max.apply(null, Chart1MaxValueList);
  var maxwidth = Math.max.apply(null, steadyvalue) + Math.max.apply(null, riskValue) + Math.max.apply(null, opportunityValue);
  var Chart2MaxValueList = [chart1MaxValue, Math.max.apply(null, shareLostValue), Math.max.apply(null, decreaseSpendValue), Math.max.apply(null, shareGainedValue), Math.max.apply(null, increaseSpendValue)];
  var chart2MaxValue = Math.max.apply(null, Chart2MaxValueList);

  
  var implicitChartwidth, steadyXPosition;

  if (input.cmpBrands.length > 6) {
    implicitChartwidth = 265;
    steadyXPosition = 144;
  } else if (input.cmpBrands.length <= 6 && input.cmpBrands.length > 4) {
    implicitChartwidth = 367;
    steadyXPosition = 184;
  } else {
    implicitChartwidth = 571;
    steadyXPosition = 286;
  }

  var implicitChartHeight = 247;
  var steadyYPosition = 140;
  var AtRiskboxvalue;
  var Steadyboxvalue;
  var Opportunityboxvalue;
  var scale = 58;
  //box size scale function
  function boxwidthcalc(chartdata, boxsize, Maxvalue) {
    for (var a = 0; a < chartdata.length; a++) {
      var obj = [];
      for (var b = 0; b < chartdata[a].data.length; b++) {
        if (chartdata[a].data[b] === Maxvalue)
          obj.push(scale);
        else
          obj.push(Math.sqrt((chartdata[a].data[b] / Maxvalue) * scale * scale));
      }
      boxsize.push(obj);
    }
  }

  var...