@automattic/charts 1.12.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.12.0",
+	"version": "2.0.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {
@@ -84,8 +84,8 @@
 		"@visx/xychart": "^4.0.0",
 		"@wordpress/i18n": "^6.0.0",
 		"@wordpress/icons": "^15.0.0",
-		"@wordpress/theme": "0.17.0",
-		"@wordpress/ui": "0.17.0",
+		"@wordpress/theme": "1.1.0",
+		"@wordpress/ui": "0.19.0",
 		"clsx": "2.1.1",
 		"date-fns": "^4.1.0",
 		"deepmerge": "4.3.1",
@@ -112,7 +112,7 @@
 		"@visx/glyph": "4.0.0",
 		"@wordpress/components": "37.0.0",
 		"@wordpress/element": "8.3.0",
-		"@wordpress/private-apis": "1.51.0",
+		"@wordpress/private-apis": "1.52.0",
 		"babel-jest": "30.4.1",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "30.4.2",

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

@@ -202,7 +202,8 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 		}, [ dataSorted, stacked, stackOffset, legendInteractive, rescaleYOnVisibility ] );
 
 		const chartOptions = useMemo( () => {
-			const formatter = options?.axis?.x?.tickFormat || getFormatter( dataSorted );
+			const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
+			const formatter = xAxisOptions.tickFormat || getFormatter( dataSorted, tickResolution );
 
 			return {
 				axis: {
@@ -211,7 +212,7 @@ const AreaChartInternal = forwardRef< SingleChartRef, AreaChartProps >(
 						numTicks: guessOptimalNumTicks( dataSorted, width, formatter ),
 						tickFormat: formatter,
 						display: true,
-						...options?.axis?.x,
+						...xAxisOptions,
 					},
 					y: {
 						orientation: 'left' as const,

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -16,7 +16,7 @@
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: var(--wpds-typography-line-height-sm, 20px);
 	margin: 0;
 }
@@ -26,7 +26,7 @@
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: var(--wpds-typography-line-height-sm, 20px);
 	margin: 0;
 }
@@ -56,7 +56,7 @@
 .step-label {
 	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	font-size: var(--wpds-typography-font-size-sm, 12px);
-	font-weight: var(--wpds-typography-font-weight-regular, 400);
+	font-weight: var(--wpds-typography-font-weight-default, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
 	white-space: nowrap;
 	overflow: hidden;
@@ -66,7 +66,7 @@
 .step-rate {
 	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
 }
 
@@ -105,7 +105,7 @@
 	// Override .visx-tooltip inline styles.
 	border-radius: var(--wpds-border-radius-md, 4px) !important;
 	padding: var(--wpds-dimension-padding-md, 12px) !important;
-	box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
+	box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
 
 }
 
@@ -113,7 +113,7 @@
 	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-regular, 400);
+	font-weight: var(--wpds-typography-font-weight-default, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
 }
 
@@ -121,7 +121,7 @@
 	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 	line-height: var(--wpds-typography-line-height-sm, 20px);
 }
 

package/src/charts/line-chart/line-chart.module.scss

@@ -24,7 +24,7 @@
 	}
 
 	&__tooltip-date {
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 		padding-bottom: var(--wpds-dimension-padding-md, 12px);
 	}
 
@@ -33,7 +33,7 @@
 	}
 
 	&__tooltip-label {
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 		padding-right: var(--wpds-dimension-padding-lg, 16px);
 	}
 
@@ -65,7 +65,7 @@
 		border: none;
 		border-radius: var(--wpds-border-radius-md, 4px);
 		font-size: var(--wpds-typography-font-size-md, 13px);
-		box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
+		box-shadow: var(--a8c-charts-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005);
 		position: fixed;
 		// Without margin set, the popover has margin:auto which upsets the
 		// positioning relative to the trigger button. A gap token is appropriate

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

@@ -287,7 +287,8 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 		} );
 
 		const chartOptions = useMemo( () => {
-			const formatter = options?.axis?.x?.tickFormat || getFormatter( dataSorted );
+			const { tickResolution, ...xAxisOptions } = options?.axis?.x ?? {};
+			const formatter = xAxisOptions.tickFormat || getFormatter( dataSorted, tickResolution );
 
 			return {
 				axis: {
@@ -296,7 +297,7 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 						numTicks: guessOptimalNumTicks( dataSorted, width, formatter ),
 						tickFormat: formatter,
 						display: true,
-						...options?.axis?.x,
+						...xAxisOptions,
 					},
 					y: {
 						orientation: 'left' as const,

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

@@ -436,7 +436,48 @@ describe( 'LineChart', () => {
 			expect( ticks.length ).toBeGreaterThan( 1 );
 		} );
 
+		test( 'renders hour ticks when tickResolution declares the buckets sub-daily.', () => {
+			renderWithTheme( {
+				width: 800,
+				options: { axis: { x: { tickResolution: 'hour' } } },
+				data: [
+					{
+						label: 'Series A',
+						// A day apart: spacing inference would read this as daily buckets.
+						data: [
+							{ date: new Date( '2024-01-01T00:00:00' ), value: 10 },
+							{ date: new Date( '2024-01-02T00:00:00' ), value: 20 },
+						],
+					},
+				],
+			} );
+
+			const ticks = screen.getAllByText( /\d+\s(AM|PM)/ );
+			expect( ticks.length ).toBeGreaterThan( 1 );
+		} );
+
 		test( 'renders ticks in short date format.', () => {
+			renderWithTheme( {
+				width: 800,
+				data: [
+					{
+						label: 'Series A',
+						// Weekly resolution: fine enough to keep full dates on the ticks.
+						data: Array.from( { length: 16 }, ( _, i ) => ( {
+							date: new Date( Date.UTC( 2024, 0, 1 + i * 7 ) ),
+							value: 10 + i,
+						} ) ),
+					},
+				],
+			} );
+
+			const ticks = screen.getAllByText(
+				/^(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) \d+$/
+			);
+			expect( ticks.length ).toBeGreaterThan( 1 );
+		} );
+
+		test( 'renders month ticks for month-or-coarser buckets within a year.', () => {
 			renderWithTheme( {
 				width: 800,
 				data: [
@@ -453,9 +494,7 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const ticks = screen.getAllByText(
-				/^(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) \d+$/
-			);
+			const ticks = screen.getAllByText( /^(Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)$/ );
 			expect( ticks.length ).toBeGreaterThan( 1 );
 		} );
 
@@ -502,7 +541,8 @@ describe( 'LineChart', () => {
 				],
 			} );
 
-			const ticks = screen.getAllByText( /(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct) \d+/ );
+			// Roughly monthly buckets render month ticks under the resolution-aware formatter.
+			const ticks = screen.getAllByText( /^(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct)$/ );
 			expect( ticks.length ).toBeLessThan( 6 ); // Not much space
 		} );
 

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss

@@ -6,7 +6,7 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
+		font-weight: var(--wpds-typography-font-weight-emphasis, 499);
 		font-size: var(--wpds-typography-font-size-lg, 16px);
 	}
 

package/src/charts/private/test/time-axis.test.ts

@@ -0,0 +1,182 @@
+import { getFormatter } from '../time-axis';
+import type { useChartDataTransform } from '../../../hooks';
+
+type SortedData = ReturnType< typeof useChartDataTransform >;
+
+const toSeries = ( dates: Date[] ): SortedData =>
+	[
+		{
+			label: 'series',
+			data: dates.map( date => ( { date, value: 1 } ) ),
+		},
+	] as unknown as SortedData;
+
+const hourlyDates = ( start: Date, hours: number ): Date[] =>
+	Array.from( { length: hours }, ( _, i ) => new Date( start.getTime() + i * 60 * 60 * 1000 ) );
+
+const dailyDates = ( start: Date, days: number ): Date[] =>
+	Array.from( { length: days }, ( _, i ) => new Date( start.getTime() + i * 24 * 60 * 60 * 1000 ) );
+
+// TZ is pinned to UTC by the test script, so local formatting is deterministic.
+describe( 'getFormatter', () => {
+	it( 'uses hour ticks within a single day', () => {
+		const formatter = getFormatter(
+			toSeries( hourlyDates( new Date( '2026-08-02T00:00:00' ), 24 ) )
+		);
+
+		expect( formatter( new Date( '2026-08-02T13:00:00' ).getTime() ) ).toMatch( /1\sPM/ );
+	} );
+
+	it( 'uses hour ticks with dates at midnight for sub-daily data spanning multiple days', () => {
+		const formatter = getFormatter(
+			toSeries( hourlyDates( new Date( '2026-08-02T00:00:00' ), 48 ) )
+		);
+
+		expect( formatter( new Date( '2026-08-03T00:00:00' ).getTime() ) ).toMatch( /Aug 3/ );
+		expect( formatter( new Date( '2026-08-02T13:00:00' ).getTime() ) ).toMatch( /1\sPM/ );
+	} );
+
+	it( 'keeps hour ticks up to a full week of sub-daily data', () => {
+		const formatter = getFormatter(
+			toSeries( hourlyDates( new Date( '2026-08-02T00:00:00' ), 24 * 7 + 1 ) )
+		);
+
+		expect( formatter( new Date( '2026-08-05T13:00:00' ).getTime() ) ).toMatch( /1\sPM/ );
+	} );
+
+	it( 'keeps date ticks for a two-point daily series spanning exactly a day', () => {
+		const formatter = getFormatter(
+			toSeries( dailyDates( new Date( '2026-08-01T00:00:00' ), 2 ) )
+		);
+
+		expect( formatter( new Date( '2026-08-02T00:00:00' ).getTime() ) ).toMatch( /Aug 2/ );
+	} );
+
+	it( 'keeps date ticks for daily data over the same multi-day span', () => {
+		const formatter = getFormatter(
+			toSeries( dailyDates( new Date( '2026-08-01T00:00:00' ), 3 ) )
+		);
+
+		expect( formatter( new Date( '2026-08-02T00:00:00' ).getTime() ) ).toMatch( /Aug 2/ );
+		expect( formatter( new Date( '2026-08-02T13:00:00' ).getTime() ) ).not.toMatch( /PM/ );
+	} );
+
+	it( 'keeps date ticks for daily buckets across a spring-forward transition', () => {
+		// A 23-hour first gap, as a daily series straddling spring-forward
+		// produces, must not demote the series to the sub-daily regime.
+		const start = new Date( '2026-03-08T00:00:00' );
+		const dstDates = [ 0, 23, 47, 71 ].map(
+			offsetHours => new Date( start.getTime() + offsetHours * 60 * 60 * 1000 )
+		);
+		const formatter = getFormatter( toSeries( dstDates ) );
+
+		expect( formatter( dstDates[ 2 ].getTime() ) ).not.toMatch( /AM|PM/ );
+		expect( formatter( dstDates[ 2 ].getTime() ) ).toMatch( /Mar/ );
+	} );
+
+	it( 'keeps date ticks when no series has two points', () => {
+		const formatter = getFormatter( [
+			...toSeries( [ new Date( '2026-03-01T00:00:00' ) ] ),
+			...toSeries( [ new Date( '2026-03-04T00:00:00' ) ] ),
+		] );
+
+		expect( formatter( new Date( '2026-03-02T00:00:00' ).getTime() ) ).toMatch( /Mar 2/ );
+	} );
+
+	it( 'uses month ticks for buckets exactly a shortest-month apart', () => {
+		const formatter = getFormatter(
+			toSeries( [
+				new Date( '2026-02-01T00:00:00' ),
+				new Date( '2026-03-01T00:00:00' ),
+				new Date( '2026-04-01T00:00:00' ),
+			] )
+		);
+
+		expect( formatter( new Date( '2026-03-01T00:00:00' ).getTime() ) ).toBe( 'Mar' );
+	} );
+
+	it( 'uses month ticks with the year at January for monthly buckets', () => {
+		const monthlyDates = Array.from(
+			{ length: 13 },
+			( _, i ) => new Date( Date.UTC( 2025, 7 + i, 1 ) )
+		);
+		const formatter = getFormatter( toSeries( monthlyDates ) );
+
+		expect( formatter( new Date( '2025-09-01T00:00:00' ).getTime() ) ).toBe( 'Sep' );
+		expect( formatter( new Date( '2026-01-01T00:00:00' ).getTime() ) ).toBe( '2026' );
+	} );
+
+	it( 'keeps date ticks for weekly buckets within a year', () => {
+		const weeklyDates = Array.from(
+			{ length: 20 },
+			( _, i ) => new Date( Date.UTC( 2026, 0, 5 + i * 7 ) )
+		);
+		const formatter = getFormatter( toSeries( weeklyDates ) );
+
+		expect( formatter( new Date( '2026-03-02T00:00:00' ).getTime() ) ).toMatch( /Mar 2/ );
+	} );
+
+	it( 'uses year ticks beyond a year', () => {
+		const yearly = getFormatter(
+			toSeries( [ new Date( '2020-01-01T00:00:00' ), new Date( '2026-01-01T00:00:00' ) ] )
+		);
+
+		expect( yearly( new Date( '2023-01-01T00:00:00' ).getTime() ) ).toBe( '2023' );
+	} );
+
+	describe( 'with an explicit tickResolution', () => {
+		it( 'uses hour ticks for two hourly points a day apart, where spacing would read as daily', () => {
+			const formatter = getFormatter(
+				toSeries( [ new Date( '2026-08-01T00:00:00' ), new Date( '2026-08-02T00:00:00' ) ] ),
+				'hour'
+			);
+
+			expect( formatter( new Date( '2026-08-01T13:00:00' ).getTime() ) ).toMatch( /1\sPM/ );
+		} );
+
+		it( 'uses date ticks for a lone daily point, where spacing is unknowable', () => {
+			const formatter = getFormatter( toSeries( [ new Date( '2026-08-02T00:00:00' ) ] ), 'day' );
+
+			expect( formatter( new Date( '2026-08-02T00:00:00' ).getTime() ) ).toMatch( /Aug 2/ );
+		} );
+
+		it( 'uses month ticks for monthly buckets regardless of their measured gaps', () => {
+			const formatter = getFormatter(
+				toSeries( [ new Date( '2026-02-01T00:00:00' ), new Date( '2026-03-01T00:00:00' ) ] ),
+				'month'
+			);
+
+			expect( formatter( new Date( '2026-03-01T00:00:00' ).getTime() ) ).toBe( 'Mar' );
+		} );
+
+		it( 'uses date ticks for weekly buckets', () => {
+			const weeklyDates = Array.from(
+				{ length: 8 },
+				( _, i ) => new Date( Date.UTC( 2026, 0, 5 + i * 7 ) )
+			);
+			const formatter = getFormatter( toSeries( weeklyDates ), 'week' );
+
+			expect( formatter( new Date( '2026-01-12T00:00:00' ).getTime() ) ).toMatch( /Jan 12/ );
+		} );
+
+		it( 'uses year ticks for a pair of yearly buckets', () => {
+			const formatter = getFormatter(
+				toSeries( [ new Date( '2025-01-01T00:00:00' ), new Date( '2026-01-01T00:00:00' ) ] ),
+				'year'
+			);
+
+			expect( formatter( new Date( '2025-01-01T00:00:00' ).getTime() ) ).toBe( '2025' );
+			expect( formatter( new Date( '2026-01-01T00:00:00' ).getTime() ) ).toBe( '2026' );
+		} );
+
+		it( 'uses year ticks for yearly buckets that do not start in January', () => {
+			const formatter = getFormatter(
+				toSeries( [ new Date( '2025-06-01T00:00:00' ), new Date( '2026-06-01T00:00:00' ) ] ),
+				'year'
+			);
+
+			expect( formatter( new Date( '2025-06-01T00:00:00' ).getTime() ) ).toBe( '2025' );
+			expect( formatter( new Date( '2026-06-01T00:00:00' ).getTime() ) ).toBe( '2026' );
+		} );
+	} );
+} );

package/src/charts/private/time-axis.ts

@@ -2,6 +2,7 @@ import { curveCatmullRom, curveLinear, curveMonotoneX } from '@visx/curve';
 import { scaleTime } from '@visx/scale';
 import { differenceInHours, differenceInYears } from 'date-fns';
 import type { useChartDataTransform } from '../../hooks';
+import type { TickResolution } from '../../types';
 import type { CurveType } from '../line-chart/types';
 
 // Approximate min pixel width for an x-axis tick label.
@@ -47,20 +48,98 @@ const formatHourTick = ( timestamp: number ) => {
 	return date.toLocaleTimeString( undefined, { hour: 'numeric', hour12: true } );
 };
 
-// Pick the most informative tick formatter for the data's time span: hours
-// within a day, calendar dates within a year, otherwise just years.
-export const getFormatter = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
+// Hour ticks with the date at midnight boundaries, so multi-day spans of
+// sub-daily data keep their days identifiable.
+const formatDateOrHourTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.getHours() === 0 && date.getMinutes() === 0
+		? formatDateTick( timestamp )
+		: formatHourTick( timestamp );
+};
+
+// Month ticks with the year at January boundaries, for month-or-coarser
+// buckets where a full "Sep 1" date would misread as a daily point.
+const formatMonthOrYearTick = ( timestamp: number ) => {
+	const date = new Date( timestamp );
+	return date.getMonth() === 0
+		? formatYearTick( timestamp )
+		: date.toLocaleDateString( undefined, { month: 'short' } );
+};
+
+// Smallest interval between consecutive points across all series, in hours.
+// Infinity when no series has two points.
+const getPointSpacingInHours = ( sortedData: ReturnType< typeof useChartDataTransform > ) => {
+	return sortedData.reduce(
+		( spacing, datom ) =>
+			datom.data.reduce( ( seriesSpacing, point, index ) => {
+				const previous = datom.data[ index - 1 ];
+				if ( previous?.date === undefined || point?.date === undefined ) {
+					return seriesSpacing;
+				}
+				return Math.min(
+					seriesSpacing,
+					Math.abs( differenceInHours( point.date, previous.date ) )
+				);
+			}, spacing ),
+		Number.POSITIVE_INFINITY
+	);
+};
+
+// Nominal point spacing for a caller-declared bucket resolution. A month maps
+// to the shortest month so the month-or-coarser regime engages (see
+// getFormatter). Year is absent: it short-circuits to year ticks before the
+// spacing regimes run.
+const SPACING_BY_RESOLUTION: Record< Exclude< TickResolution, 'year' >, number > = {
+	hour: 1,
+	day: 24,
+	week: 24 * 7,
+	month: 28 * 24,
+};
+
+// Pick the most informative tick formatter for the data's resolution and time
+// span: hours within a day, hours with day boundaries for sub-daily data
+// spanning up to a week, calendar dates for daily-or-finer buckets within a
+// year, months (with the year at January) for month-or-coarser buckets,
+// otherwise just years. The resolution comes from `tickResolution` when the
+// caller knows it, and is inferred from point spacing otherwise.
+export const getFormatter = (
+	sortedData: ReturnType< typeof useChartDataTransform >,
+	tickResolution?: TickResolution
+) => {
+	// The month regime only prints the year at January boundaries, so yearly
+	// buckets starting mid-year would render as month names; year ticks are
+	// correct for yearly buckets at any span.
+	if ( tickResolution === 'year' ) {
+		return formatYearTick;
+	}
+
 	const minX = Math.min( ...sortedData.map( datom => datom.data.at( 0 )?.date ) );
 	const maxX = Math.max( ...sortedData.map( datom => datom.data.at( -1 )?.date ) );
 
+	const spacingInHours = tickResolution
+		? SPACING_BY_RESOLUTION[ tickResolution ]
+		: getPointSpacingInHours( sortedData );
+	// 23, not 24: a daily gap shrinks to 23 wall-clock hours across a
+	// spring-forward DST transition.
+	const isSubDaily = spacingInHours < 23;
+
 	const diffInHours = Math.abs( differenceInHours( maxX, minX ) );
-	if ( diffInHours <= 24 ) {
+	if ( diffInHours <= 24 && isSubDaily ) {
 		return formatHourTick;
 	}
 
+	if ( diffInHours <= 24 * 7 && isSubDaily ) {
+		return formatDateOrHourTick;
+	}
+
 	const diffInYears = Math.abs( differenceInYears( maxX, minX ) );
 	if ( diffInYears <= 1 ) {
-		return formatDateTick;
+		// 28 days: the shortest month, so monthly buckets qualify but weekly
+		// don't. The finiteness check keeps all-single-point series — whose
+		// resolution is unknowable — on date ticks.
+		return Number.isFinite( spacingInHours ) && spacingInHours >= 28 * 24
+			? formatMonthOrYearTick
+			: formatDateTick;
 	}
 
 	return formatYearTick;

package/src/charts/private/x-zoom/test/x-zoom.test.tsx

@@ -1,6 +1,6 @@
-import { act, render, renderHook, screen } from '@testing-library/react';
+import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useRef } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { useXZoom, ZoomResetButton } from '../index';
 import type { SingleChartRef } from '../../single-chart-context';
 import type { EventHandlerParams } from '@visx/xychart';
@@ -147,17 +147,35 @@ const preventDefaultKeydown = ( event: ReactKeyboardEvent< HTMLDivElement > ) =>
 	event.preventDefault();
 
 describe( 'ZoomResetButton', () => {
-	test( 'renders a labelled button with a hover tooltip', () => {
+	test( 'renders a labelled button without a native title tooltip', () => {
 		const noop = jest.fn();
 		render( <ZoomResetButton onClick={ noop } /> );
 		const button = screen.getByTestId( 'chart-zoom-reset' );
 		expect( button.tagName ).toBe( 'BUTTON' );
 		expect( button ).toHaveClass( 'x-zoom__reset' );
 		expect( button ).toHaveAccessibleName( 'Reset zoom' );
-		// WPDS `IconButton` would supply a tooltip of its own, but it pulls in a
-		// CommonJS dependency that breaks Script Module consumers (see
-		// ZoomResetButton). `title` restores the hover hint on plain `Button`.
-		expect( button ).toHaveAttribute( 'title', 'Reset zoom' );
+		// IconButton renders a real tooltip, so the `title` fallback is gone —
+		// `title` is invisible to keyboard users and cannot be dismissed.
+		expect( button ).not.toHaveAttribute( 'title' );
+	} );
+
+	test( 'shows a tooltip on keyboard focus', async () => {
+		const noop = jest.fn();
+		render( <ZoomResetButton onClick={ noop } /> );
+		await userEvent.tab();
+		expect( screen.getByTestId( 'chart-zoom-reset' ) ).toHaveFocus();
+		// The button's only text is the tooltip's — its own label is an
+		// `aria-label` attribute, so this cannot match the trigger.
+		await expect( screen.findByText( 'Reset zoom' ) ).resolves.toBeVisible();
+	} );
+
+	test( 'dismisses the tooltip on Escape', async () => {
+		const noop = jest.fn();
+		render( <ZoomResetButton onClick={ noop } /> );
+		await userEvent.tab();
+		await expect( screen.findByText( 'Reset zoom' ) ).resolves.toBeVisible();
+		await userEvent.keyboard( '{Escape}' );
+		await waitFor( () => expect( screen.queryByText( 'Reset zoom' ) ).not.toBeInTheDocument() );
 	} );
 
 	test( 'fires onClick when activated', async () => {
@@ -167,6 +185,33 @@ describe( 'ZoomResetButton', () => {
 		expect( onClick ).toHaveBeenCalledTimes( 1 );
 	} );
 
+	test( 'leaves no orphaned tooltip when activation unmounts the button', async () => {
+		// Resetting the zoom unmounts this control while its tooltip is open.
+		// The tooltip renders in a portal outside the container, so a missed
+		// cleanup would strand it on the page rather than remove it with the
+		// button.
+		/**
+		 * Mirrors the host charts: the reset control exists only while zoomed.
+		 *
+		 * @return JSX element or null.
+		 */
+		function Host() {
+			const [ zoomed, setZoomed ] = useState( true );
+			const unzoom = useCallback( () => setZoomed( false ), [] );
+			return zoomed ? <ZoomResetButton onClick={ unzoom } /> : null;
+		}
+		render( <Host /> );
+		await userEvent.tab();
+		await expect( screen.findByText( 'Reset zoom' ) ).resolves.toBeVisible();
+
+		await userEvent.keyboard( '{Enter}' );
+
+		await waitFor( () =>
+			expect( screen.queryByTestId( 'chart-zoom-reset' ) ).not.toBeInTheDocument()
+		);
+		expect( document.body ).not.toHaveTextContent( 'Reset zoom' );
+	} );
+
 	test( 'keyboard activation survives the chart wrapper keydown handler', async () => {
 		const onClick = jest.fn();
 		// Mirrors the chart's grid wrapper, whose keyboard-navigation handler

package/src/charts/private/x-zoom/x-zoom.module.scss

@@ -11,26 +11,18 @@
 		pointer-events: none;
 	}
 
-	// Overlay placement and icon-only geometry — the visual treatment (border,
-	// hover/focus, sizing) comes from the WPDS Button. The elevation shadow is
-	// deliberately kept for separation from chart content (CHARTS-237
-	// design call, carrying over CHARTS-200's tokenization).
+	// The elevation shadow is deliberately kept for separation
+	// from chart content (CHARTS-237 design call, carrying
+	// over CHARTS-200's tokenization). `@wordpress/theme` 1.0.0
+	// dropped the `--wpds-elevation-*` group, so this role carries
+	// the former token's spec value directly rather than nesting
+	// a `--wpds-*` var.
 	&__reset {
 		position: absolute;
 		top: var(--wpds-dimension-gap-sm, 8px);
 		right: var(--wpds-dimension-gap-sm, 8px);
 		z-index: 2;
-		box-shadow: var(--wpds-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
-
-		// `Button` is sized for a text label. These are the same three custom
-		// properties @wordpress/ui's own IconButton composition sets to make a
-		// square icon-only control; we set them directly because IconButton
-		// itself cannot be used here — it renders a Base UI tooltip, whose
-		// CommonJS `use-sync-external-store` dependency makes Rolldown emit a
-		// dynamic `require()` that throws in Script Module consumers.
-		--wp-ui-button-aspect-ratio: 1;
-		--wp-ui-button-padding-inline: 0;
-		--wp-ui-button-min-width: unset;
+		box-shadow: var(--a8c-charts-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
 
 		// WPDS outline-neutral is transparent-bodied at rest; give this
 		// floating control an opaque body so chart content doesn't show