Skip to content

Commit

Permalink
Allow bar chart to fill missing data even when comparisons are provided
Browse files Browse the repository at this point in the history
  • Loading branch information
@envex
envex committed Jan 17, 2024
1 parent 6ab8e5a commit a4e414b
Show file tree
Hide file tree
Showing 6 changed files with 273 additions and 48 deletions.
14 changes: 13 additions & 1 deletion packages/polaris-viz/src/components/BarChart/BarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,10 @@ export function BarChart(props: BarChartProps) {
...props,
};

const data = fillMissingDataPoints(dataSeries);
const data = fillMissingDataPoints(
dataSeries,
isValidDate(dataSeries[0]?.data[0]?.key),
);

const skipLinkAnchorId = useRef(uniqueId('BarChart'));

Expand Down Expand Up @@ -135,3 +138,12 @@ export function BarChart(props: BarChartProps) {
</Fragment>
);
}

function isValidDate(dateString: string | number | null) {
if (dateString == null) {
return false;
}

const parsedDate = Date.parse(dateString.toString());
return !isNaN(parsedDate);
}
72 changes: 70 additions & 2 deletions packages/polaris-viz/src/components/BarChart/stories/playground/MisMatchedData.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type {Story} from '@storybook/react';

import {BarChart, BarChartProps} from '../../../../components';
import {META} from '../meta';
import {DEFAULT_DATA as LINEAR_DATA} from '../../../LineChart/stories/data';

export default {
...META,
Expand Down Expand Up @@ -38,8 +39,75 @@ const DATA = [
},
];

const Template: Story<BarChartProps> = () => {
return <BarChart data={DATA} />;
const Template: Story<BarChartProps> = (args: BarChartProps) => {
return <BarChart {...args} />;
};

export const MisMatchedData = Template.bind({});

MisMatchedData.args = {
data: DATA,
};

const WEB_DATA = [
{
isComparison: false,
name: 'Dec 16, 2023–Jan 14, 2024',
data: [
{
key: 'Alabama',
value: 59.94,
},
{
key: 'Arizona',
value: 408.02,
},
{
key: 'Arkansas',
value: 123.99,
},
{
key: 'California',
value: 1312.3,
},
{
key: 'Colorado',
value: 78.98,
},
],
},
{
isComparison: true,
name: 'Nov 14–Dec 14, 2023',
data: [
{
key: 'Arizona',
value: 153.08,
},
{
key: 'Arkansas',
value: 69.98,
},
{
key: 'California',
value: 2498.59,
},
{
key: 'Colorado',
value: 211.97,
},
],
},
];

export const MisMatchedWebData = Template.bind({});

MisMatchedWebData.args = {
data: WEB_DATA,
};

export const MisMatchedLinearData = Template.bind({});

MisMatchedLinearData.args = {
data: LINEAR_DATA,
};
2 changes: 1 addition & 1 deletion packages/polaris-viz/src/components/LineChart/LineChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export function LineChart(props: LineChartProps) {
...props,
};

const data = fillMissingDataPoints(dataSeries);
const data = fillMissingDataPoints(dataSeries, true);

const selectedTheme = useTheme(theme);
const seriesColors = useThemeSeriesColors(data, selectedTheme);
Expand Down
2 changes: 1 addition & 1 deletion packages/polaris-viz/src/components/StackedAreaChart/StackedAreaChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export function StackedAreaChart(props: StackedAreaChartProps) {
...props,
};

const data = fillMissingDataPoints(dataSeries);
const data = fillMissingDataPoints(dataSeries, true);

const skipLinkAnchorId = useRef(uniqueId('stackedAreaChart'));
const renderTooltip = useRenderTooltipContent({tooltipOptions, theme, data});
Expand Down
17 changes: 11 additions & 6 deletions packages/polaris-viz/src/utilities/fillMissingDataPoints.ts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
import type {DataSeries} from '@shopify/polaris-viz-core';

export function fillMissingDataPoints(dataSeries: DataSeries[]) {
const areAnyComparison = dataSeries.some(
({isComparison}) => isComparison === true,
);
export function fillMissingDataPoints(
dataSeries: DataSeries[],
isLinearData: boolean,
) {
if (isLinearData) {
const areAnyComparison = dataSeries.some(
({isComparison}) => isComparison === true,
);

if (areAnyComparison) {
return dataSeries;
if (areAnyComparison) {
return dataSeries;
}
}

const allKeys = new Set<string>();
Expand Down
214 changes: 177 additions & 37 deletions packages/polaris-viz/src/utilities/tests/fillMissingDataPoints.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,43 +222,6 @@ 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 = [
{
Expand Down Expand Up @@ -385,4 +348,181 @@ describe('fillMissingDataPoints', () => {
},
]);
});

describe('isLinearData', () => {
it('does not fill when isLinearData: true and series contains isComparison', () => {
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, true);

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

it('fills all missing data when isLinearData: false', () => {
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, false);

expect(result).toMatchObject([
{
name: 'Canada',
data: [
{
key: 'Mice',
value: 13.28,
},
{
key: 'Dogs',
value: 23.43,
},
{
key: 'Cats',
value: 6.64,
},
{
key: 'Birds',
value: 54.47,
},
{
key: 'Lizards',
value: null,
},
{
key: 'Turtles',
value: null,
},
{
key: 'Snakes',
value: null,
},
],
},
{
name: 'United States',
data: [
{
key: 'Mice',
value: 15.38,
},
{
key: 'Dogs',
value: 31.54,
},
{
key: 'Cats',
value: null,
},
{
key: 'Birds',
value: 94.84,
},
{
key: 'Lizards',
value: 350.13,
},
{
key: 'Turtles',
value: 223.43,
},
{
key: 'Snakes',
value: 122.68,
},
],
isComparison: true,
},
{
name: 'China',
data: [
{
key: 'Mice',
value: null,
},
{
key: 'Dogs',
value: 0,
},
{
key: 'Cats',
value: null,
},
{
key: 'Birds',
value: null,
},
{
key: 'Lizards',
value: null,
},
{
key: 'Turtles',
value: null,
},
{
key: 'Snakes',
value: 0,
},
],
},
]);
});
});
});

0 comments on commit a4e414b

Please sign in to comment.