@automattic/charts 1.7.0 → 1.8.0

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

@@ -0,0 +1,183 @@
+import { render, screen } from '@testing-library/react';
+import { scaleBand, scaleLinear } from '@visx/scale';
+import { DataContext } from '@visx/xychart';
+import { ComparisonBars } from '../comparison-bars';
+import type { DataPointDate, SeriesData } from '../../../../types';
+import type { ComparisonSeriesEntry } from '../comparison-bars';
+
+// Build the band scale over two categories (matches how BarGroup sets it up)
+const categories = [ 'Jan', 'Feb' ];
+const xScale = scaleBand( {
+	domain: categories,
+	range: [ 0, 200 ],
+	padding: 0.1,
+} );
+
+// Simple linear value scale: domain 0..100 -> range 200..0 (SVG coords, descending)
+const yScale = scaleLinear( { domain: [ 0, 100 ], range: [ 200, 0 ] } );
+
+// The primaryKeys in this test
+const primaryKeys = [ 'current' ];
+const groupPadding = 0.1;
+
+// Build the same groupScale so tests can compute expected width
+const groupScale = scaleBand( {
+	domain: primaryKeys,
+	range: [ 0, xScale.bandwidth() ],
+	padding: groupPadding,
+} );
+
+// Minimal DataContext value
+const dataContextValue = {
+	xScale: xScale as never,
+	yScale: yScale as never,
+	horizontal: false,
+	// Other DataContext fields the component doesn't use
+	width: 200,
+	height: 200,
+	margin: { top: 0, right: 0, bottom: 0, left: 0 },
+	dataRegistry: {} as never,
+	registerData: () => undefined,
+	unregisterData: () => undefined,
+	setDimensions: () => undefined,
+	innerWidth: 200,
+	innerHeight: 200,
+	theme: {} as never,
+	colorScale: {} as never,
+};
+
+const seriesData: SeriesData = {
+	label: 'Comparison',
+	data: [
+		{ label: 'Jan', value: 40 } as DataPointDate,
+		{ label: 'Feb', value: 70 } as DataPointDate,
+	] as DataPointDate[],
+	options: { type: 'comparison' },
+};
+
+const comparisonEntries: ComparisonSeriesEntry[] = [
+	{ series: seriesData, index: 0, primaryKey: 'current', primaryIndex: 0 },
+];
+
+const getElementStyles = () => ( {
+	color: '#f00',
+	barStyles: { widthFactor: 1.5, opacity: 0.5 },
+	lineStyles: {} as never,
+	glyph: undefined as never,
+	shapeStyles: {} as never,
+} );
+
+const resolveFill = () => '#f00';
+
+const xAccessor = ( d: DataPointDate ) => d.label;
+const yAccessor = ( d: DataPointDate ) => d.value ?? undefined;
+
+describe( 'ComparisonBars', () => {
+	it( 'renders two shadow rects for two data points', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const rects = screen.getAllByTestId( /^bar-chart-comparison-0-/ );
+		expect( rects ).toHaveLength( 2 );
+		expect( rects[ 0 ] ).toHaveAttribute( 'fill', '#f00' );
+		expect( rects[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+		// width == widthFactor (1.5) * groupScale.bandwidth()
+		expect( Number( rects[ 0 ].getAttribute( 'width' ) ) ).toBeCloseTo(
+			1.5 * groupScale.bandwidth()
+		);
+	} );
+
+	it( 'wraps rects in a g with correct class and pointerEvents', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const g = screen.getByTestId( 'bar-chart-comparison-bars' );
+		expect( g ).toHaveClass( 'bar-chart__comparison-bars', { exact: true } );
+		expect( g ).toHaveAttribute( 'pointer-events', 'none' );
+	} );
+
+	it( 'shadow rect is horizontally centered on the primary bar slot at widthFactor × slot width', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ primaryKeys }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		const rects = screen.getAllByTestId( /^bar-chart-comparison-0-/ );
+		const rect = rects[ 0 ]; // 'Jan' datum
+
+		const slotThickness = groupScale.bandwidth();
+		const expectedWidth = 1.5 * slotThickness; // shadow = widthFactor × slot width
+		// Shadow x = bandStart + slotOffset + slotThickness/2 - shadowWidth/2
+		const bandStart = Number( xScale( 'Jan' ) );
+		const slotOffset = Number( groupScale( 'current' ) );
+		const expectedX = bandStart + slotOffset + slotThickness / 2 - expectedWidth / 2;
+		const expectedCenterX = expectedX + expectedWidth / 2;
+		const primarySlotCenterX = bandStart + slotOffset + slotThickness / 2;
+
+		expect( Number( rect.getAttribute( 'width' ) ) ).toBeCloseTo( expectedWidth );
+		expect( Number( rect.getAttribute( 'x' ) ) ).toBeCloseTo( expectedX );
+		// Center of shadow matches center of primary slot
+		expect( expectedCenterX ).toBeCloseTo( primarySlotCenterX );
+	} );
+
+	it( 'renders nothing when primaryKeys is empty', () => {
+		render(
+			<svg>
+				<DataContext.Provider value={ dataContextValue }>
+					<ComparisonBars
+						comparisonEntries={ comparisonEntries }
+						primaryKeys={ [] }
+						groupPadding={ groupPadding }
+						horizontal={ false }
+						xAccessor={ xAccessor }
+						yAccessor={ yAccessor }
+						getElementStyles={ getElementStyles }
+						resolveFill={ resolveFill }
+					/>
+				</DataContext.Provider>
+			</svg>
+		);
+
+		expect( screen.queryByTestId( 'bar-chart-comparison-bars' ) ).not.toBeInTheDocument();
+	} );
+} );

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

@@ -5,6 +5,11 @@ import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
 import type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';
 import type { TickFormatter } from '@visx/axis';
 
+/** Outer padding of the category band scale (space at the chart edges). */
+export const BASE_BAND_PADDING = 0.2;
+/** Inner padding of the category band scale (the base gap between ticks). */
+export const BASE_BAND_PADDING_INNER = 0.1;
+
 const formatDateTick = ( timestamp: number ) => {
 	const date = new Date( timestamp );
 	return date.toLocaleDateString( undefined, {
@@ -39,8 +44,8 @@ export function useBarChartOptions(
 	const defaultOptions = useMemo( () => {
 		const bandScale = {
 			type: 'band' as const,
-			padding: 0.2,
-			paddingInner: 0.1,
+			padding: BASE_BAND_PADDING,
+			paddingInner: BASE_BAND_PADDING_INNER,
 		};
 		const linearScale = {
 			type: 'linear' as const,
@@ -97,8 +102,44 @@ export function useBarChartOptions(
 			yScale: baseYScale,
 		} = defaultOptions[ orientationKey ];
 
-		const xScale = { ...baseXScale, ...( options.xScale || {} ) };
-		const yScale = { ...baseYScale, ...( options.yScale || {} ) };
+		// When comparison series are present, visx only sees primary BarSeries and computes
+		// a too-narrow domain. Compute an explicit domain spanning all series so comparison
+		// shadows aren't clipped. Skip when the user has already provided an explicit domain.
+		let valueScaleDomainOverride: { domain?: [ number, number ] } = {};
+		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
+		if ( hasComparisonSeries ) {
+			const valueAxisIsY = ! horizontal;
+			const userDomain = valueAxisIsY ? options.yScale?.domain : options.xScale?.domain;
+			if ( ! userDomain ) {
+				const allValues: number[] = [];
+				data.forEach( series => {
+					series.data.forEach( d => {
+						const enhanced = d as { visualValue?: number };
+						const v =
+							enhanced.visualValue !== undefined ? enhanced.visualValue : ( d.value as number );
+						if ( typeof v === 'number' && Number.isFinite( v ) ) {
+							allValues.push( v );
+						}
+					} );
+				} );
+				if ( allValues.length > 0 ) {
+					valueScaleDomainOverride = {
+						domain: [ Math.min( ...allValues ), Math.max( ...allValues ) ],
+					};
+				}
+			}
+		}
+
+		const xScale = {
+			...baseXScale,
+			...( options.xScale || {} ),
+			...( horizontal ? valueScaleDomainOverride : {} ),
+		};
+		const yScale = {
+			...baseYScale,
+			...( options.yScale || {} ),
+			...( ! horizontal ? valueScaleDomainOverride : {} ),
+		};
 		const providedToolTipLabelFormatter = horizontal
 			? options.axis?.y?.tickFormat
 			: options.axis?.x?.tickFormat;
@@ -137,5 +178,5 @@ export function useBarChartOptions(
 				labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,
 			},
 		};
-	}, [ defaultOptions, options, horizontal ] );
+	}, [ defaultOptions, options, horizontal, data ] );
 }

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

@@ -1,7 +1,8 @@
-import { render, screen } from '@testing-library/react';
+import { render, renderHook, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
+import { useBarChartOptions } from '../private';
 
 // Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
@@ -233,6 +234,37 @@ describe( 'BarChart', () => {
 			// Check that no pattern definitions container is present
 			expect( screen.queryByTestId( 'bar-chart-patterns' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'comparison shadow reuses the primary bar pattern when patterns are enabled', () => {
+			renderWithTheme( {
+				withPatterns: 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 shadow = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ )[ 0 ];
+			const shadowFill = shadow.getAttribute( 'fill' );
+			// Shadow is filled with a pattern, not a solid color, and it references the PRIMARY
+			// series' pattern (index 0) rather than the comparison series' own index.
+			expect( shadowFill ).toMatch( /^url\(#bar-pattern-.+-0\)$/ );
+		} );
 	} );
 
 	describe( 'Keyboard Navigation Accessibility', () => {
@@ -346,6 +378,45 @@ describe( 'BarChart', () => {
 			} );
 		} );
 
+		describe( 'Comparison tooltip', () => {
+			test( 'tooltip shows both the primary and comparison values', async () => {
+				const user = userEvent.setup();
+				renderWithTheme( {
+					withTooltips: true,
+					data: [
+						{
+							label: 'This period',
+							group: 'views',
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 20, label: 'Jan 2' },
+							],
+						},
+						{
+							label: 'Previous period',
+							group: 'views',
+							options: { type: 'comparison' as const },
+							data: [
+								{ date: new Date( '2024-01-01' ), value: 15, label: 'Jan 1' },
+								{ date: new Date( '2024-01-02' ), value: 25, label: 'Jan 2' },
+							],
+						},
+					],
+				} );
+
+				const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+				chart.focus();
+
+				await user.keyboard( '{ArrowRight}' );
+				const tooltip = screen.getByTestId( 'chart-tooltip-0' );
+				// Both the current and previous period values are shown.
+				expect( tooltip ).toHaveTextContent( 'This period' );
+				expect( tooltip ).toHaveTextContent( '10' );
+				expect( tooltip ).toHaveTextContent( 'Previous period' );
+				expect( tooltip ).toHaveTextContent( '15' );
+			} );
+		} );
+
 		describe( 'Tab Key Navigation', () => {
 			test( 'tab key exits navigation when reaching end of data points', async () => {
 				const user = userEvent.setup();
@@ -754,6 +825,125 @@ describe( 'BarChart', () => {
 		} );
 	} );
 
+	describe( 'Comparison Series', () => {
+		it( 'renders a translucent shadow behind the primary bar for a comparison series', () => {
+			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 } width={ 400 } height={ 300 } /> );
+
+			// two comparison shadow rects (one per data point)
+			// Match individual rect testids like bar-chart-comparison-1-0 (not the group wrapper)
+			const shadows = screen.getAllByTestId( /^bar-chart-comparison-\d+-\d+$/ );
+			expect( shadows ).toHaveLength( 2 );
+			expect( shadows[ 0 ] ).toHaveAttribute( 'opacity', '0.5' );
+
+			// primary bars still render for the single primary series (visx .visx-bar)
+			// eslint-disable-next-line testing-library/no-node-access
+			const bars = document.querySelectorAll( '.visx-bar' );
+			expect( bars.length ).toBeGreaterThanOrEqual( 2 );
+		} );
+
+		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,
+			// so visx derives it from primary BarSeries only (max=100).
+			// With the fix, an explicit domain [min,150] is set on the value-axis scale config.
+			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: 150 } ],
+				},
+			];
+
+			const { result } = renderHook( () => useBarChartOptions( data, false, {} ) );
+			const yScale = result.current.yScale as { domain?: number[] };
+			// domain must be set explicitly and its max must be >= 150
+			expect( yScale.domain ).toBeDefined();
+			expect( ( yScale.domain as number[] )[ 1 ] ).toBeGreaterThanOrEqual( 150 );
+		} );
+
+		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.
+			// If comparison is counted, the 5th ArrowRight would reference a phantom series
+			// and could throw or show an undefined tooltip key.
+			const data = [
+				{
+					label: 'Series A',
+					group: 'g',
+					data: [
+						{ label: 'Jan', value: 10 },
+						{ label: 'Feb', value: 20 },
+					],
+				},
+				{
+					label: 'Series B',
+					group: 'g2',
+					data: [
+						{ label: 'Jan', value: 15 },
+						{ label: 'Feb', value: 25 },
+					],
+				},
+				{
+					label: 'Last year',
+					group: 'g',
+					options: { type: 'comparison' as const },
+					data: [
+						{ label: 'Jan', value: 8 },
+						{ label: 'Feb', value: 18 },
+					],
+				},
+			];
+			render(
+				<GlobalChartsProvider>
+					<BarChart data={ data } width={ 400 } height={ 300 } withTooltips />
+				</GlobalChartsProvider>
+			);
+
+			const chart = screen.getByRole( 'grid', { name: /bar chart/i } );
+			chart.focus();
+
+			// Navigate through all 4 primary slots (2 series × 2 data points)
+			for ( let i = 0; i < 4; i++ ) {
+				await user.keyboard( '{ArrowRight}' );
+			}
+
+			// If totalPoints was 6 (counted comparison), tooltip 4 would still show.
+			// With correct totalPoints=4, navigation wraps and tooltip 0 is shown again,
+			// not phantom slot 4 (which would reference data[2], a comparison series).
+			// Either way, there must be no crash and navigation must stay in bounds.
+			const tooltips = screen.queryAllByTestId( /^chart-tooltip-/ );
+			expect( tooltips ).toHaveLength( 1 );
+			// The visible tooltip must belong to a primary series
+			const tooltipText = tooltips[ 0 ].textContent ?? '';
+			expect( [ 'Series A', 'Series B' ].some( k => tooltipText.includes( k ) ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'Interactive Legend', () => {
 		it( 'filters series when interactive legend is enabled and series is toggled', async () => {
 			const user = userEvent.setup();

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { FC, useContext, useMemo } from 'react';
 import { Chart } from 'react-google-charts';
@@ -13,6 +12,7 @@ import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } fro
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { sanitizeHtml } from '../../utils/sanitize-html';
+import { Center } from '../private/center';
 import { withResponsive } from '../private/with-responsive';
 import styles from './geo-chart.module.scss';
 import { GeoChartProps } from './types';
@@ -60,15 +60,13 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 
 	// Render loading placeholder
 	const loadingPlaceholder = (
-		<Stack
-			align="center"
-			justify="center"
+		<Center
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart-loading"
 			style={ { width, height } }
 		>
 			{ renderPlaceholder ? renderPlaceholder() : __( 'Loading map', 'jetpack-charts' ) }
-		</Stack>
+		</Center>
 	);
 
 	// Google charts doesn't accept CSS variables, so we need to convert them to hex colors
@@ -149,9 +147,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	);
 
 	return (
-		<Stack
-			align="center"
-			justify="center"
+		<Center
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
 			style={ { width, height, backgroundColor } }
@@ -164,7 +160,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 				options={ options }
 				loader={ loadingPlaceholder }
 			/>
-		</Stack>
+		</Center>
 	);
 };
 

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

@@ -7,8 +7,4 @@
 		width: 100%;
 	}
 
-	&__centering {
-		width: 100%;
-		height: 100%;
-	}
 }

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

@@ -2,7 +2,6 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -22,6 +21,7 @@ import {
 } from '../../providers';
 import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
+import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
@@ -358,12 +358,7 @@ const PieChartInternal = ( {
 						: 0;
 
 					return (
-						<Stack
-							ref={ containerRef }
-							align="center"
-							justify="center"
-							className={ styles[ 'pie-chart__centering' ] }
-						>
+						<Center ref={ containerRef }>
 							<svg
 								viewBox={ `0 0 ${ width } ${ height }` }
 								preserveAspectRatio="xMidYMid meet"
@@ -493,7 +488,7 @@ const PieChartInternal = ( {
 									{ ! allSegmentsHidden && svgChildren }
 								</Group>
 							</svg>
-						</Stack>
+						</Center>
 					);
 				} }
 			</ChartLayout>

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -5,11 +5,6 @@
 		width: 100%;
 	}
 
-	&__centering {
-		width: 100%;
-		height: 100%;
-	}
-
 	.label {
 		font-weight: var(--wpds-typography-font-weight-medium, 499);
 		font-size: var(--wpds-typography-font-size-lg, 16px);

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

@@ -3,7 +3,6 @@ import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -21,6 +20,7 @@ import {
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
+import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation';
@@ -397,12 +397,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					const innerRadius = radius * ( 1 - thickness );
 
 					return (
-						<Stack
-							ref={ containerRef }
-							align="center"
-							justify="center"
-							className={ styles[ 'pie-semi-circle-chart__centering' ] }
-						>
+						<Center ref={ containerRef }>
 							<svg
 								width={ width }
 								height={ height }
@@ -491,7 +486,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 									) }
 								</Group>
 							</svg>
-						</Stack>
+						</Center>
 					);
 				} }
 			</ChartLayout>

package/src/charts/private/center/center.module.scss

@@ -0,0 +1,4 @@
+.center {
+	width: 100%;
+	height: 100%;
+}

package/src/charts/private/center/center.tsx

@@ -0,0 +1,33 @@
+import { Stack } from '@wordpress/ui';
+import clsx from 'clsx';
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import styles from './center.module.scss';
+
+export type CenterProps = ComponentPropsWithoutRef< typeof Stack >;
+
+/**
+ * Centers its children on both axes and fills its parent.
+ *
+ * A thin wrapper around `Stack` with `align="center"` and `justify="center"`
+ * defaults (both overridable) plus `width: 100%; height: 100%`. Reads more
+ * honestly than a `Stack` with both axes centered, and lets call sites drop
+ * ad-hoc `*__centering` classes. Forwards its ref and spreads remaining props
+ * onto the underlying `Stack`.
+ *
+ * @param props - Stack props; `align`/`justify` default to `"center"`.
+ * @param ref   - Forwarded to the underlying element.
+ * @return The centered layout element.
+ */
+export const Center = forwardRef< HTMLDivElement, CenterProps >(
+	( { align = 'center', justify = 'center', className, ...props }, ref ) => (
+		<Stack
+			ref={ ref }
+			align={ align }
+			justify={ justify }
+			className={ clsx( styles.center, className ) }
+			{ ...props }
+		/>
+	)
+);
+
+Center.displayName = 'Center';

package/src/charts/private/center/index.ts

@@ -0,0 +1,2 @@
+export { Center } from './center';
+export type { CenterProps } from './center';