@automattic/charts 4.8.0 → 4.10.0

package/src/charts/private/pie-keyboard-navigation/test/order-arcs-for-navigation.test.ts

@@ -0,0 +1,34 @@
+import { orderArcsForNavigation } from '../order-arcs-for-navigation';
+
+const half = Math.PI / 2;
+
+describe( 'orderArcsForNavigation', () => {
+	it.each( [
+		[
+			'full pie, clockwise from 12 o’clock',
+			[
+				{ id: 'b', startAngle: Math.PI, endAngle: 2 * Math.PI },
+				{ id: 'a', startAngle: 0, endAngle: Math.PI },
+			],
+			[ 'a', 'b' ],
+		],
+		[
+			'clockwise semi-circle, left to right',
+			[
+				{ id: 'right', startAngle: 0, endAngle: half },
+				{ id: 'left', startAngle: -half, endAngle: 0 },
+			],
+			[ 'left', 'right' ],
+		],
+		[
+			'counter-clockwise semi-circle, left to right',
+			[
+				{ id: 'right', startAngle: half, endAngle: 0 },
+				{ id: 'left', startAngle: 0, endAngle: -half },
+			],
+			[ 'left', 'right' ],
+		],
+	] )( 'orders a %s', ( _, arcs, expected ) => {
+		expect( orderArcsForNavigation( arcs ).map( arc => arc.id ) ).toEqual( expected );
+	} );
+} );

package/src/charts/private/pie-keyboard-navigation/test/selected-segment-ring.test.ts

@@ -0,0 +1,14 @@
+import { toSvgId } from '../selected-segment-ring';
+
+describe( 'toSvgId', () => {
+	it.each( [
+		[ 'devices:1', 'devices/1' ],
+		[ 'a_3a_', 'a:' ],
+		[ ':r1:', '_r1_' ],
+	] )( 'keeps %s and %s apart', ( first, second ) => {
+		const ids = [ toSvgId( first ), toSvgId( second ) ];
+
+		expect( ids[ 0 ] ).not.toBe( ids[ 1 ] );
+		ids.forEach( id => expect( id ).toMatch( /^[A-Za-z0-9_-]+$/ ) );
+	} );
+} );

package/src/charts/private/pie-keyboard-navigation/use-pie-keyboard-navigation.ts

@@ -0,0 +1,139 @@
+import { useTooltip } from '@visx/tooltip';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useKeyboardNavigation } from '../../../components/tooltip';
+import type { DataPointPercentageCalculated } from '../../../types';
+import type { MouseEvent } from 'react';
+
+interface UsePieKeyboardNavigationProps< Arc > {
+	/** The visible arcs in `orderArcsForNavigation` order, which indexes run over. */
+	navigationArcs: Arc[];
+	withTooltips: boolean;
+	tooltipOffsetX: number;
+	tooltipOffsetY: number;
+}
+
+export const usePieKeyboardNavigation = < Arc extends { data: DataPointPercentageCalculated } >( {
+	navigationArcs,
+	withTooltips,
+	tooltipOffsetX,
+	tooltipOffsetY,
+}: UsePieKeyboardNavigationProps< Arc > ) => {
+	const chartRef = useRef< HTMLDivElement >( null );
+	const svgRef = useRef< SVGSVGElement >( null );
+	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
+	const [ isNavigating, setIsNavigating ] = useState( false );
+	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
+		useTooltip< DataPointPercentageCalculated >();
+
+	const {
+		tooltipRef: focusTooltip,
+		onChartFocus,
+		onChartBlur,
+		onChartKeyDown,
+		onChartPointerMove,
+	} = useKeyboardNavigation( {
+		selectedIndex,
+		setSelectedIndex,
+		isNavigating,
+		setIsNavigating,
+		chartRef,
+		totalPoints: navigationArcs.length,
+		visibleSeriesKey: JSON.stringify( navigationArcs.map( arcDatum => arcDatum.data.label ) ),
+	} );
+
+	const selectedArc = selectedIndex === undefined ? undefined : navigationArcs[ selectedIndex ];
+
+	const keyboardTooltip = useRef< HTMLDivElement | null >( null );
+	const tooltipLostFocus = useRef( false );
+
+	// React detaches the ref before removing the node, so the tooltip still holds focus here.
+	const tooltipRef = useCallback(
+		( element: HTMLDivElement | null ) => {
+			if ( element ) {
+				keyboardTooltip.current = element;
+				focusTooltip( element );
+			} else if (
+				keyboardTooltip.current?.ownerDocument.activeElement === keyboardTooltip.current
+			) {
+				tooltipLostFocus.current = true;
+			}
+		},
+		[ focusTooltip ]
+	);
+
+	// Arrow keys mount the next tooltip in the same commit, so focus only reaches the body when the selection's tooltip went away.
+	useLayoutEffect( () => {
+		if ( ! tooltipLostFocus.current ) {
+			return;
+		}
+		tooltipLostFocus.current = false;
+		const { activeElement, body } = chartRef.current?.ownerDocument ?? document;
+		if ( activeElement === null || activeElement === body ) {
+			chartRef.current?.focus();
+		}
+	} );
+
+	const getSegmentHandlers = ( data: DataPointPercentageCalculated, navigationIndex: number ) => ( {
+		onMouseMove: ( event: MouseEvent< SVGElement > ) => {
+			onChartPointerMove( navigationIndex );
+			if ( ! withTooltips ) {
+				return;
+			}
+
+			// The tooltip renders inside `chartRef`, so pointer coordinates are taken relative to it.
+			const bounds = chartRef.current?.getBoundingClientRect();
+			if ( ! bounds ) {
+				return;
+			}
+
+			showTooltip( {
+				tooltipData: data,
+				tooltipLeft: event.clientX - bounds.left + tooltipOffsetX,
+				tooltipTop: event.clientY - bounds.top + tooltipOffsetY,
+			} );
+		},
+		onMouseLeave: withTooltips ? hideTooltip : undefined,
+	} );
+
+	/**
+	 * Anchors the keyboard tooltip at `point`, an offset from the origin of the group the arcs are drawn in.
+	 *
+	 * @param originX - The group's x in SVG coordinates.
+	 * @param originY - The group's y in SVG coordinates.
+	 * @param point   - The point relative to the group, such as an arc centroid.
+	 * @return The anchor in SVG coordinates, or undefined without tooltips.
+	 */
+	const getKeyboardTooltipAnchor = useCallback(
+		( originX: number, originY: number, [ x, y ]: [ number, number ] ) =>
+			withTooltips
+				? { left: originX + x + tooltipOffsetX, top: originY + y + tooltipOffsetY }
+				: undefined,
+		[ withTooltips, tooltipOffsetX, tooltipOffsetY ]
+	);
+
+	return {
+		chartRef,
+		svgRef,
+		selectedArc,
+		getSegmentHandlers,
+		getKeyboardTooltipAnchor,
+		selectionOutputProps: {
+			withTooltips,
+			selectedIndex,
+			selectedData: selectedArc?.data,
+			chartRef,
+			svgRef,
+			tooltipRef,
+			pointerTooltip: tooltipOpen
+				? { data: tooltipData, left: tooltipLeft || 0, top: tooltipTop || 0 }
+				: undefined,
+		},
+		chartProps: {
+			role: 'application',
+			tabIndex: 0,
+			onKeyDown: onChartKeyDown,
+			onFocus: onChartFocus,
+			onBlur: onChartBlur,
+		} as const,
+	};
+};

package/src/charts/private/x-zoom/test/x-zoom.test.tsx

@@ -212,11 +212,12 @@ describe( 'ZoomResetButton', () => {
 
 	test( 'keyboard activation survives the chart wrapper keydown handler', async () => {
 		const onClick = jest.fn();
-		// Mirrors the chart's grid wrapper, whose keyboard-navigation handler
+		// Mirrors the chart's focusable container, whose keyboard-navigation handler
 		// calls preventDefault() on bubbled keydowns — which would cancel the
 		// native Enter/Space button activation.
 		render(
-			<div role="grid" tabIndex={ 0 } onKeyDown={ preventDefaultKeydown }>
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- mirrors the charts' container.
+			<div role="application" tabIndex={ 0 } onKeyDown={ preventDefaultKeydown }>
 				<ZoomResetButton onClick={ onClick } />
 			</div>
 		);

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 } ],

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

@@ -8,10 +8,12 @@ import {
 } from '../../../providers';
 import { formatPercentage } from '../../../utils';
 import type {
+	ComparisonItemLabel,
 	SeriesData,
 	DataPointDate,
 	DataPointPercentageCalculated,
 	LegendShape,
+	SeriesChartLegendConfig,
 } from '../../../types';
 import type { BaseLegendItem } from '../types';
 import type { GlyphProps } from '@visx/xychart';
@@ -36,7 +38,9 @@ export interface ChartLegendOptions {
 	 * `options.type === 'comparison'`. Skipped when that series already has its own
 	 * item. Pass a string to replace the default label.
 	 */
-	comparisonItem?: boolean | string;
+	comparisonItem?: SeriesChartLegendConfig[ 'comparisonItem' ];
+	/** One static item per comparison series instead; see `SeriesChartLegendConfig`. */
+	comparisonSeriesItems?: SeriesChartLegendConfig[ 'comparisonSeriesItems' ];
 }
 
 /**
@@ -276,6 +280,48 @@ function buildComparisonLegendItem(
 	return { label, color, shapeStyle: shapeStyles, interactive: false };
 }
 
+/**
+ * Builds one static item per comparison series folded into another series' item, named after
+ * that item and styled like the comparison series itself.
+ * @param seriesData       - The series data to search for comparison series
+ * @param items            - The legend items already built from the series
+ * @param formatLabel      - Names an item after the label of the item it was folded into
+ * @param getElementStyles - Function to get element styles
+ * @param legendShape      - The shape type for legend items (string literal or React component)
+ * @return The legend items, in series order
+ */
+function buildPerSeriesComparisonItems(
+	seriesData: SeriesData[],
+	items: BaseLegendItem[],
+	formatLabel: ComparisonItemLabel,
+	getElementStyles: ( params: GetElementStylesParams ) => ElementStyles,
+	legendShape?: LegendShape< SeriesData[], number >
+): BaseLegendItem[] {
+	return seriesData.flatMap( ( series, index ) => {
+		const owner = items.find( item => item.seriesLabels?.includes( series.label ) );
+
+		if (
+			series.options?.type !== 'comparison' ||
+			! owner ||
+			owner.seriesLabels?.[ 0 ] === series.label
+		) {
+			return [];
+		}
+
+		const { color, shapeStyles } = getElementStyles( { data: series, index, legendShape } );
+
+		return [
+			{
+				label: formatLabel( owner.label ),
+				color,
+				shapeStyle: shapeStyles,
+				interactive: false,
+				describesSeries: series.label,
+			},
+		];
+	} );
+}
+
 /**
  * Processes point data into legend items
  * @param pointData          - The point data to process
@@ -339,6 +385,7 @@ export function useChartLegendItems<
 		glyphSize = 8,
 		collapseGroups = false,
 		comparisonItem = false,
+		comparisonSeriesItems,
 		renderGlyph,
 	} = options;
 	const { getElementStyles } = useGlobalChartsContext();
@@ -361,6 +408,20 @@ export function useChartLegendItems<
 				renderGlyph,
 				legendShape
 			);
+
+			if ( comparisonSeriesItems ) {
+				return [
+					...items,
+					...buildPerSeriesComparisonItems(
+						seriesData,
+						items,
+						comparisonSeriesItems,
+						getElementStyles,
+						legendShape
+					),
+				];
+			}
+
 			const comparison = comparisonItem
 				? buildComparisonLegendItem(
 						seriesData,
@@ -396,6 +457,7 @@ export function useChartLegendItems<
 		glyphSize,
 		collapseGroups,
 		comparisonItem,
+		comparisonSeriesItems,
 		renderGlyph,
 		legendShape,
 	] );

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

@@ -11,6 +11,7 @@ import {
 	forwardRef,
 	useCallback,
 	useContext,
+	useMemo,
 } from 'react';
 import { ChartInstanceContext } from '../../../charts/private/chart-instance-context';
 import { useTextTruncation } from '../../../hooks';
@@ -115,7 +116,7 @@ export const BaseLegend: ForwardRefExoticComponent<
 > = forwardRef< HTMLDivElement, BaseLegendProps >(
 	(
 		{
-			items,
+			items: allItems,
 			className,
 			orientation = 'horizontal',
 			alignment = 'center',
@@ -154,6 +155,31 @@ export const BaseLegend: ForwardRefExoticComponent<
 		const chartInstanceContext = useContext( ChartInstanceContext );
 		const standaloneScopeClass = useStandaloneScopeClass();
 
+		// Disabling interaction for the whole legend still preserves its series' visibility state.
+		const isSeriesVisible = useCallback(
+			( seriesLabel: string ) => {
+				if ( chartInstanceContext?.isSeriesVisible ) {
+					return chartInstanceContext.isSeriesVisible( seriesLabel );
+				}
+				if ( ! chartId || ! context ) {
+					return true;
+				}
+				return context.isSeriesVisible( chartId, seriesLabel );
+			},
+			[ chartId, chartInstanceContext, context ]
+		);
+
+		const items = useMemo(
+			() =>
+				allItems.filter(
+					item =>
+						item.interactive !== false ||
+						! item.describesSeries ||
+						isSeriesVisible( item.describesSeries )
+				),
+			[ allItems, isSeriesVisible ]
+		);
+
 		// Keep duplicate labels: a static comparison item can share a metric's name.
 		const domain = items.map( item => item.label );
 		const legendScale = scaleOrdinal( {
@@ -189,20 +215,6 @@ export const BaseLegend: ForwardRefExoticComponent<
 			[ interactive, chartId, context ]
 		);
 
-		// Disabling interaction for the whole legend still preserves its series' visibility state.
-		const isSeriesVisible = useCallback(
-			( seriesLabel: string ) => {
-				if ( chartInstanceContext?.isSeriesVisible ) {
-					return chartInstanceContext.isSeriesVisible( seriesLabel );
-				}
-				if ( ! chartId || ! context ) {
-					return true;
-				}
-				return context.isSeriesVisible( chartId, seriesLabel );
-			},
-			[ chartId, chartInstanceContext, context ]
-		);
-
 		// Create event handlers to avoid inline arrow functions
 		const createClickHandler = useCallback(
 			( seriesLabels: string[], itemInteractive: boolean ) => {

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

@@ -801,6 +801,48 @@ describe( 'BaseLegend', () => {
 			expect( staticItem ).not.toHaveClass( 'legend-item--inactive' );
 		} );
 
+		it( 'leaves out a static item while its series is hidden, keeping later swatches aligned', async () => {
+			const user = userEvent.setup();
+			const items = [
+				{ label: 'Views', color: '#0000ff', seriesLabels: [ 'Views', 'Views · previous' ] },
+				{
+					label: 'Visitors',
+					color: '#00ff00',
+					seriesLabels: [ 'Visitors', 'Visitors · previous' ],
+				},
+				{
+					label: 'Views (Prev. 7 days)',
+					color: '#000088',
+					interactive: false,
+					describesSeries: 'Views · previous',
+				},
+				{
+					label: 'Visitors (Prev. 7 days)',
+					color: '#008800',
+					interactive: false,
+					describesSeries: 'Visitors · previous',
+				},
+			];
+
+			render(
+				<GlobalChartsProvider>
+					<BaseLegend items={ items } interactive chartId="test-chart" shape={ TestShape } />
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: /^Views/ } ) );
+
+			expect( screen.getAllByTestId( 'legend-item' ).map( item => item.textContent ) ).toEqual( [
+				'Views',
+				'Visitors',
+				'Visitors (Prev. 7 days)',
+			] );
+			expect( screen.getAllByTestId( 'legend-marker' )[ 2 ] ).toHaveAttribute( 'fill', '#008800' );
+
+			await user.click( screen.getByRole( 'button', { name: /^Views/ } ) );
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 4 );
+		} );
+
 		it( 'keeps a comparison item distinct when its label collides', async () => {
 			const user = userEvent.setup();
 			const Example = () => {