@automattic/charts 4.2.0 → 4.3.0

package/src/charts/bar-chart/private/test/value-domain.test.ts

@@ -0,0 +1,100 @@
+import { getValueScaleDomain } from '../value-domain';
+import type { DataPointDate, SeriesData } from '../../../../types';
+
+const series = (
+	values: Array< number | null >,
+	options?: SeriesData[ 'options' ],
+	label = 'Series'
+): SeriesData => ( {
+	label,
+	data: values.map( ( value, index ) => ( {
+		date: new Date( 2026, index, 1 ),
+		value,
+	} ) ),
+	options,
+} );
+
+const allRendered = () => true;
+
+describe( 'getValueScaleDomain', () => {
+	test( 'anchors a varying series at zero', () => {
+		expect( getValueScaleDomain( [ series( [ 10, 20, 30 ] ) ], true, allRendered ) ).toEqual( [
+			0, 30,
+		] );
+	} );
+
+	test( 'spans zero for a varying negative series', () => {
+		expect( getValueScaleDomain( [ series( [ -10, -20 ] ) ], true, allRendered ) ).toEqual( [
+			-20, 0,
+		] );
+	} );
+
+	test( 'leaves a varying series to visx when zero is opted out', () => {
+		expect( getValueScaleDomain( [ series( [ 10, 20, 30 ] ) ], false, allRendered ) ).toBeNull();
+	} );
+
+	test( 'anchors a flat series at zero so its bars have height', () => {
+		expect( getValueScaleDomain( [ series( [ 500, 500, 500 ] ) ], false, allRendered ) ).toEqual( [
+			0, 500,
+		] );
+	} );
+
+	test( 'anchors a single-bucket window at zero', () => {
+		expect( getValueScaleDomain( [ series( [ 42 ] ) ], false, allRendered ) ).toEqual( [ 0, 42 ] );
+	} );
+
+	test( 'spans zero for a flat negative series', () => {
+		expect( getValueScaleDomain( [ series( [ -5, -5 ] ) ], false, allRendered ) ).toEqual( [
+			-5, 0,
+		] );
+	} );
+
+	test( 'falls back to a unit domain when every value is zero', () => {
+		expect( getValueScaleDomain( [ series( [ 0, 0 ] ) ], false, allRendered ) ).toEqual( [ 0, 1 ] );
+	} );
+
+	test( 'falls back to a unit domain when every value is zero in comparison mode', () => {
+		const data = [ series( [ 0, 0 ] ), series( [ 0, 0 ], { type: 'comparison' } ) ];
+		expect( getValueScaleDomain( data, true, allRendered ) ).toEqual( [ 0, 1 ] );
+	} );
+
+	test( 'falls back to a unit domain when no bucket has a reading', () => {
+		expect( getValueScaleDomain( [ series( [ null, null ] ) ], false, allRendered ) ).toEqual( [
+			0, 1,
+		] );
+	} );
+
+	test( 'ignores buckets with no reading when fitting a varying series', () => {
+		expect( getValueScaleDomain( [ series( [ null, 10, 20 ] ) ], false, allRendered ) ).toBeNull();
+	} );
+
+	test( 'keeps zero in the domain across every series in comparison mode', () => {
+		const data = [ series( [ 10, 20 ] ), series( [ 5, 40 ], { type: 'comparison' } ) ];
+		expect( getValueScaleDomain( data, true, allRendered ) ).toEqual( [ 0, 40 ] );
+	} );
+
+	test( 'anchors a flat series at zero when the varying series beside it is hidden', () => {
+		const data = [
+			series( [ 500, 500 ], undefined, 'Flat' ),
+			series( [ 10, 900 ], undefined, 'Varying' ),
+		];
+		const isSeriesRendered = ( s: SeriesData ) => s.label !== 'Varying';
+		expect( getValueScaleDomain( data, false, isSeriesRendered ) ).toEqual( [ 0, 500 ] );
+	} );
+
+	test( 'anchors the remaining varying series at zero when a sibling is hidden', () => {
+		const data = [ series( [ 10, 50 ], undefined, 'A' ), series( [ 15, 25 ], undefined, 'B' ) ];
+		const isSeriesRendered = ( s: SeriesData ) => s.label !== 'A';
+		expect( getValueScaleDomain( data, true, isSeriesRendered ) ).toEqual( [ 0, 25 ] );
+	} );
+
+	test( 'reads visualValue in preference to value', () => {
+		const data: SeriesData[] = [
+			{
+				label: 'Series',
+				data: [ { date: new Date( 2026, 0, 1 ), value: 0, visualValue: 2 } as DataPointDate ],
+			},
+		];
+		expect( getValueScaleDomain( data, false, allRendered ) ).toEqual( [ 0, 2 ] );
+	} );
+} );

package/src/charts/bar-chart/private/use-bar-chart-options.ts

@@ -7,7 +7,7 @@ import { getBucketResolution } from '../../../utils/bucket-info';
 import { createDateFormatter } from '../../../utils/date-formatting';
 import { getBandTickValues, getFormatter } from '../../private/time-axis';
 import { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';
-import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
+import { getBarValue, getValueScaleDomain } from './value-domain';
 import type {
 	DataPointDate,
 	BaseChartProps,
@@ -207,6 +207,7 @@ export function useBarChartOptions(
 		const linearScale = {
 			type: 'linear' as const,
 			nice: true,
+			// XYChart defaults `zero` to true, which would stretch a caller's domain to 0.
 			zero: false,
 		};
 
@@ -223,12 +224,6 @@ export function useBarChartOptions(
 
 		const bandDomain = timeTickFormatter ? getBandDomain( data, isSeriesRendered ) : null;
 
-		const valueAccessor = ( d: DataPointDate | EnhancedDataPoint ) => {
-			// Use visualValue for bar rendering if available (for zero values), otherwise use value
-			const enhancedPoint = d as EnhancedDataPoint;
-			return enhancedPoint?.visualValue !== undefined ? enhancedPoint.visualValue : d?.value;
-		};
-
 		return {
 			timeAxis: bandDomain &&
 				timeTickFormatter && {
@@ -240,7 +235,7 @@ export function useBarChartOptions(
 				yTickFormat: valueFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: bucketAccessor,
-				yAccessor: valueAccessor,
+				yAccessor: getBarValue,
 				gridVisibility: 'x',
 				xScale: bandScale,
 				yScale: linearScale,
@@ -249,7 +244,7 @@ export function useBarChartOptions(
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
 				tooltipLabelFormatter: tooltipDatumFormatter,
-				xAccessor: valueAccessor,
+				xAccessor: getBarValue,
 				yAccessor: bucketAccessor,
 				gridVisibility: 'y',
 				xScale: linearScale,
@@ -271,36 +266,14 @@ export function useBarChartOptions(
 			yScale: baseYScale,
 		} = defaultOptions[ orientationKey ];
 
-		// When comparison series are present, visx only sees primary BarSeries and computes
-		// a too-narrow domain. Compute an explicit domain spanning all series so comparison
-		// shadows aren't clipped. Skip when the user has already provided an explicit domain.
-		let valueScaleDomainOverride: { domain?: [ number, number ] } = {};
+		const valueScaleOptions = horizontal ? stableOptions.xScale : stableOptions.yScale;
 		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
-		if ( hasComparisonSeries ) {
-			const valueAxisIsY = ! horizontal;
-			const userDomain = valueAxisIsY ? stableOptions.yScale?.domain : stableOptions.xScale?.domain;
-			if ( ! userDomain ) {
-				const allValues: number[] = [];
-				data.forEach( series => {
-					series.data.forEach( d => {
-						const enhanced = d as { visualValue?: number };
-						const v =
-							enhanced.visualValue !== undefined ? enhanced.visualValue : ( d.value as number );
-						if ( typeof v === 'number' && Number.isFinite( v ) ) {
-							allValues.push( v );
-						}
-					} );
-				} );
-				if ( allValues.length > 0 ) {
-					// Keep zero in the domain so bar length stays proportional to value — a
-					// non-zero baseline would exaggerate differences between periods. Math.max
-					// keeps zero on the far side too, so charts with negative values still span 0.
-					valueScaleDomainOverride = {
-						domain: [ Math.min( 0, ...allValues ), Math.max( 0, ...allValues ) ],
-					};
-				}
-			}
-		}
+		// Comparison shadows share the primary bars' scale, so they force zero even when the caller opted out.
+		const includeZero = hasComparisonSeries || valueScaleOptions?.zero !== false;
+		const domain = valueScaleOptions?.domain
+			? null
+			: getValueScaleDomain( data, includeZero, isSeriesRendered );
+		const valueScaleDomainOverride: { domain?: [ number, number ] } = domain ? { domain } : {};
 
 		const xScale = {
 			...baseXScale,
@@ -367,5 +340,5 @@ export function useBarChartOptions(
 				labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter,
 			},
 		};
-	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data ] );
+	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data, isSeriesRendered ] );
 }

package/src/charts/bar-chart/private/value-domain.ts

@@ -0,0 +1,90 @@
+import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
+import type { DataPoint, DataPointDate, SeriesData } from '../../../types';
+
+/** Domain for a value axis that has nothing to scale, so its ticks still read 0 to 1. */
+const EMPTY_DOMAIN: [ number, number ] = [ 0, 1 ];
+
+/**
+ * The value a bar is drawn at, preferring `visualValue` so a zero still shows a sliver.
+ *
+ * A missing reading is NaN, not null: `ComparisonBars` coerces the value with `Number()`,
+ * which turns null into 0 and would draw a comparison shadow at the baseline.
+ *
+ * @param point - A data point handed to visx.
+ * @return The bar value, or NaN when the bucket has no reading.
+ */
+export const getBarValue = ( point: DataPoint | DataPointDate | EnhancedDataPoint ): number => {
+	const enhanced = point as EnhancedDataPoint;
+	const value = enhanced?.visualValue !== undefined ? enhanced.visualValue : point?.value;
+	return value ?? NaN;
+};
+
+/**
+ * Whether visx renders a bar for a point.
+ *
+ * @param point - A data point handed to visx.
+ * @return True when the point has a finite bar value.
+ */
+export const isBarRendered = ( point: DataPoint | DataPointDate | EnhancedDataPoint ): boolean =>
+	Number.isFinite( getBarValue( point ) );
+
+/**
+ * How many bars visx renders for a list of points.
+ *
+ * @param points - Data points handed to visx.
+ * @return The number of points that get a bar.
+ */
+export const countRenderedBars = (
+	points: ReadonlyArray< DataPoint | DataPointDate | EnhancedDataPoint >
+): number => points.filter( isBarRendered ).length;
+
+/**
+ * An explicit domain for the value scale, or null to let visx fit one to the data.
+ *
+ * Zero goes into the domain here rather than through the scale's `zero` flag: visx applies
+ * `nice` before `zero`, which would leave the axis topping out at a raw maximum.
+ *
+ * @param data             - Every series handed to the chart.
+ * @param includeZero      - Whether the domain must span zero.
+ * @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+ * @return Value domain, or null when visx should fit its own.
+ */
+export const getValueScaleDomain = (
+	data: SeriesData[],
+	includeZero: boolean,
+	isSeriesRendered: ( series: SeriesData ) => boolean
+): [ number, number ] | null => {
+	let min = Infinity;
+	let max = -Infinity;
+
+	// Only hidden series are skipped. Comparison series count too: visx sees just the
+	// primary BarSeries and would fit a domain too narrow for the comparison shadows.
+	for ( const series of data ) {
+		if ( ! isSeriesRendered( series ) ) {
+			continue;
+		}
+		for ( const point of series.data ) {
+			const value = getBarValue( point );
+			if ( ! Number.isFinite( value ) ) {
+				continue;
+			}
+			min = Math.min( min, value );
+			max = Math.max( max, value );
+		}
+	}
+
+	if ( min === Infinity ) {
+		return [ ...EMPTY_DOMAIN ];
+	}
+
+	// A flat series fitted by visx collapses to zero height, so it is anchored at zero regardless.
+	if ( min === max ) {
+		return min === 0 ? [ ...EMPTY_DOMAIN ] : [ Math.min( 0, min ), Math.max( 0, max ) ];
+	}
+
+	if ( includeZero ) {
+		return [ Math.min( 0, min ), Math.max( 0, max ) ];
+	}
+
+	return null;
+};