@automattic/charts 1.6.0 → 1.8.0

package/dist/index.js

@@ -17,7 +17,6 @@ import { LinearGradient } from "@visx/gradient";
 import { curveCatmullRom, curveLinear, curveMonotoneX } from "@visx/curve";
 import { useParentSize } from "@visx/responsive";
 import { Annotation, CircleSubject, Connector, HtmlLabel, Label, LineSubject } from "@visx/annotation";
-import { Icon, chevronRight, close } from "@wordpress/icons";
 import { PatternCircles, PatternHexagons, PatternLines, PatternWaves } from "@visx/pattern";
 import { useTooltip, useTooltipInPortal } from "@visx/tooltip";
 import { Chart } from "react-google-charts";
@@ -25,6 +24,7 @@ import DOMPurify from "dompurify";
 import { __assign } from "tslib";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import "@babel/runtime/helpers/extends";
+import { Icon, chevronRight } from "@wordpress/icons";
 import { Pie } from "@visx/shape";
 //#region \0rolldown/runtime.js
 var __create = Object.create;
@@ -262,6 +262,20 @@ function getSeriesLineStyles(seriesData, index, providerTheme) {
 	return seriesData.options?.seriesLineStyle ?? themeSemanticLineStyle ?? themeSeriesLineStyle ?? {};
 }
 /**
+* Utility to get consolidated bar styles for a series by semantic type.
+* Mirrors getSeriesLineStyles: a series with `options.type` (e.g. 'comparison')
+* resolves to `theme.barChart.barStyles[ type ]`.
+*
+* @param {SeriesData} seriesData    - The series data containing styling options
+* @param {number}     index         - The index of the series in the data array
+* @param {ChartTheme} providerTheme - The chart theme configuration
+* @return {BarStyles} The consolidated bar styles for the series
+*/
+function getSeriesBarStyles(seriesData, index, providerTheme) {
+	const type = seriesData.options?.type;
+	return (type && providerTheme?.barChart?.barStyles?.[type]) ?? {};
+}
+/**
 * Utility function to get shape styles for a legend item
 *
 * @param {SeriesData}  series      - The series data containing styling options
@@ -273,13 +287,17 @@ function getSeriesLineStyles(seriesData, index, providerTheme) {
 function getItemShapeStyles(series, index, theme, legendShape) {
 	const seriesShapeStyles = series.options?.legendShapeStyle ?? {};
 	const lineStyles = legendShape === "line" ? getSeriesLineStyles(series, index, theme) : {};
+	const barOpacity = legendShape !== "line" ? getSeriesBarStyles(series, index, theme).opacity : void 0;
+	const barShapeStyles = barOpacity !== void 0 ? { opacity: barOpacity } : {};
 	const themeShapeStyles = theme.legend?.shapeStyles?.[index];
-	const itemShapeStyles = {
+	const explicitStyles = {
 		...seriesShapeStyles,
 		...lineStyles
 	};
-	if (Object.values(itemShapeStyles).some((value) => value !== void 0 && value !== null && value !== "")) return itemShapeStyles;
-	return themeShapeStyles ?? {};
+	return {
+		...Object.values(explicitStyles).some((value) => value !== void 0 && value !== null && value !== "") ? explicitStyles : themeShapeStyles ?? {},
+		...barShapeStyles
+	};
 }
 //#endregion
 //#region src/utils/is-safari.ts
@@ -709,7 +727,7 @@ const defaultTheme = {
 	leaderboardChart: {
 		rowGap: 12,
 		columnGap: 4,
-		labelSpacing: 1.5,
+		labelSpacing: "xs",
 		deltaColors: [
 			"#FF8C8F",
 			"#757575",
@@ -725,6 +743,10 @@ const defaultTheme = {
 		strokeDasharray: "4 4",
 		strokeLinecap: "square"
 	} } },
+	barChart: { barStyles: { comparison: {
+		widthFactor: 1.5,
+		opacity: .5
+	} } },
 	sparkline: {
 		margin: {
 			top: 2,
@@ -831,6 +853,7 @@ const GlobalChartsProvider = ({ children, theme }) => {
 				overrideColor: overrideColor || isSeriesData && data?.options?.stroke || isPointPercentageData && data?.color
 			}),
 			lineStyles: isSeriesData ? getSeriesLineStyles(data, index, providerTheme) : {},
+			barStyles: isSeriesData ? getSeriesBarStyles(data, index, providerTheme) : {},
 			glyph: providerTheme.glyphs?.[index],
 			shapeStyles: isSeriesData ? getItemShapeStyles(data, index, providerTheme, legendShape) : {}
 		};
@@ -2635,6 +2658,32 @@ const DefaultGlyph = (props) => {
 	});
 };
 //#endregion
+//#region src/charts/private/center/center.module.scss
+var center_module_default = { "center": "a8ccharts-w3qxlG-center" };
+//#endregion
+//#region src/charts/private/center/center.tsx
+/**
+* Centers its children on both axes and fills its parent.
+*
+* A thin wrapper around `Stack` with `align="center"` and `justify="center"`
+* defaults (both overridable) plus `width: 100%; height: 100%`. Reads more
+* honestly than a `Stack` with both axes centered, and lets call sites drop
+* ad-hoc `*__centering` classes. Forwards its ref and spreads remaining props
+* onto the underlying `Stack`.
+*
+* @param props - Stack props; `align`/`justify` default to `"center"`.
+* @param ref   - Forwarded to the underlying element.
+* @return The centered layout element.
+*/
+const Center = forwardRef(({ align = "center", justify = "center", className, ...props }, ref) => /* @__PURE__ */ jsx(Stack, {
+	ref,
+	align,
+	justify,
+	className: clsx(center_module_default.center, className),
+	...props
+}));
+Center.displayName = "Center";
+//#endregion
 //#region src/charts/private/svg-empty-state/svg-empty-state.module.scss
 var svg_empty_state_module_default = { "svg-empty-state": "a8ccharts-udGPVq-svg-empty-state" };
 //#endregion
@@ -2659,9 +2708,7 @@ const SvgEmptyState = ({ x, y, width, height, children }) => {
 		y: y - height / 2,
 		width,
 		height,
-		children: /* @__PURE__ */ jsx(Stack, {
-			align: "center",
-			justify: "center",
+		children: /* @__PURE__ */ jsx(Center, {
 			className: svg_empty_state_module_default["svg-empty-state"],
 			children
 		})
@@ -3059,6 +3106,19 @@ const LineChartAnnotationsOverlay = ({ children }) => {
 		})
 	});
 };
+const CloseIcon = () => /* @__PURE__ */ jsx("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	focusable: "false",
+	children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+});
 const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, renderLabelPopover }) => {
 	const popoverId = useId();
 	const buttonRef = useRef(null);
@@ -3120,10 +3180,7 @@ const LineChartAnnotationLabelWithPopover = ({ title, subtitle, renderLabel, ren
 					popovertargetaction: "hide",
 					className: line_chart_module_default["line-chart__annotation-label-popover-close-button"],
 					"aria-label": __("Close", "jetpack-charts"),
-					children: /* @__PURE__ */ jsx(Icon, {
-						icon: close,
-						size: 16
-					})
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
 				})]
 			})
 		})]
@@ -4331,6 +4388,10 @@ const TruncatedXTickComponent = createTruncatedTickComponent("x");
 const TruncatedYTickComponent = createTruncatedTickComponent("y");
 //#endregion
 //#region src/charts/bar-chart/private/use-bar-chart-options.ts
+/** Outer padding of the category band scale (space at the chart edges). */
+const BASE_BAND_PADDING = .2;
+/** Inner padding of the category band scale (the base gap between ticks). */
+const BASE_BAND_PADDING_INNER = .1;
 const formatDateTick = (timestamp) => {
 	return new Date(timestamp).toLocaleDateString(void 0, {
 		month: "short",
@@ -4358,8 +4419,8 @@ function useBarChartOptions(data, horizontal, options = {}) {
 	const defaultOptions = useMemo(() => {
 		const bandScale = {
 			type: "band",
-			padding: .2,
-			paddingInner: .1
+			padding: BASE_BAND_PADDING,
+			paddingInner: BASE_BAND_PADDING_INNER
 		};
 		const linearScale = {
 			type: "linear",
@@ -4398,13 +4459,29 @@ function useBarChartOptions(data, horizontal, options = {}) {
 	}, [data]);
 	return useMemo(() => {
 		const { xTickFormat, yTickFormat, 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 ? options.yScale?.domain : options.xScale?.domain)) {
+				const allValues = [];
+				data.forEach((series) => {
+					series.data.forEach((d) => {
+						const enhanced = d;
+						const v = enhanced.visualValue !== void 0 ? enhanced.visualValue : d.value;
+						if (typeof v === "number" && Number.isFinite(v)) allValues.push(v);
+					});
+				});
+				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(...allValues), Math.max(...allValues)] };
+			}
+		}
 		const xScale = {
 			...baseXScale,
-			...options.xScale || {}
+			...options.xScale || {},
+			...horizontal ? valueScaleDomainOverride : {}
 		};
 		const yScale = {
 			...baseYScale,
-			...options.yScale || {}
+			...options.yScale || {},
+			...!horizontal ? valueScaleDomainOverride : {}
 		};
 		const providedToolTipLabelFormatter = horizontal ? options.axis?.y?.tickFormat : options.axis?.x?.tickFormat;
 		const { labelOverflow: xLabelOverflow, ...xAxisOptions } = options.axis?.x || {};
@@ -4439,10 +4516,143 @@ function useBarChartOptions(data, horizontal, options = {}) {
 	}, [
 		defaultOptions,
 		options,
-		horizontal
+		horizontal,
+		data
 	]);
 }
 //#endregion
+//#region src/charts/bar-chart/private/comparison-bars-geometry.ts
+/**
+* Output position of a value scale's baseline: zero if in-domain, else the
+* nearest range edge. Mirrors visx's getScaleBaseline so comparison shadows
+* sit on the same baseline as primary bars.
+*
+* @param {ValueScale} scale - The continuous value scale.
+* @return {number} The baseline output position in pixels.
+*/
+function getValueScaleBaseline(scale) {
+	const [a, b] = scale.range().map((r) => Number(r) || 0);
+	const isDescending = b < a;
+	const maybeZero = scale(0);
+	const [minOutput, maxOutput] = isDescending ? [b, a] : [a, b];
+	if (isDescending) return Number.isFinite(maybeZero) ? Math.min(Math.max(minOutput, maybeZero), maxOutput) : maxOutput;
+	return Number.isFinite(maybeZero) ? Math.min(Math.max(maybeZero, minOutput), maxOutput) : minOutput;
+}
+/**
+* Compute the rect for a comparison "shadow" bar, centered on the paired
+* primary bar slot and scaled by `widthFactor`.
+*
+* @param {object}  params               - Geometry inputs.
+* @param {boolean} params.horizontal    - True for a horizontal bar chart, false for vertical.
+* @param {number}  params.bandPosition  - bandScale(category): start px of the category band.
+* @param {number}  params.slotOffset    - groupScale(primaryKey): offset of the primary slot within the band.
+* @param {number}  params.slotThickness - groupScale.bandwidth(): primary bar thickness in px.
+* @param {number}  params.valuePosition - valueScale(value): output px for the bar's data value.
+* @param {number}  params.baseline      - getValueScaleBaseline(valueScale): zero-line output px.
+* @param {number}  params.widthFactor   - Shadow thickness multiplier, e.g. 1.5 for 150% width.
+* @return {ComparisonRect} The {x, y, width, height} of the shadow rect.
+*/
+function computeComparisonRect(params) {
+	const { horizontal, bandPosition, slotOffset, slotThickness, valuePosition, baseline, widthFactor } = params;
+	const slotStart = bandPosition + slotOffset;
+	const shadowThickness = slotThickness * widthFactor;
+	const shadowStart = slotStart + slotThickness / 2 - shadowThickness / 2;
+	const valueStart = Math.min(valuePosition, baseline);
+	const valueLength = Math.abs(baseline - valuePosition);
+	if (horizontal) return {
+		x: valueStart,
+		y: shadowStart,
+		width: valueLength,
+		height: shadowThickness
+	};
+	return {
+		x: shadowStart,
+		y: valueStart,
+		width: shadowThickness,
+		height: valueLength
+	};
+}
+/**
+* Fraction of each per-series step left as a gap between bars within a single tick.
+* Larger = more space between adjacent series; the shadow spans `1 - COMPARISON_INNER_GAP` of the step.
+*/
+const COMPARISON_INNER_GAP = .1;
+/**
+* Upper clamp on the computed group padding, so bars can never collapse to zero width
+* even at very large `widthFactor` values.
+*/
+const MAX_GROUP_PADDING = .9;
+/**
+* Factor applied to the category band's `paddingInner` in comparison mode to tighten the
+* gap between ticks. `0.75` = a 25% reduction of the tick-gap padding.
+*/
+const COMPARISON_TICK_GAP_FACTOR = .75;
+//#endregion
+//#region src/charts/bar-chart/private/comparison-bars.tsx
+const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizontal, xAccessor, yAccessor, getElementStyles, resolveFill }) => {
+	const context = useContext(DataContext);
+	const xScale = context?.xScale;
+	const yScale = context?.yScale;
+	if (!xScale || !yScale || primaryKeys.length === 0) return null;
+	const bandScale = horizontal ? yScale : xScale;
+	const valueScale = horizontal ? xScale : yScale;
+	const bandwidth = bandScale.bandwidth ? bandScale.bandwidth() : 0;
+	if (!bandwidth) return null;
+	const groupScale = scaleBand({
+		domain: primaryKeys,
+		range: [0, bandwidth],
+		padding: groupPadding
+	});
+	const slotThickness = groupScale.bandwidth();
+	const baseline = getValueScaleBaseline(valueScale);
+	const bandAccessor = horizontal ? yAccessor : xAccessor;
+	const valueAccessor = horizontal ? xAccessor : yAccessor;
+	const rects = [];
+	comparisonEntries.forEach((entry) => {
+		const { series, index, primaryKey } = entry;
+		const slotOffset = groupScale(primaryKey);
+		if (slotOffset == null || !Number.isFinite(slotOffset)) return;
+		const { barStyles } = getElementStyles({
+			data: series,
+			index
+		});
+		const opacity = barStyles?.opacity ?? .5;
+		const widthFactor = barStyles?.widthFactor ?? 1.5;
+		const fill = resolveFill(entry);
+		series.data.forEach((datum, i) => {
+			const bandPosition = Number(bandScale(bandAccessor(datum)));
+			const valuePosition = Number(valueScale(Number(valueAccessor(datum))));
+			if (!Number.isFinite(bandPosition) || !Number.isFinite(valuePosition)) {
+				if (process.env.NODE_ENV !== "production" && !Number.isFinite(bandPosition)) console.warn(`[Charts] ComparisonBars: datum key "${String(bandAccessor(datum))}" did not match any primary category. Shadow will not be rendered. Ensure comparison series data uses the same label/date keys as the primary series.`);
+				return;
+			}
+			const rect = computeComparisonRect({
+				horizontal,
+				bandPosition,
+				slotOffset,
+				slotThickness,
+				valuePosition,
+				baseline,
+				widthFactor
+			});
+			rects.push(/* @__PURE__ */ jsx("rect", {
+				x: rect.x,
+				y: rect.y,
+				width: rect.width,
+				height: rect.height,
+				fill,
+				opacity
+			}, `${index}-${i}`));
+		});
+	});
+	if (rects.length === 0) return null;
+	return /* @__PURE__ */ jsx("g", {
+		className: "bar-chart__comparison-bars",
+		pointerEvents: "none",
+		children: rects
+	});
+};
+//#endregion
 //#region src/charts/bar-chart/bar-chart.tsx
 const validateData$2 = (data) => {
 	if (!data?.length) return "No data available";
@@ -4471,13 +4681,14 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [height]);
 	const [selectedIndex, setSelectedIndex] = useState(void 0);
 	const [isNavigating, setIsNavigating] = useState(false);
+	const primarySeriesForNav = dataWithVisibleZeros.filter((s) => s.options?.type !== "comparison");
 	const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation({
 		selectedIndex,
 		setSelectedIndex,
 		isNavigating,
 		setIsNavigating,
 		chartRef,
-		totalPoints: Math.max(0, ...data.map((series) => series.data?.length || 0)) * data.length
+		totalPoints: Math.max(0, ...primarySeriesForNav.map((s) => s.data?.length || 0)) * primarySeriesForNav.length
 	});
 	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
 	const seriesWithVisibility = useMemo(() => {
@@ -4500,6 +4711,69 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	const allSeriesHidden = useMemo(() => {
 		return seriesWithVisibility.every(({ isVisible }) => !isVisible);
 	}, [seriesWithVisibility]);
+	const primaryEntries = useMemo(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
+	const primaryKeys = useMemo(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
+	const comparisonEntries = useMemo(() => {
+		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
+			label: series.label,
+			index
+		}]));
+		const entries = [];
+		seriesWithVisibility.forEach(({ series, index, isVisible }) => {
+			if (!isVisible || series.options?.type !== "comparison") return;
+			const primary = primaryByGroup.get(series.group) ?? (primaryEntries.length === 1 ? {
+				label: primaryEntries[0].series.label,
+				index: primaryEntries[0].index
+			} : void 0);
+			if (!primary || !primaryKeys.includes(primary.label)) return;
+			entries.push({
+				series,
+				index,
+				primaryKey: primary.label,
+				primaryIndex: primary.index
+			});
+		});
+		return entries;
+	}, [
+		seriesWithVisibility,
+		primaryEntries,
+		primaryKeys
+	]);
+	const comparisonWidthFactor = useMemo(() => {
+		if (comparisonEntries.length === 0) return void 0;
+		return getElementStyles({
+			data: comparisonEntries[0].series,
+			index: comparisonEntries[0].index
+		}).barStyles?.widthFactor ?? 1.5;
+	}, [comparisonEntries, getElementStyles]);
+	const groupPadding = useMemo(() => {
+		const basePadding = chartOptions.barGroup.padding;
+		if (!comparisonWidthFactor || comparisonWidthFactor <= 1) return basePadding;
+		const p = 1 - (1 - COMPARISON_INNER_GAP) / comparisonWidthFactor;
+		return Math.min(Math.max(p, basePadding), MAX_GROUP_PADDING);
+	}, [chartOptions.barGroup.padding, comparisonWidthFactor]);
+	const { xScale, yScale } = useMemo(() => {
+		if (comparisonEntries.length === 0) return {
+			xScale: chartOptions.xScale,
+			yScale: chartOptions.yScale
+		};
+		const tighten = (scale) => ({
+			...scale,
+			paddingInner: (scale.paddingInner ?? .1) * COMPARISON_TICK_GAP_FACTOR
+		});
+		return horizontal ? {
+			xScale: chartOptions.xScale,
+			yScale: tighten(chartOptions.yScale)
+		} : {
+			xScale: tighten(chartOptions.xScale),
+			yScale: chartOptions.yScale
+		};
+	}, [
+		comparisonEntries.length,
+		chartOptions.xScale,
+		chartOptions.yScale,
+		horizontal
+	]);
 	const getBarBackground = useCallback((index) => () => withPatterns ? `url(#${getPatternId(chartId, index)})` : getElementStyles({
 		data: dataSorted[index],
 		index
@@ -4509,26 +4783,70 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		dataSorted,
 		chartId
 	]);
+	const resolveComparisonFill = useCallback((entry) => withPatterns ? `url(#${getPatternId(chartId, entry.primaryIndex)})` : getElementStyles({
+		data: entry.series,
+		index: entry.index
+	}).color, [
+		withPatterns,
+		chartId,
+		getElementStyles
+	]);
 	const renderDefaultTooltip = useCallback(({ tooltipData }) => {
 		const nearestDatum = tooltipData?.nearestDatum?.datum;
 		if (!nearestDatum) return null;
+		const primaryKey = tooltipData?.nearestDatum?.key;
+		const categoryLabel = chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []);
+		const comparisonEntry = comparisonEntries.find((entry) => entry.primaryKey === primaryKey);
+		const comparisonDatum = comparisonEntry?.series.data.find((point) => {
+			const p = point;
+			return nearestDatum.label != null ? p.label === nearestDatum.label : !!nearestDatum.date && !!p.date && p.date.getTime() === nearestDatum.date.getTime();
+		});
+		if (comparisonEntry && comparisonDatum && comparisonDatum.value != null) return /* @__PURE__ */ jsxs("div", {
+			className: bar_chart_module_default["bar-chart__tooltip"],
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: bar_chart_module_default["bar-chart__tooltip-header"],
+					children: categoryLabel
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: bar_chart_module_default["bar-chart__tooltip-row"],
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: bar_chart_module_default["bar-chart__tooltip-label"],
+						children: [primaryKey, ":"]
+					}), /* @__PURE__ */ jsx("span", {
+						className: bar_chart_module_default["bar-chart__tooltip-value"],
+						children: formatNumber(nearestDatum.value)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: bar_chart_module_default["bar-chart__tooltip-row"],
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: bar_chart_module_default["bar-chart__tooltip-label"],
+						children: [comparisonEntry.series.label, ":"]
+					}), /* @__PURE__ */ jsx("span", {
+						className: bar_chart_module_default["bar-chart__tooltip-value"],
+						children: formatNumber(comparisonDatum.value)
+					})]
+				})
+			]
+		});
 		return /* @__PURE__ */ jsxs("div", {
 			className: bar_chart_module_default["bar-chart__tooltip"],
 			children: [/* @__PURE__ */ jsx("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-header"],
-				children: tooltipData?.nearestDatum?.key
+				children: primaryKey
 			}), /* @__PURE__ */ jsxs("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-row"],
 				children: [/* @__PURE__ */ jsxs("span", {
 					className: bar_chart_module_default["bar-chart__tooltip-label"],
-					children: [chartOptions.tooltip.labelFormatter(nearestDatum.label || (nearestDatum.date ? nearestDatum.date.getTime() : 0), 0, []), ":"]
+					children: [categoryLabel, ":"]
 				}), /* @__PURE__ */ jsx("span", {
 					className: bar_chart_module_default["bar-chart__tooltip-value"],
 					children: formatNumber(nearestDatum.value)
 				})]
 			})]
 		});
-	}, [chartOptions.tooltip]);
+	}, [chartOptions.tooltip, comparisonEntries]);
 	const renderPattern = useCallback((index, color) => {
 		const patternType = index % 4;
 		const id = getPatternId(chartId, index);
@@ -4565,8 +4883,10 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		}
 	}, [chartId]);
 	const createPatternBorderStyle = useCallback((index, color) => {
+		const patternId = getPatternId(chartId, index);
 		return `
-			.visx-bar[fill="url(#${getPatternId(chartId, index)})"] {
+			.visx-bar[fill="url(#${patternId})"],
+			.bar-chart__comparison-bars rect[fill="url(#${patternId})"] {
 				stroke: ${color};
 				stroke-width: 1;
 				}
@@ -4574,11 +4894,13 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [chartId]);
 	const createKeyboardHighlightStyle = useCallback(() => {
 		if (selectedIndex === void 0) return "";
-		const maxDataPoints = Math.max(...data.map((s) => s.data.length));
-		const dataPointIndex = Math.floor(selectedIndex / data.length);
-		const seriesIndex = selectedIndex % data.length;
-		if (dataPointIndex >= maxDataPoints || seriesIndex >= data.length) return "";
-		if (dataPointIndex >= data[seriesIndex].data.length) return "";
+		const primaryCount = primaryEntries.length;
+		const maxDataPoints = Math.max(...primaryEntries.map((e) => e.series.data.length));
+		const dataPointIndex = Math.floor(selectedIndex / primaryCount);
+		const seriesIndex = selectedIndex % primaryCount;
+		if (dataPointIndex >= maxDataPoints || seriesIndex >= primaryCount) return "";
+		const seriesData = primaryEntries[seriesIndex]?.series;
+		if (!seriesData || dataPointIndex >= seriesData.data.length) return "";
 		return `
 			.bar-chart[data-chart-id="bar-chart-${chartId}"] .visx-bar-group .visx-bar:nth-child(${seriesIndex * maxDataPoints + dataPointIndex + 1}) {
 				stroke: #005fcc;
@@ -4587,7 +4909,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 		`;
 	}, [
 		selectedIndex,
-		data,
+		primaryEntries,
 		chartId
 	]);
 	const error = validateData$2(dataSorted);
@@ -4660,8 +4982,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 								...defaultMargin,
 								...margin
 							},
-							xScale: chartOptions.xScale,
-							yScale: chartOptions.yScale,
+							xScale,
+							yScale,
 							horizontal,
 							pointerEventsDataKey: "nearest",
 							children: [
@@ -4685,18 +5007,25 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									height: chartHeight,
 									children: __("All series are hidden. Click legend items to show data.", "jetpack-charts")
 								}) : null,
+								/* @__PURE__ */ jsx(ComparisonBars, {
+									comparisonEntries,
+									primaryKeys,
+									groupPadding,
+									horizontal,
+									xAccessor: chartOptions.accessors.xAccessor,
+									yAccessor: chartOptions.accessors.yAccessor,
+									getElementStyles,
+									resolveFill: resolveComparisonFill
+								}),
 								/* @__PURE__ */ jsx(BarGroup, {
-									padding: chartOptions.barGroup.padding,
-									children: seriesWithVisibility.map(({ series: seriesData, index, isVisible }) => {
-										if (!isVisible) return null;
-										return /* @__PURE__ */ jsx(BarSeries, {
-											dataKey: seriesData?.label,
-											data: seriesData.data,
-											yAccessor: chartOptions.accessors.yAccessor,
-											xAccessor: chartOptions.accessors.xAccessor,
-											colorAccessor: getBarBackground(index)
-										}, seriesData?.label);
-									})
+									padding: groupPadding,
+									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ jsx(BarSeries, {
+										dataKey: seriesData?.label,
+										data: seriesData.data,
+										yAccessor: chartOptions.accessors.yAccessor,
+										xAccessor: chartOptions.accessors.xAccessor,
+										colorAccessor: getBarBackground(index)
+									}, seriesData?.label))
 								}),
 								/* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.x }),
 								/* @__PURE__ */ jsx(Axis, { ...chartOptions.axis.y }),
@@ -5309,9 +5638,7 @@ const DEFAULT_BACKGROUND_COLOR = "#ffffff";
 */
 const GeoChartInternal = ({ className, data, width, height, region = "world", resolution = "countries", renderPlaceholder }) => {
 	const { getElementStyles, theme: { geoChart: { featureFillColor }, backgroundColor } } = useGlobalChartsContext();
-	const loadingPlaceholder = /* @__PURE__ */ jsx(Stack, {
-		align: "center",
-		justify: "center",
+	const loadingPlaceholder = /* @__PURE__ */ jsx(Center, {
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
@@ -5369,9 +5696,7 @@ const GeoChartInternal = ({ className, data, width, height, region = "world", re
 		defaultFillColorHex,
 		sanitizedData.hasHtmlTooltips
 	]);
-	return /* @__PURE__ */ jsx(Stack, {
-		align: "center",
-		justify: "center",
+	return /* @__PURE__ */ jsx(Center, {
 		className: clsx("geo-chart", geo_chart_module_default.container, className),
 		style: {
 			width,
@@ -7763,13 +8088,15 @@ const defaultDeltaFormatter = (value) => {
 };
 /**
 * Build a bar's width. A hover-inset CSS variable (0 by default) is subtracted
-* so interactive rows can pull the bar's right edge back by a fixed pixel amount
-* on hover — instead of a percentage scale — keeping the bar↔value gap constant.
+* on hover, scaled by the bar's share so the pull-back is proportional to its
+* length: the full-length (100%) bar — the one that reaches the value — pulls
+* back the whole inset to keep its gap with the value, while shorter bars pull
+* back proportionally less, down to ~0 for a very short bar.
 *
 * @param share - The bar's share of the row width, as a percentage.
 * @return A CSS width value.
 */
-const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px))`;
+const getBarWidth = (share) => `calc(${share}% - var(--a8c--charts--leaderboard--bar--hover-inset, 0px) * ${share} / 100)`;
 const BarLabel = ({ label }) => /* @__PURE__ */ jsx(Fragment$1, { children: typeof label === "string" ? /* @__PURE__ */ jsx(Text$1, {
 	className: leaderboard_chart_module_default.label,
 	children: label
@@ -7978,6 +8305,7 @@ const LeaderboardChartInternal = ({ data, chartId: providedChartId, width: propW
 							type: "button",
 							className: leaderboard_chart_module_default.interactiveRow,
 							onClick: entry.onClick,
+							"aria-label": entry.ariaLabel,
 							children: [rowCells, /* @__PURE__ */ jsx(Icon, {
 								className: leaderboard_chart_module_default.chevron,
 								icon: chevronRight,
@@ -8040,7 +8368,6 @@ function RadialWipeAnimation({ id, radius, innerRadius = 0, durationMs = 1e3, wi
 //#region src/charts/pie-chart/pie-chart.module.scss
 var pie_chart_module_default = {
 	"pie-chart": "a8ccharts-gnszbG-pie-chart",
-	"pie-chart__centering": "a8ccharts-gnszbG-pie-chart__centering",
 	"pie-chart--responsive": "a8ccharts-gnszbG-pie-chart--responsive"
 };
 //#endregion
@@ -8205,11 +8532,8 @@ const PieChartInternal = ({ data, chartId: providedChartId, withTooltips = false
 				const innerRadius = thickness === 0 ? 0 : outerRadius * (1 - thickness);
 				const maxCornerRadius = (outerRadius - innerRadius) / 2;
 				const cornerRadius = cornerScale ? Math.min(cornerScale * outerRadius, maxCornerRadius) : 0;
-				return /* @__PURE__ */ jsx(Stack, {
+				return /* @__PURE__ */ jsx(Center, {
 					ref: containerRef,
-					align: "center",
-					justify: "center",
-					className: pie_chart_module_default["pie-chart__centering"],
 					children: /* @__PURE__ */ jsxs("svg", {
 						viewBox: `0 0 ${width} ${height}`,
 						preserveAspectRatio: "xMidYMid meet",
@@ -8322,7 +8646,6 @@ var pie_semi_circle_chart_module_default = {
 	"label": "a8ccharts-YtTOxW-label",
 	"note": "a8ccharts-YtTOxW-note",
 	"pie-semi-circle-chart": "a8ccharts-YtTOxW-pie-semi-circle-chart",
-	"pie-semi-circle-chart__centering": "a8ccharts-YtTOxW-pie-semi-circle-chart__centering",
 	"pie-semi-circle-chart--responsive": "a8ccharts-YtTOxW-pie-semi-circle-chart--responsive"
 };
 //#endregion
@@ -8502,11 +8825,8 @@ const PieSemiCircleChartInternal = ({ data, chartId: providedChartId, width: pro
 				const height = width / 2;
 				const radius = height;
 				const innerRadius = radius * (1 - thickness);
-				return /* @__PURE__ */ jsx(Stack, {
+				return /* @__PURE__ */ jsx(Center, {
 					ref: containerRef,
-					align: "center",
-					justify: "center",
-					className: pie_semi_circle_chart_module_default["pie-semi-circle-chart__centering"],
 					children: /* @__PURE__ */ jsxs("svg", {
 						width,
 						height,