diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 1d088a9e1..63cc49dcb 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/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 + +### Fixed + +- Fixed issue where `` overflow legends wouldn't use the `seriesNameFormatter`. ## [12.4.0] - 2024-04-03 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 7a5f9c9dc..9201e5321 100644 --- a/packages/polaris-viz/src/components/DonutChart/components/LegendValues/LegendValues.tsx +++ b/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} /> )} diff --git a/packages/polaris-viz/src/components/Legend/Legend.tsx b/packages/polaris-viz/src/components/Legend/Legend.tsx index fadf71b0e..4b23b597b 100644 --- a/packages/polaris-viz/src/components/Legend/Legend.tsx +++ b/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} /> ); }); diff --git a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx b/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx index df1766737..99016487e 100644 --- a/packages/polaris-viz/src/components/Legend/components/LegendItem/LegendItem.tsx +++ b/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(null); @@ -118,7 +121,7 @@ export function LegendItem({ color: selectedTheme.legend.labelColor, }} > - {name} + {seriesNameFormatter(name)} {!showLegendValues || value == null ? null : ( , container,