@automattic/charts 0.44.0 → 0.46.0

package/dist/{types-cEbX_Q2K.d.ts → types-73KOEWs9.d.cts}

@@ -344,7 +344,9 @@ 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;
     /**

package/dist/{types-cEbX_Q2K.d.cts → types-73KOEWs9.d.ts}

@@ -344,7 +344,9 @@ 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;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "0.44.0",
+	"version": "0.46.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -150,7 +150,7 @@
 		"typecheck": "tsc --noEmit"
 	},
 	"dependencies": {
-		"@automattic/number-formatters": "^1.0.13",
+		"@automattic/number-formatters": "^1.0.14",
 		"@babel/runtime": "7.28.4",
 		"@react-spring/web": "9.7.5",
 		"@visx/annotation": "^3.12.0",
@@ -216,7 +216,7 @@
 		"sass-loader": "^16.0.0",
 		"storybook": "9.0.15",
 		"tsup": "8.5.0",
-		"typescript": "5.9.2",
+		"typescript": "5.9.3",
 		"webpack": "^5.88.0",
 		"webpack-cli": "^6.0.0"
 	},

package/src/components/bar-chart/bar-chart.tsx

@@ -15,6 +15,7 @@ import {
 	useChartId,
 	useChartRegistration,
 	useGlobalChartsContext,
+	useGlobalChartsTheme,
 	GlobalChartsContext,
 } from '../../providers';
 import { attachSubComponents } from '../../utils';
@@ -34,6 +35,7 @@ export interface BarChartProps extends BaseChartProps< SeriesData[] > {
 	orientation?: 'horizontal' | 'vertical';
 	withPatterns?: boolean;
 	showZeroValues?: boolean;
+	legendInteractive?: boolean;
 	children?: ReactNode;
 }
 
@@ -92,6 +94,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	orientation = 'vertical',
 	withPatterns = false,
 	showZeroValues = false,
+	legendInteractive = false,
 	children,
 } ) => {
 	const horizontal = orientation === 'horizontal';
@@ -127,7 +130,29 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		totalPoints,
 	} );
 
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const providerTheme = useGlobalChartsTheme();
+
+	// Add visibility information to series when using interactive legends
+	const seriesWithVisibility = useMemo( () => {
+		if ( ! chartId || ! legendInteractive ) {
+			return dataWithVisibleZeros.map( ( series, index ) => ( {
+				series,
+				index,
+				isVisible: true,
+			} ) );
+		}
+		return dataWithVisibleZeros.map( ( series, index ) => ( {
+			series,
+			index,
+			isVisible: isSeriesVisible( chartId, series.label ),
+		} ) );
+	}, [ dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive ] );
+
+	// Check if all series are hidden
+	const allSeriesHidden = useMemo( () => {
+		return seriesWithVisibility.every( ( { isVisible } ) => ! isVisible );
+	}, [ seriesWithVisibility ] );
 
 	const getBarBackground = useCallback(
 		( index: number ) => () =>
@@ -348,17 +373,37 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 					{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }
 
+					{ allSeriesHidden ? (
+						<text
+							x={ width / 2 }
+							y={ ( height - ( showLegend ? legendHeight : 0 ) ) / 2 }
+							textAnchor="middle"
+							fill={ providerTheme.gridStyles?.stroke || '#ccc' }
+							fontSize="14"
+							fontFamily="-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif"
+						>
+							{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
+						</text>
+					) : null }
+
 					<BarGroup padding={ chartOptions.barGroup.padding }>
-						{ dataWithVisibleZeros.map( ( seriesData, index ) => (
-							<BarSeries
-								key={ seriesData?.label }
-								dataKey={ seriesData?.label }
-								data={ seriesData.data as DataPointDate[] }
-								yAccessor={ chartOptions.accessors.yAccessor }
-								xAccessor={ chartOptions.accessors.xAccessor }
-								colorAccessor={ getBarBackground( index ) }
-							/>
-						) ) }
+						{ seriesWithVisibility.map( ( { series: seriesData, index, isVisible } ) => {
+							// Skip rendering invisible series
+							if ( ! isVisible ) {
+								return null;
+							}
+
+							return (
+								<BarSeries
+									key={ seriesData?.label }
+									dataKey={ seriesData?.label }
+									data={ seriesData.data as DataPointDate[] }
+									yAccessor={ chartOptions.accessors.yAccessor }
+									xAccessor={ chartOptions.accessors.xAccessor }
+									colorAccessor={ getBarBackground( index ) }
+								/>
+							);
+						} ) }
 					</BarGroup>
 
 					<Axis { ...chartOptions.axis.x } />
@@ -391,6 +436,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 						shape={ legendShape }
 						ref={ legendRef }
 						chartId={ chartId }
+						interactive={ legendInteractive }
 					/>
 				) }
 

package/src/components/bar-chart/test/bar-chart.test.tsx

@@ -563,4 +563,118 @@ describe( 'BarChart', () => {
 	} );
 
 	/* eslint-enable testing-library/no-node-access */
+
+	describe( 'Interactive Legend', () => {
+		it( 'filters series when interactive legend is enabled and series is toggled', async () => {
+			const user = userEvent.setup();
+
+			renderWithTheme( {
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-interactive-bar-chart',
+				data: [
+					{
+						label: 'Series A',
+						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+						options: {},
+					},
+					{
+						label: 'Series B',
+						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+						options: {},
+					},
+				],
+			} );
+
+			// Click on first legend item to hide it
+			const legendItems = screen.getAllByRole( 'button' );
+			await user.click( legendItems[ 0 ] );
+
+			// The series should now be hidden (aria-pressed = false)
+			const legendItem = screen.getAllByRole( 'button' )[ 0 ];
+			expect( legendItem ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
+		it( 'does not filter series when legendInteractive is false', () => {
+			renderWithTheme( {
+				showLegend: true,
+				legendInteractive: false,
+				chartId: 'test-non-interactive-bar-chart',
+				data: [
+					{
+						label: 'Series A',
+						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+						options: {},
+					},
+					{
+						label: 'Series B',
+						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+						options: {},
+					},
+				],
+			} );
+
+			// Legend items should not be interactive
+			const buttons = screen.queryAllByRole( 'button' );
+			expect( buttons ).toHaveLength( 0 );
+		} );
+
+		it( 'shows all series when chartId is missing even if legendInteractive is true', () => {
+			renderWithTheme( {
+				showLegend: true,
+				legendInteractive: true,
+				// No chartId provided
+				data: [
+					{
+						label: 'Series A',
+						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+						options: {},
+					},
+					{
+						label: 'Series B',
+						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+						options: {},
+					},
+				],
+			} );
+
+			// All legend items should be visible (not hidden)
+			const legendItems = screen.getAllByRole( 'button' );
+			legendItems.forEach( item => {
+				expect( item ).toHaveAttribute( 'aria-pressed', 'true' );
+			} );
+		} );
+
+		it( 'shows "All series are hidden" message when all series are toggled off', async () => {
+			const user = userEvent.setup();
+
+			renderWithTheme( {
+				showLegend: true,
+				legendInteractive: true,
+				chartId: 'test-all-hidden-bar-chart',
+				data: [
+					{
+						label: 'Series A',
+						data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+						options: {},
+					},
+					{
+						label: 'Series B',
+						data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+						options: {},
+					},
+				],
+			} );
+
+			// Hide all series
+			const legendItems = screen.getAllByRole( 'button' );
+			await user.click( legendItems[ 0 ] );
+			await user.click( legendItems[ 1 ] );
+
+			// Check for the "all series hidden" message
+			expect(
+				screen.getByText( /all series are hidden.*click legend items to show data/i )
+			).toBeInTheDocument();
+		} );
+	} );
 } );

package/src/components/leaderboard-chart/leaderboard-chart.tsx

@@ -62,12 +62,16 @@ const BarWithLabel = ( {
 	withOverlayLabel,
 	primaryColor,
 	secondaryColor,
+	isPrimaryVisible = true,
+	isComparisonVisible = true,
 }: {
 	entry: LeaderboardEntry;
 	withComparison?: boolean;
 	withOverlayLabel?: boolean;
 	primaryColor: string;
 	secondaryColor: string;
+	isPrimaryVisible?: boolean;
+	isComparisonVisible?: boolean;
 } ) => (
 	<div
 		className={ clsx( styles.barWithLabelContainer, {
@@ -76,15 +80,17 @@ const BarWithLabel = ( {
 	>
 		<BarLabel label={ entry.label } />
 
-		<div
-			className={ styles.bar }
-			style={ {
-				width: entry.currentShare + '%',
-				backgroundColor: primaryColor,
-			} }
-		></div>
+		{ isPrimaryVisible && (
+			<div
+				className={ styles.bar }
+				style={ {
+					width: entry.currentShare + '%',
+					backgroundColor: primaryColor,
+				} }
+			></div>
+		) }
 
-		{ withComparison && ! withOverlayLabel && (
+		{ withComparison && ! withOverlayLabel && isComparisonVisible && (
 			<div
 				className={ styles.bar }
 				style={ {
@@ -118,6 +124,7 @@ const BarWithLabel = ( {
  * @param props.legendShapeWidth  - Width of legend shapes in pixels
  * @param props.legendShapeHeight - Height of legend shapes in pixels
  * @param props.legendLabels      - Custom labels for legend items
+ * @param props.legendInteractive - Whether legend items are interactive (clickable to toggle series visibility)
  * @param props.children          - Child components for composition API
  * @param props.className         - Additional CSS class name
  * @param props.style             - Custom styling for the chart container
@@ -141,6 +148,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	legendShapeWidth = 8,
 	legendShapeHeight = 8,
 	legendLabels,
+	legendInteractive = false,
 	className,
 	style,
 	children,
@@ -158,7 +166,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 		secondaryColor: settingsSecondaryColor,
 		deltaColors,
 	} = leaderboardChartSettings;
-	const { getElementStyles } = useGlobalChartsContext();
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const { color: resolvedPrimaryColor } = getElementStyles( {
 		index: 0,
 		overrideColor: primaryColor || settingsPrimaryColor,
@@ -178,6 +186,36 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 		legendLabels,
 	} );
 
+	// Track visibility of primary and comparison series for interactive legends
+	const isPrimaryVisible = useMemo( () => {
+		if ( ! chartId || ! legendInteractive || legendItems.length === 0 ) {
+			return true;
+		}
+		return isSeriesVisible( chartId, legendItems[ 0 ].label );
+	}, [ chartId, legendInteractive, legendItems, isSeriesVisible ] );
+
+	const isComparisonVisible = useMemo( () => {
+		if ( ! chartId || ! legendInteractive || legendItems.length < 2 ) {
+			return true;
+		}
+		return isSeriesVisible( chartId, legendItems[ 1 ].label );
+	}, [ chartId, legendInteractive, legendItems, isSeriesVisible ] );
+
+	// Check if all series are hidden
+	const allSeriesHidden = useMemo( () => {
+		if ( ! legendInteractive ) return false;
+		if ( withComparison && ! withOverlayLabel ) {
+			return ! isPrimaryVisible && ! isComparisonVisible;
+		}
+		return ! isPrimaryVisible;
+	}, [
+		legendInteractive,
+		isPrimaryVisible,
+		isComparisonVisible,
+		withComparison,
+		withOverlayLabel,
+	] );
+
 	// Validate data
 	const isDataValid = Boolean( data && data.length > 0 );
 
@@ -242,38 +280,46 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					gap: showLegend ? '16px' : '0',
 				} }
 			>
-				<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
-					{ data.map( entry => {
-						const colorIndex = Math.sign( entry.delta ) + 1;
-						const deltaColor = deltaColors[ colorIndex ];
+				{ allSeriesHidden ? (
+					<div className={ styles.emptyState }>
+						{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
+					</div>
+				) : (
+					<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
+						{ data.map( entry => {
+							const colorIndex = Math.sign( entry.delta ) + 1;
+							const deltaColor = deltaColors[ colorIndex ];
 
-						return (
-							<Fragment key={ entry.id }>
-								<VStack spacing={ labelSpacing }>
-									<BarWithLabel
-										entry={ entry }
-										withComparison={ withComparison }
-										withOverlayLabel={ withOverlayLabel }
-										primaryColor={ resolvedPrimaryColor }
-										secondaryColor={ resolvedSecondaryColor }
-									/>
-								</VStack>
+							return (
+								<Fragment key={ entry.id }>
+									<VStack spacing={ labelSpacing }>
+										<BarWithLabel
+											entry={ entry }
+											withComparison={ withComparison }
+											withOverlayLabel={ withOverlayLabel }
+											primaryColor={ resolvedPrimaryColor }
+											secondaryColor={ resolvedSecondaryColor }
+											isPrimaryVisible={ isPrimaryVisible }
+											isComparisonVisible={ isComparisonVisible }
+										/>
+									</VStack>
 
-								<div
-									className={ clsx( styles.valueContainer, {
-										[ styles.overlayLabel ]: withOverlayLabel,
-									} ) }
-								>
-									<Text>{ valueFormatter( entry.currentValue ) }</Text>
+									<div
+										className={ clsx( styles.valueContainer, {
+											[ styles.overlayLabel ]: withOverlayLabel,
+										} ) }
+									>
+										{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
 
-									{ withComparison && (
-										<Text style={ { color: deltaColor } }>{ deltaFormatter( entry.delta ) }</Text>
-									) }
-								</div>
-							</Fragment>
-						);
-					} ) }
-				</Grid>
+										{ withComparison && isComparisonVisible && (
+											<Text style={ { color: deltaColor } }>{ deltaFormatter( entry.delta ) }</Text>
+										) }
+									</div>
+								</Fragment>
+							);
+						} ) }
+					</Grid>
+				) }
 
 				{ showLegend && (
 					<Legend
@@ -284,6 +330,7 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 						shapeWidth={ legendShapeWidth }
 						shapeHeight={ legendShapeHeight }
 						chartId={ chartId }
+						interactive={ legendInteractive }
 					/>
 				) }
 

package/src/components/leaderboard-chart/test/leaderboard-chart.test.tsx

@@ -291,4 +291,52 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Interactive Legend', () => {
+		it( 'renders legend as interactive when legendInteractive is true', () => {
+			render(
+				<LeaderboardChart
+					data={ mockData }
+					withComparison={ true }
+					showLegend={ true }
+					legendInteractive={ true }
+				/>
+			);
+
+			const legendItems = screen.getAllByRole( 'button' );
+			expect( legendItems.length ).toBeGreaterThan( 0 );
+		} );
+
+		it( 'renders legend as non-interactive when legendInteractive is false', () => {
+			render(
+				<LeaderboardChart
+					data={ mockData }
+					withComparison={ true }
+					showLegend={ true }
+					legendInteractive={ false }
+				/>
+			);
+
+			// Legend items should not have button role when not interactive
+			const legendItems = screen.queryAllByRole( 'button' );
+			expect( legendItems ).toHaveLength( 0 );
+		} );
+
+		it( 'shows all data when all series are visible', () => {
+			render(
+				<LeaderboardChart
+					data={ mockData }
+					withComparison={ true }
+					showLegend={ true }
+					legendInteractive={ true }
+				/>
+			);
+
+			// All values should be visible
+			expect( screen.getByText( '12.5K' ) ).toBeInTheDocument();
+			expect( screen.getByText( '8.8K' ) ).toBeInTheDocument();
+			expect( screen.getByText( '+25%' ) ).toBeInTheDocument();
+			expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
+		} );
+	} );
 } );

package/src/components/leaderboard-chart/types.ts

@@ -15,6 +15,7 @@ export interface LeaderboardChartProps
 		| 'width'
 		| 'height'
 		| 'size'
+		| 'legendInteractive'
 	> {
 	/**
 	 * Whether to show comparison data