@automattic/charts 3.1.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "3.1.0",
+	"version": "3.1.1",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

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

@@ -205,8 +205,8 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 		}, [ dataSorted, stacked, stackOffset, rescaleYOnVisibility ] );
 
 		const chartOptions = useMemo( () => {
-			const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-			const formatter = xAxisOptions.tickFormat || getFormatter( dataSorted, tickResolution );
+			const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+			const formatter = tickFormat || getFormatter( dataSorted, tickResolution );
 
 			return {
 				axis: {

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

@@ -112,6 +112,51 @@ describe( 'AreaChart', () => {
 		} );
 	} );
 
+	describe( 'X-Axis Ticks', () => {
+		const monthlySeries = [
+			{
+				label: 'Series A',
+				data: [
+					{ date: new Date( '2024-01-01' ), value: 10 },
+					{ date: new Date( '2024-04-01' ), value: 20 },
+					{ date: new Date( '2024-07-01' ), value: 30 },
+					{ date: new Date( '2024-10-01' ), value: 40 },
+					{ date: new Date( '2025-03-01' ), value: 50 },
+				],
+			},
+		];
+
+		test( 'keeps the derived month formatter when tickFormat is passed as undefined', () => {
+			renderWithProvider( {
+				options: { axis: { x: { tickFormat: undefined } } },
+				data: monthlySeries,
+			} );
+
+			// January is absent: formatMonthOrYearTick renders it as the year instead.
+			const ticks = screen.getAllByText( /^(Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)$/ );
+			expect( ticks.length ).toBeGreaterThan( 1 );
+			expect(
+				screen.queryByText( /^(February|March|April|June|July|August|September|October)$/ )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'honors an explicit tickFormat over the derived formatter', () => {
+			renderWithProvider( {
+				options: {
+					axis: {
+						x: {
+							tickFormat: ( date: Date | number ) =>
+								`tick-${ new Date( Number( date ) ).getUTCMonth() }`,
+						},
+					},
+				},
+				data: monthlySeries,
+			} );
+
+			expect( screen.getAllByText( /^tick-\d+$/ ).length ).toBeGreaterThan( 0 );
+		} );
+	} );
+
 	describe( 'Stacking', () => {
 		test( 'is stacked by default', () => {
 			renderWithProvider();

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

@@ -154,23 +154,29 @@ export function useBarChartOptions(
 	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.
+	// forwarded — visx has an axis prop for neither — 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.
 	const axisConfig = useMemo( () => {
 		const {
 			labelOverflow: xLabelOverflow,
 			tickResolution: xTickResolution,
+			tickFormat: xTickFormat,
 			...xAxisOptions
 		} = stableOptions.axis?.x || {};
 		const {
 			labelOverflow: yLabelOverflow,
 			tickResolution: yTickResolution,
+			tickFormat: yTickFormat,
 			...yAxisOptions
 		} = stableOptions.axis?.y || {};
 
 		return {
 			xLabelOverflow,
 			yLabelOverflow,
+			xTickFormat,
+			yTickFormat,
 			xAxisOptions,
 			yAxisOptions,
 			// The dates sit on the x axis normally, and on the y axis when the
@@ -243,8 +249,8 @@ export function useBarChartOptions(
 	return useMemo( () => {
 		const orientationKey = horizontal ? 'horizontal' : 'vertical';
 		const {
-			xTickFormat,
-			yTickFormat,
+			xTickFormat: defaultXTickFormat,
+			yTickFormat: defaultYTickFormat,
 			tooltipLabelFormatter: defaultTooltipLabelFormatter,
 			xAccessor,
 			yAccessor,
@@ -294,10 +300,11 @@ export function useBarChartOptions(
 			...( stableOptions.yScale || {} ),
 			...( ! horizontal ? valueScaleDomainOverride : {} ),
 		};
-		const { xLabelOverflow, yLabelOverflow, xAxisOptions, yAxisOptions } = axisConfig;
-		const providedToolTipLabelFormatter = horizontal
-			? yAxisOptions.tickFormat
-			: xAxisOptions.tickFormat;
+		const { xLabelOverflow, yLabelOverflow, xTickFormat, yTickFormat, xAxisOptions, yAxisOptions } =
+			axisConfig;
+		// The dates sit on the y axis of a horizontal chart, so the caller's format
+		// for them moves with the orientation. It also labels the tooltip.
+		const dateAxisTickFormat = horizontal ? yTickFormat : xTickFormat;
 
 		// 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
@@ -306,7 +313,7 @@ export function useBarChartOptions(
 		const { timeAxis } = defaultOptions;
 		const dateAxisOptions = horizontal ? yAxisOptions : xAxisOptions;
 		const bandTickValues =
-			timeAxis && ! dateAxisOptions.tickFormat
+			timeAxis && ! dateAxisTickFormat
 				? getBandTickValues(
 						timeAxis.domain,
 						timeAxis.tickFormatter,
@@ -327,7 +334,7 @@ export function useBarChartOptions(
 				x: {
 					orientation: 'bottom' as const,
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: xTickFormat,
+					tickFormat: xTickFormat || defaultXTickFormat,
 					...( horizontal ? {} : dateAxisTickValues ),
 					...( xLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedXTickComponent } : {} ),
 					...xAxisOptions,
@@ -335,7 +342,7 @@ export function useBarChartOptions(
 				y: {
 					orientation: 'left' as const,
 					numTicks: DEFAULT_NUM_TICKS,
-					tickFormat: yTickFormat,
+					tickFormat: yTickFormat || defaultYTickFormat,
 					...( horizontal ? dateAxisTickValues : {} ),
 					...( yLabelOverflow === 'ellipsis' ? { tickComponent: TruncatedYTickComponent } : {} ),
 					...yAxisOptions,
@@ -345,7 +352,7 @@ export function useBarChartOptions(
 				padding: getGroupPadding( horizontal ? yScale : xScale ),
 			},
 			tooltip: {
-				labelFormatter: providedToolTipLabelFormatter || defaultTooltipLabelFormatter,
+				labelFormatter: dateAxisTickFormat || defaultTooltipLabelFormatter,
 			},
 		};
 	}, [ defaultOptions, axisConfig, stableOptions, horizontal, data ] );

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

@@ -505,6 +505,28 @@ describe( 'BarChart', () => {
 			expect( distinctTexts( ticks ).size ).toBeGreaterThan( 1 );
 		} );
 
+		test( 'keeps the derived date formatter when tickFormat is passed as undefined', () => {
+			renderWithTheme( {
+				width: 800,
+				options: { axis: { x: { tickFormat: undefined } } },
+				data: [
+					{
+						label: 'Series A',
+						data: Array.from( { length: 14 }, ( _, i ) => ( {
+							date: new Date( 2024, 0, 1 + i ),
+							value: 10 + i,
+						} ) ),
+						options: {},
+					},
+				],
+			} );
+
+			const ticks = screen.getAllByText( /^Jan \d+$/ );
+			expect( distinctTexts( ticks ).size ).toBeGreaterThan( 1 );
+			// A clobbered formatter falls back to raw `Date.toString()` ticks.
+			expect( screen.queryByText( /GMT/ ) ).not.toBeInTheDocument();
+		} );
+
 		test( 'renders distinct hour ticks for sub-daily buckets in a single day', () => {
 			renderWithTheme( {
 				width: 800,

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

@@ -291,8 +291,8 @@ const LineChartInternal = forwardRef< ChartInstanceRef, LineChartProps >(
 		} );
 
 		const chartOptions = useMemo( () => {
-			const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
-			const formatter = xAxisOptions.tickFormat || getFormatter( dataSorted, tickResolution );
+			const { tickResolution, tickFormat, ...xAxisOptions } = options?.axis?.x ?? {};
+			const formatter = tickFormat || getFormatter( dataSorted, tickResolution );
 
 			return {
 				axis: {

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

@@ -500,6 +500,57 @@ describe( 'LineChart', () => {
 			expect( ticks.length ).toBeGreaterThan( 1 );
 		} );
 
+		test( 'keeps the derived month formatter when tickFormat is passed as undefined.', () => {
+			renderWithTheme( {
+				width: 800,
+				options: { axis: { x: { tickFormat: undefined } } },
+				data: [
+					{
+						label: 'Series A',
+						data: [
+							{ date: new Date( '2024-01-01' ), value: 10 },
+							{ date: new Date( '2024-04-01' ), value: 20 },
+							{ date: new Date( '2024-07-01' ), value: 30 },
+							{ date: new Date( '2024-10-01' ), value: 40 },
+							{ date: new Date( '2025-03-01' ), value: 50 },
+						],
+					},
+				],
+			} );
+
+			// January is absent: formatMonthOrYearTick renders it as the year instead.
+			const ticks = screen.getAllByText( /^(Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)$/ );
+			expect( ticks.length ).toBeGreaterThan( 1 );
+			expect(
+				screen.queryByText( /^(February|March|April|June|July|August|September|October)$/ )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'honors an explicit tickFormat over the derived formatter.', () => {
+			renderWithTheme( {
+				width: 800,
+				options: {
+					axis: {
+						x: {
+							tickFormat: ( date: Date | number ) =>
+								`tick-${ new Date( Number( date ) ).getUTCMonth() }`,
+						},
+					},
+				},
+				data: [
+					{
+						label: 'Series A',
+						data: [
+							{ date: new Date( '2024-01-01' ), value: 10 },
+							{ date: new Date( '2024-07-01' ), value: 30 },
+						],
+					},
+				],
+			} );
+
+			expect( screen.getAllByText( /^tick-\d+$/ ).length ).toBeGreaterThan( 0 );
+		} );
+
 		test( 'renders ticks in year format.', () => {
 			renderWithTheme( {
 				width: 800,