@automattic/charts 4.14.0 → 4.15.1

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

@@ -88,6 +88,16 @@ describe( 'getValueScaleDomain', () => {
 		expect( getValueScaleDomain( data, true, isSeriesRendered ) ).toEqual( [ 0, 25 ] );
 	} );
 
+	test.each( [
+		[ 'widens a varying series inside one step', [ 1.2, 1.8 ], [ 1, 2 ] ],
+		[ 'widens a flat series under one step', [ 0.4, 0.4 ], [ 0, 1 ] ],
+		[ 'leaves a varying series holding two steps to visx', [ 1.2, 3.4 ], null ],
+	] )( 'with tickDecimals and zero opted out, %s', ( _, values, expected ) => {
+		expect( getValueScaleDomain( [ series( values ) ], false, allRendered, 0 ) ).toEqual(
+			expected
+		);
+	} );
+
 	test( 'reads visualValue in preference to value', () => {
 		const data: SeriesData[] = [
 			{

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

@@ -6,8 +6,10 @@ import { useChartFormatting } from '../../../providers';
 import { getBucketResolution } from '../../../utils/bucket-info';
 import { createDateFormatter } from '../../../utils/date-formatting';
 import { getBandTickValues, getFormatter } from '../../private/time-axis';
+import { getStackedValueDomain } from './stack-layout';
 import { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';
 import { getBarValue, getValueScaleDomain } from './value-domain';
+import type { StackLayout } from './stack-layout';
 import type {
 	DataPointDate,
 	BaseChartProps,
@@ -152,21 +154,24 @@ const getGroupPadding = ( scale: Record< string, unknown > ): number => {
  * @param horizontal       - Whether the chart is horizontal or vertical.
  * @param options          - The options for the chart.
  * @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+ * @param stack            - The precomputed stack, when series share one bar.
  * @return The merged options for the chart.
  */
 export function useBarChartOptions(
 	data: SeriesData[],
 	horizontal: boolean,
 	options: BaseChartProps[ 'options' ] = {},
-	isSeriesRendered: ( series: SeriesData ) => boolean = ALL_RENDERED
+	isSeriesRendered: ( series: SeriesData ) => boolean = ALL_RENDERED,
+	stack?: StackLayout
 ) {
 	// Callers reasonably pass an object literal, which is a fresh reference every
 	// render and would defeat every memo below.
 	const stableOptions = useDeepMemo( options );
 	const formatting = useChartFormatting();
+	const isStacked = !! stack;
 
-	// `labelOverflow` and `tickResolution` are consumed by this hook rather than
-	// forwarded — visx has an axis prop for neither — and `tickFormat` is merged
+	// `labelOverflow`, `tickResolution` and `tickDecimals` are consumed by this hook rather than
+	// forwarded — visx has an axis prop for none of them — and `tickFormat` is merged
 	// with the derived default explicitly, so an `undefined` passed by a caller
 	// cannot clobber it through the spread. They are split off the caller's axis
 	// options once, here, and only the rest reaches visx below.
@@ -175,14 +180,22 @@ export function useBarChartOptions(
 			labelOverflow: xLabelOverflow,
 			tickResolution: xTickResolution,
 			tickFormat: xTickFormat,
+			tickDecimals: xTickDecimals,
 			...xAxisOptions
 		} = stableOptions.axis?.x || {};
 		const {
 			labelOverflow: yLabelOverflow,
 			tickResolution: yTickResolution,
 			tickFormat: yTickFormat,
+			tickDecimals: yTickDecimals,
 			...yAxisOptions
 		} = stableOptions.axis?.y || {};
+		const [ valueAxisOptions, valueTickDecimals ] = horizontal
+			? [ xAxisOptions, xTickDecimals ]
+			: [ yAxisOptions, yTickDecimals ];
+		const valueScaleType = isStacked
+			? 'linear'
+			: ( horizontal ? stableOptions.xScale : stableOptions.yScale )?.type;
 
 		return {
 			xLabelOverflow,
@@ -194,8 +207,11 @@ export function useBarChartOptions(
 			// The dates sit on the x axis normally, and on the y axis when the
 			// chart is horizontal, so the hint follows them.
 			tickResolution: horizontal ? yTickResolution : xTickResolution,
+			// A caller's own `tickValues` or a log scale turn `tickDecimals` off, domain widening included.
+			valueTickDecimals:
+				valueAxisOptions.tickValues || valueScaleType === 'log' ? undefined : valueTickDecimals,
 		};
-	}, [ stableOptions, horizontal ] );
+	}, [ stableOptions, horizontal, isStacked ] );
 	const { tickResolution } = axisConfig;
 
 	const defaultOptions = useMemo( () => {
@@ -270,20 +286,27 @@ export function useBarChartOptions(
 		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
 		// 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 } : {};
+		let domain: [ number, number ] | null = null;
+		if ( ! valueScaleOptions?.domain ) {
+			domain = stack
+				? getStackedValueDomain( stack, axisConfig.valueTickDecimals )
+				: getValueScaleDomain( data, includeZero, isSeriesRendered, axisConfig.valueTickDecimals );
+		}
+		// Every stack starts at zero, which a log scale cannot place.
+		const valueScaleOverride: { domain?: [ number, number ]; type?: 'linear' } = {
+			...( domain && { domain } ),
+			...( stack && { type: 'linear' as const } ),
+		};
 
 		const xScale = {
 			...baseXScale,
 			...( stableOptions.xScale || {} ),
-			...( horizontal ? valueScaleDomainOverride : {} ),
+			...( horizontal ? valueScaleOverride : {} ),
 		};
 		const yScale = {
 			...baseYScale,
 			...( stableOptions.yScale || {} ),
-			...( ! horizontal ? valueScaleDomainOverride : {} ),
+			...( ! horizontal ? valueScaleOverride : {} ),
 		};
 		const { xLabelOverflow, yLabelOverflow, xTickFormat, yTickFormat, xAxisOptions, yAxisOptions } =
 			axisConfig;
@@ -339,6 +362,7 @@ export function useBarChartOptions(
 			tooltip: {
 				labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter,
 			},
+			valueTickDecimals: axisConfig.valueTickDecimals,
 		};
-	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data, isSeriesRendered ] );
+	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data, isSeriesRendered, stack ] );
 }

package/src/charts/bar-chart/private/{use-overlap-slots.ts → use-bar-slots.ts}

@@ -1,14 +1,17 @@
 import { useMemo } from 'react';
+import { categoryKey, isSameCategory } from './category';
 import { COMPARISON_SLOT, PRIMARY_SLOT, getOverlapPlacements } from './overlap-bars';
+import { getStackLayout } from './stack-layout';
 import { isBarRendered } from './value-domain';
 import type { SelectedBar } from './selected-bar-ring';
 import type { SlotMember } from './slot-tooltip-members';
-import type { DataPointDate, SeriesData } from '../../../types';
+import type { StackLayout } from './stack-layout';
+import type { BarChartLayout, DataPointDate, SeriesData } from '../../../types';
 
 type SeriesEntry = { series: SeriesData; index: number };
 
-export type OverlapSlots = {
-	/** The visible series, back to front. */
+export type BarSlots = {
+	/** The visible series, back to front; bottom to top in a stack. */
 	entries: SeriesEntry[];
 	keys: string[];
 	/** The slots of a category, in the order the band lays them out. */
@@ -17,7 +20,7 @@ export type OverlapSlots = {
 	thicknessOf: ( key: string ) => number;
 	/** The keyboard stops: every category a slot draws a bar at, category by category. */
 	positions: StopPosition[];
-};
+} & ( { kind: 'overlap' } | { kind: 'stacked'; stack: StackLayout } );
 
 /** A slot at one category, named by its front-most bar there. */
 export type StopPosition = {
@@ -30,36 +33,39 @@ export type StopPosition = {
 export type SelectedSlot = SelectedBar & { members: SlotMember[] };
 
 /**
- * Whether two data points sit at the same category: the same label, or the same date.
- *
- * @param point    - A data point.
- * @param category - The data point naming the category.
- * @return Whether `point` is at `category`.
- */
-export function isSameCategory( point: DataPointDate, category: DataPointDate ): boolean {
-	// An empty label falls back to the date, as the band axis's accessor does.
-	return category.label
-		? point.label === category.label
-		: !! category.date && !! point.date && point.date.getTime() === category.date.getTime();
-}
-
-/**
- * Lays out the visible series of an overlap layout in slots and layers.
+ * Lays out the visible series in slots: overlap layers primaries and comparisons in two, stacked puts every primary in one.
  *
- * @param enabled              - Whether the chart draws an overlap layout.
+ * @param layout               - How the chart places its series in a category.
  * @param seriesWithVisibility - Every series, with its index and whether it is visible.
- * @return The layout, or undefined when the chart is not an overlap layout.
+ * @return The slots, or undefined for a grouped layout.
  */
-export function useOverlapSlots(
-	enabled: boolean,
+export function useBarSlots(
+	layout: BarChartLayout,
 	seriesWithVisibility: ( SeriesEntry & { isVisible: boolean } )[]
-): OverlapSlots | undefined {
+): BarSlots | undefined {
 	return useMemo( () => {
-		if ( ! enabled ) {
+		if ( layout === 'grouped' ) {
 			return undefined;
 		}
 
 		const visible = seriesWithVisibility.filter( ( { isVisible } ) => isVisible );
+
+		if ( layout === 'stacked' ) {
+			// Bottom to top, so the top segment names each keyboard stop.
+			const entries = visible.map( ( { series, index } ) => ( { series, index } ) );
+			const slotKeys = [ PRIMARY_SLOT ];
+			const slotOf = () => PRIMARY_SLOT;
+			return {
+				kind: 'stacked',
+				stack: getStackLayout( entries.map( ( { series } ) => series ) ),
+				entries,
+				keys: entries.map( ( { series } ) => series.label ),
+				slotKeys,
+				slotOf,
+				thicknessOf: () => 1,
+				positions: getStopPositions( entries, slotKeys, slotOf ),
+			};
+		}
 		const placements = getOverlapPlacements( visible.map( ( { series } ) => series ) );
 		const placed = visible
 			.map( ( { series, index }, position ) => ( {
@@ -85,6 +91,7 @@ export function useOverlapSlots(
 		];
 
 		return {
+			kind: 'overlap',
 			entries,
 			keys: entries.map( ( { series } ) => series.label ),
 			slotKeys,
@@ -92,17 +99,7 @@ export function useOverlapSlots(
 			thicknessOf,
 			positions: getStopPositions( entries, slotKeys, slotOf ),
 		};
-	}, [ enabled, seriesWithVisibility ] );
-}
-
-/**
- * The category a data point sits at, as a key two points share when `isSameCategory` holds.
- *
- * @param point - A data point.
- * @return The category key.
- */
-function categoryKey( point: DataPointDate ): string {
-	return point.label ? `label:${ point.label }` : `date:${ point.date?.getTime() }`;
+	}, [ layout, seriesWithVisibility ] );
 }
 
 /**
@@ -184,12 +181,12 @@ export function membersAt(
 /**
  * The slot a keyboard index selects, and every bar at its category.
  *
- * @param slots         - The overlap layout.
+ * @param slots         - The overlap or stacked slots.
  * @param selectedIndex - The keyboard index into `slots.positions`.
  * @return The selected slot, or undefined when nothing is selected or drawn there.
  */
 export function getSelectedSlot(
-	slots: OverlapSlots | undefined,
+	slots: BarSlots | undefined,
 	selectedIndex: number | undefined
 ): SelectedSlot | undefined {
 	const position = selectedIndex === undefined ? undefined : slots?.positions[ selectedIndex ];
@@ -209,5 +206,6 @@ export function getSelectedSlot(
 		slotKey,
 		thickness: Math.max( ...slotBars.map( ( { key } ) => slots.thicknessOf( key ) ) ),
 		members,
+		...( slots.kind === 'stacked' && { valueExtent: slots.stack.extentAt( category ) } ),
 	};
 }

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

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { isSameCategory } from './use-overlap-slots';
-import type { OverlapSlots } from './use-overlap-slots';
+import { isSameCategory } from './category';
+import type { BarSlots } from './use-bar-slots';
 import type { DataPointDate, SeriesData } from '../../../types';
 
 type SeriesEntry = { series: SeriesData; index: number };
@@ -17,34 +17,34 @@ export type BarStops = {
 };
 
 /**
- * Lays out the keyboard stops: one per slot and category in an overlap layout, else one per primary bar, series-major within each category.
+ * Lays out the keyboard stops: one per slot and category in a slotted layout, else one per primary bar, series-major within each category.
  *
- * @param overlapSlots   - The overlap layout, or undefined for a grouped one.
+ * @param barSlots       - The overlap or stacked slots, or undefined for a grouped layout.
  * @param primaryEntries - The visible primary series.
  * @return The stops.
  */
 export function useBarStops(
-	overlapSlots: OverlapSlots | undefined,
+	barSlots: BarSlots | undefined,
 	primaryEntries: SeriesEntry[]
 ): BarStops {
 	const series = useMemo(
-		() => ( overlapSlots ? [] : primaryEntries.map( entry => entry.series ) ),
-		[ overlapSlots, primaryEntries ]
+		() => ( barSlots ? [] : primaryEntries.map( entry => entry.series ) ),
+		[ barSlots, primaryEntries ]
 	);
 
 	const count =
-		overlapSlots?.positions.length ??
+		barSlots?.positions.length ??
 		Math.max( 0, ...series.map( item => item.data.length ) ) * series.length;
 
 	const key = useMemo(
-		() => JSON.stringify( overlapSlots?.keys ?? series.map( item => item.label ) ),
-		[ overlapSlots, series ]
+		() => JSON.stringify( barSlots?.keys ?? series.map( item => item.label ) ),
+		[ barSlots, series ]
 	);
 
 	const barAt = useCallback(
 		( stop: number ): StopBar | undefined => {
-			if ( overlapSlots ) {
-				const position = overlapSlots.positions[ stop ];
+			if ( barSlots ) {
+				const position = barSlots.positions[ stop ];
 				return (
 					position && {
 						datum: position.datum,
@@ -61,17 +61,17 @@ export function useBarStops(
 			const datum = item?.data[ index ] as DataPointDate | undefined;
 			return item && datum ? { datum, index, key: item.label } : undefined;
 		},
-		[ overlapSlots, series ]
+		[ barSlots, series ]
 	);
 
 	const stopOf = useCallback(
 		( seriesKey: string, dataPointIndex: number ): number | undefined => {
-			if ( overlapSlots ) {
-				const hovered = overlapSlots.entries.find( entry => entry.series.label === seriesKey )
-					?.series.data[ dataPointIndex ] as DataPointDate | undefined;
-				const slotKey = overlapSlots.slotOf( seriesKey );
+			if ( barSlots ) {
+				const hovered = barSlots.entries.find( entry => entry.series.label === seriesKey )?.series
+					.data[ dataPointIndex ] as DataPointDate | undefined;
+				const slotKey = barSlots.slotOf( seriesKey );
 				const stop = hovered
-					? overlapSlots.positions.findIndex(
+					? barSlots.positions.findIndex(
 							position => position.slotKey === slotKey && isSameCategory( position.datum, hovered )
 						)
 					: -1;
@@ -80,7 +80,7 @@ export function useBarStops(
 			const seriesIndex = series.findIndex( item => item.label === seriesKey );
 			return seriesIndex >= 0 ? dataPointIndex * series.length + seriesIndex : undefined;
 		},
-		[ overlapSlots, series ]
+		[ barSlots, series ]
 	);
 
 	return { count, key, barAt, stopOf };

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

@@ -1,8 +1,9 @@
+import { getTickDecimalsDomain } from '../../private/tick-decimals';
 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 ];
+export const EMPTY_DOMAIN: [ number, number ] = [ 0, 1 ];
 
 /**
  * The value a bar is drawn at, preferring `visualValue` so a zero still shows a sliver.
@@ -37,12 +38,14 @@ export const isBarRendered = ( point: DataPoint | DataPointDate | EnhancedDataPo
  * @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.
+ * @param tickDecimals     - The value axis's `tickDecimals`.
  * @return Value domain, or null when visx should fit its own.
  */
 export const getValueScaleDomain = (
 	data: SeriesData[],
 	includeZero: boolean,
-	isSeriesRendered: ( series: SeriesData ) => boolean
+	isSeriesRendered: ( series: SeriesData ) => boolean,
+	tickDecimals?: number
 ): [ number, number ] | null => {
 	let min = Infinity;
 	let max = -Infinity;
@@ -67,14 +70,13 @@ export const getValueScaleDomain = (
 		return [ ...EMPTY_DOMAIN ];
 	}
 
+	let domain: [ number, number ] | null = null;
 	// 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 ) ];
+		domain = min === 0 ? [ ...EMPTY_DOMAIN ] : [ Math.min( 0, min ), Math.max( 0, max ) ];
+	} else if ( includeZero ) {
+		domain = [ Math.min( 0, min ), Math.max( 0, max ) ];
 	}
 
-	if ( includeZero ) {
-		return [ Math.min( 0, min ), Math.max( 0, max ) ];
-	}
-
-	return null;
+	return getTickDecimalsDomain( domain ?? [ min, max ], tickDecimals ) ?? domain;
 };