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="height: 688px;margin-top:35px;width:1240px;overflow:auto;margin:auto;border-radius:6px;border:1px solid #dbdbdb;padding: 0px 30px;"></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") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
 ...

JavaScript

(input => {
  //Golden Ratio generator
  /******************************************************************************************/
  var golden_ratio = 0.618033988749895;
  var h = 0.37;
  var s = 0.42;
  var v = 0.62;
  //input master brand list
  masterBrandList = input.masterBrandList;
  //dictionary which contains key/value pair of brand and color
  var brandsPallette = new Map();
  //convert RGB to HEX
  function RGBtoHEX(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  }

  //generate colours w.r.t brand
  for (var i = 0; i < masterBrandList.length; i++) {
    h = (h + golden_ratio) % 1;
    s = ((s + golden_ratio) % 0.6) + 0.3;
    v = ((v + golden_ratio) % 0.5) + 0.4;

    _rgb = HSVtoRGB(h, s, v);

    brandsPallette.set(masterBrandList[i], RGBtoHEX(_rgb[0], _rgb[1], _rgb[2]));
  }

  //HSV to RGB
  function HSVtoRGB(h, s, v) {
    var r, g, b, i, f, p, q, t;
    i = Math.floor(h * 6);
    f = h * 6 - i;
    p = v * (1 - s);
    q = v * (1 - f * s);
    t = v * (1 - (1 - f) * s);
    switch (i % 6) {
      case 0:
        r = v, g = t, b = p;
        break;
      case 1:
        r = q, g = v, b = p;
        break;
      case 2:
        r = p, g = v, b = t;
        break;
      case 3:
        r = p, g = q, b = v;
        break;
      case 4:
        r = t, g = p, b = v;
        break;
      case 5:
        r = v, g = p, b = q;
        break;
    }
    return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
  }

  /******************************************************************************************/

  /*********************************** Perchentage change line/area chart*************************/
  // line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
  // Determine the intersection point of two line segments
  // Return FALSE if the lines don't intersect
  function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {

    // Check if none of the lines are of...