@automattic/charts 0.58.0 → 0.59.0

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

@@ -4,17 +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,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -26,9 +32,11 @@ import {
 	useGlobalChartsTheme,
 } 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 { 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';
@@ -285,7 +293,6 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		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 );
@@ -293,14 +300,17 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 
 		// Process children for composition API (Legend, etc.)
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LineChart' );
-		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 >();
+
+		// 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(
@@ -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,181 +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 }
-					{ renderLegendSlot( legendChildren, 'top' ) }
-
-					<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 }
-					{ renderLegendSlot( legendChildren, 'bottom' ) }
-
-					{ nonLegendChildren }
-				</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/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%;
 	}
 }