@automattic/charts 4.14.0 → 4.15.0

package/src/charts/bar-chart/use-bar-legend-items.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useChartLegendItems } from '../../components/legend/hooks/use-chart-legend-items';
+import { getDrawnSeries } from './private/stack-layout';
 import { useBarColors } from './use-bar-colors';
 import type { ChartLegendOptions } from '../../components/legend/hooks/use-chart-legend-items';
 import type { BaseLegendItem } from '../../components/legend/types';
@@ -58,17 +59,18 @@ function forBarLayout(
 /**
  * Builds legend items that match `BarChart`'s bars in a layout, for a custom legend or a chart's own.
  *
- * @param data        - The series the chart draws.
+ * @param allData     - The chart's series; those the layout does not draw get no item.
  * @param options     - The legend options, and the layout the bars are drawn in.
  * @param legendShape - The shape of the legend swatches.
  * @return The legend items.
  */
 export function useBarLegendItems(
-	data: SeriesData[],
+	allData: SeriesData[],
 	options: BarLegendOptions = {},
 	legendShape?: LegendShape< SeriesData[], number >
 ): BaseLegendItem[] {
 	const { layout } = options;
+	const data = useMemo( () => getDrawnSeries( allData, layout ), [ allData, layout ] );
 	const getBarColors = useBarColors();
 	const seriesColors = useMemo(
 		() => ( layout ? getBarColors( data, { layout } ) : undefined ),

package/src/charts/bar-list-chart/bar-list-chart.tsx

@@ -20,6 +20,8 @@ export interface BarListChartProps extends Exclude<
 	BarChartProps,
 	'orientation' | 'size' | 'gridVisibility'
 > {
+	/** Bar lists are always horizontal, and horizontal bars ignore `compactWhenShort`. */
+	compactWhenShort?: never;
 	options?: {
 		/**
 		 * Scale for the y axis. Exclude the type property.

package/src/charts/line-chart/line-chart.tsx

@@ -41,9 +41,15 @@ import { ChartLayout } from '../private/chart-layout';
 import { DefaultGlyph } from '../private/default-glyph';
 import { formatReading, isInvalidReading, isReading } from '../private/readings';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
+import {
+	getTickDecimals,
+	getTickDecimalsDomain,
+	hasOnlyWholeNumbers,
+	TickDecimals,
+} from '../private/tick-decimals';
 import { getCurveType } from '../private/time-axis';
 import { buildTimeAxisOptions } from '../private/time-axis-options';
-import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
+import { useCompactWhenShort } from '../private/use-compact-when-short';
 import { withResponsive } from '../private/with-responsive';
 import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
@@ -267,6 +273,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			children,
 			gridVisibility,
 			gap = 'md',
+			compactWhenShort = false,
 		},
 		ref
 	) => {
@@ -301,6 +308,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 
 		// Process children for composition API (Legend, etc.)
 		const { legendChildren, nonLegendChildren } = useChartChildren( children, 'LineChart' );
+		const { isCompact, compactMargin } = useCompactWhenShort( compactWhenShort, height );
 		const [ measuredChartHeight, setMeasuredChartHeight ] = useState< number | undefined >();
 
 		// Callback for ChartLayout to notify us when the measured content height changes.
@@ -438,31 +446,47 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			() => hasOnlyWholeNumbers( visibleSeries ),
 			[ visibleSeries ]
 		);
+		const isLogScale = options?.yScale?.type === 'log';
+		// A log axis has no decimal steps to hold ticks to.
+		const callerTickDecimals = isLogScale ? undefined : options?.axis?.y?.tickDecimals;
+		const yTickDecimals = getTickDecimals( hasWholeNumberValues, callerTickDecimals );
 
 		const chartOptions = useMemo( () => {
-			const fallbackYDomain = getFallbackYDomain(
-				visibleReadingExtent,
-				options?.yScale?.type === 'log'
-			);
+			const fallbackYDomain = getFallbackYDomain( visibleReadingExtent, isLogScale );
+			const { tickDecimals, ...yAxisOptions } = options?.axis?.y ?? {};
+			const tickDecimalsDomain =
+				isLogScale ||
+				tickDecimals === undefined ||
+				options?.yScale?.domain ||
+				yAxisOptions.tickValues
+					? undefined
+					: getTickDecimalsDomain(
+							yDomain ?? fallbackYDomain ?? visibleReadingExtent,
+							yTickDecimals
+						);
 
 			return {
 				axis: {
-					x: buildTimeAxisOptions( {
-						dataSorted,
-						width,
-						axisOptions: options?.axis?.x,
-						scaleDomain: options?.xScale?.domain,
-						zoomDomain: zoom.domain,
-						formatting,
-						// A hidden line is unmounted, so visx scales to the rest.
-						isSeriesRendered: series => isSeriesVisible( series.label ),
-					} ),
+					x: {
+						...buildTimeAxisOptions( {
+							dataSorted,
+							width,
+							axisOptions: options?.axis?.x,
+							scaleDomain: options?.xScale?.domain,
+							zoomDomain: zoom.domain,
+							formatting,
+							// A hidden line is unmounted, so visx scales to the rest.
+							isSeriesRendered: series => isSeriesVisible( series.label ),
+						} ),
+						...( isCompact && { display: false } ),
+					},
 					y: {
 						orientation: 'left' as const,
 						numTicks: 4,
 						tickFormat: formatNumberCompact as TickFormatter< number >,
 						display: true,
-						...options?.axis?.y,
+						...yAxisOptions,
+						...( isCompact && { display: false } ),
 					},
 				},
 				xScale: {
@@ -476,6 +500,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 					zero: false,
 					...( fallbackYDomain ? { domain: fallbackYDomain } : {} ),
 					...( yDomain ? { domain: yDomain } : {} ),
+					...( tickDecimalsDomain ? { domain: tickDecimalsDomain } : {} ),
 					...options?.yScale,
 				},
 			};
@@ -486,8 +511,11 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			zoom.domain,
 			yDomain,
 			visibleReadingExtent,
+			isLogScale,
+			yTickDecimals,
 			formatting,
 			isSeriesVisible,
+			isCompact,
 		] );
 
 		// Classified from the rendered series, like the axis above: a hidden
@@ -588,7 +616,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 			return <div className={ clsx( 'line-chart', styles[ 'line-chart' ] ) }>{ error }</div>;
 		}
 
-		const legendElement = showLegend && (
+		const legendElement = showLegend && ! isCompact && (
 			<Legend
 				orientation={ legend.orientation ?? 'horizontal' }
 				alignment={ legend.alignment ?? 'center' }
@@ -617,7 +645,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 				<ChartLayout
 					legendPosition={ legendPosition }
 					legendElement={ legendElement }
-					legendChildren={ legendChildren }
+					legendChildren={ isCompact ? [] : legendChildren }
 					gap={ gap }
 					className={ clsx(
 						'line-chart',
@@ -655,6 +683,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											height={ chartHeight }
 											margin={ {
 												...defaultMargin,
+												...compactMargin,
 												...margin,
 											} }
 											// xScale and yScale could be set in Axis as well, but they are `scale` props there.
@@ -666,18 +695,18 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 											{ /* With every series hidden there is no data to scale against, so the grid and
 											     axes are dropped while the empty state stands in — otherwise they render
 											     squished at the top. */ }
-											<WholeNumberTicks
+											<TickDecimals
 												axis="y"
 												numTicks={ chartOptions.axis.y.numTicks }
-												enabled={
-													hasWholeNumberValues &&
-													! chartOptions.axis.y.tickValues &&
-													! options?.yScale?.domain
+												decimals={
+													! chartOptions.axis.y.tickValues && ! options?.yScale?.domain
+														? yTickDecimals
+														: undefined
 												}
 											>
 												{ tickValues => (
 													<>
-														{ ! allSeriesHidden && gridVisibility !== 'none' && (
+														{ ! allSeriesHidden && gridVisibility !== 'none' && ! isCompact && (
 															<Grid
 																columns={ false }
 																numTicks={ chartOptions.axis.y.numTicks }
@@ -695,7 +724,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 														) }
 													</>
 												) }
-											</WholeNumberTicks>
+											</TickDecimals>
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState
@@ -704,7 +733,7 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 													width={ width }
 													height={ chartHeight }
 												>
-													{ getAllHiddenMessage( legendInteractive, 'series' ) }
+													{ getAllHiddenMessage( legendInteractive && ! isCompact, 'series' ) }
 												</SvgEmptyState>
 											) : null }
 

package/src/charts/line-chart/test/line-chart.test.tsx

@@ -313,6 +313,92 @@ describe( 'LineChart', () => {
 			expect( ticks.sort() ).toEqual( [ '0', '1' ] );
 		} );
 
+		test.each( [
+			[ 'small amounts', 0, [ 0.4, 1.2, 2.1, 2.6 ], [ '0', '1', '2' ] ],
+			[ 'amounts under one step', 0, [ 0.31, 0.55, 0.73 ], [ '0', '1' ] ],
+			[ 'cents', 2, [ 0.4, 1.2, 1.6 ], [ '0.00', '0.50', '1.00', '1.50' ] ],
+		] )( 'holds ticks to tickDecimals for %s', ( _, tickDecimals, values, expected ) => {
+			renderWithTheme( {
+				data: [
+					{
+						label: 'Series A',
+						data: values.map( ( value, i ) => ( { date: new Date( 2024, i + 2, 1 ), value } ) ),
+					},
+				],
+				options: {
+					yScale: { zero: true },
+					axis: {
+						y: { tickDecimals, tickFormat: ( value: number ) => value.toFixed( tickDecimals ) },
+					},
+				},
+			} );
+
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( expected );
+		} );
+
+		test( "leaves a caller's tickValues axis unwidened by tickDecimals", () => {
+			const linePath = ( y: { tickValues: number[]; tickDecimals?: number } ) => {
+				const { unmount } = renderWithTheme( {
+					data: [
+						{
+							label: 'Series A',
+							data: [ 0.31, 0.55, 0.73 ].map( ( value, i ) => ( {
+								date: new Date( 2024, i + 2, 1 ),
+								value,
+							} ) ),
+						},
+					],
+					options: { axis: { y } },
+				} );
+				const chart = screen.getByRole( 'application', { name: /line chart/i } );
+				// eslint-disable-next-line testing-library/no-node-access -- visx's stroke is a <path class="visx-line">.
+				const d = chart.querySelector( 'path.visx-line' )?.getAttribute( 'd' );
+				unmount();
+				return d;
+			};
+
+			expect( linePath( { tickValues: [ 0.4, 0.6 ], tickDecimals: 0 } ) ).toBe(
+				linePath( { tickValues: [ 0.4, 0.6 ] } )
+			);
+		} );
+
+		test( 'widens with the decimals it ticks at when a hidden series keeps its place in the domain', () => {
+			renderWithTheme( {
+				rescaleYOnVisibilityChange: false,
+				defaultHiddenSeries: [ 'Series B' ],
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 0, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+					{
+						label: 'Series B',
+						data: [ 0.001, 0.003, 0.004 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+				options: {
+					yScale: { zero: true },
+					axis: { y: { tickDecimals: 2, tickFormat: ( value: number ) => value.toFixed( 2 ) } },
+				},
+			} );
+
+			const chart = screen.getByRole( 'application', { name: /line chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( [ '0.00', '1.00' ] );
+		} );
+
 		test( 'ignores a hidden fractional series when checking for whole numbers', () => {
 			renderWithTheme( {
 				defaultHiddenSeries: [ 'Series B' ],

package/src/charts/line-chart/types.ts

@@ -5,6 +5,7 @@ import type {
 	SeriesData,
 	SeriesChartLegendConfig,
 	SeriesVisibilityProps,
+	CompactWhenShortProps,
 	AnnotationStyles,
 	DataPoint,
 } from '../../types';
@@ -30,7 +31,8 @@ export type RenderLineGlyphProps< Datum extends object > = GlyphProps< Datum > &
 	position?: 'start' | 'end';
 };
 
-export interface LineChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
+export interface LineChartProps
+	extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps, CompactWhenShortProps {
 	/**
 	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
 	 */

package/src/charts/private/test/compact-when-short.test.tsx

@@ -0,0 +1,170 @@
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { GlobalChartsProvider, defaultTheme } from '../../../providers';
+import { AreaChartUnresponsive } from '../../area-chart/area-chart';
+import { BarChartUnresponsive } from '../../bar-chart/bar-chart';
+import { LineChartUnresponsive } from '../../line-chart/line-chart';
+import type { ChartInstanceRef } from '../chart-instance-context';
+import type { ComponentProps, ComponentType, ReactNode, Ref } from 'react';
+
+const mockRefCallback = jest.fn();
+jest.mock( '../../../hooks/use-element-size', () => ( {
+	useElementSize: () => [ mockRefCallback, 500, 300 ],
+} ) );
+
+type CompactChartProps = {
+	data: typeof data;
+	width: number;
+	height: number;
+	compactWhenShort?: boolean;
+	showLegend?: boolean;
+	orientation?: 'horizontal' | 'vertical';
+	margin?: { left?: number };
+	withGradientFill?: boolean;
+	chartId?: string;
+	legend?: { interactive?: boolean };
+	defaultHiddenSeries?: string[];
+	children?: ReactNode;
+	ref?: Ref< ChartInstanceRef >;
+};
+type ScaleRange = { range: () => number[] };
+type CompactChart = ComponentType< CompactChartProps > & {
+	Legend: ComponentType;
+};
+
+const data = [ 'A', 'B' ].map( ( label, offset ) => ( {
+	label,
+	data: [ 1, 2, 3 ].map( day => ( {
+		date: new Date( 2024, 0, day ),
+		value: day * 10 + offset,
+	} ) ),
+} ) );
+
+const CHARTS = [
+	[ 'LineChart', LineChartUnresponsive ],
+	[ 'AreaChart', AreaChartUnresponsive ],
+	[ 'BarChart', BarChartUnresponsive ],
+] as unknown as [ string, CompactChart ][];
+
+const chartTree = (
+	Chart: CompactChart,
+	props: Partial< CompactChartProps > = {},
+	theme?: ComponentProps< typeof GlobalChartsProvider >[ 'theme' ]
+) => (
+	<GlobalChartsProvider theme={ theme }>
+		<Chart
+			data={ data }
+			width={ 500 }
+			height={ 300 }
+			withGradientFill={ false }
+			showLegend
+			{ ...props }
+		>
+			<Chart.Legend />
+		</Chart>
+	</GlobalChartsProvider>
+);
+
+const renderChart = ( ...args: Parameters< typeof chartTree > ) => render( chartTree( ...args ) );
+
+/* eslint-disable testing-library/no-node-access -- visx renders axes and grid lines without roles or test IDs. */
+const chrome = () => ( {
+	axes: document.querySelectorAll( '.visx-axis' ).length,
+	grid: document.querySelectorAll( '.visx-rows, .visx-columns' ).length > 0,
+	legends: screen.queryAllByTestId( 'legend-horizontal' ).length,
+} );
+/* eslint-enable testing-library/no-node-access */
+
+const FULL = { axes: 2, grid: true, legends: 2 };
+const COMPACT = { axes: 0, grid: false, legends: 0 };
+
+describe( 'compactWhenShort', () => {
+	describe.each( CHARTS )( '%s', ( _name, Chart ) => {
+		it.each( [
+			[ 'an unmeasured chart', 0, true, FULL ],
+			[ 'a short chart', 100, true, COMPACT ],
+			[ 'a tall chart', 300, true, FULL ],
+			[ 'a short chart that did not opt in', 100, false, FULL ],
+		] )( 'draws %s with the expected chrome', ( _label, height, compactWhenShort, expected ) => {
+			renderChart( Chart, { height, compactWhenShort } );
+
+			expect( chrome() ).toEqual( expected );
+		} );
+
+		it( 'restores the chrome when a short chart grows back', () => {
+			const { rerender } = renderChart( Chart, { height: 100, compactWhenShort: true } );
+			rerender( chartTree( Chart, { height: 300, compactWhenShort: true } ) );
+
+			expect( chrome() ).toEqual( FULL );
+		} );
+
+		it( 'does not point at the hidden legend when every series is hidden', () => {
+			renderChart( Chart, {
+				height: 100,
+				compactWhenShort: true,
+				chartId: 'all-hidden',
+				legend: { interactive: true },
+				defaultHiddenSeries: [ 'A', 'B' ],
+			} );
+
+			expect( screen.getByText( 'All series are hidden.' ) ).toBeInTheDocument();
+		} );
+	} );
+
+	it( 'reads the threshold from the theme', () => {
+		renderChart(
+			LineChartUnresponsive as unknown as CompactChart,
+			{ height: 160, compactWhenShort: true },
+			{ compactWhenShort: { below: 200 } }
+		);
+
+		expect( chrome() ).toEqual( COMPACT );
+	} );
+
+	it( 'leaves horizontal bars alone', () => {
+		renderChart( BarChartUnresponsive as unknown as CompactChart, {
+			height: 100,
+			compactWhenShort: true,
+			orientation: 'horizontal',
+		} );
+
+		expect( chrome() ).toEqual( FULL );
+	} );
+
+	describe.each( CHARTS.slice( 0, 2 ) )( '%s margin', ( _name, Chart ) => {
+		it.each( [
+			[ 'defaults to the compact margin', undefined, 2 ],
+			[ 'keeps a side the caller set', { left: 40 }, 40 ],
+		] )( '%s', ( _label, margin, left ) => {
+			const ref = createRef< ChartInstanceRef >();
+			renderChart( Chart, { height: 100, compactWhenShort: true, margin, ref } );
+
+			const scales = ref.current?.getScales() as Record< 'xScale' | 'yScale', ScaleRange >;
+			expect( scales.xScale.range()[ 0 ] ).toBe( left );
+			expect( scales.yScale.range()[ 1 ] ).toBe( 2 );
+		} );
+	} );
+
+	describe( 'BarChart margin', () => {
+		const leftmostBarX = ( margin?: { left?: number } ) => {
+			const { unmount } = renderChart( BarChartUnresponsive as unknown as CompactChart, {
+				height: 100,
+				compactWhenShort: true,
+				margin,
+			} );
+			// eslint-disable-next-line testing-library/no-node-access -- visx bars take no role or test ID.
+			const bars = [ ...document.querySelectorAll( '.visx-bar' ) ];
+			const x = Math.min( ...bars.map( bar => Number( bar.getAttribute( 'x' ) ) ) );
+			unmount();
+			return x;
+		};
+
+		it( 'defaults to the compact margin', () => {
+			expect( leftmostBarX() ).toBe( leftmostBarX( defaultTheme.compactWhenShort.margin ) );
+		} );
+
+		it( 'keeps a side the caller set', () => {
+			expect( leftmostBarX( { left: 40 } ) ).toBeGreaterThan( leftmostBarX() );
+		} );
+	} );
+} );

package/src/charts/private/test/tick-decimals.test.tsx

@@ -0,0 +1,95 @@
+import { createScale } from '@visx/scale';
+import {
+	getTickDecimals,
+	getTickDecimalsDomain,
+	getTickDecimalValues,
+	hasOnlyWholeNumbers,
+} from '../tick-decimals';
+import type { SeriesData } from '../../../types';
+
+const linear = ( domain: [ number, number ] ) =>
+	createScale( { type: 'linear', domain, range: [ 100, 0 ] } );
+
+const series = ( ...values: Array< number | null > ): SeriesData => ( {
+	label: 'A',
+	data: values.map( ( value, i ) => ( { date: new Date( 2024, i, 1 ), value } ) ),
+} );
+
+describe( 'getTickDecimalValues', () => {
+	it( 'keeps only the whole ticks of a range smaller than the tick count', () => {
+		expect( getTickDecimalValues( linear( [ 0, 1 ] ), 4 ) ).toEqual( [ 0, 1 ] );
+		expect( getTickDecimalValues( linear( [ 0, 2 ] ), 4 ) ).toEqual( [ 0, 1, 2 ] );
+	} );
+
+	it( 'leaves a scale whose ticks are already whole to visx', () => {
+		expect( getTickDecimalValues( linear( [ 0, 1000 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves non-numeric scales to visx', () => {
+		const band = createScale( { type: 'band', domain: [ 'a', 'b' ], range: [ 0, 100 ] } );
+		const time = createScale( {
+			type: 'time',
+			domain: [ new Date( 2024, 0, 1 ), new Date( 2024, 0, 2 ) ],
+			range: [ 0, 100 ],
+		} );
+		expect( getTickDecimalValues( band, 4 ) ).toBeUndefined();
+		expect( getTickDecimalValues( time, 4 ) ).toBeUndefined();
+		expect( getTickDecimalValues( undefined, 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with no whole tick to visx', () => {
+		expect( getTickDecimalValues( linear( [ 0.2, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'leaves a range with only one whole tick to visx', () => {
+		expect( getTickDecimalValues( linear( [ 0, 0.8 ] ), 4 ) ).toBeUndefined();
+	} );
+
+	it( 'keeps ticks at the given decimal places, through float error on small and large values', () => {
+		expect( getTickDecimalValues( linear( [ 0, 0.07 ] ), 10, 2 ) ).toEqual( [
+			0, 0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07,
+		] );
+		expect( getTickDecimalValues( linear( [ 131072.01, 131072.02 ] ), 4, 2 ) ).toEqual( [
+			131072.01, 131072.02,
+		] );
+	} );
+} );
+
+describe( 'getTickDecimalsDomain', () => {
+	it.each( [
+		[ 'widens a range inside one step', [ 0.3, 0.73 ], 0, [ 0, 1 ] ],
+		[ 'widens a range between two steps', [ 1.2, 1.8 ], 0, [ 1, 2 ] ],
+		[ 'widens at two decimals', [ 0.031, 0.034 ], 2, [ 0.03, 0.04 ] ],
+		[ 'widens from a step float error puts just below', [ 0.29, 0.295 ], 2, [ 0.29, 0.3 ] ],
+		[ 'widens ends float noise rounds to one step', [ 0.3, 0.1 + 0.2 ], 2, [ 0.3, 0.31 ] ],
+		[ 'keeps a range holding two steps', [ 0, 1.2 ], 0, undefined ],
+		[ 'keeps a range without tickDecimals', [ 0.3, 0.73 ], undefined, undefined ],
+	] )( '%s', ( _, domain, decimals, expected ) => {
+		expect( getTickDecimalsDomain( domain as [ number, number ], decimals ) ).toEqual( expected );
+	} );
+} );
+
+describe( 'getTickDecimals', () => {
+	it.each( [
+		[ 'whole-number data over a caller decimals', true, 2, 0 ],
+		[ 'fractional data at the caller decimals', false, 2, 2 ],
+		[ 'fractional data without tickDecimals', false, undefined, undefined ],
+	] )( 'holds %s', ( _, whole, decimals, expected ) => {
+		expect( getTickDecimals( whole, decimals ) ).toBe( expected );
+	} );
+} );
+
+describe( 'hasOnlyWholeNumbers', () => {
+	it( 'is true when every reading is whole, skipping missing ones', () => {
+		expect( hasOnlyWholeNumbers( [ series( 0, 1, null, 3 ) ] ) ).toBe( true );
+	} );
+
+	it( 'is false when any reading has a fraction', () => {
+		expect( hasOnlyWholeNumbers( [ series( 0, 1 ), series( 0.5 ) ] ) ).toBe( false );
+	} );
+
+	it( 'is false when there is no reading at all', () => {
+		expect( hasOnlyWholeNumbers( [ series( null, null ) ] ) ).toBe( false );
+		expect( hasOnlyWholeNumbers( [] ) ).toBe( false );
+	} );
+} );