From f6c35b89c9d94a6f640587fca8a041bcbbd19fb3 Mon Sep 17 00:00:00 2001 From: Michael Nesen Date: Fri, 30 Aug 2024 14:10:48 +0000 Subject: [PATCH] Donut chart empty state --- packages/polaris-viz/CHANGELOG.md | 7 +++++- .../src/components/DonutChart/Chart.tsx | 5 ++-- .../components/InnerValue/InnerValue.tsx | 9 ++++--- .../DonutChart/stories/EmptyState.stories.tsx | 18 ++++++++++++++ .../DonutChart/tests/DonutChart.test.tsx | 24 +++++++++++++++++++ packages/polaris-viz/src/types.ts | 4 ++++ 6 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 packages/polaris-viz/src/components/DonutChart/stories/EmptyState.stories.tsx diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 79ffeb30c..79d826433 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -5,7 +5,12 @@ 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 + +- Updated `` to show empty state when all values are zero +- Changed `RenderInnerValueContent` type to include dimensions ## [14.6.0] - 2024-08-21 diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx index e04beef3b..7367d25fc 100644 --- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx +++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx @@ -152,8 +152,8 @@ export function Chart({ .value(({value}) => value!) .sort(null); const pieChartData = createPie(points); - - const emptyState = pieChartData.length === 0; + const isEveryValueZero = points.every(({value}) => value === 0); + const emptyState = pieChartData.length === 0 || isEveryValueZero; const totalValue = total || points.reduce((acc, {value}) => (value ?? 0) + acc, 0); @@ -273,6 +273,7 @@ export function Chart({ labelFormatter={labelFormatter} renderInnerValueContent={renderInnerValueContent} diameter={diameter} + dimensions={dimensions} /> ) : ( diff --git a/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx b/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx index 97d99b06e..8c8528220 100644 --- a/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx +++ b/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx @@ -1,6 +1,6 @@ import {Fragment} from 'react'; import {useSpring, animated, config} from '@react-spring/web'; -import type {LabelFormatter} from '@shopify/polaris-viz-core'; +import type {LabelFormatter, Dimensions} from '@shopify/polaris-viz-core'; import {useTheme} from '@shopify/polaris-viz-core'; import type {RenderInnerValueContent} from '../../../../types'; @@ -14,11 +14,12 @@ const SCALING_FACTOR = 0.07; export interface InnerValueProps { activeValue: number | null | undefined; activeIndex: number; - labelFormatter: LabelFormatter; isAnimated: boolean; totalValue: number; - diameter: number; comparisonMetric?: ComparisonMetricProps; + diameter: number; + dimensions: Dimensions; + labelFormatter: LabelFormatter; renderInnerValueContent?: RenderInnerValueContent; } @@ -31,6 +32,7 @@ export function InnerValue({ renderInnerValueContent, totalValue, diameter, + dimensions, }: InnerValueProps) { const selectedTheme = useTheme(); @@ -65,6 +67,7 @@ export function InnerValue({ activeIndex, animatedTotalValue, totalValue, + dimensions, }) ?? ( = Template.bind({}); + +EmptyState.args = { + ...DEFAULT_PROPS, + comparisonMetric: undefined, + data: DEFAULT_DATA.map(({name, data}) => ({ + name, + data: data.map(({key}) => ({key, value: 0})), + })), +}; diff --git a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx index 460eb1bda..e55358b4d 100644 --- a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx +++ b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx @@ -157,6 +157,30 @@ describe('', () => { }); }); + it('renders the empty state if all data values are 0', () => { + const chart = mount( + , + ); + + chart.act(() => { + requestAnimationFrame(() => { + expect(chart).toContainReactComponentTimes(Arc, 1); + }); + }); + }); + it('renders multiple when false', () => { const chart = mount(); chart.act(() => { diff --git a/packages/polaris-viz/src/types.ts b/packages/polaris-viz/src/types.ts index aa224f3d8..9ebc58491 100644 --- a/packages/polaris-viz/src/types.ts +++ b/packages/polaris-viz/src/types.ts @@ -218,6 +218,10 @@ export interface InnerValueContents { activeIndex: number; animatedTotalValue: ReactNode; totalValue: number; + dimensions: { + width: number; + height: number; + }; } export type RenderInnerValueContent = (values: InnerValueContents) => ReactNode;