@automattic/charts 1.8.0 → 1.8.1

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.8.1] - 2026-06-26
+### Fixed
+- Fix Bar Chart comparison mode — pair the keyboard tooltip with the focused bar, keep the value axis zero-based, and make the tooltip label/value separator translatable. [#49959]
+
 ## [1.8.0] - 2026-06-24
 ### Added
 - Add comparison mode to the Bar Chart — a translucent shadow bar (standard slot width, 50% opacity) rendered behind each primary bar, paired by group. Primary bars are narrowed to 1/widthFactor of the slot (default widthFactor 1.5 → ~67% width, centered), with widthFactor as the single control. [#49676]
@@ -885,6 +889,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed lints following ESLint rule changes for TS [#40584]
 - Fixing a bug in Chart storybook data. [#40640]
 
+[1.8.1]: https://github.com/Automattic/charts/compare/v1.8.0...v1.8.1
 [1.8.0]: https://github.com/Automattic/charts/compare/v1.7.0...v1.8.0
 [1.7.0]: https://github.com/Automattic/charts/compare/v1.6.0...v1.7.0
 [1.6.0]: https://github.com/Automattic/charts/compare/v1.5.3...v1.6.0

package/dist/index.cjs

@@ -4474,7 +4474,7 @@ function useBarChartOptions(data, horizontal, options = {}) {
 						if (typeof v === "number" && Number.isFinite(v)) allValues.push(v);
 					});
 				});
-				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(...allValues), Math.max(...allValues)] };
+				if (allValues.length > 0) valueScaleDomainOverride = { domain: [Math.min(0, ...allValues), Math.max(0, ...allValues)] };
 			}
 		}
 		const xScale = {
@@ -4653,6 +4653,7 @@ const ComparisonBars = ({ comparisonEntries, primaryKeys, groupPadding, horizont
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
 		className: "bar-chart__comparison-bars",
 		pointerEvents: "none",
+		"aria-hidden": "true",
 		children: rects
 	});
 };
@@ -4664,6 +4665,10 @@ const validateData$2 = (data) => {
 	return null;
 };
 const getPatternId = (chartId, index) => `bar-pattern-${chartId}-${index}`;
+const renderTooltipRow = (label, value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	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 legendInteractive = legend.interactive ?? false;
 	const horizontal = orientation === "horizontal";
@@ -4717,6 +4722,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 	}, [seriesWithVisibility]);
 	const primaryEntries = (0, react$1.useMemo)(() => seriesWithVisibility.filter(({ isVisible, series }) => isVisible && series.options?.type !== "comparison"), [seriesWithVisibility]);
 	const primaryKeys = (0, react$1.useMemo)(() => primaryEntries.map(({ series }) => series.label), [primaryEntries]);
+	const primarySeries = (0, react$1.useMemo)(() => primaryEntries.map(({ series }) => series), [primaryEntries]);
 	const comparisonEntries = (0, react$1.useMemo)(() => {
 		const primaryByGroup = new Map(primaryEntries.map(({ series, index }) => [series.group, {
 			label: series.label,
@@ -4812,26 +4818,8 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 					className: bar_chart_module_default["bar-chart__tooltip-header"],
 					children: categoryLabel
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: bar_chart_module_default["bar-chart__tooltip-row"],
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-label"],
-						children: [primaryKey, ":"]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-value"],
-						children: (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)
-					})]
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: bar_chart_module_default["bar-chart__tooltip-row"],
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-label"],
-						children: [comparisonEntry.series.label, ":"]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: bar_chart_module_default["bar-chart__tooltip-value"],
-						children: (0, _automattic_number_formatters.formatNumber)(comparisonDatum.value)
-					})]
-				})
+				renderTooltipRow(primaryKey, (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)),
+				renderTooltipRow(comparisonEntry.series.label, (0, _automattic_number_formatters.formatNumber)(comparisonDatum.value))
 			]
 		});
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4839,16 +4827,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: bar_chart_module_default["bar-chart__tooltip-header"],
 				children: primaryKey
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: bar_chart_module_default["bar-chart__tooltip-row"],
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: bar_chart_module_default["bar-chart__tooltip-label"],
-					children: [categoryLabel, ":"]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: bar_chart_module_default["bar-chart__tooltip-value"],
-					children: (0, _automattic_number_formatters.formatNumber)(nearestDatum.value)
-				})]
-			})]
+			}), renderTooltipRow(categoryLabel, (0, _automattic_number_formatters.formatNumber)(nearestDatum.value))]
 		});
 	}, [chartOptions.tooltip, comparisonEntries]);
 	const renderPattern = (0, react$1.useCallback)((index, color) => {
@@ -5041,7 +5020,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									selectedIndex,
 									tooltipRef,
 									keyboardFocusedClassName: bar_chart_module_default["bar-chart__tooltip--keyboard-focused"],
-									series: data,
+									series: primarySeries,
 									mode: "individual"
 								})
 							]