Charts: Extract shared ChartLayout component for chart+legend layout

projects/js-packages/charts/changelog/pr-47554

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+ChartLayout: Add component for shared chart and legend layout.

projects/js-packages/charts/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;
 	}

projects/js-packages/charts/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 {
@@ -24,7 +22,8 @@ import {
 	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 { withResponsive } from '../private/with-responsive';
 import styles from './bar-chart.module.scss';
@@ -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 );
 
@@ -343,11 +342,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 +359,129 @@ 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 ? (
+											<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"
+											>
+												{ __(
+													'All series are hidden. Click legend items to show data.',
+													'jetpack-charts'
+												) }
+											</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 ) }
+													/>
+												);
+											} ) }
+										</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>
 	);
 };

projects/js-packages/charts/src/charts/bar-chart/stories/index.stories.tsx

@@ -260,12 +260,7 @@ export const WithCompositionLegend: StoryObj< typeof BarChart > = {
 	render: args => {
 		const legend = extractLegendConfig( args );
 		return (
-			<BarChart
-				data={ args.data || [ medalCountsData[ 0 ], medalCountsData[ 1 ], medalCountsData[ 2 ] ] }
-				withTooltips={ true }
-				gridVisibility="x"
-				chartId="composition-bar-chart"
-			>
+			<BarChart { ...Default.args } { ...args } chartId="composition-bar-chart">
 				<BarChart.Legend { ...legend } />
 			</BarChart>
 		);