@automattic/charts 0.58.0 → 0.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.58.0",
+	"version": "0.59.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -22,79 +22,7 @@
 			"import": "./dist/index.js",
 			"require": "./dist/index.cjs"
 		},
-		"./bar-chart": {
-			"import": "./dist/charts/bar-chart/index.js",
-			"require": "./dist/charts/bar-chart/index.cjs"
-		},
-		"./bar-chart/style.css": "./dist/charts/bar-chart/index.css",
-		"./bar-list-chart": {
-			"import": "./dist/charts/bar-list-chart/index.js",
-			"require": "./dist/charts/bar-list-chart/index.cjs"
-		},
-		"./bar-list-chart/style.css": "./dist/charts/bar-list-chart/index.css",
-		"./conversion-funnel-chart": {
-			"import": "./dist/charts/conversion-funnel-chart/index.js",
-			"require": "./dist/charts/conversion-funnel-chart/index.cjs"
-		},
-		"./conversion-funnel-chart/style.css": "./dist/charts/conversion-funnel-chart/index.css",
-		"./geo-chart": {
-			"import": "./dist/charts/geo-chart/index.js",
-			"require": "./dist/charts/geo-chart/index.cjs"
-		},
-		"./geo-chart/style.css": "./dist/charts/geo-chart/index.css",
-		"./hooks": {
-			"import": "./dist/hooks/index.js",
-			"require": "./dist/hooks/index.cjs"
-		},
-		"./leaderboard-chart": {
-			"import": "./dist/charts/leaderboard-chart/index.js",
-			"require": "./dist/charts/leaderboard-chart/index.cjs"
-		},
-		"./leaderboard-chart/style.css": "./dist/charts/leaderboard-chart/index.css",
-		"./legend": {
-			"import": "./dist/components/legend/index.js",
-			"require": "./dist/components/legend/index.cjs"
-		},
-		"./legend/style.css": "./dist/components/legend/index.css",
-		"./line-chart": {
-			"import": "./dist/charts/line-chart/index.js",
-			"require": "./dist/charts/line-chart/index.cjs"
-		},
-		"./line-chart/style.css": "./dist/charts/line-chart/index.css",
-		"./pie-chart": {
-			"import": "./dist/charts/pie-chart/index.js",
-			"require": "./dist/charts/pie-chart/index.cjs"
-		},
-		"./pie-chart/style.css": "./dist/charts/pie-chart/index.css",
-		"./pie-semi-circle-chart": {
-			"import": "./dist/charts/pie-semi-circle-chart/index.js",
-			"require": "./dist/charts/pie-semi-circle-chart/index.cjs"
-		},
-		"./pie-semi-circle-chart/style.css": "./dist/charts/pie-semi-circle-chart/index.css",
-		"./providers": {
-			"import": "./dist/providers/index.js",
-			"require": "./dist/providers/index.cjs"
-		},
-		"./sparkline": {
-			"import": "./dist/charts/sparkline/index.js",
-			"require": "./dist/charts/sparkline/index.cjs"
-		},
-		"./sparkline/style.css": "./dist/charts/sparkline/index.css",
 		"./style.css": "./dist/index.css",
-		"./tooltip": {
-			"import": "./dist/components/tooltip/index.js",
-			"require": "./dist/components/tooltip/index.cjs"
-		},
-		"./tooltip/style.css": "./dist/components/tooltip/index.css",
-		"./trend-indicator": {
-			"import": "./dist/components/trend-indicator/index.js",
-			"require": "./dist/components/trend-indicator/index.cjs"
-		},
-		"./trend-indicator/style.css": "./dist/components/trend-indicator/index.css",
-		"./utils": {
-			"import": "./dist/utils/index.js",
-			"require": "./dist/utils/index.cjs"
-		},
 		"./visx/group": {
 			"import": "./dist/visx/group/index.js",
 			"require": "./dist/visx/group/index.cjs"
@@ -115,51 +43,6 @@
 			".": [
 				"./dist/index.d.ts"
 			],
-			"bar-chart": [
-				"./dist/charts/bar-chart/index.d.ts"
-			],
-			"bar-list-chart": [
-				"./dist/charts/bar-list-chart/index.d.ts"
-			],
-			"conversion-funnel-chart": [
-				"./dist/charts/conversion-funnel-chart/index.d.ts"
-			],
-			"geo-chart": [
-				"./dist/charts/geo-chart/index.d.ts"
-			],
-			"hooks": [
-				"./dist/hooks/index.d.ts"
-			],
-			"leaderboard-chart": [
-				"./dist/charts/leaderboard-chart/index.d.ts"
-			],
-			"legend": [
-				"./dist/components/legend/index.d.ts"
-			],
-			"line-chart": [
-				"./dist/charts/line-chart/index.d.ts"
-			],
-			"pie-chart": [
-				"./dist/charts/pie-chart/index.d.ts"
-			],
-			"pie-semi-circle-chart": [
-				"./dist/charts/pie-semi-circle-chart/index.d.ts"
-			],
-			"sparkline": [
-				"./dist/charts/sparkline/index.d.ts"
-			],
-			"providers": [
-				"./dist/providers/index.d.ts"
-			],
-			"tooltip": [
-				"./dist/components/tooltip/index.d.ts"
-			],
-			"trend-indicator": [
-				"./dist/components/trend-indicator/index.d.ts"
-			],
-			"utils": [
-				"./dist/utils/index.d.ts"
-			],
 			"visx/group": [
 				"./dist/visx/group/index.d.ts"
 			],
@@ -200,8 +83,8 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.8.0",
-		"@wordpress/ui": "0.8.0",
+		"@wordpress/theme": "0.9.0",
+		"@wordpress/ui": "0.9.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -215,8 +98,8 @@
 		"@babel/core": "7.29.0",
 		"@babel/preset-react": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
-		"@storybook/addon-docs": "10.2.11",
-		"@storybook/react": "10.2.11",
+		"@storybook/addon-docs": "10.3.1",
+		"@storybook/react": "10.3.1",
 		"@testing-library/dom": "^10.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
 		"@testing-library/react": "^16.0.0",
@@ -226,8 +109,8 @@
 		"@types/react-dom": "18.3.7",
 		"@typescript/native-preview": "7.0.0-dev.20260225.1",
 		"@visx/glyph": "3.12.0",
-		"@wordpress/components": "32.3.0",
-		"@wordpress/element": "6.41.0",
+		"@wordpress/components": "32.4.0",
+		"@wordpress/element": "6.42.0",
 		"babel-jest": "30.2.0",
 		"babel-plugin-react-remove-properties": "^0.3.1",
 		"esbuild": "0.25.9",
@@ -241,7 +124,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"sass-embedded": "1.97.3",
-		"storybook": "10.2.11",
+		"storybook": "10.3.1",
 		"tsup": "8.5.1",
 		"typescript": "5.9.3"
 	},

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

@@ -1,10 +1,5 @@
 .bar-chart {
 
-	&__svg-wrapper {
-		flex: 1;
-		min-height: 0; // Required for flex shrinking
-	}
-
 	svg {
 		overflow: visible;
 	}

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

@@ -2,7 +2,6 @@ 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 { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
@@ -12,7 +11,6 @@ import {
 	useChartDataTransform,
 	useZeroValueDisplay,
 	useChartMargin,
-	useElementSize,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -20,12 +18,13 @@ import {
 	useChartId,
 	useChartRegistration,
 	useGlobalChartsContext,
-	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
-import { useChartChildren, renderLegendSlot } from '../private/chart-composition';
+import { useChartChildren } from '../private/chart-composition';
+import { ChartLayout } from '../private/chart-layout';
 import { SingleChartContext } from '../private/single-chart-context';
+import { SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import styles from './bar-chart.module.scss';
 import { useBarChartOptions } from './private';
@@ -113,19 +112,19 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const legendItems = useChartLegendItems( dataSorted );
 	const chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
-	const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const chartRef = useRef< HTMLDivElement >( null );
 
 	// Process children for composition API (Legend, etc.)
 	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'BarChart' );
-	const hasLegendChild = legendChildren.length > 0;
-
-	// Use the measured SVG wrapper height, falling back to the passed height if provided.
-	// When there's a legend (via prop or composition), we must wait for measurement because
-	// the legend takes space and the svg-wrapper height will be less than the total height.
-	const chartHeight = svgWrapperHeight > 0 ? svgWrapperHeight : height;
-	const hasLegend = showLegend || hasLegendChild;
-	const isWaitingForMeasurement = hasLegend ? svgWrapperHeight === 0 : ! chartHeight;
+	const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
+
+	const handleContentHeightChange = useCallback(
+		( contentHeight: number ) => {
+			const chartHeight = contentHeight > 0 ? contentHeight : height;
+			setMeasuredChartHeight( chartHeight );
+		},
+		[ height ]
+	);
 	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 	const [ isNavigating, setIsNavigating ] = useState( false );
 
@@ -143,7 +142,6 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	} );
 
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const providerTheme = useGlobalChartsTheme();
 
 	// Add visibility information to series when using interactive legends
 	const seriesWithVisibility = useMemo( () => {
@@ -343,11 +341,13 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			value={ {
 				chartId,
 				chartWidth: width,
-				chartHeight,
+				chartHeight: measuredChartHeight || 0,
 			} }
 		>
-			<Stack
-				direction="column"
+			<ChartLayout
+				legendPosition={ legendPosition }
+				legendElement={ legendElement }
+				legendChildren={ legendChildren }
 				gap={ gap }
 				className={ clsx(
 					'bar-chart',
@@ -358,133 +358,127 @@ const BarChartInternal: FC< BarChartProps > = ( {
 					},
 					className
 				) }
+				style={ { width, height } }
 				data-testid="bar-chart"
-				style={ {
-					width,
-					height,
-					visibility: isWaitingForMeasurement ? 'hidden' : 'visible',
-				} }
 				data-chart-id={ `bar-chart-${ chartId }` }
+				trailingContent={ nonLegendChildren }
+				onContentHeightChange={ handleContentHeightChange }
 			>
-				{ legendPosition === 'top' && legendElement }
-				{ renderLegendSlot( legendChildren, 'top' ) }
-
-				<div
-					className={ styles[ 'bar-chart__svg-wrapper' ] }
-					ref={ svgWrapperRef }
-					role="grid"
-					aria-label={ __( 'Bar chart', 'jetpack-charts' ) }
-					tabIndex={ 0 }
-					onKeyDown={ onChartKeyDown }
-					onFocus={ onChartFocus }
-					onBlur={ onChartBlur }
-				>
-					{ ! isWaitingForMeasurement && (
-						<div ref={ chartRef }>
-							<XYChart
-								theme={ theme }
-								width={ width }
-								height={ chartHeight }
-								margin={ {
-									...defaultMargin,
-									...margin,
-								} }
-								xScale={ chartOptions.xScale }
-								yScale={ chartOptions.yScale }
-								horizontal={ horizontal }
-								pointerEventsDataKey="nearest"
-							>
-								<Grid
-									columns={ gridVisibility.includes( 'y' ) }
-									rows={ gridVisibility.includes( 'x' ) }
-									numTicks={ 4 }
-								/>
-
-								{ withPatterns && (
-									<>
-										<defs data-testid="bar-chart-patterns">
-											{ dataSorted.map( ( seriesData, index ) =>
-												renderPattern(
-													index,
-													getElementStyles( { data: seriesData, index } ).color
-												)
-											) }
-										</defs>
-										<style>
-											{ dataSorted.map( ( seriesData, index ) =>
-												createPatternBorderStyle(
-													index,
-													getElementStyles( { data: seriesData, index } ).color
-												)
-											) }
-										</style>
-									</>
-								) }
-
-								{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }
-
-								{ allSeriesHidden ? (
-									<text
-										x={ width / 2 }
-										y={ chartHeight / 2 }
-										textAnchor="middle"
-										fill={ providerTheme.gridStyles?.stroke || '#ccc' }
-										fontSize="14"
-										fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
+				{ ( { contentHeight } ) => {
+					const chartHeight = contentHeight > 0 ? contentHeight : height;
+
+					return (
+						<div
+							role="grid"
+							aria-label={ __( 'Bar chart', 'jetpack-charts' ) }
+							tabIndex={ 0 }
+							onKeyDown={ onChartKeyDown }
+							onFocus={ onChartFocus }
+							onBlur={ onChartBlur }
+						>
+							{ chartHeight > 0 && (
+								<div ref={ chartRef }>
+									<XYChart
+										theme={ theme }
+										width={ width }
+										height={ chartHeight }
+										margin={ {
+											...defaultMargin,
+											...margin,
+										} }
+										xScale={ chartOptions.xScale }
+										yScale={ chartOptions.yScale }
+										horizontal={ horizontal }
+										pointerEventsDataKey="nearest"
 									>
-										{ __(
-											'All series are hidden. Click legend items to show data.',
-											'jetpack-charts'
+										<Grid
+											columns={ gridVisibility.includes( 'y' ) }
+											rows={ gridVisibility.includes( 'x' ) }
+											numTicks={ 4 }
+										/>
+
+										{ withPatterns && (
+											<>
+												<defs data-testid="bar-chart-patterns">
+													{ dataSorted.map( ( seriesData, index ) =>
+														renderPattern(
+															index,
+															getElementStyles( { data: seriesData, index } ).color
+														)
+													) }
+												</defs>
+												<style>
+													{ dataSorted.map( ( seriesData, index ) =>
+														createPatternBorderStyle(
+															index,
+															getElementStyles( { data: seriesData, index } ).color
+														)
+													) }
+												</style>
+											</>
 										) }
-									</text>
-								) : null }
-
-								<BarGroup padding={ chartOptions.barGroup.padding }>
-									{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
-										// Skip rendering invisible series
-										if ( ! isVisible ) {
-											return null;
-										}
-
-										return (
-											<BarSeries
-												key={ seriesData?.label }
-												dataKey={ seriesData?.label }
-												data={ seriesData.data as DataPointDate[] }
-												yAccessor={ chartOptions.accessors.yAccessor }
-												xAccessor={ chartOptions.accessors.xAccessor }
-												colorAccessor={ getBarBackground( index ) }
+
+										{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }
+
+										{ allSeriesHidden ? (
+											<SvgEmptyState
+												x={ width / 2 }
+												y={ chartHeight / 2 }
+												width={ width }
+												height={ chartHeight }
+											>
+												{ __(
+													'All series are hidden. Click legend items to show data.',
+													'jetpack-charts'
+												) }
+											</SvgEmptyState>
+										) : null }
+
+										<BarGroup padding={ chartOptions.barGroup.padding }>
+											{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
+												// Skip rendering invisible series
+												if ( ! isVisible ) {
+													return null;
+												}
+
+												return (
+													<BarSeries
+														key={ seriesData?.label }
+														dataKey={ seriesData?.label }
+														data={ seriesData.data as DataPointDate[] }
+														yAccessor={ chartOptions.accessors.yAccessor }
+														xAccessor={ chartOptions.accessors.xAccessor }
+														colorAccessor={ getBarBackground( index ) }
+													/>
+												);
+											} ) }
+										</BarGroup>
+
+										<Axis { ...chartOptions.axis.x } />
+										<Axis { ...chartOptions.axis.y } />
+
+										{ withTooltips && (
+											<AccessibleTooltip
+												detectBounds
+												snapTooltipToDatumX
+												snapTooltipToDatumY
+												renderTooltip={ renderTooltip || renderDefaultTooltip }
+												selectedIndex={ selectedIndex }
+												tooltipRef={ tooltipRef }
+												keyboardFocusedClassName={
+													styles[ 'bar-chart__tooltip--keyboard-focused' ]
+												}
+												series={ data }
+												mode="individual"
 											/>
-										);
-									} ) }
-								</BarGroup>
-
-								<Axis { ...chartOptions.axis.x } />
-								<Axis { ...chartOptions.axis.y } />
-
-								{ withTooltips && (
-									<AccessibleTooltip
-										detectBounds
-										snapTooltipToDatumX
-										snapTooltipToDatumY
-										renderTooltip={ renderTooltip || renderDefaultTooltip }
-										selectedIndex={ selectedIndex }
-										tooltipRef={ tooltipRef }
-										keyboardFocusedClassName={ styles[ 'bar-chart__tooltip--keyboard-focused' ] }
-										series={ data }
-										mode="individual"
-									/>
-								) }
-							</XYChart>
+										) }
+									</XYChart>
+								</div>
+							) }
 						</div>
-					) }
-				</div>
-
-				{ legendPosition === 'bottom' && legendElement }
-				{ renderLegendSlot( legendChildren, 'bottom' ) }
-
-				{ nonLegendChildren }
-			</Stack>
+					);
+				} }
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };

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

@@ -16,7 +16,8 @@ import {
 	useGlobalChartsTheme,
 } from '../../providers';
 import { formatMetricValue, attachSubComponents } from '../../utils';
-import { useChartChildren, renderLegendSlot } from '../private/chart-composition';
+import { useChartChildren } from '../private/chart-composition';
+import { ChartLayout } from '../private/chart-layout';
 import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
 import { useLeaderboardLegendItems } from './hooks';
@@ -246,37 +247,30 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	// Handle empty or undefined data
 	if ( ! data || data.length === 0 ) {
 		return (
-			<SingleChartContext.Provider
-				value={ {
-					chartId,
-					chartWidth: 0, // LeaderboardChart doesn't need specific dimensions
-					chartHeight: 0,
-				} }
-			>
-				<Stack
-					direction="column"
-					data-testid="leaderboard-chart-container"
+			<SingleChartContext.Provider value={ { chartId } }>
+				<ChartLayout
+					legendPosition={ legendPosition }
+					legendElement={ false }
+					legendChildren={ legendChildren }
 					className={ clsx(
 						styles.leaderboardChart,
-						{ [ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight },
-						{ [ styles[ 'leaderboardChart--loading' ] ]: loading },
+						{
+							[ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight,
+							[ styles[ 'leaderboardChart--loading' ] ]: loading,
+						},
 						className
 					) }
 					gap={ gap }
-					style={ {
-						...style,
-						width: propWidth || undefined,
-						height: propHeight || undefined,
-					} }
+					style={ { ...style, width: propWidth || undefined, height: propHeight || undefined } }
+					data-testid="leaderboard-chart-container"
+					trailingContent={ nonLegendChildren }
 				>
 					<div className={ styles.emptyState }>
 						{ loading
 							? __( 'Loading…', 'jetpack-charts' )
 							: __( 'No data available', 'jetpack-charts' ) }
 					</div>
-
-					{ nonLegendChildren }
-				</Stack>
+				</ChartLayout>
 			</SingleChartContext.Provider>
 		);
 	}
@@ -297,16 +291,11 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider
-			value={ {
-				chartId,
-				chartWidth: 0, // LeaderboardChart doesn't need specific dimensions
-				chartHeight: 0,
-			} }
-		>
-			<Stack
-				direction="column"
-				data-testid="leaderboard-chart-container"
+		<SingleChartContext.Provider value={ { chartId } }>
+			<ChartLayout
+				legendPosition={ legendPosition }
+				legendElement={ legendElement }
+				legendChildren={ legendChildren }
 				className={ clsx(
 					styles.leaderboardChart,
 					{
@@ -321,10 +310,9 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					width: propWidth || undefined,
 					height: propHeight || undefined,
 				} }
+				data-testid="leaderboard-chart-container"
+				trailingContent={ nonLegendChildren }
 			>
-				{ legendPosition === 'top' && legendElement }
-				{ renderLegendSlot( legendChildren, 'top' ) }
-
 				<div className={ styles.leaderboardChart__content }>
 					{ allSeriesHidden ? (
 						<div className={ styles.emptyState }>
@@ -372,12 +360,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 						</Grid>
 					) }
 				</div>
-
-				{ legendPosition === 'bottom' && legendElement }
-				{ renderLegendSlot( legendChildren, 'bottom' ) }
-
-				{ nonLegendChildren }
-			</Stack>
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };

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

@@ -1,11 +1,6 @@
 .line-chart {
 	position: relative;
 
-	&__svg-wrapper {
-		flex: 1;
-		min-height: 0; // Required for flex shrinking
-	}
-
 	&--animated {
 
 		path {