@automattic/charts 4.7.0 → 4.9.0

package/src/hooks/test/use-chart-margin.test.tsx

@@ -282,16 +282,20 @@ describe( 'useChartMargin', () => {
 			expect( result.current.left ).toBe( 60 );
 		} );
 
-		it( 'reserves nothing for a hidden x axis', () => {
+		it.each( [ 'bottom', 'top' ] )( 'reserves nothing for a hidden %s x axis', orientation => {
 			mockGetEdgeTickWidths.mockReturnValue( { first: 120, last: 60 } );
+			const largeLabels = { axisLabel: { fontSize: 16 }, tickLength: 10 } as unknown as never;
+			const theme = {
+				...baseTheme,
+				axisStyles: { ...baseTheme.axisStyles, x: { top: largeLabels, bottom: largeLabels } },
+			} as XYChartTheme;
 
 			const { result } = renderHook( () =>
-				useChartMargin( 300, datedXOptions( { display: false } ), data, baseTheme )
+				useChartMargin( 300, datedXOptions( { display: false, orientation } ), data, theme )
 			);
 
 			expect( mockGetEdgeTickWidths ).not.toHaveBeenCalled();
-			expect( result.current.right ).toBe( 20 );
-			expect( result.current.left ).toBe( 51 );
+			expect( result.current ).toEqual( { top: 10, right: 20, bottom: 10, left: 51 } );
 		} );
 	} );
 

package/src/hooks/use-chart-margin.tsx

@@ -27,10 +27,10 @@ const DEFAULT_MARGIN_BOTTOM = 20;
 const DEFAULT_MARGIN_LEFT = 20;
 
 /**
- * Bottom margin to use when the X-axis is rendered at the top.
+ * Bottom margin when no X-axis sits below the chart, because it is on top or hidden.
  * We only need a small buffer below the chart in that case.
  */
-const DEFAULT_BOTTOM_FOR_TOP_AXIS = 10;
+const DEFAULT_BOTTOM_WITHOUT_X_AXIS = 10;
 
 /**
  * Fallback font size used when we cannot derive a font size
@@ -168,23 +168,24 @@ export const useChartMargin = (
 			}
 		}
 
-		// Dynamically compute X-axis margin (bottom by default, or top if orientation is 'top').
-		// This mirrors Y-axis behavior where margin is based on label size and tick length,
-		// but keeps the padding minimal so consumers can control container spacing themselves.
-		const xOrientation = options.axis?.x?.orientation === 'top' ? 'top' : 'bottom';
-		const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics( theme, xOrientation );
-		const computedXMargin = fontSize + tickLength;
-
-		if ( xOrientation === 'top' ) {
-			defaultMargin.top = Math.max( defaultMargin.top, computedXMargin );
-			defaultMargin.bottom = DEFAULT_BOTTOM_FOR_TOP_AXIS;
-		} else {
-			defaultMargin.bottom = Math.max( defaultMargin.bottom, computedXMargin );
-		}
-
-		// An X-axis label is centered on its tick, so the ones at either end of the
-		// scale hang half their width outside the plot area and clip at the SVG edge.
+		// A hidden x axis reserves nothing either, whichever side it sits on.
 		if ( options.axis?.x?.display !== false ) {
+			// Dynamically compute X-axis margin (bottom by default, or top if orientation is 'top').
+			// This mirrors Y-axis behavior where margin is based on label size and tick length,
+			// but keeps the padding minimal so consumers can control container spacing themselves.
+			const xOrientation = options.axis?.x?.orientation === 'top' ? 'top' : 'bottom';
+			const { fontSize, tickLength, tickLabelStyle } = getXAxisLabelMetrics( theme, xOrientation );
+			const computedXMargin = fontSize + tickLength;
+
+			if ( xOrientation === 'top' ) {
+				defaultMargin.top = Math.max( defaultMargin.top, computedXMargin );
+				defaultMargin.bottom = DEFAULT_BOTTOM_WITHOUT_X_AXIS;
+			} else {
+				defaultMargin.bottom = Math.max( defaultMargin.bottom, computedXMargin );
+			}
+
+			// An X-axis label is centered on its tick, so the ones at either end of the
+			// scale hang half their width outside the plot area and clip at the SVG edge.
 			const { first, last } = getEdgeTickWidths(
 				options.axis?.x?.tickValues ?? [],
 				options.axis?.x?.tickFormat,
@@ -193,6 +194,8 @@ export const useChartMargin = (
 
 			defaultMargin.left = Math.max( defaultMargin.left, Math.ceil( first / 2 ) );
 			defaultMargin.right = Math.max( defaultMargin.right, Math.ceil( last / 2 ) );
+		} else {
+			defaultMargin.bottom = DEFAULT_BOTTOM_WITHOUT_X_AXIS;
 		}
 
 		return defaultMargin;

package/src/index.ts

@@ -21,7 +21,7 @@ export { PieSemiCircleChart, PieSemiCircleChartUnresponsive } from './charts/pie
 export { Sparkline, SparklineUnresponsive } from './charts/sparkline';
 
 // Components
-export { BaseTooltip } from './components/tooltip';
+export { BaseTooltip, TooltipBox } from './components/tooltip';
 export { Legend, useChartLegendItems } from './components/legend';
 export { TrendIndicator } from './components/trend-indicator';
 
@@ -97,8 +97,13 @@ export type { LineStyles, GridStyles, EventHandlerParams } from '@visx/xychart';
 export { useLeaderboardLegendItems } from './charts/leaderboard-chart/hooks';
 
 // Previously available via '@automattic/charts/tooltip', '@automattic/charts/legend'
-export { AccessibleTooltip } from './components/tooltip';
-export type { BaseTooltipProps, TooltipData, TooltipProps } from './components/tooltip';
+export { AccessibleTooltip, XYChartTooltip } from './components/tooltip';
+export type {
+	BaseTooltipProps,
+	TooltipBoxProps,
+	TooltipData,
+	TooltipProps,
+} from './components/tooltip';
 export type { LegendProps, BaseLegendProps, ChartLegendOptions } from './components/legend';
 
 // Previously available via '@automattic/charts/bar-chart', '@automattic/charts/line-chart', etc.

package/src/providers/chart-context/global-charts-provider.tsx

@@ -1,4 +1,3 @@
-import { color as d3Color } from '@visx/vendor/d3-color';
 import {
 	createContext,
 	useCallback,
@@ -14,6 +13,7 @@ import {
 import '../../styles/chart-scope.scss';
 import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import {
+	createCssVariableResolver,
 	getItemShapeStyles,
 	getSeriesBarStyles,
 	getSeriesLineStyles,
@@ -32,6 +32,7 @@ import {
 	LABEL_INVERSE_FALLBACK,
 } from './private/catalog-pointers';
 import { createPaletteGenerator } from './private/palette-generator';
+import { resolveOpaqueHex } from './private/resolve-opaque-hex';
 import { SERIES_PALETTE_POINTERS, SERIES_SLOT_1_FALLBACK } from './private/series-palette';
 import { defaultTheme } from './themes';
 import type { GlobalChartsContextValue, ChartRegistration } from './types';
@@ -45,17 +46,6 @@ interface ColorCache {
 	colorAt: ( index: number ) => string;
 }
 
-// A see-through color (transparent, or any alpha below 1) says nothing about what it will look like
-// over the chart, so it resolves to null rather than let its RGB leak into the palette.
-const resolveOpaqueHex = ( pointer: string, element: HTMLElement | null ): string | null => {
-	const raw = resolveCssVariable( pointer, element );
-	if ( ! raw || d3Color( raw )?.opacity !== 1 ) {
-		return null;
-	}
-	const hex = normalizeColorToHex( pointer, element, resolveCssVariable );
-	return isValidHexColor( hex ) ? hex : null;
-};
-
 const PLACEHOLDER_LABEL_COLORS = [ LABEL_FALLBACK, LABEL_INVERSE_FALLBACK ];
 
 export const GlobalChartsContext = createContext< GlobalChartsContextValue | null >( null );
@@ -143,11 +133,12 @@ export const GlobalChartsProvider: FC< GlobalChartsProviderProps > = ( {
 			}
 		}
 
+		const resolveAtWrapper = createCssVariableResolver( wrapperRef.current );
 		const backgroundHex =
-			resolveOpaqueHex( CATALOG_POINTERS.background, wrapperRef.current ) ?? BACKGROUND_FALLBACK;
+			resolveOpaqueHex( CATALOG_POINTERS.background, resolveAtWrapper ) ?? BACKGROUND_FALLBACK;
 		// The two roles pie labels choose between on a fill; one left see-through is never painted there.
 		const labelColors = [ CATALOG_POINTERS.label, CATALOG_POINTERS.labelInverse ]
-			.map( pointer => resolveOpaqueHex( pointer, wrapperRef.current ) )
+			.map( pointer => resolveOpaqueHex( pointer, resolveAtWrapper ) )
 			.filter( ( hex ): hex is string => hex !== null );
 
 		setColorCache( {

package/src/providers/chart-context/hooks/use-default-hidden-series.ts

@@ -37,7 +37,7 @@ export const useDefaultHiddenSeries = (
 	// getHiddenSeries hands out a fresh copy per call, so hold the set still between
 	// visibility changes. Charts derive their rendered series from it, and a new
 	// identity every render invalidates every memo downstream — including the one
-	// the accessible tooltip watches, which closes a tooltip mid-navigation.
+	// `XYChartTooltip` watches, which closes a tooltip mid-navigation.
 	return useMemo(
 		() => ( shouldUseDefaults ? new Set( labelsRef.current ) : getHiddenSeries( chartId ) ),
 		[ shouldUseDefaults, getHiddenSeries, chartId ]

package/src/providers/chart-context/private/catalog-pointers.ts

@@ -24,6 +24,7 @@ export const CATALOG_POINTERS = {
 	annotation: 'var(--a8c-charts-color-annotation, #1e1e1e)',
 	surface: 'var(--a8c-charts-color-surface, #fff)',
 	surfaceSecondary: 'var(--a8c-charts-color-surface-secondary, #f4f4f4)',
+	track: 'var(--a8c-charts-color-track, #f0f0f0)',
 	// Only for `renderMainMetric`, which hands a consumer's own markup something to paint with.
 	trendUp: 'var(--a8c-charts-color-trend-up, #008030)',
 	trendDown: 'var(--a8c-charts-color-trend-down, #cc1818)',

package/src/providers/chart-context/private/resolve-opaque-hex.ts

@@ -0,0 +1,16 @@
+import { color as d3Color } from '@visx/vendor/d3-color';
+import { isValidHexColor, normalizeColorToHex } from '../../../utils/color-utils';
+
+// A see-through color (transparent, or any alpha below 1) says nothing about what it will look like
+// over the chart, so it resolves to null rather than let its RGB stand in for the color.
+export const resolveOpaqueHex = (
+	pointer: string,
+	resolve: ( value: string ) => string | null
+): string | null => {
+	const raw = resolve( pointer );
+	if ( ! raw || d3Color( raw )?.opacity !== 1 ) {
+		return null;
+	}
+	const hex = normalizeColorToHex( raw );
+	return isValidHexColor( hex ) ? hex : null;
+};

package/src/providers/chart-context/test/use-default-hidden-series.test.tsx

@@ -177,7 +177,7 @@ describe( 'useDefaultHiddenSeries', () => {
 
 	it( 'keeps the same set across renders until visibility changes', () => {
 		// Charts memoize their rendered series off this set. A fresh identity per
-		// render invalidates those memos, which re-runs the accessible tooltip's
+		// render invalidates those memos, which re-runs `XYChartTooltip`'s
 		// effect and closes a tooltip the user is still navigating with.
 		const Harness = () => (
 			<GlobalChartsProvider>

package/src/styles/chart-scope.scss

@@ -80,6 +80,7 @@
 	--a8c-charts-motion-duration-entrance: var(--wpds-motion-duration-xl);
 	--a8c-charts-motion-easing-entrance: var(--wpds-motion-easing-expressive);
 	--a8c-charts-border-radius-bar: var(--wpds-border-radius-md);
+	--a8c-charts-border-radius-bar-chart: 0;
 	--a8c-charts-border-radius-cell: var(--wpds-border-radius-sm);
 	// Pill shape; no WPDS radius reaches it.
 	--a8c-charts-border-radius-leaderboard-bar: 9999px;

package/src/test-utils/zoned-parsing-suite.ts

@@ -1,15 +1,5 @@
 import { parseAsLocalDate } from '../utils/date-parsing';
 
-// The `jetpack-js-tools` console guard registers the matcher but ships no types for it.
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace jest {
-		interface Matchers< R > {
-			toHaveWarnedWith( ...args: unknown[] ): R;
-		}
-	}
-}
-
 // Every case asserts an absolute instant, so running the suite from more than one
 // worker zone is what proves the result does not depend on the viewer's.
 const CASES: Array< [ string, string, string ] > = [

package/src/types.ts

@@ -191,7 +191,7 @@ export type DataPointDate = {
 	color?: string;
 };
 
-export type LeaderboardEntry = {
+type LeaderboardEntryFields = {
 	/**
 	 * Unique internal key (e.g., 'key-direct')
 	 */
@@ -245,7 +245,8 @@ export type LeaderboardEntry = {
 	 * For links or other interactive affordances (external-link icons, info
 	 * tooltips), put them in the `label` render prop instead of using onClick —
 	 * a row is either a button (onClick) or carries interactive label content,
-	 * never both, since interactive elements cannot be nested in HTML.
+	 * never both, since interactive elements cannot be nested in HTML. The
+	 * exception is a row that sets `hasInteractiveLabel`.
 	 */
 	onClick?: ( event: MouseEvent< HTMLButtonElement > ) => void;
 
@@ -261,6 +262,21 @@ export type LeaderboardEntry = {
 	ariaLabel?: string;
 };
 
+export type LeaderboardEntry = LeaderboardEntryFields &
+	(
+		| { hasInteractiveLabel?: false }
+		| {
+				/**
+				 * Set when the `label` holds its own link or button. The row's button
+				 * then sits behind the row instead of around it, so both stay operable.
+				 * Requires `onClick`, and `ariaLabel` since the button wraps no text.
+				 */
+				hasInteractiveLabel: true;
+				onClick: ( event: MouseEvent< HTMLButtonElement > ) => void;
+				ariaLabel: string;
+		  }
+	);
+
 export type GradientStop = {
 	offset: string;
 	color?: string;

package/src/utils/test/date-formatting.test.ts

@@ -1,15 +1,5 @@
 import { createDateFormatter, createZonedClock, sanitizeFormatting } from '../date-formatting';
 
-// The `jetpack-js-tools` console guard registers the matcher but ships no types for it.
-declare global {
-	// eslint-disable-next-line @typescript-eslint/no-namespace
-	namespace jest {
-		interface Matchers< R > {
-			toHaveWarned(): R;
-		}
-	}
-}
-
 describe( 'createDateFormatter', () => {
 	it( 'renders an invalid date rather than throwing', () => {
 		const format = createDateFormatter(