@automattic/charts 1.10.0 → 1.10.2

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

@@ -213,6 +213,57 @@ describe( 'HeatmapChart', () => {
 		expect( grid ).not.toHaveAttribute( 'aria-activedescendant' );
 	} );
 
+	// Calendar ragged edges: hidden cells keep their grid slot but paint
+	// nothing and take no interaction.
+	const raggedData: HeatmapColumn[] = [
+		{ label: 'W1', data: [ { value: null, hidden: true }, { value: 1 }, { value: 2 } ] },
+		{ label: 'W2', data: [ { value: 3 }, { value: null, hidden: true }, { value: 4 } ] },
+		{ label: 'W3', data: [ { value: 5 }, { value: 6 }, { value: null, hidden: true } ] },
+	];
+
+	test( 'hidden cells render as empty slots outside the accessibility tree', () => {
+		renderChart( { data: raggedData } );
+		expect( screen.getAllByTestId( 'heatmap-cell' ) ).toHaveLength( 6 );
+		expect( screen.getAllByTestId( 'heatmap-cell-hidden' ) ).toHaveLength( 3 );
+		expect( screen.getAllByRole( 'gridcell' ) ).toHaveLength( 6 );
+	} );
+
+	test( 'keyboard navigation skips hidden cells and never lands on them', async () => {
+		renderChart( { data: raggedData, rowLabels: [ 'Mon', 'Tue', 'Wed' ] } );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		const user = userEvent.setup();
+
+		// The initial selection starts past the hidden leading slot (0,0).
+		grid.focus();
+		await user.keyboard( '{ArrowDown}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-0-1$/ )
+		);
+
+		// ArrowRight steps over the hidden (1,1) to (2,1).
+		await user.keyboard( '{ArrowRight}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-2-1$/ )
+		);
+
+		// Only a hidden slot (2,2) lies below — the selection stays put.
+		await user.keyboard( '{ArrowDown}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-2-1$/ )
+		);
+
+		// ArrowLeft steps back over the hidden (1,1) to (0,1); ArrowUp has
+		// only the hidden (0,0) above, so the selection stays again.
+		await user.keyboard( '{ArrowLeft}{ArrowUp}' );
+		expect( grid ).toHaveAttribute(
+			'aria-activedescendant',
+			expect.stringMatching( /-cell-0-1$/ )
+		);
+	} );
+
 	test( 'rows contain gridcell children in the ARIA hierarchy', () => {
 		renderChart();
 		const rows = screen.getAllByRole( 'row' );
@@ -222,12 +273,19 @@ describe( 'HeatmapChart', () => {
 		} );
 	} );
 
-	test( 'leaves cell gap and radius to WPDS tokens (no inline overrides)', () => {
+	test( 'keeps a strict grid → row structure (column labels live in a row, not directly under the grid)', () => {
+		renderChart();
+		// The header row is aria-hidden, so include hidden elements when querying for it.
+		const rows = screen.getAllByRole( 'row', { hidden: true } );
+		const headerRow = rows.find( row => within( row ).queryByText( 'W1' ) );
+		expect( headerRow ).toBeDefined();
+	} );
+
+	test( 'leaves the cell gap to WPDS tokens in non-compact mode (no inline override)', () => {
 		renderChart();
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		// Non-compact sets no inline gap/radius — the SCSS falls back to the WPDS tokens.
+		// 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( '--heatmap-cell-radius' ) ).toBe( '' );
 	} );
 
 	test( 'applies the compact gap inline from the theme compactCellGap', () => {
@@ -252,6 +310,36 @@ describe( 'HeatmapChart', () => {
 		expect( grid.style.gridTemplateColumns ).toContain( 'var(--heatmap-cell-size)' );
 	} );
 
+	test( 'caps cell width without changing the normal vertical layout', () => {
+		renderChart( { maxCellWidth: 64 } );
+		const chart = screen.getByTestId( 'heatmap-chart' );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.gridTemplateColumns ).toContain( 'minmax(0px, 64px)' );
+		expect( grid.style.gridTemplateRows ).toContain( 'minmax(0px, 1fr)' );
+		expect( chart ).not.toHaveClass( 'heatmap-chart--height-capped' );
+		expect( grid ).not.toHaveClass( 'heatmap-chart__grid--height-capped' );
+	} );
+
+	test( 'content-sizes the vertical layout when cell height is capped', () => {
+		renderChart( { maxCellHeight: 42 } );
+		const chart = screen.getByTestId( 'heatmap-chart' );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.gridTemplateColumns ).toContain( 'minmax(0px, 1fr)' );
+		expect( grid.style.gridTemplateRows ).toContain( 'minmax(0px, 42px)' );
+		expect( chart ).toHaveClass( 'heatmap-chart--height-capped' );
+		expect( grid ).toHaveClass( 'heatmap-chart__grid--height-capped' );
+	} );
+
+	test( 'applies independent minimum cell width and height floors', () => {
+		renderChart( { minCellWidth: 44, minCellHeight: 32 } );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+
+		expect( grid.style.gridTemplateColumns ).toContain( 'minmax(44px, 1fr)' );
+		expect( grid.style.gridTemplateRows ).toContain( 'minmax(32px, 1fr)' );
+	} );
+
 	test( 'applies the primaryColor prop as the cell-scale color', () => {
 		renderChart( { primaryColor: '#abcdef' } );
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );

package/src/charts/heatmap-chart/test/use-heatmap-colors.test.ts

@@ -31,4 +31,8 @@ describe( 'getNormalizedValue', () => {
 	test( 'returns 1 when min === max', () => {
 		expect( getNormalizedValue( 7, [ 7, 7 ] ) ).toBe( 1 );
 	} );
+
+	test( 'returns 0 for an all-zero extent so a no-activity grid stays at the scale bottom', () => {
+		expect( getNormalizedValue( 0, [ 0, 0 ] ) ).toBe( 0 );
+	} );
 } );

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

@@ -6,6 +6,13 @@ export type HeatmapCell = {
 	/** Per-cell label used in the tooltip / accessible name. */
 	label?: string;
 	value: number | null;
+	/**
+	 * Leave the cell's grid slot empty: nothing is painted and the cell is
+	 * skipped by hover and keyboard navigation, while the slot keeps its
+	 * place so the rest of the grid doesn't shift. For calendar edges, where
+	 * days completing the first/last week fall outside the covered range.
+	 */
+	hidden?: boolean;
 };
 
 /** A heatmap column (rendered left→right); its cells render top→bottom. */
@@ -32,6 +39,27 @@ export interface HeatmapChartProps
 	compact?: boolean;
 	/** Render the numeric value inside each cell. Default `! compact`. */
 	showValues?: boolean;
+	/**
+	 * Cap a cell's width (px) in non-compact mode. Cells grow up to the cap
+	 * and stop instead of splitting the whole container width, so sparse
+	 * ranges don't produce oversized cells; narrow containers still shrink
+	 * them. Ignored in compact mode, which uses a fixed cell size.
+	 */
+	maxCellWidth?: number;
+	/**
+	 * Cap a cell's height (px) in non-compact mode. Applying this cap
+	 * content-sizes the chart vertically so rows do not absorb unused height.
+	 * Ignored in compact mode, which uses a fixed cell size.
+	 */
+	maxCellHeight?: number;
+	/**
+	 * Floor a cell's width (px) in non-compact mode. Below it the grid stops
+	 * shrinking and overflows its container instead, so a scrollable wrapper
+	 * can take over for long ranges. Default 0 (cells shrink freely).
+	 */
+	minCellWidth?: number;
+	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
+	minCellHeight?: number;
 	/**
 	 * Color the cell scale interpolates toward at the highest value
 	 * (this prop > theme `heatmapChart.primaryColor` > palette `colors[0]`).

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

@@ -73,9 +73,21 @@
 }
 
 .valueContainer {
+	align-items: center;
 	justify-content: flex-end;
 }
 
+.deltaValue {
+	display: inline-block;
+	font-variant-numeric: tabular-nums;
+	min-width: 3ch;
+	text-align: end;
+}
+
+.deltaPlaceholder {
+	text-align: center;
+}
+
 .overlayLabel {
 	align-items: center;
 }

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

@@ -1,5 +1,5 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
-import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __experimentalGrid as Grid, VisuallyHidden } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
@@ -65,6 +65,14 @@ const defaultDeltaFormatter = ( value: number ): string => {
 const getBarWidth = ( share: number ): string =>
 	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${ share } / 100)`;
 
+const hasComparisonValue = (
+	entry: LeaderboardEntry
+): entry is LeaderboardEntry & {
+	previousValue: number;
+	previousShare: number;
+	delta: number;
+} => entry.previousValue != null && entry.previousShare != null && entry.delta != null;
+
 const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
@@ -87,39 +95,43 @@ const BarWithLabel = ( {
 	isPrimaryVisible?: boolean;
 	isComparisonVisible?: boolean;
 	animation?: boolean;
-} ) => (
-	<div
-		className={ clsx( styles.barWithLabelContainer, {
-			[ styles[ 'is-overlay' ] ]: withOverlayLabel,
-		} ) }
-	>
-		<BarLabel label={ entry.label } />
-
-		{ isPrimaryVisible && (
-			<div
-				className={ clsx( styles.bar, {
-					[ styles[ 'bar--animated' ] ]: animation,
-				} ) }
-				style={ {
-					width: getBarWidth( entry.currentShare ),
-					backgroundColor: primaryColor,
-				} }
-			></div>
-		) }
-
-		{ withComparison && ! withOverlayLabel && isComparisonVisible && (
-			<div
-				className={ clsx( styles.bar, {
-					[ styles[ 'bar--animated' ] ]: animation,
-				} ) }
-				style={ {
-					width: getBarWidth( entry.previousShare ),
-					backgroundColor: secondaryColor,
-				} }
-			></div>
-		) }
-	</div>
-);
+} ) => {
+	const showComparisonBar = withComparison && ! withOverlayLabel && isComparisonVisible;
+
+	return (
+		<div
+			className={ clsx( styles.barWithLabelContainer, {
+				[ styles[ 'is-overlay' ] ]: withOverlayLabel,
+			} ) }
+		>
+			<BarLabel label={ entry.label } />
+
+			{ isPrimaryVisible && (
+				<div
+					className={ clsx( styles.bar, {
+						[ styles[ 'bar--animated' ] ]: animation,
+					} ) }
+					style={ {
+						width: getBarWidth( entry.currentShare ),
+						backgroundColor: primaryColor,
+					} }
+				></div>
+			) }
+
+			{ showComparisonBar && hasComparisonValue( entry ) && (
+				<div
+					className={ clsx( styles.bar, {
+						[ styles[ 'bar--animated' ] ]: animation,
+					} ) }
+					style={ {
+						width: getBarWidth( entry.previousShare ),
+						backgroundColor: secondaryColor,
+					} }
+				></div>
+			) }
+		</div>
+	);
+};
 
 /**
  * LeaderboardChart component displays a ranked list of data with progress bars
@@ -335,7 +347,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					) : (
 						<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
 							{ data.map( entry => {
-								const colorIndex = Math.sign( entry.delta ) + 1;
+								const showComparisonColumn = withComparison && isComparisonVisible;
+								const hasDeltaValue = hasComparisonValue( entry );
+								const showComparisonValue = showComparisonColumn && hasDeltaValue;
+								const showComparisonPlaceholder = showComparisonColumn && ! hasDeltaValue;
+								const colorIndex = showComparisonValue ? Math.sign( entry.delta ) + 1 : 1;
 								const deltaColor = deltaColors[ colorIndex ];
 
 								const rowCells = (
@@ -362,11 +378,23 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 										>
 											{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
 
-											{ withComparison && isComparisonVisible && (
-												<Text style={ { color: deltaColor } }>
+											{ showComparisonValue && (
+												<Text className={ styles.deltaValue } style={ { color: deltaColor } }>
 													{ deltaFormatter( entry.delta ) }
 												</Text>
 											) }
+
+											{ showComparisonPlaceholder && (
+												<Text
+													className={ clsx( styles.deltaValue, styles.deltaPlaceholder ) }
+													style={ { color: deltaColor } }
+												>
+													<span aria-hidden="true">-</span>
+													<VisuallyHidden as="span">
+														{ __( 'No comparison data', 'jetpack-charts' ) }
+													</VisuallyHidden>
+												</Text>
+											) }
 										</Stack>
 									</>
 								);

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

@@ -78,6 +78,30 @@ describe( 'LeaderboardChart', () => {
 		expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 	} );
 
+	it( 'shows a placeholder when a row has no previous value', () => {
+		render(
+			<LeaderboardChart
+				data={ [
+					...mockData,
+					{
+						id: 'new',
+						label: 'New Source',
+						currentValue: 100,
+						currentShare: 1,
+					},
+				] }
+				withComparison={ true }
+			/>
+		);
+
+		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( 'No comparison data' ) ).toBeInTheDocument();
+		expect( screen.queryByText( '+100%' ) ).not.toBeInTheDocument();
+	} );
+
 	it( 'shows custom label when provided', () => {
 		render(
 			<LeaderboardChart
@@ -348,12 +372,6 @@ describe( 'LeaderboardChart', () => {
 	} );
 
 	describe( 'Responsive wrapper', () => {
-		it( 'fills parent container (height:100%) by default', () => {
-			render( <LeaderboardChart data={ mockData } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { height: '100%' } );
-		} );
-
 		it( 'applies explicit width and height to chart container', () => {
 			const { useParentSize } = jest.requireMock( '@visx/responsive' );
 			useParentSize.mockReturnValue( {
@@ -403,6 +421,28 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /Direct.*12\.5K/ );
 		} );
 
+		it( 'does not include the missing comparison dash in interactive row names', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							id: 'new',
+							label: 'New Source',
+							currentValue: 100,
+							currentShare: 1,
+							onClick: jest.fn(),
+						},
+					] }
+					withComparison={ true }
+				/>
+			);
+
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
+				/New Source.*100.*No comparison data/
+			);
+			expect( screen.getByRole( 'button' ) ).not.toHaveAccessibleName( /-/ );
+		} );
+
 		it( 'derives the accessible name from an image label via its alt text', () => {
 			render(
 				<LeaderboardChart

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -226,12 +226,6 @@ describe( 'PieSemiCircleChart', () => {
 	} );
 
 	describe( 'Responsive wrapper', () => {
-		it( 'fills parent container (height:100%) by default', () => {
-			render( <PieSemiCircleChart data={ mockData } /> );
-			const wrapper = screen.getByTestId( 'responsive-wrapper' );
-			expect( wrapper ).toHaveStyle( { height: '100%' } );
-		} );
-
 		it( 'constrains chart to 2:1 ratio from measured dimensions', () => {
 			// Mock returns width:400, height:200, so chart renders at 400×200 (2:1 ratio)
 			render( <PieSemiCircleChart data={ mockData } /> );