@automattic/charts 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "2.0.0",
+	"version": "2.0.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -58,7 +58,7 @@
 		"build": "pnpm run build:prod",
 		"build:prod": "tsdown",
 		"storybook": "cd ../storybook && pnpm run storybook:dev",
-		"test": "TZ=UTC jest --config=tests/jest.config.cjs",
+		"test": "TZ=UTC LC_ALL=en_US.UTF-8 jest --config=tests/jest.config.cjs",
 		"test-coverage": "pnpm run test --coverage",
 		"typecheck": "tsgo --noEmit"
 	},

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

@@ -27,7 +27,7 @@ import {
 	useGlobalChartsContext,
 	useGlobalChartsTheme,
 } from '../../providers';
-import { attachSubComponents, resolveCssVariable } from '../../utils';
+import { attachSubComponents } from '../../utils';
 import { renderDefaultTooltip } from '../line-chart';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartLayout } from '../private/chart-layout';
@@ -482,10 +482,8 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 														stacked={ stacked }
 														stackOffset={ stackOffset }
 														getElementStyles={ getElementStyles }
-														strokeColor={
-															resolveCssVariable( providerTheme.backgroundColor ) ??
-															providerTheme.backgroundColor
-														}
+														// useXYChartTheme resolved this role inside its memo; reading it back avoids a getComputedStyle on every render.
+														strokeColor={ theme.backgroundColor ?? providerTheme.backgroundColor }
 													/>
 												</>
 											) }

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

@@ -147,7 +147,23 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ legendCollapseGroups ]
 	);
 	const legendItems = useChartLegendItems( dataSorted, legendOptions );
-	const chartOptions = useBarChartOptions( dataWithVisibleZeros, horizontal, options );
+
+	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
+
+	// A hidden series is unmounted, so it is not on the band scale either — the
+	// axis has to choose its tick values from what is left.
+	const isSeriesRendered = useCallback(
+		( series: SeriesData ) =>
+			! chartId || ! legendInteractive || isSeriesVisible( chartId, series.label ),
+		[ chartId, legendInteractive, isSeriesVisible ]
+	);
+
+	const chartOptions = useBarChartOptions(
+		dataWithVisibleZeros,
+		horizontal,
+		options,
+		isSeriesRendered
+	);
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
 	const chartRef = useRef< HTMLDivElement >( null );
 
@@ -182,23 +198,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		totalPoints,
 	} );
 
-	const { getElementStyles, isSeriesVisible } = useGlobalChartsContext();
-
 	// Add visibility information to series when using interactive legends
-	const seriesWithVisibility = useMemo( () => {
-		if ( ! chartId || ! legendInteractive ) {
-			return dataWithVisibleZeros.map( ( series, index ) => ( {
+	const seriesWithVisibility = useMemo(
+		() =>
+			dataWithVisibleZeros.map( ( series, index ) => ( {
 				series,
 				index,
-				isVisible: true,
-			} ) );
-		}
-		return dataWithVisibleZeros.map( ( series, index ) => ( {
-			series,
-			index,
-			isVisible: isSeriesVisible( chartId, series.label ),
-		} ) );
-	}, [ dataWithVisibleZeros, chartId, isSeriesVisible, legendInteractive ] );
+				isVisible: isSeriesRendered( series ),
+			} ) ),
+		[ dataWithVisibleZeros, isSeriesRendered ]
+	);
 
 	// Check if all series are hidden
 	const allSeriesHidden = useMemo( () => {

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

@@ -1,21 +1,127 @@
 import { formatNumberCompact } from '@automattic/number-formatters';
+import { __, sprintf } from '@wordpress/i18n';
 import { useMemo } from 'react';
+import { useDeepMemo } from '../../../hooks';
+import { getBandTickValues, getBucketResolution, getFormatter } from '../../private/time-axis';
 import { TruncatedXTickComponent, TruncatedYTickComponent } from './truncated-tick-component';
 import type { EnhancedDataPoint } from '../../../hooks/use-zero-value-display';
-import type { DataPointDate, BaseChartProps, SeriesData } from '../../../types';
+import type { DataPointDate, BaseChartProps, SeriesData, TickResolution } from '../../../types';
 import type { TickFormatter } from '@visx/axis';
 
 /** Outer padding of the category band scale (space at the chart edges). */
 export const BASE_BAND_PADDING = 0.2;
 /** Inner padding of the category band scale (the base gap between ticks). */
 export const BASE_BAND_PADDING_INNER = 0.1;
+/** Ticks each axis carries unless the caller asks for a different count. */
+const DEFAULT_NUM_TICKS = 4;
 
-const formatDateTick = ( timestamp: number ) => {
-	const date = new Date( timestamp );
-	return date.toLocaleDateString( undefined, {
-		month: 'short',
-		day: 'numeric',
-	} );
+// A stable reference for callers that hide no series, so the memos below hold.
+const ALL_RENDERED = () => true;
+
+// The axis abbreviates to fit a tick; a tooltip has room to spell the same
+// bucket out in full.
+const TOOLTIP_FORMAT_BY_RESOLUTION: Record<
+	Exclude< TickResolution, 'week' >,
+	Intl.DateTimeFormatOptions
+> = {
+	hour: { year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', hour12: true },
+	day: { year: 'numeric', month: 'long', day: 'numeric' },
+	month: { year: 'numeric', month: 'long' },
+	year: { year: 'numeric' },
+};
+
+/**
+ * Labels one bar's bucket, at the bucket's own granularity — finer than the
+ * ticks whenever the overall time span coarsens the axis.
+ *
+ * @param data           - Date-based series, already parsed and sorted by `useChartDataTransform`.
+ * @param tickResolution - Caller-declared bucket resolution, when known.
+ * @return Tooltip label formatter.
+ */
+const getTooltipFormatter = ( data: SeriesData[], tickResolution?: TickResolution ) => {
+	// Only a declared 'week' reaches this branch: seven-day spacing is
+	// indistinguishable from sparse daily data, so inference reports 'day'.
+	if ( tickResolution === 'week' ) {
+		return ( timestamp: number ) =>
+			sprintf(
+				/* translators: %s is the first day of the week the bar covers. */
+				__( 'Week of %s', 'jetpack-charts' ),
+				new Date( timestamp ).toLocaleDateString( undefined, {
+					year: 'numeric',
+					month: 'long',
+					day: 'numeric',
+				} )
+			);
+	}
+
+	// Fall back to the day format rather than `undefined` options, which would
+	// print a full locale date-time for an unrecognised `tickResolution`.
+	const format =
+		TOOLTIP_FORMAT_BY_RESOLUTION[ getBucketResolution( data, tickResolution ) ] ??
+		TOOLTIP_FORMAT_BY_RESOLUTION.day;
+
+	return ( timestamp: number ) => new Date( timestamp ).toLocaleString( undefined, format );
+};
+
+const identity = ( label: string ) => label;
+
+// `hasLabels` only samples the first point of the first series, so a labelled
+// bucket can still reach a formatter that was chosen for timestamps. It arrives
+// as its own string; only a dated bucket has a timestamp to format.
+const byBucket =
+	( format: ( timestamp: number ) => string ) => ( bucket: Date | string | number ) =>
+		typeof bucket === 'string' ? bucket : format( Number( bucket ) );
+
+// Shared with the domain below so both read a bucket the same way.
+const bucketAccessor = ( d: DataPointDate ) => d?.label || d?.date;
+
+/**
+ * The buckets the band axis can put a tick on.
+ *
+ * Built from the accessor visx is given, over the same series in the same order,
+ * so that a tick value is a key the scale actually holds; `scaleBand` returns
+ * `undefined` for one it does not, which parks the tick at the origin. Null
+ * rather than a partial list when any bucket is labelled instead of dated.
+ *
+ * @param data             - Every series handed to the chart.
+ * @param isSeriesRendered - Whether visx mounts a series, i.e. the legend shows it.
+ * @return Bucket dates in axis order, or null if the axis cannot be ticked by date.
+ */
+const getBandDomain = (
+	data: SeriesData[],
+	isSeriesRendered: ( series: SeriesData ) => boolean
+): Date[] | null => {
+	// visx keys its data registry on the series label and reads it back with
+	// `Object.keys`, so a plain object reproduces both of the things that follow
+	// from that: two series sharing a label collapse to the later one, and an
+	// integer-like label sorts ahead of the rest whatever order it arrived in.
+	const registry: Record< string, SeriesData > = {};
+
+	for ( const series of data ) {
+		// Comparison series register nothing with visx — `comparison-bars.tsx` draws
+		// onto the scales the primary series established — and a hidden series is
+		// unmounted, so neither contributes a key to the band scale.
+		if ( series.options?.type === 'comparison' || ! isSeriesRendered( series ) ) {
+			continue;
+		}
+		registry[ series.label ] = series;
+	}
+
+	const byTimestamp = new Map< number, Date >();
+
+	for ( const key of Object.keys( registry ) ) {
+		for ( const point of registry[ key ].data ) {
+			const bucket = bucketAccessor( point as DataPointDate );
+			if ( ! ( bucket instanceof Date ) ) {
+				return null;
+			}
+			if ( ! byTimestamp.has( bucket.getTime() ) ) {
+				byTimestamp.set( bucket.getTime(), bucket );
+			}
+		}
+	}
+
+	return byTimestamp.size ? [ ...byTimestamp.values() ] : null;
 };
 
 /**
@@ -31,16 +137,49 @@ const getGroupPadding = ( scale: Record< string, unknown > ): number => {
 /**
  * Returns the merged options for the bar chart, including axis and scale configuration based on the orientation.
  *
- * @param data       - The data to be displayed in the chart.
- * @param horizontal - Whether the chart is horizontal or vertical.
- * @param options    - The options for the chart.
+ * @param data             - The data to be displayed in the chart.
+ * @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.
  * @return The merged options for the chart.
  */
 export function useBarChartOptions(
 	data: SeriesData[],
 	horizontal: boolean,
-	options: BaseChartProps[ 'options' ] = {}
+	options: BaseChartProps[ 'options' ] = {},
+	isSeriesRendered: ( series: SeriesData ) => boolean = ALL_RENDERED
 ) {
+	// Callers reasonably pass an object literal, which is a fresh reference every
+	// render and would defeat every memo below.
+	const stableOptions = useDeepMemo( options );
+
+	// `labelOverflow` and `tickResolution` are consumed by this hook rather than
+	// forwarded — visx has an axis prop for neither — so they are split off the
+	// caller's axis options once, here, and only the rest reaches visx below.
+	const axisConfig = useMemo( () => {
+		const {
+			labelOverflow: xLabelOverflow,
+			tickResolution: xTickResolution,
+			...xAxisOptions
+		} = stableOptions.axis?.x || {};
+		const {
+			labelOverflow: yLabelOverflow,
+			tickResolution: yTickResolution,
+			...yAxisOptions
+		} = stableOptions.axis?.y || {};
+
+		return {
+			xLabelOverflow,
+			yLabelOverflow,
+			xAxisOptions,
+			yAxisOptions,
+			// 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,
+		};
+	}, [ stableOptions, horizontal ] );
+	const { tickResolution } = axisConfig;
+
 	const defaultOptions = useMemo( () => {
 		const bandScale = {
 			type: 'band' as const,
@@ -53,12 +192,19 @@ export function useBarChartOptions(
 			zero: false,
 		};
 
-		const labelFormatter = data?.[ 0 ]?.data?.[ 0 ]?.label
-			? ( label: string ) => label
-			: formatDateTick;
+		// Ticks on a date-based series share the line/area charts' time-axis
+		// formatter, which narrows with the overall span as well as the bucket
+		// size; the tooltip stays at the bucket's own granularity.
+		const hasLabels = Boolean( data?.[ 0 ]?.data?.[ 0 ]?.label );
+		const timeTickFormatter = hasLabels ? null : getFormatter( data, tickResolution );
+		const labelFormatter = timeTickFormatter ? byBucket( timeTickFormatter ) : identity;
+		const tooltipDatumFormatter = hasLabels
+			? labelFormatter
+			: byBucket( getTooltipFormatter( data, tickResolution ) );
 		const valueFormatter = formatNumberCompact as TickFormatter< unknown >;
 
-		const labelAccessor = ( d: DataPointDate ) => d?.label || d?.date;
+		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;
@@ -66,11 +212,16 @@ export function useBarChartOptions(
 		};
 
 		return {
+			timeAxis: bandDomain &&
+				timeTickFormatter && {
+					domain: bandDomain,
+					tickFormatter: timeTickFormatter,
+				},
 			vertical: {
 				xTickFormat: labelFormatter,
 				yTickFormat: valueFormatter,
-				tooltipLabelFormatter: labelFormatter,
-				xAccessor: labelAccessor,
+				tooltipLabelFormatter: tooltipDatumFormatter,
+				xAccessor: bucketAccessor,
 				yAccessor: valueAccessor,
 				gridVisibility: 'x',
 				xScale: bandScale,
@@ -79,15 +230,15 @@ export function useBarChartOptions(
 			horizontal: {
 				xTickFormat: valueFormatter,
 				yTickFormat: labelFormatter,
-				tooltipLabelFormatter: labelFormatter,
+				tooltipLabelFormatter: tooltipDatumFormatter,
 				xAccessor: valueAccessor,
-				yAccessor: labelAccessor,
+				yAccessor: bucketAccessor,
 				gridVisibility: 'y',
 				xScale: linearScale,
 				yScale: bandScale,
 			},
 		};
-	}, [ data ] );
+	}, [ data, tickResolution, isSeriesRendered ] );
 
 	return useMemo( () => {
 		const orientationKey = horizontal ? 'horizontal' : 'vertical';
@@ -109,7 +260,7 @@ export function useBarChartOptions(
 		const hasComparisonSeries = data.some( s => s.options?.type === 'comparison' );
 		if ( hasComparisonSeries ) {
 			const valueAxisIsY = ! horizontal;
-			const userDomain = valueAxisIsY ? options.yScale?.domain : options.xScale?.domain;
+			const userDomain = valueAxisIsY ? stableOptions.yScale?.domain : stableOptions.xScale?.domain;
 			if ( ! userDomain ) {
 				const allValues: number[] = [];
 				data.forEach( series => {
@@ -135,20 +286,34 @@ export function useBarChartOptions(
 
 		const xScale = {
 			...baseXScale,
-			...( options.xScale || {} ),
+			...( stableOptions.xScale || {} ),
 			...( horizontal ? valueScaleDomainOverride : {} ),
 		};
 		const yScale = {
 			...baseYScale,
-			...( options.yScale || {} ),
+			...( stableOptions.yScale || {} ),
 			...( ! horizontal ? valueScaleDomainOverride : {} ),
 		};
+		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
 		const providedToolTipLabelFormatter = horizontal
-			? options.axis?.y?.tickFormat
-			: options.axis?.x?.tickFormat;
+			? yAxisOptions.tickFormat
+			: xAxisOptions.tickFormat;
 
-		const { labelOverflow: xLabelOverflow, ...xAxisOptions } = options.axis?.x || {};
-		const { labelOverflow: yLabelOverflow, ...yAxisOptions } = options.axis?.y || {};
+		// A band scale has no ticks of its own for visx to ask for, so it samples
+		// the domain by index and can miss the tick that dates the day or names the
+		// year. Pick the values here instead. Only for our own formatter — a
+		// caller's `tickFormat` may not be the one these values were chosen for.
+		const { timeAxis } = defaultOptions;
+		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
+		const bandTickValues =
+			timeAxis && ! dateAxisOptions.tickFormat
+				? getBandTickValues(
+						timeAxis.domain,
+						timeAxis.tickFormatter,
+						dateAxisOptions.numTicks ?? DEFAULT_NUM_TICKS
+				  )
+				: null;
+		const dateAxisTickValues = bandTickValues ? { tickValues: bandTickValues } : {};
 
 		return {
 			gridVisibility,
@@ -161,15 +326,17 @@ export function useBarChartOptions(
 			axis: {
 				x: {
 					orientation: 'bottom' as const,
-					numTicks: 4,
+					numTicks: DEFAULT_NUM_TICKS,
 					tickFormat: xTickFormat,
+					...( horizontal ? {} : dateAxisTickValues ),
 					...( xLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedXTickComponent } : {} ),
 					...xAxisOptions,
 				},
 				y: {
 					orientation: 'left' as const,
-					numTicks: 4,
+					numTicks: DEFAULT_NUM_TICKS,
 					tickFormat: yTickFormat,
+					...( horizontal ? dateAxisTickValues : {} ),
 					...( yLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedYTickComponent } : {} ),
 					...yAxisOptions,
 				},
@@ -181,5 +348,5 @@ export function useBarChartOptions(
 				labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,
 			},
 		};
-	}, [ defaultOptions, options, horizontal, data ] );
+	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data ] );
 }