@automattic/charts 1.10.3 → 1.12.0

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

@@ -285,7 +285,7 @@ describe( 'HeatmapChart', () => {
 		renderChart();
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
 		// Non-compact sets no inline gap — the SCSS falls back to the WPDS token.
-		expect( grid.style.getPropertyValue( '--heatmap-cell-gap' ) ).toBe( '' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-gap' ) ).toBe( '' );
 	} );
 
 	test( 'applies the compact gap inline from the theme compactCellGap', () => {
@@ -295,7 +295,9 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-cell-gap' ) ).toBe( '3px' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-gap' ) ).toBe(
+			'3px'
+		);
 	} );
 
 	test( 'sizes compact cells to the theme compactCellSize', () => {
@@ -305,9 +307,13 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-cell-size' ) ).toBe( '20px' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+			'20px'
+		);
 		// Compact track template is built from the fixed cell size.
-		expect( grid.style.gridTemplateColumns ).toContain( 'var(--heatmap-cell-size)' );
+		expect( grid.style.gridTemplateColumns ).toContain(
+			'var(--a8c-charts-dimension-heatmap-cell-size)'
+		);
 	} );
 
 	test( 'caps cell width without changing the normal vertical layout', () => {
@@ -343,7 +349,7 @@ describe( 'HeatmapChart', () => {
 	test( 'applies the primaryColor prop as the cell-scale color', () => {
 		renderChart( { primaryColor: '#abcdef' } );
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-primary' ) ).toBe( '#abcdef' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#abcdef' );
 	} );
 
 	test( 'resolves primaryColor from the chart theme', () => {
@@ -353,7 +359,7 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-primary' ) ).toBe( '#0a0b0c' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#0a0b0c' );
 	} );
 
 	test( 'falls back to the palette colors[0] when no prop or theme primaryColor is set', () => {
@@ -363,7 +369,7 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-primary' ) ).toBe( '#0a0b0c' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#0a0b0c' );
 	} );
 
 	test( 'the unresponsive export pins explicit width and height', () => {

package/src/charts/leaderboard-chart/hooks/index.ts

@@ -1 +1,2 @@
+export { useFittedRowCount, SUBPIXEL_TOLERANCE } from './use-fitted-row-count';
 export { useLeaderboardLegendItems } from './use-leaderboard-legend-items';

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

@@ -0,0 +1,115 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+/**
+ * Fractional layout rounding can put a row's bottom a hair past the container's
+ * without any visible clipping. Allow that much slack before hiding a row.
+ *
+ * Exported so tests and stories assert against the real tolerance rather than
+ * restating it.
+ */
+export const SUBPIXEL_TOLERANCE = 0.5;
+
+/**
+ * Counts how many leading rows fit inside the content container.
+ *
+ * Rows are read from the DOM rather than derived from constants: row height
+ * depends on the theme's row gap, label wrapping, and whatever a caller renders
+ * as a label, so any restated number would drift.
+ *
+ * Every row is a direct grid child marked with `data-row-index`; interactive rows
+ * use a button wrapper and non-interactive rows use a div wrapper.
+ *
+ * @param enabled  - Whether to measure at all. When false every row fits.
+ * @param rowCount - Total number of rows rendered.
+ * @param data     - Rendered row data, whose geometry may change without changing the count.
+ * @return Ref for the content container and the number of leading rows that fit.
+ */
+export function useFittedRowCount( enabled: boolean, rowCount: number, data: unknown ) {
+	const contentRef = useRef< HTMLDivElement | null >( null );
+	const [ fittedCount, setFittedCount ] = useState( rowCount );
+	const [ isMeasurable, setIsMeasurable ] = useState( true );
+
+	const measure = useCallback( () => {
+		const content = contentRef.current;
+		if ( ! content ) {
+			return;
+		}
+
+		// Switching from the default scrollable mode can leave the content at a
+		// non-zero scroll offset, which would shift every measurement below.
+		content.scrollTop = 0;
+
+		const rows = content.querySelectorAll< HTMLElement >(
+			':scope > [data-leaderboard-grid] > [data-row-index]'
+		);
+
+		const rowBottoms: number[] = [];
+		rows.forEach( row => {
+			const index = Number( row.getAttribute( 'data-row-index' ) );
+			// An unparseable index would write a non-numeric key, leaving a hole
+			// that silently truncates the scan below at the preceding row.
+			if ( ! Number.isInteger( index ) || index < 0 || index >= rowCount ) {
+				return;
+			}
+			const { bottom } = row.getBoundingClientRect();
+			rowBottoms[ index ] = Math.max( rowBottoms[ index ] ?? -Infinity, bottom );
+		} );
+
+		// Fail open. If the rows cannot be measured at all — a changed DOM shape,
+		// a detached container — falling back to the scrollable default keeps the
+		// data reachable, where hiding every row reads as a broken tile.
+		if ( rowBottoms.length === 0 ) {
+			setIsMeasurable( false );
+			setFittedCount( rowCount );
+			return;
+		}
+		setIsMeasurable( true );
+
+		const contentBottom = content.getBoundingClientRect().bottom + SUBPIXEL_TOLERANCE;
+
+		let fits = 0;
+		while ( fits < rowBottoms.length && rowBottoms[ fits ] <= contentBottom ) {
+			fits++;
+		}
+
+		// Bail before setState: setState inside a ResizeObserver callback is the
+		// usual way this grows a render loop.
+		setFittedCount( current => ( current === fits ? current : fits ) );
+	}, [ rowCount ] );
+
+	// Measure after row data changes so geometry updates are caught even when the
+	// row count and the grid's overall size stay the same (for example, one label
+	// wraps while another unwraps after a same-length data update).
+	useLayoutEffect( () => {
+		if ( ! enabled ) {
+			setFittedCount( rowCount );
+			return;
+		}
+
+		measure();
+	}, [ enabled, rowCount, data, measure ] );
+
+	useLayoutEffect( () => {
+		if ( ! enabled ) {
+			return;
+		}
+
+		const content = contentRef.current;
+		if ( ! content ) {
+			return;
+		}
+
+		const observer = new ResizeObserver( measure );
+		// The container catches tile resizing; the grid catches font, image,
+		// theme, or label changes that alter row geometry on an unchanged tile.
+		observer.observe( content );
+		const grid = content.querySelector< HTMLElement >( ':scope > [data-leaderboard-grid]' );
+		if ( grid ) {
+			observer.observe( grid );
+		}
+
+		return () => observer.disconnect();
+	}, [ enabled, rowCount, measure ] );
+
+	return { contentRef, fittedCount: enabled ? fittedCount : rowCount, isMeasurable };
+}

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

@@ -16,6 +16,15 @@
 		flex: 1;
 		min-height: 0;
 		overflow: auto;
+
+		// With fitRows the chart hides the rows that would not fit, so there is
+		// nothing left to scroll to — a scrollbar here would only ever reveal the
+		// hidden rows' reserved space.
+		&--fit {
+			overflow: hidden;
+			// Anchors .fitEmptyState, which is laid over the hidden rows.
+			position: relative;
+		}
 	}
 }
 
@@ -51,7 +60,7 @@
 		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
 		min-width: var(--wpds-dimension-size-5xs, 4px);
 
-		border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
+		border-radius: var(--a8c-charts-border-radius-leaderboard-bar, var(--a8c--charts--leaderboard--bar--border-radius, 9999px));
 		z-index: -1; /* places it behind the label */
 
 		&--animated {
@@ -95,14 +104,32 @@
 .emptyState {
 	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }
 
-.row {
-	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+// Shown when not even one row fits. The rows stay in the layout underneath so
+// they remain measurable, so this is taken out of flow to sit over them.
+.fitEmptyState {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	// The shared empty state reserves generous vertical whitespace. This overlay
+	// is specifically for compact containers, where the text may fit even though
+	// a complete data row does not.
+	padding-block: 0;
+}
 
+// Focus-ring width shared so a standard row's reserved padding and an
+// interactive row's outline (and its inset offset) stay equal. A Sass var,
+// not a custom property: a compile-time constant scoped to this module, so it
+// needs no runtime cascade and never lands on the DOM as an unprefixed var.
+$focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+
+.row {
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
@@ -110,7 +137,7 @@
 	// Every row reserves the same space for the interactive focus ring. Keeping
 	// this on the shared wrapper ensures that adding or removing an action never
 	// changes the row height or subgrid column edges.
-	padding: var(--focus-ring-width);
+	padding: $focus-ring-width;
 }
 
 .interactiveRow {
@@ -153,14 +180,14 @@
 
 		// Fixed reserve for the chevron — the value slides by it in full, and the
 		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
-		--a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
+		--a8c-charts-dimension-leaderboard-bar-hover-inset: var(--wpds-dimension-gap-2xl, 32px);
 
 		.bar {
 			opacity: 0.5;
 		}
 
 		.valueContainer {
-			transform: translateX(calc(var(--a8c--charts--leaderboard--bar--hover-inset) * -1));
+			transform: translateX(calc(var(--a8c-charts-dimension-leaderboard-bar-hover-inset) * -1));
 		}
 
 		.chevron {
@@ -171,18 +198,18 @@
 	// In RTL the value slides toward the inline start the other way (rightward).
 	[dir="rtl"] &:hover .valueContainer,
 	[dir="rtl"] &:focus-visible .valueContainer {
-		transform: translateX(var(--a8c--charts--leaderboard--bar--hover-inset));
+		transform: translateX(var(--a8c-charts-dimension-leaderboard-bar-hover-inset));
 	}
 
 	&:focus-visible {
 		border-radius: var(--wpds-border-radius-sm, 2px);
 		outline:
-			var(--focus-ring-width) solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			$focus-ring-width solid
+			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
 		// Inset by its own width so the outer edge hugs the row boundary: the
 		// outline then sits in the shared row padding, clear of the bar, and stays
 		// inside the overflow:auto container that would clip an outset ring.
-		outline-offset: calc(-1 * var(--focus-ring-width));
+		outline-offset: calc(-1 * #{$focus-ring-width});
 	}
 }
 
@@ -193,7 +220,7 @@
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	transition:
 		opacity var(--wpds-motion-duration-sm, 100ms)
 		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));

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>
 								);