@automattic/charts 4.13.0 → 4.15.0

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

@@ -313,6 +313,92 @@ describe( 'LineChart', () => {
 			expect( ticks.sort() ).toEqual( [ '0', '1' ] );
 		} );
 
+		test.each( [
+			[ 'small amounts', 0, [ 0.4, 1.2, 2.1, 2.6 ], [ '0', '1', '2' ] ],
+			[ 'amounts under one step', 0, [ 0.31, 0.55, 0.73 ], [ '0', '1' ] ],
+			[ 'cents', 2, [ 0.4, 1.2, 1.6 ], [ '0.00', '0.50', '1.00', '1.50' ] ],
+		] )( 'holds ticks to tickDecimals for %s', ( _, tickDecimals, values, expected ) => {
+			renderWithTheme( {
+				data: [
+					{
+						label: 'Series A',
+						data: values.map( ( value, i ) => ( { date: new Date( 2024, i + 2, 1 ), value } ) ),
+					},
+				],
+				options: {
+					yScale: { zero: true },
+					axis: {
+						y: { tickDecimals, tickFormat: ( value: number ) => value.toFixed( tickDecimals ) },
+					},
+				},
+			} );
+
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( expected );
+		} );
+
+		test( "leaves a caller's tickValues axis unwidened by tickDecimals", () => {
+			const linePath = ( y: { tickValues: number[]; tickDecimals?: number } ) => {
+				const { unmount } = renderWithTheme( {
+					data: [
+						{
+							label: 'Series A',
+							data: [ 0.31, 0.55, 0.73 ].map( ( value, i ) => ( {
+								date: new Date( 2024, i + 2, 1 ),
+								value,
+							} ) ),
+						},
+					],
+					options: { axis: { y } },
+				} );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
+				// eslint-disable-next-line testing-library/no-node-access -- visx's stroke is a <path class="visx-line">.
+				const d = chart.querySelector( 'path.visx-line' )?.getAttribute( 'd' );
+				unmount();
+				return d;
+			};
+
+			expect( linePath( { tickValues: [ 0.4, 0.6 ], tickDecimals: 0 } ) ).toBe(
+				linePath( { tickValues: [ 0.4, 0.6 ] } )
+			);
+		} );
+
+		test( 'widens with the decimals it ticks at when a hidden series keeps its place in the domain', () => {
+			renderWithTheme( {
+				rescaleYOnVisibilityChange: false,
+				defaultHiddenSeries: [ 'Series B' ],
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 0, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+					{
+						label: 'Series B',
+						data: [ 0.001, 0.003, 0.004 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+				options: {
+					yScale: { zero: true },
+					axis: { y: { tickDecimals: 2, tickFormat: ( value: number ) => value.toFixed( 2 ) } },
+				},
+			} );
+
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( [ '0.00', '1.00' ] );
+		} );
+
 		test( 'ignores a hidden fractional series when checking for whole numbers', () => {
 			renderWithTheme( {
 				defaultHiddenSeries: [ 'Series B' ],

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

@@ -5,6 +5,7 @@ import type {
 	SeriesData,
 	SeriesChartLegendConfig,
 	SeriesVisibilityProps,
+	CompactWhenShortProps,
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
@@ -30,7 +31,8 @@ export type RenderLineGlyphProps< Datum extends object > = GlyphProps< Datum > &
 	position?: 'start' | 'end';
 };
 
-export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
+export interface LineChartProps
+	extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps, CompactWhenShortProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

package/src/charts/private/test/compact-when-short.test.tsx

@@ -0,0 +1,170 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { GlobalChartsProvider, defaultTheme } from '../../../providers';
+import { AreaChartUnresponsive } from '../../area-chart/area-chart';
+import { BarChartUnresponsive } from '../../bar-chart/bar-chart';
+import { LineChartUnresponsive } from '../../line-chart/line-chart';
+import type { ChartInstanceRef } from '../chart-instance-context';
+import type { ComponentProps, ComponentType, ReactNode, Ref } from 'react';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+type CompactChartProps = {
+	data: typeof data;
+	width: number;
+	height: number;
+	compactWhenShort?: boolean;
+	showLegend?: boolean;
+	orientation?: 'horizontal' | 'vertical';
+	margin?: { left?: number };
+	withGradientFill?: boolean;
+	chartId?: string;
+	legend?: { interactive?: boolean };
+	defaultHiddenSeries?: string[];
+	children?: ReactNode;
+	ref?: Ref< ChartInstanceRef >;
+};
+type ScaleRange = { range: () => number[] };
+type CompactChart = ComponentType< CompactChartProps > & {
+	Legend: ComponentType;
+};
+
+const data = [ 'A', 'B' ].map( ( label, offset ) => ( {
+	label,
+	data: [ 1, 2, 3 ].map( day => ( {
+		date: new Date( 2024, 0, day ),
+		value: day * 10 + offset,
+	} ) ),
+} ) );
+
+const CHARTS = [
+	[ 'LineChart', LineChartUnresponsive ],
+	[ 'AreaChart', AreaChartUnresponsive ],
+	[ 'BarChart', BarChartUnresponsive ],
+] as unknown as [ string, CompactChart ][];
+
+const chartTree = (
+	Chart: CompactChart,
+	props: Partial< CompactChartProps > = {},
+	theme?: ComponentProps< typeof GlobalChartsProvider >[ 'theme' ]
+) => (
+	<GlobalChartsProvider theme={ theme }>
+		<Chart
+			data={ data }
+			width={ 500 }
+			height={ 300 }
+			withGradientFill={ false }
+			showLegend
+			{ ...props }
+		>
+			<Chart.Legend />
+		</Chart>
+	</GlobalChartsProvider>
+);
+
+const renderChart = ( ...args: Parameters< typeof chartTree > ) => render( chartTree( ...args ) );
+
+/* eslint-disable testing-library/no-node-access -- visx renders axes and grid lines without roles or test IDs. */
+const chrome = () => ( {
+	axes: document.querySelectorAll( '.visx-axis' ).length,
+	grid: document.querySelectorAll( '.visx-rows, .visx-columns' ).length > 0,
+	legends: screen.queryAllByTestId( 'legend-horizontal' ).length,
+} );
+/* eslint-enable testing-library/no-node-access */
+
+const FULL = { axes: 2, grid: true, legends: 2 };
+const COMPACT = { axes: 0, grid: false, legends: 0 };
+
+describe( 'compactWhenShort', () => {
+	describe.each( CHARTS )( '%s', ( _name, Chart ) => {
+		it.each( [
+			[ 'an unmeasured chart', 0, true, FULL ],
+			[ 'a short chart', 100, true, COMPACT ],
+			[ 'a tall chart', 300, true, FULL ],
+			[ 'a short chart that did not opt in', 100, false, FULL ],
+		] )( 'draws %s with the expected chrome', ( _label, height, compactWhenShort, expected ) => {
+			renderChart( Chart, { height, compactWhenShort } );
+
+			expect( chrome() ).toEqual( expected );
+		} );
+
+		it( 'restores the chrome when a short chart grows back', () => {
+			const { rerender } = renderChart( Chart, { height: 100, compactWhenShort: true } );
+			rerender( chartTree( Chart, { height: 300, compactWhenShort: true } ) );
+
+			expect( chrome() ).toEqual( FULL );
+		} );
+
+		it( 'does not point at the hidden legend when every series is hidden', () => {
+			renderChart( Chart, {
+				height: 100,
+				compactWhenShort: true,
+				chartId: 'all-hidden',
+				legend: { interactive: true },
+				defaultHiddenSeries: [ 'A', 'B' ],
+			} );
+
+			expect( screen.getByText( 'All series are hidden.' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	it( 'reads the threshold from the theme', () => {
+		renderChart(
+			LineChartUnresponsive as unknown as CompactChart,
+			{ height: 160, compactWhenShort: true },
+			{ compactWhenShort: { below: 200 } }
+		);
+
+		expect( chrome() ).toEqual( COMPACT );
+	} );
+
+	it( 'leaves horizontal bars alone', () => {
+		renderChart( BarChartUnresponsive as unknown as CompactChart, {
+			height: 100,
+			compactWhenShort: true,
+			orientation: 'horizontal',
+		} );
+
+		expect( chrome() ).toEqual( FULL );
+	} );
+
+	describe.each( CHARTS.slice( 0, 2 ) )( '%s margin', ( _name, Chart ) => {
+		it.each( [
+			[ 'defaults to the compact margin', undefined, 2 ],
+			[ 'keeps a side the caller set', { left: 40 }, 40 ],
+		] )( '%s', ( _label, margin, left ) => {
+			const ref = createRef< ChartInstanceRef >();
+			renderChart( Chart, { height: 100, compactWhenShort: true, margin, ref } );
+
+			const scales = ref.current?.getScales() as Record< 'xScale' | 'yScale', ScaleRange >;
+			expect( scales.xScale.range()[ 0 ] ).toBe( left );
+			expect( scales.yScale.range()[ 1 ] ).toBe( 2 );
+		} );
+	} );
+
+	describe( 'BarChart margin', () => {
+		const leftmostBarX = ( margin?: { left?: number } ) => {
+			const { unmount } = renderChart( BarChartUnresponsive as unknown as CompactChart, {
+				height: 100,
+				compactWhenShort: true,
+				margin,
+			} );
+			// eslint-disable-next-line testing-library/no-node-access -- visx bars take no role or test ID.
+			const bars = [ ...document.querySelectorAll( '.visx-bar' ) ];
+			const x = Math.min( ...bars.map( bar => Number( bar.getAttribute( 'x' ) ) ) );
+			unmount();
+			return x;
+		};
+
+		it( 'defaults to the compact margin', () => {
+			expect( leftmostBarX() ).toBe( leftmostBarX( defaultTheme.compactWhenShort.margin ) );
+		} );
+
+		it( 'keeps a side the caller set', () => {
+			expect( leftmostBarX( { left: 40 } ) ).toBeGreaterThan( leftmostBarX() );
+		} );
+	} );
+} );

package/src/charts/private/test/tick-decimals.test.tsx

@@ -0,0 +1,95 @@
+import { createScale } from '@visx/scale';
+import {
+	getTickDecimals,
+	getTickDecimalsDomain,
+	getTickDecimalValues,
+	hasOnlyWholeNumbers,
+} from '../tick-decimals';
+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( 'getTickDecimalValues', () => {
+	it( 'keeps only the whole ticks of a range smaller than the tick count', () => {
+		expect( getTickDecimalValues( linear( [ 0, 1 ] ), 4 ) ).toEqual( [ 0, 1 ] );
+		expect( getTickDecimalValues( linear( [ 0, 2 ] ), 4 ) ).toEqual( [ 0, 1, 2 ] );
+	} );
+
+	it( 'leaves a scale whose ticks are already whole to visx', () => {
+		expect( getTickDecimalValues( 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( getTickDecimalValues( band, 4 ) ).toBeUndefined();
+		expect( getTickDecimalValues( time, 4 ) ).toBeUndefined();
+		expect( getTickDecimalValues( undefined, 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with no whole tick to visx', () => {
+		expect( getTickDecimalValues( linear( [ 0.2, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with only one whole tick to visx', () => {
+		expect( getTickDecimalValues( linear( [ 0, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'keeps ticks at the given decimal places, through float error on small and large values', () => {
+		expect( getTickDecimalValues( linear( [ 0, 0.07 ] ), 10, 2 ) ).toEqual( [
+			0, 0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07,
+		] );
+		expect( getTickDecimalValues( linear( [ 131072.01, 131072.02 ] ), 4, 2 ) ).toEqual( [
+			131072.01, 131072.02,
+		] );
+	} );
+} );
+
+describe( 'getTickDecimalsDomain', () => {
+	it.each( [
+		[ 'widens a range inside one step', [ 0.3, 0.73 ], 0, [ 0, 1 ] ],
+		[ 'widens a range between two steps', [ 1.2, 1.8 ], 0, [ 1, 2 ] ],
+		[ 'widens at two decimals', [ 0.031, 0.034 ], 2, [ 0.03, 0.04 ] ],
+		[ 'widens from a step float error puts just below', [ 0.29, 0.295 ], 2, [ 0.29, 0.3 ] ],
+		[ 'widens ends float noise rounds to one step', [ 0.3, 0.1 + 0.2 ], 2, [ 0.3, 0.31 ] ],
+		[ 'keeps a range holding two steps', [ 0, 1.2 ], 0, undefined ],
+		[ 'keeps a range without tickDecimals', [ 0.3, 0.73 ], undefined, undefined ],
+	] )( '%s', ( _, domain, decimals, expected ) => {
+		expect( getTickDecimalsDomain( domain as [ number, number ], decimals ) ).toEqual( expected );
+	} );
+} );
+
+describe( 'getTickDecimals', () => {
+	it.each( [
+		[ 'whole-number data over a caller decimals', true, 2, 0 ],
+		[ 'fractional data at the caller decimals', false, 2, 2 ],
+		[ 'fractional data without tickDecimals', false, undefined, undefined ],
+	] )( 'holds %s', ( _, whole, decimals, expected ) => {
+		expect( getTickDecimals( whole, decimals ) ).toBe( expected );
+	} );
+} );
+
+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/tick-decimals.tsx

@@ -0,0 +1,132 @@
+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;
+};
+
+// Float error in tick * 10^decimals grows with the value, e.g. 0.07 * 100 = 7.000000000000001.
+const EPSILON = 1e-12;
+const tolerance = ( scaled: number ): number => EPSILON * Math.max( 1, Math.abs( scaled ) );
+
+const isValidDecimals = ( decimals: number | undefined ): decimals is number =>
+	Number.isInteger( decimals ) && ( decimals as number ) >= 0;
+
+const isOnDecimals = ( value: number, decimals: number ): boolean => {
+	const scaled = value * 10 ** decimals;
+	return Math.abs( scaled - Math.round( scaled ) ) < tolerance( scaled );
+};
+
+/**
+ * The scale's ticks with those finer than `decimals` places dropped.
+ *
+ * d3 steps by 1, 2 or 5 times a power of ten, so every multiple of 10^-decimals 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.
+ * @param decimals - Decimal places a tick may carry; 0 keeps whole numbers.
+ * @return The kept ticks, or undefined when visx's own ticks need no change.
+ */
+export const getTickDecimalValues = (
+	scale: unknown,
+	count?: number,
+	decimals = 0
+): 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 kept = ticks.filter( tick => isOnDecimals( tick, decimals ) );
+	return kept.length > 1 && kept.length < ticks.length ? kept : undefined;
+};
+
+/**
+ * A value domain widened to the nearest `decimals` steps when fewer than two fit inside it, so the axis shows at least two ticks.
+ *
+ * @param domain   - The domain the chart would scale to.
+ * @param decimals - The axis's `tickDecimals`.
+ * @return The widened domain, or undefined when `domain` needs no change.
+ */
+export const getTickDecimalsDomain = (
+	domain: [ number, number ] | null | undefined,
+	decimals: number | undefined
+): [ number, number ] | undefined => {
+	if ( ! domain || ! isValidDecimals( decimals ) ) {
+		return undefined;
+	}
+	const scale = 10 ** decimals;
+	const low = domain[ 0 ] * scale;
+	const high = domain[ 1 ] * scale;
+	if ( Math.floor( high + tolerance( high ) ) - Math.ceil( low - tolerance( low ) ) >= 1 ) {
+		return undefined;
+	}
+	const floor = Math.floor( low + tolerance( low ) );
+	// Keeps one step when float noise rounds both ends to the same value.
+	const ceil = Math.max( Math.ceil( high - tolerance( high ) ), floor + 1 );
+	return [ floor / scale, ceil / scale ];
+};
+
+/**
+ * The decimals a value axis's ticks are held to: 0 for whole-number data, else the caller's `tickDecimals`.
+ *
+ * @param hasWholeNumberValues - Whether every plotted value is a whole number.
+ * @param tickDecimals         - The axis's `tickDecimals`.
+ * @return Decimal places, or undefined to keep visx's ticks.
+ */
+export const getTickDecimals = (
+	hasWholeNumberValues: boolean,
+	tickDecimals: number | undefined
+): number | undefined => {
+	if ( hasWholeNumberValues ) {
+		return 0;
+	}
+	return isValidDecimals( tickDecimals ) ? tickDecimals : undefined;
+};
+
+type TickDecimalsProps = {
+	axis: 'x' | 'y';
+	numTicks?: number;
+	decimals: number | undefined;
+	children: ( tickValues: number[] | undefined ) => ReactNode;
+};
+
+/**
+ * Hands its children the chart's value-scale ticks, held to `decimals` places.
+ *
+ * @param props          - Component props.
+ * @param props.axis     - Which scale carries the values.
+ * @param props.numTicks - Ticks to ask the scale for.
+ * @param props.decimals - Decimal places a tick may carry, or undefined to keep visx's ticks.
+ * @param props.children - Renders the axis and grid with the tick values.
+ * @return The rendered children.
+ */
+export const TickDecimals = ( { axis, numTicks, decimals, children }: TickDecimalsProps ) => {
+	const { xScale, yScale } = useContext( DataContext );
+	const tickValues =
+		decimals === undefined
+			? undefined
+			: getTickDecimalValues( axis === 'x' ? xScale : yScale, numTicks, decimals );
+	return <>{ children( tickValues ) }</>;
+};

package/src/charts/private/use-compact-when-short.ts

@@ -0,0 +1,18 @@
+import { useGlobalChartsTheme } from '../../providers';
+
+/**
+ * Whether a `compactWhenShort` chart is compact, and the margin it then defaults to.
+ *
+ * Reads the height the chart was given, not the measured plot area: that grows once the legend
+ * is hidden and would flip the chart straight back. A zero height is unmeasured, not short.
+ *
+ * @param enabled - The chart's `compactWhenShort` prop.
+ * @param height  - The height the chart was given.
+ * @return Whether the chart is compact, and the compact margin when it is.
+ */
+export const useCompactWhenShort = ( enabled: boolean, height: number | undefined ) => {
+	const { compactWhenShort } = useGlobalChartsTheme();
+	const isCompact = enabled && ( height ?? 0 ) > 0 && height < compactWhenShort.below;
+
+	return { isCompact, compactMargin: isCompact ? compactWhenShort.margin : undefined };
+};

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

@@ -217,24 +217,27 @@ export const BaseLegend: ForwardRefExoticComponent<
 
 		// Create event handlers to avoid inline arrow functions
 		const createClickHandler = useCallback(
-			( seriesLabels: string[], itemInteractive: boolean ) => {
+			( seriesLabels: string[], itemInteractive: boolean, onToggle?: () => void ) => {
 				if ( ! itemInteractive ) {
 					return undefined;
 				}
-				return () => handleLegendClick( seriesLabels );
+				return onToggle ? () => onToggle() : () => handleLegendClick( seriesLabels );
 			},
 			[ handleLegendClick ]
 		);
 
 		const createKeyDownHandler = useCallback(
-			( seriesLabels: string[], itemInteractive: boolean ) => {
+			( seriesLabels: string[], itemInteractive: boolean, onToggle?: () => void ) => {
 				if ( ! itemInteractive ) {
 					return undefined;
 				}
+				const toggle = onToggle ?? ( () => handleLegendClick( seriesLabels ) );
 				return ( event: KeyboardEvent ) => {
 					if ( event.key === 'Enter' || event.key === ' ' ) {
 						event.preventDefault();
-						handleLegendClick( seriesLabels );
+						if ( ! event.repeat ) {
+							toggle();
+						}
 					}
 				};
 			},
@@ -278,11 +281,13 @@ export const BaseLegend: ForwardRefExoticComponent<
 							const seriesLabels = matchedItem?.seriesLabels?.length
 								? matchedItem.seriesLabels
 								: [ label.text ];
-							const visible =
-								matchedItem?.interactive === false || isSeriesVisible( seriesLabels[ 0 ] );
 							const itemInteractive = interactive && matchedItem?.interactive !== false;
-							const handleClick = createClickHandler( seriesLabels, itemInteractive );
-							const handleKeyDown = createKeyDownHandler( seriesLabels, itemInteractive );
+							const onToggle = itemInteractive ? matchedItem?.onToggle : undefined;
+							const visible = matchedItem?.onToggle
+								? matchedItem.pressed
+								: matchedItem?.interactive === false || isSeriesVisible( seriesLabels[ 0 ] );
+							const handleClick = createClickHandler( seriesLabels, itemInteractive, onToggle );
+							const handleKeyDown = createKeyDownHandler( seriesLabels, itemInteractive, onToggle );
 
 							return (
 								<LegendItem