JSFiddle - React, Tailwind, and code Playground

by Gordon Woodhull

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.12/dc.js"></script>
<div class="page-header">
        <h1>Data logger report</h1>
    </div>
    <div id='chart'>
     </div>

    <div class="month-eff-chart">
      <a class='reset' href='javascript:myChart.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
      <span class='reset' style='display: none;'>Current filter: <span class='filter'></span></span><br/>
    </div>
    <div class="day-eff-chart">
      <a class='reset' href='javascript:myChart.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
      <span class='reset' style='display: none;'>Current filter: <span class='filter'></span></span><br/>
    </div><br/>
    <div class="hour-eff-chart">
      <a class='reset' href='javascript:myChart.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
      <span class='reset' style='display: none;'>Current filter: <span class='filter'></span></span><br/>
    </div><br/>

CSS

div.dc-chart {
    float: left;
}

.dc-chart rect.bar {
    stroke: none;
    cursor: pointer;
}

.dc-chart rect.bar:hover {
    fill-opacity: .5;
}

.dc-chart rect.stack1 {
    stroke: none;
    fill: red;
}

.dc-chart rect.stack2 {
    stroke: none;
    fill: green;
}

.dc-chart rect.deselected {
    stroke: none;
    fill: #ccc;
}

.dc-chart .empty-chart .pie-slice path {
    fill: #FFEEEE;
    cursor: default;
}

.dc-chart .empty-chart .pie-slice {
    cursor: default;
}

.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-chart .pie-slice.external{
    fill: black;
}

.dc-chart .pie-slice :hover {
    fill-opacity: .8;
}

.dc-chart .pie-slice.highlight {
    fill-opacity: .8;
}

.dc-chart .selected path {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected path {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.dc-chart .axis text {
    font: 10px sans-serif;
}

.dc-chart .grid-line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .grid-line line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
    z-index: -999;
}

.dc-chart .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}

.dc-chart .brush .resize path {
    fill: #eee;
    stroke: #666;
}

.dc-chart path.line {
    fill: none;
    stroke-width: 1.5px;
}

.dc-chart circle.dot {
    stroke: none;
}

.dc-chart g.dc-tooltip path {
    fill: none;
    stroke: grey;
    stroke-opacity: .8;
}

.dc-chart path.area {
    fill-opacity: .3;
    stroke: none;
}

.dc-chart .node {
    font-size: 0.7em;
    cursor: pointer;
}

.dc-chart .node :hover {
    fill-opacity: .8;
}

.dc-chart .selected circle {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected circle...

JavaScript

var dataArray = 
  [{
    "id": "55a4ad4d32f8eae442d77e31",
    "cycle_time": 6,
    "efficiency": 80,
    "date": "Tue Jul 07 2015 09:51:50 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4d01b465b62381a8a9",
    "cycle_time": 10,
    "efficiency": 93,
    "date": "Sun May 31 2015 18:57:50 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4dfba45cff54ee54b4",
    "cycle_time": 6,
    "efficiency": 92,
    "date": "Fri Feb 27 2015 03:25:26 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4d4006624389f34d7d",
    "cycle_time": 6,
    "efficiency": 91,
    "date": "Tue Feb 17 2015 08:07:38 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4da48fe737e44e0b8c",
    "cycle_time": 9,
    "efficiency": 92,
    "date": "Wed Mar 25 2015 09:26:19 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4de5f40531c39aaee9",
    "cycle_time": 9,
    "efficiency": 95,
    "date": "Wed Jul 08 2015 06:07:15 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4d273be9f0e2650200",
    "cycle_time": 9,
    "efficiency": 95,
    "date": "Sun Feb 22 2015 16:11:28 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4d5e229f747c23c717",
    "cycle_time": 8,
    "efficiency": 80,
    "date": "Tue May 05 2015 09:47:49 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4dc6f8f9578bf2f1bb",
    "cycle_time": 6,
    "efficiency": 80,
    "date": "Wed Jul 08 2015 18:53:18 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4dd9826e860e6c60ae",
    "cycle_time": 9,
    "efficiency": 81,
    "date": "Wed Jun 24 2015 21:53:19 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4dac68b58658be1383",
    "cycle_time": 7,
    "efficiency": 87,
    "date": "Tue Jun 16 2015 14:26:57 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4dc12d212e02085695",
    "cycle_time": 8,
    "efficiency": 90,
    "date": "Fri Jul 03 2015 22:39:14 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4d518410f051041a97",
    "cycle_time": 7,
    "efficiency": 93,
    "date": "Sun Feb 15 2015 04:52:19 GMT+0000 (UTC)"
  },
  {
    "id": "55a4ad4da0e519bde6c1ff20",
    "cycle_time": 9,
    "efficiency": 95,
    "date": "Mon Jul...