@automattic/charts 4.2.0 → 4.4.0

package/src/charts/private/test/readings.test.ts

@@ -0,0 +1,29 @@
+import { formatReading, isInvalidReading } from '../readings';
+
+describe( 'isInvalidReading', () => {
+	test( 'accepts a number, including zero', () => {
+		expect( isInvalidReading( 0, { allowMissing: false } ) ).toBe( false );
+		expect( isInvalidReading( 42, { allowMissing: false } ) ).toBe( false );
+	} );
+
+	test( 'rejects undefined and NaN whether or not missing readings are allowed', () => {
+		expect( isInvalidReading( undefined, { allowMissing: true } ) ).toBe( true );
+		expect( isInvalidReading( NaN, { allowMissing: true } ) ).toBe( true );
+	} );
+
+	test( 'accepts null only where missing readings are allowed', () => {
+		expect( isInvalidReading( null, { allowMissing: true } ) ).toBe( false );
+		expect( isInvalidReading( null, { allowMissing: false } ) ).toBe( true );
+	} );
+} );
+
+describe( 'formatReading', () => {
+	test( 'reads a missing value as No data', () => {
+		expect( formatReading( null ) ).toBe( 'No data' );
+		expect( formatReading( undefined ) ).toBe( 'No data' );
+	} );
+
+	test( 'formats a real zero as zero', () => {
+		expect( formatReading( 0 ) ).toBe( '0' );
+	} );
+} );

package/src/charts/private/test/whole-number-ticks.test.tsx

@@ -0,0 +1,57 @@
+import { createScale } from '@visx/scale';
+import { getWholeNumberTickValues, hasOnlyWholeNumbers } from '../whole-number-ticks';
+import type { SeriesData } from '../../../types';
+
+const linear = ( domain: [ number, number ] ) =>
+	createScale( { type: 'linear', domain, range: [ 100, 0 ] } );
+
+const series = ( ...values: Array< number | null > ): SeriesData => ( {
+	label: 'A',
+	data: values.map( ( value, i ) => ( { date: new Date( 2024, i, 1 ), value } ) ),
+} );
+
+describe( 'getWholeNumberTickValues', () => {
+	it( 'keeps only the whole ticks of a range smaller than the tick count', () => {
+		expect( getWholeNumberTickValues( linear( [ 0, 1 ] ), 4 ) ).toEqual( [ 0, 1 ] );
+		expect( getWholeNumberTickValues( linear( [ 0, 2 ] ), 4 ) ).toEqual( [ 0, 1, 2 ] );
+	} );
+
+	it( 'leaves a scale whose ticks are already whole to visx', () => {
+		expect( getWholeNumberTickValues( linear( [ 0, 1000 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves non-numeric scales to visx', () => {
+		const band = createScale( { type: 'band', domain: [ 'a', 'b' ], range: [ 0, 100 ] } );
+		const time = createScale( {
+			type: 'time',
+			domain: [ new Date( 2024, 0, 1 ), new Date( 2024, 0, 2 ) ],
+			range: [ 0, 100 ],
+		} );
+		expect( getWholeNumberTickValues( band, 4 ) ).toBeUndefined();
+		expect( getWholeNumberTickValues( time, 4 ) ).toBeUndefined();
+		expect( getWholeNumberTickValues( undefined, 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with no whole tick to visx', () => {
+		expect( getWholeNumberTickValues( linear( [ 0.2, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with only one whole tick to visx', () => {
+		expect( getWholeNumberTickValues( linear( [ 0, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+} );
+
+describe( 'hasOnlyWholeNumbers', () => {
+	it( 'is true when every reading is whole, skipping missing ones', () => {
+		expect( hasOnlyWholeNumbers( [ series( 0, 1, null, 3 ) ] ) ).toBe( true );
+	} );
+
+	it( 'is false when any reading has a fraction', () => {
+		expect( hasOnlyWholeNumbers( [ series( 0, 1 ), series( 0.5 ) ] ) ).toBe( false );
+	} );
+
+	it( 'is false when there is no reading at all', () => {
+		expect( hasOnlyWholeNumbers( [ series( null, null ) ] ) ).toBe( false );
+		expect( hasOnlyWholeNumbers( [] ) ).toBe( false );
+	} );
+} );

package/src/charts/private/whole-number-ticks.tsx

@@ -0,0 +1,79 @@
+import { DataContext } from '@visx/xychart';
+import { useContext } from 'react';
+import { isReading } from './readings';
+import type { SeriesData } from '../../types';
+import type { ReactNode } from 'react';
+
+/**
+ * Whether every reading in the series is a whole number.
+ *
+ * @param series - The series visx renders.
+ * @return True when at least one reading exists and none has a fraction.
+ */
+export const hasOnlyWholeNumbers = ( series: SeriesData[] ): boolean => {
+	let sawReading = false;
+	for ( const { data } of series ) {
+		for ( const point of data ) {
+			const value = point?.value;
+			if ( ! isReading( value ) ) {
+				continue;
+			}
+			if ( ! Number.isInteger( value ) ) {
+				return false;
+			}
+			sawReading = true;
+		}
+	}
+	return sawReading;
+};
+
+/**
+ * The scale's ticks with the fractional ones dropped.
+ *
+ * d3 steps by 1, 2 or 5 times a power of ten, so every whole number inside the domain is one of its ticks.
+ *
+ * @param scale - The value scale visx built.
+ * @param count - Ticks to ask the scale for; undefined uses the scale's own default, as visx does.
+ * @return Whole-number ticks, or undefined when visx's own ticks need no change.
+ */
+export const getWholeNumberTickValues = (
+	scale: unknown,
+	count?: number
+): number[] | undefined => {
+	const ticks = ( scale as { ticks?: ( count?: number ) => unknown[] } )?.ticks?.( count );
+	if ( ! ticks?.every( ( tick ): tick is number => typeof tick === 'number' ) ) {
+		return undefined;
+	}
+	const whole = ticks.filter( tick => Number.isInteger( tick ) );
+	return whole.length > 1 && whole.length < ticks.length ? whole : undefined;
+};
+
+type WholeNumberTicksProps = {
+	axis: 'x' | 'y';
+	numTicks?: number;
+	enabled: boolean;
+	children: ( tickValues: number[] | undefined ) => ReactNode;
+};
+
+/**
+ * Hands its children the whole-number ticks of the chart's value scale.
+ *
+ * @param props          - Component props.
+ * @param props.axis     - Which scale carries the values.
+ * @param props.numTicks - Ticks to ask the scale for.
+ * @param props.enabled  - Whether the plotted values are all whole numbers and the caller pinned neither the ticks nor the value domain.
+ * @param props.children - Renders the axis and grid with the tick values.
+ * @return The rendered children.
+ */
+export const WholeNumberTicks = ( {
+	axis,
+	numTicks,
+	enabled,
+	children,
+}: WholeNumberTicksProps ) => {
+	const { xScale, yScale } = useContext( DataContext );
+	const tickValues = enabled
+		? getWholeNumberTickValues( axis === 'x' ? xScale : yScale, numTicks )
+		: undefined;
+	return <>{ children( tickValues ) }</>;
+};

package/src/components/legend/hooks/test/use-chart-legend-items.test.tsx

@@ -247,6 +247,130 @@ describe( 'useChartLegendItems', () => {
 		} );
 	} );
 
+	describe( 'Comparison item (SeriesData)', () => {
+		const comparisonData: SeriesData[] = [
+			{ label: 'Views', group: 'views', data: [ { label: 'Mon', value: 100 } ] },
+			{
+				label: 'Views — previous',
+				group: 'views',
+				options: { type: 'comparison' as const, seriesLineStyle: { strokeDasharray: '4 4' } },
+				data: [ { label: 'Mon', value: 90 } ],
+			},
+		];
+
+		test( 'is off by default', () => {
+			const { result } = renderHook(
+				() => useChartLegendItems( comparisonData, { collapseGroups: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views' ] );
+		} );
+
+		test( 'appends a static item styled like the comparison series', () => {
+			const { result } = renderHook(
+				() =>
+					useChartLegendItems(
+						comparisonData,
+						{ collapseGroups: true, comparisonItem: true },
+						'line'
+					),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [
+				'Views',
+				'Comparison period',
+			] );
+			expect( result.current[ 1 ].interactive ).toBe( false );
+			expect( result.current[ 1 ].shapeStyle ).toMatchObject( { strokeDasharray: '4 4' } );
+			expect( result.current[ 1 ].color ).toBe( result.current[ 0 ].color );
+		} );
+
+		test( 'uses a string option as the label', () => {
+			const { result } = renderHook(
+				() =>
+					useChartLegendItems( comparisonData, {
+						collapseGroups: true,
+						comparisonItem: 'Previous period',
+					} ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views', 'Previous period' ] );
+		} );
+
+		test( 'adds nothing when the comparison series already has its own item', () => {
+			const { result } = renderHook(
+				() => useChartLegendItems( comparisonData, { comparisonItem: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views', 'Views — previous' ] );
+		} );
+
+		test( 'styles a current-period series by its own line styles, not the theme index', () => {
+			const theme = {
+				seriesLineStyles: [ { strokeWidth: 2 } ],
+				legend: { shapeStyles: [ {}, { strokeDasharray: '2 2' } ] },
+			};
+			const themedWrapper = ( { children }: { children: ReactNode } ) => (
+				<GlobalChartsProvider theme={ theme }>{ children }</GlobalChartsProvider>
+			);
+			const pairedData: SeriesData[] = [
+				{ label: 'Views', group: 'views', data: [ { label: 'Mon', value: 100 } ] },
+				{ label: 'Visitors', group: 'visitors', data: [ { label: 'Mon', value: 50 } ] },
+			];
+
+			const { result } = renderHook( () => useChartLegendItems( pairedData, {}, 'line' ), {
+				wrapper: themedWrapper,
+			} );
+
+			expect( result.current[ 1 ].shapeStyle ).toEqual( { strokeWidth: 2 } );
+		} );
+
+		test( "takes the first metric's color when several metrics carry a comparison", () => {
+			const pairedData: SeriesData[] = [
+				{ label: 'Views', group: 'views', data: [ { label: 'Mon', value: 100 } ] },
+				{
+					label: 'Views — previous',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 90 } ],
+				},
+				{ label: 'Visitors', group: 'visitors', data: [ { label: 'Mon', value: 50 } ] },
+				{
+					label: 'Visitors — previous',
+					group: 'visitors',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 40 } ],
+				},
+			];
+
+			const { result } = renderHook(
+				() => useChartLegendItems( pairedData, { collapseGroups: true, comparisonItem: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [
+				'Views',
+				'Visitors',
+				'Comparison period',
+			] );
+			expect( result.current[ 0 ].color ).not.toBe( result.current[ 1 ].color );
+			expect( result.current[ 2 ].color ).toBe( result.current[ 0 ].color );
+		} );
+
+		test( 'adds nothing when no series is a comparison', () => {
+			const { result } = renderHook(
+				() => useChartLegendItems( [ comparisonData[ 0 ] ], { comparisonItem: true } ),
+				{ wrapper }
+			);
+
+			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views' ] );
+		} );
+	} );
+
 	describe( 'Label and Color', () => {
 		test( 'preserves label and color from data', () => {
 			const data: DataPointPercentageCalculated[] = [

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -1,4 +1,5 @@
 import { formatNumber } from '@automattic/number-formatters';
+import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
 import {
 	useGlobalChartsContext,
@@ -30,6 +31,12 @@ export interface ChartLegendOptions {
 	 * primary series. Off by default, so every series gets its own item.
 	 */
 	collapseGroups?: boolean;
+	/**
+	 * Append a static item explaining the comparison overlay whenever a series has
+	 * `options.type === 'comparison'`. Skipped when that series already has its own
+	 * item. Pass a string to replace the default label.
+	 */
+	comparisonItem?: boolean | string;
 }
 
 /**
@@ -234,6 +241,41 @@ function processSeriesData(
 	} );
 }
 
+/**
+ * Builds the static item that names the comparison overlay, styled like its first series.
+ * Skipped when a comparison series already has an item of its own, so nothing is listed twice.
+ * @param seriesData       - The series data to search for a comparison series
+ * @param items            - The legend items already built from the series
+ * @param label            - The item label
+ * @param getElementStyles - Function to get element styles
+ * @param legendShape      - The shape type for legend items (string literal or React component)
+ * @return The legend item, or null when it would add nothing
+ */
+function buildComparisonLegendItem(
+	seriesData: SeriesData[],
+	items: BaseLegendItem[],
+	label: string,
+	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles,
+	legendShape?: LegendShape< SeriesData[], number >
+): BaseLegendItem | null {
+	const itemLabels = new Set( items.map( item => item.label ) );
+	const index = seriesData.findIndex(
+		series => series.options?.type === 'comparison' && ! itemLabels.has( series.label )
+	);
+
+	if ( index === -1 ) {
+		return null;
+	}
+
+	const { color, shapeStyles } = getElementStyles( {
+		data: seriesData[ index ],
+		index,
+		legendShape,
+	} );
+
+	return { label, color, shapeStyle: shapeStyles, interactive: false };
+}
+
 /**
  * Processes point data into legend items
  * @param pointData          - The point data to process
@@ -296,6 +338,7 @@ export function useChartLegendItems<
 		withGlyph = false,
 		glyphSize = 8,
 		collapseGroups = false,
+		comparisonItem = false,
 		renderGlyph,
 	} = options;
 	const { getElementStyles } = useGlobalChartsContext();
@@ -307,8 +350,9 @@ export function useChartLegendItems<
 
 		// Handle SeriesData (multiple series with data points)
 		if ( 'data' in data[ 0 ] ) {
-			return processSeriesData(
-				data as SeriesData[],
+			const seriesData = data as SeriesData[];
+			const items = processSeriesData(
+				seriesData,
 				getElementStyles,
 				showValues,
 				withGlyph,
@@ -317,6 +361,19 @@ export function useChartLegendItems<
 				renderGlyph,
 				legendShape
 			);
+			const comparison = comparisonItem
+				? buildComparisonLegendItem(
+						seriesData,
+						items,
+						typeof comparisonItem === 'string'
+							? comparisonItem
+							: __( 'Comparison period', 'jetpack-charts' ),
+						getElementStyles,
+						legendShape
+					)
+				: null;
+
+			return comparison ? [ ...items, comparison ] : items;
 		}
 
 		// Handle DataPointDate or DataPointPercentageCalculated (single data points)
@@ -338,6 +395,7 @@ export function useChartLegendItems<
 		withGlyph,
 		glyphSize,
 		collapseGroups,
+		comparisonItem,
 		renderGlyph,
 		legendShape,
 	] );

package/src/components/legend/private/base-legend.tsx

@@ -16,7 +16,7 @@ import { ChartInstanceContext } from '../../../charts/private/chart-instance-con
 import { useTextTruncation } from '../../../hooks';
 import { GlobalChartsContext, useGlobalChartsTheme } from '../../../providers';
 import { useStandaloneScopeClass } from '../../../providers/chart-scope';
-import { valueOrIdentity, valueOrIdentityString, labelTransformFactory } from '../utils';
+import { valueOrIdentity, valueOrIdentityString } from '../utils';
 import styles from './base-legend.module.scss';
 import type { BaseLegendItem, BaseLegendProps } from '../types';
 
@@ -123,7 +123,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 			fill = valueOrIdentityString,
 			size = valueOrIdentityString,
 			labelFormat = valueOrIdentity,
-			labelTransform = labelTransformFactory,
+			labelTransform,
 			itemStyles,
 			itemClassName,
 			labelStyles,
@@ -154,11 +154,22 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const chartInstanceContext = useContext( ChartInstanceContext );
 		const standaloneScopeClass = useStandaloneScopeClass();
 
+		// Keep duplicate labels: a static comparison item can share a metric's name.
+		const domain = items.map( item => item.label );
 		const legendScale = scaleOrdinal( {
-			domain: items.map( item => item.label ),
+			domain,
 			range: items.map( item => item.color ),
 		} );
-		const domain = legendScale.domain();
+		const defaultLabelTransform = useCallback< NonNullable< BaseLegendProps[ 'labelTransform' ] > >(
+			( { labelFormat: format } ) =>
+				( datum, index ) => ( {
+					datum,
+					index,
+					text: String( format( datum, index ) ),
+					value: items[ index ].color,
+				} ),
+			[ items ]
+		);
 
 		const getShapeStyle = useCallback(
 			( { index }: { index: number } ) => items[ index ]?.shapeStyle,
@@ -178,8 +189,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 			[ interactive, chartId, context ]
 		);
 
-		// Visibility is display state, not interaction state: a series hidden
-		// programmatically must read as hidden even when the legend cannot be clicked.
+		// Disabling interaction for the whole legend still preserves its series' visibility state.
 		const isSeriesVisible = useCallback(
 			( seriesLabel: string ) => {
 				if ( chartInstanceContext?.isSeriesVisible ) {
@@ -195,18 +205,18 @@ export const BaseLegend: ForwardRefExoticComponent<
 
 		// Create event handlers to avoid inline arrow functions
 		const createClickHandler = useCallback(
-			( seriesLabels: string[] ) => {
-				if ( ! interactive ) {
+			( seriesLabels: string[], itemInteractive: boolean ) => {
+				if ( ! itemInteractive ) {
 					return undefined;
 				}
 				return () => handleLegendClick( seriesLabels );
 			},
-			[ interactive, handleLegendClick ]
+			[ handleLegendClick ]
 		);
 
 		const createKeyDownHandler = useCallback(
-			( seriesLabels: string[] ) => {
-				if ( ! interactive ) {
+			( seriesLabels: string[], itemInteractive: boolean ) => {
+				if ( ! itemInteractive ) {
 					return undefined;
 				}
 				return ( event: KeyboardEvent ) => {
@@ -216,18 +226,20 @@ export const BaseLegend: ForwardRefExoticComponent<
 					}
 				};
 			},
-			[ interactive, handleLegendClick ]
+			[ handleLegendClick ]
 		);
 
 		const flexAlignment = ALIGNMENT_TO_FLEX[ alignment ] ?? 'center';
+		const staticItemRole = interactive ? undefined : 'listitem';
 
 		return render ? (
 			render( items )
 		) : (
 			<LegendOrdinal
 				scale={ legendScale }
+				domain={ domain }
 				labelFormat={ labelFormat }
-				labelTransform={ labelTransform }
+				labelTransform={ labelTransform ?? defaultLabelTransform }
 			>
 				{ labels => (
 					<Stack
@@ -248,16 +260,18 @@ export const BaseLegend: ForwardRefExoticComponent<
 							const seriesLabels = matchedItem?.seriesLabels?.length
 								? matchedItem.seriesLabels
 								: [ label.text ];
-							const visible = isSeriesVisible( seriesLabels[ 0 ] );
-							const handleClick = createClickHandler( seriesLabels );
-							const handleKeyDown = createKeyDownHandler( seriesLabels );
+							const visible =
+								matchedItem?.interactive === false || isSeriesVisible( seriesLabels[ 0 ] );
+							const itemInteractive = interactive && matchedItem?.interactive !== false;
+							const handleClick = createClickHandler( seriesLabels, itemInteractive );
+							const handleKeyDown = createKeyDownHandler( seriesLabels, itemInteractive );
 
 							return (
 								<LegendItem
 									className={ clsx(
 										'visx-legend-item',
 										styles[ 'legend-item' ],
-										interactive && styles[ 'legend-item--interactive' ],
+										itemInteractive && styles[ 'legend-item--interactive' ],
 										! visible && styles[ 'legend-item--inactive' ],
 										itemClassName
 									) }
@@ -271,14 +285,15 @@ export const BaseLegend: ForwardRefExoticComponent<
 									}
 									onClick={ handleClick }
 									onKeyDown={ handleKeyDown }
-									role={ interactive ? 'button' : 'listitem' }
-									tabIndex={ interactive ? 0 : undefined }
-									aria-pressed={ interactive ? visible : undefined }
+									// A static item in an interactive legend has no list to belong to.
+									role={ itemInteractive ? 'button' : staticItemRole }
+									tabIndex={ itemInteractive ? 0 : undefined }
+									aria-pressed={ itemInteractive ? visible : undefined }
 									aria-label={ getLegendItemAriaLabel(
 										label.text,
 										matchedItem?.value,
 										visible,
-										interactive
+										itemInteractive
 									) }
 								>
 									{ items[ i ]?.renderGlyph ? (

package/src/components/legend/test/legend.test.tsx

@@ -9,6 +9,7 @@ import {
 	useChartRegistration,
 	useGlobalChartsContext,
 } from '../../../providers';
+import { useChartLegendItems } from '../hooks/use-chart-legend-items';
 import { Legend } from '../legend';
 import { BaseLegend } from '../private/base-legend';
 import type { ChartType } from '../../../types';
@@ -49,6 +50,26 @@ describe( 'BaseLegend', () => {
 		expect( markers[ 1 ] ).toHaveAttribute( 'fill', '#00ff00' );
 	} );
 
+	test( 'preserves each duplicate label, color, and following item', () => {
+		render(
+			<BaseLegend
+				items={ [
+					{ label: 'Views', color: '#ff0000' },
+					{ label: 'Views', color: '#00ff00', interactive: false },
+					{ label: 'Visitors', color: '#0000ff' },
+				] }
+				shape={ TestShape }
+				labelFormat={ label => `Metric: ${ label }` }
+			/>
+		);
+		expect( screen.getAllByText( 'Metric: Views' ) ).toHaveLength( 2 );
+		expect( screen.getByText( 'Metric: Visitors' ) ).toBeInTheDocument();
+		const markers = screen.getAllByTestId( 'legend-marker' );
+		expect( markers[ 0 ] ).toHaveAttribute( 'fill', '#ff0000' );
+		expect( markers[ 1 ] ).toHaveAttribute( 'fill', '#00ff00' );
+		expect( markers[ 2 ] ).toHaveAttribute( 'fill', '#0000ff' );
+	} );
+
 	test( 'handles empty items array', () => {
 		render( <BaseLegend items={ [] } orientation="horizontal" /> );
 		const legendItems = screen.queryAllByRole( 'listitem' );
@@ -754,6 +775,69 @@ describe( 'BaseLegend', () => {
 			expect( screen.getByTestId( 'views-prev' ) ).toHaveTextContent( 'true' );
 		} );
 
+		it( 'keeps an item with interactive: false static inside an interactive legend', async () => {
+			const user = userEvent.setup();
+			const items = [
+				{ label: 'Views', color: '#0000ff' },
+				{ label: 'Comparison period', color: '#0000ff', interactive: false },
+			];
+
+			render(
+				<GlobalChartsProvider>
+					<BaseLegend items={ items } interactive={ true } chartId="test-chart" />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getAllByRole( 'button' ) ).toHaveLength( 1 );
+			const staticItem = screen.getAllByTestId( 'legend-item' )[ 1 ];
+			expect( staticItem ).toHaveTextContent( 'Comparison period' );
+			expect( staticItem ).not.toHaveAttribute( 'role' );
+			expect( staticItem ).not.toHaveAttribute( 'tabindex' );
+			expect( staticItem ).not.toHaveAttribute( 'aria-pressed' );
+
+			await user.click( staticItem );
+
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( staticItem ).not.toHaveClass( 'legend-item--inactive' );
+		} );
+
+		it( 'keeps a comparison item distinct when its label collides', async () => {
+			const user = userEvent.setup();
+			const Example = () => {
+				const items = useChartLegendItems(
+					[
+						{
+							label: 'Comparison period',
+							group: 'metric',
+							data: [ { label: 'Mon', value: 10 } ],
+						},
+						{
+							label: 'Previous metric',
+							group: 'metric',
+							options: { type: 'comparison' },
+							data: [ { label: 'Mon', value: 5 } ],
+						},
+					],
+					{ collapseGroups: true, comparisonItem: true },
+					'line'
+				);
+				return <BaseLegend items={ items } interactive chartId="test-chart" />;
+			};
+			render(
+				<GlobalChartsProvider>
+					<Example />
+				</GlobalChartsProvider>
+			);
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			const staticItem = screen.getAllByTestId( 'legend-item' )[ 1 ];
+			expect( staticItem ).not.toHaveAttribute( 'role' );
+			await user.click( screen.getByRole( 'button' ) );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute( 'aria-pressed', 'false' );
+			expect( staticItem ).not.toHaveClass( 'legend-item--inactive' );
+			await user.click( staticItem );
+			expect( screen.getByRole( 'button' ) ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
 		it( 'falls back to the item label when seriesLabels is an empty array', async () => {
 			const user = userEvent.setup();
 

package/src/components/legend/types.ts

@@ -61,4 +61,6 @@ export type BaseLegendItem = {
 	 * the interactive legend to toggle a whole group's visibility from one item.
 	 */
 	seriesLabels?: string[];
+	/** Set to false for a static item that cannot be toggled or dimmed. */
+	interactive?: boolean;
 };

package/src/components/legend/utils/index.ts

@@ -1,3 +1,2 @@
 export { valueOrIdentity, valueOrIdentityString } from './value-or-identity';
-export { labelTransformFactory } from './label-transform-factory';
 export type { ValueOrIdentity } from './value-or-identity';

package/src/components/tooltip/accessible-tooltip.tsx

@@ -172,7 +172,7 @@ export const AccessibleTooltip: React.FC< AccessibleTooltipProps > = ( {
 				tooltipContext?.showTooltip( {
 					datum: tooltipItem.datum,
 					key: tooltipItem.seriesLabel,
-					index: tooltipItem.seriesIndex,
+					index: tooltipItem.dataPointIndex,
 				} );
 			}
 		}