@automattic/charts 3.0.0 → 3.1.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { getStringWidth as getStringWidth$1 } from "./visx/text/index.js";
 import { formatNumber, formatNumberCompact } from "@automattic/number-formatters";
 import { AnimatedAreaSeries, AnimatedAreaStack, AreaSeries, Axis, BarGroup, BarSeries, DataContext, Grid, Tooltip, TooltipContext, XYChart, buildChartTheme } from "@visx/xychart";
-import { __, sprintf } from "@wordpress/i18n";
+import { __, _x, sprintf } from "@wordpress/i18n";
 import clsx from "clsx";
 import * as React from "react";
 import { Children, Fragment, createContext, createContext as createContext$1, createElement, forwardRef, forwardRef as forwardRef$1, isValidElement, memo, useCallback, useCallback as useCallback$1, useContext, useContext as useContext$1, useEffect, useEffect as useEffect$1, useId, useImperativeHandle, useLayoutEffect, useMemo, useMemo as useMemo$1, useRef, useRef as useRef$1, useState, useState as useState$1 } from "react";
@@ -50,17 +50,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
-//#region src/charts/private/single-chart-context/single-chart-context.tsx
+//#region src/charts/private/chart-instance-context/chart-instance-context.ts
 const ChartInstanceContext = createContext(null);
-const SingleChartContext = ChartInstanceContext;
 //#endregion
-//#region src/charts/private/single-chart-context/use-single-chart-context.ts
+//#region src/charts/private/chart-instance-context/use-chart-instance-context.ts
 const useChartInstanceContext = () => {
 	const context = useContext(ChartInstanceContext);
 	if (!context) throw new Error("useChartInstanceContext must be used within a Chart component");
 	return context;
 };
-const useSingleChartContext = useChartInstanceContext;
 //#endregion
 //#region src/styles/chart-scope-class.ts
 /**
@@ -967,6 +965,7 @@ const GlobalChartsContext = createContext(null);
 const GlobalChartsProvider = ({ children, theme }) => {
 	const [charts, setCharts] = useState(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = useState(() => /* @__PURE__ */ new Map());
+	const seededCharts = useRef(/* @__PURE__ */ new Set());
 	const wrapperRef = useRef(null);
 	const [scopeNode, setScopeNode] = useState(null);
 	const setWrapperNode = useCallback((node) => {
@@ -1069,18 +1068,41 @@ const GlobalChartsProvider = ({ children, theme }) => {
 			shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
 		};
 	}, [providerTheme, resolveColor]);
-	const toggleSeriesVisibility = useCallback((chartId, seriesLabel) => {
+	const updateHiddenSeries = useCallback((chartId, update) => {
 		setHiddenSeries((prev) => {
+			const current = prev.get(chartId);
+			const next = update(new Set(current ?? []));
+			if (!current && next.size === 0) return prev;
+			if (current && current.size === next.size && [...next].every((label) => current.has(label))) return prev;
 			const newMap = new Map(prev);
-			const chartHidden = newMap.get(chartId) || /* @__PURE__ */ new Set();
-			const newSet = new Set(chartHidden);
-			if (newSet.has(seriesLabel)) newSet.delete(seriesLabel);
-			else newSet.add(seriesLabel);
-			if (newSet.size === 0) newMap.delete(chartId);
-			else newMap.set(chartId, newSet);
+			if (next.size === 0) newMap.delete(chartId);
+			else newMap.set(chartId, next);
 			return newMap;
 		});
 	}, []);
+	const toggleSeriesVisibility = useCallback((chartId, seriesLabel) => {
+		updateHiddenSeries(chartId, (current) => {
+			if (current.has(seriesLabel)) current.delete(seriesLabel);
+			else current.add(seriesLabel);
+			return current;
+		});
+	}, [updateHiddenSeries]);
+	const setSeriesVisibility = useCallback((chartId, seriesLabel, visible) => {
+		updateHiddenSeries(chartId, (current) => {
+			if (visible) current.delete(seriesLabel);
+			else current.add(seriesLabel);
+			return current;
+		});
+	}, [updateHiddenSeries]);
+	const setChartHiddenSeries = useCallback((chartId, seriesLabels) => {
+		updateHiddenSeries(chartId, () => new Set(seriesLabels));
+	}, [updateHiddenSeries]);
+	const hasSeededChart = useCallback((chartId) => seededCharts.current.has(chartId), []);
+	const seedChartHiddenSeries = useCallback((chartId, seriesLabels) => {
+		if (seededCharts.current.has(chartId)) return;
+		seededCharts.current.add(chartId);
+		setChartHiddenSeries(chartId, seriesLabels);
+	}, [setChartHiddenSeries]);
 	const isSeriesVisible = useCallback((chartId, seriesLabel) => {
 		const chartHidden = hiddenSeries.get(chartId);
 		return !chartHidden || !chartHidden.has(seriesLabel);
@@ -1097,6 +1119,10 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		theme: providerTheme,
 		getElementStyles,
 		toggleSeriesVisibility,
+		setSeriesVisibility,
+		setChartHiddenSeries,
+		seedChartHiddenSeries,
+		hasSeededChart,
 		isSeriesVisible,
 		getHiddenSeries,
 		isColorPaletteResolved
@@ -1108,6 +1134,10 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		providerTheme,
 		getElementStyles,
 		toggleSeriesVisibility,
+		setSeriesVisibility,
+		setChartHiddenSeries,
+		seedChartHiddenSeries,
+		hasSeededChart,
 		isSeriesVisible,
 		getHiddenSeries,
 		isColorPaletteResolved
@@ -1506,12 +1536,12 @@ const useDataWithPercentages = (data) => {
 	}, [data]);
 };
 //#endregion
-//#region src/hooks/use-interactive-legend-data.ts
+//#region src/hooks/use-legend-visibility-data.ts
 /**
-* Custom hook to filter and recalculate chart data for interactive legends.
+* Custom hook to filter and recalculate chart data based on series visibility.
 *
-* When interactive legends are enabled, this hook:
-* 1. Filters data to show only visible series based on legend selection
+* Regardless of whether the legend is interactive (clickable), this hook:
+* 1. Filters data to show only visible series (visibility can also be set programmatically)
 * 2. Recalculates percentages so visible segments total 100%
 * 3. Tracks whether all segments are hidden to show empty state
 *
@@ -1520,10 +1550,9 @@ const useDataWithPercentages = (data) => {
 *
 * @example
 * ```tsx
-* const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+* const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
 *   data: chartData,
 *   chartId: 'my-pie-chart',
-*   legendInteractive: true,
 *   isSeriesVisible: (id, label) => context.isSeriesVisible(id, label),
 * });
 *
@@ -1538,16 +1567,15 @@ const useDataWithPercentages = (data) => {
 * 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
+* @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 filtering)
+* @param params.isSeriesVisible - Function to check series visibility
 * @return Object containing visibleData, allSegmentsHidden flag, and legendData with recalculated percentages
 */
-const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVisible }) => {
+const useLegendVisibilityData = ({ data, chartId, isSeriesVisible }) => {
 	const visibleData = useMemo(() => {
-		if (!chartId || !legendInteractive) return data;
+		if (!chartId) return data;
 		const filtered = data.filter((segment) => isSeriesVisible(chartId, segment.label));
 		if (filtered.length === 0) return [];
 		const totalValue = filtered.reduce((sum, segment) => sum + segment.value, 0);
@@ -1558,16 +1586,15 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 	}, [
 		data,
 		chartId,
-		isSeriesVisible,
-		legendInteractive
+		isSeriesVisible
 	]);
 	return {
 		visibleData,
 		allSegmentsHidden: useMemo(() => {
-			return legendInteractive && visibleData.length === 0;
-		}, [legendInteractive, visibleData]),
+			return visibleData.length === 0 && data.length > 0;
+		}, [visibleData, data]),
 		legendData: useMemo(() => {
-			if (!legendInteractive || !chartId) return data;
+			if (!chartId) return data;
 			const visibleDataMap = new Map(visibleData.map((d) => [d.label, d]));
 			return data.map((segment) => {
 				if (!isSeriesVisible(chartId, segment.label)) return segment;
@@ -1576,7 +1603,6 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 		}, [
 			data,
 			visibleData,
-			legendInteractive,
 			chartId,
 			isSeriesVisible
 		])
@@ -1706,12 +1732,22 @@ const LegendText = ({ text, textOverflow, maxWidth }) => {
 		children: text
 	});
 };
+const getLegendItemAriaLabel = (text, value, visible, interactive) => {
+	const accessibleText = value != null && value !== "" ? sprintf(_x("%1$s, %2$s", "legend item label and value", "jetpack-charts"), text, String(value)) : text;
+	if (interactive) {
+		if (visible) return sprintf(_x("%s: visible. Toggle visibility.", "visible interactive legend item", "jetpack-charts"), accessibleText);
+		return sprintf(_x("%s: hidden. Toggle visibility.", "hidden interactive legend item", "jetpack-charts"), accessibleText);
+	}
+	if (visible) return;
+	return sprintf(_x("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
+};
 const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", alignment = "center", shape = "rect", fill = valueOrIdentityString, size = valueOrIdentityString, labelFormat = valueOrIdentity, labelTransform = labelTransformFactory, itemStyles, itemClassName, labelStyles, labelClassName, shapeStyles, render, interactive = false, chartId }, ref) => {
 	const { margin: itemMargin = "0", flexDirection: itemDirection = "row" } = itemStyles ?? {};
 	const { justifyContent: labelJustifyContent = "flex-start", flex: labelFlex = "0 0 auto", margin: labelMargin = "0 4px", maxWidth, textOverflow = "wrap" } = labelStyles ?? {};
 	const { width: shapeWidth = 16, height: shapeHeight = 16, margin: shapeMargin = "2px 4px 2px 0" } = shapeStyles ?? {};
 	const theme = useGlobalChartsTheme();
 	const context = useContext(GlobalChartsContext);
+	const chartInstanceContext = useContext(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const legendScale = scaleOrdinal({
 		domain: items.map((item) => item.label),
@@ -1722,9 +1758,7 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 	const handleLegendClick = useCallback((seriesLabels) => {
 		if (interactive && chartId && context) {
 			const representativeVisible = context.isSeriesVisible(chartId, seriesLabels[0]);
-			seriesLabels.forEach((label) => {
-				if (context.isSeriesVisible(chartId, label) === representativeVisible) context.toggleSeriesVisibility(chartId, label);
-			});
+			seriesLabels.forEach((label) => context.setSeriesVisibility(chartId, label, !representativeVisible));
 		}
 	}, [
 		interactive,
@@ -1732,11 +1766,12 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 		context
 	]);
 	const isSeriesVisible = useCallback((seriesLabel) => {
-		if (!interactive || !chartId || !context) return true;
+		if (chartInstanceContext?.isSeriesVisible) return chartInstanceContext.isSeriesVisible(seriesLabel);
+		if (!chartId || !context) return true;
 		return context.isSeriesVisible(chartId, seriesLabel);
 	}, [
-		interactive,
 		chartId,
+		chartInstanceContext,
 		context
 	]);
 	const createClickHandler = useCallback((seriesLabels) => {
@@ -1764,7 +1799,7 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 			align: orientation === "vertical" ? flexAlignment : void 0,
 			justify: orientation === "horizontal" ? flexAlignment : void 0,
 			wrap: orientation === "horizontal" ? "wrap" : void 0,
-			role: "list",
+			role: interactive ? void 0 : "list",
 			className: clsx(standaloneScopeClass, base_legend_module_default.legend, className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
@@ -1779,10 +1814,10 @@ const BaseLegend = forwardRef(({ items, className, orientation = "horizontal", a
 					flexDirection: orientation === "vertical" && alignment === "end" ? "row-reverse" : itemDirection,
 					onClick: handleClick,
 					onKeyDown: handleKeyDown,
-					role: interactive ? "button" : void 0,
+					role: interactive ? "button" : "listitem",
 					tabIndex: interactive ? 0 : void 0,
 					"aria-pressed": interactive ? visible : void 0,
-					"aria-label": interactive ? `${label.text}: ${visible ? "visible" : "hidden"}. Toggle visibility.` : void 0,
+					"aria-label": getLegendItemAriaLabel(label.text, matchedItem?.value, visible, interactive),
 					children: [items[i]?.renderGlyph ? /* @__PURE__ */ jsx("svg", {
 						width: items[i]?.glyphSize * 2,
 						height: items[i]?.glyphSize * 2,
@@ -1844,8 +1879,8 @@ const defaultShapeByChartType = {
 };
 const Legend = forwardRef(({ chartId, items, shape, ...props }, ref) => {
 	const context = useContext(GlobalChartsContext);
-	const singleChartContext = useContext(SingleChartContext);
-	const contextChartId = chartId ?? singleChartContext?.chartId;
+	const chartInstanceContext = useContext(ChartInstanceContext);
+	const contextChartId = chartId ?? chartInstanceContext?.chartId;
 	const chartData = useMemo(() => contextChartId && context ? context.getChartData(contextChartId) : void 0, [contextChartId, context]);
 	const contextItems = chartData?.legendItems;
 	const resolvedShape = shape ?? (chartData?.chartType ? defaultShapeByChartType[chartData.chartType] : void 0);
@@ -2085,11 +2120,16 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		}
 		return flattened;
 	}, [series, mode]);
+	const hasKeyboardSelection = useRef(false);
 	useEffect(() => {
 		if (selectedIndex === void 0) {
-			tooltipContext?.hideTooltip();
+			if (hasKeyboardSelection.current) {
+				hasKeyboardSelection.current = false;
+				tooltipContext?.hideTooltip();
+			}
 			return;
 		}
+		hasKeyboardSelection.current = true;
 		if (mode === "group") series.forEach((s, index) => {
 			if (selectedIndex < s.data.length) {
 				const datum = s.data[selectedIndex];
@@ -2197,6 +2237,43 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 	};
 };
 //#endregion
+//#region src/providers/chart-context/hooks/use-default-hidden-series.ts
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+* Seeds a chart's hidden series once per chart ID, the first time the provider
+* sees that ID.
+*
+* The provider owns the record of what has been seeded, not this hook: a
+* mount-scoped one would re-apply the defaults on every remount, and a chart
+* remounts for reasons the reader never thinks of as a new chart — switching
+* between line and bar, tabbing away and back, a resize flipping tabs into a
+* dropdown. Each of those would throw away the series they had just revealed.
+*
+* @param chartId      - The chart ID passed to the provider's visibility methods.
+* @param seriesLabels - Labels to hide when this chart ID is first seen. Later values are ignored.
+* @return The resolved hidden-series set.
+*/
+const useDefaultHiddenSeries = (chartId, seriesLabels) => {
+	const { getHiddenSeries, seedChartHiddenSeries, hasSeededChart } = useGlobalChartsContext();
+	const labelsRef = useRef(seriesLabels);
+	labelsRef.current = seriesLabels;
+	const hasSeriesLabels = seriesLabels !== void 0;
+	const shouldUseDefaults = hasSeriesLabels && !hasSeededChart(chartId);
+	useIsomorphicLayoutEffect$1(() => {
+		if (labelsRef.current === void 0) return;
+		seedChartHiddenSeries(chartId, labelsRef.current);
+	}, [
+		chartId,
+		hasSeriesLabels,
+		seedChartHiddenSeries
+	]);
+	return useMemo(() => shouldUseDefaults ? new Set(labelsRef.current) : getHiddenSeries(chartId), [
+		shouldUseDefaults,
+		getHiddenSeries,
+		chartId
+	]);
+};
+//#endregion
 //#region src/charts/private/chart-composition/chart-svg.tsx
 /**
 * Compound component for SVG children in charts.
@@ -2410,6 +2487,27 @@ const SvgEmptyState = ({ x, y, width, height, children }) => {
 	});
 };
 //#endregion
+//#region src/charts/private/svg-empty-state/get-all-hidden-message.ts
+/**
+* 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.
+*/
+const getAllHiddenMessage = (interactive, itemType) => {
+	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");
+};
+//#endregion
 //#region src/charts/private/time-axis.ts
 const X_TICK_WIDTH = 60;
 const getCurveType = (type, smoothing) => {
@@ -2937,7 +3035,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 //#endregion
 //#region src/charts/line-chart/private/line-chart-annotations-overlay.tsx
 const LineChartAnnotationsOverlay = ({ children }) => {
-	const { chartRef, chartWidth, chartHeight } = useSingleChartContext();
+	const { chartRef, chartWidth, chartHeight } = useChartInstanceContext();
 	const [scales, setScales] = useState(null);
 	const [scalesStable, setScalesStable] = useState(false);
 	const createScaleSignature = useCallback((scaleData) => {
@@ -3322,7 +3420,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, children, gridVisibility, gap = "md" }, ref) => {
+const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, renderGlyph = defaultRenderGlyph, glyphStyle = {}, withLegendGlyph = false, withGradientFill = false, smoothing = true, curveType, renderTooltip = renderDefaultTooltip, withStartGlyphs = false, withEndGlyphs = false, animation, options = {}, onPointerDown = void 0, onPointerUp = void 0, onPointerMove = void 0, onPointerOut = void 0, zoomable = false, rescaleYOnVisibilityChange = true, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const legendShape = legend.shape ?? "line";
@@ -3331,6 +3429,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const theme = useXYChartTheme(data);
 	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = useCallback((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const chartRef = useRef(null);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
 	const [isNavigating, setIsNavigating] = useState(false);
@@ -3358,29 +3458,19 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		}
 	}), [internalChartRef]);
 	const dataSorted = useChartDataTransform(data);
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const seriesWithVisibility = useMemo(() => {
-		if (!chartId || !legendInteractive) return dataSorted.map((series, index) => ({
-			series,
-			index,
-			isVisible: true
-		}));
 		return dataSorted.map((series, index) => ({
 			series,
 			index,
-			isVisible: isSeriesVisible(chartId, series.label)
+			isVisible: !hiddenSeries.has(series.label)
 		}));
-	}, [
-		dataSorted,
-		chartId,
-		isSeriesVisible,
-		legendInteractive
-	]);
+	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = useMemo(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const stableYDomain = useMemo(() => {
-		if (!legendInteractive || rescaleYOnVisibilityChange) return;
+		if (rescaleYOnVisibilityChange) return;
 		let min = Infinity;
 		let max = -Infinity;
 		for (const series of dataSorted) for (const point of series.data ?? []) {
@@ -3391,11 +3481,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 			}
 		}
 		return min < max ? [min, max] : void 0;
-	}, [
-		legendInteractive,
-		rescaleYOnVisibilityChange,
-		dataSorted
-	]);
+	}, [rescaleYOnVisibilityChange, dataSorted]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -3405,8 +3491,8 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const chartOptions = useMemo(() => {
-		const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = xAxisOptions.tickFormat || getFormatter(dataSorted, tickResolution);
+		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
 				x: {
@@ -3519,10 +3605,11 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
 			chartRef: internalChartRef,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -3577,7 +3664,7 @@ const LineChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ jsx(ZoomClip, {
 									active: zoomable && !!zoom.domain,
@@ -3779,7 +3866,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, children, gridVisibility, gap = "md" }, ref) => {
+const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, height, className, margin, withTooltips = true, withTooltipCrosshairs, showLegend = false, legend = {}, stacked = true, stackOffset = "none", smoothing = true, curveType, fillOpacity, withStroke, renderTooltip = renderDefaultTooltip, animation, options = {}, onPointerDown, onPointerUp, onPointerMove, onPointerOut, zoomable = false, rescaleYOnVisibilityChange, rescaleYOnLegendToggle, defaultHiddenSeries, children, gridVisibility, gap = "md" }, ref) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendShape = legend.shape ?? "rect";
 	const legendPosition = legend.position ?? "bottom";
@@ -3787,6 +3874,8 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const providerTheme = useGlobalChartsTheme();
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = useCallback((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const chartRef = useRef(null);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
 	const [isNavigating, setIsNavigating] = useState(false);
@@ -3814,24 +3903,14 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		}
 	}), [internalChartRef]);
 	const dataSorted = useChartDataTransform(data);
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const seriesWithVisibility = useMemo(() => {
-		if (!chartId || !legendInteractive) return dataSorted.map((series, index) => ({
-			series,
-			index,
-			isVisible: true
-		}));
 		return dataSorted.map((series, index) => ({
 			series,
 			index,
-			isVisible: isSeriesVisible(chartId, series.label)
+			isVisible: !hiddenSeries.has(series.label)
 		}));
-	}, [
-		dataSorted,
-		chartId,
-		isSeriesVisible,
-		legendInteractive
-	]);
+	}, [dataSorted, hiddenSeries]);
 	const allSeriesHidden = useMemo(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
@@ -3842,7 +3921,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = useMemo(() => {
-		if (rescaleYOnVisibility || !legendInteractive || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
+		if (rescaleYOnVisibility || !dataSorted.length || !dataSorted[0].data.length || stacked && stackOffset !== "none") return;
 		if (stacked) {
 			const numPoints = Math.max(...dataSorted.map((s) => s.data.length));
 			let posMax = 0;
@@ -3876,12 +3955,11 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 		dataSorted,
 		stacked,
 		stackOffset,
-		legendInteractive,
 		rescaleYOnVisibility
 	]);
 	const chartOptions = useMemo(() => {
-		const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-		const formatter = xAxisOptions.tickFormat || getFormatter(dataSorted, tickResolution);
+		const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+		const formatter = tickFormat || getFormatter(dataSorted, tickResolution);
 		return {
 			axis: {
 				x: {
@@ -3953,7 +4031,6 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 	const zeroYAccessor = useCallback(() => 0, []);
 	const visibleLabels = useMemo(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
 	const filteredRenderTooltip = useCallback((params) => {
-		if (!legendInteractive) return renderTooltip(params);
 		const datumByKey = params?.tooltipData?.datumByKey;
 		if (!datumByKey) return renderTooltip(params);
 		const filtered = Object.fromEntries(Object.entries(datumByKey).filter(([key]) => visibleLabels.has(key)));
@@ -3971,11 +4048,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 				nearestDatum: nextNearest
 			}
 		});
-	}, [
-		renderTooltip,
-		legendInteractive,
-		visibleLabels
-	]);
+	}, [renderTooltip, visibleLabels]);
 	const resolvedFillOpacity = fillOpacity ?? (stacked ? .85 : .4);
 	const resolvedWithStroke = withStroke ?? !stacked;
 	if (error) return /* @__PURE__ */ jsx("div", {
@@ -4006,7 +4079,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 			dataKey: seriesData?.label,
 			data: seriesData.data,
 			xAccessor: accessors.xAccessor,
-			yAccessor: isVisible || !legendInteractive ? accessors.yAccessor : zeroYAccessor,
+			yAccessor: isVisible ? accessors.yAccessor : zeroYAccessor,
 			fill: color,
 			fillOpacity: resolvedFillOpacity,
 			...stacked ? {} : {
@@ -4019,10 +4092,11 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 			}
 		}, seriesData?.label || index);
 	};
-	return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
 			chartRef: internalChartRef,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -4077,7 +4151,7 @@ const AreaChartInternal = forwardRef(({ data, chartId: providedChartId, width, h
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ jsxs(ZoomClip, {
 									active: zoomable,
@@ -4354,11 +4428,13 @@ const getGroupPadding = (scale) => {
 function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
 	const stableOptions = useDeepMemo(options);
 	const axisConfig = useMemo(() => {
-		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, ...xAxisOptions } = stableOptions.axis?.x || {};
-		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, ...yAxisOptions } = stableOptions.axis?.y || {};
+		const { labelOverflow: xLabelOverflow, tickResolution: xTickResolution, tickFormat: xTickFormat, ...xAxisOptions } = stableOptions.axis?.x || {};
+		const { labelOverflow: yLabelOverflow, tickResolution: yTickResolution, tickFormat: yTickFormat, ...yAxisOptions } = stableOptions.axis?.y || {};
 		return {
 			xLabelOverflow,
 			yLabelOverflow,
+			xTickFormat,
+			yTickFormat,
 			xAxisOptions,
 			yAxisOptions,
 			tickResolution: horizontal ? yTickResolution : xTickResolution
@@ -4418,7 +4494,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		isSeriesRendered
 	]);
 	return useMemo(() => {
-		const { xTickFormat, yTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
+		const { xTickFormat: defaultXTickFormat, yTickFormat: defaultYTickFormat, tooltipLabelFormatter: defaultTooltipLabelFormatter, xAccessor, yAccessor, gridVisibility, xScale: baseXScale, yScale: baseYScale } = defaultOptions[horizontal ? "horizontal" : "vertical"];
 		let valueScaleDomainOverride = {};
 		if (data.some((s) => s.options?.type === "comparison")) {
 			if (!(!horizontal ? stableOptions.yScale?.domain : stableOptions.xScale?.domain)) {
@@ -4443,11 +4519,11 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 			...stableOptions.yScale || {},
 			...!horizontal ? valueScaleDomainOverride : {}
 		};
-		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
-		const providedToolTipLabelFormatter = horizontal ? yAxisOptions.tickFormat : xAxisOptions.tickFormat;
+		const { xLabelOverflow, yLabelOverflow, xTickFormat, yTickFormat, xAxisOptions, yAxisOptions } = axisConfig;
+		const dateAxisTickFormat = horizontal ? yTickFormat : xTickFormat;
 		const { timeAxis } = defaultOptions;
 		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
-		const bandTickValues = timeAxis && !dateAxisOptions.tickFormat ? getBandTickValues(timeAxis.domain, timeAxis.tickFormatter, dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS) : null;
+		const bandTickValues = timeAxis && !dateAxisTickFormat ? getBandTickValues(timeAxis.domain, timeAxis.tickFormatter, dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS) : null;
 		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 		return {
 			gridVisibility,
@@ -4461,7 +4537,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				x: {
 					orientation: "bottom",
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: xTickFormat,
+					tickFormat: xTickFormat || defaultXTickFormat,
 					...horizontal ? {} : dateAxisTickValues,
 					...xLabelOverflow === "ellipsis" ? { tickComponent: TruncatedXTickComponent } : {},
 					...xAxisOptions
@@ -4469,14 +4545,14 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 				y: {
 					orientation: "left",
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: yTickFormat,
+					tickFormat: yTickFormat || defaultYTickFormat,
 					...horizontal ? dateAxisTickValues : {},
 					...yLabelOverflow === "ellipsis" ? { tickComponent: TruncatedYTickComponent } : {},
 					...yAxisOptions
 				}
 			},
 			barGroup: { padding: getGroupPadding(horizontal ? yScale : xScale) },
-			tooltip: { labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter }
+			tooltip: { labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter }
 		};
 	}, [
 		defaultOptions,
@@ -4631,11 +4707,13 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ jsx("div", {
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: sprintf(__("%1$s: %2$s", "jetpack-charts"), label, value)
 });
-const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, animation, children, gap = "md" }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, defaultHiddenSeries, animation, children, gap = "md" }) => {
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
 	const horizontal = orientation === "horizontal";
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = useCallback((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const theme = useXYChartTheme(data);
 	const dataSorted = useChartDataTransform(data);
 	const dataWithVisibleZeros = useZeroValueDisplay(dataSorted, {
@@ -4643,12 +4721,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useChartLegendItems(dataSorted, useMemo(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const isSeriesRendered = useCallback((series) => !chartId || !legendInteractive || isSeriesVisible(chartId, series.label), [
-		chartId,
-		legendInteractive,
-		isSeriesVisible
-	]);
+	const { getElementStyles } = useGlobalChartsContext();
+	const isSeriesRendered = useCallback((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = useRef(null);
@@ -4884,9 +4958,10 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -4945,7 +5020,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ jsx(ComparisonBars, {
 									comparisonEntries,
@@ -5758,12 +5833,27 @@ const GeoChartWithProvider = (props) => {
 GeoChartWithProvider.displayName = "GeoChart";
 const GeoChartResponsive = withResponsive(GeoChartWithProvider);
 //#endregion
+//#region src/types.ts
+let GoogleDataTableColumnRoleType = /* @__PURE__ */ function(GoogleDataTableColumnRoleType) {
+	GoogleDataTableColumnRoleType["annotation"] = "annotation";
+	GoogleDataTableColumnRoleType["annotationText"] = "annotationText";
+	GoogleDataTableColumnRoleType["certainty"] = "certainty";
+	GoogleDataTableColumnRoleType["emphasis"] = "emphasis";
+	GoogleDataTableColumnRoleType["interval"] = "interval";
+	GoogleDataTableColumnRoleType["scope"] = "scope";
+	GoogleDataTableColumnRoleType["style"] = "style";
+	GoogleDataTableColumnRoleType["tooltip"] = "tooltip";
+	GoogleDataTableColumnRoleType["domain"] = "domain";
+	return GoogleDataTableColumnRoleType;
+}({});
+//#endregion
 //#region src/charts/heatmap-chart/heatmap-chart.module.scss
 var heatmap_chart_module_default = {
 	"heatmap-chart": "a8ccharts-O3YMOW-heatmap-chart",
 	"heatmap-chart__cell": "a8ccharts-O3YMOW-heatmap-chart__cell",
 	"heatmap-chart__cell--filled": "a8ccharts-O3YMOW-heatmap-chart__cell--filled",
 	"heatmap-chart__cell--hidden": "a8ccharts-O3YMOW-heatmap-chart__cell--hidden",
+	"heatmap-chart__cell--placeholder": "a8ccharts-O3YMOW-heatmap-chart__cell--placeholder",
 	"heatmap-chart__cell--selected": "a8ccharts-O3YMOW-heatmap-chart__cell--selected",
 	"heatmap-chart__cell--strong": "a8ccharts-O3YMOW-heatmap-chart__cell--strong",
 	"heatmap-chart__cell-value": "a8ccharts-O3YMOW-heatmap-chart__cell-value",
@@ -5819,6 +5909,22 @@ const LABELLED_ROWS = [
 	2,
 	4
 ];
+/**
+* Resolve one grid bound: an unparseable or narrowing value falls back to the
+* series' own bound, so the grid can only ever be widened.
+*
+* @param bound     - Requested bound as `yyyy-MM-dd`, if any.
+* @param fallback  - The series' own bound on this side.
+* @param direction - Which way the bound is allowed to move.
+* @return The bound to draw to.
+*/
+const widenTo = (bound, fallback, direction) => {
+	if (!bound) return fallback;
+	const parsed = parseISO(bound);
+	if (isNaN(parsed.getTime())) return fallback;
+	if (direction === "earlier") return parsed < fallback ? parsed : fallback;
+	return parsed > fallback ? parsed : fallback;
+};
 const toDate = (point) => {
 	if (point.date instanceof Date && !isNaN(point.date.getTime())) return point.date;
 	if (point.dateString) {
@@ -5846,10 +5952,14 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 		if (date < minDate) minDate = date;
 		if (date > maxDate) maxDate = date;
 	}
-	const gridStart = startOfWeek(minDate, { weekStartsOn });
-	const weekCount = differenceInCalendarWeeks(maxDate, gridStart, { weekStartsOn }) + 1;
 	const minDayKey = format(minDate, "yyyy-MM-dd");
 	const maxDayKey = format(maxDate, "yyyy-MM-dd");
+	const gridMinDate = widenTo(options.gridSpan?.start, minDate, "earlier");
+	const gridMaxDate = widenTo(options.gridSpan?.end, maxDate, "later");
+	const gridMaxDayKey = format(gridMaxDate, "yyyy-MM-dd");
+	const gridStart = startOfWeek(gridMinDate, { weekStartsOn });
+	const gridMinDayKey = format(gridMinDate < minDate ? gridStart : gridMinDate, "yyyy-MM-dd");
+	const weekCount = differenceInCalendarWeeks(gridMaxDate, gridStart, { weekStartsOn }) + 1;
 	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? format(addDays(gridStart, row), "EEE") : "");
 	const MIN_FIRST_MONTH_WEEKS = 2;
 	const firstMonth = gridStart.getMonth();
@@ -5871,7 +5981,9 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 				label: format(day, "EEE, MMM d, yyyy"),
 				value: valueByDay.has(key) ? valueByDay.get(key) : null
 			};
-			if (hideOutOfRangeDays && (key < minDayKey || key > maxDayKey)) cell.hidden = true;
+			if (key < gridMinDayKey || key > gridMaxDayKey) {
+				if (hideOutOfRangeDays) cell.hidden = true;
+			} else if (key < minDayKey || key > maxDayKey) cell.placeholder = true;
 			cells.push(cell);
 		}
 		data.push({
@@ -5978,7 +6090,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		setSelectedIndex(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
-	const isCellHidden = useCallback((col, row) => data[col]?.data[row]?.hidden === true, [data]);
+	const isCellInert = useCallback((col, row) => {
+		const cell = data[col]?.data[row];
+		return cell?.hidden === true || cell?.placeholder === true;
+	}, [data]);
 	const onChartKeyDown = useCallback((event) => {
 		if (![
 			"ArrowLeft",
@@ -5995,7 +6110,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		}
 		event.preventDefault();
 		if (selectedIndex === void 0) {
-			for (let index = 0; index < columns * rows; index++) if (!isCellHidden(Math.floor(index / rows), index % rows)) {
+			for (let index = 0; index < columns * rows; index++) if (!isCellInert(Math.floor(index / rows), index % rows)) {
 				setSelectedIndex(index);
 				return;
 			}
@@ -6012,7 +6127,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		do {
 			col += stepCol;
 			row += stepRow;
-		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellHidden(col, row));
+		} while (col >= 0 && col < columns && row >= 0 && row < rows && isCellInert(col, row));
 		if (col < 0 || col >= columns || row < 0 || row >= rows) return;
 		setSelectedIndex(col * rows + row);
 	}, [
@@ -6020,7 +6135,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		columns,
 		selectedIndex,
 		hideTooltip,
-		isCellHidden
+		isCellInert
 	]);
 	const handleCellMouseMove = useCallback((event) => {
 		if (!withTooltips) return;
@@ -6092,7 +6207,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ jsx(HeatmapContext.Provider, {
 		value: heatmapContext,
-		children: /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+		children: /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 			value: { chartId },
 			children: /* @__PURE__ */ jsxs(ChartLayout, {
 				legendPosition: "bottom",
@@ -6144,6 +6259,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									"aria-hidden": "true",
 									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
 								}, `cell-${columnIndex}-${rowIndex}`);
+								if (cell?.placeholder) return /* @__PURE__ */ jsx("div", {
+									"aria-hidden": "true",
+									className: clsx(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--placeholder"])
+								}, `cell-${columnIndex}-${rowIndex}`);
 								const value = cell?.value ?? null;
 								const present = isPresent(value);
 								const normalized = present ? getNormalizedValue(value, extent) : 0;
@@ -8777,29 +8896,25 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		legendLabels
 	});
 	const isPrimaryVisible = useMemo(() => {
-		if (!chartId || !legendInteractive || legendItems.length === 0) return true;
+		if (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;
+		if (legendItems.length < 2) return true;
 		return isSeriesVisible(chartId, legendItems[1].label);
 	}, [
 		chartId,
-		legendInteractive,
 		legendItems,
 		isSeriesVisible
 	]);
 	const allSeriesHidden = useMemo(() => {
-		if (!legendInteractive) return false;
 		if (withComparison && !withOverlayLabel) return !isPrimaryVisible && !isComparisonVisible;
 		return !isPrimaryVisible;
 	}, [
-		legendInteractive,
 		isPrimaryVisible,
 		isComparisonVisible,
 		withComparison,
@@ -8818,7 +8933,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 	const prefersReducedMotion = usePrefersReducedMotion();
 	const { contentRef, fittedCount, isMeasurable } = useFittedRowCount(fitRows && !allSeriesHidden, data?.length ?? 0, data);
 	const shouldFitRows = fitRows && isMeasurable;
-	if (!data || data.length === 0) return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	if (!data || data.length === 0) return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
 			legendPosition,
@@ -8853,7 +8968,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
 			legendPosition,
@@ -8878,7 +8993,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					children: __("Not enough space to display data", "jetpack-charts")
 				}), allSeriesHidden ? /* @__PURE__ */ jsx("div", {
 					className: leaderboard_chart_module_default.emptyState,
-					children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
+					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ jsx(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap,
@@ -9068,10 +9183,9 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		hideTooltip();
 	}, [withTooltips, hideTooltip]);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
 		data: useDataWithPercentages(data),
 		chartId,
-		legendInteractive,
 		isSeriesVisible
 	});
 	const legendItems = useChartLegendItems(legendData, useMemo(() => ({
@@ -9132,7 +9246,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
 			legendPosition,
@@ -9189,7 +9303,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 								y: 0,
 								width,
 								height,
-								children: __("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+								children: getAllHiddenMessage(legendInteractive, "segments")
 							}) : /* @__PURE__ */ jsx(Pie, {
 								data: dataWithIndex,
 								pieValue: accessors.value,
@@ -9361,10 +9475,9 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 	}, [handleMouseMove]);
 	const { isValid, message } = validateData(data);
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const { visibleData, allSegmentsHidden, legendData } = useInteractiveLegendData({
+	const { visibleData, allSegmentsHidden, legendData } = useLegendVisibilityData({
 		data: useDataWithPercentages(data),
 		chartId,
-		legendInteractive,
 		isSeriesVisible
 	});
 	const accessors = useMemo(() => ({
@@ -9431,7 +9544,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ jsx(SingleChartContext.Provider, {
+	return /* @__PURE__ */ jsx(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ jsx(ChartLayout, {
 			legendPosition,
@@ -9484,7 +9597,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 								y: -radius / 2,
 								width,
 								height,
-								children: __("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+								children: getAllHiddenMessage(legendInteractive, "segments")
 							}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 								/* @__PURE__ */ jsx(Pie, {
 									data: dataWithIndex,
@@ -9746,6 +9859,6 @@ function TrendIndicator({ direction, value, className, style, showIcon = true })
 	});
 }
 //#endregion
-export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
+export { AccessibleTooltip, AreaChartResponsive as AreaChart, AreaChart as AreaChartUnresponsive, BarChartResponsive as BarChart, BarChart as BarChartUnresponsive, BarListChartResponsive as BarListChart, BarListChart as BarListChartUnresponsive, BaseTooltip, ConversionFunnelChartWithProvider as ConversionFunnelChart, GeoChartResponsive as GeoChart, GeoChartWithProvider as GeoChartUnresponsive, GlobalChartsContext, GlobalChartsProvider, GlobalChartsProvider as ThemeProvider, GoogleDataTableColumnRoleType, HeatmapChartResponsive as HeatmapChart, HeatmapChart as HeatmapChartUnresponsive, LeaderboardChartResponsive as LeaderboardChart, LeaderboardChart as LeaderboardChartUnresponsive, Legend, LineChartResponsive as LineChart, LineChart as LineChartUnresponsive, PieChartResponsive as PieChart, PieChart as PieChartUnresponsive, PieSemiCircleChartResponsive as PieSemiCircleChart, PieSemiCircleChart as PieSemiCircleChartUnresponsive, Sparkline, SparklineUnresponsive, TrendIndicator, buildCalendarHeatmapData, defaultTheme, formatMetricValue, formatPercentage, getColorDistance, hexToRgba, isValidHexColor, lightenHexColor, mergeThemes, mixHexColors, normalizeColorToHex, parseAsLocalDate, parseHslString, parseRgbString, prefersLightText, relativeLuminance, resolveCssVariable, useChartLegendItems, useChartRegistration, useChartScopeElement, useGlobalChartsContext, useGlobalChartsTheme, useLeaderboardLegendItems, validateHexColor };
 
 //# sourceMappingURL=index.js.map