Playing around with mismatched data

packages/polaris-viz/src/components/BarChart/BarChart.tsx

@@ -30,6 +30,7 @@ import {useRenderTooltipContent} from '../../hooks';
 import {HorizontalBarChart} from '../HorizontalBarChart';
 import {VerticalBarChart} from '../VerticalBarChart';
 import {ChartSkeleton} from '../../components/ChartSkeleton';
+import {fillMissingDataPoints} from '../../utilities/fillMissingDataPoints';
 
 export type BarChartProps = {
   errorText?: string;
@@ -51,7 +52,7 @@ export function BarChart(props: BarChartProps) {
 
   const {
     annotations = [],
-    data,
+    data: dataSeries,
     state,
     errorText,
     direction = 'vertical',
@@ -71,6 +72,8 @@ export function BarChart(props: BarChartProps) {
     ...props,
   };
 
+  const data = fillMissingDataPoints(dataSeries);
+
   const skipLinkAnchorId = useRef(uniqueId('BarChart'));
 
   const emptyState = data.length === 0;

packages/polaris-viz/src/components/BarChart/stories/playground/MisMatchedData.stories.tsx

@@ -0,0 +1,45 @@
+import type {Story} from '@storybook/react';
+
+import {BarChart, BarChartProps} from '../../../../components';
+import {META} from '../meta';
+
+export default {
+  ...META,
+  title: `${META.title}/Playground`,
+};
+
+const DATA = [
+  {
+    name: 'Canada',
+    data: [
+      {key: 'Mice', value: 13.28},
+      {key: 'Dogs', value: 23.43},
+      {key: 'Cats', value: 6.64},
+      {key: 'Birds', value: 54.47},
+    ],
+  },
+  {
+    name: 'United States',
+    data: [
+      {key: 'Lizards', value: 350.13},
+      {key: 'Turtles', value: 223.43},
+      {key: 'Mice', value: 15.38},
+      {key: 'Snakes', value: 122.68},
+      {key: 'Dogs', value: 31.54},
+      {key: 'Birds', value: 94.84},
+    ],
+  },
+  {
+    name: 'China',
+    data: [
+      {key: 'Snakes', value: 0},
+      {key: 'Dogs', value: 0},
+    ],
+  },
+];
+
+const Template: Story<BarChartProps> = () => {
+  return <BarChart data={DATA} />;
+};
+
+export const MisMatchedData = Template.bind({});

packages/polaris-viz/src/components/SimpleBarChart/stories/playground/MisMatchedData.stories.tsx

@@ -0,0 +1,49 @@
+import type {Story} from '@storybook/react';
+
+import {SimpleBarChart, SimpleBarChartProps} from '../../../../components';
+import {META} from '../meta';
+
+export default {
+  ...META,
+  title: `${META.title}/Playground`,
+};
+
+const DATA = [
+  {
+    name: 'Canada',
+    data: [
+      {key: 'Mice', value: 13.28},
+      {key: 'Dogs', value: 23.43},
+      {key: 'Cats', value: 6.64},
+      {key: 'Birds', value: 54.47},
+    ],
+  },
+  {
+    name: 'United States',
+    data: [
+      {key: 'Lizards', value: 350.13},
+      {key: 'Turtles', value: 223.43},
+      {key: 'Mice', value: 15.38},
+      {key: 'Snakes', value: 122.68},
+      {key: 'Dogs', value: 31.54},
+      {key: 'Birds', value: 94.84},
+    ],
+  },
+  {
+    name: 'China',
+    data: [
+      {key: 'Snakes', value: 0},
+      {key: 'Dogs', value: 0},
+    ],
+  },
+];
+
+const Template: Story<SimpleBarChartProps> = () => {
+  return (
+    <div style={{height: 600, width: 800}}>
+      <SimpleBarChart data={DATA} />
+    </div>
+  );
+};
+
+export const MisMatchedData = Template.bind({});

packages/polaris-viz/src/utilities/fillMissingDataPoints.ts

@@ -0,0 +1,27 @@
+import type {DataSeries} from '@shopify/polaris-viz-core';
+
+export function fillMissingDataPoints(dataSeries: DataSeries[]) {
+  const allKeys = new Set<string>();
+
+  const areAnyDataLengthsDifferent = dataSeries.some(
+    ({data}) => data.length !== dataSeries[0].data.length,
+  );
+
+  if (!areAnyDataLengthsDifferent) {
+    return dataSeries;
+  }
+
+  for (const {data} of dataSeries) {
+    for (const {key} of data) {
+      allKeys.add(`${key}`);
+    }
+  }
+
+  return dataSeries.map(({name, data}) => ({
+    name,
+    data: [...allKeys].map((key) => {
+      const matchedValue = data.find((item) => item.key === key);
+      return matchedValue ? matchedValue : {key, value: null};
+    }),
+  }));
+}