@automattic/charts 3.0.0 → 3.1.0

package/src/charts/line-chart/test/line-chart.test.tsx

@@ -1,12 +1,14 @@
 /* eslint-disable react/jsx-no-bind */
 
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { render, screen, waitFor, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GlyphDiamond } from '@visx/glyph';
 import { createElement, createRef } from 'react';
 import { GlobalChartsProvider, defaultTheme } from '../../../providers';
+import { useGlobalChartsContext } from '../../../providers/chart-context/hooks/use-global-charts-context';
 import LineChart, { LineChartUnresponsive } from '../line-chart';
-import type { SingleChartRef } from '../../private/single-chart-context';
+import type { GlobalChartsContextValue } from '../../../providers/chart-context/types';
+import type { ChartInstanceRef } from '../../private/chart-instance-context';
 
 // Mock useElementSize to return non-zero dimensions in jsdom so charts render
 const mockRefCallback = jest.fn();
@@ -902,7 +904,7 @@ describe( 'LineChart', () => {
 
 	describe( 'Chart Ref Interface', () => {
 		test( 'exposes getScales method via ref', () => {
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			renderUnwrappedWithTheme( {}, 'default', ref );
 
 			expect( ref.current?.getScales() ).toBeDefined();
@@ -911,7 +913,7 @@ describe( 'LineChart', () => {
 		} );
 
 		test( 'exposes getChartDimensions method via ref', () => {
-			const ref = createRef< SingleChartRef >();
+			const ref = createRef< ChartInstanceRef >();
 			renderUnwrappedWithTheme( { width: 800, height: 400 }, 'default', ref );
 
 			const dimensions = ref.current?.getChartDimensions();
@@ -1298,7 +1300,7 @@ describe( 'LineChart', () => {
 			expect( buttons ).toHaveLength( 0 );
 		} );
 
-		it( 'shows all series when chartId is missing even if legendInteractive is true', () => {
+		it( 'shows all series when nothing has been hidden', () => {
 			render(
 				<GlobalChartsProvider>
 					<LineChartUnresponsive
@@ -1317,6 +1319,136 @@ describe( 'LineChart', () => {
 				expect( item ).toHaveAttribute( 'aria-pressed', 'true' );
 			} );
 		} );
+
+		it( 'hides a series programmatically when the legend is not interactive', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-line"
+						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: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.queryByText( /all series are hidden/i ) ).not.toBeInTheDocument();
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-line', 'Series A' );
+				context.toggleSeriesVisibility( 'test-programmatic-line', 'Series B' );
+			} );
+
+			expect( screen.getByText( /all series are hidden/i ) ).toBeInTheDocument();
+		} );
+
+		it( 'omits the click instruction when the legend cannot be clicked', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-empty-copy-line"
+						data={ [
+							{
+								label: 'Series A',
+								data: [ { date: new Date( '2024-01-01' ), value: 10, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-empty-copy-line', 'Series A' );
+			} );
+
+			expect( screen.getByText( 'All series are hidden.' ) ).toBeInTheDocument();
+			expect( screen.queryByText( /click legend items/i ) ).not.toBeInTheDocument();
+		} );
+
+		it( 'pins the value axis across a programmatic hide when rescaleYOnVisibilityChange is false', () => {
+			let context: GlobalChartsContextValue;
+			const Grab = () => {
+				context = useGlobalChartsContext();
+				return null;
+			};
+			const ref = createRef< ChartInstanceRef >();
+
+			render(
+				<GlobalChartsProvider>
+					<Grab />
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: false } }
+						chartId="test-programmatic-pin-line"
+						rescaleYOnVisibilityChange={ false }
+						ref={ ref }
+						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: 200, label: 'Jan 1' } ],
+								options: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const before = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( before ).toBeDefined();
+
+			act( () => {
+				context.toggleSeriesVisibility( 'test-programmatic-pin-line', 'Series B' );
+			} );
+
+			const after = (
+				ref.current?.getScales()?.yScale as { domain: () => number[] } | undefined
+			 )?.domain();
+			expect( after ).toEqual( before );
+		} );
 	} );
 
 	// The line is not animated, so it clips only while actually zoomed.
@@ -1523,4 +1655,129 @@ describe( 'LineChart', () => {
 			).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'defaultHiddenSeries', () => {
+		it( 'renders a series hidden when named in defaultHiddenSeries', () => {
+			render(
+				<GlobalChartsProvider>
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId="test-default-hidden-line"
+						defaultHiddenSeries={ [ 'Series B' ] }
+						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: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			const items = screen.getAllByRole( 'button' );
+			expect( items[ 0 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+			expect( items[ 1 ] ).toHaveAttribute( 'aria-pressed', 'false' );
+		} );
+
+		it( 'lets the user reveal a series seeded hidden', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId="test-default-hidden-reveal-line"
+						defaultHiddenSeries={ [ 'Series B' ] }
+						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: {},
+							},
+						] }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+
+			expect( screen.getAllByRole( 'button' )[ 1 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+		} );
+
+		it( 'keeps a revealed series visible after a data change', async () => {
+			// Matters specifically at chart level: useChartRegistration unregisters and
+			// re-registers whenever legendItems change, which a data prop change triggers.
+			// A hook-level harness has no registration at all, so it can't catch a
+			// regression where re-registration re-triggers the seeding effect.
+			const user = userEvent.setup();
+			const chartId = 'test-default-hidden-data-change-line';
+
+			const makeData = ( seriesAValue: number ) => [
+				{
+					label: 'Series A',
+					data: [ { date: new Date( '2024-01-01' ), value: seriesAValue, label: 'Jan 1' } ],
+					options: {},
+				},
+				{
+					label: 'Series B',
+					data: [ { date: new Date( '2024-01-01' ), value: 20, label: 'Jan 1' } ],
+					options: {},
+				},
+			];
+
+			const { rerender } = render(
+				<GlobalChartsProvider>
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId={ chartId }
+						defaultHiddenSeries={ [ 'Series B' ] }
+						data={ makeData( 10 ) }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getAllByRole( 'button' )[ 1 ] );
+			expect( screen.getAllByRole( 'button' )[ 1 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+
+			rerender(
+				<GlobalChartsProvider>
+					<LineChartUnresponsive
+						width={ 500 }
+						height={ 300 }
+						withGradientFill={ false }
+						showLegend={ true }
+						legend={ { interactive: true } }
+						chartId={ chartId }
+						defaultHiddenSeries={ [ 'Series B' ] }
+						data={ makeData( 30 ) }
+					/>
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getAllByRole( 'button' )[ 1 ] ).toHaveAttribute( 'aria-pressed', 'true' );
+		} );
+	} );
 } );

package/src/charts/line-chart/types.ts

@@ -3,6 +3,7 @@ import type {
 	DataPointDate,
 	SeriesData,
 	SeriesChartLegendConfig,
+	SeriesVisibilityProps,
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
@@ -28,7 +29,7 @@ export type RenderLineGlyphProps< Datum extends object > = GlyphProps< Datum > &
 	position?: 'start' | 'end';
 };
 
-export interface LineChartProps extends BaseChartProps< SeriesData[] > {
+export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */
@@ -53,8 +54,8 @@ export interface LineChartProps extends BaseChartProps< SeriesData[] > {
 	 */
 	zoomable?: boolean;
 	/**
-	 * Whether the Y axis rescales to fit only the visible series when series are
-	 * hidden or shown through the interactive legend.
+	 * Whether the Y axis rescales to fit only the visible series when the set of
+	 * visible series changes — via the interactive legend or otherwise.
 	 * Defaults to `true` (the pre-existing behaviour). Set to `false` to pin the Y
 	 * axis to the full data extent so hiding series does not move the chart's
 	 * baseline — useful for comparison charts. Matches `AreaChart`.

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

@@ -1,14 +1,13 @@
 import { Group } from '@visx/group';
 import { Pie } from '@visx/shape';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
-import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
 import {
 	useDataWithPercentages,
-	useInteractiveLegendData,
+	useLegendVisibilityData,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -24,10 +23,10 @@ import { attachSubComponents, resolveFontSize } from '../../utils';
 import { getStringWidth } from '../../visx/text';
 import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext } from '../private/chart-instance-context';
 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 { getAllHiddenMessage, 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';
@@ -218,11 +217,10 @@ const PieChartInternal = ( {
 	// Calculate percentages from values (single source of truth)
 	const dataWithPercentages = useDataWithPercentages( data );
 
-	// Filter and recalculate data for interactive legends
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
+	// Filter and recalculate data from the shared legend visibility state.
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData( {
 		data: dataWithPercentages,
 		chartId,
-		legendInteractive,
 		isSeriesVisible,
 	} );
 
@@ -308,7 +306,7 @@ const PieChartInternal = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider value={ { chartId } }>
+		<ChartInstanceContext.Provider value={ { chartId } }>
 			<ChartLayout
 				legendPosition={ legendPosition }
 				legendElement={ legendElement }
@@ -385,10 +383,7 @@ const PieChartInternal = ( {
 								>
 									{ allSegmentsHidden ? (
 										<SvgEmptyState x={ 0 } y={ 0 } width={ width } height={ height }>
-											{ __(
-												'All segments are hidden. Click legend items to show data.',
-												'jetpack-charts'
-											) }
+											{ getAllHiddenMessage( legendInteractive, 'segments' ) }
 										</SvgEmptyState>
 									) : (
 										<Pie< DataPointPercentageCalculated & { index: number } >
@@ -495,7 +490,7 @@ const PieChartInternal = ( {
 					);
 				} }
 			</ChartLayout>
-		</SingleChartContext.Provider>
+		</ChartInstanceContext.Provider>
 	);
 };
 

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

@@ -1,6 +1,8 @@
+/* eslint-disable react/jsx-no-bind */
+
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { GlobalChartsProvider } from '../../../providers';
+import { GlobalChartsProvider, useGlobalChartsContext } from '../../../providers';
 import PieChart from '../pie-chart';
 
 describe( 'PieChart', () => {
@@ -548,4 +550,74 @@ describe( 'PieChart', () => {
 			expect( screen.getByText( /33\.3/ ) ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Programmatic visibility (non-interactive legend)', () => {
+		const chartId = 'test-programmatic-hide-pie-chart';
+		const testData = [
+			{ label: 'Segment A', value: 50 },
+			{ label: 'Segment B', value: 50 },
+		];
+
+		const Harness = () => {
+			const { toggleSeriesVisibility } = useGlobalChartsContext();
+			return (
+				<>
+					<button onClick={ () => toggleSeriesVisibility( chartId, 'Segment A' ) }>
+						Hide Segment A
+					</button>
+					<button onClick={ () => toggleSeriesVisibility( chartId, 'Segment B' ) }>
+						Hide Segment B
+					</button>
+					<PieChart
+						data={ testData }
+						size={ 500 }
+						showLegend
+						legend={ { interactive: false } }
+						chartId={ chartId }
+					/>
+				</>
+			);
+		};
+
+		test( 'removes a segment hidden programmatically even though the legend is not clickable', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<Harness />
+				</GlobalChartsProvider>
+			);
+
+			expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 2 );
+
+			await user.click( screen.getByRole( 'button', { name: 'Hide Segment A' } ) );
+
+			await waitFor( () => {
+				expect( screen.getAllByTestId( 'pie-segment' ) ).toHaveLength( 1 );
+			} );
+
+			// The legend itself stays non-interactive (no toggle button for the segment).
+			expect( screen.queryAllByRole( 'button', { name: /Segment A: /i } ) ).toHaveLength( 0 );
+		} );
+
+		test( 'empty-state copy omits the click instruction when the legend is not interactive', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<GlobalChartsProvider>
+					<Harness />
+				</GlobalChartsProvider>
+			);
+
+			await user.click( screen.getByRole( 'button', { name: 'Hide Segment A' } ) );
+			await user.click( screen.getByRole( 'button', { name: 'Hide Segment B' } ) );
+
+			await waitFor( () => {
+				expect( screen.queryAllByTestId( 'pie-segment' ) ).toHaveLength( 0 );
+			} );
+
+			expect( screen.getByText( 'All segments are hidden.' ) ).toBeInTheDocument();
+			expect( screen.queryByText( /Click legend items to show data/i ) ).not.toBeInTheDocument();
+		} );
+	} );
 } );

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

@@ -6,8 +6,8 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
-		font-size: var(--wpds-typography-font-size-lg, 16px);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 600);
+		font-size: var(--wpds-typography-font-size-lg, 15px);
 	}
 
 	.note {

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

@@ -2,14 +2,13 @@ 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 { Legend, useChartLegendItems } from '../../components/legend';
 import { BaseTooltip } from '../../components/tooltip';
 import {
 	useDataWithPercentages,
-	useInteractiveLegendData,
+	useLegendVisibilityData,
 	usePrefersReducedMotion,
 } from '../../hooks';
 import {
@@ -23,10 +22,10 @@ import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import { attachSubComponents } from '../../utils';
 import { Center } from '../private/center';
 import { ChartSVG, ChartHTML, useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext } from '../private/chart-instance-context';
 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 { getAllHiddenMessage, 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';
@@ -247,11 +246,10 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	// Calculate percentages from values (single source of truth)
 	const dataWithPercentages = useDataWithPercentages( data );
 
-	// Filter and recalculate data for interactive legends
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData( {
+	// Filter and recalculate data from the shared legend visibility state.
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData( {
 		data: dataWithPercentages,
 		chartId,
-		legendInteractive,
 		isSeriesVisible,
 	} );
 
@@ -353,7 +351,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 	);
 
 	return (
-		<SingleChartContext.Provider value={ { chartId } }>
+		<ChartInstanceContext.Provider value={ { chartId } }>
 			<ChartLayout
 				legendPosition={ legendPosition }
 				legendElement={ legendElement }
@@ -427,10 +425,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 								>
 									{ allSegmentsHidden ? (
 										<SvgEmptyState x={ 0 } y={ -radius / 2 } width={ width } height={ height }>
-											{ __(
-												'All segments are hidden. Click legend items to show data.',
-												'jetpack-charts'
-											) }
+											{ getAllHiddenMessage( legendInteractive, 'segments' ) }
 										</SvgEmptyState>
 									) : (
 										<>
@@ -493,7 +488,7 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 					);
 				} }
 			</ChartLayout>
-		</SingleChartContext.Provider>
+		</ChartInstanceContext.Provider>
 	);
 };
 

package/src/charts/private/{single-chart-context/single-chart-context.tsx → chart-instance-context/chart-instance-context.ts}

@@ -15,11 +15,7 @@ export interface ChartInstanceContextValue {
 	chartRef?: React.RefObject< ChartInstanceRef >;
 	chartWidth?: number;
 	chartHeight?: number;
+	isSeriesVisible?: ( seriesLabel: string ) => boolean;
 }
 
 export const ChartInstanceContext = createContext< ChartInstanceContextValue | null >( null );
-
-// Backward compatibility exports
-export const SingleChartContext = ChartInstanceContext;
-export type SingleChartContextValue = ChartInstanceContextValue;
-export type SingleChartRef = ChartInstanceRef;

package/src/charts/private/chart-instance-context/index.ts

@@ -0,0 +1,3 @@
+export { ChartInstanceContext } from './chart-instance-context';
+export { useChartInstanceContext } from './use-chart-instance-context';
+export type { ChartInstanceContextValue, ChartInstanceRef } from './chart-instance-context';

package/src/charts/private/{single-chart-context/use-single-chart-context.ts → chart-instance-context/use-chart-instance-context.ts}

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { ChartInstanceContext, type ChartInstanceContextValue } from './single-chart-context';
+import { ChartInstanceContext, type ChartInstanceContextValue } from './chart-instance-context';
 
 export const useChartInstanceContext = (): ChartInstanceContextValue => {
 	const context = useContext( ChartInstanceContext );
@@ -8,5 +8,3 @@ export const useChartInstanceContext = (): ChartInstanceContextValue => {
 	}
 	return context;
 };
-
-export const useSingleChartContext = useChartInstanceContext;

package/src/charts/private/svg-empty-state/get-all-hidden-message.ts

@@ -0,0 +1,41 @@
+import { _x } from '@wordpress/i18n';
+
+export type HiddenChartItemType = 'series' | 'segments';
+
+/**
+ * Return the empty-state message for a chart whose items are all hidden.
+ *
+ * Each translation call has a distinct gettext context. This prevents Terser
+ * from folding conditional calls into one call with a conditional msgid, which
+ * would make the strings unavailable to static translation extraction.
+ *
+ * @param interactive - Whether the legend can be used to show hidden items.
+ * @param itemType    - The chart-specific name for its data items.
+ * @return The translated empty-state message.
+ */
+export const getAllHiddenMessage = (
+	interactive: boolean,
+	itemType: HiddenChartItemType
+): string => {
+	if ( itemType === 'segments' ) {
+		if ( interactive ) {
+			return _x(
+				'All segments are hidden. Click legend items to show data.',
+				'chart empty state: interactive segments',
+				'jetpack-charts'
+			);
+		}
+
+		return _x( 'All segments are hidden.', 'chart empty state: segments', 'jetpack-charts' );
+	}
+
+	if ( interactive ) {
+		return _x(
+			'All series are hidden. Click legend items to show data.',
+			'chart empty state: interactive series',
+			'jetpack-charts'
+		);
+	}
+
+	return _x( 'All series are hidden.', 'chart empty state: series', 'jetpack-charts' );
+};

package/src/charts/private/svg-empty-state/index.ts

@@ -1 +1,2 @@
 export { SvgEmptyState } from './svg-empty-state';
+export { getAllHiddenMessage } from './get-all-hidden-message';

package/src/charts/private/svg-empty-state/test/get-all-hidden-message.test.ts

@@ -0,0 +1,15 @@
+import { getAllHiddenMessage } from '../get-all-hidden-message';
+
+describe( 'getAllHiddenMessage', () => {
+	it.each( [
+		[ false, 'series', 'All series are hidden.' ],
+		[ true, 'series', 'All series are hidden. Click legend items to show data.' ],
+		[ false, 'segments', 'All segments are hidden.' ],
+		[ true, 'segments', 'All segments are hidden. Click legend items to show data.' ],
+	] as const )(
+		'returns the expected message for interactive=%s %s',
+		( interactive, type, message ) => {
+			expect( getAllHiddenMessage( interactive, type ) ).toBe( message );
+		}
+	);
+} );