@automattic/charts 3.2.0 → 4.0.0

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -473,3 +473,49 @@ describe( 'ConversionFunnelChart', () => {
 		} );
 	} );
 } );
+
+// Chart container at (100, 50); the tooltip box measures 120x40. Everything
+// else the charts measure (wrapper, clipping lookups) reports the container.
+const mockRects = () =>
+	jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+		this: Element
+	) {
+		const box = this.classList.contains( 'visx-tooltip' );
+		return {
+			left: box ? 0 : 100,
+			top: box ? 0 : 50,
+			width: box ? 120 : 400,
+			height: box ? 40 : 300,
+			right: box ? 120 : 500,
+			bottom: box ? 40 : 350,
+			x: box ? 0 : 100,
+			y: box ? 0 : 50,
+			toJSON: () => ( {} ),
+		} as DOMRect;
+	} );
+
+describe( 'ConversionFunnelChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	it( 'places the box relative to the chart root, at the click plus the offsets', async () => {
+		mockRects();
+		const user = userEvent.setup();
+		renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+		const bar = screen.getAllByRole( 'button' )[ 0 ];
+		await user.pointer( [
+			{ target: bar, coords: { clientX: 180, clientY: 140 } },
+			{ keys: '[MouseLeft]', target: bar, coords: { clientX: 180, clientY: 140 } },
+		] );
+
+		// (180, 140) is (80, 90) inside the root; the chart lifts the anchor 10px
+		// above the click, and the box adds 10px each way.
+		const box = screen.getByTestId( 'bounded-tooltip' );
+		expect( screen.getByTestId( 'conversion-funnel-chart' ) ).toContainElement( box );
+		expect( box ).toHaveStyle( {
+			transform: 'translate(90px, 90px)',
+		} );
+	} );
+} );

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

@@ -1,5 +1,6 @@
 .container {
 	position: relative;
+	background-color: var(--a8c-charts-color-background, #fff);
 
 	// Google gives its HTML tooltip no width, so the box shrink-to-fits against
 	// whatever room is left beside the hovered feature. Near a map edge that

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

@@ -14,6 +14,7 @@ import {
 	useChartScopeElement,
 	useGlobalChartsContext,
 } from '../../providers';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { sanitizeHtml } from '../../utils/sanitize-html';
@@ -144,13 +145,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	onError,
 	renderPlaceholder,
 } ) => {
-	const {
-		getElementStyles,
-		theme: {
-			geoChart: { featureFillColor },
-			backgroundColor,
-		},
-	} = useGlobalChartsContext();
+	const { getElementStyles } = useGlobalChartsContext();
 	const scopeElement = useChartScopeElement();
 	const containerRef = useRef< HTMLDivElement >( null );
 	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
@@ -212,10 +207,10 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	const lightColorHex = lightenHexColor( fullColorHex, 0.8 );
 	// Use normalizeColorToHex to ensure HSL/RGB values from CSS variables are converted to hex. Google Charts takes a resolved-hex snapshot at render, so this does not live-update on a theme change without a re-render — an accepted asymmetry vs CSS-painted elements.
 	const backgroundColorHex =
-		normalizeColorToHex( backgroundColor, scopeElement, resolveCssVariable ) ||
+		normalizeColorToHex( CATALOG_POINTERS.background, scopeElement, resolveCssVariable ) ||
 		DEFAULT_BACKGROUND_COLOR;
 	const defaultFillColorHex =
-		normalizeColorToHex( featureFillColor, scopeElement, resolveCssVariable ) ||
+		normalizeColorToHex( CATALOG_POINTERS.surfaceSecondary, scopeElement, resolveCssVariable ) ||
 		DEFAULT_FEATURE_FILL_COLOR;
 
 	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
@@ -306,7 +301,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			ref={ containerRef }
 			className={ clsx( 'geo-chart', styles.container, className ) }
 			data-testid="geo-chart"
-			style={ { width, height, backgroundColor } }
+			style={ { width, height } }
 		>
 			<Chart
 				chartType="GeoChart"

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

@@ -142,7 +142,7 @@ describe( 'GeoChart', () => {
 	} );
 
 	describe( 'Chart Options', () => {
-		test( 'configures color axis with theme colors', () => {
+		test( 'configures a two-stop color axis from the palette', () => {
 			renderWithTheme();
 
 			const chartOptions = screen.getByTestId( 'chart-options' );
@@ -152,7 +152,7 @@ describe( 'GeoChart', () => {
 			expect( options.colorAxis.colors ).toHaveLength( 2 );
 		} );
 
-		test( 'sets datalessRegionColor from theme', () => {
+		test( 'sets datalessRegionColor from the surface-secondary role', () => {
 			renderWithTheme();
 
 			const chartOptions = screen.getByTestId( 'chart-options' );

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

@@ -1,13 +1,14 @@
 // Focus-ring width shared across the grid and cell-selected focus outlines. A
 // Sass var, not a custom property: a compile-time constant scoped to this
 // module, so it needs no runtime cascade and never lands on the DOM.
-$focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+$focus-ring-width: var(--wpds-border-width-focus);
 
 .heatmap-chart {
+	position: relative;
 	width: 100%;
 	height: 100%;
 	min-height: 0;
-	font-size: var(--wpds-typography-font-size-sm, 12px);
+	font-size: var(--wpds-typography-font-size-sm);
 }
 
 // Height-capped grids are content-sized vertically, so the wrapper hugs them
@@ -18,7 +19,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 }
 
 .heatmap-chart__empty {
-	padding: var(--wpds-dimension-padding-lg, 16px);
+	padding: var(--wpds-dimension-padding-lg);
 	color: var(--a8c-charts-color-label-secondary);
 }
 
@@ -28,9 +29,9 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	display: grid;
 	// --a8c-charts-dimension-heatmap-cell-gap is component-emitted from JS per
 	// render, not a catalog entry. Do not collapse this to a bare var(); the
-	// inner WPDS fallback is the only value this property has when the JS var
-	// is unset.
-	gap: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+	// inner WPDS token (fallback injected at build) is the only value this
+	// property has when the JS var is unset.
+	gap: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs));
 	flex: 1 1 0;
 	width: 100%;
 	// Override flex's auto minimum so short widgets do not scroll.
@@ -39,9 +40,9 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	&:focus-visible {
 		outline:
 			$focus-ring-width solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			var(--wpds-color-stroke-focus);
 		outline-offset: 2px;
-		border-radius: var(--wpds-border-radius-sm, 2px);
+		border-radius: var(--wpds-border-radius-sm);
 	}
 }
 
@@ -68,7 +69,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 .heatmap-chart__col-label,
 .heatmap-chart__row-label {
 	color: var(--a8c-charts-color-label-secondary);
-	font-size: var(--wpds-typography-font-size-xs, 11px);
+	font-size: var(--wpds-typography-font-size-xs);
 	white-space: nowrap;
 	overflow: visible;
 }
@@ -82,7 +83,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	align-self: center;
 	justify-self: end;
 	text-align: right;
-	padding-inline-end: var(--wpds-dimension-padding-xs, 4px);
+	padding-inline-end: var(--wpds-dimension-padding-xs);
 }
 
 .heatmap-chart__cell {
@@ -115,19 +116,19 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 // Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
 // an empty cell.
 .heatmap-chart__cell--filled {
-	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
+	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
 }
 
 .heatmap-chart__cell--selected {
 	outline:
 		$focus-ring-width solid
-		var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+		var(--wpds-color-stroke-focus);
 	outline-offset: calc(-1 * #{$focus-ring-width});
 }
 
 .heatmap-chart__cell-value {
 	color: var(--a8c-charts-color-label);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 }
 
 // Light text on fills dark enough to out-contrast dark text (decided in JS from
@@ -136,9 +137,13 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	color: var(--a8c-charts-color-label-inverse);
 }
 
+.heatmap-chart__legend-label {
+	color: var(--a8c-charts-color-label);
+}
+
 .heatmap-chart__legend-swatch {
-	width: var(--wpds-dimension-size-3xs, 12px);
-	height: var(--wpds-dimension-size-3xs, 12px);
+	width: var(--wpds-dimension-size-3xs);
+	height: var(--wpds-dimension-size-3xs);
 	border-radius: var(--a8c-charts-border-radius-cell);
-	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
+	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-background, #fff));
 }

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

@@ -1,8 +1,9 @@
 import { formatNumber, formatNumberCompact } from '@automattic/number-formatters';
-import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
+import { useTooltip } from '@visx/tooltip';
 import { __ } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { BoundedTooltip } from '../../components/tooltip/private/bounded-tooltip';
 import {
 	GlobalChartsProvider,
 	useChartId,
@@ -10,7 +11,8 @@ import {
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
-import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
+import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents } from '../../utils';
 import {
 	isValidHexColor,
@@ -69,23 +71,28 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	const [ selectedIndex, setSelectedIndex ] = useState< number | undefined >();
 	const { tooltipOpen, tooltipLeft, tooltipTop, tooltipData, showTooltip, hideTooltip } =
 		useTooltip< HeatmapTooltipData >();
-	const { containerRef, containerBounds, TooltipInPortal } = useTooltipInPortal( {
-		detectBounds: true,
-		scroll: true,
-	} );
-	// Read from a ref so the keyboard-tooltip effect doesn't depend on containerBounds, which
-	// is a new object each render and would loop the effect via showTooltip.
-	const containerBoundsRef = useRef( containerBounds );
-	containerBoundsRef.current = containerBounds;
+	const standaloneScopeClass = useStandaloneScopeClass();
+	const containerRef = useRef< HTMLDivElement >( null );
+	// The chart root positions the tooltip, so pointer and cell coordinates are
+	// measured against it — found by its id rather than by walking up, so
+	// whatever ChartLayout wraps the grid in cannot shift the origin.
+	const getTooltipOrigin = useCallback(
+		() =>
+			containerRef.current
+				?.closest( `[data-chart-id="heatmap-chart-${ chartId }"]` )
+				?.getBoundingClientRect() ?? null,
+		[ chartId ]
+	);
 
 	const { color: primaryColorHex } = getElementStyles( {
 		index: 0,
-		overrideColor: primaryColor || heatmapChartSettings.primaryColor,
+		overrideColor: primaryColor,
 	} );
 
-	// Resolve the background against this chart's own scope element (not the provider's), matching where `--a8c-charts-color-heatmap-background` is substituted for the cell blend below — a chart-level override otherwise disagrees with a provider-level read.
+	// The cell blend substitutes this role at the cell; this read happens at the scope
+	// element, so an override on the chart's own class makes the two disagree. CHARTS-255.
 	const chartBackgroundHex = normalizeColorToHex(
-		theme.backgroundColor,
+		CATALOG_POINTERS.background,
 		scopeElement,
 		resolveCssVariable
 	);
@@ -212,20 +219,20 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 			if ( ! withTooltips ) {
 				return;
 			}
+			const origin = getTooltipOrigin();
+			if ( ! origin ) {
+				return;
+			}
 			const target = event.currentTarget;
 			const columnIndex = Number( target.dataset.column );
 			const rowIndex = Number( target.dataset.row );
-			// Read bounds from the ref (like the keyboard-tooltip effect) so this
-			// callback stays stable across renders.
-			const bounds = containerBoundsRef.current;
-			// TooltipInPortal re-adds containerBounds, so subtract it to land at the cursor.
 			showTooltip( {
-				tooltipLeft: event.clientX - bounds.left,
-				tooltipTop: event.clientY - bounds.top,
+				tooltipLeft: event.clientX - origin.left,
+				tooltipTop: event.clientY - origin.top,
 				tooltipData: buildTooltipData( columnIndex, rowIndex ),
 			} );
 		},
-		[ withTooltips, showTooltip, buildTooltipData ]
+		[ withTooltips, showTooltip, buildTooltipData, getTooltipOrigin ]
 	);
 
 	const handleCellMouseLeave = useCallback( () => {
@@ -241,6 +248,10 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		if ( ! withTooltips || selectedIndex === undefined ) {
 			return;
 		}
+		const origin = getTooltipOrigin();
+		if ( ! origin ) {
+			return;
+		}
 		const col = Math.floor( selectedIndex / rows );
 		const row = selectedIndex % rows;
 		const cell =
@@ -248,13 +259,20 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 				? document.getElementById( `${ chartId }-cell-${ col }-${ row }` )
 				: null;
 		const rect = cell?.getBoundingClientRect();
-		const bounds = containerBoundsRef.current;
 		showTooltip( {
-			tooltipLeft: rect ? rect.left + rect.width / 2 - bounds.left : 0,
-			tooltipTop: rect ? rect.top + rect.height / 2 - bounds.top : 0,
+			tooltipLeft: rect ? rect.left + rect.width / 2 - origin.left : 0,
+			tooltipTop: rect ? rect.top + rect.height / 2 - origin.top : 0,
 			tooltipData: buildTooltipData( col, row ),
 		} );
-	}, [ selectedIndex, withTooltips, rows, chartId, buildTooltipData, showTooltip ] );
+	}, [
+		selectedIndex,
+		withTooltips,
+		rows,
+		chartId,
+		buildTooltipData,
+		showTooltip,
+		getTooltipOrigin,
+	] );
 
 	const defaultRenderTooltip = useCallback(
 		( info: HeatmapTooltipData ) => (
@@ -296,7 +314,6 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		: `minmax(${ minCellHeight ?? 0 }px, ${ maxCellHeight ? `${ maxCellHeight }px` : '1fr' })`;
 	const gridStyle: Record< string, string | number > = {
 		'--a8c-charts-color-heatmap-primary': primaryColorHex,
-		'--a8c-charts-color-heatmap-background': theme.backgroundColor,
 		gridTemplateColumns: `auto repeat(${ columns }, ${ columnTrack })`,
 		gridTemplateRows: `auto repeat(${ rows }, ${ rowTrack })`,
 	};
@@ -472,11 +489,11 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 						} ) }
 					</div>
 					{ withTooltips && tooltipOpen && tooltipData && (
-						<TooltipInPortal top={ tooltipTop } left={ tooltipLeft }>
-							<div className={ CHART_SCOPE_CLASS } role="tooltip" tabIndex={ -1 }>
+						<BoundedTooltip top={ tooltipTop } left={ tooltipLeft }>
+							<div className={ standaloneScopeClass } role="tooltip" tabIndex={ -1 }>
 								{ ( renderTooltip ?? defaultRenderTooltip )( tooltipData ) }
 							</div>
-						</TooltipInPortal>
+						</BoundedTooltip>
 					) }
 				</ChartLayout>
 			</ChartInstanceContext.Provider>

package/src/charts/heatmap-chart/private/build-calendar-data.ts

@@ -53,6 +53,9 @@ const toDate = ( point: DataPointDate ): Date | null => {
 	return null;
 };
 
+// Labels stay English on the browser's calendar, unlike the time axis: this is a
+// plain function the host calls outside the provider, so `GlobalChartsProvider`'s
+// `locale` and `timeZone` cannot reach it. CHARTS-266 has the detail.
 export const buildCalendarHeatmapData = (
 	series: DataPointDate[],
 	options: {

package/src/charts/heatmap-chart/private/heatmap-legend.tsx

@@ -15,7 +15,7 @@ export interface HeatmapLegendProps {
 
 export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel, moreLabel } ) => {
 	const context = useContext( HeatmapContext );
-	const { legend, backgroundColor } = useGlobalChartsTheme();
+	const { legend } = useGlobalChartsTheme();
 	if ( ! context ) {
 		return null;
 	}
@@ -24,7 +24,11 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel,
 
 	return (
 		<Stack direction="row" gap="xs" align="center">
-			<Text variant="body-sm" style={ labelStyle }>
+			<Text
+				variant="body-sm"
+				className={ styles[ 'heatmap-chart__legend-label' ] }
+				style={ labelStyle }
+			>
 				{ lessLabel ?? __( 'Less', 'jetpack-charts' ) }
 			</Text>
 			<Stack direction="row" gap="xs">
@@ -38,7 +42,6 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel,
 							style={
 								{
 									'--a8c-charts-color-heatmap-primary': primaryColorHex,
-									'--a8c-charts-color-heatmap-background': backgroundColor,
 									'--a8c-charts-heatmap-cell-intensity': intensity,
 								} as CSSProperties
 							}
@@ -46,7 +49,11 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel,
 					);
 				} ) }
 			</Stack>
-			<Text variant="body-sm" style={ labelStyle }>
+			<Text
+				variant="body-sm"
+				className={ styles[ 'heatmap-chart__legend-label' ] }
+				style={ labelStyle }
+			>
 				{ moreLabel ?? __( 'More', 'jetpack-charts' ) }
 			</Text>
 		</Stack>

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

@@ -352,24 +352,21 @@ describe( 'HeatmapChart', () => {
 		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#abcdef' );
 	} );
 
-	test( 'resolves primaryColor from the chart theme', () => {
-		render(
-			<GlobalChartsProvider theme={ { heatmapChart: { primaryColor: '#0a0b0c' } } }>
-				<HeatmapChart width={ 500 } height={ 300 } data={ data } />
-			</GlobalChartsProvider>
-		);
-		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#0a0b0c' );
-	} );
+	test( 'falls back to the first palette slot when no primaryColor prop is set', () => {
+		const scope = document.createElement( 'div' );
+		scope.style.setProperty( '--a8c-charts-color-series-1', '#0a0b0c' );
+		document.body.appendChild( scope );
 
-	test( 'falls back to the palette colors[0] when no prop or theme primaryColor is set', () => {
 		render(
-			<GlobalChartsProvider theme={ { colors: [ '#0a0b0c' ] } }>
+			<GlobalChartsProvider>
 				<HeatmapChart width={ 500 } height={ 300 } data={ data } />
-			</GlobalChartsProvider>
+			</GlobalChartsProvider>,
+			{ container: scope }
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
 		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#0a0b0c' );
+
+		document.body.removeChild( scope );
 	} );
 
 	test( 'the unresponsive export pins explicit width and height', () => {
@@ -393,3 +390,45 @@ describe( 'HeatmapChart', () => {
 		expect( chart ).not.toHaveStyle( { height: '300px' } );
 	} );
 } );
+
+// Chart container at (100, 50); the tooltip box measures 120x40. Everything
+// else the charts measure (wrapper, clipping lookups) reports the container.
+const mockRects = () =>
+	jest.spyOn( Element.prototype, 'getBoundingClientRect' ).mockImplementation( function (
+		this: Element
+	) {
+		const box = this.classList.contains( 'visx-tooltip' );
+		return {
+			left: box ? 0 : 100,
+			top: box ? 0 : 50,
+			width: box ? 120 : 400,
+			height: box ? 40 : 300,
+			right: box ? 120 : 500,
+			bottom: box ? 40 : 350,
+			x: box ? 0 : 100,
+			y: box ? 0 : 50,
+			toJSON: () => ( {} ),
+		} as DOMRect;
+	} );
+
+describe( 'HeatmapChart tooltip position', () => {
+	afterEach( () => {
+		jest.restoreAllMocks();
+	} );
+
+	test( 'places the box relative to the chart root, at the pointer plus the offsets', async () => {
+		mockRects();
+		renderChart( { withTooltips: true, rowLabels: [ 'Mon', 'Tue', 'Wed' ] } );
+
+		await userEvent.setup().pointer( {
+			target: screen.getAllByTestId( 'heatmap-cell' )[ 0 ],
+			coords: { clientX: 180, clientY: 140 },
+		} );
+
+		// (180, 140) is (80, 90) inside the root; the box adds 10px each way.
+		await expect( screen.findByRole( 'tooltip' ) ).resolves.toBeInTheDocument();
+		expect( screen.getByTestId( 'bounded-tooltip' ) ).toHaveStyle( {
+			transform: 'translate(90px, 100px)',
+		} );
+	} );
+} );

package/src/charts/heatmap-chart/types.ts

@@ -69,8 +69,8 @@ export interface HeatmapChartProps
 	/** Floor a cell's height (px) in non-compact mode; see `minCellWidth`. */
 	minCellHeight?: number;
 	/**
-	 * Color the cell scale interpolates toward at the highest value
-	 * (this prop > theme `heatmapChart.primaryColor` > palette `colors[0]`).
+	 * Color the cell scale interpolates toward at the highest value. Defaults to the
+	 * first series palette slot, `--a8c-charts-color-series-1`.
 	 */
 	primaryColor?: string;
 	renderTooltip?: ( data: HeatmapTooltipData ) => ReactNode;

package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts

@@ -13,8 +13,8 @@ export const SUBPIXEL_TOLERANCE = 0.5;
  * Counts how many leading rows fit inside the content container.
  *
  * Rows are read from the DOM rather than derived from constants: row height
- * depends on the theme's row gap, label wrapping, and whatever a caller renders
- * as a label, so any restated number would drift.
+ * depends on `--a8c-charts-dimension-leaderboard-row-gap`, label wrapping, and
+ * whatever a caller renders as a label, so any restated number would drift.
  *
  * Every row is a direct grid child marked with `data-row-index`; interactive rows
  * use a button wrapper and non-interactive rows use a div wrapper.

package/src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts

@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import { useMemo } from 'react';
-import { useGlobalChartsTheme, useGlobalChartsContext } from '../../../providers';
+import { useGlobalChartsContext } from '../../../providers';
 import type { BaseLegendItem } from '../../../components/legend';
 import type { LeaderboardEntry } from '../../../types';
 
@@ -35,7 +35,6 @@ export function useLeaderboardLegendItems( {
 		comparison?: string;
 	};
 } ): BaseLegendItem[] {
-	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
 	const { getElementStyles } = useGlobalChartsContext();
 
 	return useMemo( () => {
@@ -48,7 +47,7 @@ export function useLeaderboardLegendItems( {
 		// Add current period legend item
 		const { color: resolvedPrimaryColor } = getElementStyles( {
 			index: 0,
-			overrideColor: primaryColor || leaderboardChartSettings.primaryColor,
+			overrideColor: primaryColor,
 		} );
 
 		items.push( {
@@ -60,7 +59,7 @@ export function useLeaderboardLegendItems( {
 		if ( withComparison && ! withOverlayLabel ) {
 			const { color: resolvedSecondaryColor } = getElementStyles( {
 				index: 1,
-				overrideColor: secondaryColor || leaderboardChartSettings.secondaryColor,
+				overrideColor: secondaryColor,
 			} );
 
 			items.push( {
@@ -76,7 +75,6 @@ export function useLeaderboardLegendItems( {
 		secondaryColor,
 		withComparison,
 		legendLabels,
-		leaderboardChartSettings,
 		getElementStyles,
 		withOverlayLabel,
 	] );