diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
index 1b2c4b8e4..2e9ae67fe 100644
--- a/packages/polaris-viz/CHANGELOG.md
+++ b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
+## Unreleased
+
+### Changed
+
+- We now assume that linear charts `Filling Data
+
+When providing multiple `DataSeries` objects, we will fill all the `Series` so that all arrays contain the same keys. The filled `Series` will contain `null` as a value.
+
+Example
+
+Suppose we have the following data arrays, we will fill the data arrays to ensure all keys are present in each `DataSeries` object
+
+
+
+
+
+**Input**
+
+
+
+
+
+**Output**
+
+
+
+
+
+Linear Data
+
+This approach assumes that linear charts (` = () => {
+ return =
Template.bind({});
+const ITEMS = Array(5).fill(null);
+
OverwrittenSeriesColors.args = {
...DEFAULT_PROPS,
data: [
{
name: 'One',
- data: Array(5)
- .fill(null)
- .map(() => {
- return {
- value: Math.random() * Math.random() * 100,
- key: Math.random().toString(),
- };
- }),
+ data: ITEMS.map((_, index) => {
+ return {
+ value: Math.random() * Math.random() * 100,
+ key: `${index}`,
+ };
+ }),
color: 'lime',
},
{
name: 'Two',
- data: Array(5)
- .fill(null)
- .map(() => {
- return {
- value: Math.random() * Math.random() * 100,
- key: Math.random().toString(),
- };
- }),
+ data: ITEMS.map((_, index) => {
+ return {
+ value: Math.random() * Math.random() * 100,
+ key: `${index}`,
+ };
+ }),
},
],
};
diff --git a/packages/polaris-viz/src/components/StackedAreaChart/stories/playground/MisMatchedData.stories.tsx b/packages/polaris-viz/src/components/StackedAreaChart/stories/playground/MisMatchedData.stories.tsx
new file mode 100644
index 000000000..290318eee
--- /dev/null
+++ b/packages/polaris-viz/src/components/StackedAreaChart/stories/playground/MisMatchedData.stories.tsx
@@ -0,0 +1,169 @@
+import type {Story} from '@storybook/react';
+
+import {StackedAreaChart, StackedAreaChartProps} from '../../../../components';
+import {META} from '../meta';
+
+export default {
+ ...META,
+ title: `${META.title}/Playground`,
+};
+
+const DATA = [
+ {
+ name: 'NULL',
+ data: [
+ {
+ key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 0,
+ },
+ {
+ key: 'Tue Nov 07 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 0,
+ },
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 0,
+ },
+ {
+ key: 'Fri Nov 10 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 0,
+ },
+ ],
+ },
+ {
+ name: 'Biltong Taster Pack',
+ data: [
+ {
+ key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 123.99,
+ },
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 123.99,
+ },
+ ],
+ },
+ {
+ name: 'Chili Biltong Slab 8oz',
+ data: [
+ {
+ key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 69.98,
+ },
+ {
+ key: 'Fri Nov 10 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 31.11,
+ },
+ ],
+ },
+ {
+ name: 'Droëwors',
+ data: [
+ {
+ key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 167.79,
+ },
+ {
+ key: 'Tue Nov 07 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 187.97,
+ },
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 61.08,
+ },
+ ],
+ },
+ {
+ name: 'Smokehouse Biltong',
+ data: [
+ {
+ key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 64.99,
+ },
+ {
+ key: 'Tue Nov 07 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 31.11,
+ },
+ ],
+ },
+ {
+ name: 'Traditional Biltong Slab 8oz',
+ data: [
+ {
+ key: 'Mon Nov 06 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 69.98,
+ },
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 55.98,
+ },
+ {
+ key: 'Fri Nov 10 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 31.11,
+ },
+ ],
+ },
+ {
+ name: 'Chili Biltong',
+ data: [
+ {
+ key: 'Tue Nov 07 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 31.11,
+ },
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 9.99,
+ },
+ ],
+ },
+ {
+ name: 'Chili Lime Biltong',
+ data: [
+ {
+ key: 'Tue Nov 07 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 31.11,
+ },
+ {
+ key: 'Fri Nov 10 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 72.89,
+ },
+ ],
+ },
+ {
+ name: 'Grass Fed Biltong',
+ data: [
+ {
+ key: 'Tue Nov 07 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 87.98,
+ },
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 19.98,
+ },
+ ],
+ },
+ {
+ name: 'Grass Fed Biltong Slab 8oz',
+ data: [
+ {
+ key: 'Wed Nov 08 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 34.99,
+ },
+ ],
+ },
+ {
+ name: 'Garlic & Herb Biltong Slab 8oz',
+ data: [
+ {
+ key: 'Fri Nov 10 2023 23:00:00 GMT-0600 (Central Standard Time)',
+ value: 31.11,
+ },
+ ],
+ },
+];
+
+const Template: Story = () => {
+ return ();
const dataValueMap: {[key: number]: {[key: string]: number | null}} = {};
@@ -16,13 +24,13 @@ export function fillMissingDataPoints(dataSeries: DataSeries[]) {
}
}
- return dataSeries.map(({name}, index) => {
+ return dataSeries.map((series, index) => {
const newData = [...allKeys].map((key) => {
return {
key,
value: dataValueMap[index][key] ?? null,
};
});
- return {name, data: newData};
+ return {...series, data: newData};
});
}