@automattic/charts 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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).
 
+## [4.4.0] - 2026-09-23
+### Added
+- Bar chart: Add per-datum bar classes and tooltip box style overrides. [#52547]
+
+### Fixed
+- Bar chart: Fix the comparison shadow baseline on horizontal charts whose domain excludes zero. [#52547]
+
 ## [4.3.0] - 2026-09-23
 ### Added
 - Add required key and index fields to BandHighlightSelection for identifying the selected series and rendered data point. [#52544]
@@ -1108,6 +1115,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]
 
+[4.4.0]: https://github.com/Automattic/charts/compare/v4.3.0...v4.4.0
 [4.3.0]: https://github.com/Automattic/charts/compare/v4.2.0...v4.3.0
 [4.2.0]: https://github.com/Automattic/charts/compare/v4.1.1...v4.2.0
 [4.1.1]: https://github.com/Automattic/charts/compare/v4.1.0...v4.1.1

package/dist/index.cjs

@@ -5661,9 +5661,8 @@ const createGroupScale = (keys, bandwidth, padding) => (0, _visx_scale.scaleBand
 //#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.
+* Mirrors visx's getScaleBaseline so comparison shadows and primary bars
+* share the same baseline, including out-of-domain zero values.
 *
 * @param {ValueScale} scale - The continuous value scale.
 * @return {number} The baseline output position in pixels.
@@ -5674,7 +5673,7 @@ function getValueScaleBaseline(scale) {
 	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;
+	return Number.isFinite(maybeZero) ? Math.max(maybeZero, minOutput) : minOutput;
 }
 /**
 * Compute the rect for a comparison "shadow" bar, centered on the paired
@@ -5710,6 +5709,51 @@ function computeComparisonRect(params) {
 		height: valueLength
 	};
 }
+//#endregion
+//#region src/charts/bar-chart/private/classified-bar-series.tsx
+const ClassifiedBarSeries = ({ barClassName, primaryKeys, groupPadding, ...props }) => {
+	const { xScale, yScale, horizontal } = (0, react.useContext)(_visx_xychart.DataContext);
+	const bandScale = horizontal ? yScale : xScale;
+	const valueScale = horizontal ? xScale : yScale;
+	const groupScale = (0, react.useMemo)(() => createGroupScale(primaryKeys, bandScale?.bandwidth?.() ?? 0, groupPadding), [
+		primaryKeys,
+		bandScale,
+		groupPadding
+	]);
+	const renderGlyph = (0, react.useCallback)(({ datum, x, y, color, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp }) => {
+		if (!bandScale?.bandwidth || !valueScale) return null;
+		const baseline = getValueScaleBaseline(valueScale);
+		const position = Number(bandScale((horizontal ? props.yAccessor : props.xAccessor)(datum))) + (groupScale(props.dataKey) ?? 0);
+		const value = horizontal ? x : y;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+			className: (0, clsx.default)("visx-bar", barClassName(datum)),
+			tabIndex: onFocus || onBlur ? 0 : void 0,
+			onBlur,
+			onFocus,
+			onPointerMove,
+			onPointerOut,
+			onPointerUp,
+			x: horizontal ? baseline + Math.min(0, value - baseline) : position,
+			y: horizontal ? position : baseline + Math.min(0, value - baseline),
+			width: horizontal ? Math.abs(value - baseline) : groupScale.bandwidth(),
+			height: horizontal ? groupScale.bandwidth() : Math.abs(value - baseline),
+			fill: color
+		});
+	}, [
+		bandScale,
+		valueScale,
+		horizontal,
+		groupScale,
+		props.dataKey,
+		props.xAccessor,
+		props.yAccessor,
+		barClassName
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.GlyphSeries, {
+		...props,
+		renderGlyph
+	});
+};
 /**
 * Upper clamp on the computed group padding, so bars can never collapse to zero width
 * even at very large `widthFactor` values.
@@ -5953,7 +5997,7 @@ 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, tooltipPlacement, tooltipAnchorTop, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
+const BarChartInternal = ({ data, chartId: providedChartId, width, height, className, margin, withTooltips = false, showLegend = false, legend = {}, gridVisibility: gridVisibilityProp, renderTooltip, tooltipPlacement, tooltipAnchorTop, tooltipStyle, barClassName, options = {}, orientation = "vertical", withPatterns = false, showZeroValues = false, withBandHighlight = false, onBandHighlightChange, defaultHiddenSeries, animation, children, gap = "md", onPointerDown, onPointerUp, onDatumActivate }) => {
 	if (!withTooltips && (withBandHighlight || onBandHighlightChange)) warnOnce("bar-chart-band-highlight-without-tooltips", "BarChart: withBandHighlight and onBandHighlightChange require withTooltips.");
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
@@ -6323,7 +6367,19 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 									getElementStyles,
 									resolveFill: resolveComparisonFill
 								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarGroup, {
+								barClassName ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+									className: "visx-bar-group",
+									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClassifiedBarSeries, {
+										dataKey: seriesData.label,
+										data: seriesData.data,
+										xAccessor: chartOptions.accessors.xAccessor,
+										yAccessor: chartOptions.accessors.yAccessor,
+										colorAccessor: getBarBackground(index),
+										barClassName,
+										primaryKeys,
+										groupPadding
+									}, seriesData.label))
+								}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarGroup, {
 									padding: groupPadding,
 									children: primaryEntries.map(({ series: seriesData, index }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_visx_xychart.BarSeries, {
 										dataKey: seriesData?.label,
@@ -6353,6 +6409,7 @@ const BarChartInternal = ({ data, chartId: providedChartId, width, height, class
 								withTooltips && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccessibleTooltip, {
 									tooltipPlacement,
 									tooltipAnchorTop,
+									style: tooltipStyle,
 									detectBounds: true,
 									snapTooltipToDatumX: true,
 									snapTooltipToDatumY: true,