Merge pull request #1582 from Shopify/donut-chart-update-styles

[Donut Chart] Update Styles and add data truncation
Shopify · Aug 31, 2023 · e89bec6 · e89bec6
2 parents 20a1582 + fd838cd
commit e89bec6
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 12 deletions.
diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts
@@ -129,7 +129,7 @@ const DEFAULT_LINE_HAS_SPLINE = true;
 const DEFAULT_LINE_WIDTH = 2;
 
 const DEFAULT_ARC_CORNER_RADIUS = 2;
-const DEFAULT_ARC_CORNER_THICKNESS = 18;
+const DEFAULT_ARC_CORNER_THICKNESS = 36;
 
 const DEFAULT_GRID_SHOW_HORIZONTAL_LINES = true;
 const DEFAULT_GRID_HORIZONTAL_OVERFLOW = true;
@@ -504,6 +504,7 @@ export const ELLIPSIS = '…';
 export const HORIZONTAL_LABEL_MIN_WIDTH = 46;
 export const HORIZONTAL_LABEL_TARGET_HEIGHT = 80;
 export const DIAGONAL_LABEL_MIN_WIDTH = 30;
+export const DONUT_CHART_MAX_SERIES_COUNT = 5;
 export const MAX_DIAGONAL_LABEL_WIDTH = 100;
 // Visible height of a 100px wide label at 45deg
 export const MAX_DIAGONAL_VISIBLE_HEIGHT = 80;

diff --git a/packages/polaris-viz-core/src/index.ts b/packages/polaris-viz-core/src/index.ts
@@ -42,6 +42,7 @@ export {
   MAX_DIAGONAL_VISIBLE_HEIGHT,
   VERTICAL_LABEL_TARGET_WIDTH,
   DIAGONAL_LABEL_MIN_WIDTH,
+  DONUT_CHART_MAX_SERIES_COUNT,
   HORIZONTAL_LABEL_TARGET_HEIGHT,
   VERTICAL_LABEL_MIN_WIDTH,
   Y_AXIS_CHART_SPACING,

diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,13 @@ 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
+
+-  Changed `<DonutChart />` to not show 0 or negative values.
+-  Changed `<DonutChart />` to only show a maximum of 5 data points.
+-  Updated `<DonutChart />` default styles.
 
 ## [9.10.6] - 2023-08-24
 

diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -16,6 +16,7 @@ import type {
   Direction,
 } from '@shopify/polaris-viz-core';
 
+import {DONUT_CHART_MAX_SERIES_COUNT} from '../../constants';
 import {getContainerAlignmentForLegend} from '../../utilities';
 import {estimateLegendItemWidth} from '../Legend';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
@@ -79,15 +80,28 @@ export function Chart({
   const [activeIndex, setActiveIndex] = useState<number>(-1);
   const selectedTheme = useTheme();
 
-  const seriesCount = clamp({amount: data.length, min: 1, max: Infinity});
+  const seriesCount = clamp({
+    amount: data.length,
+    min: 1,
+    max: DONUT_CHART_MAX_SERIES_COUNT,
+  });
+
+  const seriesData = data
+    .filter(({data}) => Number(data[0]?.value) > 0)
+    .sort(
+      (current, next) =>
+        Number(next.data[0].value) - Number(current.data[0].value),
+    )
+    .slice(0, seriesCount);
+
   const seriesColor = getSeriesColors(seriesCount, selectedTheme);
 
   const legendDirection: Direction =
     legendPosition === 'right' || legendPosition === 'left'
       ? 'vertical'
       : 'horizontal';
 
-  const longestLegendWidth = data.reduce((previous, current) => {
+  const longestLegendWidth = seriesData.reduce((previous, current) => {
     const estimatedLegendWidth = estimateLegendItemWidth(
       current.name ?? '',
       characterWidths,
@@ -110,7 +124,7 @@ export function Chart({
 
   const {height, width, legend, setLegendDimensions, isLegendMounted} =
     useLegend({
-      data: [{series: data, shape: 'Bar'}],
+      data: [{series: seriesData, shape: 'Bar'}],
       dimensions,
       showLegend,
       direction: legendDirection,
@@ -135,7 +149,7 @@ export function Chart({
   const diameter = Math.min(height, width);
   const radius = diameter / 2;
 
-  const points: DataPoint[] = data.reduce(
+  const points: DataPoint[] = seriesData.reduce(
     (prev: DataPoint[], {data}) => prev.concat(data),
     [],
   );
@@ -144,6 +158,7 @@ export function Chart({
     .value(({value}) => value!)
     .sort(null);
   const pieChartData = createPie(points);
+
   const emptyState = pieChartData.length === 0;
 
   const totalValue =
@@ -191,8 +206,9 @@ export function Chart({
                   ) : (
                     pieChartData.map(
                       ({data: pieData, startAngle, endAngle}, index) => {
-                        const color = data[index]?.color ?? seriesColor[index];
-                        const name = data[index].name;
+                        const color =
+                          seriesData[index]?.color ?? seriesColor[index];
+                        const name = seriesData[index].name;
                         const accessibilityLabel = `${name}: ${pieData.key} - ${pieData.value}`;
 
                         return (

diff --git a/packages/polaris-viz/src/components/DonutChart/DonutChart.scss b/packages/polaris-viz/src/components/DonutChart/DonutChart.scss
@@ -28,8 +28,8 @@
 
 .ContentValue {
   font-size: 20px;
-  line-height: 28px;
-  font-weight: 400;
+  line-height: 24px;
+  font-weight: 700;
   user-select: text;
   margin: 0;
   font-variant-numeric: tabular-nums;

diff --git a/packages/polaris-viz/src/components/DonutChart/stories/CustomArc.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/CustomArc.stories.tsx
@@ -16,8 +16,8 @@ const CustomArcTemplate: StoryFn<DonutChartProps> = (args: DonutChartProps) => {
           Default: {
             arc: {
               cornerRadius: 5,
-              thickness: 50,
-            }
+              thickness: 18,
+            },
           },
         }}
       >

diff --git a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx
@@ -73,6 +73,63 @@ describe('<DonutChart />', () => {
       });
     });
 
+    it('truncates data to only show a maximum of 5 points', () => {
+      const chart = mount(
+        <DonutChart
+          {...mockProps}
+          data={[
+            ...mockProps.data,
+            {
+              name: 'Extra Data 1',
+              data: [{key: 'april - march', value: 100}],
+            },
+            {
+              name: 'Extra Data 2 ',
+              data: [{key: 'april - march', value: 10}],
+            },
+            {
+              name: 'Extra Data 3',
+              data: [{key: 'april - march', value: 10}],
+            },
+          ]}
+        />,
+      );
+
+      chart.act(() => {
+        requestAnimationFrame(() => {
+          expect(chart).toContainReactComponentTimes(Arc, 5);
+        });
+      });
+    });
+
+    it('filters out data with 0 or negative values', () => {
+      const chart = mount(
+        <DonutChart
+          {...mockProps}
+          data={[
+            ...mockProps.data,
+            {
+              name: 'Zero Value',
+              data: [{key: 'april - march', value: 0}],
+            },
+            {
+              name: 'Negative Value',
+              data: [{key: 'april - march', value: -100}],
+            },
+          ]}
+        />,
+      );
+
+      chart.act(() => {
+        requestAnimationFrame(() => {
+          expect(chart).toContainReactComponentTimes(
+            Arc,
+            mockProps.data.length,
+          );
+        });
+      });
+    });
+
     describe('<ComparisonMetric />', () => {
       it('does not render if comparisonMetric is not provided', () => {
         const chart = mount(

diff --git a/packages/polaris-viz/src/constants.ts b/packages/polaris-viz/src/constants.ts
@@ -39,6 +39,7 @@ export {
   MAX_DIAGONAL_VISIBLE_HEIGHT,
   VERTICAL_LABEL_TARGET_WIDTH,
   DIAGONAL_LABEL_MIN_WIDTH,
+  DONUT_CHART_MAX_SERIES_COUNT,
   HORIZONTAL_LABEL_TARGET_HEIGHT,
   VERTICAL_LABEL_MIN_WIDTH,
   Y_AXIS_CHART_SPACING,