From ae6af050edc3794a1139df5b97b3829c07742e5a Mon Sep 17 00:00:00 2001 From: Matt Vickers Date: Wed, 15 Nov 2023 15:08:39 -0600 Subject: [PATCH] Fill linear charts when necessary --- packages/polaris-viz/CHANGELOG.md | 6 +- .../components/Docs/stories/Data.stories.mdx | 148 ++++++++++++++- .../src/components/Docs/utilities/index.ts | 32 ++-- .../src/components/LineChart/LineChart.tsx | 5 +- .../playground/MisMatchedData.stories.tsx | 169 ++++++++++++++++++ .../chromatic/data/missing-end-data.js | 40 ++--- .../chromatic/data/missing-middle-data.js | 40 ++--- .../chromatic/data/missing-random-data.js | 40 ++--- .../chromatic/data/missing-start-data.js | 40 ++--- .../LineChartRelational/stories/data.tsx | 40 ++--- .../StackedAreaChart/StackedAreaChart.tsx | 6 +- .../OverwrittenSeriesColors.stories.tsx | 30 ++-- .../playground/MisMatchedData.stories.tsx | 169 ++++++++++++++++++ .../src/utilities/fillMissingDataPoints.ts | 12 +- 14 files changed, 640 insertions(+), 137 deletions(-) create mode 100644 packages/polaris-viz/src/components/LineChart/stories/playground/MisMatchedData.stories.tsx create mode 100644 packages/polaris-viz/src/components/StackedAreaChart/stories/playground/MisMatchedData.stories.tsx 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 ``, `` & `` have matching keys in each data set. Any keys that do not have matching data sets will be filled so all charts contain the same keys. ## [9.18.2] - 2023-11-15 diff --git a/packages/polaris-viz/src/components/Docs/stories/Data.stories.mdx b/packages/polaris-viz/src/components/Docs/stories/Data.stories.mdx index b9b98a35b..8a8f68ffd 100644 --- a/packages/polaris-viz/src/components/Docs/stories/Data.stories.mdx +++ b/packages/polaris-viz/src/components/Docs/stories/Data.stories.mdx @@ -1,4 +1,4 @@ -import {Meta, Story, Canvas} from '@storybook/addon-docs'; +import {Meta, Story, Canvas, Source} from '@storybook/addon-docs'; import LinkTo from '@storybook/addon-links/react'; import {SHARK_SPECIES_GROWTH} from '../utilities'; import {PolarisVizProvider} from '@shopify/polaris-viz'; @@ -357,5 +357,151 @@ If we use the same data set used above but set `isComparison: true` to the first /> + +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 (``, `` & ``) will have matching keys for each `DataSeries`. + +When creating the chart labels, we use the keys from the longest `DataSeries`. The keys from other `DataSeries` objects are ignored. + +If a user provides different keys, the `DataSeries` will be combined, resulting in a longer set of data. + +The exception to this rule is when a `DataSeries` is provided with `isComparison: true`. In that case, we will not fill the data because comparison data can have different dates for each key and can also include data of different sizes. + + + + + diff --git a/packages/polaris-viz/src/components/Docs/utilities/index.ts b/packages/polaris-viz/src/components/Docs/utilities/index.ts index da008b727..ca4a7d71b 100644 --- a/packages/polaris-viz/src/components/Docs/utilities/index.ts +++ b/packages/polaris-viz/src/components/Docs/utilities/index.ts @@ -17,32 +17,34 @@ const PRODUCT_NAMES = [ 'Glasses', ]; -const DATES = [ - '2020-04-10T12:00:00', - '2020-04-09T12:00:00', - '2020-04-08T12:00:00', - '2020-04-07T12:00:00', - '2020-04-06T12:00:00', - '2020-04-05T12:00:00', - '2020-04-04T12:00:00', - '2020-04-03T12:00:00', - '2020-04-02T12:00:00', - '2020-04-01T12:00:00', -]; - export function randomNumber(min: number, max: number) { return Math.floor(Math.random() * (max - min + 1)) + min; } +function generateDayRange(numDays: number) { + const currentDate = new Date('April 1, 2020'); + const dayRange: string[] = []; + + for (let i = 0; i < numDays; i++) { + const date = new Date(currentDate); + date.setDate(date.getDate() + i); + dayRange.push(date.toString()); + } + + return dayRange; +} + export const generateDataSet = (dataLength: number, typeOfData: string) => { + const dates = typeOfData === 'dates' ? generateDayRange(dataLength) : []; + return Array(dataLength) .fill(null) - .map(() => { + .map((_, index) => { return { value: randomNumber(20, 50), key: typeOfData === 'dates' - ? DATES[Math.floor(Math.random() * DATES.length)] + ? dates[index] : PRODUCT_NAMES[Math.floor(Math.random() * PRODUCT_NAMES.length)], }; }); diff --git a/packages/polaris-viz/src/components/LineChart/LineChart.tsx b/packages/polaris-viz/src/components/LineChart/LineChart.tsx index 32a7b2aaf..00df21628 100644 --- a/packages/polaris-viz/src/components/LineChart/LineChart.tsx +++ b/packages/polaris-viz/src/components/LineChart/LineChart.tsx @@ -12,6 +12,7 @@ import { usePolarisVizContext, } from '@shopify/polaris-viz-core'; +import {fillMissingDataPoints} from '../../utilities/fillMissingDataPoints'; import {getLineChartDataWithDefaults} from '../../utilities/getLineChartDataWithDefaults'; import {ChartContainer} from '../../components/ChartContainer'; import {ChartSkeleton} from '../../components/ChartSkeleton'; @@ -52,7 +53,7 @@ export function LineChart(props: LineChartProps) { const { annotations = [], - data, + data: dataSeries, emptyStateText, errorText, id, @@ -71,6 +72,8 @@ export function LineChart(props: LineChartProps) { ...props, }; + const data = fillMissingDataPoints(dataSeries); + const selectedTheme = useTheme(theme); const seriesColors = useThemeSeriesColors(data, selectedTheme); diff --git a/packages/polaris-viz/src/components/LineChart/stories/playground/MisMatchedData.stories.tsx b/packages/polaris-viz/src/components/LineChart/stories/playground/MisMatchedData.stories.tsx new file mode 100644 index 000000000..3e2c69a79 --- /dev/null +++ b/packages/polaris-viz/src/components/LineChart/stories/playground/MisMatchedData.stories.tsx @@ -0,0 +1,169 @@ +import type {Story} from '@storybook/react'; + +import {LineChart, LineChartProps} 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 ; +}; + +export const MisMatchedData = Template.bind({}); diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-end-data.js b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-end-data.js index 4058f85a6..bd2ac3c33 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-end-data.js +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-end-data.js @@ -2,20 +2,20 @@ export const MISSING_END_DATA = [ { name: 'Average', data: [ - {value: 333, key: '2020-04-01T12:00:00'}, - {value: 797, key: '2020-04-02T12:00:00'}, - {value: 234, key: '2020-04-03T12:00:00'}, - {value: 534, key: '2020-04-04T12:00:00'}, - {value: 132, key: '2020-04-05T12:00:00'}, - {value: 159, key: '2020-04-06T12:00:00'}, - {value: 239, key: '2020-04-07T12:00:00'}, - {value: 708, key: '2020-04-08T12:00:00'}, - {value: 234, key: '2020-04-09T12:00:00'}, - {value: 645, key: '2020-04-10T12:00:00'}, - {value: 543, key: '2020-04-11T12:00:00'}, - {value: 89, key: '2020-04-12T12:00:00'}, - {value: 849, key: '2020-04-13T12:00:00'}, - {value: 129, key: '2020-04-14T12:00:00'}, + {value: 333, key: '2020-03-01T12:00:00'}, + {value: 797, key: '2020-03-02T12:00:00'}, + {value: 234, key: '2020-03-03T12:00:00'}, + {value: 534, key: '2020-03-04T12:00:00'}, + {value: 132, key: '2020-03-05T12:00:00'}, + {value: 159, key: '2020-03-06T12:00:00'}, + {value: 239, key: '2020-03-07T12:00:00'}, + {value: 708, key: '2020-03-08T12:00:00'}, + {value: 234, key: '2020-03-09T12:00:00'}, + {value: 645, key: '2020-03-10T12:00:00'}, + {value: 543, key: '2020-03-11T12:00:00'}, + {value: 89, key: '2020-03-12T12:00:00'}, + {value: 849, key: '2020-03-13T12:00:00'}, + {value: 129, key: '2020-03-14T12:00:00'}, ], color: [ {offset: 0, color: 'rgba(149, 101, 255, 1)'}, @@ -25,13 +25,13 @@ export const MISSING_END_DATA = [ { name: '75th Percentile', data: [ - {value: 859, key: '2020-03-02T12:00:00'}, {value: 388, key: '2020-03-01T12:00:00'}, + {value: 859, key: '2020-03-02T12:00:00'}, {value: 340, key: '2020-03-03T12:00:00'}, {value: 240, key: '2020-03-04T12:00:00'}, {value: 387, key: '2020-03-05T12:00:00'}, - {value: 760, key: '2020-03-07T12:00:00'}, {value: 122, key: '2020-03-06T12:00:00'}, + {value: 760, key: '2020-03-07T12:00:00'}, {value: 162, key: '2020-03-08T12:00:00'}, {value: 540, key: '2020-03-09T12:00:00'}, {value: 193, key: '2020-03-10T12:00:00'}, @@ -54,13 +54,13 @@ export const MISSING_END_DATA = [ { name: 'Median', data: [ - {value: 759, key: '2020-03-02T12:00:00'}, {value: 238, key: '2020-03-01T12:00:00'}, + {value: 759, key: '2020-03-02T12:00:00'}, {value: 190, key: '2020-03-03T12:00:00'}, {value: 90, key: '2020-03-04T12:00:00'}, {value: 237, key: '2020-03-05T12:00:00'}, - {value: 580, key: '2020-03-07T12:00:00'}, {value: 172, key: '2020-03-06T12:00:00'}, + {value: 580, key: '2020-03-07T12:00:00'}, {value: 12, key: '2020-03-08T12:00:00'}, {value: 390, key: '2020-03-09T12:00:00'}, {value: 43, key: '2020-03-10T12:00:00'}, @@ -84,13 +84,13 @@ export const MISSING_END_DATA = [ { name: '25th percentile', data: [ - {value: 559, key: '2020-03-02T12:00:00'}, {value: 88, key: '2020-03-01T12:00:00'}, + {value: 559, key: '2020-03-02T12:00:00'}, {value: 40, key: '2020-03-03T12:00:00'}, {value: 0, key: '2020-03-04T12:00:00'}, {value: 87, key: '2020-03-05T12:00:00'}, - {value: 430, key: '2020-03-07T12:00:00'}, {value: 22, key: '2020-03-06T12:00:00'}, + {value: 430, key: '2020-03-07T12:00:00'}, {value: 0, key: '2020-03-08T12:00:00'}, {value: 240, key: '2020-03-09T12:00:00'}, {value: 0, key: '2020-03-10T12:00:00'}, diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-middle-data.js b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-middle-data.js index 8eee093b2..20c598be6 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-middle-data.js +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-middle-data.js @@ -2,20 +2,20 @@ export const MISSING_MIDDLE_DATA = [ { name: 'Average', data: [ - {value: 333, key: '2020-04-01T12:00:00'}, - {value: 797, key: '2020-04-02T12:00:00'}, - {value: 234, key: '2020-04-03T12:00:00'}, - {value: 534, key: '2020-04-04T12:00:00'}, - {value: 132, key: '2020-04-05T12:00:00'}, - {value: 159, key: '2020-04-06T12:00:00'}, - {value: 239, key: '2020-04-07T12:00:00'}, - {value: 708, key: '2020-04-08T12:00:00'}, - {value: 234, key: '2020-04-09T12:00:00'}, - {value: 645, key: '2020-04-10T12:00:00'}, - {value: 543, key: '2020-04-11T12:00:00'}, - {value: 89, key: '2020-04-12T12:00:00'}, - {value: 849, key: '2020-04-13T12:00:00'}, - {value: 129, key: '2020-04-14T12:00:00'}, + {value: 333, key: '2020-03-01T12:00:00'}, + {value: 797, key: '2020-03-02T12:00:00'}, + {value: 234, key: '2020-03-03T12:00:00'}, + {value: 534, key: '2020-03-04T12:00:00'}, + {value: 132, key: '2020-03-05T12:00:00'}, + {value: 159, key: '2020-03-06T12:00:00'}, + {value: 239, key: '2020-03-07T12:00:00'}, + {value: 708, key: '2020-03-08T12:00:00'}, + {value: 234, key: '2020-03-09T12:00:00'}, + {value: 645, key: '2020-03-10T12:00:00'}, + {value: 543, key: '2020-03-11T12:00:00'}, + {value: 89, key: '2020-03-12T12:00:00'}, + {value: 849, key: '2020-03-13T12:00:00'}, + {value: 129, key: '2020-03-14T12:00:00'}, ], color: [ {offset: 0, color: 'rgba(149, 101, 255, 1)'}, @@ -25,13 +25,13 @@ export const MISSING_MIDDLE_DATA = [ { name: '75th Percentile', data: [ - {value: 859, key: '2020-03-02T12:00:00'}, {value: 388, key: '2020-03-01T12:00:00'}, + {value: 859, key: '2020-03-02T12:00:00'}, {value: 340, key: '2020-03-03T12:00:00'}, {value: 240, key: '2020-03-04T12:00:00'}, {value: 387, key: '2020-03-05T12:00:00'}, - {value: null, key: '2020-03-07T12:00:00'}, {value: null, key: '2020-03-06T12:00:00'}, + {value: null, key: '2020-03-07T12:00:00'}, {value: null, key: '2020-03-08T12:00:00'}, {value: 540, key: '2020-03-09T12:00:00'}, {value: 193, key: '2020-03-10T12:00:00'}, @@ -54,13 +54,13 @@ export const MISSING_MIDDLE_DATA = [ { name: 'Median', data: [ - {value: 759, key: '2020-03-02T12:00:00'}, {value: 238, key: '2020-03-01T12:00:00'}, + {value: 759, key: '2020-03-02T12:00:00'}, {value: 190, key: '2020-03-03T12:00:00'}, {value: 90, key: '2020-03-04T12:00:00'}, {value: 237, key: '2020-03-05T12:00:00'}, - {value: null, key: '2020-03-07T12:00:00'}, {value: null, key: '2020-03-06T12:00:00'}, + {value: null, key: '2020-03-07T12:00:00'}, {value: null, key: '2020-03-08T12:00:00'}, {value: 390, key: '2020-03-09T12:00:00'}, {value: 43, key: '2020-03-10T12:00:00'}, @@ -84,13 +84,13 @@ export const MISSING_MIDDLE_DATA = [ { name: '25th percentile', data: [ - {value: 559, key: '2020-03-02T12:00:00'}, {value: 88, key: '2020-03-01T12:00:00'}, + {value: 559, key: '2020-03-02T12:00:00'}, {value: 40, key: '2020-03-03T12:00:00'}, {value: 0, key: '2020-03-04T12:00:00'}, {value: 87, key: '2020-03-05T12:00:00'}, - {value: null, key: '2020-03-07T12:00:00'}, {value: null, key: '2020-03-06T12:00:00'}, + {value: null, key: '2020-03-07T12:00:00'}, {value: null, key: '2020-03-08T12:00:00'}, {value: 240, key: '2020-03-09T12:00:00'}, {value: 0, key: '2020-03-10T12:00:00'}, diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-random-data.js b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-random-data.js index 642757ebb..dea4ebcd6 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-random-data.js +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-random-data.js @@ -2,20 +2,20 @@ export const MISSING_RANDOM_DATA = [ { name: 'Average', data: [ - {value: 333, key: '2020-04-01T12:00:00'}, - {value: 797, key: '2020-04-02T12:00:00'}, - {value: 234, key: '2020-04-03T12:00:00'}, - {value: 534, key: '2020-04-04T12:00:00'}, - {value: 132, key: '2020-04-05T12:00:00'}, - {value: 159, key: '2020-04-06T12:00:00'}, - {value: 239, key: '2020-04-07T12:00:00'}, - {value: 708, key: '2020-04-08T12:00:00'}, - {value: 234, key: '2020-04-09T12:00:00'}, - {value: 645, key: '2020-04-10T12:00:00'}, - {value: 543, key: '2020-04-11T12:00:00'}, - {value: 89, key: '2020-04-12T12:00:00'}, - {value: 849, key: '2020-04-13T12:00:00'}, - {value: 129, key: '2020-04-14T12:00:00'}, + {value: 333, key: '2020-03-01T12:00:00'}, + {value: 797, key: '2020-03-02T12:00:00'}, + {value: 234, key: '2020-03-03T12:00:00'}, + {value: 534, key: '2020-03-04T12:00:00'}, + {value: 132, key: '2020-03-05T12:00:00'}, + {value: 159, key: '2020-03-06T12:00:00'}, + {value: 239, key: '2020-03-07T12:00:00'}, + {value: 708, key: '2020-03-08T12:00:00'}, + {value: 234, key: '2020-03-09T12:00:00'}, + {value: 645, key: '2020-03-10T12:00:00'}, + {value: 543, key: '2020-03-11T12:00:00'}, + {value: 89, key: '2020-03-12T12:00:00'}, + {value: 849, key: '2020-03-13T12:00:00'}, + {value: 129, key: '2020-03-14T12:00:00'}, ], color: [ {offset: 0, color: 'rgba(149, 101, 255, 1)'}, @@ -25,13 +25,13 @@ export const MISSING_RANDOM_DATA = [ { name: '75th Percentile', data: [ - {value: 859, key: '2020-03-02T12:00:00'}, {value: 388, key: '2020-03-01T12:00:00'}, + {value: 859, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-03T12:00:00'}, {value: null, key: '2020-03-04T12:00:00'}, {value: 387, key: '2020-03-05T12:00:00'}, - {value: 760, key: '2020-03-07T12:00:00'}, {value: 122, key: '2020-03-06T12:00:00'}, + {value: 760, key: '2020-03-07T12:00:00'}, {value: 162, key: '2020-03-08T12:00:00'}, {value: 540, key: '2020-03-09T12:00:00'}, {value: 193, key: '2020-03-10T12:00:00'}, @@ -54,13 +54,13 @@ export const MISSING_RANDOM_DATA = [ { name: 'Median', data: [ - {value: 759, key: '2020-03-02T12:00:00'}, {value: 238, key: '2020-03-01T12:00:00'}, + {value: 759, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-03T12:00:00'}, {value: null, key: '2020-03-04T12:00:00'}, {value: 237, key: '2020-03-05T12:00:00'}, - {value: 580, key: '2020-03-07T12:00:00'}, {value: 172, key: '2020-03-06T12:00:00'}, + {value: 580, key: '2020-03-07T12:00:00'}, {value: 12, key: '2020-03-08T12:00:00'}, {value: 390, key: '2020-03-09T12:00:00'}, {value: 43, key: '2020-03-10T12:00:00'}, @@ -84,13 +84,13 @@ export const MISSING_RANDOM_DATA = [ { name: '25th percentile', data: [ - {value: 559, key: '2020-03-02T12:00:00'}, {value: 88, key: '2020-03-01T12:00:00'}, + {value: 559, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-03T12:00:00'}, {value: null, key: '2020-03-04T12:00:00'}, {value: 87, key: '2020-03-05T12:00:00'}, - {value: 430, key: '2020-03-07T12:00:00'}, {value: 22, key: '2020-03-06T12:00:00'}, + {value: 430, key: '2020-03-07T12:00:00'}, {value: 0, key: '2020-03-08T12:00:00'}, {value: 240, key: '2020-03-09T12:00:00'}, {value: 0, key: '2020-03-10T12:00:00'}, diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-start-data.js b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-start-data.js index 12e0ce019..11d150b67 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-start-data.js +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-start-data.js @@ -2,20 +2,20 @@ export const MISSING_START_DATA = [ { name: 'Average', data: [ - {value: 333, key: '2020-04-01T12:00:00'}, - {value: 797, key: '2020-04-02T12:00:00'}, - {value: 234, key: '2020-04-03T12:00:00'}, - {value: 534, key: '2020-04-04T12:00:00'}, - {value: 132, key: '2020-04-05T12:00:00'}, - {value: 159, key: '2020-04-06T12:00:00'}, - {value: 239, key: '2020-04-07T12:00:00'}, - {value: 708, key: '2020-04-08T12:00:00'}, - {value: 234, key: '2020-04-09T12:00:00'}, - {value: 645, key: '2020-04-10T12:00:00'}, - {value: 543, key: '2020-04-11T12:00:00'}, - {value: 89, key: '2020-04-12T12:00:00'}, - {value: 849, key: '2020-04-13T12:00:00'}, - {value: 129, key: '2020-04-14T12:00:00'}, + {value: 333, key: '2020-03-01T12:00:00'}, + {value: 797, key: '2020-03-02T12:00:00'}, + {value: 234, key: '2020-03-03T12:00:00'}, + {value: 534, key: '2020-03-04T12:00:00'}, + {value: 132, key: '2020-03-05T12:00:00'}, + {value: 159, key: '2020-03-06T12:00:00'}, + {value: 239, key: '2020-03-07T12:00:00'}, + {value: 708, key: '2020-03-08T12:00:00'}, + {value: 234, key: '2020-03-09T12:00:00'}, + {value: 645, key: '2020-03-10T12:00:00'}, + {value: 543, key: '2020-03-11T12:00:00'}, + {value: 89, key: '2020-03-12T12:00:00'}, + {value: 849, key: '2020-03-13T12:00:00'}, + {value: 129, key: '2020-03-14T12:00:00'}, ], color: [ {offset: 0, color: 'rgba(149, 101, 255, 1)'}, @@ -25,13 +25,13 @@ export const MISSING_START_DATA = [ { name: '75th Percentile', data: [ - {value: null, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-01T12:00:00'}, + {value: null, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-03T12:00:00'}, {value: 240, key: '2020-03-04T12:00:00'}, {value: 387, key: '2020-03-05T12:00:00'}, - {value: 760, key: '2020-03-07T12:00:00'}, {value: 122, key: '2020-03-06T12:00:00'}, + {value: 760, key: '2020-03-07T12:00:00'}, {value: 162, key: '2020-03-08T12:00:00'}, {value: 540, key: '2020-03-09T12:00:00'}, {value: 193, key: '2020-03-10T12:00:00'}, @@ -54,13 +54,13 @@ export const MISSING_START_DATA = [ { name: 'Median', data: [ - {value: null, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-01T12:00:00'}, + {value: null, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-03T12:00:00'}, {value: 90, key: '2020-03-04T12:00:00'}, {value: 237, key: '2020-03-05T12:00:00'}, - {value: 580, key: '2020-03-07T12:00:00'}, {value: 172, key: '2020-03-06T12:00:00'}, + {value: 580, key: '2020-03-07T12:00:00'}, {value: 12, key: '2020-03-08T12:00:00'}, {value: 390, key: '2020-03-09T12:00:00'}, {value: 43, key: '2020-03-10T12:00:00'}, @@ -84,13 +84,13 @@ export const MISSING_START_DATA = [ { name: '25th percentile', data: [ - {value: null, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-01T12:00:00'}, + {value: null, key: '2020-03-02T12:00:00'}, {value: null, key: '2020-03-03T12:00:00'}, {value: 0, key: '2020-03-04T12:00:00'}, {value: 87, key: '2020-03-05T12:00:00'}, - {value: 430, key: '2020-03-07T12:00:00'}, {value: 22, key: '2020-03-06T12:00:00'}, + {value: 430, key: '2020-03-07T12:00:00'}, {value: 0, key: '2020-03-08T12:00:00'}, {value: 240, key: '2020-03-09T12:00:00'}, {value: 0, key: '2020-03-10T12:00:00'}, diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx index 89d018313..67cfb3239 100644 --- a/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx +++ b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx @@ -65,20 +65,20 @@ export const DEFAULT_DATA: DataSeries[] = [ { name: 'Average', data: [ - {value: 333, key: '2020-04-01T12:00:00'}, - {value: 797, key: '2020-04-02T12:00:00'}, - {value: 234, key: '2020-04-03T12:00:00'}, - {value: 534, key: '2020-04-04T12:00:00'}, - {value: 132, key: '2020-04-05T12:00:00'}, - {value: 159, key: '2020-04-06T12:00:00'}, - {value: 239, key: '2020-04-07T12:00:00'}, - {value: 708, key: '2020-04-08T12:00:00'}, - {value: 234, key: '2020-04-09T12:00:00'}, - {value: 645, key: '2020-04-10T12:00:00'}, - {value: 543, key: '2020-04-11T12:00:00'}, - {value: 89, key: '2020-04-12T12:00:00'}, - {value: 849, key: '2020-04-13T12:00:00'}, - {value: 129, key: '2020-04-14T12:00:00'}, + {value: 333, key: '2020-03-01T12:00:00'}, + {value: 797, key: '2020-03-02T12:00:00'}, + {value: 234, key: '2020-03-03T12:00:00'}, + {value: 534, key: '2020-03-04T12:00:00'}, + {value: 132, key: '2020-03-05T12:00:00'}, + {value: 159, key: '2020-03-06T12:00:00'}, + {value: 239, key: '2020-03-07T12:00:00'}, + {value: 708, key: '2020-03-08T12:00:00'}, + {value: 234, key: '2020-03-09T12:00:00'}, + {value: 645, key: '2020-03-10T12:00:00'}, + {value: 543, key: '2020-03-11T12:00:00'}, + {value: 89, key: '2020-03-12T12:00:00'}, + {value: 849, key: '2020-03-13T12:00:00'}, + {value: 129, key: '2020-03-14T12:00:00'}, ], color: [ {offset: 0, color: 'rgba(149, 101, 255, 1)'}, @@ -88,13 +88,13 @@ export const DEFAULT_DATA: DataSeries[] = [ { name: '75th Percentile', data: [ - {value: 859, key: '2020-03-02T12:00:00'}, {value: 388, key: '2020-03-01T12:00:00'}, + {value: 859, key: '2020-03-02T12:00:00'}, {value: 340, key: '2020-03-03T12:00:00'}, {value: 240, key: '2020-03-04T12:00:00'}, {value: 387, key: '2020-03-05T12:00:00'}, - {value: 760, key: '2020-03-07T12:00:00'}, {value: 122, key: '2020-03-06T12:00:00'}, + {value: 760, key: '2020-03-07T12:00:00'}, {value: 162, key: '2020-03-08T12:00:00'}, {value: 540, key: '2020-03-09T12:00:00'}, {value: 193, key: '2020-03-10T12:00:00'}, @@ -117,13 +117,13 @@ export const DEFAULT_DATA: DataSeries[] = [ { name: 'Median', data: [ - {value: 759, key: '2020-03-02T12:00:00'}, {value: 238, key: '2020-03-01T12:00:00'}, + {value: 759, key: '2020-03-02T12:00:00'}, {value: 190, key: '2020-03-03T12:00:00'}, {value: 90, key: '2020-03-04T12:00:00'}, {value: 237, key: '2020-03-05T12:00:00'}, - {value: 580, key: '2020-03-07T12:00:00'}, {value: 172, key: '2020-03-06T12:00:00'}, + {value: 580, key: '2020-03-07T12:00:00'}, {value: 12, key: '2020-03-08T12:00:00'}, {value: 390, key: '2020-03-09T12:00:00'}, {value: 43, key: '2020-03-10T12:00:00'}, @@ -147,13 +147,13 @@ export const DEFAULT_DATA: DataSeries[] = [ { name: '25th percentile', data: [ - {value: 559, key: '2020-03-02T12:00:00'}, {value: 88, key: '2020-03-01T12:00:00'}, + {value: 559, key: '2020-03-02T12:00:00'}, {value: 40, key: '2020-03-03T12:00:00'}, {value: 0, key: '2020-03-04T12:00:00'}, {value: 87, key: '2020-03-05T12:00:00'}, - {value: 430, key: '2020-03-07T12:00:00'}, {value: 22, key: '2020-03-06T12:00:00'}, + {value: 430, key: '2020-03-07T12:00:00'}, {value: 0, key: '2020-03-08T12:00:00'}, {value: 240, key: '2020-03-09T12:00:00'}, {value: 0, key: '2020-03-10T12:00:00'}, diff --git a/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx index a3bbdd791..f1c24a734 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx +++ b/packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx @@ -11,6 +11,7 @@ import type { ChartProps, } from '@shopify/polaris-viz-core'; +import {fillMissingDataPoints} from '../../utilities/fillMissingDataPoints'; import { getXAxisOptionsWithDefaults, getYAxisOptionsWithDefaults, @@ -48,7 +49,7 @@ export function StackedAreaChart(props: StackedAreaChartProps) { annotations = [], xAxisOptions, yAxisOptions, - data, + data: dataSeries, state, errorText, onError, @@ -62,6 +63,9 @@ export function StackedAreaChart(props: StackedAreaChartProps) { ...DEFAULT_CHART_PROPS, ...props, }; + + const data = fillMissingDataPoints(dataSeries); + const skipLinkAnchorId = useRef(uniqueId('stackedAreaChart')); const renderTooltip = useRenderTooltipContent({tooltipOptions, theme, data}); diff --git a/packages/polaris-viz/src/components/StackedAreaChart/stories/OverwrittenSeriesColors.stories.tsx b/packages/polaris-viz/src/components/StackedAreaChart/stories/OverwrittenSeriesColors.stories.tsx index 1fe705d45..71fbcfa13 100644 --- a/packages/polaris-viz/src/components/StackedAreaChart/stories/OverwrittenSeriesColors.stories.tsx +++ b/packages/polaris-viz/src/components/StackedAreaChart/stories/OverwrittenSeriesColors.stories.tsx @@ -9,31 +9,29 @@ import {DEFAULT_PROPS, Template} from './data'; export const OverwrittenSeriesColors: Story = 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 ; +}; + +export const MisMatchedData = Template.bind({}); diff --git a/packages/polaris-viz/src/utilities/fillMissingDataPoints.ts b/packages/polaris-viz/src/utilities/fillMissingDataPoints.ts index b56f2a26e..501612ed2 100644 --- a/packages/polaris-viz/src/utilities/fillMissingDataPoints.ts +++ b/packages/polaris-viz/src/utilities/fillMissingDataPoints.ts @@ -1,6 +1,14 @@ import type {DataSeries} from '@shopify/polaris-viz-core'; export function fillMissingDataPoints(dataSeries: DataSeries[]) { + const areAnyComparrison = dataSeries.some( + ({isComparison}) => isComparison === true, + ); + + if (areAnyComparrison) { + return dataSeries; + } + const allKeys = new Set(); 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}; }); }