@automattic/charts 4.1.1 → 4.3.0

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;
+};

package/src/charts/bar-chart/test/bar-chart-pointer-events.test.tsx

@@ -1,25 +1,13 @@
 import { render } from '@testing-library/react';
 import { GlobalChartsProvider } from '../../../providers';
 import BarChart from '../bar-chart';
-import type { ReactNode } from 'react';
-
-// jsdom gives every element a zero-sized box, so visx can never resolve a
-// pointer to a datum here. Standing `XYChart` in for a prop recorder keeps this
-// test on the part jsdom can answer: that the handlers reach the chart at all.
-// Whether a bar then reports the datum under the pointer is a browser question.
-const mockXYChart = jest.fn();
-jest.mock( '@visx/xychart', () => {
-	const actual = jest.requireActual( '@visx/xychart' );
-
-	return {
-		__esModule: true,
-		...actual,
-		XYChart: ( props: { children?: ReactNode } ) => {
-			mockXYChart( props );
-			return <svg />;
-		},
-	};
-} );
+const mockBandTooltip = jest.fn();
+jest.mock( '../private/band-tooltip', () => ( {
+	BandTooltip: props => {
+		mockBandTooltip( props );
+		return null;
+	},
+} ) );
 
 const mockRefCallback = jest.fn();
 jest.mock( '../../../hooks/use-element-size', () => ( {
@@ -38,7 +26,7 @@ const DATA = [
 ];
 
 /**
- * Render the chart with the recorder standing in for `XYChart`.
+ * Render the chart with the recorder standing in for band pointer handling.
  *
  * @param props - Props layered onto the defaults.
  * @return The render result.
@@ -52,15 +40,15 @@ function renderBarChart( props = {} ) {
 }
 
 describe( 'BarChart pointer events', () => {
-	beforeEach( () => mockXYChart.mockClear() );
+	beforeEach( () => mockBandTooltip.mockClear() );
 
-	test( 'hands the pointer handlers to the chart, so a bar can be clicked', () => {
+	test( 'routes pointer handlers through band correction without requiring tooltips', () => {
 		const onPointerDown = jest.fn();
 		const onPointerUp = jest.fn();
 
 		renderBarChart( { onPointerDown, onPointerUp } );
 
-		const props = mockXYChart.mock.calls.at( -1 )[ 0 ];
+		const props = mockBandTooltip.mock.calls.at( -1 )[ 0 ];
 		expect( props.onPointerDown ).toBe( onPointerDown );
 		expect( props.onPointerUp ).toBe( onPointerUp );
 	} );