diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts index 05b932cd82..c37967b6c7 100644 --- a/packages/polaris-viz-core/src/constants.ts +++ b/packages/polaris-viz-core/src/constants.ts @@ -504,7 +504,6 @@ 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/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx index 8427bc2657..efd8b79627 100644 --- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx +++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx @@ -16,7 +16,6 @@ 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'; @@ -83,17 +82,9 @@ export function Chart({ const seriesCount = clamp({ amount: data.length, min: 1, - max: DONUT_CHART_MAX_SERIES_COUNT, + max: Infinity, }); - 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 = @@ -101,7 +92,7 @@ export function Chart({ ? 'vertical' : 'horizontal'; - const longestLegendWidth = seriesData.reduce((previous, current) => { + const longestLegendWidth = data.reduce((previous, current) => { const estimatedLegendWidth = estimateLegendItemWidth( current.name ?? '', characterWidths, @@ -124,7 +115,7 @@ export function Chart({ const {height, width, legend, setLegendDimensions, isLegendMounted} = useLegend({ - data: [{series: seriesData, shape: 'Bar'}], + data: [{series: data.slice(0, 5), shape: 'Bar'}], dimensions, showLegend, direction: legendDirection, @@ -149,7 +140,7 @@ export function Chart({ const diameter = Math.min(height, width); const radius = diameter / 2; - const points: DataPoint[] = seriesData.reduce( + const points: DataPoint[] = data.reduce( (prev: DataPoint[], {data}) => prev.concat(data), [], ); @@ -206,9 +197,8 @@ export function Chart({ ) : ( pieChartData.map( ({data: pieData, startAngle, endAngle}, index) => { - const color = - seriesData[index]?.color ?? seriesColor[index]; - const name = seriesData[index].name; + const color = data[index]?.color ?? seriesColor[index]; + const name = data[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 7e70241f42..7b8add17c0 100644 --- a/packages/polaris-viz/src/components/DonutChart/DonutChart.scss +++ b/packages/polaris-viz/src/components/DonutChart/DonutChart.scss @@ -12,6 +12,8 @@ position: relative; display: flex; align-items: center; + justify-content: center; + height: 100%; } .ContentWrapper { 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 4bedd9b40e..5171e2127f 100644 --- a/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx +++ b/packages/polaris-viz/src/components/DonutChart/components/InnerValue/InnerValue.tsx @@ -10,7 +10,7 @@ import {ComparisonMetric} from '../../../ComparisonMetric'; import styles from '../../DonutChart.scss'; interface Props { - activeValue: number | null; + activeValue: number | null | undefined; labelFormatter: LabelFormatter; isAnimated: boolean; totalValue: number; @@ -47,7 +47,8 @@ export function InnerValue({ ); - const valueToDisplay = activeValue || animatedTotalValue; + const activeValueExists = activeValue !== null && activeValue !== undefined; + const valueToDisplay = activeValueExists ? activeValue : animatedTotalValue; const innerContent = renderInnerValueContent?.({ activeValue, @@ -61,7 +62,7 @@ export function InnerValue({ > {valueToDisplay} - {comparisonMetric != null && !activeValue && ( + {comparisonMetric != null && !activeValueExists && (
+
{activeValuePercentage}
)} -+
Total: {animatedTotalValue}