JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div>

  <div id="container" style=" display: inline-block">

  </div>

  <div id="filters" style="vertical-align:top; display: inline-block; margin-left: 50px">
    <ul>
      <li>
        Infotype
        <ul>
          <li>
            <input type="checkbox" id="infotype" value='s' checked/>
            <label for="infotype">Infotype S</label>
          </li>
          <li>
            <input type="checkbox" id="infotype" class='def' value='a' checked/>
            <label for="moreTen">Infotype A</label>
          </li>
        </ul>
      </li>

      <li>
        BU/BD
        <ul>
          <li>
            <input type="checkbox" id="bu" value='srv' checked/>
            <label for="infotype">SRV</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='mlv' checked/>
            <label for="moreTen">MLV</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='cbd' checked/>
            <label for="moreTen">CBD</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='cbu' checked/>
            <label for="moreTen">CBU</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='smb' checked/>
            <label for="moreTen">SMB</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='tx' checked/>
            <label for="moreTen">Tx</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='hw' checked/>
            <label for="moreTen">HW</label>
          </li>
          <li>
            <input type="checkbox" id="bu" value='cloud' checked/>
            <label for="moreTen">Cloud</label>
          </li>
        </ul>
      </li>

    </ul>

  </div>

</div>

CSS

canvas {
  width: 300px;
}

#container {
  display: inline-block;
}

#filters ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.topmenu>li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

JavaScript

var jsonfile = [
  ["2", "6\/16\/2017", "ConditionalGo", "S", "SRV"],
  ["5", "6\/16\/2017", "GoProject", "S", "MLV"],
  ["7", "6\/16\/2017", "NoGoNow", "S", "CBU"],
  ["4", "", "idea", "S", "SMB"],
  ["9", "6\/16\/2017", "NoGO", "S", "CBU"],
  ["6", "6\/29\/2017", "ConditionalGo", "S", "MLV"],
  ["1", "6\/16\/2017", "GoProject", "A", "Tx"],
  ["12", "6\/29\/2017", "GoProject", "S", "Tx"],
  ["8", "", "idea", "S", "CBD"],
  ["11", "29\/8\/17 9:00", "GoProject", "S", "SMB"],
  ["10", "", "idea", "S", "Tx"],
  ["13", "29\/8\/17 9:30", "GoProject", "S", "SMB"],
  ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"],
  ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"],
  ["6", "6\/29\/2017", "ConditionalGo", "A", "MLV"],
  ["15", "29\/8\/17 10:00", "NoGoNow", "S", "MLV"],
  ["14", "29\/8\/17 10:30", "Closed", "S", "SRV"],
  ["24", "29\/8\/17 11:00", "NoGoNow", "S", "SRV"],
  ["9", "6\/16\/2017", "NoGO", "A", "CBU"],
  ["17", "29\/8\/17 11:30", "NoGo", "S", "CBD"],
  ["20", "29\/8\/17 12:00", "GoProject", "S", "MLV"],
  ["11", "29\/8\/17 9:00", "GoProject", "A", "SMB"],
  ["22", "31\/8\/17 14:00", "GoProject", "S", "CBU"],
  ["17", "", "idea", "S", "Tx"],
  ["13", "29\/8\/17 9:30", "GoProject", "A", "SMB"],
  ["23", "31\/8\/17 14:30", "GoProject", "S", "Tx"],
  ["14", "29\/8\/17 10:30", "NoGoNow", "A", "SRV"],
  ["14", "29\/8\/17 10:30", "NoGoNow", "A", "SRV"],
  ["19", "", "idea", "S", "MLV"],
  ["15", "29\/8\/17 10:00", "NoGoNow", "A", "MLV"],
  ["16", "31\/8\/17 16:00", "ConditionalGo", "A", "MLV"],
  ["16", "31\/8\/17 16:00", "ConditionalGo", "S", "CBU"],
  ["21", "", "idea", "S", "SRV"],
  ["18", "31\/8\/17 16:30", "NoGo", "S", "HW"],
  ["27", "9\/29\/2017", "ConditionalGo", "S", "CBU"],
  ["18", "31\/8\/17 16:30", "NoGo", "A", "HW"],
  ["28", "9\/29\/2017", "GoProject", "S", "CBU"],
  ["29", "9\/29\/2017", "GoProject", "S", "CBU"],
  ["26", "", "idea", "S", "Tx"],
  ["3", "11\/8\/2017", "GoProject", "S", "Tx"],
  ["22", "31\/8\/17 14:00", "GoProject", "A", "CBU"],
...