@automattic/charts 4.1.0 → 4.2.0

package/src/charts/bar-chart/private/test/band-highlight.test.tsx

@@ -0,0 +1,109 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { scaleBand } from '@visx/scale';
+import { DataContext, TooltipContext } from '@visx/xychart';
+import { useState } from 'react';
+import { GlobalChartsProvider } from '../../../../providers';
+import { CATALOG_POINTERS } from '../../../../providers/chart-context/private/catalog-pointers';
+import { BarChartUnresponsive } from '../../bar-chart';
+import { BandHighlight } from '../band-highlight';
+import type { BandHighlightSelection } from '../../bar-chart';
+
+const xScale = scaleBand( { domain: [ 'Jan', 'Feb' ], range: [ 10, 210 ] } );
+const dataContext = {
+	xScale,
+	dataRegistry: { get: () => ( { xAccessor: datum => datum.label } ) },
+	margin: { top: 20, left: 10 },
+	innerWidth: 200,
+	innerHeight: 150,
+};
+
+const Fixture = ( { label = 'Jan', onChange } ) => {
+	return (
+		<DataContext.Provider value={ dataContext as never }>
+			<TooltipContext.Provider
+				value={
+					{
+						tooltipOpen: true,
+						tooltipData: { nearestDatum: { key: 'scores', datum: { label, value: 50 } } },
+					} as never
+				}
+			>
+				<svg>
+					<BandHighlight visible horizontal={ false } onChange={ onChange } />
+				</svg>
+			</TooltipContext.Provider>
+		</DataContext.Provider>
+	);
+};
+
+describe( 'BandHighlight', () => {
+	test( 'uses the catalog surface fill', () => {
+		render( <Fixture onChange={ undefined } /> );
+		expect( screen.getByTestId( 'bar-chart-band-highlight' ) ).toHaveAttribute(
+			'fill',
+			CATALOG_POINTERS.surfaceSecondary
+		);
+	} );
+
+	test( 'settles inline derived-state callbacks and notifies the latest callback on selection changes', () => {
+		const notify = jest.fn();
+		const DerivedState = ( { label } ) => {
+			const [ band, setBand ] = useState< { x: number } | null >( null );
+			return (
+				<>
+					<output>{ band?.x }</output>
+					<Fixture
+						label={ label }
+						// eslint-disable-next-line react/jsx-no-bind -- An inline callback reproduces parent state updates changing its identity.
+						onChange={ ( selection: BandHighlightSelection | null ) => {
+							notify( label );
+							if ( notify.mock.calls.length > 4 ) {
+								throw new Error( 'Highlight notifications did not settle' );
+							}
+							setBand( selection && { x: selection.x } );
+						} }
+					/>
+				</>
+			);
+		};
+		const { rerender } = render( <DerivedState label="Jan" /> );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '10' );
+		expect( notify ).toHaveBeenCalledTimes( 1 );
+		rerender( <DerivedState label="Feb" /> );
+		expect( screen.getByRole( 'status' ) ).toHaveTextContent( '110' );
+		expect( notify ).toHaveBeenCalledTimes( 2 );
+		expect( notify ).toHaveBeenLastCalledWith( 'Feb' );
+	} );
+
+	test.each( [ { withTooltips: false }, { data: [] } ] )(
+		'clears the selected band when the highlight unmounts with %j',
+		async props => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			const chartProps = {
+				width: 500,
+				height: 300,
+				withTooltips: true,
+				onBandHighlightChange: onChange,
+				data: [ { label: 'Scores', data: [ { label: 'Jan', value: 50 } ] } ],
+			};
+			const { rerender } = render(
+				<GlobalChartsProvider>
+					<BarChartUnresponsive { ...chartProps } />
+				</GlobalChartsProvider>
+			);
+			await user.tab();
+			await user.keyboard( '{ArrowRight}' );
+			expect( onChange ).toHaveBeenLastCalledWith(
+				expect.objectContaining( { datum: expect.objectContaining( { label: 'Jan' } ) } )
+			);
+			rerender(
+				<GlobalChartsProvider>
+					<BarChartUnresponsive { ...chartProps } { ...props } />
+				</GlobalChartsProvider>
+			);
+			expect( onChange ).toHaveBeenLastCalledWith( null );
+		}
+	);
+} );

package/src/charts/bar-chart/private/test/band-tooltip.test.ts

@@ -0,0 +1,26 @@
+import { scaleBand } from '@visx/scale';
+import { nearestBandIndex } from '../band-tooltip';
+
+describe( 'nearestBandIndex', () => {
+	test.each( [
+		[ 25, 688 ],
+		[ 688, 25 ],
+	] )( 'matches every painted center with outer padding in range %s to %s', ( start, end ) => {
+		const data = Array.from( { length: 30 }, ( _, index ) => String( index ) );
+		const scale = scaleBand( {
+			domain: data,
+			range: [ start, end ],
+			paddingInner: 0.024,
+			paddingOuter: 0.7,
+		} );
+		data.forEach( ( datum, index ) => {
+			expect(
+				nearestBandIndex( data, value => value, scale, scale( datum )! + scale.bandwidth() / 2 )
+			).toBe( index );
+		} );
+	} );
+	test( 'ignores data outside the band domain', () => {
+		const scale = scaleBand( { domain: [ 'recorded' ], range: [ 0, 100 ] } );
+		expect( nearestBandIndex( [ 'missing' ], value => value, scale, 50 ) ).toBe( -1 );
+	} );
+} );

package/src/charts/bar-chart/private/truncated-tick-component.tsx

@@ -11,7 +11,7 @@ import type { FC, CSSProperties } from 'react';
  * @return The bandwidth of the scale
  */
 const getScaleBandwidth = < Scale extends AxisScale >( scale?: Scale ) => {
-	return scale && 'bandwidth' in scale ? scale.bandwidth() ?? 0 : 0;
+	return scale && 'bandwidth' in scale ? ( scale.bandwidth() ?? 0 ) : 0;
 };
 interface TruncatedTickComponentProps extends TickRendererProps {
 	/** Which axis this tick belongs to */

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

@@ -330,7 +330,7 @@ export function useBarChartOptions(
 						timeAxis.domain,
 						timeAxis.tickFormatter,
 						dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS
-				  )
+					)
 				: null;
 		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 

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