fix(chartHelpers): ent-4135 custom x, y, filter NaN and undefined (#783)

RedHatInsights · Dec 6, 2021 · a106d13 · a106d13
1 parent 2352806
commit a106d13
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/src/components/chart/__tests__/__snapshots__/chartHelpers.test.js.snap b/src/components/chart/__tests__/__snapshots__/chartHelpers.test.js.snap
@@ -56,6 +56,21 @@ Object {
 }
 `;
 
+exports[`ChartHelpers should generate element props: custom valueFormats 1`] = `
+Object {
+  "xValueNaN": 0,
+  "xValueNull": null,
+  "xValueNumber": 0,
+  "xValueString": "lorem",
+  "xValueUndefined": 0,
+  "yValueNaN": 0,
+  "yValueNull": null,
+  "yValueNumber": 0,
+  "yValueString": "ipsum",
+  "yValueUndefined": 0,
+}
+`;
+
 exports[`ChartHelpers should generate element props: props 1`] = `
 Object {
   "elements": Array [

diff --git a/src/components/chart/__tests__/chartHelpers.test.js b/src/components/chart/__tests__/chartHelpers.test.js
@@ -110,6 +110,61 @@ describe('ChartHelpers', () => {
     };
 
     expect(chartHelpers.generateElementsProps(options)).toMatchSnapshot('props');
+
+    const customOptions = {
+      dataSets: [
+        {
+          id: 'lorem',
+          data: [
+            { x: 0, y: 10 },
+            { x: 1, y: 10 },
+            { x: 2, y: 10 },
+            { x: 3, y: 10 },
+            { x: 4, y: 10 },
+            { x: 5, y: 10 }
+          ]
+        }
+      ]
+    };
+
+    const { x: xValueNumber, y: yValueNumber } = chartHelpers.generateElementsProps({
+      ...customOptions,
+      xValueFormat: () => 0,
+      yValueFormat: () => 0
+    })?.elementsById.lorem.props;
+    const { x: xValueNaN, y: yValueNaN } = chartHelpers.generateElementsProps({
+      ...customOptions,
+      xValueFormat: () => Number.NaN,
+      yValueFormat: () => Number.NaN
+    })?.elementsById.lorem.props;
+    const { x: xValueUndefined, y: yValueUndefined } = chartHelpers.generateElementsProps({
+      ...customOptions,
+      xValueFormat: () => undefined,
+      yValueFormat: () => undefined
+    })?.elementsById.lorem.props;
+    const { x: xValueNull, y: yValueNull } = chartHelpers.generateElementsProps({
+      ...customOptions,
+      xValueFormat: () => null,
+      yValueFormat: () => null
+    })?.elementsById.lorem.props;
+    const { x: xValueString, y: yValueString } = chartHelpers.generateElementsProps({
+      ...customOptions,
+      xValueFormat: () => 'lorem',
+      yValueFormat: () => 'ipsum'
+    })?.elementsById.lorem.props;
+
+    expect({
+      xValueNumber: xValueNumber(),
+      yValueNumber: yValueNumber(),
+      xValueNaN: xValueNaN(),
+      yValueNaN: yValueNaN(),
+      xValueUndefined: xValueUndefined(),
+      yValueUndefined: yValueUndefined(),
+      xValueNull: xValueNull(),
+      yValueNull: yValueNull(),
+      xValueString: xValueString(),
+      yValueString: yValueString()
+    }).toMatchSnapshot('custom valueFormats');
   });
 
   it('should generate tooltip data/content', () => {

diff --git a/src/components/chart/chartHelpers.js b/src/components/chart/chartHelpers.js
@@ -141,16 +141,28 @@ const generateElementsProps = ({ dataSets = [], maxX, maxY, xValueFormat, yValue
         style: { ...(dataSet.style || {}), ...dataColorStroke },
         themeColor: dataSet.themeColor,
         themeVariant: dataSet.themeVariant,
-        x: (xValueFormat && (datum => xValueFormat({ datum, maxX }))) || undefined,
-        y:
-          (yValueFormat &&
-            (datum =>
-              yValueFormat({
-                datum,
-                isMultiAxis: typeof maxY !== 'number',
-                maxY: typeof maxY === 'number' ? maxY : maxY?.[dataSet.id]
-              }))) ||
-          (datum => (typeof maxY === 'number' ? datum.y : datum.y / maxY?.[dataSet.id]))
+        x:
+          (xValueFormat &&
+            (datum => {
+              const xValue = xValueFormat({ datum, maxX });
+              return xValue === undefined || Number.isNaN(xValue) ? 0 : xValue;
+            })) ||
+          undefined,
+        y: datum => {
+          let yValue;
+
+          if (yValueFormat) {
+            yValue = yValueFormat({
+              datum,
+              isMultiAxis: typeof maxY !== 'number',
+              maxY: typeof maxY === 'number' ? maxY : maxY?.[dataSet.id]
+            });
+          } else {
+            yValue = typeof maxY === 'number' ? datum.y : datum.y / maxY?.[dataSet.id];
+          }
+
+          return yValue === undefined || Number.isNaN(yValue) ? 0 : yValue;
+        }
       };
 
       const props = { ...chartElementProps };