@automattic/charts 1.8.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.8.0",
+	"version": "1.8.1",
 	"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.4",
+		"@automattic/number-formatters": "^1.2.5",
 		"@babel/runtime": "7.29.7",
 		"@react-spring/web": "10.1.1",
 		"@visx/annotation": "^4.0.0",

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

@@ -1,7 +1,7 @@
 import { formatNumber } from '@automattic/number-formatters';
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';
 import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -83,6 +83,19 @@ const validateData = ( data: SeriesData[] ) => {
 
 const getPatternId = ( chartId: string, index: number ) => `bar-pattern-${ chartId }-${ index }`;
 
+// A "label: value" tooltip row. The join is a translated format string so the
+// separator (a colon + space here) can be adapted per locale.
+const renderTooltipRow = ( label: string | undefined, value: string ) => (
+	<div className={ styles[ 'bar-chart__tooltip-row' ] }>
+		{ sprintf(
+			/* translators: 1: data series, period, or category label. 2: its formatted value. */
+			__( '%1$s: %2$s', 'jetpack-charts' ),
+			label,
+			value
+		) }
+	</div>
+);
+
 const BarChartInternal: FC< BarChartProps > = ( {
 	data,
 	chartId: providedChartId,
@@ -191,6 +204,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ primaryEntries ]
 	);
 
+	// The keyboard-navigation index space and the highlight CSS both stride over primary
+	// bars only; the accessible tooltip must use the same list, or its datum diverges from
+	// the highlighted bar once a comparison series shifts the indices.
+	const primarySeries = useMemo(
+		() => primaryEntries.map( ( { series } ) => series ),
+		[ primaryEntries ]
+	);
+
 	const comparisonEntries = useMemo( () => {
 		const primaryByGroup = new Map< string | undefined, { label: string; index: number } >(
 			primaryEntries.map( ( { series, index } ) => [
@@ -309,20 +330,11 @@ const BarChartInternal: FC< BarChartProps > = ( {
 				return (
 					<div className={ styles[ 'bar-chart__tooltip' ] }>
 						<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ categoryLabel }</div>
-						<div className={ styles[ 'bar-chart__tooltip-row' ] }>
-							<span className={ styles[ 'bar-chart__tooltip-label' ] }>{ primaryKey }:</span>
-							<span className={ styles[ 'bar-chart__tooltip-value' ] }>
-								{ formatNumber( nearestDatum.value as number ) }
-							</span>
-						</div>
-						<div className={ styles[ 'bar-chart__tooltip-row' ] }>
-							<span className={ styles[ 'bar-chart__tooltip-label' ] }>
-								{ comparisonEntry.series.label }:
-							</span>
-							<span className={ styles[ 'bar-chart__tooltip-value' ] }>
-								{ formatNumber( comparisonDatum.value as number ) }
-							</span>
-						</div>
+						{ renderTooltipRow( primaryKey, formatNumber( nearestDatum.value as number ) ) }
+						{ renderTooltipRow(
+							comparisonEntry.series.label,
+							formatNumber( comparisonDatum.value as number )
+						) }
 					</div>
 				);
 			}
@@ -330,12 +342,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			return (
 				<div className={ styles[ 'bar-chart__tooltip' ] }>
 					<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ primaryKey }</div>
-					<div className={ styles[ 'bar-chart__tooltip-row' ] }>
-						<span className={ styles[ 'bar-chart__tooltip-label' ] }>{ categoryLabel }:</span>
-						<span className={ styles[ 'bar-chart__tooltip-value' ] }>
-							{ formatNumber( nearestDatum.value as number ) }
-						</span>
-					</div>
+					{ renderTooltipRow( categoryLabel, formatNumber( nearestDatum.value as number ) ) }
 				</div>
 			);
 		},
@@ -622,7 +629,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 												keyboardFocusedClassName={
 													styles[ 'bar-chart__tooltip--keyboard-focused' ]
 												}
-												series={ data }
+												series={ primarySeries }
 												mode="individual"
 											/>
 										) }

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -146,6 +146,7 @@ export const ComparisonBars: FC< {
 		<g
 			className="bar-chart__comparison-bars"
 			pointerEvents="none"
+			aria-hidden="true"
 			data-testid="bar-chart-comparison-bars"
 		>
 			{ rects }

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

@@ -123,8 +123,11 @@ export function useBarChartOptions(
 					} );
 				} );
 				if ( allValues.length > 0 ) {
+					// Keep zero in the domain so bar length stays proportional to value — a
+					// non-zero baseline would exaggerate differences between periods. Math.max
+					// keeps zero on the far side too, so charts with negative values still span 0.
 					valueScaleDomainOverride = {
-						domain: [ Math.min( ...allValues ), Math.max( ...allValues ) ],
+						domain: [ Math.min( 0, ...allValues ), Math.max( 0, ...allValues ) ],
 					};
 				}
 			}

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

@@ -322,6 +322,8 @@ describe( 'BarChart', () => {
 				await user.keyboard( '{ArrowRight}' );
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveFocus();
 				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Series A' );
+				// The category/value row joins with a space after the colon.
+				expect( screen.getByTestId( 'chart-tooltip-0' ) ).toHaveTextContent( 'Jan 1: 10' );
 				expect( screen.queryByTestId( 'chart-tooltip-1' ) ).not.toBeInTheDocument();
 
 				// Second tab should focus on the second tooltip.
@@ -409,11 +411,50 @@ describe( 'BarChart', () => {
 
 				await user.keyboard( '{ArrowRight}' );
 				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
-				// Both the current and previous period values are shown.
+				// Both periods are shown, each as "label: value" with a space after the colon.
+				expect( tooltip ).toHaveTextContent( 'This period: 10' );
+				expect( tooltip ).toHaveTextContent( 'Previous period: 15' );
+			} );
+
+			test( 'keyboard navigation past the first slot stays on the primary bar, not the comparison series', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: true,
+					data: [
+						{
+							label: 'This period',
+							group: 'views',
+							data: [
+								{ label: 'Mon', value: 10 },
+								{ label: 'Tue', value: 20 },
+							],
+						},
+						{
+							label: 'Previous period',
+							group: 'views',
+							options: { type: 'comparison' as const },
+							data: [
+								{ label: 'Mon', value: 15 },
+								{ label: 'Tue', value: 25 },
+							],
+						},
+					],
+				} );
+
+				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				chart.focus();
+
+				// Slot 0 is the first primary bar (Mon); slot 1 must be the SECOND primary
+				// bar (Tue) — not the comparison series' first bar. The keyboard index space
+				// counts only primary bars, so the tooltip must too.
+				await user.keyboard( '{ArrowRight}' );
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByTestId( 'chart-tooltip-1' );
+				expect( tooltip ).toHaveTextContent( 'Tue' );
 				expect( tooltip ).toHaveTextContent( 'This period' );
-				expect( tooltip ).toHaveTextContent( '10' );
+				expect( tooltip ).toHaveTextContent( '20' );
 				expect( tooltip ).toHaveTextContent( 'Previous period' );
-				expect( tooltip ).toHaveTextContent( '15' );
+				expect( tooltip ).toHaveTextContent( '25' );
 			} );
 		} );
 
@@ -860,6 +901,57 @@ describe( 'BarChart', () => {
 			expect( bars.length ).toBeGreaterThanOrEqual( 2 );
 		} );
 
+		it( 'hides the comparison shadow group from assistive technology', () => {
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [ { label: 'Jan', value: 100 } ],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Jan', value: 80 } ],
+				},
+			];
+			render( <BarChart data={ data } width={ 400 } height={ 300 } /> );
+
+			// The shadow is decorative: no keyboard/hover target and its value is surfaced
+			// through the tooltip, so it must not be announced as a separate element.
+			expect( screen.getByTestId( 'bar-chart-comparison-bars' ) ).toHaveAttribute(
+				'aria-hidden',
+				'true'
+			);
+		} );
+
+		it( 'renders comparison shadows in horizontal orientation', () => {
+			const data = [
+				{
+					label: 'This year',
+					group: 'views',
+					data: [
+						{ label: 'Jan', value: 100 },
+						{ label: 'Feb', value: 120 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 80 },
+						{ label: 'Feb', value: 140 },
+					],
+				},
+			];
+			render( <BarChart data={ data } orientation="horizontal" width={ 400 } height={ 300 } /> );
+
+			const shadows = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ );
+			expect( shadows ).toHaveLength( 2 );
+			expect( shadows[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+		} );
+
 		it( 'expands value-axis domain to include comparison values exceeding the primary max', () => {
 			// Comparison value 150 exceeds primary max 100.
 			// Without domain expansion the value-axis scale config has no explicit domain,
@@ -886,6 +978,52 @@ describe( 'BarChart', () => {
 			expect( ( yScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 150 );
 		} );
 
+		it( 'keeps the value-axis baseline at zero so comparison bars encode magnitude truthfully', () => {
+			// All values are well above zero; the domain must still start at 0 so a bar's
+			// length stays proportional to its value (a non-zero baseline exaggerates differences).
+			const data = [
+				{
+					label: 'This period',
+					group: 'views',
+					data: [ { label: 'Mon', value: 420 } ],
+				},
+				{
+					label: 'Previous period',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 510 } ],
+				},
+			];
+
+			const { result } = renderHook( () => useBarChartOptions( data, false, {} ) );
+			const yScale = result.current.yScale as { domain?: number[] };
+			expect( yScale.domain ).toBeDefined();
+			expect( ( yScale.domain as number[] )[ 0 ] ).toBe( 0 );
+		} );
+
+		it( 'zero-bases the value-axis domain in horizontal comparison charts', () => {
+			const data = [
+				{
+					label: 'This period',
+					group: 'views',
+					data: [ { label: 'Mon', value: 420 } ],
+				},
+				{
+					label: 'Previous period',
+					group: 'views',
+					options: { type: 'comparison' as const },
+					data: [ { label: 'Mon', value: 510 } ],
+				},
+			];
+
+			// In horizontal charts the value axis is x.
+			const { result } = renderHook( () => useBarChartOptions( data, true, {} ) );
+			const xScale = result.current.xScale as { domain?: number[] };
+			expect( xScale.domain ).toBeDefined();
+			expect( ( xScale.domain as number[] )[ 0 ] ).toBe( 0 );
+			expect( ( xScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 510 );
+		} );
+
 		it( 'counts only primary series for keyboard navigation when a comparison series is present', async () => {
 			const user = userEvent.setup();
 			// 2 primary + 1 comparison. totalPoints should be 2*2=4, not 3*2=6.