JSFiddle - React, Tailwind, and code Playground

by JaelB

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.2/dc.js"></script>
<html>
<body>
<div class='dc-chart' id = 'composite'>
  <a class="reset" href="javascript:multiLineChart.filterAll();timeSlider.filterAll();dc.redrawAll();" style="display: none;">reset</a>
</div>
<div class='dc-chart' id = 'slider'></div>
</body>
</html>

CSS

div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 220px;                  
  height: 125px;                 
  padding: 2px;             
  font: 12px Arial;        
  background: white;  
  border: solid 1px;
  border-color: lightgrey;
  border-radius: 4px;           
  pointer-events: none;         
}
.toolHead{
  padding: 5px;
  text-align: left;
  font-family: sans-serif;
  border-bottom: 2px solid #2196F3;
  font-size: 14px;
  /* border-bottom: 1px dashed black; */
  -webkit-text-fill-color: #2196F3;
}
td{
  padding: 5px;
  text-align: right;
  font-family: sans-serif;
}

JavaScript

var multiLineChart = dc.compositeChart('#composite');
var timeSlider = dc.lineChart('#slider');

d3.csv('https://raw.githubusercontent.com/JaelB/Generic-DC.js-Chart/master/sample.csv').then(function(data){


var timeFmt = d3.timeParse('%d/%m/%y %H:%M');

var mappedArray = d3.entries(data[0]);

var valueKey = data.columns;

var ndx = crossfilter(data);
var all = ndx.groupAll();

var testDim = ndx.dimension(function(d){return timeFmt(d[mappedArray[0].key]); });

var testGrp1 = testDim.group().reduce(
  function(p,v){
    ++p.count;
    for (let i = 1; i < mappedArray.length; i++) {
      p["col" + i] = +v[mappedArray[i].key];
    }
    return p;
  },
  function(p,v){
    --v.count;
    for (let i = 1; i < mappedArray.length; i++) {
      p["col" + i] = +v[mappedArray[i].key];
    }
    return p;
  },
  function(){return { count: 0 };}
);


var startDate = timeFmt(testDim.bottom(1)[0].Date);
var endDate = timeFmt(testDim.top(1)[0].Date);

colors = ['#3b3eac',"#d11141","#00b159", "#00aedb", "#f37735", "#ffc425", "#bb5ef2", "#c97a57", "#fd3acd", "#3b3eac"]

function makeComposeArray() {
  var composeArr = [];
  for(let i=1; i< mappedArray.length; i++) {
    composeArr.push(
      dc.lineChart(multiLineChart)
      .group(testGrp1, valueKey[i]) //, function(d){return d['col'+i]})
      .valueAccessor(function(d){return d.value["col" + i]})
      .colors(colors[i])
    );
  }
  return composeArr;
}

function toolTipNames(d){
  var x = [];
  for(i = 0; i< mappedArray.length; i++){
    x.push('d.value.col'+i)
  }
  x = x.map(function(d){return d; })
  var tooltipArr = [];
  for(let i = 1; i < mappedArray.length; i++){
    tooltipArr.push(
      valueKey[i] + ': ' + d.value["col" + i]
    );
  }
  return tooltipArr.join('\n');
}

function legendToggle(chart) {
  chart.selectAll('g.dc-legend .dc-legend-item')
    .on('click.hideshow', function(d, i) {
      var subchart = chart.select('g.sub._' + i);
      var visible = subchart.style('visibility') !== 'hidden';
     ...