@automattic/charts 1.10.3 → 1.12.0

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

@@ -0,0 +1,365 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SUBPIXEL_TOLERANCE } from '../hooks';
+import { LeaderboardChartUnresponsive as LeaderboardChart } from '../leaderboard-chart';
+import type { LeaderboardEntry } from '../../../types';
+
+const ROW_HEIGHT = 40;
+
+const makeData = ( count: number ): LeaderboardEntry[] =>
+	Array.from( { length: count }, ( _, index ) => ( {
+		id: `row-${ index }`,
+		label: `Row ${ index }`,
+		currentValue: 100 - index,
+		currentShare: 100 - index * 10,
+	} ) );
+
+/**
+ * Give the content container a height and lay every marked row out in a uniform
+ * stack beneath it. JSDOM performs no layout, so the geometry the component
+ * measures has to be supplied here.
+ *
+ * The height is mutable and `resizeTo` re-fires the observed callbacks, because
+ * a fixed height would let the whole ResizeObserver path be deleted with the
+ * suite still green.
+ *
+ * @param contentHeight - Starting height of the chart's content container.
+ * @param getRowBottom  - Returns the bottom edge for a row index.
+ * @return Handle for resizing the container and restoring the globals.
+ */
+const mockLayout = (
+	contentHeight: number,
+	getRowBottom: ( rowIndex: number ) => number = rowIndex => ( rowIndex + 1 ) * ROW_HEIGHT
+) => {
+	const originalGetRect = Element.prototype.getBoundingClientRect;
+	const originalResizeObserver = globalThis.ResizeObserver;
+	const box = { height: contentHeight };
+	const callbacks = new Set< ResizeObserverCallback >();
+
+	Element.prototype.getBoundingClientRect = function () {
+		if ( this.classList.contains( 'leaderboardChart__content' ) ) {
+			return { top: 0, bottom: box.height, height: box.height } as DOMRect;
+		}
+
+		const rowIndex = this.getAttribute?.( 'data-row-index' );
+		if ( rowIndex !== null && rowIndex !== undefined ) {
+			const bottom = getRowBottom( Number( rowIndex ) );
+			return { top: bottom - ROW_HEIGHT, bottom, height: ROW_HEIGHT } as DOMRect;
+		}
+
+		return originalGetRect.call( this );
+	};
+
+	globalThis.ResizeObserver = class {
+		#callback: ResizeObserverCallback;
+
+		constructor( callback: ResizeObserverCallback ) {
+			this.#callback = callback;
+		}
+
+		observe() {
+			callbacks.add( this.#callback );
+		}
+
+		unobserve() {}
+
+		disconnect() {
+			callbacks.delete( this.#callback );
+		}
+	} as unknown as typeof globalThis.ResizeObserver;
+
+	return {
+		observerCount: () => callbacks.size,
+		resizeTo: ( height: number ) =>
+			act( () => {
+				box.height = height;
+				callbacks.forEach( callback => callback( [], {} as ResizeObserver ) );
+			} ),
+		restore: () => {
+			Element.prototype.getBoundingClientRect = originalGetRect;
+			globalThis.ResizeObserver = originalResizeObserver;
+		},
+	};
+};
+
+describe( 'LeaderboardChart fitRows', () => {
+	let layout: ReturnType< typeof mockLayout >;
+
+	afterEach( () => {
+		layout?.restore();
+	} );
+
+	it( 'hides rows that do not fit the content height', () => {
+		// 100px of content fits two whole 40px rows; the third would be clipped.
+		layout = mockLayout( 100 );
+
+		render( <LeaderboardChart data={ makeData( 5 ) } fitRows /> );
+
+		expect( screen.getByText( 'Row 0' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 2' ) ).not.toBeVisible();
+		expect( screen.getByText( 'Row 3' ) ).not.toBeVisible();
+		expect( screen.getByText( 'Row 4' ) ).not.toBeVisible();
+	} );
+
+	it( 'shows every row when they fit exactly', () => {
+		// Boundary case for the `<=` in the fit scan: the last row's bottom edge
+		// lands exactly on the container's.
+		layout = mockLayout( 5 * ROW_HEIGHT );
+
+		render( <LeaderboardChart data={ makeData( 5 ) } fitRows /> );
+
+		expect( screen.getByText( 'Row 4' ) ).toBeVisible();
+	} );
+
+	it( 'treats a row ending within the subpixel tolerance as fitting', () => {
+		// Row 1's bottom is 80. Heights are derived from the real tolerance so
+		// retuning it does not fail this test for the wrong reason.
+		const rowBottom = 2 * ROW_HEIGHT;
+		layout = mockLayout( rowBottom - SUBPIXEL_TOLERANCE + 0.1 );
+
+		render( <LeaderboardChart data={ makeData( 3 ) } fitRows /> );
+
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+
+		// A hair past the tolerance, so the row is genuinely clipped.
+		layout.resizeTo( rowBottom - SUBPIXEL_TOLERANCE - 0.1 );
+
+		expect( screen.getByText( 'Row 1' ) ).not.toBeVisible();
+	} );
+
+	it( 'reveals rows when the container grows and hides them when it shrinks', () => {
+		// Hiding rows is only acceptable because a taller container brings them
+		// back, so the round trip is the property worth pinning — not the first
+		// render, which a one-shot measurement would also satisfy.
+		layout = mockLayout( 100 );
+
+		render( <LeaderboardChart data={ makeData( 5 ) } fitRows /> );
+		expect( screen.getByText( 'Row 2' ) ).not.toBeVisible();
+
+		layout.resizeTo( 5 * ROW_HEIGHT );
+		expect( screen.getByText( 'Row 4' ) ).toBeVisible();
+
+		layout.resizeTo( 60 );
+		expect( screen.getByText( 'Row 1' ) ).not.toBeVisible();
+
+		// Out through "nothing fits" and back again.
+		layout.resizeTo( 20 );
+		expect( screen.getByText( 'Not enough space to display data' ) ).toBeVisible();
+
+		layout.resizeTo( 5 * ROW_HEIGHT );
+		expect( screen.getByText( 'Row 4' ) ).toBeVisible();
+		expect( screen.queryByText( 'Not enough space to display data' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'explains itself when not even one row fits', () => {
+		// 20px of content cannot fit a 40px row. Hiding every row would leave a
+		// blank panel, which reads as a broken tile rather than an empty one.
+		layout = mockLayout( 20 );
+
+		render( <LeaderboardChart data={ makeData( 3 ) } fitRows /> );
+
+		expect( screen.getByText( 'Not enough space to display data' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 0' ) ).not.toBeVisible();
+	} );
+
+	it( 'leaves every row visible when fitRows is off', () => {
+		// Default behaviour: a standalone chart scrolls rather than dropping rows.
+		layout = mockLayout( 100 );
+
+		render( <LeaderboardChart data={ makeData( 5 ) } /> );
+
+		expect( screen.getByText( 'Row 4' ) ).toBeVisible();
+	} );
+
+	it( 'restores every row when fitRows is turned off, and refits when it returns', () => {
+		layout = mockLayout( 100 );
+
+		const data = makeData( 5 );
+		const { rerender } = render( <LeaderboardChart data={ data } fitRows /> );
+		expect( screen.getByText( 'Row 4' ) ).not.toBeVisible();
+
+		rerender( <LeaderboardChart data={ data } fitRows={ false } /> );
+		expect( screen.getByText( 'Row 4' ) ).toBeVisible();
+
+		rerender( <LeaderboardChart data={ data } fitRows /> );
+		expect( screen.getByText( 'Row 4' ) ).not.toBeVisible();
+	} );
+
+	it( 'stops observing once fitting is disabled', () => {
+		layout = mockLayout( 100 );
+
+		const data = makeData( 5 );
+		const { rerender } = render( <LeaderboardChart data={ data } fitRows /> );
+		expect( layout.observerCount() ).toBeGreaterThan( 0 );
+
+		rerender( <LeaderboardChart data={ data } fitRows={ false } /> );
+		expect( layout.observerCount() ).toBe( 0 );
+	} );
+
+	it( 'counts rows the same way whether or not they are interactive', () => {
+		// Both row types use one grid-child wrapper; only its element type differs.
+		layout = mockLayout( 100 );
+
+		const data = makeData( 5 ).map( ( entry, index ) =>
+			index % 2 === 0 ? { ...entry, onClick: () => {} } : entry
+		);
+
+		render( <LeaderboardChart data={ data } fitRows /> );
+
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 2' ) ).not.toBeVisible();
+	} );
+
+	it( 'hides interactive rows that do not fit, not just their labels', () => {
+		layout = mockLayout( 100 );
+
+		const data = makeData( 5 ).map( entry => ( { ...entry, onClick: () => {} } ) );
+
+		render( <LeaderboardChart data={ data } fitRows /> );
+
+		const rows = screen.getAllByRole( 'button', { hidden: true } );
+		expect( rows[ 1 ] ).toBeVisible();
+		expect( rows[ 2 ] ).not.toBeVisible();
+
+		// The default role query runs the accessibility-tree computation, which
+		// treats `visibility: hidden` as inaccessible — so this asserts the rows
+		// that do not fit are absent from the a11y tree, not merely styled.
+		expect( screen.getAllByRole( 'button' ) ).toHaveLength( 2 );
+	} );
+
+	it( 'keeps hidden rows measurable so a taller container can reveal them', () => {
+		// The rows must stay in the layout even when none of them fit. Dropping
+		// them would leave nothing to measure, so the row count could never
+		// recover when the container grows.
+		layout = mockLayout( 20 );
+
+		render( <LeaderboardChart data={ makeData( 3 ) } fitRows /> );
+
+		expect( screen.getByText( 'Row 0' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Row 2' ) ).toBeInTheDocument();
+	} );
+
+	it( 'refits when the data prop grows and shrinks', () => {
+		layout = mockLayout( 100 );
+
+		const { rerender } = render( <LeaderboardChart data={ makeData( 2 ) } fitRows /> );
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+
+		rerender( <LeaderboardChart data={ makeData( 5 ) } fitRows /> );
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 2' ) ).not.toBeVisible();
+
+		rerender( <LeaderboardChart data={ makeData( 2 ) } fitRows /> );
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+	} );
+
+	it( 'remeasures when row geometry changes without changing the row count or grid size', () => {
+		let rowBottoms = [ 40, 80, 120 ];
+		layout = mockLayout( 100, rowIndex => rowBottoms[ rowIndex ] );
+
+		const { rerender } = render( <LeaderboardChart data={ makeData( 3 ) } fitRows /> );
+
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+
+		// Simulate a same-length data update where the second row grows while a
+		// later row shrinks, leaving the grid's overall height unchanged.
+		rowBottoms = [ 40, 110, 120 ];
+		rerender( <LeaderboardChart data={ makeData( 3 ) } fitRows /> );
+
+		expect( screen.getByText( 'Row 0' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 1' ) ).not.toBeVisible();
+	} );
+
+	it( 'resets an existing scroll offset when fitting is enabled', () => {
+		layout = mockLayout( 100, rowIndex => {
+			const content = screen.getByTestId( 'leaderboard-chart-content' );
+			return ( rowIndex + 1 ) * ROW_HEIGHT - content.scrollTop;
+		} );
+
+		const data = makeData( 5 );
+		const { rerender } = render( <LeaderboardChart data={ data } /> );
+		const content = screen.getByTestId( 'leaderboard-chart-content' );
+		content.scrollTop = 80;
+
+		rerender( <LeaderboardChart data={ data } fitRows /> );
+
+		expect( content.scrollTop ).toBe( 0 );
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 2' ) ).not.toBeVisible();
+	} );
+
+	it( 'falls back to showing every row when no rows can be measured', () => {
+		// A changed DOM shape must degrade to the scrollable default rather than
+		// to an empty tile claiming there is no space.
+		layout = mockLayout( 100 );
+
+		render( <LeaderboardChart data={ makeData( 5 ) } fitRows /> );
+
+		const content = screen.getByTestId( 'leaderboard-chart-content' );
+		// Simulating the failure means reaching for the markers themselves — there
+		// is no user-facing handle for "the row markers went away".
+		// eslint-disable-next-line testing-library/no-node-access
+		const cells = content.querySelectorAll( '[data-row-index]' );
+		cells.forEach( cell => cell.removeAttribute( 'data-row-index' ) );
+
+		// resizeTo re-fires the observed callbacks inside act.
+		layout.resizeTo( 100 );
+
+		expect( screen.getByText( 'Row 4' ) ).toBeVisible();
+		expect( screen.queryByText( 'Not enough space to display data' ) ).not.toBeInTheDocument();
+		expect( content ).not.toHaveClass( 'leaderboardChart__content--fit' );
+	} );
+
+	it( 'remeasures rows when an interactive legend restores a hidden series', async () => {
+		layout = mockLayout( 100 );
+		const user = userEvent.setup();
+
+		const data = makeData( 3 ).map( entry => ( {
+			...entry,
+			previousValue: entry.currentValue - 10,
+			previousShare: entry.currentShare - 10,
+			delta: 10,
+		} ) );
+
+		render(
+			<LeaderboardChart
+				data={ data }
+				fitRows
+				withComparison
+				showLegend
+				legend={ { interactive: true } }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Current period: visible. Toggle visibility.',
+			} )
+		);
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Previous period: visible. Toggle visibility.',
+			} )
+		);
+
+		expect(
+			screen.getByText( 'All series are hidden. Click legend items to show data.' )
+		).toBeVisible();
+
+		// Nothing is observed while no rows are mounted, so a late notification
+		// cannot record zero rows against the grid that replaces them.
+		expect( layout.observerCount() ).toBe( 0 );
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: 'Current period: hidden. Toggle visibility.',
+			} )
+		);
+
+		expect( screen.getByText( 'Row 0' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 1' ) ).toBeVisible();
+		expect( screen.getByText( 'Row 2' ) ).not.toBeVisible();
+		expect( screen.queryByText( 'Not enough space to display data' ) ).not.toBeInTheDocument();
+	} );
+} );

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

@@ -97,11 +97,58 @@ describe( 'LeaderboardChart', () => {
 		expect( screen.getByText( '+25%' ) ).toBeInTheDocument();
 		expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'New Source' ) ).toBeInTheDocument();
-		expect( screen.getByText( '-' ) ).toHaveAttribute( 'aria-hidden', 'true' );
+		expect( screen.getByText( '—' ) ).toHaveAttribute( 'aria-hidden', 'true' );
 		expect( screen.getByText( 'No comparison data' ) ).toBeInTheDocument();
 		expect( screen.queryByText( '+100%' ) ).not.toBeInTheDocument();
 	} );
 
+	it( 'shows an unavailable delta when a known previous value is zero', () => {
+		render(
+			<LeaderboardChart
+				data={ [
+					{
+						id: 'new',
+						label: 'New Source',
+						currentValue: 100,
+						previousValue: 0,
+						currentShare: 100,
+						previousShare: 0,
+					},
+				] }
+				withComparison={ true }
+			/>
+		);
+
+		expect( screen.getByText( '—' ) ).toHaveAttribute( 'aria-hidden', 'true' );
+		expect( screen.getByText( 'Percentage change unavailable' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'No comparison data' ) ).not.toBeInTheDocument();
+		expect( screen.queryByText( '+100%' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'still renders the comparison bar when the previous value is known but the delta is unavailable', () => {
+		// The comparison bar is gated on a known previous value, not on the
+		// delta, so a row whose delta is unavailable keeps its bar. previousShare
+		// is non-zero here so a dropped bar cannot hide behind a zero width.
+		const { container } = render(
+			<LeaderboardChart
+				data={ [
+					{
+						id: 'zero-prev',
+						label: 'Zero Prev',
+						currentValue: 100,
+						previousValue: 0,
+						currentShare: 100,
+						previousShare: 40,
+					},
+				] }
+				withComparison={ true }
+			/>
+		);
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		expect( container.querySelectorAll( '.bar' ) ).toHaveLength( 2 );
+	} );
+
 	it( 'shows custom label when provided', () => {
 		render(
 			<LeaderboardChart
@@ -440,7 +487,31 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
 				/New Source.*100.*No comparison data/
 			);
-			expect( screen.getByRole( 'button' ) ).not.toHaveAccessibleName( /-/ );
+			expect( screen.getByRole( 'button' ) ).not.toHaveAccessibleName( /—/ );
+		} );
+
+		it( 'does not include the unavailable delta dash in interactive row names', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							id: 'zero-prev',
+							label: 'Zero Prev',
+							currentValue: 100,
+							previousValue: 0,
+							currentShare: 1,
+							previousShare: 0,
+							onClick: jest.fn(),
+						},
+					] }
+					withComparison={ true }
+				/>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
+				/Zero Prev.*100.*Percentage change unavailable/
+			);
+			expect( screen.getByRole( 'button' ) ).not.toHaveAccessibleName( /—/ );
 		} );
 
 		it( 'derives the accessible name from an image label via its alt text', () => {

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

@@ -50,10 +50,22 @@ export interface LeaderboardChartProps
 	 */
 	loading?: boolean;
 
+	/**
+	 * Show only complete rows that fit the chart height instead of scrolling.
+	 *
+	 * Requires a container that constrains the chart's height; otherwise every
+	 * row fits. Refits are debounced with the parent resize on the responsive
+	 * export, so `LeaderboardChartUnresponsive` tracks a live drag more closely.
+	 * @default false
+	 */
+	fitRows?: boolean;
+
 	/**
 	 * Custom styling for the chart container
 	 */
 	style?: React.CSSProperties & {
+		'--a8c-charts-border-radius-leaderboard-bar'?: string;
+		/** @deprecated Use `--a8c-charts-border-radius-leaderboard-bar`. */
 		'--a8c--charts--leaderboard--bar--border-radius'?: string;
 	};
 

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

@@ -18,8 +18,8 @@
 
 	&__tooltip,
 	&__annotation-label-popover {
-		background: var(--wpds-color-background-surface-neutral-strong, #fff);
-		color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+		background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
+		color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 

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

@@ -179,6 +179,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			onPointerMove = undefined,
 			onPointerOut = undefined,
 			zoomable = false,
+			rescaleYOnVisibilityChange = true,
 			children,
 			gridVisibility,
 			gap = 'md',
@@ -186,6 +187,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		ref
 	) => {
 		const legendInteractive = legend.interactive ?? false;
+		const legendCollapseGroups = legend.collapseGroups ?? false;
 		const legendShape = legend.shape ?? 'line';
 		const legendPosition = legend.position ?? 'bottom';
 
@@ -252,6 +254,28 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			return seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );
 		}, [ seriesWithVisibility ] );
 
+		// When the interactive legend can hide series and rescaling is opted out, pin the value axis
+		// to the full data range so it stays put as series are toggled instead of visx rescaling the
+		// domain to whatever is currently visible and making the axis jump. Default is to rescale,
+		// matching the pre-existing behaviour and AreaChart's `rescaleYOnVisibilityChange`.
+		const stableYDomain = useMemo< [ number, number ] | undefined >( () => {
+			if ( ! legendInteractive || rescaleYOnVisibilityChange ) {
+				return undefined;
+			}
+			let min = Infinity;
+			let max = -Infinity;
+			for ( const series of dataSorted ) {
+				for ( const point of series.data ?? [] ) {
+					const value = point?.value;
+					if ( typeof value === 'number' && Number.isFinite( value ) ) {
+						min = Math.min( min, value );
+						max = Math.max( max, value );
+					}
+				}
+			}
+			return min < max ? [ min, max ] : undefined;
+		}, [ legendInteractive, rescaleYOnVisibilityChange, dataSorted ] );
+
 		// Use the keyboard navigation hook
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
@@ -291,10 +315,11 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					type: 'linear' as const,
 					nice: true,
 					zero: false,
+					...( stableYDomain ? { domain: stableYDomain } : {} ),
 					...options?.yScale,
 				},
 			};
-		}, [ options, dataSorted, width, zoom.domain ] );
+		}, [ options, dataSorted, width, zoom.domain, stableYDomain ] );
 
 		const tooltipRenderGlyph = useMemo( () => {
 			return ( props: GlyphProps< DataPointDate > ) => {
@@ -328,9 +353,10 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			() => ( {
 				withGlyph: withLegendGlyph,
 				glyphSize: Math.max( 0, toNumber( glyphStyle?.radius ) ?? 4 ),
+				collapseGroups: legendCollapseGroups,
 				renderGlyph,
 			} ),
-			[ withLegendGlyph, glyphStyle?.radius, renderGlyph ]
+			[ withLegendGlyph, glyphStyle?.radius, legendCollapseGroups, renderGlyph ]
 		);
 
 		// Create legend items using the reusable hook
@@ -444,9 +470,18 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 											onPointerOut={ onPointerOut }
 											pointerEventsDataKey="nearest"
 										>
-											{ gridVisibility !== 'none' && <Grid columns={ false } numTicks={ 4 } /> }
-											{ chartOptions.axis.x.display && <Axis { ...chartOptions.axis.x } /> }
-											{ chartOptions.axis.y.display && <Axis { ...chartOptions.axis.y } /> }
+											{ /* With every series hidden there is no data to scale against, so the grid and
+											     axes are dropped while the empty state stands in — otherwise they render
+											     squished at the top. */ }
+											{ ! allSeriesHidden && gridVisibility !== 'none' && (
+												<Grid columns={ false } numTicks={ 4 } />
+											) }
+											{ ! allSeriesHidden && chartOptions.axis.x.display && (
+												<Axis { ...chartOptions.axis.x } />
+											) }
+											{ ! allSeriesHidden && chartOptions.axis.y.display && (
+												<Axis { ...chartOptions.axis.y } />
+											) }
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState