Introduce optional fillValue property on DataSeries

Shopify · Nov 30, 2023 · 7fda699 · 7fda699
1 parent 55a5127
commit 7fda699
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 4 deletions.
diff --git a/packages/polaris-viz-core/src/types.ts b/packages/polaris-viz-core/src/types.ts
@@ -15,6 +15,7 @@ export interface DataSeries {
   name?: string;
   metadata?: {[key: string]: any};
   styleOverride?: StyleOverride;
+  fillValue?: number | null;
 }
 
 interface StyleOverride {

diff --git a/packages/polaris-viz/src/utilities/fillMissingDataPoints.ts b/packages/polaris-viz/src/utilities/fillMissingDataPoints.ts
@@ -1,11 +1,11 @@
 import type {DataSeries} from '@shopify/polaris-viz-core';
 
 export function fillMissingDataPoints(dataSeries: DataSeries[]) {
-  const areAnyComparrison = dataSeries.some(
+  const areAnyComparison = dataSeries.some(
     ({isComparison}) => isComparison === true,
   );
 
-  if (areAnyComparrison) {
+  if (areAnyComparison) {
     return dataSeries;
   }
 
@@ -27,10 +27,10 @@ export function fillMissingDataPoints(dataSeries: DataSeries[]) {
   return dataSeries.map((series, index) => {
     const newData = [...allKeys].map((key) => {
       const dataValue = dataValueMap[index];
-
+      const fillValue = series.fillValue ? series.fillValue : null;
       return {
         key,
-        value: dataValue == null ? null : dataValue[key] ?? null,
+        value: dataValue == null ? null : dataValue[key] ?? fillValue,
       };
     });
     return {...series, data: newData};

diff --git a/packages/polaris-viz/src/utilities/tests/fillMissingDataPoints.test.ts b/packages/polaris-viz/src/utilities/tests/fillMissingDataPoints.test.ts
@@ -102,6 +102,76 @@ describe('fillMissingDataPoints', () => {
     ]);
   });
 
+  it('fills data with null by default', () => {
+    const mockData = [
+      {
+        name: 'Canada',
+        data: [
+          {key: 'Mice', value: 13.28},
+          {key: 'Dogs', value: 23.43},
+          {key: 'Cats', value: 6.64},
+          {key: 'Birds', value: 54.47},
+        ],
+      },
+      {
+        name: 'China',
+        data: [
+          {key: 'Snakes', value: 0},
+          {key: 'Dogs', value: 0},
+        ],
+      },
+    ];
+
+    const result = fillMissingDataPoints(mockData);
+
+    expect(result).toMatchObject(
+      expect.arrayContaining([
+        expect.objectContaining({
+          data: expect.arrayContaining([
+            expect.objectContaining({
+              value: null,
+            }),
+          ]),
+        }),
+      ]),
+    );
+  });
+
+  it('fills data with provided fill value', () => {
+    const mockData = [
+      {
+        name: 'Canada',
+        data: [
+          {key: 'Mice', value: 13.28},
+          {key: 'Dogs', value: 23.43},
+          {key: 'Cats', value: 6.64},
+          {key: 'Birds', value: 54.47},
+        ],
+      },
+      {
+        name: 'China',
+        data: [
+          {key: 'Snakes', value: 10},
+          {key: 'Dogs', value: 10},
+        ],
+      },
+    ];
+
+    const result = fillMissingDataPoints(mockData);
+
+    expect(result).toMatchObject(
+      expect.arrayContaining([
+        expect.objectContaining({
+          data: expect.arrayContaining([
+            expect.objectContaining({
+              value: 0,
+            }),
+          ]),
+        }),
+      ]),
+    );
+  });
+
   it('returns the original data series if any are comparison', () => {
     const mockData = [
       {