Skip to content

Commit

Permalink
Merge pull request #1608 from Shopify/envex/fill-bug-tests
Browse files Browse the repository at this point in the history 
Fix issue with data sets that are empty
  • Loading branch information
@envex
envex authored Nov 16, 2023
2 parents dd94ec0 + 1315a2f commit e8efb76
Show file tree
Hide file tree
Showing 3 changed files with 361 additions and 3 deletions.
194 changes: 194 additions & 0 deletions ...s-viz/src/components/LineChartRelational/stories/playground/NoBenchmarkSeries.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
import type {Story} from '@storybook/react';

export {META as default} from '../meta';

import {DEFAULT_PROPS, Template} from '../data';
import type {LineChartProps} from 'components/LineChart/LineChart';

const DATA = [
{
data: [
{
value: 357.75,
key: '2023-10-17T00:00:00-04:00',
},
{
value: 1780,
key: '2023-10-18T00:00:00-04:00',
},
{
value: 2937.813,
key: '2023-10-19T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-20T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-21T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-22T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-23T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-24T00:00:00-04:00',
},
{
value: 15.78,
key: '2023-10-25T00:00:00-04:00',
},
{
value: 344.445,
key: '2023-10-26T00:00:00-04:00',
},
{
value: 1334.94,
key: '2023-10-27T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-28T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-29T00:00:00-04:00',
},
{
value: 205,
key: '2023-10-30T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-31T00:00:00-04:00',
},
{
value: 0,
key: '2023-11-01T00:00:00-04:00',
},
{
value: 0,
key: '2023-11-02T00:00:00-04:00',
},
{
value: 1046.64,
key: '2023-11-03T00:00:00-04:00',
},
{
value: 0,
key: '2023-11-04T00:00:00-04:00',
},
{
value: 0,
key: '2023-11-05T00:00:00-04:00',
},
{
value: 0,
key: '2023-11-06T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-07T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-08T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-09T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-10T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-11T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-12T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-13T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-14T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-15T00:00:00-05:00',
},
{
value: 0,
key: '2023-11-16T00:00:00-05:00',
},
],
name: 'Average',
color: [
{
offset: 0,
color: 'rgba(10, 151, 213, 1)',
},
{
offset: 100,
color: 'rgba(80, 197, 247, 1)',
},
],
},
{
name: '25th percentile',
color: 'rgba(143, 113, 239, 0.8)',
metadata: {
relatedIndex: 2,
areaColor: 'rgba(143, 113, 239, 0.08)',
},
styleOverride: {
line: {
strokeDasharray: '3 3',
},
},
data: [],
},
{
name: 'Median',
color: 'rgba(106, 66, 233, 0.8)',
metadata: {
relatedIndex: 3,
areaColor: 'rgba(65, 22, 201, 0.12)',
},
styleOverride: {
line: {
strokeDasharray: '3 3',
},
},
data: [],
},
{
name: '75th percentile',
color: 'rgba(65, 22, 201, 0.8)',
styleOverride: {
line: {
strokeDasharray: '3 3',
},
},
data: [],
},
];

export const NoBenchmarkSeries: Story<LineChartProps> = Template.bind({});

NoBenchmarkSeries.args = {
...DEFAULT_PROPS,
data: DATA,
isAnimated: false,
};
4 changes: 3 additions & 1 deletion packages/polaris-viz/src/utilities/fillMissingDataPoints.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,11 @@ export function fillMissingDataPoints(dataSeries: DataSeries[]) {

return dataSeries.map((series, index) => {
const newData = [...allKeys].map((key) => {
const dataValue = dataValueMap[index];

return {
key,
value: dataValueMap[index][key] ?? null,
value: dataValue == null ? null : dataValue[key] ?? null,
};
});
return {...series, data: newData};
Expand Down
166 changes: 164 additions & 2 deletions packages/polaris-viz/src/utilities/tests/fillMissingDataPoints.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import type {DataPoint, DataSeries} from '@shopify/polaris-viz-core';

import {fillMissingDataPoints} from '../fillMissingDataPoints';

describe('fillMissingDataPoints', () => {
Expand Down Expand Up @@ -103,4 +101,168 @@ describe('fillMissingDataPoints', () => {
},
]);
});

it('returns the original data series if any are comparison', () => {
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: '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},
],
isComparison: true,
},
{
name: 'China',
data: [
{key: 'Snakes', value: 0},
{key: 'Dogs', value: 0},
],
},
];

const result = fillMissingDataPoints(mockData);

expect(result).toMatchObject(mockData);
});

it('fills empty series with null when no data is available', () => {
const mockData = [
{
data: [
{
value: 357.75,
key: '2023-10-17T00:00:00-04:00',
},
{
value: 1780,
key: '2023-10-18T00:00:00-04:00',
},
{
value: 2937.813,
key: '2023-10-19T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-20T00:00:00-04:00',
},
],
name: 'Average',
},
{
name: '25th percentile',
data: [],
},
{
name: 'Median',
data: [],
},
{
name: '75th percentile',
data: [],
},
];

const result = fillMissingDataPoints(mockData);

expect(result).toMatchObject([
{
data: [
{
value: 357.75,
key: '2023-10-17T00:00:00-04:00',
},
{
value: 1780,
key: '2023-10-18T00:00:00-04:00',
},
{
value: 2937.813,
key: '2023-10-19T00:00:00-04:00',
},
{
value: 0,
key: '2023-10-20T00:00:00-04:00',
},
],
name: 'Average',
},
{
name: '25th percentile',
data: [
{
value: null,
key: '2023-10-17T00:00:00-04:00',
},
{
value: null,
key: '2023-10-18T00:00:00-04:00',
},
{
value: null,
key: '2023-10-19T00:00:00-04:00',
},
{
value: null,
key: '2023-10-20T00:00:00-04:00',
},
],
},
{
name: 'Median',
data: [
{
value: null,
key: '2023-10-17T00:00:00-04:00',
},
{
value: null,
key: '2023-10-18T00:00:00-04:00',
},
{
value: null,
key: '2023-10-19T00:00:00-04:00',
},
{
value: null,
key: '2023-10-20T00:00:00-04:00',
},
],
},
{
name: '75th percentile',
data: [
{
value: null,
key: '2023-10-17T00:00:00-04:00',
},
{
value: null,
key: '2023-10-18T00:00:00-04:00',
},
{
value: null,
key: '2023-10-19T00:00:00-04:00',
},
{
value: null,
key: '2023-10-20T00:00:00-04:00',
},
],
},
]);
});
});

0 comments on commit e8efb76

Please sign in to comment.