@automattic/charts 0.57.0 → 0.59.0

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

@@ -7,7 +7,11 @@ import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
-import { useElementSize, useInteractiveLegendData, usePrefersReducedMotion } from '../../hooks';
+import {
+	useDataWithPercentages,
+	useInteractiveLegendData,
+	usePrefersReducedMotion,
+} from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -19,12 +23,19 @@ import {
 import { attachSubComponents } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import { ChartLayout } from '../private/chart-layout';
 import { RadialWipeAnimation } from '../private/radial-wipe-animation/';
 import { SingleChartContext } from '../private/single-chart-context';
+import { SvgEmptyState } from '../private/svg-empty-state';
 import { withResponsive, ResponsiveConfig } from '../private/with-responsive';
 import styles from './pie-chart.module.scss';
 import type { LegendValueDisplay } from '../../components/legend';
-import type { BaseChartProps, DataPointPercentage, Optional } from '../../types';
+import type {
+	BaseChartProps,
+	DataPointPercentage,
+	DataPointPercentageCalculated,
+	Optional,
+} from '../../types';
 import type { ChartComponentWithComposition } from '../private/chart-composition';
 import type { SVGProps, MouseEvent, ReactNode, FC } from 'react';
 
@@ -33,9 +44,9 @@ import type { SVGProps, MouseEvent, ReactNode, FC } from 'react';
  */
 export type PieChartRenderTooltipParams = {
 	/**
-	 * The data point being hovered, including label, value, and percentage.
+	 * The data point being hovered, including label, value, and calculated percentage.
 	 */
-	tooltipData: DataPointPercentage;
+	tooltipData: DataPointPercentageCalculated;
 };
 
 /**
@@ -93,13 +104,6 @@ export interface PieChartProps extends BaseChartProps< DataPointPercentage[] > {
 	 */
 	legendValueDisplay?: LegendValueDisplay;
 
-	/**
-	 * Enable interactive legend items that can toggle segment visibility.
-	 * Requires chartId and GlobalChartsProvider.
-	 * When segments are hidden, percentages are recalculated so visible segments total 100%.
-	 */
-	legendInteractive?: boolean;
-
 	/**
 	 * Use the children prop to render additional elements on the chart.
 	 */
@@ -142,16 +146,15 @@ const validateData = ( data: DataPointPercentage[] ) => {
 	}
 
 	// Check for negative values
-	const hasNegativeValues = data.some( item => item.percentage < 0 || item.value < 0 );
+	const hasNegativeValues = data.some( item => item.value < 0 );
 	if ( hasNegativeValues ) {
 		return { isValid: false, message: 'Invalid data: Negative values are not allowed' };
 	}
 
-	// Validate total percentage
-	const totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );
-	if ( Math.abs( totalPercentage - 100 ) > 0.01 ) {
-		// Using small epsilon for floating point comparison
-		return { isValid: false, message: 'Invalid percentage total: Must equal 100' };
+	// Validate total value is greater than 0
+	const totalValue = data.reduce( ( sum, item ) => sum + item.value, 0 );
+	if ( totalValue <= 0 ) {
+		return { isValid: false, message: 'Invalid data: Total value must be greater than 0' };
 	}
 
 	return { isValid: true, message: '' };
@@ -169,13 +172,7 @@ const PieChartInternal = ( {
 	withTooltips = false,
 	className,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'circle',
+	legend = {},
 	width: propWidth,
 	height: propHeight,
 	size,
@@ -186,18 +183,19 @@ const PieChartInternal = ( {
 	cornerScale = 0,
 	showLabels = true,
 	legendValueDisplay = 'percentage',
-	legendInteractive = false,
 	children = null,
 	tooltipOffsetX = 0,
 	tooltipOffsetY = -15,
 	renderTooltip = renderDefaultPieTooltip,
 	gap = 'md',
 }: PieChartProps ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const providerTheme = useGlobalChartsTheme();
 	const chartId = useChartId( providedChartId );
-	const [ svgWrapperRef, svgWrapperWidth, svgWrapperHeight ] = useElementSize< HTMLDivElement >();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, hideTooltip, showTooltip } =
-		useTooltip< DataPointPercentage >();
+		useTooltip< DataPointPercentageCalculated >();
 
 	// Set up portal tooltip for better z-index handling
 	// We get containerBounds to cancel out stale offsets in the position calculation
@@ -216,9 +214,12 @@ const PieChartInternal = ( {
 
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 
+	// Calculate percentages from values (single source of truth)
+	const dataWithPercentages = useDataWithPercentages( data );
+
 	// Filter and recalculate data for interactive legends
 	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
-		data,
+		data: dataWithPercentages,
 		chartId,
 		legendInteractive,
 		isSeriesVisible,
@@ -236,7 +237,10 @@ const PieChartInternal = ( {
 	const { isValid, message } = validateData( data );
 
 	// Process children to extract compound components
-	const { svgChildren, htmlChildren, otherChildren } = useChartChildren( children, 'PieChart' );
+	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(
+		children,
+		'PieChart'
+	);
 
 	// Memoize metadata to prevent unnecessary re-registration
 	const chartMetadata = useMemo(
@@ -267,34 +271,9 @@ const PieChartInternal = ( {
 		);
 	}
 
-	// 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, height ) / 2;
-
-	// Center the chart in the available space
-	const centerX = width / 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 );
 
-	const outerRadius = radius - padding;
-	const innerRadius = thickness === 0 ? 0 : outerRadius * ( 1 - thickness );
-
-	const maxCornerRadius = ( outerRadius - innerRadius ) / 2;
-	const cornerRadius = cornerScale ? Math.min( cornerScale * outerRadius, maxCornerRadius ) : 0;
-
 	// Map the data to include index for color assignment
 	// When interactive, we need to find the original index to maintain consistent colors
 	const dataWithIndex = visibleData.map( d => {
@@ -306,36 +285,33 @@ const PieChartInternal = ( {
 	} );
 
 	const accessors = {
-		value: ( d: DataPointPercentage ) => d.value,
-		fill: ( d: DataPointPercentage & { index: number } ) => {
+		value: ( d: DataPointPercentageCalculated ) => d.value,
+		fill: ( d: DataPointPercentageCalculated & { index: number } ) => {
 			return getElementStyles( { data: d, index: d.index } ).color;
 		},
 	};
 
 	const legendElement = showLegend && (
 		<Legend
-			orientation={ legendOrientation }
+			orientation={ legend.orientation ?? 'horizontal' }
 			position={ legendPosition }
-			alignment={ legendAlignment }
-			labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
-			itemClassName={ legendItemClassName }
-			shape={ legendShape }
+			alignment={ legend.alignment ?? 'center' }
+			labelStyles={ legend.labelStyles }
+			itemClassName={ legend.itemClassName }
+			itemStyles={ legend.itemStyles }
+			shapeStyles={ legend.shapeStyles }
+			shape={ legend.shape ?? 'circle' }
 			chartId={ chartId }
 			interactive={ legendInteractive }
 		/>
 	);
 
 	return (
-		<SingleChartContext.Provider
-			value={ {
-				chartId,
-				chartWidth: width,
-				chartHeight: height,
-			} }
-		>
-			<Stack
-				ref={ containerRef }
-				direction="column"
+		<SingleChartContext.Provider value={ { chartId } }>
+			<ChartLayout
+				legendPosition={ legendPosition }
+				legendElement={ legendElement }
+				legendChildren={ legendChildren }
 				gap={ gap }
 				className={ clsx(
 					'pie-chart',
@@ -348,153 +324,177 @@ const PieChartInternal = ( {
 					width: propWidth || undefined,
 					height: propHeight || undefined,
 				} }
+				trailingContent={
+					<>
+						{ withTooltips && tooltipOpen && tooltipData && (
+							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
+								<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
+							</TooltipInPortal>
+						) }
+						{ htmlChildren }
+						{ otherChildren }
+					</>
+				}
 			>
-				{ 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 }
-					>
-						<defs>
-							<RadialWipeAnimation
-								id={ `radial-wipe-${ chartId }` }
-								radius={ outerRadius }
-								innerRadius={ innerRadius }
-							/>
-						</defs>
-
-						<Group
-							top={ centerY }
-							left={ centerX }
-							mask={ animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null }
+				{ ( { contentWidth, contentHeight } ) => {
+					const availableWidth = contentWidth > 0 ? contentWidth : 300;
+					const availableHeight = contentHeight > 0 ? contentHeight : 300;
+					const availableSize = Math.min( availableWidth, availableHeight );
+					const actualSize = size ? Math.min( size, availableSize ) : availableSize;
+
+					const width = actualSize;
+					const height = actualSize;
+
+					const radius = Math.min( width, height ) / 2;
+					const centerX = width / 2;
+					const centerY = height / 2;
+
+					const outerRadius = radius - padding;
+					const innerRadius = thickness === 0 ? 0 : outerRadius * ( 1 - thickness );
+
+					const maxCornerRadius = ( outerRadius - innerRadius ) / 2;
+					const cornerRadius = cornerScale
+						? Math.min( cornerScale * outerRadius, maxCornerRadius )
+						: 0;
+
+					return (
+						<Stack
+							ref={ containerRef }
+							align="center"
+							justify="center"
+							className={ styles[ 'pie-chart__centering' ] }
 						>
-							{ allSegmentsHidden ? (
-								<text
-									textAnchor="middle"
-									dy=".33em"
-									fill={ providerTheme.gridColor || '#ccc' }
-									fontSize="14"
-									fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
+							<svg
+								viewBox={ `0 0 ${ width } ${ height }` }
+								preserveAspectRatio="xMidYMid meet"
+								width={ width }
+								height={ height }
+							>
+								<defs>
+									<RadialWipeAnimation
+										id={ `radial-wipe-${ chartId }` }
+										radius={ outerRadius }
+										innerRadius={ innerRadius }
+									/>
+								</defs>
+
+								<Group
+									top={ centerY }
+									left={ centerX }
+									mask={
+										animation && ! prefersReducedMotion ? `url(#radial-wipe-${ chartId })` : null
+									}
 								>
-									{ __(
-										'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;
-											}
-
-											// 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"
-																/>
+									{ allSegmentsHidden ? (
+										<SvgEmptyState x={ 0 } y={ 0 } width={ width } height={ height }>
+											{ __(
+												'All segments are hidden. Click legend items to show data.',
+												'jetpack-charts'
+											) }
+										</SvgEmptyState>
+									) : (
+										<Pie< DataPointPercentageCalculated & { 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;
+													}
+
+													// 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"
+																	>
+																		{ arc.data.label }
+																	</text>
+																</g>
 															) }
-															<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>
-				</div>
-
-				{ legendPosition === 'bottom' && legendElement }
-
-				{ withTooltips && tooltipOpen && tooltipData && (
-					<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
-						<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
-					</TooltipInPortal>
-				) }
-
-				{ /* Render HTML component children from PieChart.HTML */ }
-				{ htmlChildren }
+													);
+												} );
+											} }
+										</Pie>
+									) }
 
-				{ /* Render other React children for backward compatibility */ }
-				{ otherChildren }
-			</Stack>
+									{ /* Render SVG children (like Group, Text) inside the SVG */ }
+									{ ! allSegmentsHidden && svgChildren }
+								</Group>
+							</svg>
+						</Stack>
+					);
+				} }
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };

package/src/charts/pie-chart/test/composition-api.test.tsx

@@ -1,15 +1,26 @@
 import { render, screen } from '@testing-library/react';
 import { Group } from '@visx/group';
 import '@testing-library/jest-dom';
+import { GlobalChartsProvider } from '../../../providers';
 import { PieChartUnresponsive as PieChart } from '../index';
 
 describe( 'PieChart Composition API', () => {
 	const mockData = [
-		{ label: 'A', value: 30, percentage: 30 },
-		{ label: 'B', value: 40, percentage: 40 },
-		{ label: 'C', value: 30, percentage: 30 },
+		{ label: 'A', value: 30 },
+		{ label: 'B', value: 40 },
+		{ label: 'C', value: 30 },
 	];
 
+	const renderWithChildren = ( props = {}, children = undefined ) => {
+		return render(
+			<GlobalChartsProvider>
+				<PieChart data={ mockData } size={ 400 } { ...props }>
+					{ children }
+				</PieChart>
+			</GlobalChartsProvider>
+		);
+	};
+
 	describe( 'Compound Components', () => {
 		it( 'renders PieChart.SVG children inside the SVG element', () => {
 			render(
@@ -148,4 +159,34 @@ describe( 'PieChart Composition API', () => {
 			expect( svg!.contains( newHtml ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'Composition Legend', () => {
+		test( 'renders composition legend as child component', () => {
+			renderWithChildren( {}, <PieChart.Legend /> );
+
+			const legendItems = screen.getAllByTestId( 'legend-item' );
+			expect( legendItems ).toHaveLength( 3 );
+			expect( legendItems[ 0 ] ).toHaveTextContent( 'A' );
+			expect( legendItems[ 1 ] ).toHaveTextContent( 'B' );
+			expect( legendItems[ 2 ] ).toHaveTextContent( 'C' );
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderWithChildren( { showLegend: false }, <PieChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 3 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderWithChildren( {}, <PieChart.Legend position="top" /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 3 );
+
+			// Legend should appear before the chart SVG in DOM order
+			const html = document.body.innerHTML;
+			expect( html.indexOf( 'data-testid="legend-horizontal"' ) ).toBeLessThan(
+				html.indexOf( 'data-testid="pie-segment"' )
+			);
+		} );
+	} );
 } );