Use seriesNameFormatter in overflow legends

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
+
+- Fixed issue where `<DonutChart />` overflow legends wouldn't use the `seriesNameFormatter`.
 
 ## [12.4.0] - 2024-04-03
 

packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx

@@ -122,6 +122,7 @@ export function LegendValues({
           lastVisibleIndex={allData.length - hiddenData.length}
           setActivatorWidth={() => null}
           dimensions={dimensions}
+          seriesNameFormatter={seriesNameFormatter}
         />
       )}
     </React.Fragment>

packages/polaris-viz/src/components/Legend/Legend.tsx

@@ -1,5 +1,6 @@
 import {Fragment} from 'react';
 import type {RefObject} from 'react';
+import type {LabelFormatter} from '@shopify/polaris-viz-core';
 import {DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core';
 
 import {useExternalHideEvents} from '../../hooks';
@@ -18,6 +19,7 @@ export interface LegendProps {
   indexOffset?: number;
   truncate?: boolean;
   showLegendValues?: boolean;
+  seriesNameFormatter?: LabelFormatter;
 }
 
 export function Legend({
@@ -30,6 +32,7 @@ export function Legend({
   backgroundColor,
   truncate = false,
   showLegendValues = false,
+  seriesNameFormatter,
 }: LegendProps) {
   const {hiddenIndexes} = useExternalHideEvents();
 
@@ -54,6 +57,7 @@ export function Legend({
         }}
         truncate={truncate}
         showLegendValues={showLegendValues}
+        seriesNameFormatter={seriesNameFormatter}
       />
     );
   });

packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx

@@ -1,3 +1,4 @@
+import type {LabelFormatter} from '@shopify/polaris-viz-core';
 import {
   getColorVisionEventAttrs,
   getColorVisionStylesForActiveIndex,
@@ -35,6 +36,7 @@ export interface LegendItemProps extends LegendData {
   backgroundColor?: string;
   truncate?: boolean;
   showLegendValues?: boolean;
+  seriesNameFormatter?: LabelFormatter;
 }
 
 export function LegendItem({
@@ -52,6 +54,7 @@ export function LegendItem({
   backgroundColor,
   truncate = false,
   showLegendValues = false,
+  seriesNameFormatter = (value) => `${value}`,
 }: LegendItemProps) {
   const selectedTheme = useTheme(theme);
   const ref = useRef<HTMLButtonElement | null>(null);
@@ -118,7 +121,7 @@ export function LegendItem({
             color: selectedTheme.legend.labelColor,
           }}
         >
-          {name}
+          {seriesNameFormatter(name)}
         </span>
         {!showLegendValues || value == null ? null : (
           <span

packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendTooltip.tsx

@@ -13,7 +13,7 @@ import {
   useChartContext,
   useTheme,
 } from '@shopify/polaris-viz-core';
-import type {BoundingRect} from '@shopify/polaris-viz-core';
+import type {BoundingRect, LabelFormatter} from '@shopify/polaris-viz-core';
 
 import type {LegendData} from '../../../types';
 import {TOOLTIP_BG_OPACITY} from '../../../constants';
@@ -34,6 +34,7 @@ interface Props {
   theme?: string;
   lastVisibleIndex?: number;
   dimensions?: BoundingRect;
+  seriesNameFormatter?: LabelFormatter;
 }
 
 export const LEGEND_TOOLTIP_ID = 'legend-toolip';
@@ -48,6 +49,7 @@ export function HiddenLegendTooltip({
   lastVisibleIndex = 0,
   setActivatorWidth,
   dimensions,
+  seriesNameFormatter,
 }: Props) {
   const selectedTheme = useTheme();
   const {isFirefox} = useBrowserCheck();
@@ -168,6 +170,7 @@ export function HiddenLegendTooltip({
             theme={theme}
             indexOffset={lastVisibleIndex}
             backgroundColor="transparent"
+            seriesNameFormatter={seriesNameFormatter}
           />
         </div>,
         container,