@automattic/charts 4.7.0 → 4.9.0

package/src/charts/heatmap-chart/test/heatmap-scale.test.ts

@@ -0,0 +1,78 @@
+import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
+import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
+import { mixHexColors } from '../../../utils/color-utils';
+import { getHeatmapScale, HEATMAP_HIGH_CONTRAST } from '../private/heatmap-scale';
+
+// The wp-admin scheme colors, then the pre-7.0 ones, which include a sunrise below 3:1 on white.
+const PRIMARIES = [
+	'#007cba',
+	'#3858e9',
+	'#437aa8',
+	'#916745',
+	'#646c3e',
+	'#cf4339',
+	'#567958',
+	'#ad631e',
+	'#0085ba',
+	'#dd823b',
+];
+
+describe.each( [
+	[ 'light', '#ffffff', '#f0f0f0' ],
+	[ 'dark', '#242424', '#272727' ],
+] )( 'getHeatmapScale on a %s background', ( _mode, background, emptyCell ) => {
+	it.each( PRIMARIES )(
+		'keeps the lowest step of %s at 3:1 against the background and empty cell, no further',
+		primary => {
+			const { low } = getHeatmapScale( primary, background, emptyCell );
+			const contrasts = [ contrastRatio( low, background ), contrastRatio( low, emptyCell ) ];
+
+			expect( Math.min( ...contrasts ) ).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
+			expect( Math.min( ...contrasts ) ).toBeLessThan( MIN_BACKGROUND_CONTRAST + 0.1 );
+		}
+	);
+
+	it.each( PRIMARIES )( 'runs the scale of %s out to 9:1', primary => {
+		const { high } = getHeatmapScale( primary, background );
+
+		expect( contrastRatio( high, background ) ).toBeGreaterThanOrEqual( HEATMAP_HIGH_CONTRAST );
+	} );
+} );
+
+describe( 'getHeatmapScale', () => {
+	it( 'keeps a primary already past 9:1 as the high end', () => {
+		expect( getHeatmapScale( '#1d2327', '#ffffff' ).high ).toBe( '#1d2327' );
+	} );
+
+	it.each( [
+		[ '#ffffff', '#808080' ],
+		[ '#ffd000', '#767676' ],
+		[ '#3858e9', '#808080' ],
+		[ '#1e1e1e', '#999999' ],
+	] )( 'keeps every step of %s at 3:1 on a mid-gray %s', ( primary, background ) => {
+		const { low, high } = getHeatmapScale( primary, background );
+
+		for ( let step = 0; step <= 20; step++ ) {
+			expect(
+				contrastRatio( mixHexColors( low, high, step / 20 ), background )
+			).toBeGreaterThanOrEqual( MIN_BACKGROUND_CONTRAST );
+		}
+	} );
+
+	it.each( [
+		[ 'no step clears it', '#ffffff', '#555555' ],
+		[ 'clearing it would pass the high end', '#ffffff', '#767676' ],
+		[ 'clearing it would pass the high end', '#1e1e1e', '#6b6b6b' ],
+	] )(
+		'measures against the background alone when %s (%s, %s)',
+		( _case, background, emptyCell ) => {
+			expect( getHeatmapScale( '#3858e9', background, emptyCell ) ).toEqual(
+				getHeatmapScale( '#3858e9', background )
+			);
+		}
+	);
+
+	it( 'ends on black or white when the background leaves no room for 9:1', () => {
+		expect( getHeatmapScale( '#3858e9', '#808080' ).high ).toBe( '#000000' );
+	} );
+} );

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

@@ -1,4 +1,4 @@
-import { getValueExtent, getNormalizedValue } from '../private/use-heatmap-colors';
+import { getValueExtent, getNormalizedValue, isEmptyValue } from '../private/use-heatmap-colors';
 import type { HeatmapColumn } from '../types';
 
 const data: HeatmapColumn[] = [
@@ -7,8 +7,12 @@ const data: HeatmapColumn[] = [
 ];
 
 describe( 'getValueExtent', () => {
-	test( 'returns [min, max] ignoring null/NaN', () => {
-		expect( getValueExtent( data ) ).toEqual( [ 0, 20 ] );
+	test( 'returns [min, max] ignoring null/NaN and empty zeros', () => {
+		expect( getValueExtent( data ) ).toEqual( [ 5, 20 ] );
+	} );
+
+	test( 'keeps a zero in the extent when the data has negatives', () => {
+		expect( getValueExtent( [ { data: [ { value: -4 }, { value: 0 } ] } ] ) ).toEqual( [ -4, 0 ] );
 	} );
 
 	test( 'leaves summary columns out of the extent', () => {
@@ -16,11 +20,12 @@ describe( 'getValueExtent', () => {
 			...data,
 			{ label: 'Total', summary: true, data: [ { value: 500 }, { value: 900 }, { value: null } ] },
 		];
-		expect( getValueExtent( withTotals ) ).toEqual( [ 0, 20 ] );
+		expect( getValueExtent( withTotals ) ).toEqual( [ 5, 20 ] );
 	} );
 
 	test( 'returns [0, 0] for all-empty data', () => {
 		expect( getValueExtent( [ { data: [ { value: null } ] } ] ) ).toEqual( [ 0, 0 ] );
+		expect( getValueExtent( [ { data: [ { value: 0 }, { value: 0 } ] } ] ) ).toEqual( [ 0, 0 ] );
 	} );
 } );
 
@@ -39,8 +44,15 @@ describe( 'getNormalizedValue', () => {
 	test( 'returns 1 when min === max', () => {
 		expect( getNormalizedValue( 7, [ 7, 7 ] ) ).toBe( 1 );
 	} );
+} );
+
+describe( 'isEmptyValue', () => {
+	test( 'paints a zero as empty in data with no negatives', () => {
+		expect( isEmptyValue( 0, [ 0, 20 ] ) ).toBe( true );
+		expect( isEmptyValue( 5, [ 0, 20 ] ) ).toBe( false );
+	} );
 
-	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 );
+	test( 'keeps a zero on the scale when the data has negatives', () => {
+		expect( isEmptyValue( 0, [ -4, 6 ] ) ).toBe( false );
 	} );
 } );

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

@@ -1,7 +1,7 @@
 import type { BaseChartProps } from '../../types';
 import type { CSSProperties, ReactNode } from 'react';
 
-/** A single heatmap cell. `value: null` marks an empty cell. */
+/** A single heatmap cell. `value: null` marks an empty cell, as does a zero when no value is negative. */
 export type HeatmapCell = {
 	/** Per-cell label used in the tooltip / accessible name. */
 	label?: string;
@@ -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;
 	/**
@@ -102,8 +104,9 @@ export interface HeatmapChartProps extends Omit<
 	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
 	minCellHeight?: number;
 	/**
-	 * Color the cell scale interpolates toward at the highest value. Defaults to the
-	 * first series palette slot, `--a8c-charts-color-series-1`.
+	 * Color the cell scale is built from, deepened at the highest value toward 9:1
+	 * against the background. Defaults to the first series palette slot,
+	 * `--a8c-charts-color-series-1`.
 	 */
 	primaryColor?: string;
 	renderTooltip?: ( data: HeatmapTooltipData ) => ReactNode;

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

@@ -15,7 +15,7 @@ import {
 	useCallback,
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -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 }
@@ -784,7 +787,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											</ZoomClip>
 
 											{ withTooltips && (
-												<AccessibleTooltip
+												<XYChartTooltip
 													detectBounds
 													snapTooltipToDatumX
 													tooltipPlacement={ tooltipPlacement }

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