@automattic/charts 1.10.3 → 1.11.0

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

@@ -20,7 +20,7 @@ import { useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
-import { useLeaderboardLegendItems } from './hooks';
+import { useFittedRowCount, useLeaderboardLegendItems } from './hooks';
 import styles from './leaderboard-chart.module.scss';
 import type { LeaderboardChartProps } from './types';
 import type { LeaderboardEntry } from '../../types';
@@ -62,15 +62,22 @@ const defaultDeltaFormatter = ( value: number ): string => {
  * @return A CSS width value.
  */
 const getBarWidth = ( share: number ): string =>
-	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${ share } / 100)`;
+	`calc(${ share }% - var(--a8c-charts-dimension-leaderboard-bar-hover-inset, 0px) * ${ share } / 100)`;
 
-const hasComparisonValue = (
+const hasPreviousValue = (
+	entry: LeaderboardEntry
+): entry is LeaderboardEntry & {
+	previousValue: number;
+	previousShare: number;
+} => entry.previousValue != null && entry.previousShare != null;
+
+const hasDeltaValue = (
 	entry: LeaderboardEntry
 ): entry is LeaderboardEntry & {
 	previousValue: number;
 	previousShare: number;
 	delta: number;
-} => entry.previousValue != null && entry.previousShare != null && entry.delta != null;
+} => hasPreviousValue( entry ) && entry.delta != null;
 
 const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
@@ -117,7 +124,7 @@ const BarWithLabel = ( {
 				></div>
 			) }
 
-			{ showComparisonBar && hasComparisonValue( entry ) && (
+			{ showComparisonBar && hasPreviousValue( entry ) && (
 				<div
 					className={ clsx( styles.bar, {
 						[ styles[ 'bar--animated' ] ]: animation,
@@ -148,6 +155,7 @@ const BarWithLabel = ( {
  * @param props.valueFormatter   - Custom formatter for values
  * @param props.deltaFormatter   - Custom formatter for delta values
  * @param props.loading          - Whether the chart is in loading state
+ * @param props.fitRows          - Whether to show only the rows that fit the chart's height
  * @param props.animation        - Whether the chart should animate on load
  * @param props.showLegend       - Whether to show legend
  * @param props.legend           - Legend configuration (orientation, position, alignment, shape, shapeStyles, interactive)
@@ -171,6 +179,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	deltaFormatter = defaultDeltaFormatter,
 	animation,
 	loading = false,
+	fitRows = false,
 	showLegend = false,
 	legend = {},
 	legendLabels,
@@ -269,6 +278,16 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 
 	const prefersReducedMotion = usePrefersReducedMotion();
 
+	// There are no rows to measure while an interactive legend has hidden every
+	// series. Pausing fitting restores the full row count and, when a series is shown
+	// again, re-runs the effect against the newly mounted grid.
+	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(
+		fitRows && ! allSeriesHidden,
+		data?.length ?? 0,
+		data
+	);
+	const shouldFitRows = fitRows && isMeasurable;
+
 	// Handle empty or undefined data
 	if ( ! data || data.length === 0 ) {
 		return (
@@ -338,18 +357,43 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 				data-testid="leaderboard-chart-container"
 				trailingContent={ nonLegendChildren }
 			>
-				<div className={ styles.leaderboardChart__content }>
+				<div
+					ref={ contentRef }
+					data-testid="leaderboard-chart-content"
+					className={ clsx( styles.leaderboardChart__content, {
+						[ styles[ 'leaderboardChart__content--fit' ] ]: shouldFitRows,
+					} ) }
+				>
+					{ shouldFitRows && fittedCount === 0 && ! allSeriesHidden && (
+						// Overlaid, not swapped in: the rows must stay laid out to stay measurable.
+						<div className={ clsx( styles.emptyState, styles.fitEmptyState ) }>
+							{ __( 'Not enough space to display data', 'jetpack-charts' ) }
+						</div>
+					) }
 					{ allSeriesHidden ? (
 						<div className={ styles.emptyState }>
 							{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
 						</div>
 					) : (
-						<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
-							{ data.map( entry => {
+						<Grid
+							templateColumns="minmax(0, 1fr) auto"
+							rowGap={ rowGap }
+							columnGap={ columnGap }
+							data-leaderboard-grid
+						>
+							{ data.map( ( entry, rowIndex ) => {
+								// visibility, not clipping: hidden rows keep their geometry (so a
+								// taller container can reveal them) but leave hit testing, focus,
+								// and the accessibility tree.
+								const rowStyle =
+									shouldFitRows && rowIndex >= fittedCount
+										? ( { visibility: 'hidden' } as const )
+										: undefined;
 								const showComparisonColumn = withComparison && isComparisonVisible;
-								const hasDeltaValue = hasComparisonValue( entry );
-								const showComparisonValue = showComparisonColumn && hasDeltaValue;
-								const showComparisonPlaceholder = showComparisonColumn && ! hasDeltaValue;
+								const hasPreviousPeriodValue = hasPreviousValue( entry );
+								const hasDelta = hasDeltaValue( entry );
+								const showComparisonValue = showComparisonColumn && hasDelta;
+								const showComparisonPlaceholder = showComparisonColumn && ! hasDelta;
 								const colorIndex = showComparisonValue ? Math.sign( entry.delta ) + 1 : 1;
 								const deltaColor = deltaColors[ colorIndex ];
 
@@ -388,9 +432,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 													className={ clsx( styles.deltaValue, styles.deltaPlaceholder ) }
 													style={ { color: deltaColor } }
 												>
-													<span aria-hidden="true">-</span>
+													<span aria-hidden="true">—</span>
 													<VisuallyHidden as="span">
-														{ __( 'No comparison data', 'jetpack-charts' ) }
+														{ hasPreviousPeriodValue
+															? __( 'Percentage change unavailable', 'jetpack-charts' )
+															: __( 'No comparison data', 'jetpack-charts' ) }
 													</VisuallyHidden>
 												</Text>
 											) }
@@ -403,6 +449,8 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 										<button
 											key={ entry.id }
 											type="button"
+											data-row-index={ rowIndex }
+											style={ rowStyle }
 											className={ clsx( styles.row, styles.interactiveRow ) }
 											onClick={ entry.onClick }
 											aria-label={ entry.ariaLabel }
@@ -414,7 +462,12 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 								}
 
 								return (
-									<div key={ entry.id } className={ styles.row }>
+									<div
+										key={ entry.id }
+										data-row-index={ rowIndex }
+										style={ rowStyle }
+										className={ styles.row }
+									>
 										{ rowCells }
 									</div>
 								);

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/private/grid-control/grid-control.module.scss

@@ -1,7 +1,7 @@
 .grid-control {
 
 	:global(.visx-line) {
-		stroke: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+		stroke: var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
 		stroke-width: 1px;
 		shape-rendering: crispEdges;
 	}

package/src/charts/private/svg-empty-state/svg-empty-state.module.scss

@@ -1,5 +1,5 @@
 .svg-empty-state {
 	text-align: center;
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 }