@automattic/charts 0.57.0 → 0.59.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.57.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"
 			],
@@ -180,7 +63,7 @@
 		"typecheck": "tsgo --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.1.1",
+		"@automattic/number-formatters": "^1.1.2",
 		"@babel/runtime": "7.28.6",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -200,8 +83,8 @@
 		"@visx/vendor": "^3.12.0",
 		"@visx/xychart": "^3.12.0",
 		"@wordpress/i18n": "^6.0.0",
-		"@wordpress/theme": "0.7.0",
-		"@wordpress/ui": "0.7.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.2.0",
-		"@wordpress/element": "6.40.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,8 +11,6 @@ import {
 	useChartDataTransform,
 	useZeroValueDisplay,
 	useChartMargin,
-	useElementSize,
-	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -21,11 +18,13 @@ import {
 	useChartId,
 	useChartRegistration,
 	useGlobalChartsContext,
-	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
+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';
@@ -39,7 +38,6 @@ export interface BarChartProps extends BaseChartProps< SeriesData[] > {
 	orientation?: 'horizontal' | 'vertical';
 	withPatterns?: boolean;
 	showZeroValues?: boolean;
-	legendInteractive?: boolean;
 	children?: ReactNode;
 }
 
@@ -85,24 +83,18 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	margin,
 	withTooltips = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'rect',
+	legend = {},
 	gridVisibility: gridVisibilityProp,
 	renderTooltip,
 	options = {},
 	orientation = 'vertical',
 	withPatterns = false,
 	showZeroValues = false,
-	legendInteractive = false,
 	animation,
 	children,
 	gap = 'md',
 } ) => {
+	const legendInteractive = legend.interactive ?? false;
 	const horizontal = orientation === 'horizontal';
 	const chartId = useChartId( providedChartId );
 	const theme = useXYChartTheme( data );
@@ -120,18 +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 );
 
-	// Check if children contain a Legend component (composition pattern)
-	const hasLegendChild = useHasLegendChild( children );
+	// Process children for composition API (Legend, etc.)
+	const { legendChildren, nonLegendChildren } = useChartChildren( children, 'BarChart' );
+	const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
 
-	// 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 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 );
 
@@ -149,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( () => {
@@ -327,15 +319,18 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const gridVisibility = gridVisibilityProp ?? chartOptions.gridVisibility;
 	const highlightedBarStyle = createKeyboardHighlightStyle();
 
+	const legendPosition = legend.position ?? 'bottom';
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
-			itemClassName={ legendItemClassName }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shapeStyles={ legend.shapeStyles }
 			className={ styles[ 'bar-chart__legend' ] }
-			shape={ legendShape }
+			shape={ legend.shape ?? 'rect' }
 			chartId={ chartId }
 			interactive={ legendInteractive }
 		/>
@@ -346,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',
@@ -361,131 +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 }
-
-				<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 }
-
-				{ children }
-			</Stack>
+					);
+				} }
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };