@automattic/charts 0.57.0 → 0.59.0

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

@@ -8,7 +8,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,
@@ -18,12 +22,19 @@ import {
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
 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 } from '../private/with-responsive';
 import styles from './pie-semi-circle-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 { ResponsiveConfig } from '../private/with-responsive';
 import type { PieArcDatum } from '@visx/shape/lib/shapes/Pie';
@@ -34,9 +45,9 @@ import type { FC, MouseEvent, ReactNode } from 'react';
  */
 export type PieSemiCircleChartRenderTooltipParams = {
 	/**
-	 * 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;
 };
 
 /**
@@ -98,13 +109,6 @@ export interface PieSemiCircleChartProps extends BaseChartProps< DataPointPercen
 	 */
 	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;
-
 	/**
 	 * Horizontal offset for tooltip positioning in pixels (default: 0)
 	 */
@@ -131,7 +135,7 @@ type PieSemiCircleChartResponsiveComponent = ChartComponentWithComposition<
 	PieSemiCircleChartBaseProps & ResponsiveConfig
 >;
 
-export type ArcData = PieArcDatum< DataPointPercentage >;
+export type ArcData = PieArcDatum< DataPointPercentageCalculated >;
 
 /**
  * Validates the semi-circle pie chart data
@@ -144,15 +148,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 is greater than 0
-	const totalPercentage = data.reduce( ( sum, item ) => sum + item.percentage, 0 );
-	if ( totalPercentage <= 0 ) {
-		return { isValid: false, message: 'Invalid percentage total: Must be greater than 0' };
+	// 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: '' };
@@ -167,15 +171,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	clockwise = true,
 	withTooltips = false,
 	showLegend = false,
-	legendOrientation = 'horizontal',
-	legendPosition = 'bottom',
-	legendAlignment = 'center',
-	legendMaxWidth,
-	legendTextOverflow = 'wrap',
-	legendItemClassName,
-	legendShape = 'circle',
+	legend = {},
 	legendValueDisplay = 'percentage',
-	legendInteractive = false,
 	label,
 	animation,
 	note,
@@ -186,11 +183,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	renderTooltip = renderDefaultPieSemiCircleTooltip,
 	gap = 'md',
 } ) => {
+	const legendInteractive = legend.interactive ?? false;
+	const legendPosition = legend.position ?? 'bottom';
+
 	const chartId = useChartId( providedChartId );
-	// Measure the SVG wrapper to calculate constrained dimensions
-	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
@@ -245,9 +243,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 
 	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,
@@ -256,12 +257,12 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Define accessors with useMemo to avoid changing dependencies
 	const accessors = useMemo(
 		() => ( {
-			value: ( d: DataPointPercentage ) => d.value,
+			value: ( d: DataPointPercentageCalculated ) => d.value,
 			sort: (
-				a: DataPointPercentage & { index: number },
-				b: DataPointPercentage & { index: number }
+				a: DataPointPercentageCalculated & { index: number },
+				b: DataPointPercentageCalculated & { index: number }
 			) => b.value - a.value,
-			fill: ( d: DataPointPercentage & { index: number } ) =>
+			fill: ( d: DataPointPercentageCalculated & { index: number } ) =>
 				getElementStyles( { data: d, index: d.index } ).color,
 		} ),
 		[ getElementStyles ]
@@ -277,7 +278,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const legendItems = useChartLegendItems( legendData, legendOptions );
 
 	// Process children to extract compound components
-	const { svgChildren, htmlChildren, otherChildren } = useChartChildren(
+	const { svgChildren, htmlChildren, legendChildren, otherChildren } = useChartChildren(
 		children,
 		'PieSemiCircleChart'
 	);
@@ -321,18 +322,6 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		);
 	}
 
-	// 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;
-	const radius = height; // For a semi-circle, radius equals the SVG height
-	const innerRadius = radius * ( 1 - thickness );
-
 	// Map data with index for color assignment
 	// When interactive, we need to find the original index to maintain consistent colors
 	const dataWithIndex = visibleData.map( d => {
@@ -349,28 +338,25 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 
 	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-semi-circle-chart',
@@ -385,118 +371,130 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					height: propHeight || undefined,
 				} }
 				data-testid="pie-chart-container"
+				trailingContent={
+					<>
+						{ withTooltips && tooltipOpen && tooltipData && (
+							<TooltipInPortal top={ tooltipTop || 0 } left={ tooltipLeft || 0 }>
+								<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
+							</TooltipInPortal>
+						) }
+						{ htmlChildren }
+						{ otherChildren }
+					</>
+				}
 			>
-				{ 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"
-					>
-						<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 }
+				{ ( { contentWidth, contentHeight } ) => {
+					// Calculate chart dimensions maintaining the 2:1 width-to-height ratio.
+					// Use measured dimensions to respect height constraints, falling back
+					// to explicit props during initial render before measurement is available.
+					const availableWidth = contentWidth > 0 ? contentWidth : effectiveWidth;
+					const availableHeight =
+						contentHeight > 0 ? contentHeight : 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;
+					const radius = height; // For a semi-circle, radius equals the SVG height
+					const innerRadius = radius * ( 1 - thickness );
+
+					return (
+						<Stack
+							ref={ containerRef }
+							align="center"
+							justify="center"
+							className={ styles[ 'pie-semi-circle-chart__centering' ] }
 						>
-							{ 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 }
+							<svg
+								width={ width }
+								height={ height }
+								viewBox={ `0 0 ${ width } ${ height }` }
+								data-testid="pie-chart-svg"
+							>
+								<defs>
+									<RadialWipeAnimation
+										id={ `radial-wipe-${ chartId }` }
+										radius={ radius }
 										innerRadius={ innerRadius }
-										cornerRadius={ 3 }
-										padAngle={ PAD_ANGLE }
-										startAngle={ startAngle }
-										endAngle={ endAngle }
-										pieSort={ accessors.sort }
-									>
-										{ pie => {
-											return pie.arcs.map( arc => (
-												<g
-													key={ arc.data.label }
-													onMouseMove={ withTooltips ? handleArcMouseMove( arc ) : undefined }
-													onMouseLeave={ withTooltips ? handleMouseLeave : undefined }
+										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 ? (
+										<SvgEmptyState x={ 0 } y={ -radius / 2 } width={ width } height={ height }>
+											{ __(
+												'All segments are hidden. Click legend items to show data.',
+												'jetpack-charts'
+											) }
+										</SvgEmptyState>
+									) : (
+										<>
+											{ /* Pie chart */ }
+											<Pie< DataPointPercentageCalculated & { index: number } >
+												data={ dataWithIndex }
+												pieValue={ accessors.value }
+												outerRadius={ radius }
+												innerRadius={ innerRadius }
+												cornerRadius={ 3 }
+												padAngle={ PAD_ANGLE }
+												startAngle={ startAngle }
+												endAngle={ endAngle }
+												pieSort={ accessors.sort }
+											>
+												{ 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 }
 												>
-													<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 }>
-						<div role="tooltip">{ renderTooltip( { tooltipData } ) }</div>
-					</TooltipInPortal>
-				) }
-
-				{ /* Render HTML children from composition API */ }
-				{ htmlChildren }
+													{ label }
+												</Text>
+												<Text
+													textAnchor="middle"
+													verticalAnchor="start"
+													y={ -20 } // Position between label and chart
+													className={ styles.note }
+												>
+													{ note }
+												</Text>
+											</Group>
 
-				{ /* Render any other children that aren't compound components */ }
-				{ otherChildren }
-			</Stack>
+											{ /* Render SVG children from composition API */ }
+											{ ! allSegmentsHidden && svgChildren }
+										</>
+									) }
+								</Group>
+							</svg>
+						</Stack>
+					);
+				} }
+			</ChartLayout>
 		</SingleChartContext.Provider>
 	);
 };

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

@@ -18,21 +18,19 @@ const mockData = [
 		label: 'Category A',
 		value: 30,
 		valueDisplay: '30%',
-		percentage: 30,
 	},
 	{
 		label: 'Category B',
 		value: 70,
 		valueDisplay: '70%',
-		percentage: 70,
 	},
 ];
 
 // Helper function to render component with providers
-const renderPieChart = props =>
+const renderPieChart = ( props, children = undefined ) =>
 	render(
 		<GlobalChartsProvider>
-			<PieSemiCircleChart { ...props } />
+			<PieSemiCircleChart { ...props }>{ children }</PieSemiCircleChart>
 		</GlobalChartsProvider>
 	);
 
@@ -64,9 +62,9 @@ describe( 'PieSemiCircleChart', () => {
 	it( 'shows tooltip on segment hover when withTooltips is true', async () => {
 		const user = userEvent.setup();
 		const testData = [
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 5 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 1 },
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 2 },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
 		];
 
 		renderPieChart( { data: testData, withTooltips: true, width: 400 } );
@@ -86,9 +84,9 @@ describe( 'PieSemiCircleChart', () => {
 	it( 'hides tooltip on mouse leave', async () => {
 		const user = userEvent.setup();
 		const testData = [
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 5 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 1 },
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 2 },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
 		];
 
 		renderPieChart( { data: testData, withTooltips: true, width: 400 } );
@@ -113,9 +111,9 @@ describe( 'PieSemiCircleChart', () => {
 	it( 'renders custom tooltip when renderTooltip prop is provided', async () => {
 		const user = userEvent.setup();
 		const testData = [
-			{ label: 'MacOS', value: 30000, valueDisplay: '30K', percentage: 5 },
-			{ label: 'Linux', value: 22000, valueDisplay: '22K', percentage: 1 },
-			{ label: 'Windows', value: 80000, valueDisplay: '80K', percentage: 2 },
+			{ label: 'MacOS', value: 30000, valueDisplay: '30K' },
+			{ label: 'Linux', value: 22000, valueDisplay: '22K' },
+			{ label: 'Windows', value: 80000, valueDisplay: '80K' },
 		];
 
 		const customTooltipRenderer = jest.fn( ( { tooltipData } ) => (
@@ -148,10 +146,12 @@ describe( 'PieSemiCircleChart', () => {
 				tooltipData: expect.objectContaining( {
 					label: 'MacOS',
 					value: 30000,
-					percentage: 5,
 				} ),
 			} )
 		);
+		// Verify percentage is calculated (approximately 22.73%)
+		const callArgs = customTooltipRenderer.mock.calls[ 0 ][ 0 ];
+		expect( callArgs.tooltipData.percentage ).toBeCloseTo( 22.73, 1 );
 	} );
 
 	it( 'applies custom className', () => {
@@ -193,21 +193,21 @@ describe( 'PieSemiCircleChart', () => {
 			expect( screen.getByText( 'No data available' ) ).toBeInTheDocument();
 		} );
 
-		test( 'handles zero total percentage', () => {
+		test( 'handles zero total value', () => {
 			renderPieChart( {
 				data: [
-					{ label: 'A', value: 0, percentage: 0 },
-					{ label: 'B', value: 0, percentage: 0 },
+					{ label: 'A', value: 0 },
+					{ label: 'B', value: 0 },
 				],
 			} );
 			expect(
-				screen.getByText( 'Invalid percentage total: Must be greater than 0' )
+				screen.getByText( 'Invalid data: Total value must be greater than 0' )
 			).toBeInTheDocument();
 		} );
 
 		test( 'handles single data point', () => {
 			renderPieChart( {
-				data: [ { label: 'Single', value: 100, percentage: 50 } ],
+				data: [ { label: 'Single', value: 100 } ],
 			} );
 			expect( screen.getByTestId( 'pie-segment' ) ).toBeInTheDocument();
 		} );
@@ -215,8 +215,8 @@ describe( 'PieSemiCircleChart', () => {
 		test( 'handles negative values', () => {
 			renderPieChart( {
 				data: [
-					{ label: 'A', value: -30, percentage: -30 },
-					{ label: 'B', value: 130, percentage: 130 },
+					{ label: 'A', value: -30 },
+					{ label: 'B', value: 130 },
 				],
 			} );
 			expect(
@@ -256,18 +256,46 @@ describe( 'PieSemiCircleChart', () => {
 		} );
 	} );
 
+	describe( 'Composition Legend', () => {
+		test( 'renders composition legend as child component', () => {
+			renderPieChart( { data: mockData }, <PieSemiCircleChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+			expect( screen.getByText( 'Category A' ) ).toBeInTheDocument();
+			expect( screen.getByText( 'Category B' ) ).toBeInTheDocument();
+		} );
+
+		test( 'renders composition legend regardless of showLegend value', () => {
+			renderPieChart( { data: mockData, showLegend: false }, <PieSemiCircleChart.Legend /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+		} );
+
+		test( 'renders composition legend in top position', () => {
+			renderPieChart( { data: mockData }, <PieSemiCircleChart.Legend position="top" /> );
+
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
+
+			// 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-chart-svg"' )
+			);
+		} );
+	} );
+
 	describe( 'Interactive Legend', () => {
 		test( 'filters segments when interactive legend is enabled and segment is toggled', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderPieChart( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-interactive-semi-circle-chart',
 			} );
 
@@ -292,14 +320,14 @@ describe( 'PieSemiCircleChart', () => {
 		test( 'shows empty state when all segments are hidden', async () => {
 			const user = userEvent.setup();
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderPieChart( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: true,
+				legend: { interactive: true },
 				chartId: 'test-all-hidden-semi-circle-chart',
 			} );
 
@@ -319,14 +347,14 @@ describe( 'PieSemiCircleChart', () => {
 
 		test( 'does not filter segments when legendInteractive is false', () => {
 			const testData = [
-				{ label: 'Segment A', value: 50, percentage: 50 },
-				{ label: 'Segment B', value: 50, percentage: 50 },
+				{ label: 'Segment A', value: 50 },
+				{ label: 'Segment B', value: 50 },
 			];
 
 			renderPieChart( {
 				data: testData,
 				showLegend: true,
-				legendInteractive: false,
+				legend: { interactive: false },
 				chartId: 'test-non-interactive-semi-circle-chart',
 			} );
 

package/src/charts/private/chart-composition/index.ts

@@ -1,4 +1,6 @@
 export { ChartSVG } from './chart-svg';
 export { ChartHTML } from './chart-html';
+export { renderLegendSlot } from './render-legend-slot';
 export { useChartChildren } from './use-chart-children';
+export type { LegendChild } from './use-chart-children';
 export type { BaseChartSubComponents, ChartComponentWithComposition } from './types';