Merge pull request #1717 from Shopify/donut-chart-empty-state

[Donut chart] Show empty state when all values are zero

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 -->
+## Unreleased
+
+### Changed
+
+- Updated `<DonutChart />` to show empty state when all values are zero
+- Changed `RenderInnerValueContent` type to include dimensions
 
 ## [14.6.0] - 2024-08-21
 

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}
             />
           </Fragment>
         ) : (

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,
   }) ?? (
     <Fragment>
       <animated.p

packages/polaris-viz/src/components/DonutChart/stories/EmptyState.stories.tsx

@@ -0,0 +1,18 @@
+import type {Story} from '@storybook/react';
+
+export {META as default} from './meta';
+
+import type {DonutChartProps} from '../DonutChart';
+
+import {DEFAULT_PROPS, DEFAULT_DATA, Template} from './data';
+
+export const EmptyState: Story<DonutChartProps> = Template.bind({});
+
+EmptyState.args = {
+  ...DEFAULT_PROPS,
+  comparisonMetric: undefined,
+  data: DEFAULT_DATA.map(({name, data}) => ({
+    name,
+    data: data.map(({key}) => ({key, value: 0})),
+  })),
+};

packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx

@@ -157,6 +157,30 @@ describe('<DonutChart />', () => {
         });
       });
 
+      it('renders the empty state if all data values are 0', () => {
+        const chart = mount(
+          <DonutChart
+            {...mockProps}
+            data={[
+              {
+                name: 'Shopify Payments',
+                data: [{key: 'april - march', value: 0}],
+              },
+              {
+                name: 'Other',
+                data: [{key: 'april - march', value: 0}],
+              },
+            ]}
+          />,
+        );
+
+        chart.act(() => {
+          requestAnimationFrame(() => {
+            expect(chart).toContainReactComponentTimes(Arc, 1);
+          });
+        });
+      });
+
       it('renders multiple <Arc /> when false', () => {
         const chart = mount(<DonutChart {...mockProps} />);
         chart.act(() => {

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;