@automattic/charts 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.6.0",
+	"version": "1.7.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -65,23 +65,23 @@
 	"dependencies": {
 		"@automattic/number-formatters": "^1.2.4",
 		"@babel/runtime": "7.29.7",
-		"@react-spring/web": "9.7.5",
-		"@visx/annotation": "^3.12.0",
-		"@visx/axis": "^3.12.0",
-		"@visx/curve": "^3.12.0",
-		"@visx/event": "^3.12.0",
-		"@visx/gradient": "^3.12.0",
-		"@visx/grid": "^3.12.0",
-		"@visx/group": "^3.12.0",
-		"@visx/legend": "^3.12.0",
-		"@visx/pattern": "^3.12.0",
-		"@visx/responsive": "^3.12.0",
-		"@visx/scale": "^3.12.0",
-		"@visx/shape": "^3.12.0",
-		"@visx/text": "^3.12.0",
-		"@visx/tooltip": "^3.12.0",
-		"@visx/vendor": "^3.12.0",
-		"@visx/xychart": "^3.12.0",
+		"@react-spring/web": "10.1.1",
+		"@visx/annotation": "^4.0.0",
+		"@visx/axis": "^4.0.0",
+		"@visx/curve": "^4.0.0",
+		"@visx/event": "^4.0.0",
+		"@visx/gradient": "^4.0.0",
+		"@visx/grid": "^4.0.0",
+		"@visx/group": "^4.0.0",
+		"@visx/legend": "^4.0.0",
+		"@visx/pattern": "^4.0.0",
+		"@visx/responsive": "^4.0.0",
+		"@visx/scale": "^4.0.0",
+		"@visx/shape": "^4.0.0",
+		"@visx/text": "^4.0.0",
+		"@visx/tooltip": "^4.0.0",
+		"@visx/vendor": "^4.0.0",
+		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
 		"@wordpress/icons": "^13.0.0",
 		"@wordpress/theme": "0.15.1",
@@ -96,6 +96,7 @@
 	},
 	"devDependencies": {
 		"@automattic/jetpack-webpack-config": "workspace:*",
+		"@babel/core": "^7.29.7",
 		"@storybook/addon-docs": "10.3.6",
 		"@storybook/react": "10.3.6",
 		"@testing-library/dom": "^10.0.0",
@@ -107,7 +108,7 @@
 		"@types/react": "18.3.28",
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
-		"@visx/glyph": "3.12.0",
+		"@visx/glyph": "4.0.0",
 		"@wordpress/components": "35.0.1",
 		"@wordpress/element": "8.0.1",
 		"@wordpress/private-apis": "1.48.1",
@@ -124,8 +125,8 @@
 		"typescript": "5.9.3"
 	},
 	"peerDependencies": {
-		"react": "^17.0.0 || ^18.0.0",
-		"react-dom": "^17.0.0 || ^18.0.0"
+		"react": "^18.0.0 || ^19.0.0",
+		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"engines": {
 		"node": ">=20.11.0"

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

@@ -1,6 +1,6 @@
 import type { BaseChartProps, DataPointDate, SeriesData } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { CurveType } from '../line-chart/types';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { ReactNode } from 'react';
 
 export interface AreaChartProps extends BaseChartProps< SeriesData[] > {

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

@@ -29,8 +29,8 @@ import { withResponsive } from '../private/with-responsive';
 import styles from './bar-chart.module.scss';
 import { useBarChartOptions } from './private';
 import type { BaseChartProps, DataPointDate, SeriesData, Optional } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, ReactNode, ComponentType } from 'react';
 
 export interface BarChartProps extends BaseChartProps< SeriesData[] > {

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

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
-import { Chart, type GoogleChartOptions } from 'react-google-charts';
+import { Chart } from 'react-google-charts';
 /**
  * Internal dependencies
  */
@@ -20,6 +20,8 @@ import { GeoChartProps } from './types';
 const DEFAULT_FEATURE_FILL_COLOR = '#ffffff';
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
 
+type GoogleChartOptions = Record< string, unknown >;
+
 /**
  * Renders a geographical chart using Google Charts GeoChart to visualize data.
  *

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

@@ -31,7 +31,7 @@
 	&.is-overlay {
 		grid-template: "overlap" 1fr / 1fr;
 
-		/* contains a single cell callded 'overlap' */
+		/* contains a single cell called 'overlap' */
 
 		>* {
 			grid-area: overlap;
@@ -85,6 +85,8 @@
 }
 
 .interactiveRow {
+	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
@@ -92,10 +94,13 @@
 	position: relative;
 
 	// Native button reset.
+	box-sizing: border-box;
 	appearance: none;
 	width: 100%;
 	margin: 0;
-	padding: 0;
+	// Reserve a ring's worth of space on every edge so the inset focus outline
+	// hugs the row without the bar painting over it (see :focus-visible below).
+	padding: var(--focus-ring-width);
 	border: 0;
 	background: none;
 	color: inherit;
@@ -103,14 +108,15 @@
 	text-align: inherit;
 	cursor: pointer;
 
-	// On hover/focus the bar dims and its inline-end edge pulls back by a fixed
-	// amount while the value/delta slides toward the inline start by the same
-	// amount, clearing room for the chevron revealed at the inline-end edge.
-	// Because both move by the same fixed pixels (not a percentage scale), the
-	// bar↔value gap stays identical at rest and on hover for every row. The bar
-	// width (set in leaderboard-chart.tsx) is a grid item aligned to the inline
-	// start, so its inset mirrors automatically in RTL; the value slide is given
-	// an RTL override below. No row background — the bar carries the state.
+	// On hover/focus the bar dims and its inline-end edge pulls back while the
+	// value/delta slides toward the inline start to clear room for the chevron
+	// revealed at the inline-end edge. The value always slides the full inset
+	// (it must clear the chevron), but the bar pulls back in proportion to its
+	// length (see getBarWidth in leaderboard-chart.tsx): the full-length bar —
+	// the one that reaches the value — pulls back the whole inset to keep its
+	// gap, while shorter bars move proportionally less, down to ~0. The bar is
+	// a grid item aligned to the inline start, so its inset mirrors in RTL; the
+	// value slide is given an RTL override below. No row background.
 	.bar {
 		transition: opacity 0.15s ease, width 0.15s ease;
 	}
@@ -122,8 +128,8 @@
 	&:hover,
 	&:focus-visible {
 
-		// Fixed reserve for the chevron — shared by the bar width inset
-		// (see leaderboard-chart.tsx) and the value slide so their gap is constant.
+		// 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.
 		--a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
 
 		.bar {
@@ -146,8 +152,15 @@
 	}
 
 	&:focus-visible {
-		outline: 2px solid var(--wpds-color-fg-interactive-brand, var(--wp-admin-theme-color, #3858e9));
-		outline-offset: -2px;
+		border-radius: var(--wpds-border-radius-sm, 2px);
+		outline:
+			var(--focus-ring-width) solid
+			var(--wpds-color-stroke-focus-brand, var(--wp-admin-theme-color, #3858e9));
+		// Inset by its own width so the outer edge hugs the row boundary: the
+		// outline then sits in the row's padding (also a ring width), clear of the
+		// bar, and stays inside the overflow:auto container that would clip an
+		// outset ring.
+		outline-offset: calc(-1 * var(--focus-ring-width));
 	}
 }
 

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

@@ -54,16 +54,18 @@ const defaultDeltaFormatter = ( value: number ): string => {
 
 /**
  * Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
- * so interactive rows can pull the bar's right edge back by a fixed pixel amount
- * on hover — instead of a percentage scale — keeping the bar↔value gap constant.
+ * on hover, scaled by the bar's share so the pull-back is proportional to its
+ * length: the full-length (100%) bar — the one that reaches the value — pulls
+ * back the whole inset to keep its gap with the value, while shorter bars pull
+ * back proportionally less, down to ~0 for a very short bar.
  *
  * @param share - The bar's share of the row width, as a percentage.
  * @return A CSS width value.
  */
 const getBarWidth = ( share: number ): string =>
-	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px))`;
+	`calc(${ share }% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${ share } / 100)`;
 
-const BarLabel = ( { label }: { label: string | JSX.Element } ) => (
+const BarLabel = ( { label }: { label: LeaderboardEntry[ 'label' ] } ) => (
 	<>{ typeof label === 'string' ? <Text className={ styles.label }>{ label }</Text> : label }</>
 );
 
@@ -376,6 +378,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 											type="button"
 											className={ styles.interactiveRow }
 											onClick={ entry.onClick }
+											aria-label={ entry.ariaLabel }
 										>
 											{ rowCells }
 											<Icon className={ styles.chevron } icon={ chevronRight } size={ 24 } />

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

@@ -1,4 +1,5 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import LeaderboardChart from '../leaderboard-chart';
 import type { LeaderboardEntry } from '../../../types';
 
@@ -375,20 +376,66 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByRole( 'button' ).tagName ).toBe( 'BUTTON' );
 		} );
 
-		it( 'calls onClick when the row is clicked', () => {
+		it( 'calls onClick when the row is clicked', async () => {
+			const user = userEvent.setup();
 			const onClick = jest.fn();
 			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
-			// eslint-disable-next-line testing-library/prefer-user-event
-			fireEvent.click( screen.getByRole( 'button' ) );
+			await user.click( screen.getByRole( 'button' ) );
 			expect( onClick ).toHaveBeenCalledTimes( 1 );
 		} );
 
+		it( 'activates onClick via the keyboard (Enter and Space)', async () => {
+			const user = userEvent.setup();
+			const onClick = jest.fn();
+			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick } ] } /> );
+
+			await user.tab();
+			expect( screen.getByRole( 'button' ) ).toHaveFocus();
+
+			await user.keyboard( '[Enter]' );
+			await user.keyboard( '[Space]' );
+			expect( onClick ).toHaveBeenCalledTimes( 2 );
+		} );
+
 		it( 'gives the interactive row an accessible name from the label and value', () => {
 			render( <LeaderboardChart data={ [ { ...mockData[ 0 ], onClick: jest.fn() } ] } /> );
 			// mockData[0] label is 'Direct', currentValue 12500 → '12.5K'
 			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /Direct.*12\.5K/ );
 		} );
 
+		it( 'derives the accessible name from an image label via its alt text', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <img src="https://example.com/flag.svg" alt="United States" />,
+							onClick: jest.fn(),
+						},
+					] }
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName( /United States.*12\.5K/ );
+		} );
+
+		it( 'uses ariaLabel as the accessible name when provided', () => {
+			render(
+				<LeaderboardChart
+					data={ [
+						{
+							...mockData[ 0 ],
+							label: <img src="https://example.com/flag.svg" alt="" />,
+							ariaLabel: 'United States: 12.5K visitors',
+							onClick: jest.fn(),
+						},
+					] }
+				/>
+			);
+			expect( screen.getByRole( 'button' ) ).toHaveAccessibleName(
+				'United States: 12.5K visitors'
+			);
+		} );
+
 		it( 'does not render a button for entries without onClick', () => {
 			render( <LeaderboardChart data={ [ mockData[ 0 ] ] } /> );
 			expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();

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

@@ -42,10 +42,10 @@ import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
 import type { RenderLineGlyphProps, LineChartProps, TooltipDatum } from './types';
 import type { DataPoint, DataPointDate, SeriesData, Optional } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { TickFormatter } from '@visx/axis';
 import type { GlyphProps } from '@visx/xychart';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { FC, Ref } from 'react';
 
 const defaultRenderGlyph = < Datum extends object >( props: RenderLineGlyphProps< Datum > ) => {

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

@@ -1,5 +1,4 @@
 import { __ } from '@wordpress/i18n';
-import { Icon, close } from '@wordpress/icons';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useEffect, useId, useRef, useState } from 'react';
@@ -10,6 +9,23 @@ import type { FC } from 'react';
 
 export const POPOVER_BUTTON_SIZE = 44;
 
+const CloseIcon = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<path d="M6 6l12 12M18 6L6 18" />
+	</svg>
+);
+
 interface LineChartAnnotationLabelWithPopoverProps {
 	title: string;
 	subtitle?: string;
@@ -101,7 +117,7 @@ const LineChartAnnotationLabelWithPopover: FC< LineChartAnnotationLabelWithPopov
 						className={ styles[ 'line-chart__annotation-label-popover-close-button' ] }
 						aria-label={ __( 'Close', 'jetpack-charts' ) }
 					>
-						<Icon icon={ close } size={ 16 } />
+						<CloseIcon />
 					</button>
 				</Stack>
 			</div>

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

@@ -15,7 +15,7 @@ import LineChartAnnotationLabelWithPopover, {
 	POPOVER_BUTTON_SIZE,
 } from './line-chart-annotation-label-popover';
 import type { LineChartAnnotationProps } from '../types';
-import type { LabelProps } from '@visx/annotation/lib/components/Label';
+import type { LabelProps } from '@visx/annotation';
 import type { TextProps } from '@visx/text';
 import type { FC } from 'react';
 

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

@@ -5,8 +5,8 @@ import type {
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
+import type { RenderTooltipParams } from '../../visx/types';
 import type { GlyphProps } from '@visx/xychart';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
 import type { ReactNode, SVGProps, FC } from 'react';
 
 export type LineChartAnnotationProps = {

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

@@ -37,7 +37,7 @@ import type {
 } from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { ResponsiveConfig } from '../private/with-responsive';
-import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
+import type { PieProvidedProps } from '@visx/shape';
 import type { FC, MouseEvent, ReactNode } from 'react';
 
 /**
@@ -135,7 +135,7 @@ type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<
 	PieSemiCircleChartBaseProps & ResponsiveConfig
 >;
 
-export type ArcData = PieArcDatum< DataPointPercentageCalculated >;
+export type ArcData = PieProvidedProps< DataPointPercentageCalculated >[ 'arcs' ][ number ];
 
 /**
  * Validates the semi-circle pie chart data

package/src/charts/private/chart-layout/chart-layout.tsx

@@ -3,9 +3,8 @@ import { useEffect } from 'react';
 import { useElementSize } from '../../../hooks';
 import { renderLegendSlot } from '../chart-composition';
 import styles from './chart-layout.module.scss';
-import type { LegendPosition } from '../../../types';
+import type { GapSize, LegendPosition } from '../../../types';
 import type { LegendChild } from '../chart-composition/use-chart-children';
-import type { GapSize } from '@wordpress/theme';
 import type { CSSProperties, ReactNode } from 'react';
 
 /**

package/src/charts/private/x-zoom.tsx

@@ -5,7 +5,7 @@ import styles from './x-zoom.module.scss';
 import type { SingleChartRef } from './single-chart-context';
 import type { AxisScale } from '@visx/axis';
 import type { EventHandlerParams } from '@visx/xychart';
-import type { MutableRefObject, ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 
 const MIN_DRAG_PIXELS = 6;
 
@@ -37,7 +37,7 @@ export function useXZoom< T extends Date | number = Date >( {
 	userHandlers,
 }: {
 	enabled: boolean;
-	chartRef: MutableRefObject< SingleChartRef | null >;
+	chartRef: RefObject< SingleChartRef | null >;
 	userHandlers?: {
 		onPointerDown?: PointerHandler;
 		onPointerMove?: PointerHandler;

package/src/components/legend/hooks/use-chart-legend-items.ts

@@ -6,9 +6,13 @@ import {
 	type ElementStyles,
 } from '../../../providers';
 import { formatPercentage } from '../../../utils';
-import type { SeriesData, DataPointDate, DataPointPercentageCalculated } from '../../../types';
+import type {
+	SeriesData,
+	DataPointDate,
+	DataPointPercentageCalculated,
+	LegendShape,
+} from '../../../types';
 import type { BaseLegendItem } from '../types';
-import type { LegendShape } from '@visx/legend/lib/types';
 import type { GlyphProps } from '@visx/xychart';
 import type { ReactNode } from 'react';
 

package/src/components/legend/legend.tsx

@@ -3,8 +3,7 @@ import { SingleChartContext } from '../../charts/private/single-chart-context';
 import { GlobalChartsContext } from '../../providers';
 import { BaseLegend } from './private';
 import type { LegendProps } from './types';
-import type { ChartType } from '../../types';
-import type { LegendShape } from '@visx/legend/lib/types';
+import type { ChartType, LegendShape } from '../../types';
 
 const defaultShapeByChartType: Partial<
 	Record< ChartType, Extract< LegendShape< unknown, unknown >, string > >

package/src/components/legend/utils/label-transform-factory.ts

@@ -1,4 +1,4 @@
-import type { ItemTransformer, LabelFormatter } from '@visx/legend/lib/types';
+import type { ItemTransformer, LabelFormatter } from '@visx/legend';
 import type { AnyD3Scale, ScaleInput } from '@visx/scale';
 
 /**

package/src/components/tooltip/accessible-tooltip.tsx

@@ -1,10 +1,7 @@
 import { Tooltip, TooltipContext } from '@visx/xychart';
 import { useContext, useEffect, useCallback, useMemo } from 'react';
 import type { SeriesData, DataPointDate } from '../../types';
-import type {
-	TooltipProps as BaseTooltipProps,
-	RenderTooltipParams,
-} from '@visx/xychart/lib/components/Tooltip';
+import type { RenderTooltipParams, XyChartTooltipProps } from '../../visx/types';
 import type { ReactNode } from 'react';
 
 // Type for flattened tooltip data used in individual mode
@@ -17,7 +14,7 @@ export type FlattenedTooltipData = {
 
 // Enhanced tooltip with keyboard navigation and accessibility
 interface AccessibleTooltipProps
-	extends Omit< BaseTooltipProps< DataPointDate >, 'renderTooltip' > {
+	extends Omit< XyChartTooltipProps< DataPointDate >, 'renderTooltip' > {
 	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
 	selectedIndex?: number | undefined;
 	tooltipRef?: ( element: HTMLDivElement | null ) => void;
@@ -242,4 +239,3 @@ export const useKeyboardNavigation = ( {
 
 // Re-export the base Tooltip for backwards compatibility
 export { Tooltip };
-export type { BaseTooltipProps };

package/src/index.ts

@@ -54,6 +54,12 @@ export type {
 	ChartLegendConfig,
 	BaseChartProps,
 	GridProps,
+	GoogleDataTableColumn,
+	GoogleDataTableColumnRoleType,
+	GoogleDataTableRow,
+	LegendShape,
+	LegendShapeLabel,
+	LegendShapeRenderProps,
 } from './types';
 export type * from './visx/types';
 export type { PieChartProps, PieChartRenderTooltipParams } from './charts/pie-chart';
@@ -65,11 +71,6 @@ export type { GeoChartProps, GeoRegion, GeoResolution } from './charts/geo-chart
 export type { LegendValueDisplay, BaseLegendItem } from './components/legend';
 export type { TrendIndicatorProps, TrendDirection } from './components/trend-indicator';
 export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';
-export type {
-	GoogleDataTableColumn,
-	GoogleDataTableRow,
-	GoogleDataTableColumnRoleType,
-} from 'react-google-charts';
 
 // Re-exports from removed individual entry points
 export { useLeaderboardLegendItems } from './charts/leaderboard-chart/hooks';

package/src/providers/chart-context/themes.ts

@@ -53,7 +53,7 @@ const defaultTheme: CompleteChartTheme = {
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
-		labelSpacing: 1.5,
+		labelSpacing: 'xs',
 		deltaColors: [ '#FF8C8F', '#757575', '#1F9828' ], // [negative, neutral, positive]
 	},
 	conversionFunnelChart: {

package/src/providers/chart-context/types.ts

@@ -1,7 +1,12 @@
 import { CSSProperties, ReactNode } from 'react';
 import type { BaseLegendItem } from '../../components/legend';
-import type { ChartType, CompleteChartTheme, DataPointPercentage, SeriesData } from '../../types';
-import type { LegendShape } from '@visx/legend/lib/types';
+import type {
+	ChartType,
+	CompleteChartTheme,
+	DataPointPercentage,
+	LegendShape,
+	SeriesData,
+} from '../../types';
 import type { GlyphProps, LineStyles } from '@visx/xychart';
 
 export interface ChartRegistration {