@automattic/charts 4.12.0 → 4.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.12.0",
+	"version": "4.14.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -63,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.2.12",
+		"@automattic/number-formatters": "^1.3.0",
 		"@babel/runtime": "7.29.7",
 		"@date-fns/tz": "1.5.0",
 		"@react-spring/web": "10.1.2",
@@ -83,10 +83,10 @@
 		"@visx/tooltip": "^4.0.0",
 		"@visx/vendor": "^4.0.0",
 		"@visx/xychart": "^4.0.0",
-		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/icons": "^18.0.0",
-		"@wordpress/theme": "2.3.0",
-		"@wordpress/ui": "0.24.0",
+		"@wordpress/i18n": "^7.0.0",
+		"@wordpress/icons": "^19.0.0",
+		"@wordpress/theme": "3.0.0",
+		"@wordpress/ui": "0.25.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -111,9 +111,9 @@
 		"@types/react-dom": "19.3.0",
 		"@typescript/native-preview": "7.0.0-dev.20260707.2",
 		"@visx/glyph": "4.0.0",
-		"@wordpress/components": "42.0.0",
-		"@wordpress/element": "9.0.0",
-		"@wordpress/private-apis": "2.0.0",
+		"@wordpress/components": "43.0.0",
+		"@wordpress/element": "10.0.0",
+		"@wordpress/private-apis": "3.0.0",
 		"babel-jest": "30.5.2",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.5.2",

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

@@ -13,6 +13,7 @@ import {
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { getKeyboardStops } from '../../components/tooltip/private/keyboard-stops';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -144,14 +145,22 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			[ seriesWithVisibility ]
 		);
 
+		const visibleDataSeries = useMemo(
+			() => dataSorted.filter( series => isSeriesVisible( series.label ) ),
+			[ dataSorted, isSeriesVisible ]
+		);
+
 		// A normalized stack (expand/wiggle/silhouette) turns whole-number data into
 		// fractions, so the filter is skipped for every offset but 'none'.
 		const hasWholeNumberValues = useMemo(
-			() =>
-				( ! stacked || stackOffset === 'none' ) &&
-				hasOnlyWholeNumbers( dataSorted.filter( series => isSeriesVisible( series.label ) ) ),
-			[ dataSorted, isSeriesVisible, stacked, stackOffset ]
+			() => ( ! stacked || stackOffset === 'none' ) && hasOnlyWholeNumbers( visibleDataSeries ),
+			[ visibleDataSeries, stacked, stackOffset ]
+		);
+		const visibleSeriesKey = useMemo(
+			() => JSON.stringify( visibleDataSeries.map( series => series.label ) ),
+			[ visibleDataSeries ]
 		);
+		const stops = useMemo( () => getKeyboardStops( visibleDataSeries ), [ visibleDataSeries ] );
 
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
@@ -159,7 +168,8 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			isNavigating,
 			setIsNavigating,
 			chartRef,
-			totalPoints: dataSorted[ 0 ]?.data.length || 0,
+			totalPoints: stops.count,
+			visibleSeriesKey,
 		} );
 
 		// Computed from the full data set (ignoring legend visibility) so the y-axis stays
@@ -526,7 +536,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 														keyboardFocusedClassName={
 															styles[ 'area-chart__tooltip--keyboard-focused' ]
 														}
-														series={ dataSorted }
+														series={ visibleDataSeries }
 													/>
 													<HoverGlyphs
 														visibleSeries={ visibleSeries }

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

@@ -879,12 +879,6 @@ describe( 'AreaChart', () => {
 		} );
 
 		test( 'renders glyphs only for series with a datum at the hovered x (mismatched x-domains)', async () => {
-			// Each series' data[0] is a different date. Keyboard nav fires
-			// showTooltip for every series at its own data[selectedIndex];
-			// the LAST one wins as the nearestDatum, so the resolved hover
-			// date is Series B's. HoverGlyphs should:
-			//   - Skip Series A (no datum at Series B's date) — cumulative += 0
-			//   - Render a glyph for Series B
 			renderWithProvider( {
 				data: [
 					{
@@ -901,9 +895,8 @@ describe( 'AreaChart', () => {
 
 			const glyphs = screen.getAllByTestId( /^area-chart-hover-glyph-/ );
 			expect( glyphs ).toHaveLength( 1 );
-			// Only Series B (index 1) has a datum at the hovered date.
-			expect( screen.getByTestId( 'area-chart-hover-glyph-1' ) ).toBeInTheDocument();
-			expect( screen.queryByTestId( 'area-chart-hover-glyph-0' ) ).not.toBeInTheDocument();
+			expect( screen.getByTestId( 'area-chart-hover-glyph-0' ) ).toBeInTheDocument();
+			expect( screen.queryByTestId( 'area-chart-hover-glyph-1' ) ).not.toBeInTheDocument();
 		} );
 	} );
 
@@ -1055,4 +1048,44 @@ describe( 'AreaChart', () => {
 			expect( screen.getAllByRole( 'button' )[ 1 ] ).toHaveAttribute( 'aria-pressed', 'true' );
 		} );
 	} );
+
+	it( 'gives no keyboard stop to a date only a hidden series has', async () => {
+		const user = userEvent.setup();
+
+		render(
+			<GlobalChartsProvider>
+				<AreaChartUnresponsive
+					width={ 500 }
+					height={ 300 }
+					stacked={ false }
+					defaultHiddenSeries={ [ 'Series B' ] }
+					chartId="test-hidden-only-date-area"
+					data={ [
+						{
+							label: 'Series A',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+							],
+						},
+						{
+							label: 'Series B',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 5, label: 'Jan 1' },
+								{ date: new Date( '2024-01-03' ), value: 15, label: 'Jan 3' },
+							],
+						},
+					] }
+				/>
+			</GlobalChartsProvider>
+		);
+
+		screen.getByRole( 'application', { name: /area chart/i } ).focus();
+		await user.keyboard( '{ArrowRight}{ArrowRight}{ArrowRight}' );
+
+		await expect( screen.findByRole( 'tooltip' ) ).resolves.toHaveAttribute(
+			'data-testid',
+			'chart-tooltip-1'
+		);
+	} );
 } );

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

@@ -47,6 +47,8 @@ import {
 	useBarStops,
 	useOverlapSlots,
 	getSelectedSlot,
+	isSameCategory,
+	membersAt,
 } from './private';
 import { useBarColors } from './use-bar-colors';
 import { useBarLegendItems } from './use-bar-legend-items';
@@ -442,12 +444,9 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			// Find the comparison value paired with the hovered primary series (same group)
 			// at the same category, so the tooltip can show both periods at once.
 			const comparisonEntry = comparisonEntries.find( entry => entry.primaryKey === primaryKey );
-			const comparisonDatum = comparisonEntry?.series.data.find( point => {
-				const p = point as DataPointDate;
-				return nearestDatum.label != null
-					? p.label === nearestDatum.label
-					: !! nearestDatum.date && !! p.date && p.date.getTime() === nearestDatum.date.getTime();
-			} ) as DataPointDate | undefined;
+			const comparisonDatum = comparisonEntry?.series.data.find( point =>
+				isSameCategory( point as DataPointDate, nearestDatum )
+			) as DataPointDate | undefined;
 
 			// With a paired comparison value, show the category as the header and one row
 			// per period (primary + comparison).
@@ -536,6 +535,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ overlapSlots, selectedIndex ]
 	);
 
+	const selectedGroup = useMemo( () => {
+		const stop = overlapSlots || selectedIndex === undefined ? undefined : barAt( selectedIndex );
+		if ( ! stop ) {
+			return undefined;
+		}
+		return membersAt( primaryEntries, stop.datum, stop.key );
+	}, [ overlapSlots, selectedIndex, barAt, primaryEntries ] );
+
+	const selectedMembers = selectedSlot?.members ?? selectedGroup;
+
 	const selectedBar = useMemo( (): SelectedBar | undefined => {
 		if ( overlapSlots ) {
 			return selectedSlot;
@@ -783,11 +792,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											</WholeNumberTicks>
 										) }
 
-										{ withTooltips && selectedSlot && (
-											<SlotTooltipMembers
-												members={ selectedSlot.members }
-												index={ selectedSlot.index }
-											/>
+										{ withTooltips && selectedMembers && (
+											<SlotTooltipMembers members={ selectedMembers } />
 										) }
 										{ withTooltips && (
 											<XYChartTooltip
@@ -806,7 +812,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												keyboardFocusedClassName={
 													styles[ 'bar-chart__tooltip--keyboard-focused' ]
 												}
-												series={ stops.series }
 												mode="individual"
 											/>
 										) }

package/src/charts/bar-chart/private/index.ts

@@ -5,7 +5,7 @@ export { default as SlottedBarSeries } from './slotted-bar-series';
 export { BarLayer } from './bar-layer';
 export { SelectedBarRing, type SelectedBar } from './selected-bar-ring';
 export { SlotTooltipMembers, type SlotMember } from './slot-tooltip-members';
-export { useOverlapSlots, getSelectedSlot, isSameCategory } from './use-overlap-slots';
+export { useOverlapSlots, getSelectedSlot, isSameCategory, membersAt } from './use-overlap-slots';
 export { useBarStops } from './use-bar-stops';
 export { ComparisonBars } from './comparison-bars';
 export type { ComparisonSeriesEntry } from './comparison-bars';

package/src/charts/bar-chart/private/slot-tooltip-members.tsx

@@ -3,7 +3,7 @@ import { useContext, useEffect } from 'react';
 import type { DataPointDate } from '../../../types';
 
 /** A bar at the keyboard-selected category. */
-export type SlotMember = { key: string; datum: DataPointDate };
+export type SlotMember = { key: string; datum: DataPointDate; index: number };
 
 /**
  * Fills the tooltip with every bar of the keyboard-selected category, and only those.
@@ -12,18 +12,17 @@ export type SlotMember = { key: string; datum: DataPointDate };
  *
  * @param props         - Component props.
  * @param props.members - The category's bars, the keyboard stop last.
- * @param props.index   - The selected data point.
  * @return No visual content.
  */
-export function SlotTooltipMembers( { members, index }: { members: SlotMember[]; index: number } ) {
+export function SlotTooltipMembers( { members }: { members: SlotMember[] } ) {
 	const { showTooltip, updateTooltip } = useContext( TooltipContext ) ?? {};
 
 	useEffect( () => {
 		updateTooltip?.( state => ( { ...state, tooltipData: undefined } ) );
-		members.forEach( ( { key, datum } ) => showTooltip?.( { key, datum, index } ) );
+		members.forEach( member => showTooltip?.( member ) );
 		// `showTooltip` and `updateTooltip` are stable; the context object is not.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ members, index ] );
+	}, [ members ] );
 
 	return null;
 }

package/src/charts/bar-chart/private/use-bar-stops.ts

@@ -10,8 +10,6 @@ export type StopBar = { datum: DataPointDate; index: number; key: string };
 
 export type BarStops = {
 	count: number;
-	/** The series `XYChartTooltip` reads a stop's datum from. Overlap has none: `SlotTooltipMembers` fills its tooltip. */
-	series: SeriesData[];
 	/** Changes when the stops do, so keyboard navigation starts over. */
 	key: string;
 	barAt: ( stop: number ) => StopBar | undefined;
@@ -85,5 +83,5 @@ export function useBarStops(
 		[ overlapSlots, series ]
 	);
 
-	return { count, series, key, barAt, stopOf };
+	return { count, key, barAt, stopOf };
 }

package/src/charts/bar-chart/private/use-overlap-slots.ts

@@ -27,7 +27,7 @@ export type StopPosition = {
 	dataPointIndex: number;
 };
 
-export type SelectedSlot = SelectedBar & { index: number; members: SlotMember[] };
+export type SelectedSlot = SelectedBar & { members: SlotMember[] };
 
 /**
  * Whether two data points sit at the same category: the same label, or the same date.
@@ -37,7 +37,8 @@ export type SelectedSlot = SelectedBar & { index: number; members: SlotMember[]
  * @return Whether `point` is at `category`.
  */
 export function isSameCategory( point: DataPointDate, category: DataPointDate ): boolean {
-	return category.label != null
+	// An empty label falls back to the date, as the band axis's accessor does.
+	return category.label
 		? point.label === category.label
 		: !! category.date && !! point.date && point.date.getTime() === category.date.getTime();
 }
@@ -101,7 +102,7 @@ export function useOverlapSlots(
  * @return The category key.
  */
 function categoryKey( point: DataPointDate ): string {
-	return point.label != null ? `label:${ point.label }` : `date:${ point.date?.getTime() }`;
+	return point.label ? `label:${ point.label }` : `date:${ point.date?.getTime() }`;
 }
 
 /**
@@ -152,6 +153,34 @@ function getStopPositions(
 	);
 }
 
+/**
+ * Every bar at a category, each with its own data point index, the keyboard stop last.
+ *
+ * @param entries  - The visible series.
+ * @param category - The data point naming the category.
+ * @param stopKey  - The series the keyboard stop is on.
+ * @return The category's bars; the last one shown becomes the tooltip's nearest datum.
+ */
+export function membersAt(
+	entries: SeriesEntry[],
+	category: DataPointDate,
+	stopKey: string
+): SlotMember[] {
+	const members = entries.flatMap( ( { series } ) => {
+		const index = ( series.data as DataPointDate[] ).findIndex( point =>
+			isSameCategory( point, category )
+		);
+		return index === -1
+			? []
+			: [ { key: series.label, datum: series.data[ index ] as DataPointDate, index } ];
+	} );
+
+	return [
+		...members.filter( ( { key } ) => key !== stopKey ),
+		...members.filter( ( { key } ) => key === stopKey ),
+	];
+}
+
 /**
  * The slot a keyboard index selects, and every bar at its category.
  *
@@ -169,13 +198,8 @@ export function getSelectedSlot(
 		return undefined;
 	}
 
-	const { slotKey, key: stopKey, datum: category, dataPointIndex } = position;
-	const members = slots.entries.flatMap( ( { series } ) => {
-		const datum = ( series.data as DataPointDate[] ).find( point =>
-			isSameCategory( point, category )
-		);
-		return datum ? [ { key: series.label, datum } ] : [];
-	} );
+	const { slotKey, key: stopKey, datum: category } = position;
+	const members = membersAt( slots.entries, category, stopKey );
 	const slotBars = members.filter(
 		( { key, datum } ) => isBarRendered( datum ) && slots.slotOf( key ) === slotKey
 	);
@@ -184,11 +208,6 @@ export function getSelectedSlot(
 		data: slotBars.map( ( { datum } ) => datum ),
 		slotKey,
 		thickness: Math.max( ...slotBars.map( ( { key } ) => slots.thicknessOf( key ) ) ),
-		index: dataPointIndex,
-		// The stop goes last: the last bar shown becomes the tooltip's nearest datum.
-		members: [
-			...members.filter( ( { key } ) => key !== stopKey ),
-			...members.filter( ( { key } ) => key === stopKey ),
-		],
+		members,
 	};
 }

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

@@ -17,6 +17,7 @@ import { useBarChartOptions } from '../private';
 import { useBarColors } from '../use-bar-colors';
 import type { GlobalChartsContextValue } from '../../../providers/chart-context/types';
 import type { DataPointDate, SeriesData } from '../../../types';
+import type { RenderTooltipParams } from '../../../visx/types';
 
 // Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
@@ -2025,6 +2026,39 @@ describe( 'BarChart', () => {
 				expect( tooltip ).toHaveTextContent( 'Previous period: 15' );
 			} );
 
+			test( 'pairs the comparison value by date when the bars have empty labels', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: true,
+					data: [
+						{
+							label: 'This period',
+							group: 'views',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 10, label: '' },
+								{ date: new Date( '2024-01-02' ), value: 20, label: '' },
+							],
+						},
+						{
+							label: 'Previous period',
+							group: 'views',
+							options: { type: 'comparison' as const },
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 15, label: '' },
+								{ date: new Date( '2024-01-02' ), value: 25, label: '' },
+							],
+						},
+					],
+				} );
+
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
+				await user.keyboard( '{ArrowRight}{ArrowRight}' );
+
+				const tooltip = screen.getByTestId( 'chart-tooltip-1' );
+				expect( tooltip ).toHaveTextContent( 'This period: 20' );
+				expect( tooltip ).toHaveTextContent( 'Previous period: 25' );
+			} );
+
 			test( 'keyboard navigation past the first slot stays on the primary bar, not the comparison series', async () => {
 				const user = userEvent.setup();
 				renderWithTheme( {
@@ -3554,6 +3588,87 @@ describe( 'BarChart', () => {
 			expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
 		} );
 
+		const labelledViews = [
+			{ label: 'Apr', value: 29 },
+			{ label: 'May', value: 19 },
+		];
+		const april = new Date( '2025-04-01T00:00:00Z' );
+		const may = new Date( '2025-05-01T00:00:00Z' );
+
+		it.each( [
+			{
+				name: 'aligned series',
+				views: labelledViews,
+				visitors: [
+					{ label: 'Apr', value: 112 },
+					{ label: 'May', value: 80 },
+				],
+				presses: 3,
+				rows: [ 'Views=19@1', 'Visitors=80@1' ],
+				nearest: 'Views',
+			},
+			{
+				name: 'ragged series',
+				views: labelledViews,
+				visitors: [ { label: 'May', value: 80 } ],
+				presses: 2,
+				rows: [ 'Views=19@1', 'Visitors=80@0' ],
+				nearest: 'Visitors',
+			},
+			{
+				name: 'dated points with empty labels',
+				views: [
+					{ date: april, label: '', value: 29 },
+					{ date: may, label: '', value: 19 },
+				],
+				visitors: [
+					{ date: april, label: '', value: 112 },
+					{ date: may, label: '', value: 80 },
+				],
+				presses: 3,
+				rows: [ 'Views=19@1', 'Visitors=80@1' ],
+				nearest: 'Views',
+			},
+		] )(
+			'gives the keyboard tooltip only the bars at the selected category: $name',
+			async ( { views, visitors, presses, rows, nearest } ) => {
+				const user = userEvent.setup();
+				const renderTooltip = ( { tooltipData }: RenderTooltipParams< DataPointDate > ) => (
+					<div>
+						<span data-testid="nearest">{ tooltipData?.nearestDatum?.key }</span>
+						{ Object.entries( tooltipData?.datumByKey ?? {} ).map(
+							( [ key, { datum, index } ] ) => (
+								<span
+									key={ key }
+									data-testid="row"
+								>{ `${ key }=${ datum.value }@${ index }` }</span>
+							)
+						) }
+					</div>
+				);
+
+				renderWithTheme( {
+					withTooltips: true,
+					renderTooltip,
+					data: [
+						{ label: 'Views', data: views, options: {} },
+						{ label: 'Visitors', data: visitors, options: {} },
+					],
+				} );
+
+				screen.getByRole( 'application', { name: /bar chart/i } ).focus();
+				for ( let i = 0; i < presses; i++ ) {
+					await user.keyboard( '{ArrowRight}' );
+				}
+
+				expect( screen.getAllByTestId( 'row' ).map( row => row.textContent ) ).toEqual(
+					expect.arrayContaining( rows )
+				);
+				expect( screen.getAllByTestId( 'row' ) ).toHaveLength( rows.length );
+				expect( screen.getByTestId( 'nearest' ) ).toHaveTextContent( nearest );
+			}
+		);
+
 		it( 'stops at the last visible slot on a standard chart', async () => {
 			const user = userEvent.setup();
 

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -52,13 +52,28 @@
 	height: 100%;
 
 	&--animated {
-		transition:
-			opacity var(--wpds-motion-duration-lg)
-			var(--wpds-motion-easing-subtle);
+
+		.step-text,
+		.funnel-bar,
+		.bar-container {
+			transition:
+				opacity var(--wpds-motion-duration-lg) var(--wpds-motion-easing-subtle),
+				background-color var(--wpds-motion-duration-lg) var(--wpds-motion-easing-subtle);
+		}
 	}
 
+	// Dim the contents, not the step: opacity on an ancestor would also fade
+	// the bar's focus ring.
 	&--blurred {
-		opacity: 0.3;
+
+		.step-text,
+		.funnel-bar {
+			opacity: 0.3;
+		}
+
+		.bar-container {
+			background-color: color-mix(in sRGB, var(--a8c-charts-color-surface-secondary) 30%, transparent);
+		}
 	}
 }
 
@@ -119,20 +134,18 @@
 	}
 }
 
-.tooltip-title {
+.tooltip-title,
+.tooltip-label,
+.tooltip-value {
 	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-sm);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-default);
-	line-height: var(--wpds-typography-line-height-xs);
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
-.tooltip-content {
-	color: var(--a8c-charts-color-label);
-	font-size: var(--wpds-typography-font-size-md);
-	font-style: normal;
+.tooltip-value {
 	font-weight: var(--wpds-typography-font-weight-emphasis);
-	line-height: var(--wpds-typography-line-height-sm);
 }
 
 .empty-state {