@automattic/charts 3.0.0 → 3.1.1

package/dist/index.cjs

@@ -52,17 +52,15 @@ require("@babel/runtime/helpers/esm/extends");
 require("@babel/runtime/helpers/extends");
 let _wordpress_icons = require("@wordpress/icons");
 let _visx_shape = require("@visx/shape");
-//#region src/charts/private/single-chart-context/single-chart-context.tsx
+//#region src/charts/private/chart-instance-context/chart-instance-context.ts
 const ChartInstanceContext = (0, react.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 = (0, react.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
 /**
@@ -969,6 +967,7 @@ const GlobalChartsContext = (0, react.createContext)(null);
 const GlobalChartsProvider = ({ children, theme }) => {
 	const [charts, setCharts] = (0, react.useState)(() => /* @__PURE__ */ new Map());
 	const [hiddenSeries, setHiddenSeries] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const seededCharts = (0, react.useRef)(/* @__PURE__ */ new Set());
 	const wrapperRef = (0, react.useRef)(null);
 	const [scopeNode, setScopeNode] = (0, react.useState)(null);
 	const setWrapperNode = (0, react.useCallback)((node) => {
@@ -1071,18 +1070,41 @@ const GlobalChartsProvider = ({ children, theme }) => {
 			shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
 		};
 	}, [providerTheme, resolveColor]);
-	const toggleSeriesVisibility = (0, react.useCallback)((chartId, seriesLabel) => {
+	const updateHiddenSeries = (0, react.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 = (0, react.useCallback)((chartId, seriesLabel) => {
+		updateHiddenSeries(chartId, (current) => {
+			if (current.has(seriesLabel)) current.delete(seriesLabel);
+			else current.add(seriesLabel);
+			return current;
+		});
+	}, [updateHiddenSeries]);
+	const setSeriesVisibility = (0, react.useCallback)((chartId, seriesLabel, visible) => {
+		updateHiddenSeries(chartId, (current) => {
+			if (visible) current.delete(seriesLabel);
+			else current.add(seriesLabel);
+			return current;
+		});
+	}, [updateHiddenSeries]);
+	const setChartHiddenSeries = (0, react.useCallback)((chartId, seriesLabels) => {
+		updateHiddenSeries(chartId, () => new Set(seriesLabels));
+	}, [updateHiddenSeries]);
+	const hasSeededChart = (0, react.useCallback)((chartId) => seededCharts.current.has(chartId), []);
+	const seedChartHiddenSeries = (0, react.useCallback)((chartId, seriesLabels) => {
+		if (seededCharts.current.has(chartId)) return;
+		seededCharts.current.add(chartId);
+		setChartHiddenSeries(chartId, seriesLabels);
+	}, [setChartHiddenSeries]);
 	const isSeriesVisible = (0, react.useCallback)((chartId, seriesLabel) => {
 		const chartHidden = hiddenSeries.get(chartId);
 		return !chartHidden || !chartHidden.has(seriesLabel);
@@ -1099,6 +1121,10 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		theme: providerTheme,
 		getElementStyles,
 		toggleSeriesVisibility,
+		setSeriesVisibility,
+		setChartHiddenSeries,
+		seedChartHiddenSeries,
+		hasSeededChart,
 		isSeriesVisible,
 		getHiddenSeries,
 		isColorPaletteResolved
@@ -1110,6 +1136,10 @@ const GlobalChartsProvider = ({ children, theme }) => {
 		providerTheme,
 		getElementStyles,
 		toggleSeriesVisibility,
+		setSeriesVisibility,
+		setChartHiddenSeries,
+		seedChartHiddenSeries,
+		hasSeededChart,
 		isSeriesVisible,
 		getHiddenSeries,
 		isColorPaletteResolved
@@ -1508,12 +1538,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
 *
@@ -1522,10 +1552,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),
 * });
 *
@@ -1540,16 +1569,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 = (0, react.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);
@@ -1560,16 +1588,15 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 	}, [
 		data,
 		chartId,
-		isSeriesVisible,
-		legendInteractive
+		isSeriesVisible
 	]);
 	return {
 		visibleData,
 		allSegmentsHidden: (0, react.useMemo)(() => {
-			return legendInteractive && visibleData.length === 0;
-		}, [legendInteractive, visibleData]),
+			return visibleData.length === 0 && data.length > 0;
+		}, [visibleData, data]),
 		legendData: (0, react.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;
@@ -1578,7 +1605,6 @@ const useInteractiveLegendData = ({ data, chartId, legendInteractive, isSeriesVi
 		}, [
 			data,
 			visibleData,
-			legendInteractive,
 			chartId,
 			isSeriesVisible
 		])
@@ -1708,12 +1734,22 @@ const LegendText = ({ text, textOverflow, maxWidth }) => {
 		children: text
 	});
 };
+const getLegendItemAriaLabel = (text, value, visible, interactive) => {
+	const accessibleText = value != null && value !== "" ? (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%1$s, %2$s", "legend item label and value", "jetpack-charts"), text, String(value)) : text;
+	if (interactive) {
+		if (visible) return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: visible. Toggle visibility.", "visible interactive legend item", "jetpack-charts"), accessibleText);
+		return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: hidden. Toggle visibility.", "hidden interactive legend item", "jetpack-charts"), accessibleText);
+	}
+	if (visible) return;
+	return (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n._x)("%s: hidden", "hidden non-interactive legend item", "jetpack-charts"), accessibleText);
+};
 const BaseLegend = (0, react.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 = (0, react.useContext)(GlobalChartsContext);
+	const chartInstanceContext = (0, react.useContext)(ChartInstanceContext);
 	const standaloneScopeClass = useStandaloneScopeClass();
 	const legendScale = (0, _visx_scale.scaleOrdinal)({
 		domain: items.map((item) => item.label),
@@ -1724,9 +1760,7 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 	const handleLegendClick = (0, react.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,
@@ -1734,11 +1768,12 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 		context
 	]);
 	const isSeriesVisible = (0, react.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 = (0, react.useCallback)((seriesLabels) => {
@@ -1766,7 +1801,7 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 			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: (0, clsx.default)(standaloneScopeClass, base_legend_module_default.legend, className),
 			style: theme.legend?.containerStyles,
 			children: labels.map((label, i) => {
@@ -1781,10 +1816,10 @@ const BaseLegend = (0, react.forwardRef)(({ items, className, orientation = "hor
 					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__ */ (0, react_jsx_runtime.jsx)("svg", {
 						width: items[i]?.glyphSize * 2,
 						height: items[i]?.glyphSize * 2,
@@ -1846,8 +1881,8 @@ const defaultShapeByChartType = {
 };
 const Legend = (0, react.forwardRef)(({ chartId, items, shape, ...props }, ref) => {
 	const context = (0, react.useContext)(GlobalChartsContext);
-	const singleChartContext = (0, react.useContext)(SingleChartContext);
-	const contextChartId = chartId ?? singleChartContext?.chartId;
+	const chartInstanceContext = (0, react.useContext)(ChartInstanceContext);
+	const contextChartId = chartId ?? chartInstanceContext?.chartId;
 	const chartData = (0, react.useMemo)(() => contextChartId && context ? context.getChartData(contextChartId) : void 0, [contextChartId, context]);
 	const contextItems = chartData?.legendItems;
 	const resolvedShape = shape ?? (chartData?.chartType ? defaultShapeByChartType[chartData.chartType] : void 0);
@@ -2087,11 +2122,16 @@ const AccessibleTooltip = ({ renderTooltip, selectedIndex, tooltipRef, keyboardF
 		}
 		return flattened;
 	}, [series, mode]);
+	const hasKeyboardSelection = (0, react.useRef)(false);
 	(0, react.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];
@@ -2199,6 +2239,43 @@ const useKeyboardNavigation = ({ selectedIndex, setSelectedIndex, isNavigating,
 	};
 };
 //#endregion
+//#region src/providers/chart-context/hooks/use-default-hidden-series.ts
+const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? react.useLayoutEffect : react.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 = (0, react.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 (0, react.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.
@@ -2412,6 +2489,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 (0, _wordpress_i18n._x)("All segments are hidden. Click legend items to show data.", "chart empty state: interactive segments", "jetpack-charts");
+		return (0, _wordpress_i18n._x)("All segments are hidden.", "chart empty state: segments", "jetpack-charts");
+	}
+	if (interactive) return (0, _wordpress_i18n._x)("All series are hidden. Click legend items to show data.", "chart empty state: interactive series", "jetpack-charts");
+	return (0, _wordpress_i18n._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) => {
@@ -2939,7 +3037,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] = (0, react.useState)(null);
 	const [scalesStable, setScalesStable] = (0, react.useState)(false);
 	const createScaleSignature = (0, react.useCallback)((scaleData) => {
@@ -3324,7 +3422,7 @@ const LineChartScalesRef = ({ chartRef, width, height, margin }) => {
 	]);
 	return null;
 };
-const LineChartInternal = (0, react.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 = (0, react.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";
@@ -3333,6 +3431,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const theme = useXYChartTheme(data);
 	const resolvedBackgroundColor = theme.backgroundColor ?? providerTheme.backgroundColor;
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const chartRef = (0, react.useRef)(null);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
@@ -3360,29 +3460,19 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}
 	}), [internalChartRef]);
 	const dataSorted = useChartDataTransform(data);
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const seriesWithVisibility = (0, react.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 = (0, react.useMemo)(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
 	const stableYDomain = (0, react.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 ?? []) {
@@ -3393,11 +3483,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			}
 		}
 		return min < max ? [min, max] : void 0;
-	}, [
-		legendInteractive,
-		rescaleYOnVisibilityChange,
-		dataSorted
-	]);
+	}, [rescaleYOnVisibilityChange, dataSorted]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
@@ -3407,8 +3493,8 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const chartOptions = (0, react.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: {
@@ -3521,10 +3607,11 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
 			chartRef: internalChartRef,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -3579,7 +3666,7 @@ const LineChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomClip, {
 									active: zoomable && !!zoom.domain,
@@ -3781,7 +3868,7 @@ const HoverGlyphs = ({ visibleSeries, stacked, stackOffset, getElementStyles, st
 };
 //#endregion
 //#region src/charts/area-chart/area-chart.tsx
-const AreaChartInternal = (0, react.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 = (0, react.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";
@@ -3789,6 +3876,8 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const providerTheme = useGlobalChartsTheme();
 	const theme = useXYChartTheme(data);
 	const chartId = useChartId(providedChartId);
+	const hiddenSeries = useDefaultHiddenSeries(chartId, defaultHiddenSeries);
+	const isSeriesVisible = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const chartRef = (0, react.useRef)(null);
 	const [selectedIndex, setSelectedIndex] = (0, react.useState)(void 0);
 	const [isNavigating, setIsNavigating] = (0, react.useState)(false);
@@ -3816,24 +3905,14 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		}
 	}), [internalChartRef]);
 	const dataSorted = useChartDataTransform(data);
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const seriesWithVisibility = (0, react.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 = (0, react.useMemo)(() => seriesWithVisibility.every(({ isVisible }) => !isVisible), [seriesWithVisibility]);
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
@@ -3844,7 +3923,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		totalPoints: dataSorted[0]?.data.length || 0
 	});
 	const fixedYDomain = (0, react.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;
@@ -3878,12 +3957,11 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 		dataSorted,
 		stacked,
 		stackOffset,
-		legendInteractive,
 		rescaleYOnVisibility
 	]);
 	const chartOptions = (0, react.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: {
@@ -3955,7 +4033,6 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 	const zeroYAccessor = (0, react.useCallback)(() => 0, []);
 	const visibleLabels = (0, react.useMemo)(() => new Set(seriesWithVisibility.filter((s) => s.isVisible).map((s) => s.series.label)), [seriesWithVisibility]);
 	const filteredRenderTooltip = (0, react.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)));
@@ -3973,11 +4050,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 				nearestDatum: nextNearest
 			}
 		});
-	}, [
-		renderTooltip,
-		legendInteractive,
-		visibleLabels
-	]);
+	}, [renderTooltip, visibleLabels]);
 	const resolvedFillOpacity = fillOpacity ?? (stacked ? .85 : .4);
 	const resolvedWithStroke = withStroke ?? !stacked;
 	if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -4008,7 +4081,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			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 ? {} : {
@@ -4021,10 +4094,11 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 			}
 		}, seriesData?.label || index);
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
 			chartRef: internalChartRef,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -4079,7 +4153,7 @@ const AreaChartInternal = (0, react.forwardRef)(({ data, chartId: providedChartI
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ZoomClip, {
 									active: zoomable,
@@ -4356,11 +4430,13 @@ const getGroupPadding = (scale) => {
 function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = ALL_RENDERED) {
 	const stableOptions = useDeepMemo(options);
 	const axisConfig = (0, react.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
@@ -4420,7 +4496,7 @@ function useBarChartOptions(data, horizontal, options = {}, isSeriesRendered = A
 		isSeriesRendered
 	]);
 	return (0, react.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)) {
@@ -4445,11 +4521,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,
@@ -4463,7 +4539,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
@@ -4471,14 +4547,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,
@@ -4633,11 +4709,13 @@ const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime
 	className: bar_chart_module_default["bar-chart__tooltip-row"],
 	children: (0, _wordpress_i18n.sprintf)((0, _wordpress_i18n.__)("%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 = (0, react.useCallback)((seriesLabel) => !hiddenSeries.has(seriesLabel), [hiddenSeries]);
 	const theme = useXYChartTheme(data);
 	const dataSorted = useChartDataTransform(data);
 	const dataWithVisibleZeros = useZeroValueDisplay(dataSorted, {
@@ -4645,12 +4723,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		valueAxisLength: horizontal ? width : height
 	});
 	const legendItems = useChartLegendItems(dataSorted, (0, react.useMemo)(() => ({ collapseGroups: legendCollapseGroups }), [legendCollapseGroups]));
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-	const isSeriesRendered = (0, react.useCallback)((series) => !chartId || !legendInteractive || isSeriesVisible(chartId, series.label), [
-		chartId,
-		legendInteractive,
-		isSeriesVisible
-	]);
+	const { getElementStyles } = useGlobalChartsContext();
+	const isSeriesRendered = (0, react.useCallback)((series) => isSeriesVisible(series.label), [isSeriesVisible]);
 	const chartOptions = useBarChartOptions(dataWithVisibleZeros, horizontal, options, isSeriesRendered);
 	const defaultMargin = useChartMargin(height, chartOptions, dataSorted, theme, horizontal);
 	const chartRef = (0, react.useRef)(null);
@@ -4886,9 +4960,10 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: {
 			chartId,
+			isSeriesVisible,
 			chartWidth: width,
 			chartHeight: measuredChartHeight || 0
 		},
@@ -4947,7 +5022,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									y: chartHeight / 2,
 									width,
 									height: chartHeight,
-									children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+									children: getAllHiddenMessage(legendInteractive, "series")
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComparisonBars, {
 									comparisonEntries,
@@ -5760,12 +5835,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",
@@ -5821,6 +5911,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 = (0, date_fns.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) {
@@ -5848,10 +5954,14 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 		if (date < minDate) minDate = date;
 		if (date > maxDate) maxDate = date;
 	}
-	const gridStart = (0, date_fns.startOfWeek)(minDate, { weekStartsOn });
-	const weekCount = (0, date_fns.differenceInCalendarWeeks)(maxDate, gridStart, { weekStartsOn }) + 1;
 	const minDayKey = (0, date_fns.format)(minDate, "yyyy-MM-dd");
 	const maxDayKey = (0, date_fns.format)(maxDate, "yyyy-MM-dd");
+	const gridMinDate = widenTo(options.gridSpan?.start, minDate, "earlier");
+	const gridMaxDate = widenTo(options.gridSpan?.end, maxDate, "later");
+	const gridMaxDayKey = (0, date_fns.format)(gridMaxDate, "yyyy-MM-dd");
+	const gridStart = (0, date_fns.startOfWeek)(gridMinDate, { weekStartsOn });
+	const gridMinDayKey = (0, date_fns.format)(gridMinDate < minDate ? gridStart : gridMinDate, "yyyy-MM-dd");
+	const weekCount = (0, date_fns.differenceInCalendarWeeks)(gridMaxDate, gridStart, { weekStartsOn }) + 1;
 	const rowLabels = Array.from({ length: 7 }, (_, row) => LABELLED_ROWS.includes(row) ? (0, date_fns.format)((0, date_fns.addDays)(gridStart, row), "EEE") : "");
 	const MIN_FIRST_MONTH_WEEKS = 2;
 	const firstMonth = gridStart.getMonth();
@@ -5873,7 +5983,9 @@ const buildCalendarHeatmapData = (series, options = {}) => {
 				label: (0, date_fns.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({
@@ -5980,7 +6092,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		setSelectedIndex(void 0);
 		hideTooltip();
 	}, [hideTooltip]);
-	const isCellHidden = (0, react.useCallback)((col, row) => data[col]?.data[row]?.hidden === true, [data]);
+	const isCellInert = (0, react.useCallback)((col, row) => {
+		const cell = data[col]?.data[row];
+		return cell?.hidden === true || cell?.placeholder === true;
+	}, [data]);
 	const onChartKeyDown = (0, react.useCallback)((event) => {
 		if (![
 			"ArrowLeft",
@@ -5997,7 +6112,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;
 			}
@@ -6014,7 +6129,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);
 	}, [
@@ -6022,7 +6137,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 		columns,
 		selectedIndex,
 		hideTooltip,
-		isCellHidden
+		isCellInert
 	]);
 	const handleCellMouseMove = (0, react.useCallback)((event) => {
 		if (!withTooltips) return;
@@ -6094,7 +6209,7 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 	const heightCapped = !compact && Boolean(maxCellHeight);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeatmapContext.Provider, {
 		value: heatmapContext,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 			value: { chartId },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartLayout, {
 				legendPosition: "bottom",
@@ -6146,6 +6261,10 @@ const HeatmapChartInternal = ({ data, chartId: providedChartId, width = 0, heigh
 									"aria-hidden": "true",
 									className: (0, clsx.default)(heatmap_chart_module_default["heatmap-chart__cell"], heatmap_chart_module_default["heatmap-chart__cell--hidden"])
 								}, `cell-${columnIndex}-${rowIndex}`);
+								if (cell?.placeholder) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"aria-hidden": "true",
+									className: (0, clsx.default)(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;
@@ -9144,29 +9263,25 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		legendLabels
 	});
 	const isPrimaryVisible = (0, react.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 = (0, react.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 = (0, react.useMemo)(() => {
-		if (!legendInteractive) return false;
 		if (withComparison && !withOverlayLabel) return !isPrimaryVisible && !isComparisonVisible;
 		return !isPrimaryVisible;
 	}, [
-		legendInteractive,
 		isPrimaryVisible,
 		isComparisonVisible,
 		withComparison,
@@ -9185,7 +9300,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__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	if (!data || data.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9220,7 +9335,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9245,7 +9360,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 					children: (0, _wordpress_i18n.__)("Not enough space to display data", "jetpack-charts")
 				}), allSeriesHidden ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: leaderboard_chart_module_default.emptyState,
-					children: (0, _wordpress_i18n.__)("All series are hidden. Click legend items to show data.", "jetpack-charts")
+					children: getAllHiddenMessage(legendInteractive, "series")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(component_default, {
 					templateColumns: "minmax(0, 1fr) auto",
 					rowGap,
@@ -9435,10 +9550,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, (0, react.useMemo)(() => ({
@@ -9499,7 +9613,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9556,7 +9670,7 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 								y: 0,
 								width,
 								height,
-								children: (0, _wordpress_i18n.__)("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+								children: getAllHiddenMessage(legendInteractive, "segments")
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.Pie, {
 								data: dataWithIndex,
 								pieValue: accessors.value,
@@ -9728,10 +9842,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 = (0, react.useMemo)(() => ({
@@ -9798,7 +9911,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 		chartId,
 		interactive: legendInteractive
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleChartContext.Provider, {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartInstanceContext.Provider, {
 		value: { chartId },
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartLayout, {
 			legendPosition,
@@ -9851,7 +9964,7 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 								y: -radius / 2,
 								width,
 								height,
-								children: (0, _wordpress_i18n.__)("All segments are hidden. Click legend items to show data.", "jetpack-charts")
+								children: getAllHiddenMessage(legendInteractive, "segments")
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_shape.Pie, {
 									data: dataWithIndex,
@@ -10126,6 +10239,7 @@ exports.GeoChart = GeoChartResponsive;
 exports.GeoChartUnresponsive = GeoChartWithProvider;
 exports.GlobalChartsContext = GlobalChartsContext;
 exports.GlobalChartsProvider = GlobalChartsProvider;
+exports.GoogleDataTableColumnRoleType = GoogleDataTableColumnRoleType;
 exports.HeatmapChart = HeatmapChartResponsive;
 exports.HeatmapChartUnresponsive = HeatmapChart;
 exports.LeaderboardChart = LeaderboardChartResponsive;