diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx index 531d3b2a4..80b5e8e9e 100644 --- a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx +++ b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx @@ -85,7 +85,7 @@ export function LegendValues({ const longestLegendNameWidth = useMemo(() => { return legendData.reduce((previous, current) => { const estimatedLegendNameWidth = estimateStringWidth( - `${seriesNameFormatter(`${current.name || ''}`)}`, + current.name, characterWidths, ); @@ -95,7 +95,7 @@ export function LegendValues({ return previous; }, 0); - }, [legendData, seriesNameFormatter, characterWidths]); + }, [legendData, characterWidths]); const longestLegendValueWidth = useMemo(() => { return legendData.reduce((previous, current) => { diff --git a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx new file mode 100644 index 000000000..d4b951708 --- /dev/null +++ b/packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx @@ -0,0 +1,28 @@ +import {mount} from '@shopify/react-testing'; + +import {LegendValues} from '../LegendValues'; + +const mockProps = { + data: [ + { + name: 'Shopify Payments', + data: [{key: 'april - march', value: 50000}], + }, + ], + activeIndex: 1, + legendFullWidth: false, + labelFormatter: (val) => `${val}!`, + getColorVisionStyles: jest.fn(), + getColorVisionEventAttrs: jest.fn(), + seriesNameFormatter: (val) => `${val}!`, + renderHiddenLegendLabel: jest.fn(), +} as any; + +describe('', () => { + it('renders a table', async () => { + const legendValues = mount(); + expect(legendValues).toContainReactComponent('table', { + style: {maxWidth: 197.22, width: '100%'}, + }); + }); +});