@automattic/charts 4.8.0 → 4.9.0

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

@@ -1,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react';
+import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import { buildMonthCalendarHeatmapData } from '../build-month-calendar-data';
@@ -172,6 +172,29 @@ describe( 'HeatmapChart', () => {
 		).toHaveLength( 4 );
 	} );
 
+	test.each( [
+		[ 'with zeros painted empty', data, 1 ],
+		[ 'with negative values', [ { label: 'W1', data: [ { value: -2 }, { value: 0 } ] } ], 0 ],
+	] )( 'starts the legend scale with an empty-cell swatch %s', ( _case, rows, count ) => {
+		render(
+			<GlobalChartsProvider>
+				<HeatmapChart width={ 500 } height={ 300 } data={ rows }>
+					<HeatmapChart.Legend variant="bar" />
+				</HeatmapChart>
+			</GlobalChartsProvider>
+		);
+		const empty = screen.queryAllByTestId( 'heatmap-legend-empty-swatch' );
+		const scale = screen.getByTestId( 'heatmap-legend-scale' );
+
+		expect( empty ).toHaveLength( count );
+		expect( within( scale ).getAllByTestId( 'heatmap-legend-swatch' ) ).toHaveLength( 5 );
+		expect(
+			within( scale )
+				.getAllByTestId( /^heatmap-legend-(empty-)?swatch$/ )
+				.slice( 0, count )
+		).toEqual( empty );
+	} );
+
 	test( 'paints the legend on the same scale as the cells', () => {
 		render(
 			<GlobalChartsProvider>
@@ -943,6 +966,114 @@ describe( 'HeatmapChart column groups', () => {
 	} );
 } );
 
+describe( 'HeatmapChart fitCells', () => {
+	const threeMonths = Array.from( { length: 6 }, ( _, index ) => ( {
+		data: [ { value: index }, { value: index + 1 } ],
+	} ) );
+	const columnGroups = [
+		{ label: 'Jan', span: 2 },
+		{ label: 'Feb', span: 2 },
+		{ label: 'Mar', span: 2 },
+	];
+
+	let widthSpy: jest.SpyInstance;
+	let heightSpy: jest.SpyInstance;
+
+	beforeEach( () => {
+		widthSpy = jest.spyOn( Element.prototype, 'clientWidth', 'get' ).mockReturnValue( 400 );
+		heightSpy = jest.spyOn( Element.prototype, 'clientHeight', 'get' ).mockReturnValue( 400 );
+	} );
+
+	afterEach( () => {
+		widthSpy.mockRestore();
+		heightSpy.mockRestore();
+	} );
+
+	test( 'wraps the groups that fit better on a second band below the first, cells grown to match', () => {
+		renderChart( { data: threeMonths, columnGroups, compact: true, fitCells: true } );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+			'91px'
+		);
+		const [ , feb, mar ] = screen.getAllByTestId( 'heatmap-group-label' );
+		expect( feb ).toHaveStyle( { gridColumn: '5 / span 2', gridRow: '3' } );
+		// Band one takes rows 1-2, its labels 3 and the gap 4, so band two's labels sit on 7.
+		expect( mar ).toHaveStyle( { gridColumn: '2 / span 2', gridRow: '7' } );
+		const marchCell = screen
+			.getAllByTestId( 'heatmap-cell' )
+			.find( element => element.dataset.column === '4' && element.dataset.row === '0' );
+		expect( marchCell ).toHaveStyle( { gridColumn: '2', gridRow: '5' } );
+	} );
+
+	test( 'keeps the theme size, with a warning, when a column is a summary', () => {
+		renderChart( {
+			data: [
+				...threeMonths,
+				{ label: 'Total', summary: true, data: [ { value: 1 }, { value: 2 } ] },
+			],
+			columnGroups,
+			compact: true,
+			fitCells: true,
+		} );
+		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+			'11px'
+		);
+		expect( console ).toHaveWarned();
+	} );
+
+	test( 'leaves the grid the box less the content beside it', () => {
+		const offsetHeight = jest
+			.spyOn( HTMLElement.prototype, 'offsetHeight', 'get' )
+			.mockImplementation( function ( this: HTMLElement ) {
+				return this.dataset.testid === 'beside-grid' ? 100 : 0;
+			} );
+		try {
+			renderChart( {
+				data: threeMonths,
+				columnGroups,
+				compact: true,
+				fitCells: true,
+				children: <div data-testid="beside-grid" />,
+			} );
+			const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+			expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+				'66px'
+			);
+		} finally {
+			offsetHeight.mockRestore();
+		}
+	} );
+
+	test( 'refits within the resize delivery, before later observers read the grid', () => {
+		const observers: ResizeObserverCallback[] = [];
+		const original = window.ResizeObserver;
+		window.ResizeObserver = class {
+			constructor( private callback: ResizeObserverCallback ) {}
+			observe() {
+				observers.push( this.callback );
+			}
+			unobserve() {}
+			disconnect() {}
+		} as unknown as typeof ResizeObserver;
+		try {
+			renderChart( { data: threeMonths, columnGroups, compact: true, fitCells: true } );
+			const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
+			heightSpy.mockReturnValue( 100 );
+			let cellSize = '';
+			act( () => {
+				observers.forEach( callback => callback( [], {} as ResizeObserver ) );
+				cellSize = grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' );
+			} );
+			expect( cellSize ).toBe( '48px' );
+			const [ , , mar ] = screen.getAllByTestId( 'heatmap-group-label' );
+			expect( mar ).toHaveStyle( { gridRow: '3' } );
+		} finally {
+			window.ResizeObserver = original;
+		}
+	} );
+} );
+
 describe( 'HeatmapChart calendar navigation', () => {
 	const calendar = ( range: { start: string; end: string }, days: string[] ) =>
 		buildMonthCalendarHeatmapData(

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

@@ -78,6 +78,8 @@ export interface HeatmapChartProps extends Omit<
 	ariaLabel?: string;
 	/** Compact mode: hide in-cell values, tighten gap, thin axis labels. Default false. */
 	compact?: boolean;
+	/** Compact mode only: grow the cells to fill the chart's box, wrapping the column groups onto more rows when that makes them larger. Default false. */
+	fitCells?: boolean;
 	/** Render the numeric value inside each cell. Default `! compact`. */
 	showValues?: boolean;
 	/**

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

@@ -193,8 +193,10 @@ $focus-ring-width: var(--wpds-border-width-focus);
 			var(--wpds-motion-easing-subtle);
 	}
 
-	&:hover,
-	&:focus-visible {
+	// A layered row's own link or button does not advertise the drill-down.
+	&:hover:not(:has(:is(a, button):not(.rowButton):hover)),
+	&:focus-visible,
+	&:has(> .rowButton:focus-visible) {
 
 		// 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.
@@ -214,8 +216,9 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	}
 
 	// In RTL the value slides toward the inline start the other way (rightward).
-	[dir="rtl"] &:hover .valueContainer,
-	[dir="rtl"] &:focus-visible .valueContainer {
+	[dir="rtl"] &:hover:not(:has(:is(a, button):not(.rowButton):hover)) .valueContainer,
+	[dir="rtl"] &:focus-visible .valueContainer,
+	[dir="rtl"] &:has(> .rowButton:focus-visible) .valueContainer {
 		transform: translateX(var(--a8c-charts-dimension-leaderboard-bar-hover-inset));
 	}
 
@@ -231,6 +234,45 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	}
 }
 
+// A row whose label holds a link: the button follows the cells for tab order
+// but is layered beneath them, and the cells pass clicks through except on the
+// label's own links and buttons. The label's isolate traps their z-index, so
+// layering the cells is what keeps them above the button.
+.layeredRow {
+	isolation: isolate;
+
+	> :not(.rowButton, .chevron) {
+		position: relative;
+		z-index: 1;
+		pointer-events: none;
+	}
+
+	:is(a, button):not(.rowButton) {
+		position: relative;
+		z-index: 1;
+		pointer-events: auto;
+	}
+}
+
+.rowButton {
+	position: absolute;
+	inset: 0;
+	appearance: none;
+	padding: 0;
+	border: 0;
+	background: none;
+	cursor: pointer;
+	z-index: 0;
+
+	&:focus-visible {
+		border-radius: var(--wpds-border-radius-sm);
+		outline:
+			$focus-ring-width solid
+			var(--wpds-color-stroke-focus);
+		outline-offset: calc(-1 * #{$focus-ring-width});
+	}
+}
+
 .chevron {
 	position: absolute;
 	inset-inline-end: var(--wpds-dimension-padding-xs);

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

@@ -4,7 +4,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { Stack, Text } from '@wordpress/ui';
 import clsx from 'clsx';
-import { useContext, useMemo, type FC } from 'react';
+import { useContext, useMemo, type FC, type MouseEvent } from 'react';
 import { Legend } from '../../components/legend';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
@@ -89,6 +89,20 @@ const hasDeltaValue = (
 	delta: number;
 } => hasPreviousValue( entry ) && entry.delta != null;
 
+/**
+ * A layered row's cell that takes pointer events of its own (a value tooltip)
+ * sits above the row button; pass its clicks on so they still drill down.
+ *
+ * @param event - The click on the row.
+ */
+function forwardCellClickToRowButton( event: MouseEvent< HTMLDivElement > ) {
+	if ( ( event.target as Element ).closest( 'a, button' ) ) {
+		return;
+	}
+
+	event.currentTarget.querySelector< HTMLButtonElement >( ':scope > button' )?.click();
+}
+
 const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
@@ -449,6 +463,28 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 									</>
 								);
 
+								if ( entry.onClick && entry.hasInteractiveLabel ) {
+									return (
+										// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- Mouse-only fallback; the row button carries keyboard access.
+										<div
+											key={ entry.id }
+											data-row-index={ rowIndex }
+											style={ rowStyle }
+											className={ clsx( styles.row, styles.interactiveRow, styles.layeredRow ) }
+											onClick={ forwardCellClickToRowButton }
+										>
+											{ rowCells }
+											<button
+												type="button"
+												className={ styles.rowButton }
+												onClick={ entry.onClick }
+												aria-label={ entry.ariaLabel }
+											/>
+											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />
+										</div>
+									);
+								}
+
 								if ( entry.onClick ) {
 									return (
 										<button

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

@@ -547,6 +547,59 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ).tagName ).toBe( 'BUTTON' );
 		} );
 
+		it( 'keeps a label link beside the row button, not inside it, when the label is interactive', async () => {
+			const user = userEvent.setup();
+			const onClick = jest.fn();
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <a href="/author/1">Author</a>,
+							onClick,
+							ariaLabel: 'View posts by Author',
+							hasInteractiveLabel: true,
+						},
+					] }
+				/>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'View posts by Author' } );
+			const link = screen.getByRole( 'link', { name: 'Author' } );
+			link.addEventListener( 'click', event => event.preventDefault() );
+			expect( button ).not.toContainElement( link );
+
+			await user.click( button );
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+			await user.click( link );
+			expect( onClick ).toHaveBeenCalledTimes( 1 );
+			// A value tooltip takes pointer events above the button; its click still drills down.
+			await user.click( screen.getByText( '12.5K' ) );
+			expect( onClick ).toHaveBeenCalledTimes( 2 );
+		} );
+
+		it( 'tabs to the label link before the row button when the label is interactive', async () => {
+			const user = userEvent.setup();
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <a href="/author/1">Author</a>,
+							onClick: jest.fn(),
+							ariaLabel: 'View posts by Author',
+							hasInteractiveLabel: true,
+						},
+					] }
+				/>
+			);
+
+			await user.tab();
+			expect( screen.getByRole( 'link', { name: 'Author' } ) ).toHaveFocus();
+			await user.tab();
+			expect( screen.getByRole( 'button', { name: 'View posts by Author' } ) ).toHaveFocus();
+		} );
+
 		it( 'calls onClick when the row is clicked', async () => {
 			const user = userEvent.setup();
 			const onClick = jest.fn();

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

@@ -4,7 +4,6 @@ import { BaseChartProps, LeaderboardEntry } from '../../types';
 export interface LeaderboardChartProps extends Pick<
 	BaseChartProps< LeaderboardEntry >,
 	| 'className'
-	| 'data'
 	| 'showLegend'
 	| 'legend'
 	| 'chartId'
@@ -14,6 +13,12 @@ export interface LeaderboardChartProps extends Pick<
 	| 'gap'
 	| 'animation'
 > {
+	/**
+	 * Entries to display. Declared here rather than picked, since the base type
+	 * would split the entry union into one array type per member.
+	 */
+	data: LeaderboardEntry[];
+
 	/**
 	 * Whether to show comparison data
 	 */

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

@@ -232,6 +232,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 	(
 		{
 			data,
+			ariaLabel,
 			chartId: providedChartId,
 			width,
 			height,
@@ -624,10 +625,11 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 						const chartHeight = contentHeight > 0 ? contentHeight : height;
 
 						return (
+							// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the application role hands arrow keys to the chart's point navigation.
 							<div
 								ref={ chartRef }
-								role="grid"
-								aria-label={ __( 'Line chart', 'jetpack-charts' ) }
+								role="application"
+								aria-label={ ariaLabel ?? __( 'Line chart', 'jetpack-charts' ) }
 								tabIndex={ 0 }
 								onKeyDown={ onChartKeyDown }
 								onFocus={ onChartFocus }
@@ -637,6 +639,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 									<div className={ plotStyles[ 'xy-plot' ] }>
 										{ zoomable && zoom.domain && <ZoomResetButton onClick={ zoom.reset } /> }
 										<XYChart
+											accessibilityLabel=""
 											theme={ theme }
 											width={ width }
 											height={ chartHeight }

package/src/charts/line-chart/private/line-chart-annotation-label-popover.tsx

@@ -1,14 +1,17 @@
 import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import { useEffect, useId, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState, version as reactVersion } from 'react';
 import { isSafari } from '../../../utils';
 import styles from '../line-chart.module.scss';
 import type { ButtonWithPopover, PopoverElement, ToggleEvent } from '../../../types';
-import type { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 
 export const POPOVER_BUTTON_SIZE = 44;
 
+// @todo Remove this (and uses of it below) when we drop support for WordPress versions shipping React 18.
+const isReact18 = reactVersion.startsWith( '18.' );
+
 const CloseIcon = () => (
 	<svg
 		width="16"
@@ -29,8 +32,8 @@ const CloseIcon = () => (
 interface LineChartAnnotationLabelWithPopoverProps {
 	title: string;
 	subtitle?: string;
-	renderLabel: FC< { title: string; subtitle?: string } >;
-	renderLabelPopover: FC< { title: string; subtitle?: string } >;
+	renderLabel: ( props: { title: string; subtitle?: string } ) => ReactNode;
+	renderLabelPopover: ( props: { title: string; subtitle?: string } ) => ReactNode;
 }
 
 const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopoverProps > = ( {
@@ -83,7 +86,9 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 		<div className={ styles[ 'line-chart__annotation-label' ] }>
 			<button
 				ref={ buttonRef }
-				{ ...( { popovertarget: popoverId } as ButtonWithPopover ) }
+				{ ...( isReact18
+					? ( { popovertarget: popoverId } as ButtonWithPopover )
+					: { popoverTarget: popoverId } ) }
 				className={ styles[ 'line-chart__annotation-label-trigger-button' ] }
 				style={ {
 					width: `${ POPOVER_BUTTON_SIZE }px`,
@@ -110,10 +115,15 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						{ renderLabelPopover( { title, subtitle } ) }
 					</div>
 					<button
-						{ ...( {
-							popovertarget: popoverId,
-							popovertargetaction: 'hide',
-						} as ButtonWithPopover ) }
+						{ ...( isReact18
+							? ( {
+									popovertarget: popoverId,
+									popovertargetaction: 'hide',
+								} as ButtonWithPopover )
+							: {
+									popoverTarget: popoverId,
+									popoverTargetAction: 'hide',
+								} ) }
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>

package/src/charts/line-chart/test/default-tooltip-formatting.test.tsx

@@ -66,7 +66,7 @@ describe( 'renderDefaultTooltip date heading', () => {
 			</GlobalChartsProvider>
 		);
 
-		screen.getByRole( 'grid', { name: /line chart/i } ).focus();
+		screen.getByRole( 'application', { name: /line chart/i } ).focus();
 		await user.keyboard( '{ArrowRight}' );
 
 		expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( '3.8.2026' );