From fd838cd7b575c0e2452f19fd36f7854bccda056c Mon Sep 17 00:00:00 2001 From: Michael Nesen Date: Wed, 30 Aug 2023 15:50:57 +0000 Subject: [PATCH] Donut Chart Update Styles and add data truncation --- packages/polaris-viz-core/src/constants.ts | 3 +- packages/polaris-viz-core/src/index.ts | 1 + packages/polaris-viz/CHANGELOG.md | 8 ++- .../src/components/DonutChart/Chart.tsx | 28 +++++++-- .../src/components/DonutChart/DonutChart.scss | 4 +- .../DonutChart/stories/CustomArc.stories.tsx | 4 +- .../DonutChart/tests/DonutChart.test.tsx | 57 +++++++++++++++++++ packages/polaris-viz/src/constants.ts | 1 + 8 files changed, 94 insertions(+), 12 deletions(-) diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts index 3e140e702..05b932cd8 100644 --- 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 index 4fc1a04d5..5cbc1c408 100644 --- 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 index 4ec7ab3e0..92faf0d12 100644 --- 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 + +### Changed + +- Changed `` to not show 0 or negative values. +- Changed `` to only show a maximum of 5 data points. +- Updated `` 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 index 9e166970b..8427bc265 100644 --- 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,7 +80,20 @@ export function Chart({ const [activeIndex, setActiveIndex] = useState(-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 = @@ -87,7 +101,7 @@ export function Chart({ ? '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 index 6b57f60fb..7e70241f4 100644 --- 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 index 51c66dcbc..0568f4ff7 100644 --- 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 = (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 index 029505fea..c0520b995 100644 --- 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('', () => { }); }); + it('truncates data to only show a maximum of 5 points', () => { + const chart = mount( + , + ); + + chart.act(() => { + requestAnimationFrame(() => { + expect(chart).toContainReactComponentTimes(Arc, 5); + }); + }); + }); + + it('filters out data with 0 or negative values', () => { + const chart = mount( + , + ); + + chart.act(() => { + requestAnimationFrame(() => { + expect(chart).toContainReactComponentTimes( + Arc, + mockProps.data.length, + ); + }); + }); + }); + describe('', () => { 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 index e7dc7b495..e4c37c090 100644 --- 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,