feat(chartGraph): convert graph data, add error/loading states

* parse the Redux date and sockets inputs and generate chart data and
tooltips
* add error state and zeroed array
* loading skeletor

public/locales/en.json

@@ -1,6 +1,8 @@
 {
   "curiosity-graph": {
     "heading": "Daily CPU socket usage",
-    "dropdownDefault": "Last 30 Days"
+    "dropdownDefault": "Last 30 Days",
+    "socketsOn": "sockets on",
+    "fromPrevious": "from previous day"
   }
 }

src/common/__tests__/__snapshots__/graphHelpers.test.js.snap

@@ -1,11 +1,84 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`GraphHelpers should convert graph data and generate tooltips when usage is populated: usage populated 1`] = `
+Array [
+  Object {
+    "label": "56 sockets on Jun 1",
+    "x": "Jun 1",
+    "y": 56,
+  },
+  Object {
+    "label": "30 sockets on Jun 2 
+ -26 from previous day",
+    "x": "Jun 2",
+    "y": 30,
+  },
+  Object {
+    "label": "40 sockets on Jun 3 
+ +10 from previous day",
+    "x": "Jun 3",
+    "y": 40,
+  },
+]
+`;
+
+exports[`GraphHelpers should convert graph data and return zeroed usage array if usage is empty: zeroed array 1`] = `
+Array [
+  Object {
+    "x": "Jun 1",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 2",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 3",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 4",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 5",
+    "y": 0,
+  },
+]
+`;
+
+exports[`GraphHelpers should convert graph data and returned zeroed array when usage throws error: throws error 1`] = `
+Array [
+  Object {
+    "x": "Jun 1",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 2",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 3",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 4",
+    "y": 0,
+  },
+  Object {
+    "x": "Jun 5",
+    "y": 0,
+  },
+]
+`;
+
 exports[`GraphHelpers should have specific functions: helpers 1`] = `
 Object {
   "convertGraphData": [Function],
   "getGraphHeight": [Function],
   "getTooltipDimensions": [Function],
   "getTooltipFontSize": [Function],
+  "zeroedUsageArray": [Function],
 }
 `;
 

src/common/__tests__/graphHelpers.test.js

@@ -1,13 +1,52 @@
+import moment from 'moment';
 import { graphHelpers, getGraphHeight, getTooltipDimensions, getTooltipFontSize } from '../graphHelpers';
 import { helpers } from '../helpers';
 
 describe('GraphHelpers', () => {
   const { breakpoints } = helpers;
+  const startDate = moment.utc(new Date('2019-06-01T00:00:00Z'));
+  const endDate = moment.utc(new Date('2019-06-05T00:00:00Z'));
+  const tSockectsOn = 'sockets on';
+  const tFromPrevious = 'from previous day';
 
   it('should have specific functions', () => {
     expect(graphHelpers).toMatchSnapshot('helpers');
   });
 
+  it('should convert graph data and return zeroed usage array if usage is empty', () => {
+    expect(
+      graphHelpers.convertGraphData({ usage: [], startDate, endDate, tSockectsOn, tFromPrevious })
+    ).toMatchSnapshot('zeroed array');
+  });
+
+  it('should convert graph data and generate tooltips when usage is populated', () => {
+    expect(
+      graphHelpers.convertGraphData({
+        usage: [
+          { cores: 56, date: '2019-06-01T00:00:00Z', instance_count: 28 },
+          { cores: 30, date: '2019-06-02T00:00:00Z', instance_count: 28 },
+          { cores: 40, date: '2019-06-03T00:00:00Z', instance_count: 28 }
+        ],
+        startDate,
+        endDate,
+        tSockectsOn,
+        tFromPrevious
+      })
+    ).toMatchSnapshot('usage populated');
+  });
+
+  it('should convert graph data and returned zeroed array when usage throws error', () => {
+    expect(
+      graphHelpers.convertGraphData({
+        usage: [null], // unexpected usage, will throw exception
+        startDate,
+        endDate,
+        tSockectsOn,
+        tFromPrevious
+      })
+    ).toMatchSnapshot('throws error');
+  });
+
   it('should match graph heights at all breakpoints', () => {
     expect(getGraphHeight(breakpoints, 'xs')).toMatchSnapshot('xs graph height');
     expect(getGraphHeight(breakpoints, 'sm')).toMatchSnapshot('sm graph height');

src/common/graphHelpers.js

@@ -1,39 +1,54 @@
-const convertGraphData = () => {
-  // todo: convert passed params to consumable chart data
+import moment from 'moment';
 
-  return [
-    { x: 'May 25', y: 30, label: '30 Sockets on May 25' },
-    { x: 'May 26', y: 60, label: '60 Sockets on May 26 \r\n +30 from previous day' },
-    { x: 'May 27', y: 1 },
-    { x: 'May 28', y: 1 },
-    { x: 'May 29', y: 2 },
-    { x: 'May 30', y: 2 },
-    { x: 'May 31', y: 2 },
-    { x: 'Jun 1', y: 2 },
-    { x: 'Jun 2', y: 2 },
-    { x: 'Jun 3', y: 2 },
-    { x: 'Jun 4', y: 2 },
-    { x: 'Jun 5', y: 2 },
-    { x: 'Jun 6', y: 3 },
-    { x: 'Jun 7', y: 3 },
-    { x: 'Jun 8', y: 3 },
-    { x: 'Jun 9', y: 3 },
-    { x: 'Jun 10', y: 4 },
-    { x: 'Jun 11', y: 4 },
-    { x: 'Jun 12', y: 4 },
-    { x: 'Jun 13', y: 4 },
-    { x: 'Jun 14', y: 4 },
-    { x: 'Jun 15', y: 4 },
-    { x: 'Jun 16', y: 4 },
-    { x: 'Jun 17', y: 3 },
-    { x: 'Jun 18', y: 3 },
-    { x: 'Jun 19', y: 1 },
-    { x: 'Jun 20', y: 2 },
-    { x: 'Jun 21', y: 5 },
-    { x: 'Jun 22', y: 3 },
-    { x: 'Jun 23', y: 1 },
-    { x: 'Jun 24', y: 1 }
-  ];
+const chartDateFormat = 'MMM D';
+
+const zeroedUsageArray = (startDate, endDate) => {
+  const zeroedArray = [];
+  const diff = endDate.diff(startDate, 'days');
+  for (let i = 0; i < diff + 1; i++) {
+    const clone = moment(startDate);
+    zeroedArray.push({ x: clone.add(i, 'days').format(chartDateFormat), y: 0 });
+  }
+  return zeroedArray;
+};
+
+const getLabel = (i, cores, previousCores, formattedDate, tSockectsOn, tFromPrevious) => {
+  if (i === 0) {
+    return `${cores} ${tSockectsOn} ${formattedDate}`;
+  }
+  const prev = cores - previousCores;
+  return `${cores} ${tSockectsOn} ${formattedDate} \r\n ${prev > -1 ? `+${prev}` : prev} ${tFromPrevious}`;
+};
+
+const convertGraphData = ({ usage, startDate, endDate, tSockectsOn, tFromPrevious }) => {
+  /**
+   * convert json usage report from this format:
+   * {cores: 56, date: "2019-06-01T00:00:00Z", instance_count: 28}
+   * to this format:
+   * { x: 'Jun 1', y: 56, label: '56 Sockets on Jun 1 \r\n +5 from previous day' },
+   */
+  if (usage === undefined || usage.length === 0) {
+    return zeroedUsageArray(startDate, endDate);
+  }
+  try {
+    const chartData = [];
+    for (let i = 0; i < usage.length; i++) {
+      const formattedDate = moment.utc(usage[i].date).format(chartDateFormat);
+      const label = getLabel(
+        i,
+        usage[i].cores,
+        i > 0 ? usage[i - 1].cores : null,
+        formattedDate,
+        tSockectsOn,
+        tFromPrevious
+      );
+      chartData.push({ x: formattedDate, y: usage[i].cores, label });
+    }
+    return chartData;
+  } catch (e) {
+    // todo: show error toast ?
+    return zeroedUsageArray(startDate, endDate);
+  }
 };
 
 const getGraphHeight = (breakpoints, currentBreakpoint) =>
@@ -68,11 +83,13 @@ const getTooltipFontSize = (breakpoints, currentBreakpoint) => {
   return 14;
 };
 
-const graphHelpers = { convertGraphData, getGraphHeight, getTooltipDimensions, getTooltipFontSize };
+const graphHelpers = { convertGraphData, getGraphHeight, getTooltipDimensions, getTooltipFontSize, zeroedUsageArray };
 
 export {
   graphHelpers as default,
   graphHelpers,
+  zeroedUsageArray,
+  chartDateFormat,
   convertGraphData,
   getGraphHeight,
   getTooltipDimensions,