diff --git a/packages/polaris-viz-core/src/constants.ts b/packages/polaris-viz-core/src/constants.ts index 05b932cd8..c37967b6c 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-core/src/index.ts b/packages/polaris-viz-core/src/index.ts index 5cbc1c408..4fc1a04d5 100644 --- a/packages/polaris-viz-core/src/index.ts +++ b/packages/polaris-viz-core/src/index.ts @@ -42,7 +42,6 @@ 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 5803a78a2..e5366a301 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -11,6 +11,12 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - Fixed issue where `` bar width would be 1px when data changes from all 0 values to data with non-zero values. +### Changed + +- Changed `` to include 0 or negative values in data. +- Changed `` to show any number of data points. +- Updated `` wrapper to take full height of container and center contents. + ## [9.12.0] - 2023-09-19 - No updates. Transitive dependency bump. diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx index 8427bc265..9dbbec1dd 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, 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 7e70241f4..7b8add17c 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 4bedd9b40..5171e2127 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 && (
= Template.bind({}); +export const CustomInnerValueContent: Story = Template.bind( + {}, +); CustomInnerValueContent.args = { ...DEFAULT_PROPS, data: DEFAULT_DATA, renderInnerValueContent: ({activeValue, animatedTotalValue, totalValue}) => { - const activeValuePercentage = activeValue - ? `${(activeValue / totalValue * 100).toFixed(1)}%` - : null; + const activeValuePercentage = + activeValue === null || activeValue === undefined + ? null + : `${((activeValue / totalValue) * 100).toFixed(1)}%`; return ( -
+
{activeValuePercentage && ( -

+

{activeValuePercentage}

)} -

+

Total: {animatedTotalValue}

- ) - } + ); + }, }; 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 c0520b995..029505fea 100644 --- a/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx +++ b/packages/polaris-viz/src/components/DonutChart/tests/DonutChart.test.tsx @@ -73,63 +73,6 @@ 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 e4c37c090..e7dc7b495 100644 --- a/packages/polaris-viz/src/constants.ts +++ b/packages/polaris-viz/src/constants.ts @@ -39,7 +39,6 @@ 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/src/types.ts b/packages/polaris-viz/src/types.ts index f214ffc01..719c9e166 100644 --- a/packages/polaris-viz/src/types.ts +++ b/packages/polaris-viz/src/types.ts @@ -208,7 +208,7 @@ export type RenderLegendContent = ( export type SortedBarChartData = (number | null)[][]; export interface InnerValueContents { - activeValue: number | null; + activeValue: number | null | undefined; animatedTotalValue: ReactNode; totalValue: number; }