@automattic/charts 2.0.0 → 3.0.0

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;
 	/**
@@ -736,40 +736,6 @@ export type BaseChartProps< T = DataPoint | DataPointDate | LeaderboardEntry > =
 	};
 };
 
-/**
- * Properties for grid components
- */
-export type GridProps = {
-	/**
-	 * Width of the grid in pixels
-	 */
-	width: number;
-	/**
-	 * Height of the grid in pixels
-	 */
-	height: number;
-	/**
-	 * Grid visibility. x is default.
-	 */
-	gridVisibility?: 'x' | 'y' | 'xy' | 'none';
-	/**
-	 * X-axis scale for the grid
-	 * TODO: Fix any type after resolving visx scale type issues
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	xScale: any;
-	/**
-	 * Y-axis scale for the grid
-	 * TODO: Fix any type after resolving visx scale type issues
-	 */
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	yScale: any;
-	/**
-	 * Top offset for the grid
-	 */
-	top?: number;
-};
-
 /**
  * Local type definitions for Popover API attributes and events
  * These are used to avoid extending React module types while still getting type safety

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' ] );
+	} );
+} );

package/src/charts/private/grid-control/grid-control.module.scss

@@ -1,8 +0,0 @@
-.grid-control {
-
-	:global(.visx-line) {
-		stroke: var(--a8c-charts-color-grid, var(--wpds-color-stroke-surface-neutral, #dbdbdb));
-		stroke-width: 1px;
-		shape-rendering: crispEdges;
-	}
-}

package/src/charts/private/grid-control/grid-control.tsx

@@ -1,26 +0,0 @@
-import { GridRows, GridColumns } from '@visx/grid';
-import styles from './grid-control.module.scss';
-import type { GridProps } from '../../../types';
-import type { FC } from 'react';
-
-const GridControl: FC< GridProps > = ( {
-	width,
-	height,
-	xScale,
-	yScale,
-	gridVisibility = 'x',
-	top = 0,
-} ) => {
-	return (
-		<g transform={ `translate(0, ${ top })` } className={ styles[ 'grid-control' ] }>
-			{ gridVisibility.includes( 'x' ) && (
-				<GridRows scale={ xScale } width={ width } data-testid="x-grid" />
-			) }
-			{ gridVisibility.includes( 'y' ) && (
-				<GridColumns scale={ yScale } height={ height } data-testid="y-grid" />
-			) }
-		</g>
-	);
-};
-
-export default GridControl;

package/src/charts/private/grid-control/index.ts

@@ -1 +0,0 @@
-export { default as GridControl } from './grid-control';

package/src/charts/private/grid-control/test/grid-control.test.tsx

@@ -1,56 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { scaleBand, scaleLinear } from '@visx/scale';
-import GridControl from '../grid-control';
-
-describe( 'GridControl', () => {
-	const defaultProps = {
-		width: 200,
-		height: 200,
-		xScale: scaleBand( { domain: [ 'A', 'B', 'C' ], range: [ 0, 100 ] } ),
-		yScale: scaleLinear( { domain: [ 0, 100 ], range: [ 100, 0 ] } ),
-	};
-
-	test( 'renders x-axis grid lines', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="x" />
-			</svg>
-		);
-		const xGridLines = screen.getAllByTestId( 'x-grid' );
-		expect( xGridLines.length ).toBeGreaterThan( 0 );
-		expect( screen.queryAllByTestId( 'y-grid' ) ).toHaveLength( 0 );
-	} );
-
-	test( 'renders y-axis grid lines', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="y" />
-			</svg>
-		);
-		expect( screen.queryAllByTestId( 'x-grid' ) ).toHaveLength( 0 );
-		const yGridLines = screen.getAllByTestId( 'y-grid' );
-		expect( yGridLines.length ).toBeGreaterThan( 0 );
-	} );
-
-	test( 'renders both axes grid lines', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="xy" />
-			</svg>
-		);
-		const xGridLines = screen.getAllByTestId( 'x-grid' );
-		const yGridLines = screen.getAllByTestId( 'y-grid' );
-		expect( xGridLines.length ).toBeGreaterThan( 0 );
-		expect( yGridLines.length ).toBeGreaterThan( 0 );
-	} );
-
-	test( 'renders no grid lines when visibility is none', () => {
-		render(
-			<svg>
-				<GridControl { ...defaultProps } gridVisibility="none" />
-			</svg>
-		);
-		expect( screen.queryAllByTestId( 'x-grid' ) ).toHaveLength( 0 );
-		expect( screen.queryAllByTestId( 'y-grid' ) ).toHaveLength( 0 );
-	} );
-} );