@automattic/charts 4.9.0 → 4.11.0

package/src/charts/heatmap-chart/types.ts

@@ -74,8 +74,6 @@ export interface HeatmapChartProps extends Omit<
 	 * group past the edge, Page Up/Down by one group. Default `grid`.
 	 */
 	keyboardNavigation?: 'grid' | 'calendar';
-	/** Accessible name of the grid. Defaults to a localized "Heatmap chart". */
-	ariaLabel?: string;
 	/** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
 	compact?: boolean;
 	/** Compact mode only: grow the cells to fill the chart's box, wrapping the column groups onto more rows when that makes them larger. Default false. */
@@ -104,7 +102,7 @@ export interface HeatmapChartProps extends Omit<
 	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
 	minCellHeight?: number;
 	/**
-	 * Color the cell scale is built from, deepened at the highest value toward 9:1
+	 * Color the cell scale is built from, deepened at the highest value toward 6:1
 	 * against the background. Defaults to the first series palette slot,
 	 * `--a8c-charts-color-series-1`.
 	 */

package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts

@@ -16,8 +16,8 @@ export const SUBPIXEL_TOLERANCE = 0.5;
  * depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
  * whatever a caller renders as a label, so any restated number would drift.
  *
- * Every row is a direct grid child marked with `data-row-index`; interactive rows
- * use a button wrapper and non-interactive rows use a div wrapper.
+ * Every row is a `listitem` div, a direct grid child marked with `data-row-index`;
+ * interactive rows hold a button inside it.
  *
  * @param enabled  - Whether to measure at all. When false every row fits.
  * @param rowCount - Total number of rows rendered.

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -147,6 +147,12 @@
 // needs no runtime cascade and never lands on the DOM as an unprefixed var.
 $focus-ring-width: var(--wpds-border-width-focus);
 
+.rowItem {
+	display: grid;
+	grid-column: 1 / -1;
+	grid-template-columns: subgrid;
+}
+
 .row {
 	display: grid;
 	grid-column: 1 / -1;

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -188,6 +188,7 @@ const BarWithLabel = ( {
  * @param props.children         - Child components for composition API
  * @param props.className        - Additional CSS class name
  * @param props.style            - Custom styling for the chart container
+ * @param props.ariaLabel        - Accessible name for the list, defaulting to "Leaderboard chart"
  * @return JSX element representing the leaderboard chart
  */
 const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
@@ -208,6 +209,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	legend = {},
 	legendLabels,
 	gap = 'md',
+	ariaLabel,
 	className,
 	style,
 	children,
@@ -389,6 +391,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 						</div>
 					) : (
 						<Grid
+							role="list"
+							aria-label={ ariaLabel ?? __( 'Leaderboard chart', 'jetpack-charts' ) }
 							templateColumns="minmax(0, 1fr) auto"
 							rowGap={ ROW_GAP }
 							columnGap={ COLUMN_GAP }
@@ -465,46 +469,57 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 								if ( entry.onClick && entry.hasInteractiveLabel ) {
 									return (
-										// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Mouse-only fallback; the row button carries keyboard access.
 										<div
 											key={ entry.id }
+											role="listitem"
 											data-row-index={ rowIndex }
 											style={ rowStyle }
-											className={ clsx( styles.row, styles.interactiveRow, styles.layeredRow ) }
-											onClick={ forwardCellClickToRowButton }
+											className={ styles.rowItem }
 										>
-											{ rowCells }
-											<button
-												type="button"
-												className={ styles.rowButton }
-												onClick={ entry.onClick }
-												aria-label={ entry.ariaLabel }
-											/>
-											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+											{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Mouse-only fallback; the row button carries keyboard access. */ }
+											<div
+												className={ clsx( styles.row, styles.interactiveRow, styles.layeredRow ) }
+												onClick={ forwardCellClickToRowButton }
+											>
+												{ rowCells }
+												<button
+													type="button"
+													className={ styles.rowButton }
+													onClick={ entry.onClick }
+													aria-label={ entry.ariaLabel }
+												/>
+												<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+											</div>
 										</div>
 									);
 								}
 
 								if ( entry.onClick ) {
 									return (
-										<button
+										<div
 											key={ entry.id }
-											type="button"
+											role="listitem"
 											data-row-index={ rowIndex }
 											style={ rowStyle }
-											className={ clsx( styles.row, styles.interactiveRow ) }
-											onClick={ entry.onClick }
-											aria-label={ entry.ariaLabel }
+											className={ styles.rowItem }
 										>
-											{ rowCells }
-											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
-										</button>
+											<button
+												type="button"
+												className={ clsx( styles.row, styles.interactiveRow ) }
+												onClick={ entry.onClick }
+												aria-label={ entry.ariaLabel }
+											>
+												{ rowCells }
+												<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+											</button>
+										</div>
 									);
 								}
 
 								return (
 									<div
 										key={ entry.id }
+										role="listitem"
 										data-row-index={ rowIndex }
 										style={ rowStyle }
 										className={ styles.row }

package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
@@ -706,6 +706,32 @@ describe( 'LeaderboardChart', () => {
 			);
 		} );
 
+		it( 'renders each entry as a list item, keeping clickable rows as named buttons', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						mockData[ 0 ],
+						{ ...mockData[ 1 ], ariaLabel: 'Open Home', onClick: jest.fn() },
+						{
+							...mockData[ 1 ],
+							id: 'about',
+							ariaLabel: 'Open About',
+							onClick: jest.fn(),
+							hasInteractiveLabel: true,
+						},
+					] }
+				/>
+			);
+			const items = screen.getAllByRole( 'listitem' );
+			expect( items ).toHaveLength( 3 );
+			expect(
+				within( items[ 1 ] ).getByRole( 'button', { name: 'Open Home' } )
+			).toBeInTheDocument();
+			expect(
+				within( items[ 2 ] ).getByRole( 'button', { name: 'Open About' } )
+			).toBeInTheDocument();
+		} );
+
 		it( 'does not render a button for entries without onClick', () => {
 			render( <LeaderboardChart data={ [ mockData[ 0 ] ] } /> );
 			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
@@ -721,15 +747,18 @@ describe( 'LeaderboardChart', () => {
 
 	describe( 'grid gaps', () => {
 		// eslint-disable-next-line testing-library/no-node-access -- The grid is rendered by `Grid` from @wordpress/components, which takes no test id.
-		const grid = () => document.querySelector( '[data-leaderboard-grid]' );
+		const grid = () => document.querySelector< HTMLElement >( '[data-leaderboard-grid]' );
 
 		it( 'hands the catalog role to the grid', () => {
 			render( <LeaderboardChart data={ mockData } /> );
 
-			expect( grid() ).toHaveStyle( {
-				gridRowGap: 'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)',
-				gridColumnGap: 'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)',
-			} );
+			// Grid writes its gaps into custom properties and reads them from a stylesheet.
+			expect( grid().style.getPropertyValue( '--wp-components-grid-row-gap' ) ).toBe(
+				'var(--a8c-charts-dimension-leaderboard-row-gap, 12px)'
+			);
+			expect( grid().style.getPropertyValue( '--wp-components-grid-column-gap' ) ).toBe(
+				'var(--a8c-charts-dimension-leaderboard-column-gap, 4px)'
+			);
 		} );
 	} );
 } );

package/src/charts/leaderboard-chart/types.ts

@@ -12,6 +12,7 @@ export interface LeaderboardChartProps extends Pick<
 	| 'size'
 	| 'gap'
 	| 'animation'
+	| 'ariaLabel'
 > {
 	/**
 	 * Entries to display. Declared here rather than picked, since the base type

package/src/charts/line-chart/line-chart.tsx

@@ -272,6 +272,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		const legendInteractive = legend.interactive ?? false;
 		const legendCollapseGroups = legend.collapseGroups ?? false;
 		const legendComparisonItem = legend.comparisonItem ?? false;
+		const legendComparisonSeriesItems = legend.comparisonSeriesItems;
 		const legendShape = legend.shape ?? 'line';
 		const legendPosition = legend.position ?? 'bottom';
 
@@ -523,6 +524,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				glyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),
 				collapseGroups: legendCollapseGroups,
 				comparisonItem: legendComparisonItem,
+				comparisonSeriesItems: legendComparisonSeriesItems,
 				renderGlyph,
 			} ),
 			[
@@ -530,6 +532,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				glyphStyle?.radius,
 				legendCollapseGroups,
 				legendComparisonItem,
+				legendComparisonSeriesItems,
 				renderGlyph,
 			]
 		);

package/src/charts/line-chart/test/line-chart.test.tsx

@@ -1610,14 +1610,6 @@ describe( 'LineChart', () => {
 				expect( chart ).toHaveAttribute( 'tabIndex', '0' );
 				expect( chart ).toHaveAttribute( 'role', 'application' );
 				expect( chart ).toHaveAttribute( 'aria-label', 'Line chart' );
-			} );
-
-			test.each( [
-				[ undefined, 'Line chart' ],
-				[ 'Views over time', 'Views over time' ],
-			] )( 'names the chart container from ariaLabel %p', ( ariaLabel, name ) => {
-				renderWithTheme( { ariaLabel } );
-				expect( screen.getByRole( 'application', { name } ) ).toBeInTheDocument();
 				expect( screen.queryByLabelText( 'XYChart' ) ).not.toBeInTheDocument();
 			} );
 

package/src/charts/line-chart/types.ts

@@ -31,8 +31,6 @@ export type RenderLineGlyphProps< Datum extends object > = GlyphProps< Datum > &
 };
 
 export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/** Accessible name of the chart. Defaults to a localized "Line chart". */
-	ariaLabel?: string;
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

package/src/charts/pie-chart/pie-chart.module.scss

@@ -1,4 +1,7 @@
 .pie-chart {
+	// Keeps the tooltip's z-index inside the chart, as `.xy-plot` does.
+	isolation: isolate;
+
 	// Anchors the tooltip, which renders next to the SVG in here.
 	&__plot {
 		position: relative;

package/src/charts/pie-chart/pie-chart.tsx

@@ -138,11 +138,6 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 * When provided, replaces the default `label: value` tooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieChartRenderTooltipParams ) => ReactNode;
-
-	/**
-	 * Accessible name of the chart. Defaults to a localized "Pie chart".
-	 */
-	ariaLabel?: string;
 }
 
 // Base props type with optional responsive properties

package/src/charts/pie-chart/test/pie-chart.test.tsx

@@ -780,14 +780,6 @@ describe( 'PieChart', () => {
 			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
 		];
 
-		test.each( [
-			[ undefined, 'Pie chart' ],
-			[ 'Devices', 'Devices' ],
-		] )( 'names the focusable chart from ariaLabel %p', ( ariaLabel, name ) => {
-			render( <PieChart data={ data } ariaLabel={ ariaLabel } /> );
-			expect( screen.getByRole( 'application', { name } ) ).toHaveAttribute( 'tabindex', '0' );
-		} );
-
 		const expectRingOn = ( segment: HTMLElement ) =>
 			expect( screen.getByTestId( 'pie-selected-ring' ) ).toHaveAttribute(
 				'd',
@@ -799,6 +791,10 @@ describe( 'PieChart', () => {
 			render( <PieChart data={ data } withTooltips /> );
 			const [ macos, linux ] = screen.getAllByTestId( 'pie-segment' );
 			expect( screen.queryByTestId( 'pie-selected-ring' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'application', { name: 'Pie chart' } ) ).toHaveAttribute(
+				'tabindex',
+				'0'
+			);
 
 			await user.tab();
 			await user.keyboard( '{ArrowRight}' );

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -1,4 +1,7 @@
 .pie-semi-circle-chart {
+	// Keeps the tooltip's z-index inside the chart, as `.xy-plot` does.
+	isolation: isolate;
+
 	// Anchors the tooltip, which renders next to the SVG in here.
 	&__plot {
 		position: relative;

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -129,11 +129,6 @@ export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercen
 	 * When provided, replaces the default `label: value` tooltip with custom content.
 	 */
 	renderTooltip?: ( params: PieSemiCircleChartRenderTooltipParams ) => ReactNode;
-
-	/**
-	 * Accessible name of the chart. Defaults to a localized "Semi-circle chart".
-	 */
-	ariaLabel?: string;
 }
 
 // Base props type with optional responsive properties

package/src/charts/private/pie-keyboard-navigation/pie-tooltip.tsx

@@ -1,6 +1,11 @@
-import { BoundedTooltip } from '../../../components/tooltip/private/bounded-tooltip';
+import {
+	BoundedTooltip,
+	TOOLTIP_Z_INDEX,
+} from '../../../components/tooltip/private/bounded-tooltip';
 import { useStandaloneScopeClass } from '../../../providers/chart-scope';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+
+const TOOLTIP_BOX_STYLE: CSSProperties = { zIndex: TOOLTIP_Z_INDEX };
 
 interface PieTooltipProps {
 	top: number;
@@ -21,7 +26,7 @@ export const PieTooltip = ( {
 	const standaloneScopeClass = useStandaloneScopeClass();
 
 	return (
-		<BoundedTooltip top={ top } left={ left }>
+		<BoundedTooltip top={ top } left={ left } style={ TOOLTIP_BOX_STYLE }>
 			{ selectedIndex === undefined ? (
 				<div className={ standaloneScopeClass } role="tooltip">
 					{ children }

package/src/charts/test/accessible-name.test.tsx

@@ -0,0 +1,181 @@
+import { render, screen } from '@testing-library/react';
+import { GlobalChartsProvider } from '../../providers';
+import { salesByProduct } from '../../stories/sample-data';
+import { AreaChartUnresponsive } from '../area-chart';
+import { BarChartUnresponsive } from '../bar-chart';
+import { BarListChartUnresponsive } from '../bar-list-chart';
+import { ConversionFunnelChart } from '../conversion-funnel-chart';
+import { GeoChartUnresponsive } from '../geo-chart';
+import { HeatmapChart } from '../heatmap-chart';
+import { LeaderboardChartUnresponsive } from '../leaderboard-chart';
+import { LineChartUnresponsive } from '../line-chart';
+import { PieChartUnresponsive } from '../pie-chart';
+import { PieSemiCircleChartUnresponsive } from '../pie-semi-circle-chart';
+import type { GeoData } from '../../types';
+import type { ReactElement } from 'react';
+
+jest.mock( 'react-google-charts', () => ( { Chart: () => <div /> } ) );
+
+const series = [
+	{
+		label: 'Series A',
+		data: [
+			{ date: new Date( '2024-01-01' ), value: 10 },
+			{ date: new Date( '2024-01-02' ), value: 20 },
+		],
+	},
+];
+
+const slices = [
+	{ label: 'MacOS', value: 30, valueDisplay: '30', percentage: 60 },
+	{ label: 'Linux', value: 20, valueDisplay: '20', percentage: 40 },
+];
+
+const geoData: GeoData = [
+	[ 'Country', 'Value' ],
+	[ 'US', 100 ],
+	[ 'CA', 50 ],
+	[ 'GB', 25 ],
+];
+
+const funnelSteps = [
+	{ id: 'sessions', label: 'Sessions', rate: 100, count: 10000 },
+	{ id: 'cart', label: 'Cart', rate: 71.1, count: 7110 },
+	{ id: 'checkout', label: 'Checkout', rate: 52.5, count: 5250 },
+	{ id: 'purchase', label: 'Purchase', rate: 10.3, count: 1030 },
+];
+
+const heatmapData = [
+	{ label: 'W1', data: [ { value: 1 }, { value: 2 }, { value: null } ] },
+	{ label: 'W2', data: [ { value: 3 }, { value: 0 }, { value: 4 } ] },
+];
+
+const leaderboardData = [
+	{
+		id: 'direct',
+		label: 'Direct',
+		currentValue: 12500,
+		previousValue: 10000,
+		currentShare: 100,
+		previousShare: 80,
+		delta: 25,
+	},
+	{
+		id: 'social',
+		label: 'Social Media',
+		currentValue: 8750,
+		previousValue: 9500,
+		currentShare: 70,
+		previousShare: 76,
+		delta: -8,
+	},
+];
+
+const CHARTS: [ string, string, string, ( ariaLabel?: string ) => ReactElement ][] = [
+	[
+		'line',
+		'application',
+		'Line chart',
+		ariaLabel => (
+			<LineChartUnresponsive
+				data={ series }
+				width={ 400 }
+				height={ 300 }
+				withGradientFill={ false }
+				ariaLabel={ ariaLabel }
+			/>
+		),
+	],
+	[
+		'area',
+		'application',
+		'Area chart',
+		ariaLabel => (
+			<AreaChartUnresponsive data={ series } width={ 400 } height={ 300 } ariaLabel={ ariaLabel } />
+		),
+	],
+	[
+		'bar',
+		'application',
+		'Bar chart',
+		ariaLabel => (
+			<BarChartUnresponsive data={ series } width={ 400 } height={ 300 } ariaLabel={ ariaLabel } />
+		),
+	],
+	[
+		'bar list',
+		'application',
+		'Bar list chart',
+		ariaLabel => (
+			<BarListChartUnresponsive
+				data={ salesByProduct }
+				width={ 400 }
+				height={ 300 }
+				ariaLabel={ ariaLabel }
+			/>
+		),
+	],
+	[
+		'pie',
+		'application',
+		'Pie chart',
+		ariaLabel => <PieChartUnresponsive data={ slices } size={ 300 } ariaLabel={ ariaLabel } />,
+	],
+	[
+		'semi-circle',
+		'application',
+		'Semi-circle chart',
+		ariaLabel => (
+			<PieSemiCircleChartUnresponsive data={ slices } width={ 300 } ariaLabel={ ariaLabel } />
+		),
+	],
+	[
+		'geo',
+		'group',
+		'Geo chart',
+		ariaLabel => (
+			<GeoChartUnresponsive data={ geoData } width={ 800 } height={ 400 } ariaLabel={ ariaLabel } />
+		),
+	],
+	[
+		'conversion funnel',
+		'group',
+		'Conversion funnel chart',
+		ariaLabel => (
+			<ConversionFunnelChart mainRate={ 25 } steps={ funnelSteps } ariaLabel={ ariaLabel } />
+		),
+	],
+	[
+		'heatmap',
+		'grid',
+		'Heatmap chart',
+		ariaLabel => (
+			<HeatmapChart data={ heatmapData } width={ 500 } height={ 300 } ariaLabel={ ariaLabel } />
+		),
+	],
+	[
+		'leaderboard',
+		'list',
+		'Leaderboard chart',
+		ariaLabel => (
+			<LeaderboardChartUnresponsive
+				data={ leaderboardData }
+				width={ 400 }
+				height={ 300 }
+				ariaLabel={ ariaLabel }
+			/>
+		),
+	],
+];
+
+it.each( CHARTS )(
+	'names the %s chart from ariaLabel, or its default',
+	( _chart, role, defaultName, renderChart ) => {
+		const { unmount } = render( <GlobalChartsProvider>{ renderChart() }</GlobalChartsProvider> );
+		expect( screen.getByRole( role, { name: defaultName } ) ).toBeInTheDocument();
+		unmount();
+
+		render( <GlobalChartsProvider>{ renderChart( 'Views by day' ) }</GlobalChartsProvider> );
+		expect( screen.getByRole( role, { name: 'Views by day' } ) ).toBeInTheDocument();
+	}
+);

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

@@ -257,6 +257,23 @@ describe( 'useChartLegendItems', () => {
 				data: [ { label: 'Mon', value: 90 } ],
 			},
 		];
+		const twoMetricData: 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 perMetricLabel = ( metric: string ) => `${ metric } (Prev. 7 days)`;
 
 		test( 'is off by default', () => {
 			const { result } = renderHook(
@@ -300,15 +317,58 @@ describe( 'useChartLegendItems', () => {
 			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views', 'Previous period' ] );
 		} );
 
-		test( 'adds nothing when the comparison series already has its own item', () => {
+		test( 'names one static item per compared metric with comparisonSeriesItems', () => {
 			const { result } = renderHook(
-				() => useChartLegendItems( comparisonData, { comparisonItem: true } ),
+				() =>
+					useChartLegendItems(
+						twoMetricData,
+						{ collapseGroups: true, comparisonSeriesItems: perMetricLabel },
+						'line'
+					),
 				{ wrapper }
 			);
 
-			expect( result.current.map( item => item.label ) ).toEqual( [ 'Views', 'Views — previous' ] );
+			expect( result.current.map( item => item.label ) ).toEqual( [
+				'Views',
+				'Visitors',
+				'Views (Prev. 7 days)',
+				'Visitors (Prev. 7 days)',
+			] );
+			expect(
+				result.current.slice( 2 ).map( ( { interactive, describesSeries } ) => ( {
+					interactive,
+					describesSeries,
+				} ) )
+			).toEqual( [
+				{ interactive: false, describesSeries: 'Views — previous' },
+				{ interactive: false, describesSeries: 'Visitors — previous' },
+			] );
+			expect( result.current[ 2 ].color ).toBe( result.current[ 0 ].color );
+			expect( result.current[ 3 ].color ).toBe( result.current[ 1 ].color );
 		} );
 
+		test.each( [
+			[
+				'comparisonItem',
+				comparisonData,
+				{ comparisonItem: true },
+				[ 'Views', 'Views — previous' ],
+			],
+			[
+				'comparisonSeriesItems',
+				twoMetricData,
+				{ comparisonSeriesItems: perMetricLabel },
+				[ 'Views', 'Views — previous', 'Visitors', 'Visitors — previous' ],
+			],
+		] )(
+			'adds nothing for %s when the comparison series already has its own item',
+			( _name, data, options, expected ) => {
+				const { result } = renderHook( () => useChartLegendItems( data, options ), { wrapper } );
+
+				expect( result.current.map( item => item.label ) ).toEqual( expected );
+			}
+		);
+
 		test( 'styles a current-period series by its own line styles, not the theme index', () => {
 			const theme = {
 				seriesLineStyles: [ { strokeWidth: 2 } ],