Merge pull request #1786 from Shopify/fix-donut-double-format

Stop double formatting in label calculation

packages/polaris-viz/CHANGELOG.md

@@ -5,7 +5,11 @@ 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
+
+### Fixed
+
+- Double formatting in Donut Chart label calculations
 
 ## [15.6.1] - 2024-12-18
 

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) => {

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('<LegendValues />', () => {
+  it('renders a table with max width', async () => {
+    const legendValues = mount(<LegendValues {...mockProps} />);
+    expect(legendValues).toContainReactComponent('table', {
+      style: {maxWidth: 197.22, width: '100%'},
+    });
+  });
+});