@automattic/charts 0.56.5 → 0.56.7

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

@@ -2,11 +2,12 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 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,
@@ -175,6 +176,8 @@ const PieChartInternal = ( {
 	legendTextOverflow = 'wrap',
 	legendItemClassName,
 	legendShape = 'circle',
+	width: propWidth,
+	height: propHeight,
 	size,
 	animation,
 	thickness = 1,
@@ -188,10 +191,11 @@ const PieChartInternal = ( {
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
 	renderTooltip = renderDefaultPieTooltip,
+	gap = 'md',
 }: PieChartProps ) => {
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId( providedChartId );
-	const [ legendRef, legendHeight ] = useElementHeight< HTMLDivElement >();
+	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
 		useTooltip< DataPointPercentage >();
 
@@ -263,16 +267,24 @@ const PieChartInternal = ( {
 		);
 	}
 
-	const width = size;
-	const height = size;
-	const adjustedHeight = showLegend && legendPosition === 'top' ? height - legendHeight : height;
+	// Calculate the actual pie size:
+	// - Measure available space from the svg-wrapper
+	// - If size prop provided: use it as max, but shrink if container is smaller
+	// - If no size prop: fill available space
+	const availableWidth = svgWrapperWidth > 0 ? svgWrapperWidth : 300;
+	const availableHeight = svgWrapperHeight > 0 ? svgWrapperHeight : 300;
+	const availableSize = Math.min( availableWidth, availableHeight );
+	const actualSize = size ? Math.min( size, availableSize ) : availableSize;
+
+	const width = actualSize;
+	const height = actualSize;
 
 	// Calculate radius based on width/height
-	const radius = Math.min( width, adjustedHeight ) / 2;
+	const radius = Math.min( width, height ) / 2;
 
 	// Center the chart in the available space
 	const centerX = width / 2;
-	const centerY = adjustedHeight / 2;
+	const centerY = height / 2;
 
 	// Calculate the angle between each (use original data length for consistent spacing)
 	const padAngle = gapScale * ( ( 2 * Math.PI ) / data.length );
@@ -300,165 +312,177 @@ const PieChartInternal = ( {
 		},
 	};
 
+	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: adjustedHeight,
+				chartHeight: height,
 			} }
 		>
-			<div
+			<Stack
 				ref={ containerRef }
+				direction="column"
+				gap={ gap }
 				className={ clsx(
 					'pie-chart',
 					styles[ 'pie-chart' ],
-					{ [ styles[ 'pie-chart--legend-top' ] ]: showLegend && legendPosition === 'top' },
+					// Fill parent when no explicit dimensions provided
+					{ [ styles[ 'pie-chart--responsive' ] ]: ! propWidth && ! propHeight },
 					className
 				) }
+				style={ {
+					width: propWidth || undefined,
+					height: propHeight || undefined,
+				} }
 			>
-				<svg
-					viewBox={ `0 0 ${ width } ${ adjustedHeight }` }
-					preserveAspectRatio="xMidYMid meet"
-					width={ width }
-					height={ adjustedHeight }
-				>
-					<defs>
-						<RadialWipeAnimation
-							id={ `radial-wipe-${ chartId }` }
-							radius={ outerRadius }
-							innerRadius={ innerRadius }
-						/>
-					</defs>
-
-					<Group
-						top={ centerY }
-						left={ centerX }
-						mask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }
+				{ legendPosition === 'top' && legendElement }
+
+				<div className={ styles[ 'pie-chart__svg-wrapper' ] } ref={ svgWrapperRef }>
+					<svg
+						viewBox={ `0 0 ${ width } ${ height }` }
+						preserveAspectRatio="xMidYMid meet"
+						width={ width }
+						height={ height }
 					>
-						{ allSegmentsHidden ? (
-							<text
-								textAnchor="middle"
-								dy=".33em"
-								fill={ providerTheme.gridColor || '#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< DataPointPercentage & { index: number } >
-								data={ dataWithIndex }
-								pieValue={ accessors.value }
-								outerRadius={ outerRadius }
+						<defs>
+							<RadialWipeAnimation
+								id={ `radial-wipe-${ chartId }` }
+								radius={ outerRadius }
 								innerRadius={ innerRadius }
-								padAngle={ padAngle }
-								cornerRadius={ cornerRadius }
-							>
-								{ pie => {
-									return pie.arcs.map( ( arc, index ) => {
-										const [ centroidX, centroidY ] = pie.path.centroid( arc );
-										const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
-										const handleMouseMove = ( event: MouseEvent< SVGElement > ) => {
-											if ( ! withTooltips ) {
-												return;
+							/>
+						</defs>
+
+						<Group
+							top={ centerY }
+							left={ centerX }
+							mask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }
+						>
+							{ allSegmentsHidden ? (
+								<text
+									textAnchor="middle"
+									dy=".33em"
+									fill={ providerTheme.gridColor || '#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< DataPointPercentage & { index: number } >
+									data={ dataWithIndex }
+									pieValue={ accessors.value }
+									outerRadius={ outerRadius }
+									innerRadius={ innerRadius }
+									padAngle={ padAngle }
+									cornerRadius={ cornerRadius }
+								>
+									{ pie => {
+										return pie.arcs.map( ( arc, index ) => {
+											const [ centroidX, centroidY ] = pie.path.centroid( arc );
+											const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.25;
+											const handleMouseMove = ( event: MouseEvent< SVGElement > ) => {
+												if ( ! withTooltips ) {
+													return;
+												}
+
+												// Don't show tooltip until container bounds are measured
+												if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
+													return;
+												}
+
+												// Use clientX/Y and subtract containerBounds to cancel out any stale offset.
+												// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX
+												// By passing (clientX - containerBounds.left), we get:
+												// (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX
+												// This gives correct page coordinates regardless of stale bounds.
+												showTooltip( {
+													tooltipData: arc.data,
+													tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
+													tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY,
+												} );
+											};
+
+											const pathProps: SVGProps< SVGPathElement > & { 'data-testid'?: string } = {
+												d: pie.path( arc ) || '',
+												fill: accessors.fill( arc.data ),
+												'data-testid': 'pie-segment',
+											};
+
+											const groupProps: SVGProps< SVGGElement > = {};
+											if ( withTooltips ) {
+												groupProps.onMouseMove = handleMouseMove;
+												groupProps.onMouseLeave = onMouseLeave;
 											}
 
-											// Don't show tooltip until container bounds are measured
-											if ( containerBounds.width === 0 || containerBounds.height === 0 ) {
-												return;
-											}
-
-											// Use clientX/Y and subtract containerBounds to cancel out any stale offset.
-											// TooltipInPortal calculates: tooltipLeft + containerBounds.left + scrollX
-											// By passing (clientX - containerBounds.left), we get:
-											// (clientX - containerBounds.left) + containerBounds.left + scrollX = clientX + scrollX
-											// This gives correct page coordinates regardless of stale bounds.
-											showTooltip( {
-												tooltipData: arc.data,
-												tooltipLeft: event.clientX - containerBounds.left + tooltipOffsetX,
-												tooltipTop: event.clientY - containerBounds.top + tooltipOffsetY,
-											} );
-										};
-
-										const pathProps: SVGProps< SVGPathElement > = {
-											d: pie.path( arc ) || '',
-											fill: accessors.fill( arc.data ),
-										};
-
-										const groupProps: SVGProps< SVGGElement > = {};
-										if ( withTooltips ) {
-											groupProps.onMouseMove = handleMouseMove;
-											groupProps.onMouseLeave = onMouseLeave;
-										}
-
-										// Estimate text width more accurately for background sizing
-										const fontSize = 12;
-										const estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );
-										const labelPadding = 6;
-										const backgroundWidth = estimatedTextWidth + labelPadding * 2;
-										const backgroundHeight = fontSize + labelPadding * 2;
-
-										return (
-											<g key={ `arc-${ index }` } { ...groupProps }>
-												<path { ...pathProps } data-testid="pie-segment" />
-												{ showLabels && hasSpaceForLabel && (
-													<g>
-														{ providerTheme.labelBackgroundColor && (
-															<rect
-																x={ centroidX - backgroundWidth / 2 }
-																y={ centroidY - backgroundHeight / 2 }
-																width={ backgroundWidth }
-																height={ backgroundHeight }
-																fill={ providerTheme.labelBackgroundColor }
-																rx={ 4 }
-																ry={ 4 }
+											// Estimate text width more accurately for background sizing
+											const fontSize = 12;
+											const estimatedTextWidth = getStringWidth( arc.data.label, { fontSize } );
+											const labelPadding = 6;
+											const backgroundWidth = estimatedTextWidth + labelPadding * 2;
+											const backgroundHeight = fontSize + labelPadding * 2;
+
+											return (
+												<g key={ `arc-${ index }` } { ...groupProps }>
+													<path { ...pathProps } />
+													{ showLabels && hasSpaceForLabel && (
+														<g>
+															{ providerTheme.labelBackgroundColor && (
+																<rect
+																	x={ centroidX - backgroundWidth / 2 }
+																	y={ centroidY - backgroundHeight / 2 }
+																	width={ backgroundWidth }
+																	height={ backgroundHeight }
+																	fill={ providerTheme.labelBackgroundColor }
+																	rx={ 4 }
+																	ry={ 4 }
+																	pointerEvents="none"
+																/>
+															) }
+															<text
+																x={ centroidX }
+																y={ centroidY }
+																dy=".33em"
+																fill={ providerTheme.labelTextColor || '#333' }
+																fontSize={ fontSize }
+																textAnchor="middle"
 																pointerEvents="none"
-															/>
-														) }
-														<text
-															x={ centroidX }
-															y={ centroidY }
-															dy=".33em"
-															fill={ providerTheme.labelTextColor || '#333' }
-															fontSize={ fontSize }
-															textAnchor="middle"
-															pointerEvents="none"
-														>
-															{ arc.data.label }
-														</text>
-													</g>
-												) }
-											</g>
-										);
-									} );
-								} }
-							</Pie>
-						) }
-
-						{ /* Render SVG children (like Group, Text) inside the SVG */ }
-						{ ! allSegmentsHidden && svgChildren }
-					</Group>
-				</svg>
-
-				{ showLegend && (
-					<Legend
-						orientation={ legendOrientation }
-						position={ legendPosition }
-						alignment={ legendAlignment }
-						maxWidth={ legendMaxWidth }
-						textOverflow={ legendTextOverflow }
-						legendItemClassName={ legendItemClassName }
-						className={ styles[ 'pie-chart-legend' ] }
-						shape={ legendShape }
-						ref={ legendRef }
-						chartId={ chartId }
-						interactive={ legendInteractive }
-					/>
-				) }
+															>
+																{ arc.data.label }
+															</text>
+														</g>
+													) }
+												</g>
+											);
+										} );
+									} }
+								</Pie>
+							) }
+
+							{ /* Render SVG children (like Group, Text) inside the SVG */ }
+							{ ! allSegmentsHidden && svgChildren }
+						</Group>
+					</svg>
+				</div>
+
+				{ legendPosition === 'bottom' && legendElement }
 
 				{ withTooltips && tooltipOpen && tooltipData && (
 					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
@@ -471,7 +495,7 @@ const PieChartInternal = ( {
 
 				{ /* Render other React children for backward compatibility */ }
 				{ otherChildren }
-			</div>
+			</Stack>
 		</SingleChartContext.Provider>
 	);
 };

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

@@ -1,21 +1,27 @@
 .pie-semi-circle-chart {
-	display: flex;
-	flex-direction: column;
-	text-align: center;
-	gap: 20px;
+	// Fill parent when no explicit width/height provided
+	&--responsive {
+		height: 100%;
+		width: 100%;
+	}
 
-	&--legend-top {
-		flex-direction: column-reverse;
+	// Flex wrapper that fills remaining Stack space and measures the SVG area
+	&__svg-wrapper {
+		flex: 1;
+		min-height: 0; // Required for flex shrinking
+		min-width: 0; // Required for flex shrinking
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	.label {
-		margin-bottom: 0; // Add space between label and pie chart
-		font-weight: 600; // Make label more prominent than note
-		font-size: 16px; // Set explicit font size
+		font-weight: 600;
+		font-size: 16px;
 	}
 
 	.note {
-		margin-top: 0; // Add space between pie chart and note
-		font-size: 14px; // Slightly smaller text for hierarchy
+		font-size: 14px;
 	}
 }