@automattic/charts 0.44.0 → 0.45.0

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

@@ -3,9 +3,10 @@ import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { Text } from '@visx/text';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
-import { useElementHeight } from '../../hooks';
+import { useElementHeight, useInteractiveLegendData } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -70,6 +71,13 @@ 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)
 	 */
@@ -133,6 +141,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	legendItemClassName,
 	legendShape = 'circle',
 	legendValueDisplay = 'percentage',
+	legendInteractive = false,
 	label,
 	note,
 	className,
@@ -183,7 +192,15 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Validate data first to get validation result
 	const { isValid, message } = validateData( data );
 
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+
+	// Filter and recalculate data for interactive legends
+	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
+		data,
+		chartId,
+		legendInteractive,
+		isSeriesVisible,
+	} );
 
 	// Define accessors with useMemo to avoid changing dependencies
 	const accessors = useMemo(
@@ -205,8 +222,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 		[ legendValueDisplay ]
 	);
 
-	// Create legend items using the reusable hook
-	const legendItems = useChartLegendItems( data, legendOptions );
+	// Create legend items using legendData (has recalculated percentages for visible items)
+	const legendItems = useChartLegendItems( legendData, legendOptions );
 
 	// Process children to extract compound components
 	const { svgChildren, htmlChildren, otherChildren } = useChartChildren(
@@ -253,10 +270,14 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	const innerRadius = radius * ( 1 - thickness );
 
 	// Map data with index for color assignment
-	const dataWithIndex = data.map( ( d, index ) => ( {
-		...d,
-		index,
-	} ) );
+	// When interactive, we need to find the original index to maintain consistent colors
+	const dataWithIndex = visibleData.map( d => {
+		const originalIndex = data.findIndex( item => item.label === d.label );
+		return {
+			...d,
+			index: originalIndex >= 0 ? originalIndex : 0,
+		};
+	} );
 
 	// Configure pie angles based on clockwise direction
 	const startAngle = clockwise ? -Math.PI / 2 : Math.PI / 2;
@@ -287,57 +308,74 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 				>
 					{ /* Main chart group centered horizontally and positioned at bottom */ }
 					<Group top={ chartHeight } left={ width / 2 }>
-						{ /* 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 }
-						>
-							{ 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
+						{ allSegmentsHidden ? (
+							<text
 								textAnchor="middle"
-								verticalAnchor="start"
-								y={ -20 } // Position between label and chart
-								className={ styles.note }
+								y={ -radius / 2 }
+								fill="#ccc"
+								fontSize="14"
+								fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
 							>
-								{ note }
-							</Text>
-						</Group>
-
-						{ /* Render SVG children from composition API */ }
-						{ svgChildren }
+								{ __(
+									'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 }
+								>
+									{ 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>
 
@@ -360,6 +398,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 						shape={ legendShape }
 						ref={ legendRef }
 						chartId={ chartId }
+						interactive={ legendInteractive }
 					/>
 				) }
 

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

@@ -178,4 +178,88 @@ describe( 'PieSemiCircleChart', () => {
 			).toBeInTheDocument();
 		} );
 	} );
+
+	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 },
+			];
+
+			renderPieChart( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-interactive-semi-circle-chart',
+			} );
+
+			// Initially both segments should be visible
+			let segments = screen.getAllByTestId( 'pie-segment' );
+			expect( segments ).toHaveLength( 2 );
+
+			// Click first legend item to hide segment A
+			const legendItem = screen.getByRole( 'button', { name: /Segment A/i } );
+			await user.click( legendItem );
+
+			// Only one segment should remain
+			await waitFor( () => {
+				segments = screen.getAllByTestId( 'pie-segment' );
+				expect( segments ).toHaveLength( 1 );
+			} );
+
+			// Legend item should be marked as hidden
+			expect( legendItem ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
+		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 },
+			];
+
+			renderPieChart( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-all-hidden-semi-circle-chart',
+			} );
+
+			// Hide both segments
+			const legendItems = screen.getAllByRole( 'button' );
+			await user.click( legendItems[ 0 ] );
+			await user.click( legendItems[ 1 ] );
+
+			// Should show empty state message
+			await waitFor( () => {
+				expect( screen.getByText( /all segments are hidden/i ) ).toBeInTheDocument();
+			} );
+
+			// Should not render any segments
+			expect( screen.queryAllByTestId( 'pie-segment' ) ).toHaveLength( 0 );
+		} );
+
+		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 },
+			];
+
+			renderPieChart( {
+				data: testData,
+				showLegend: true,
+				legendInteractive: false,
+				chartId: 'test-non-interactive-semi-circle-chart',
+			} );
+
+			// Legend items should not be buttons
+			const buttons = screen.queryAllByRole( 'button' );
+			expect( buttons ).toHaveLength( 0 );
+
+			// All segments should be visible
+			const segments = screen.getAllByTestId( 'pie-segment' );
+			expect( segments ).toHaveLength( 2 );
+		} );
+	} );
 } );

package/src/hooks/index.ts

@@ -6,3 +6,4 @@ export { useChartMargin } from './use-chart-margin';
 export { useElementHeight } from './use-element-height';
 export { useTextTruncation } from './use-text-truncation';
 export { useZeroValueDisplay } from './use-zero-value-display';
+export { useInteractiveLegendData } from './use-interactive-legend-data';

package/src/hooks/use-interactive-legend-data.ts

@@ -0,0 +1,138 @@
+import { useMemo } from 'react';
+
+/**
+ * Data point interface for charts with interactive legends.
+ * Requires label for series identification, value for calculations, and percentage for display.
+ */
+interface DataPointWithPercentage {
+	label: string;
+	value: number;
+	percentage: number;
+}
+
+/**
+ * Parameters for the useInteractiveLegendData hook.
+ */
+interface UseInteractiveLegendDataParams< T extends DataPointWithPercentage > {
+	/** The chart data to filter based on legend visibility */
+	data: T[];
+	/** Unique chart identifier, required for interactive legends */
+	chartId: string | undefined;
+	/** Whether interactive legend filtering is enabled */
+	legendInteractive: boolean;
+	/** Function to check if a series is visible in the legend */
+	isSeriesVisible: ( chartId: string, label: string ) => boolean;
+}
+
+/**
+ * Return value from the useInteractiveLegendData hook.
+ */
+interface UseInteractiveLegendDataResult< T extends DataPointWithPercentage > {
+	/** Filtered data array containing only visible segments with recalculated percentages */
+	visibleData: T[];
+	/** Boolean indicating if all segments are hidden */
+	allSegmentsHidden: boolean;
+	/**
+	 * Legend data with recalculated percentages for visible items.
+	 * Uses original data for hidden items, but shows recalculated percentages for visible ones.
+	 * This ensures the legend displays accurate percentages while maintaining all entries.
+	 */
+	legendData: T[];
+}
+
+/**
+ * Custom hook to filter and recalculate chart data for interactive legends.
+ *
+ * When interactive legends are enabled, this hook:
+ * 1. Filters data to show only visible series based on legend selection
+ * 2. Recalculates percentages so visible segments total 100%
+ * 3. Tracks whether all segments are hidden to show empty state
+ *
+ * This is particularly useful for pie charts, donut charts, and semi-circle charts
+ * where segment visibility and percentages need to be dynamically adjusted.
+ *
+ * @example
+ * ```tsx
+ * const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+ *   data: chartData,
+ *   chartId: 'my-pie-chart',
+ *   legendInteractive: true,
+ *   isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
+ * });
+ *
+ * // Use legendData for creating legend items (shows recalculated percentages)
+ * const legendItems = useChartLegendItems(legendData, legendOptions);
+ *
+ * if (allSegmentsHidden) {
+ *   return <EmptyState />;
+ * }
+ *
+ * // Use visibleData for rendering the chart (only visible segments)
+ * return <PieChart data={visibleData} />;
+ * ```
+ *
+ * @param params                   - Configuration object for the hook
+ * @param params.data              - The chart data to filter
+ * @param params.chartId           - Unique identifier for the chart (required for interactive mode)
+ * @param params.legendInteractive - Whether to enable interactive filtering
+ * @param params.isSeriesVisible   - Function to check series visibility
+ * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
+ */
+export const useInteractiveLegendData = < T extends DataPointWithPercentage >( {
+	data,
+	chartId,
+	legendInteractive,
+	isSeriesVisible,
+}: UseInteractiveLegendDataParams< T > ): UseInteractiveLegendDataResult< T > => {
+	// Filter and recalculate data for interactive legends
+	const visibleData = useMemo( () => {
+		// If interactive mode is disabled or no chartId, return all data unchanged
+		if ( ! chartId || ! legendInteractive ) {
+			return data;
+		}
+
+		// Filter to only visible segments based on legend state
+		const filtered = data.filter( segment => isSeriesVisible( chartId, segment.label ) );
+
+		// If no segments are visible, return empty array
+		if ( filtered.length === 0 ) {
+			return [];
+		}
+
+		// Recalculate percentages so visible segments total 100%
+		const totalValue = filtered.reduce( ( sum, segment ) => sum + segment.value, 0 );
+
+		return filtered.map( segment => ( {
+			...segment,
+			percentage: totalValue > 0 ? ( segment.value / totalValue ) * 100 : 0,
+		} ) );
+	}, [ data, chartId, isSeriesVisible, legendInteractive ] );
+
+	// Check if all segments are hidden (only relevant in interactive mode)
+	const allSegmentsHidden = useMemo( () => {
+		return legendInteractive && visibleData.length === 0;
+	}, [ legendInteractive, visibleData ] );
+
+	// Prepare legend data with recalculated percentages for visible items
+	// This maintains all legend entries but shows updated percentages for visible segments
+	const legendData = useMemo( () => {
+		if ( ! legendInteractive || ! chartId ) {
+			return data;
+		}
+
+		// Map original data to show recalculated percentages for visible items
+		return data.map( segment => {
+			const isVisible = isSeriesVisible( chartId, segment.label );
+			if ( ! isVisible ) {
+				// Return original data for hidden items
+				return segment;
+			}
+
+			// For visible items, find the recalculated percentage from visibleData
+			const recalculated = visibleData.find( d => d.label === segment.label );
+			return recalculated || segment;
+		} );
+	}, [ data, visibleData, legendInteractive, chartId, isSeriesVisible ] );
+
+	return { visibleData, allSegmentsHidden, legendData };
+};

package/src/types.ts

@@ -365,7 +365,9 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	legendItemClassName?: string;
 	/**
 	 * Enable interactive legend items that can toggle series visibility.
-	 * Currently only supported for LineChart. Requires chartId and GlobalChartsProvider.
+	 * Supported for LineChart, PieChart, and PieSemiCircleChart.
+	 * Requires chartId and GlobalChartsProvider.
+	 * For pie charts, percentages are recalculated so visible segments total 100%.
 	 */
 	legendInteractive?: boolean;
 	/**