@automattic/charts 0.57.0 → 0.59.0

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

@@ -4,18 +4,23 @@ import { LinearGradient } from '@visx/gradient';
 import { scaleTime } from '@visx/scale';
 import { XYChart, AreaSeries, Grid, Axis, DataContext } from '@visx/xychart';
 import { __ } from '@wordpress/i18n';
-import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { differenceInHours, differenceInYears } from 'date-fns';
-import { useMemo, useContext, forwardRef, useImperativeHandle, useState, useRef } from 'react';
+import {
+	useMemo,
+	useContext,
+	forwardRef,
+	useImperativeHandle,
+	useState,
+	useRef,
+	useCallback,
+} from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
 	useChartMargin,
-	useElementSize,
-	useHasLegendChild,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -27,8 +32,11 @@ import {
 	useGlobalChartsTheme,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
+import { useChartChildren } from '../private/chart-composition';
+import { ChartLayout } from '../private/chart-layout';
 import { DefaultGlyph } from '../private/default-glyph';
 import { SingleChartContext, type SingleChartRef } from '../private/single-chart-context';
+import { SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive } from '../private/with-responsive';
 import styles from './line-chart.module.scss';
 import { LineChartAnnotation, LineChartAnnotationsOverlay, LineChartGlyph } from './private';
@@ -256,15 +264,9 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			withTooltips = true,
 			withTooltipCrosshairs,
 			showLegend = false,
-			legendOrientation = 'horizontal',
-			legendAlignment = 'center',
-			legendPosition = 'bottom',
-			legendMaxWidth,
-			legendTextOverflow = 'wrap',
-			legendItemClassName,
+			legend = {},
 			renderGlyph = defaultRenderGlyph,
 			glyphStyle = {},
-			legendShape = 'line',
 			withLegendGlyph = false,
 			withGradientFill = false,
 			smoothing = true,
@@ -272,7 +274,6 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 			renderTooltip = renderDefaultTooltip,
 			withStartGlyphs = false,
 			withEndGlyphs = false,
-			legendInteractive = false,
 			animation,
 			options = {},
 			onPointerDown = undefined,
@@ -285,24 +286,31 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		},
 		ref
 	) => {
+		const legendInteractive = legend.interactive ?? false;
+		const legendShape = legend.shape ?? 'line';
+		const legendPosition = legend.position ?? 'bottom';
+
 		const providerTheme = useGlobalChartsTheme();
 		const theme = useXYChartTheme( data );
 		const chartId = useChartId( providedChartId );
-		const [ svgWrapperRef, , svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 		const chartRef = useRef< HTMLDivElement >( null );
 		const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >( undefined );
 		const [ isNavigating, setIsNavigating ] = useState( false );
 		const internalChartRef = useRef< SingleChartRef >( 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, 'LineChart' );
+		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;
+		// Callback for ChartLayout to notify us when the measured content height changes.
+		// We compute chartHeight the same way the render prop does so the context stays in sync.
+		const handleContentHeightChange = useCallback(
+			( contentHeight: number ) => {
+				const chartHeight = contentHeight > 0 ? contentHeight : height;
+				setMeasuredChartHeight( chartHeight );
+			},
+			[ height ]
+		);
 
 		// Forward the external ref to the internal ref
 		useImperativeHandle(
@@ -454,11 +462,13 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 
 		const legendElement = showLegend && (
 			<Legend
-				orientation={ legendOrientation }
-				alignment={ legendAlignment }
+				orientation={ legend.orientation ?? 'horizontal' }
+				alignment={ legend.alignment ?? 'center' }
 				position={ legendPosition }
-				labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
-				itemClassName={ legendItemClassName }
+				labelStyles={ legend.labelStyles }
+				itemClassName={ legend.itemClassName }
+				itemStyles={ legend.itemStyles }
+				shapeStyles={ legend.shapeStyles }
 				className={ styles[ 'line-chart__legend' ] }
 				shape={ legendShape }
 				chartId={ chartId }
@@ -472,11 +482,13 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 					chartId,
 					chartRef: internalChartRef,
 					chartWidth: width,
-					chartHeight,
+					chartHeight: measuredChartHeight || 0,
 				} }
 			>
-				<Stack
-					direction="column"
+				<ChartLayout
+					legendPosition={ legendPosition }
+					legendElement={ legendElement }
+					legendChildren={ legendChildren }
 					gap={ gap }
 					className={ clsx(
 						'line-chart',
@@ -484,179 +496,176 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 						{ [ styles[ 'line-chart--animated' ] ]: animation && ! prefersReducedMotion },
 						className
 					) }
+					style={ { width, height } }
 					data-testid="line-chart"
-					style={ {
-						width,
-						height,
-						visibility: isWaitingForMeasurement ? 'hidden' : 'visible',
-					} }
+					trailingContent={ nonLegendChildren }
+					onContentHeightChange={ handleContentHeightChange }
 				>
-					{ legendPosition === 'top' && legendElement }
-
-					<div
-						className={ styles[ 'line-chart__svg-wrapper' ] }
-						ref={ svgWrapperRef }
-						role="grid"
-						aria-label={ __( 'Line 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 and yScale could be set in Axis as well, but they are `scale` props there.
-									xScale={ chartOptions.xScale }
-									yScale={ chartOptions.yScale }
-									onPointerDown={ onPointerDown }
-									onPointerUp={ onPointerUp }
-									onPointerMove={ onPointerMove }
-									onPointerOut={ onPointerOut }
-									pointerEventsDataKey="nearest"
-								>
-									{ gridVisibility !== 'none' && <Grid columns={ false } numTicks={ 4 } /> }
-									{ chartOptions.axis.x.display && <Axis { ...chartOptions.axis.x } /> }
-									{ chartOptions.axis.y.display && <Axis { ...chartOptions.axis.y } /> }
-
-									{ 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 } ) => {
+						// Use the measured height, falling back to the passed height if provided.
+						const chartHeight = contentHeight > 0 ? contentHeight : height;
+
+						return (
+							<div
+								role="grid"
+								aria-label={ __( 'Line 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 and yScale could be set in Axis as well, but they are `scale` props there.
+											xScale={ chartOptions.xScale }
+											yScale={ chartOptions.yScale }
+											onPointerDown={ onPointerDown }
+											onPointerUp={ onPointerUp }
+											onPointerMove={ onPointerMove }
+											onPointerOut={ onPointerOut }
+											pointerEventsDataKey="nearest"
 										>
-											{ __(
-												'All series are hidden. Click legend items to show data.',
-												'jetpack-charts'
-											) }
-										</text>
-									) : null }
-
-									{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
-										// Skip rendering invisible series
-										if ( ! isVisible ) {
-											return null;
-										}
-
-										const { color, lineStyles, glyph } = getElementStyles( {
-											data: seriesData,
-											index,
-										} );
-
-										const lineProps = {
-											stroke: color,
-											...lineStyles,
-										};
-
-										return (
-											<g key={ seriesData?.label || index }>
-												{ withGradientFill && (
-													<LinearGradient
-														id={ `area-gradient-${ chartId }-${ index + 1 }` }
-														from={ color }
-														fromOpacity={ 0.4 }
-														toOpacity={ 0.1 }
-														to={ providerTheme.backgroundColor }
-														{ ...seriesData.options?.gradient }
-														data-testid="line-gradient"
-													>
-														{ seriesData.options?.gradient?.stops?.map( ( stop, stopIndex ) => (
-															<stop
-																key={ `${ stop.offset }-${ stop.color || color }` }
-																offset={ stop.offset }
-																stopColor={ stop.color || color }
-																stopOpacity={ stop.opacity ?? 1 }
-																data-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }
+											{ gridVisibility !== 'none' && <Grid columns={ false } numTicks={ 4 } /> }
+											{ chartOptions.axis.x.display && <Axis { ...chartOptions.axis.x } /> }
+											{ chartOptions.axis.y.display && <Axis { ...chartOptions.axis.y } /> }
+
+											{ 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 }
+
+											{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
+												// Skip rendering invisible series
+												if ( ! isVisible ) {
+													return null;
+												}
+
+												const { color, lineStyles, glyph } = getElementStyles( {
+													data: seriesData,
+													index,
+												} );
+
+												const lineProps = {
+													stroke: color,
+													...lineStyles,
+												};
+
+												return (
+													<g key={ seriesData?.label || index }>
+														{ withGradientFill && (
+															<LinearGradient
+																id={ `area-gradient-${ chartId }-${ index + 1 }` }
+																from={ color }
+																fromOpacity={ 0.4 }
+																toOpacity={ 0.1 }
+																to={ providerTheme.backgroundColor }
+																{ ...seriesData.options?.gradient }
+																data-testid="line-gradient"
+															>
+																{ seriesData.options?.gradient?.stops?.map( ( stop, stopIndex ) => (
+																	<stop
+																		key={ `${ stop.offset }-${ stop.color || color }` }
+																		offset={ stop.offset }
+																		stopColor={ stop.color || color }
+																		stopOpacity={ stop.opacity ?? 1 }
+																		data-testid={ `line-gradient-stop-${ chartId }-${ index }-${ stopIndex }` }
+																	/>
+																) ) }
+															</LinearGradient>
+														) }
+														<AreaSeries
+															key={ seriesData?.label }
+															dataKey={ seriesData?.label }
+															data={ seriesData.data as DataPointDate[] }
+															{ ...accessors }
+															fill={
+																withGradientFill
+																	? `url(#area-gradient-${ chartId }-${ index + 1 })`
+																	: 'transparent'
+															}
+															renderLine={ true }
+															curve={ getCurveType( curveType, smoothing ) }
+															lineProps={ lineProps }
+														/>
+
+														{ withStartGlyphs && (
+															<LineChartGlyph
+																index={ index }
+																data={ seriesData }
+																color={ color }
+																renderGlyph={ glyph ?? renderGlyph }
+																accessors={ accessors }
+																glyphStyle={ glyphStyle }
+																position="start"
 															/>
-														) ) }
-													</LinearGradient>
-												) }
-												<AreaSeries
-													key={ seriesData?.label }
-													dataKey={ seriesData?.label }
-													data={ seriesData.data as DataPointDate[] }
-													{ ...accessors }
-													fill={
-														withGradientFill
-															? `url(#area-gradient-${ chartId }-${ index + 1 })`
-															: 'transparent'
+														) }
+
+														{ withEndGlyphs && (
+															<LineChartGlyph
+																index={ index }
+																data={ seriesData }
+																color={ color }
+																renderGlyph={ glyph ?? renderGlyph }
+																accessors={ accessors }
+																glyphStyle={ glyphStyle }
+																position="end"
+															/>
+														) }
+													</g>
+												);
+											} ) }
+
+											{ withTooltips && (
+												<AccessibleTooltip
+													detectBounds
+													snapTooltipToDatumX
+													snapTooltipToDatumY
+													showSeriesGlyphs
+													renderTooltip={ renderTooltip }
+													renderGlyph={ tooltipRenderGlyph }
+													glyphStyle={ glyphStyle }
+													showVerticalCrosshair={ withTooltipCrosshairs?.showVertical }
+													showHorizontalCrosshair={ withTooltipCrosshairs?.showHorizontal }
+													selectedIndex={ selectedIndex }
+													tooltipRef={ tooltipRef }
+													keyboardFocusedClassName={
+														styles[ 'line-chart__tooltip--keyboard-focused' ]
 													}
-													renderLine={ true }
-													curve={ getCurveType( curveType, smoothing ) }
-													lineProps={ lineProps }
+													series={ dataSorted }
 												/>
+											) }
 
-												{ withStartGlyphs && (
-													<LineChartGlyph
-														index={ index }
-														data={ seriesData }
-														color={ color }
-														renderGlyph={ glyph ?? renderGlyph }
-														accessors={ accessors }
-														glyphStyle={ glyphStyle }
-														position="start"
-													/>
-												) }
-
-												{ withEndGlyphs && (
-													<LineChartGlyph
-														index={ index }
-														data={ seriesData }
-														color={ color }
-														renderGlyph={ glyph ?? renderGlyph }
-														accessors={ accessors }
-														glyphStyle={ glyphStyle }
-														position="end"
-													/>
-												) }
-											</g>
-										);
-									} ) }
-
-									{ withTooltips && (
-										<AccessibleTooltip
-											detectBounds
-											snapTooltipToDatumX
-											snapTooltipToDatumY
-											showSeriesGlyphs
-											renderTooltip={ renderTooltip }
-											renderGlyph={ tooltipRenderGlyph }
-											glyphStyle={ glyphStyle }
-											showVerticalCrosshair={ withTooltipCrosshairs?.showVertical }
-											showHorizontalCrosshair={ withTooltipCrosshairs?.showHorizontal }
-											selectedIndex={ selectedIndex }
-											tooltipRef={ tooltipRef }
-											keyboardFocusedClassName={ styles[ 'line-chart__tooltip--keyboard-focused' ] }
-											series={ dataSorted }
-										/>
-									) }
-
-									{ /* Component to expose scale data via ref */ }
-									<LineChartScalesRef
-										chartRef={ internalChartRef }
-										width={ width }
-										height={ height }
-										margin={ margin }
-									/>
-								</XYChart>
+											{ /* Component to expose scale data via ref */ }
+											<LineChartScalesRef
+												chartRef={ internalChartRef }
+												width={ width }
+												height={ height }
+												margin={ margin }
+											/>
+										</XYChart>
+									</div>
+								) }
 							</div>
-						) }
-					</div>
-
-					{ legendPosition === 'bottom' && legendElement }
-
-					{ children }
-				</Stack>
+						);
+					} }
+				</ChartLayout>
 			</SingleChartContext.Provider>
 		);
 	}

package/src/charts/line-chart/private/line-chart-annotations-overlay.tsx

@@ -99,8 +99,7 @@ const LineChartAnnotationsOverlay: FC< LineChartAnnotationsProps > = ( { childre
 		};
 	}, [ getScalesData, chartWidth, chartHeight ] );
 
-	// Early return if no chart data available
-	if ( ! chartRef || ! children ) {
+	if ( ! chartRef || ! children || ! chartWidth || ! chartHeight ) {
 		return null;
 	}
 

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

@@ -53,13 +53,15 @@ describe( 'LineChart', () => {
 		],
 	};
 
-	const renderWithTheme = ( props = {}, themeName = 'default' ) => {
+	const renderWithTheme = ( props = {}, themeName = 'default', children = undefined ) => {
 		const theme = THEME_MAP[ themeName ];
 
 		return render(
 			<GlobalChartsProvider theme={ theme }>
 				{ /* @ts-expect-error TODO Fix the missing props */ }
-				<LineChart { ...defaultProps } { ...props } />
+				<LineChart { ...defaultProps } { ...props }>
+					{ children }
+				</LineChart>
 			</GlobalChartsProvider>
 		);
 	};
@@ -130,36 +132,56 @@ describe( 'LineChart', () => {
 	} );
 
 	describe( 'Legend', () => {
+		const multiSeriesData = [
+			{
+				label: 'Series A',
+				data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+			},
+			{
+				label: 'Series B',
+				data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+			},
+		];
+
 		test( 'shows legend when showLegend is true', () => {
-			renderWithTheme( {
-				showLegend: true,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-					},
-					{
-						label: 'Series B',
-						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: true, data: multiSeriesData } );
 			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
 		} );
 
 		test( 'hides legend when showLegend is false', () => {
-			renderWithTheme( {
-				showLegend: false,
-				data: [
-					{
-						label: 'Series A',
-						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
-					},
-				],
-			} );
+			renderWithTheme( { showLegend: false, data: multiSeriesData } );
 			expect( screen.queryByText( 'Series A' ) ).not.toBeInTheDocument();
 		} );
+
+		test( 'renders composition legend as child component', () => {
+			renderWithTheme( { data: multiSeriesData }, 'default', <LineChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			expect( screen.getByText( 'Series A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Series B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithTheme(
+				{ data: multiSeriesData, showLegend: false },
+				'default',
+				<LineChart.Legend />
+			);
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithTheme( { data: multiSeriesData }, 'default', <LineChart.Legend position="top" /> );
+
+			// Legend should appear before the chart content in DOM order
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'role="grid"' )
+			);
+		} );
 	} );
 
 	describe( 'Gradient Fill', () => {
@@ -1178,7 +1200,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ true }
+						legend={ { interactive: true } }
 						chartId="test-interactive-chart"
 					/>
 				</GlobalChartsProvider>
@@ -1200,7 +1222,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ false }
+						legend={ { interactive: false } }
 						chartId="test-non-interactive-chart"
 					/>
 				</GlobalChartsProvider>
@@ -1218,7 +1240,7 @@ describe( 'LineChart', () => {
 						{ ...defaultProps }
 						withGradientFill={ false }
 						showLegend={ true }
-						legendInteractive={ true }
+						legend={ { interactive: true } }
 						// No chartId provided
 					/>
 				</GlobalChartsProvider>

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

@@ -41,7 +41,6 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 		showVertical?: boolean;
 		showHorizontal?: boolean;
 	};
-	legendInteractive?: boolean;
 	children?: ReactNode;
 }
 

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

@@ -1,8 +1,5 @@
 .pie-chart {
-	display: flex;
-	flex-direction: column;
 	overflow: hidden;
-	align-items: center;
 
 	// Fill parent when no explicit width/height provided
 	&--responsive {
@@ -10,13 +7,8 @@
 		width: 100%;
 	}
 
-	&__svg-wrapper {
-		flex: 1;
-		min-height: 0; // Required for flex shrinking
-		min-width: 0; // Required for flex shrinking
+	&__centering {
 		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		height: 100%;
 	}
 }