JSFiddle - React, Tailwind, and code Playground

by maciejgurban

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.13.0/polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/3.5.0/chai.js"></script>
<!-- No need to change this -->
<!-- Mocha test output goes here. -->
<div id="mocha"></div>

JavaScript

/* ACTUAL IMPLEMENTATION */
const responseToTimeseries = (response) => {
const output = {};

 if (!Array.isArray(response) || !response.length) {
 return output;
 }

 const len = response.length;

 for (let i = 0; i < len; i++) {
 if (!response[i].data) continue;

 const data = response[i].data;

 data.forEach((elem) => {
 let [key, value] = elem;

 if (!output[key]) {
   output[key] = {
     x: key,
     points: new Array(len).fill(0), // zero inited array of
     total: 0,
	 };
 }

 output[key].points[i] = value;
 output[key].total += value;
 });
 }
 
 return output;
};

/* TESTS */
// Configure Mocha, telling both it and chai to use BDD-style tests.
mocha.setup("bdd");
chai.should();

describe('responseToTimeseries()', () => {
	describe('when receiving data for one point in time', () => { 
  	it('returns the expected output', () => {
      const input = [
        { data: [[1242362340000, 10], [1242362340001, 4]] },
      ];
      const output = {
        1242362340000: {
          x: 1242362340000,
          points: [10],
          total: 10,
        },
        1242362340001: {
        	x: 1242362340001,
          points: [4],
          total: 4,
        }
      };
			responseToTimeseries(input).should.deep.equal(output);
    });
  });
  
  describe('when receiving data for multiple points in time', () => { 
  	it('returns the expected output', () => {
      const input = [
        { data: [[1242362340000, 10], [1242362340001, 4]] },
        { data: [[1242362340000, 6], [1242362340001, 9]] },
        { data: [[1242362340000, 11], [1242362340001, 13]] },
      ];
      const output = {
        1242362340000: {
          x: 1242362340000,
          points: [10, 6, 11],
          total: 27,
        },
        1242362340001: {
        	x: 1242362340001,
          points: [4, 9, 13],
          total: 26,
        }
      };
			responseToTimeseries(input).should.deep.equal(output);
    });
  });
  
  describe('when some point is missing', () => { 
  	it('returns the...