JSFiddle - React, Tailwind, and code Playground

by Jaume Vinyes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="comboChart"/>

JavaScript

// The service just have to care on returning soethng like that
var data = [  
   {  
      "Customer":"ZILLACON",
      "OPCO":"CAN",
      "NDTShifts":1,
      "CustomerShifts":9,
      "ConfidenceLevel":"LOW",
      "ReceiveMonth":6
   },
   {  
      "Customer":"ECRAZE",
      "OPCO":"APA",
      "NDTShifts":3,
      "CustomerShifts":8,
      "ConfidenceLevel":"LOW",
      "ReceiveMonth":4
   },
   {  
      "Customer":"ECRAZE",
      "OPCO":"CAN",
      "NDTShifts":10,
      "CustomerShifts":10,
      "ConfidenceLevel":"HIGH",
      "ReceiveMonth":10
   },
   {  
      "Customer":"ACCIDENCY",
      "OPCO":"USA",
      "NDTShifts":9,
      "CustomerShifts":9,
      "ConfidenceLevel":"LOW",
      "ReceiveMonth":11
   },
   {  
      "Customer":"ACCIDENCY",
      "OPCO":"LAT",
      "NDTShifts":5,
      "CustomerShifts":9,
      "ConfidenceLevel":"LOW",
      "ReceiveMonth":5
   },
   {  
      "Customer":"ECRAZE",
      "OPCO":"MEA",
      "NDTShifts":9,
      "CustomerShifts":8,
      "ConfidenceLevel":"HIGH",
      "ReceiveMonth":4
   },
   {  
      "Customer":"DANJA",
      "OPCO":"MEA",
      "NDTShifts":5,
      "CustomerShifts":4,
      "ConfidenceLevel":"LOW",
      "ReceiveMonth":12
   },
   {  
      "Customer":"ZILLACON",
      "OPCO":"USA",
      "NDTShifts":10,
      "CustomerShifts":7,
      "ConfidenceLevel":"HIGH",
      "ReceiveMonth":3
   },
   {  
      "Customer":"ECRAZE",
      "OPCO":"USA",
      "NDTShifts":4,
      "CustomerShifts":10,
      "ConfidenceLevel":"MEDIUM",
      "ReceiveMonth":4
   },
   {  
      "Customer":"ZILLACON",
      "OPCO":"LAT",
      "NDTShifts":10,
      "CustomerShifts":9,
      "ConfidenceLevel":"HIGH",
      "ReceiveMonth":7
   },
   {  
      "Customer":"ACCIDENCY",
      "OPCO":"MEA",
      "NDTShifts":4,
      "CustomerShifts":3,
      "ConfidenceLevel":"MEDIUM",
      "ReceiveMonth":8
   },
   {  
      "Customer":"PAWNAGRA",
      "OPCO":"LAT",
      "NDTShifts":3,
      "CustomerShifts":8,
     ...