@automattic/charts 2.0.0 → 2.0.1

package/src/components/trend-indicator/test/trend-indicator.test.tsx

@@ -74,8 +74,9 @@ describe( 'TrendIndicator', () => {
 			<TrendIndicator direction="up" value="+10%" style={ { fontSize: '2rem' } } />
 		);
 
+		// Note getComputedStyle converts lengths to px.
 		// eslint-disable-next-line testing-library/no-node-access
-		expect( container.firstChild ).toHaveStyle( { fontSize: '2rem' } );
+		expect( container.firstChild ).toHaveStyle( { fontSize: '32px' } );
 	} );
 
 	describe( 'accessibility', () => {

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

@@ -184,4 +184,64 @@ describe( 'useChartMargin', () => {
 		// This is larger than the 20px default bottom margin, so it should be used.
 		expect( result.current.bottom ).toBe( 25 );
 	} );
+
+	describe( 'horizontal y ticks', () => {
+		const horizontalOptions = ( tickFormat: ( value: string | number ) => string ) => ( {
+			...optionsBase,
+			axis: {
+				...optionsBase.axis,
+				y: { ...optionsBase.axis.y, orientation: Orientation.left, tickFormat },
+			},
+		} );
+
+		it( 'measures dated ticks by formatting the raw timestamps once', () => {
+			const formatHour = ( timestamp: string | number ) =>
+				new Date( timestamp ).toLocaleTimeString( undefined, { hour: 'numeric', hour12: true } );
+			const hourlyData = [
+				{
+					label: 'Series 1',
+					data: [
+						{ date: new Date( 2024, 0, 1, 6 ), value: 10 },
+						{ date: new Date( 2024, 0, 1, 7 ), value: 20 },
+					],
+				},
+			];
+
+			renderHook( () =>
+				useChartMargin( 300, horizontalOptions( formatHour ), hourlyData, baseTheme, true )
+			);
+
+			const [ ticks, measureFormatter ] = mockGetLongestTickWidth.mock.calls[ 0 ];
+			// Raw timestamps, so the formatter runs exactly once — formatting here
+			// and again while measuring would date-parse "6 AM" to "Invalid Date".
+			expect( ticks ).toEqual( [
+				new Date( 2024, 0, 1, 6 ).getTime(),
+				new Date( 2024, 0, 1, 7 ).getTime(),
+			] );
+			expect( measureFormatter ).toBe( formatHour );
+		} );
+
+		it( "measures labelled ticks through the caller's formatter", () => {
+			const withSuffix = ( label: string | number ) => `${ label } (total)`;
+			const labelledData = [
+				{
+					label: 'Series 1',
+					data: [
+						{ label: 'Mon', value: 10 },
+						{ label: 'Tuesday', value: 20 },
+					],
+				},
+			];
+
+			renderHook( () =>
+				useChartMargin( 300, horizontalOptions( withSuffix ), labelledData, baseTheme, true )
+			);
+
+			const [ ticks, measureFormatter ] = mockGetLongestTickWidth.mock.calls[ 0 ];
+			// A formatter that lengthens labels has to reach the measurement, or the
+			// margin under-measures and the widest label clips at the SVG edge.
+			expect( ticks ).toEqual( [ 'Mon', 'Tuesday' ] );
+			expect( measureFormatter ).toBe( withSuffix );
+		} );
+	} );
 } );

package/src/hooks/test/use-xychart-theme-style-reads.test.tsx

@@ -0,0 +1,83 @@
+import { renderHook } from '@testing-library/react';
+import { useXYChartTheme } from '../use-xychart-theme';
+import type { SeriesData } from '../../types';
+
+// The theme resolves five catalog roles — background, grid, axis, tick and axis label. Each `getComputedStyle` call can force the browser to flush pending style, and this memo re-runs whenever `data` changes identity, so a dashboard mounting N charts pays the count below N times over.
+const STABLE_DATA: SeriesData[] = [];
+
+describe( 'useXYChartTheme style reads', () => {
+	let getComputedStyleSpy: jest.SpyInstance;
+
+	beforeEach( () => {
+		document.documentElement.style.setProperty( '--a8c-charts-color-grid', '#00ff00' );
+		getComputedStyleSpy = jest.spyOn( window, 'getComputedStyle' );
+	} );
+
+	afterEach( () => {
+		getComputedStyleSpy.mockRestore();
+		document.documentElement.style.removeProperty( '--a8c-charts-color-grid' );
+		document.documentElement.style.removeProperty( '--a8c-charts-color-background' );
+		document.documentElement.style.removeProperty( '--a8c-charts-color-axis' );
+	} );
+
+	const renderTheme = ( data: SeriesData[] = STABLE_DATA ) =>
+		renderHook( ( { series }: { series: SeriesData[] } ) => useXYChartTheme( series ), {
+			initialProps: { series: data },
+		} );
+
+	it( 'reads every role from one computed-style snapshot, not one per role', () => {
+		document.documentElement.style.setProperty( '--a8c-charts-color-background', '#111111' );
+		document.documentElement.style.setProperty( '--a8c-charts-color-axis', '#222222' );
+
+		const { result } = renderTheme();
+
+		expect( getComputedStyleSpy ).toHaveBeenCalledTimes( 1 );
+		expect( result.current.backgroundColor ).toBe( '#111111' );
+		expect( result.current.gridStyles.stroke ).toBe( '#00ff00' );
+		expect( result.current.axisStyles.x.bottom.axisLine.stroke ).toBe( '#222222' );
+	} );
+
+	it( 'does not re-read styles when the hook re-renders with the same inputs', () => {
+		const { rerender } = renderTheme();
+
+		getComputedStyleSpy.mockClear();
+		rerender( { series: STABLE_DATA } );
+
+		expect( getComputedStyleSpy ).not.toHaveBeenCalled();
+	} );
+
+	// A caller passing an inline array literal — `<LineChart data={ [ … ] } />` — hands the hook a new array identity on every render. The memo keys on the series strokes instead, so the theme is not rebuilt and no style is read. Keyed on `data` this cost one query per render, and before the roles shared a snapshot it cost five.
+	it( 'does not rebuild when the caller passes a fresh data array of the same strokes', () => {
+		const { rerender } = renderTheme( [] );
+
+		getComputedStyleSpy.mockClear();
+		rerender( { series: [] } );
+
+		expect( getComputedStyleSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'rebuilds when a series stroke actually changes', () => {
+		const withStroke = ( stroke: string ) =>
+			[ { label: 'A', options: { stroke }, data: [] } ] as unknown as SeriesData[];
+		const { result, rerender } = renderTheme( withStroke( 'rgba(0, 0, 0, 0.5)' ) );
+
+		getComputedStyleSpy.mockClear();
+		rerender( { series: withStroke( 'rebeccapurple' ) } );
+
+		expect( getComputedStyleSpy ).toHaveBeenCalledTimes( 1 );
+		expect( result.current.colors[ 0 ] ).toBe( 'rebeccapurple' );
+	} );
+
+	// The memo key serialises the strokes rather than joining them, so a colour containing a comma or a space survives the round-trip intact.
+	it( 'keeps a stroke that contains separators intact', () => {
+		const { result } = renderTheme( [
+			{ label: 'A', options: { stroke: 'rgba(0, 0, 0, 0.5)' }, data: [] },
+			{ label: 'B', options: { stroke: 'var(--brand, #fff)' }, data: [] },
+		] as unknown as SeriesData[] );
+
+		expect( result.current.colors.slice( 0, 2 ) ).toEqual( [
+			'rgba(0, 0, 0, 0.5)',
+			'var(--brand, #fff)',
+		] );
+	} );
+} );

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

@@ -75,10 +75,9 @@ export const useChartMargin = (
 		const allDataPoints = data.flatMap( series => series.data as DataPointDate[] );
 
 		if ( horizontal ) {
-			// When horizontal, y ticks renders fixed tick labels.
-			return allDataPoints.map(
-				d => d.label || options.axis?.y?.tickFormat( d.date.getTime(), 0, [] )
-			);
+			// When horizontal, y ticks render the category values; leave them raw so
+			// the axis tick formatter is applied exactly once, when measuring below.
+			return allDataPoints.map( d => d.label || d.date?.getTime() );
 		}
 
 		if ( options.axis?.y?.tickValues?.length ) {

package/src/hooks/use-xychart-theme.ts

@@ -1,22 +1,28 @@
 import { buildChartTheme } from '@visx/xychart';
 import { useMemo } from 'react';
 import { useGlobalChartsTheme } from '../providers';
-import { resolveCssVariable } from '../utils';
+import { createCssVariableResolver } from '../utils';
 import type { SeriesData } from '../types';
 
-// visx applies grid, axis, and tick-label colors as SVG presentation attributes,
-// where CSS var() cannot resolve. Resolve WPDS tokens to concrete values (or their
-// fallbacks) before handing the theme to buildChartTheme.
-const resolveColor = ( value?: string ): string | undefined =>
-	value ? resolveCssVariable( value ) ?? value : value;
-
 export const useXYChartTheme = ( data: SeriesData[] ) => {
 	const theme = useGlobalChartsTheme();
 
-	return useMemo( () => {
-		const seriesColors = ( data ?? [] )
+	// The only thing the theme takes from `data` is the series strokes, so key the memo on those rather than on the array's identity. A caller passing an inline literal — `<LineChart data={ [ … ] } />`, which the stories and several consumers do — otherwise rebuilds the whole theme on every render. Serialised rather than joined: a stroke can be `rgba(0, 0, 0, 0.5)` or `var(--brand, #fff)`, and any separator that reads naturally inside a colour cannot round-trip.
+	const seriesColorKey = JSON.stringify(
+		( data ?? [] )
 			.map( series => series.options?.stroke )
-			.filter( ( color ): color is string => Boolean( color ) );
+			.filter( ( color ): color is string => Boolean( color ) )
+	);
+
+	return useMemo( () => {
+		// visx applies grid, axis, and tick-label colors as SVG presentation attributes, where CSS var() cannot resolve. Resolve them to concrete values before handing the theme to buildChartTheme.
+		//
+		// One resolver per theme build, so the five roles below share a single getComputedStyle call rather than taking one each.
+		const resolve = createCssVariableResolver();
+		const resolveColor = ( value?: string ): string | undefined =>
+			value ? resolve( value ) ?? value : value;
+
+		const seriesColors: string[] = JSON.parse( seriesColorKey );
 
 		return buildChartTheme( {
 			...theme,
@@ -39,5 +45,5 @@ export const useXYChartTheme = ( data: SeriesData[] ) => {
 				fill: resolveColor( theme.svgLabelSmall.fill ),
 			},
 		} );
-	}, [ theme, data ] );
+	}, [ theme, seriesColorKey ] );
 };

package/src/types.ts

@@ -482,12 +482,12 @@ export type AxisOptions = {
 	tickClassName?: string;
 	tickFormat?: TickFormatter< ScaleInput< AxisScale > >;
 	/**
-	 * Bucket resolution of the data on a time x-axis. When set, the automatic
-	 * tick formatter derives tick formats from it directly instead of
-	 * inferring the resolution from point spacing. The overall time span still
-	 * constrains the choice — e.g. hourly buckets spanning more than a week
-	 * get date ticks, since hour ticks would be unreadable at that span.
-	 * Ignored when `tickFormat` is set.
+	 * Bucket resolution of the data, set on whichever axis carries the dates.
+	 * When set, the automatic tick formatter derives tick formats from it
+	 * directly instead of inferring the resolution from point spacing. For
+	 * daily-or-finer buckets the overall time span still constrains the choice —
+	 * e.g. hourly buckets spanning more than a week get date ticks, since hour
+	 * ticks would be unreadable at that span. Ignored when `tickFormat` is set.
 	 */
 	tickResolution?: TickResolution;
 	/**

package/src/utils/index.ts

@@ -30,7 +30,7 @@ export { mergeThemes } from './merge-themes';
 export * from './color-utils';
 
 // CSS utilities
-export { resolveCssVariable } from './resolve-css-var';
+export { resolveCssVariable, createCssVariableResolver } from './resolve-css-var';
 
 // Font sizing utilities
 export { resolveFontSize } from './resolve-font-size';

package/src/utils/resolve-css-var.ts

@@ -15,34 +15,57 @@ const CSS_VAR_NAME_PATTERN = /^--[\w-]+$/;
  * @param element - Optional DOM element to resolve the variable from (defaults to document.documentElement)
  * @return The resolved value, fallback value, or null if unresolvable
  */
-export const resolveCssVariable = (
-	value: string,
+export const resolveCssVariable = ( value: string, element?: HTMLElement | null ): string | null =>
+	createCssVariableResolver( element )( value );
+
+/**
+ * Builds a resolver that reads every value from one `getComputedStyle` snapshot.
+ *
+ * `getComputedStyle` is the expensive half of resolving a token: each call can force the browser to flush pending style, and a chart theme resolves five roles at once. Taking the snapshot once per build turns that into a single query. The reads that share a snapshot happen synchronously inside one memo body, so no style change can land between them — the resolver is single-pass by design and is not meant to be held across renders.
+ *
+ * @param element - The element to resolve against, or null/undefined for the document root.
+ * @return A resolver that resolves each value exactly as `resolveCssVariable` does.
+ */
+export function createCssVariableResolver(
 	element?: HTMLElement | null
-): string | null => {
-	if ( ! value ) {
-		return null;
-	}
+): ( value: string ) => string | null {
+	let styles: CSSStyleDeclaration | null = null;
 
-	// Check if it's a var() expression: var(--name) or var(--name, fallback)
-	// Parse manually to avoid regex backtracking vulnerabilities
-	if ( value.startsWith( 'var(' ) && value.endsWith( ')' ) ) {
-		const parsed = parseVarExpression( value );
+	// Deferred so a resolver for a theme that turns out to hold only literals costs nothing. Only a successful read is kept: caching the null would leave a resolver built before its element is in the document dead for the rest of its life.
+	const getStyles = () => {
+		if ( ! styles ) {
+			styles = computedStyleFor( element );
+		}
 
-		if ( parsed ) {
-			const resolved = resolveVariableName( parsed.varName, element );
+		return styles;
+	};
 
-			return resolved || parsed.fallback;
+	return ( value: string ): string | null => {
+		if ( ! value ) {
+			return null;
 		}
-	}
 
-	// Check if it's a plain variable name (starts with --)
-	if ( value.startsWith( '--' ) ) {
-		return resolveVariableName( value, element );
-	}
+		// Check if it's a var() expression: var(--name) or var(--name, fallback)
+		// Parse manually to avoid regex backtracking vulnerabilities
+		if ( value.startsWith( 'var(' ) && value.endsWith( ')' ) ) {
+			const parsed = parseVarExpression( value );
+
+			if ( parsed ) {
+				const resolved = readCustomProperty( parsed.varName, getStyles() );
 
-	// Return regular values as-is (e.g., '#ffffff', 'red')
-	return value;
-};
+				return resolved || parsed.fallback;
+			}
+		}
+
+		// Check if it's a plain variable name (starts with --)
+		if ( value.startsWith( '--' ) ) {
+			return readCustomProperty( value, getStyles() );
+		}
+
+		// Return regular values as-is (e.g., '#ffffff', 'red')
+		return value;
+	};
+}
 
 /**
  * Parses a var() expression into its variable name and optional fallback.
@@ -87,24 +110,42 @@ function parseVarExpression( expr: string ): { varName: string; fallback: string
 }
 
 /**
- * Resolves a plain CSS variable name to its computed value.
+ * Takes one computed-style snapshot, or null where there is nothing to read (SSR, or a detached element).
+ *
+ * @param element - The element to read from, or null/undefined for the document root.
+ * @return The computed styles, or null.
+ */
+function computedStyleFor( element?: HTMLElement | null ): CSSStyleDeclaration | null {
+	if ( typeof window === 'undefined' || typeof document === 'undefined' ) {
+		return null;
+	}
+
+	try {
+		return getComputedStyle( element || document.documentElement );
+	} catch {
+		// getComputedStyle throws on a detached element.
+		return null;
+	}
+}
+
+/**
+ * Reads one custom property from a computed-style snapshot.
  *
  * @param varName - A CSS variable name like '--my-color'
- * @param element - Optional DOM element to resolve from
+ * @param styles  - The snapshot to read from, or null
  * @return The computed value or null
  */
-function resolveVariableName( varName: string, element?: HTMLElement | null ): string | null {
-	if ( typeof window === 'undefined' || typeof document === 'undefined' ) {
+function readCustomProperty( varName: string, styles: CSSStyleDeclaration | null ): string | null {
+	if ( ! styles ) {
 		return null;
 	}
 
 	try {
-		const targetElement = element || document.documentElement;
-		const computedValue = getComputedStyle( targetElement ).getPropertyValue( varName ).trim();
+		const computedValue = styles.getPropertyValue( varName ).trim();
 
 		return computedValue || null;
 	} catch {
-		// Return null if getComputedStyle throws (e.g., detached element)
+		// Belt and braces — no engine is known to throw here. Kept because a caller may hand in a stand-in for CSSStyleDeclaration; `resolve-css-var.test.ts` covers exactly that.
 		return null;
 	}
 }

package/src/utils/test/create-css-variable-resolver.test.ts

@@ -0,0 +1,83 @@
+import { createCssVariableResolver } from '../resolve-css-var';
+
+describe( 'createCssVariableResolver', () => {
+	let originalGetComputedStyle: typeof window.getComputedStyle;
+
+	beforeEach( () => {
+		originalGetComputedStyle = window.getComputedStyle;
+	} );
+
+	afterEach( () => {
+		window.getComputedStyle = originalGetComputedStyle;
+	} );
+
+	const mockStyles = ( values: Record< string, string > ) => {
+		const spy = jest.fn( () => ( {
+			getPropertyValue: ( prop: string ) => values[ prop ] ?? '',
+		} ) );
+		window.getComputedStyle = spy as unknown as typeof window.getComputedStyle;
+
+		return spy;
+	};
+
+	it( 'reads many values from a single snapshot', () => {
+		const spy = mockStyles( { '--a': '#111', '--b': '#222' } );
+		const resolve = createCssVariableResolver();
+
+		expect( resolve( '--a' ) ).toBe( '#111' );
+		expect( resolve( 'var(--b)' ) ).toBe( '#222' );
+		expect( spy ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'takes no snapshot at all for values that need no lookup', () => {
+		const spy = mockStyles( {} );
+		const resolve = createCssVariableResolver();
+
+		expect( resolve( '#ffffff' ) ).toBe( '#ffffff' );
+		expect( resolve( '' ) ).toBeNull();
+		expect( spy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'resolves against the element it was built for', () => {
+		const element = document.createElement( 'div' );
+		const spy = jest.fn( ( target: Element ) => ( {
+			getPropertyValue: () => ( target === element ? '#c029dc' : '#000000' ),
+		} ) );
+		window.getComputedStyle = spy as unknown as typeof window.getComputedStyle;
+
+		expect( createCssVariableResolver( element )( '--accent' ) ).toBe( '#c029dc' );
+		expect( spy ).toHaveBeenCalledWith( element );
+	} );
+
+	it( 'falls back to the var() fallback when the property is unset', () => {
+		mockStyles( {} );
+
+		expect( createCssVariableResolver()( 'var(--missing, #dbdbdb)' ) ).toBe( '#dbdbdb' );
+	} );
+
+	// A failed read is not cached: a resolver built before its element is in the document would otherwise stay dead for the rest of its life, which is the shape CHARTS-255 introduces.
+	it( 'retries after a snapshot that could not be taken', () => {
+		const failing = jest.fn( () => {
+			throw new Error( 'not attached' );
+		} );
+		window.getComputedStyle = failing as unknown as typeof window.getComputedStyle;
+
+		const resolve = createCssVariableResolver();
+		expect( resolve( '--a' ) ).toBeNull();
+
+		mockStyles( { '--a': '#111' } );
+		expect( resolve( '--a' ) ).toBe( '#111' );
+	} );
+
+	it( 'matches resolveCssVariable for the values it is given', () => {
+		mockStyles( { '--a': '#111' } );
+		const resolve = createCssVariableResolver();
+
+		expect( [
+			resolve( '--a' ),
+			resolve( 'var(--a)' ),
+			resolve( 'var(--z, red)' ),
+			resolve( 'red' ),
+		] ).toEqual( [ '#111', '#111', 'red', 'red' ] );
+	} );
+} );