fix(graphCardHelpers): issues/317 yAxisTickFormatFallback (RedHatInsi…

…ghts#323) * graphCardHelpers, apply abbreviation fallback
cdcabrera · Jun 17, 2020 · de65090 · de65090
1 parent 577adb9
commit de65090
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 16 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
@@ -24,6 +24,7 @@ Object {
   "getTooltipDate": [Function],
   "xAxisTickFormat": [Function],
   "yAxisTickFormat": [Function],
+  "yAxisTickFormatFallback": [Function],
 }
 `;
 
@@ -280,3 +281,163 @@ Object {
   "90000000000": "90B",
 }
 `;
+
+exports[`GraphCardHelpers yAxisTickFormat should produce consistent y axis tick values: y axis tick values, yAxisTickFormatFallback 1`] = `
+Object {
+  "1": "1",
+  "10": "10",
+  "100": "100",
+  "1000": "1K",
+  "10000": "10K",
+  "100000": "100K",
+  "1000000": "1M",
+  "10000000": "10M",
+  "100000000": "100M",
+  "1000000000": "1B",
+  "10000000000": "10B",
+  "100000000000": "100B",
+  "11": "11",
+  "110": "110",
+  "1100": "1.1K",
+  "11000": "11K",
+  "110000": "110K",
+  "1100000": "1.1M",
+  "11000000": "11M",
+  "110000000": "110M",
+  "1100000000": "1.1B",
+  "11000000000": "11B",
+  "110000000000": "110B",
+  "12": "12",
+  "120": "120",
+  "1200": "1.2K",
+  "12000": "12K",
+  "120000": "120K",
+  "1200000": "1.2M",
+  "12000000": "12M",
+  "120000000": "120M",
+  "1200000000": "1.2B",
+  "12000000000": "12B",
+  "120000000000": "120B",
+  "13": "13",
+  "130": "130",
+  "1300": "1.3K",
+  "13000": "13K",
+  "130000": "130K",
+  "1300000": "1.3M",
+  "13000000": "13M",
+  "130000000": "130M",
+  "1300000000": "1.3B",
+  "13000000000": "13B",
+  "130000000000": "130B",
+  "14": "14",
+  "140": "140",
+  "1400": "1.4K",
+  "14000": "14K",
+  "140000": "140K",
+  "1400000": "1.4M",
+  "14000000": "14M",
+  "140000000": "140M",
+  "1400000000": "1.4B",
+  "14000000000": "14B",
+  "140000000000": "140B",
+  "15": "15",
+  "150": "150",
+  "1500": "1.5K",
+  "15000": "15K",
+  "150000": "150K",
+  "1500000": "1.5M",
+  "15000000": "15M",
+  "150000000": "150M",
+  "1500000000": "1.5B",
+  "15000000000": "15B",
+  "150000000000": "150B",
+  "2": "2",
+  "20": "20",
+  "200": "200",
+  "2000": "2K",
+  "20000": "20K",
+  "200000": "200K",
+  "2000000": "2M",
+  "20000000": "20M",
+  "200000000": "200M",
+  "2000000000": "2B",
+  "20000000000": "20B",
+  "3": "3",
+  "30": "30",
+  "300": "300",
+  "3000": "3K",
+  "30000": "30K",
+  "300000": "300K",
+  "3000000": "3M",
+  "30000000": "30M",
+  "300000000": "300M",
+  "3000000000": "3B",
+  "30000000000": "30B",
+  "4": "4",
+  "40": "40",
+  "400": "400",
+  "4000": "4K",
+  "40000": "40K",
+  "400000": "400K",
+  "4000000": "4M",
+  "40000000": "40M",
+  "400000000": "400M",
+  "4000000000": "4B",
+  "40000000000": "40B",
+  "5": "5",
+  "50": "50",
+  "500": "500",
+  "5000": "5K",
+  "50000": "50K",
+  "500000": "500K",
+  "5000000": "5M",
+  "50000000": "50M",
+  "500000000": "500M",
+  "5000000000": "5B",
+  "50000000000": "50B",
+  "6": "6",
+  "60": "60",
+  "600": "600",
+  "6000": "6K",
+  "60000": "60K",
+  "600000": "600K",
+  "6000000": "6M",
+  "60000000": "60M",
+  "600000000": "600M",
+  "6000000000": "6B",
+  "60000000000": "60B",
+  "7": "7",
+  "70": "70",
+  "700": "700",
+  "7000": "7K",
+  "70000": "70K",
+  "700000": "700K",
+  "7000000": "7M",
+  "70000000": "70M",
+  "700000000": "700M",
+  "7000000000": "7B",
+  "70000000000": "70B",
+  "8": "8",
+  "80": "80",
+  "800": "800",
+  "8000": "8K",
+  "80000": "80K",
+  "800000": "800K",
+  "8000000": "8M",
+  "80000000": "80M",
+  "800000000": "800M",
+  "8000000000": "8B",
+  "80000000000": "80B",
+  "9": "9",
+  "90": "90",
+  "900": "900",
+  "9000": "9K",
+  "90000": "90K",
+  "900000": "900K",
+  "9000000": "9M",
+  "90000000": "90M",
+  "900000000": "900M",
+  "9000000000": "9B",
+  "90000000000": "90B",
+}
+`;
diff --git a/src/components/graphCard/__tests__/graphCardHelpers.test.js b/src/components/graphCard/__tests__/graphCardHelpers.test.js
@@ -4,7 +4,8 @@ import {
   getChartXAxisLabelIncrement,
   getTooltipDate,
   xAxisTickFormat,
-  yAxisTickFormat
+  yAxisTickFormat,
+  yAxisTickFormatFallback
 } from '../graphCardHelpers';
 import { dateHelpers } from '../../../common';
 import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES } from '../../../types/rhsmApiTypes';
@@ -83,16 +84,19 @@ describe('GraphCardHelpers', () => {
   });
 
   it('yAxisTickFormat should produce consistent y axis tick values', () => {
-    const ticks = {};
-
-    for (let i = 0; i < 11; i++) {
-      const multiplier = Math.pow(10, i);
-      for (let k = 1; k < 16; k++) {
-        const incrementMultiplier = k * multiplier;
-        ticks[incrementMultiplier] = yAxisTickFormat({ tick: incrementMultiplier });
+    const generateTicks = (method = yAxisTickFormat) => {
+      const ticks = {};
+      for (let i = 0; i < 11; i++) {
+        const multiplier = Math.pow(10, i);
+        for (let k = 1; k < 16; k++) {
+          const incrementMultiplier = k * multiplier;
+          ticks[incrementMultiplier] = method({ tick: incrementMultiplier });
+        }
       }
-    }
+      return ticks;
+    };
 
-    expect(ticks).toMatchSnapshot('y axis tick values');
+    expect(generateTicks()).toMatchSnapshot('y axis tick values');
+    expect(generateTicks(yAxisTickFormatFallback)).toMatchSnapshot('y axis tick values, yAxisTickFormatFallback');
   });
 });
diff --git a/src/components/graphCard/graphCardHelpers.js b/src/components/graphCard/graphCardHelpers.js
@@ -101,6 +101,43 @@ const xAxisTickFormat = ({ date, granularity, tick, previousDate }) => {
   return formattedDate;
 };
 
+/**
+ * ToDo: Remove yAxisTickFormatFallback.
+ * Appears Linux combined with Firefox has an issue using `Intl.NumberFormat` method.
+ * We've applied shim code from NumeralJS and Numbro as a fallback. Up-to-date
+ * browsers still have the optimal version with locale. If the original package used
+ * corrects its rounding behavior we may consider re-implementing it.
+ */
+/**
+ * Fallback method for Linux and Firefox.
+ *
+ * @param {object} params
+ * @param {number|string} params.tick
+ * @returns {string}
+ */
+const yAxisTickFormatFallback = ({ tick }) => {
+  const abs = Math.abs(tick);
+  let updatedTick = tick;
+  let updatedAbbr = '';
+
+  if (abs >= Math.pow(10, 12)) {
+    updatedAbbr = 'T';
+    updatedTick = tick / Math.pow(10, 12);
+  } else if (abs < Math.pow(10, 12) && abs >= Math.pow(10, 9)) {
+    updatedAbbr = 'B';
+    updatedTick = tick / Math.pow(10, 9);
+  } else if (abs < Math.pow(10, 9) && abs >= Math.pow(10, 6)) {
+    updatedAbbr = 'M';
+    updatedTick = tick / Math.pow(10, 6);
+  } else if (abs < Math.pow(10, 6) && abs >= Math.pow(10, 3)) {
+    updatedAbbr = 'K';
+    updatedTick = tick / Math.pow(10, 3);
+  }
+
+  return `${updatedTick}${updatedAbbr}`;
+};
+
+// ToDo: remove yAxisTickFormatFallback check.
 /**
  * Format y axis ticks.
  *
@@ -109,16 +146,26 @@ const xAxisTickFormat = ({ date, granularity, tick, previousDate }) => {
  * @param {string} params.locale
  * @returns {string}
  */
-const yAxisTickFormat = ({ tick, locale = helpers.UI_LOCALE_DEFAULT }) =>
-  new Intl.NumberFormat(locale, { maximumFractionDigits: 1, notation: 'compact', compactDisplay: 'short' }).format(
-    tick
-  );
+const yAxisTickFormat = ({ tick, locale = helpers.UI_LOCALE_DEFAULT }) => {
+  let updatedTick = `${new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 1,
+    notation: 'compact',
+    compactDisplay: 'short'
+  }).format(tick)}`;
+
+  if (updatedTick.length > 3 && updatedTick.length >= `${tick}`.length) {
+    updatedTick = yAxisTickFormatFallback({ tick });
+  }
+
+  return updatedTick;
+};
 
 const graphCardHelpers = {
   getChartXAxisLabelIncrement,
   getTooltipDate,
   xAxisTickFormat,
-  yAxisTickFormat
+  yAxisTickFormat,
+  yAxisTickFormatFallback
 };
 
 export {
@@ -127,5 +174,6 @@ export {
   getChartXAxisLabelIncrement,
   getTooltipDate,
   xAxisTickFormat,
-  yAxisTickFormat
+  yAxisTickFormat,
+  yAxisTickFormatFallback
 };