@automattic/charts 0.56.5 → 0.56.7

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -3,11 +3,12 @@ import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
-import { useElementHeight, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
+import { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -52,10 +53,13 @@ const renderDefaultPieSemiCircleTooltip = ( {
 };
 
 const PAD_ANGLE = 0.03; // Padding between segments
+const DEFAULT_WIDTH = 400;
 
 export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercentage[] > {
 	/**
-	 * Width of the chart in pixels; height would be half of this value calculated automatically.
+	 * Explicit width of the chart container in pixels.
+	 * When omitted, the chart fills its parent container's width.
+	 * The chart always maintains a 2:1 width-to-height ratio, constrained by available space.
 	 */
 	width?: number;
 
@@ -157,7 +161,8 @@ const validateData = ( data: DataPointPercentage[] ) => {
 const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	data,
 	chartId: providedChartId,
-	width = 400,
+	width: propWidth,
+	height: propHeight,
 	thickness = 0.4,
 	clockwise = true,
 	withTooltips = false,
@@ -179,9 +184,11 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
 	renderTooltip = renderDefaultPieSemiCircleTooltip,
+	gap = 'md',
 } ) => {
 	const chartId = useChartId( providedChartId );
-	const [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();
+	// Measure the SVG wrapper to calculate constrained dimensions
+	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< DataPointPercentage >();
 
@@ -295,10 +302,17 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 
 	const prefersReducedMotion = usePrefersReducedMotion();
 
+	const effectiveWidth = propWidth || DEFAULT_WIDTH;
+
 	if ( ! isValid ) {
+		const errorWidth = propHeight
+			? Math.min( propWidth || propHeight * 2, propHeight * 2 )
+			: effectiveWidth;
+		const errorHeight = errorWidth / 2;
+
 		return (
 			<div className={ styles[ 'pie-semi-circle-chart' ] }>
-				<svg width={ width } height={ width / 2 } data-testid="pie-chart-svg">
+				<svg width={ errorWidth } height={ errorHeight } data-testid="pie-chart-svg">
 					<text x="50%" y="50%" textAnchor="middle" className={ styles.error }>
 						{ message }
 					</text>
@@ -307,12 +321,16 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		);
 	}
 
-	// Calculate chart dimensions
-	// TODO: we might want to accept height as a prop in the future, because the height of container might not always be enough.
+	// Calculate chart dimensions maintaining the 2:1 width-to-height ratio.
+	// Use measured SVG wrapper dimensions to respect height constraints, falling back
+	// to explicit props during initial render before measurement is available.
+	const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : effectiveWidth;
+	const availableHeight =
+		svgWrapperHeight > 0 ? svgWrapperHeight : propHeight || effectiveWidth / 2;
+	// Constrain width so that height (= width / 2) never exceeds the available height
+	const width = Math.min( availableWidth, availableHeight * 2 );
 	const height = width / 2;
-	// The chart only takes the height minus the legend height.
-	const chartHeight = height - ( showLegend && legendPosition === 'top' ? legendHeight : 0 );
-	const radius = Math.min( width / 2, chartHeight );
+	const radius = height; // For a semi-circle, radius equals the SVG height
 	const innerRadius = radius * ( 1 - thickness );
 
 	// Map data with index for color assignment
@@ -329,119 +347,144 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
 	const endAngle = clockwise ? Math.PI / 2 : -Math.PI / 2;
 
+	const legendElement = showLegend && (
+		<Legend
+			orientation={ legendOrientation }
+			position={ legendPosition }
+			alignment={ legendAlignment }
+			maxWidth={ legendMaxWidth }
+			textOverflow={ legendTextOverflow }
+			legendItemClassName={ legendItemClassName }
+			shape={ legendShape }
+			chartId={ chartId }
+			interactive={ legendInteractive }
+		/>
+	);
+
 	return (
 		<SingleChartContext.Provider
 			value={ {
 				chartId,
 				chartWidth: width,
-				chartHeight: radius,
+				chartHeight: height,
 			} }
 		>
-			<div
+			<Stack
 				ref={ containerRef }
+				direction="column"
+				gap={ gap }
 				className={ clsx(
 					'pie-semi-circle-chart',
 					styles[ 'pie-semi-circle-chart' ],
 					{
-						[ styles[ 'pie-semi-circle-chart--legend-top' ] ]:
-							showLegend && legendPosition === 'top',
+						[ styles[ 'pie-semi-circle-chart--responsive' ] ]: ! propWidth && ! propHeight,
 					},
 					className
 				) }
+				style={ {
+					width: propWidth || undefined,
+					height: propHeight || undefined,
+				} }
 				data-testid="pie-chart-container"
 			>
-				<svg
-					width={ width }
-					height={ radius }
-					viewBox={ `0 0 ${ width } ${ chartHeight }` }
-					data-testid="pie-chart-svg"
-				>
-					<defs>
-						<RadialWipeAnimation
-							id={ `radial-wipe-${ chartId }` }
-							radius={ radius }
-							innerRadius={ innerRadius }
-							startAngle="-180deg"
-							wipePercentage={ 50 }
-						/>
-					</defs>
-
-					{ /* Main chart group centered horizontally and positioned at bottom */ }
-					<Group
-						top={ chartHeight }
-						left={ width / 2 }
-						mask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }
+				{ legendPosition === 'top' && legendElement }
+
+				<div ref={ svgWrapperRef } className={ styles[ 'pie-semi-circle-chart__svg-wrapper' ] }>
+					<svg
+						width={ width }
+						height={ height }
+						viewBox={ `0 0 ${ width } ${ height }` }
+						data-testid="pie-chart-svg"
 					>
-						{ allSegmentsHidden ? (
-							<text
-								textAnchor="middle"
-								y={ -radius / 2 }
-								fill="#ccc"
-								fontSize="14"
-								fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
-							>
-								{ __(
-									'All segments are hidden. Click legend items to show data.',
-									'jetpack-charts'
-								) }
-							</text>
-						) : (
-							<>
-								{ /* Pie chart */ }
-								<Pie< DataPointPercentage & { index: number } >
-									data={ dataWithIndex }
-									pieValue={ accessors.value }
-									outerRadius={ radius }
-									innerRadius={ innerRadius }
-									cornerRadius={ 3 }
-									padAngle={ PAD_ANGLE }
-									startAngle={ startAngle }
-									endAngle={ endAngle }
-									pieSort={ accessors.sort }
+						<defs>
+							<RadialWipeAnimation
+								id={ `radial-wipe-${ chartId }` }
+								radius={ radius }
+								innerRadius={ innerRadius }
+								startAngle="-180deg"
+								wipePercentage={ 50 }
+							/>
+						</defs>
+
+						{ /* Main chart group centered horizontally and positioned at bottom */ }
+						<Group
+							top={ height }
+							left={ width / 2 }
+							mask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }
+						>
+							{ allSegmentsHidden ? (
+								<text
+									textAnchor="middle"
+									y={ -radius / 2 }
+									fill="#ccc"
+									fontSize="14"
+									fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
 								>
-									{ pie => {
-										return pie.arcs.map( arc => (
-											<g
-												key={ arc.data.label }
-												onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
-												onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
-											>
-												<path
-													d={ pie.path( arc ) || '' }
-													fill={ accessors.fill( arc.data ) }
-													data-testid="pie-segment"
-												/>
-											</g>
-										) );
-									} }
-								</Pie>
-
-								{ /* Label and note text */ }
-								<Group>
-									<Text
-										textAnchor="middle"
-										verticalAnchor="start"
-										y={ -40 } // Position above the chart with space for note
-										className={ styles.label }
-									>
-										{ label }
-									</Text>
-									<Text
-										textAnchor="middle"
-										verticalAnchor="start"
-										y={ -20 } // Position between label and chart
-										className={ styles.note }
+									{ __(
+										'All segments are hidden. Click legend items to show data.',
+										'jetpack-charts'
+									) }
+								</text>
+							) : (
+								<>
+									{ /* Pie chart */ }
+									<Pie< DataPointPercentage & { index: number } >
+										data={ dataWithIndex }
+										pieValue={ accessors.value }
+										outerRadius={ radius }
+										innerRadius={ innerRadius }
+										cornerRadius={ 3 }
+										padAngle={ PAD_ANGLE }
+										startAngle={ startAngle }
+										endAngle={ endAngle }
+										pieSort={ accessors.sort }
 									>
-										{ note }
-									</Text>
-								</Group>
-
-								{ /* Render SVG children from composition API */ }
-								{ ! allSegmentsHidden && svgChildren }
-							</>
-						) }
-					</Group>
-				</svg>
+										{ pie => {
+											return pie.arcs.map( arc => (
+												<g
+													key={ arc.data.label }
+													onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
+													onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+												>
+													<path
+														d={ pie.path( arc ) || '' }
+														fill={ accessors.fill( arc.data ) }
+														data-testid="pie-segment"
+													/>
+												</g>
+											) );
+										} }
+									</Pie>
+
+									{ /* Label and note text */ }
+									<Group>
+										<Text
+											textAnchor="middle"
+											verticalAnchor="start"
+											y={ -40 } // Position above the chart with space for note
+											className={ styles.label }
+										>
+											{ label }
+										</Text>
+										<Text
+											textAnchor="middle"
+											verticalAnchor="start"
+											y={ -20 } // Position between label and chart
+											className={ styles.note }
+										>
+											{ note }
+										</Text>
+									</Group>
+
+									{ /* Render SVG children from composition API */ }
+									{ ! allSegmentsHidden && svgChildren }
+								</>
+							) }
+						</Group>
+					</svg>
+				</div>
+
+				{ legendPosition !== 'top' && legendElement }
 
 				{ withTooltips && tooltipOpen && tooltipData && (
 					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
@@ -449,27 +492,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					</TooltipInPortal>
 				) }
 
-				{ showLegend && (
-					<Legend
-						orientation={ legendOrientation }
-						position={ legendPosition }
-						alignment={ legendAlignment }
-						maxWidth={ legendMaxWidth }
-						textOverflow={ legendTextOverflow }
-						legendItemClassName={ legendItemClassName }
-						shape={ legendShape }
-						ref={ legendRef }
-						chartId={ chartId }
-						interactive={ legendInteractive }
-					/>
-				) }
-
 				{ /* Render HTML children from composition API */ }
 				{ htmlChildren }
 
 				{ /* Render any other children that aren't compound components */ }
 				{ otherChildren }
-			</div>
+			</Stack>
 		</SingleChartContext.Provider>
 	);
 };

package/src/charts/pie-semi-circle-chart/test/pie-semi-circle-chart.test.tsx

@@ -3,6 +3,15 @@ import userEvent from '@testing-library/user-event';
 import { GlobalChartsProvider } from '../../../providers';
 import PieSemiCircleChart from '../pie-semi-circle-chart';
 
+// Mock useParentSize so the responsive wrapper returns predictable dimensions in tests
+jest.mock( '@visx/responsive', () => ( {
+	useParentSize: jest.fn( () => ( {
+		parentRef: { current: null },
+		width: 400,
+		height: 200,
+	} ) ),
+} ) );
+
 // Mock data for testing
 const mockData = [
 	{
@@ -167,15 +176,15 @@ describe( 'PieSemiCircleChart', () => {
 		expect( thinPathD ).not.toBe( thickPathD );
 	} );
 
-	it( 'renders with correct dimensions', () => {
-		const width = 400;
-		render( <PieSemiCircleChart data={ mockData } width={ width } /> );
+	it( 'renders with correct dimensions from measured container', () => {
+		// Mock returns width:400, height:200 — chart should render at 400×200 (2:1 ratio)
+		render( <PieSemiCircleChart data={ mockData } /> );
 
 		const svg = screen.getByTestId( 'pie-chart-svg' );
 
-		expect( svg ).toHaveAttribute( 'width', width.toString() );
-		expect( svg ).toHaveAttribute( 'height', ( width / 2 ).toString() );
-		expect( svg ).toHaveAttribute( 'viewBox', `0 0 ${ width } ${ width / 2 }` );
+		expect( svg ).toHaveAttribute( 'width', '400' );
+		expect( svg ).toHaveAttribute( 'height', '200' );
+		expect( svg ).toHaveAttribute( 'viewBox', '0 0 400 200' );
 	} );
 
 	describe( 'Data Validation', () => {
@@ -216,6 +225,37 @@ describe( 'PieSemiCircleChart', () => {
 		} );
 	} );
 
+	describe( 'Responsive wrapper', () => {
+		it( 'fills parent container (height:100%) by default', () => {
+			render( <PieSemiCircleChart data={ mockData } /> );
+			const wrapper = screen.getByTestId( 'responsive-wrapper' );
+			expect( wrapper ).toHaveStyle( { height: '100%' } );
+		} );
+
+		it( 'constrains chart to 2:1 ratio from measured dimensions', () => {
+			// Mock returns width:400, height:200, so chart renders at 400×200 (2:1 ratio)
+			render( <PieSemiCircleChart data={ mockData } /> );
+			const svg = screen.getByTestId( 'pie-chart-svg' );
+			expect( svg ).toHaveAttribute( 'width', '400' );
+			expect( svg ).toHaveAttribute( 'height', '200' );
+		} );
+
+		it( 'constrains chart width when container height is shorter than 2:1 ratio', () => {
+			// If parent height is 100px, chart should be at most 200×100 (not 400×200)
+			const { useParentSize } = jest.requireMock( '@visx/responsive' );
+			useParentSize.mockReturnValueOnce( {
+				parentRef: { current: null },
+				width: 400,
+				height: 100,
+			} );
+			render( <PieSemiCircleChart data={ mockData } /> );
+			const svg = screen.getByTestId( 'pie-chart-svg' );
+			// chartWidth = min(400, 100*2) = 200, chartHeight = 100
+			expect( svg ).toHaveAttribute( 'width', '200' );
+			expect( svg ).toHaveAttribute( 'height', '100' );
+		} );
+	} );
+
 	describe( 'Interactive Legend', () => {
 		test( 'filters segments when interactive legend is enabled and segment is toggled', async () => {
 			const user = userEvent.setup();

package/src/charts/private/with-responsive/test/with-responsive.test.tsx

@@ -47,10 +47,10 @@ describe( 'withResponsive', () => {
 			expect( component ).toHaveStyle( { width: '400px' } );
 		} );
 
-		test( 'passes size prop equal to container width', () => {
-			render( <ResponsiveComponent data={ [] } /> );
+		test( 'passes explicit size prop through to component', () => {
+			render( <ResponsiveComponent data={ [] } size={ 200 } /> );
 			const component = screen.getByTestId( 'mock-component' );
-			expect( component ).toHaveAttribute( 'data-size', '600' );
+			expect( component ).toHaveAttribute( 'data-size', '200' );
 		} );
 	} );
 
@@ -61,8 +61,8 @@ describe( 'withResponsive', () => {
 			expect( wrapper ).toHaveStyle( { width: '100%', height: '100%' } );
 		} );
 
-		test( 'wrapper uses size prop for dimensions when provided', () => {
-			render( <ResponsiveComponent data={ [] } size={ 200 } /> );
+		test( 'wrapper uses explicit width/height for dimensions when provided', () => {
+			render( <ResponsiveComponent data={ [] } width={ 200 } height={ 200 } /> );
 			const wrapper = screen.getByTestId( 'responsive-wrapper' );
 			expect( wrapper ).toHaveStyle( { width: '200px', height: '200px' } );
 		} );

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -86,10 +86,11 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 			aspectRatio,
 		} );
 
-		// Use measured dimensions, but fall back to explicit props if measurement returns 0
-		// (e.g., during initial render or in test environments without DOM measurement)
-		const effectiveWidth = measuredWidth || size || width || 0;
-		const effectiveHeight = measuredHeight || size || height || 0;
+		// Use measured dimensions, but fall back to explicit width/height props if measurement returns 0
+		// (e.g., during initial render or in test environments without DOM measurement).
+		// Do not use size here — size controls chart element dimensions (e.g. pie diameter), not container dimensions.
+		const effectiveWidth = measuredWidth || width || 0;
+		const effectiveHeight = measuredHeight || height || 0;
 
 		const defaultHeight = hasAspectRatio ? 'auto' : '100%';
 
@@ -99,14 +100,14 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 				data-testid="responsive-wrapper"
 				className={ styles.container }
 				style={ {
-					width: size ?? width ?? '100%',
-					height: size ?? height ?? defaultHeight,
+					width: width ?? '100%',
+					height: height ?? defaultHeight,
 				} }
 			>
 				<WrappedComponent
 					width={ effectiveWidth }
 					height={ effectiveHeight }
-					size={ effectiveWidth }
+					size={ size }
 					{ ...( chartProps as T ) }
 				/>
 			</div>

package/src/hooks/index.ts

@@ -3,7 +3,7 @@ export { useChartMouseHandler } from './use-chart-mouse-handler';
 export { useXYChartTheme } from './use-xychart-theme';
 export { useChartDataTransform } from './use-chart-data-transform';
 export { useChartMargin } from './use-chart-margin';
-export { useElementHeight } from './use-element-height';
+export { useElementSize } from './use-element-size';
 export { useHasLegendChild } from './use-has-legend-child';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';