From 760c8c20fce557dda30ecd3b32e36c8a8540ab14 Mon Sep 17 00:00:00 2001
From: Carys Mills <carys.mills@shopify.com>
Date: Thu, 19 Dec 2024 16:28:40 -0500
Subject: [PATCH] Stop double formatting in label calculation

---
 .../components/LegendValues/LegendValues.tsx  |  4 +--
 .../LegendValues/tests/LegendValues.test.tsx  | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 packages/polaris-viz/src/components/DonutChart/components/LegendValues/tests/LegendValues.test.tsx

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