@automattic/charts 2.0.1 → 3.1.0

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

@@ -1,16 +1,18 @@
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import { type FC, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
+import { type FC, useRef, useMemo, useEffect, useState, useCallback, useContext } from 'react';
 import { usePrefersReducedMotion } from '../../hooks';
 import {
 	GlobalChartsProvider,
 	GlobalChartsContext,
+	ChartScopeContext,
 	useChartId,
 	useChartRegistration,
 	useGlobalChartsTheme,
 	useGlobalChartsContext,
 } from '../../providers';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import { formatPercentage, hexToRgba } from '../../utils';
 import styles from './conversion-funnel-chart.module.scss';
 import { useFunnelSelection } from './private';
@@ -55,6 +57,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 	const { getElementStyles, isColorPaletteResolved } = useGlobalChartsContext();
 	const chartRef = useRef< HTMLDivElement >( null );
 	const selectedBarRef = useRef< HTMLDivElement | null >( null );
+	const [ scopeNode, setScopeNode ] = useState< HTMLElement | null >( null );
 
 	// Use @visx/tooltip hooks for tooltip positioning
 	const { tooltipData, tooltipLeft, tooltipTop, tooltipOpen, showTooltip, hideTooltip } =
@@ -74,6 +77,20 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		scroll: true,
 	} );
 
+	// `useTooltipInPortal` returns a fresh `containerRef` closure on every render, so depending on it directly would give this callback a new identity every render — React then detaches and reattaches the ref on every commit, flushing the scope context to null and back. Reading it through a ref keeps the callback's identity genuinely stable.
+	const portalContainerRefRef = useRef( portalContainerRef );
+	useEffect( () => {
+		portalContainerRefRef.current = portalContainerRef;
+	}, [ portalContainerRef ] );
+
+	// Stable identity so React doesn't detach/reattach (and re-render the scope context) on every commit. Keep all three assignments, in the same order, and keep it firing on unmount (node === null).
+	const setChartRef = useCallback( ( node: HTMLDivElement | null ) => {
+		// Set containerRef for @visx coordinate system
+		portalContainerRefRef.current( node );
+		chartRef.current = node;
+		setScopeNode( node );
+	}, [] );
+
 	// Wrapper to clear selectedBarRef after clearing selection
 	const clearSelectionAndRef = useCallback( () => {
 		clearSelection();
@@ -303,6 +320,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				align="center"
 				justify="center"
 				data-testid="conversion-funnel-chart"
+				ref={ setScopeNode }
 				className={ clsx(
 					styles[ 'conversion-funnel-chart' ],
 					loading && styles[ 'conversion-funnel-chart--loading' ],
@@ -326,11 +344,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				direction="column"
 				gap="xl"
 				data-testid="conversion-funnel-chart"
-				ref={ node => {
-					// Set containerRef for @visx coordinate system
-					portalContainerRef( node );
-					chartRef.current = node;
-				} }
+				ref={ setChartRef }
 				className={ clsx(
 					styles[ 'conversion-funnel-chart' ],
 					loading && styles[ 'conversion-funnel-chart--loading' ],
@@ -338,89 +352,96 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 				) }
 				style={ { ...style, height: resolvedHeight } }
 			>
-				{ /* Main Metric */ }
-				{ renderMainMetric ? (
-					renderMainMetric( {
-						mainRate,
-						changeIndicator,
-						className: styles[ 'main-metric' ],
-						changeColor,
-					} )
-				) : (
-					<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
-						{ renderDefaultMainMetric() }
-					</Stack>
-				) }
-
-				{ /* Funnel Steps */ }
-				<Stack direction="row" align="flex-end" gap="lg" className={ styles[ 'funnel-container' ] }>
-					{ steps.map( ( step, index ) => {
-						const barHeight = ( step.rate / maxRate ) * 100;
-						const { isBlurred } = getStepState( step.id );
-
-						return (
-							<Stack
-								key={ step.id }
-								direction="column"
-								data-testid="funnel-step"
-								className={ clsx(
-									styles[ 'funnel-step' ],
-									isColorPaletteResolved && styles[ 'funnel-step--animated' ],
-									isBlurred && styles[ 'funnel-step--blurred' ]
-								) }
-								gap="xl"
-							>
-								{ /* Step Label and Rate */ }
-								<Stack direction="column" gap="xs">
-									{ renderStepLabel ? (
-										renderStepLabel( {
-											step,
-											index,
-											className: styles[ 'step-label' ],
-										} )
-									) : (
-										<span className={ styles[ 'step-label' ] }>{ step.label }</span>
-									) }
-									{ renderStepRate ? (
-										renderStepRate( {
-											step,
-											index,
-											className: styles[ 'step-rate' ],
-										} )
-									) : (
-										<span className={ styles[ 'step-rate' ] }>
-											{ formatPercentage( step.rate ) }
-										</span>
-									) }
-								</Stack>
-
-								{ /* Funnel Bar */ }
+				<ChartScopeContext.Provider value={ scopeNode }>
+					{ /* Main Metric */ }
+					{ renderMainMetric ? (
+						renderMainMetric( {
+							mainRate,
+							changeIndicator,
+							className: styles[ 'main-metric' ],
+							changeColor,
+						} )
+					) : (
+						<Stack direction="row" align="baseline" gap="sm" className={ styles[ 'main-metric' ] }>
+							{ renderDefaultMainMetric() }
+						</Stack>
+					) }
+
+					{ /* Funnel Steps */ }
+					<Stack
+						direction="row"
+						align="flex-end"
+						gap="lg"
+						className={ styles[ 'funnel-container' ] }
+					>
+						{ steps.map( ( step, index ) => {
+							const barHeight = ( step.rate / maxRate ) * 100;
+							const { isBlurred } = getStepState( step.id );
+
+							return (
 								<Stack
+									key={ step.id }
 									direction="column"
-									justify="flex-end"
-									className={ styles[ 'bar-container' ] }
-									onClick={ stepHandlers.get( step.id )?.onClick }
-									onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
-									role="button"
-									tabIndex={ isBlurred ? -1 : 0 }
-									aria-label={ step.label }
-									style={ { backgroundColor: barBackgroundColor } }
+									data-testid="funnel-step"
+									className={ clsx(
+										styles[ 'funnel-step' ],
+										isColorPaletteResolved && styles[ 'funnel-step--animated' ],
+										isBlurred && styles[ 'funnel-step--blurred' ]
+									) }
+									gap="xl"
 								>
-									<div
-										className={ clsx( styles[ 'funnel-bar' ], {
-											[ styles[ 'funnel-bar--animated' ] ]:
-												animation && ! loading && ! prefersReducedMotion,
-										} ) }
-										style={ {
-											height: `${ barHeight }%`,
-											backgroundColor: barColor,
-										} }
-									/>
+									{ /* Step Label and Rate */ }
+									<Stack direction="column" gap="xs">
+										{ renderStepLabel ? (
+											renderStepLabel( {
+												step,
+												index,
+												className: styles[ 'step-label' ],
+											} )
+										) : (
+											<span className={ styles[ 'step-label' ] }>{ step.label }</span>
+										) }
+										{ renderStepRate ? (
+											renderStepRate( {
+												step,
+												index,
+												className: styles[ 'step-rate' ],
+											} )
+										) : (
+											<span className={ styles[ 'step-rate' ] }>
+												{ formatPercentage( step.rate ) }
+											</span>
+										) }
+									</Stack>
+
+									{ /* Funnel Bar */ }
+									<Stack
+										direction="column"
+										justify="flex-end"
+										className={ styles[ 'bar-container' ] }
+										onClick={ stepHandlers.get( step.id )?.onClick }
+										onKeyDown={ stepHandlers.get( step.id )?.onKeyDown }
+										role="button"
+										tabIndex={ isBlurred ? -1 : 0 }
+										aria-label={ step.label }
+										style={ { backgroundColor: barBackgroundColor } }
+									>
+										<div
+											className={ clsx( styles[ 'funnel-bar' ], {
+												[ styles[ 'funnel-bar--animated' ] ]:
+													animation && ! loading && ! prefersReducedMotion,
+											} ) }
+											style={ {
+												height: `${ barHeight }%`,
+												backgroundColor: barColor,
+											} }
+										/>
+									</Stack>
 								</Stack>
-							</Stack>
-						);
-					} ) }
-				</Stack>
+							);
+						} ) }
+					</Stack>
+				</ChartScopeContext.Provider>
 			</Stack>
 
 			{ /* Tooltip Portal */ }
@@ -446,7 +467,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 							key={ Math.random() }
 							top={ tooltipTop }
 							left={ tooltipLeft }
-							className={ styles[ 'tooltip-wrapper' ] }
+							className={ clsx( CHART_SCOPE_CLASS, styles[ 'tooltip-wrapper' ] ) }
 						>
 							{ tooltipContent }
 						</TooltipInPortal>

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

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+import { useContext } from 'react';
+import { ChartScopeContext } from '../../../providers/chart-scope';
+import ConversionFunnelChart from '../conversion-funnel-chart';
+import type { FunnelStep } from '../types';
+
+const steps: FunnelStep[] = [
+	{ id: 'sessions', label: 'Sessions', rate: 100, count: 10000 },
+	{ id: 'purchase', label: 'Purchase', rate: 10.3, count: 1030 },
+];
+
+const ScopeProbe = () => {
+	const scopeNode = useContext( ChartScopeContext );
+	return <span data-testid="scope-probe">{ scopeNode ? 'has-scope' : 'no-scope' }</span>;
+};
+
+const renderScopeProbe = () => <ScopeProbe />;
+
+describe( 'ConversionFunnelChart chart scope', () => {
+	it( 'publishes a non-null scope node after transitioning from empty to populated steps', () => {
+		// The normal loading pattern: steps arrives empty first (empty-state branch renders), then populated (main branch renders). The scope node must be republished on that transition, not frozen at whatever the first mount saw.
+		const { rerender } = render(
+			<ConversionFunnelChart mainRate={ 0 } steps={ [] } renderMainMetric={ renderScopeProbe } />
+		);
+
+		rerender(
+			<ConversionFunnelChart
+				mainRate={ 10.3 }
+				steps={ steps }
+				renderMainMetric={ renderScopeProbe }
+			/>
+		);
+
+		expect( screen.getByTestId( 'scope-probe' ) ).toHaveTextContent( 'has-scope' );
+	} );
+} );

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

@@ -1,3 +1,11 @@
 .container {
 	position: relative;
+
+	// 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
+	// breaks even a short label across lines. Sizing to content keeps each line
+	// whole and grows the box instead.
+	:global(.google-visualization-tooltip) {
+		white-space: nowrap;
+	}
 }

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

@@ -8,7 +8,12 @@ import { Chart, type GoogleChartPackages, type ReactGoogleChartEvent } from 'rea
 /**
  * Internal dependencies
  */
-import { GlobalChartsContext, GlobalChartsProvider, useGlobalChartsContext } from '../../providers';
+import {
+	GlobalChartsContext,
+	GlobalChartsProvider,
+	useChartScopeElement,
+	useGlobalChartsContext,
+} from '../../providers';
 import { lightenHexColor, normalizeColorToHex } from '../../utils/color-utils';
 import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { sanitizeHtml } from '../../utils/sanitize-html';
@@ -146,6 +151,7 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 			backgroundColor,
 		},
 	} = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const containerRef = useRef< HTMLDivElement >( null );
 	const reportedErrorIdsRef = useRef< Set< string > >( new Set() );
 
@@ -204,11 +210,13 @@ const GeoChartInternal: FC< GeoChartProps > = ( {
 	// Google charts doesn't accept CSS variables, so we need to convert them to hex colors
 	const fullColorHex = getElementStyles( { index: 0 } ).color;
 	const lightColorHex = lightenHexColor( fullColorHex, 0.8 );
-	// Use normalizeColorToHex to ensure HSL/RGB values from CSS variables are converted to hex
+	// 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, null, resolveCssVariable ) || DEFAULT_BACKGROUND_COLOR;
+		normalizeColorToHex( backgroundColor, scopeElement, resolveCssVariable ) ||
+		DEFAULT_BACKGROUND_COLOR;
 	const defaultFillColorHex =
-		normalizeColorToHex( featureFillColor, null, resolveCssVariable ) || DEFAULT_FEATURE_FILL_COLOR;
+		normalizeColorToHex( featureFillColor, scopeElement, resolveCssVariable ) ||
+		DEFAULT_FEATURE_FILL_COLOR;
 
 	// Identify HTML tooltip column indices and sanitize their content to prevent XSS.
 	const sanitizedData = useMemo( () => {

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

@@ -19,13 +19,17 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 
 .heatmap-chart__empty {
 	padding: var(--wpds-dimension-padding-lg, 16px);
-	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 }
 
 // Track template is set inline because CSS `repeat()` won't take a `var()`
 // count. ARIA rows are `display: contents` so their cells join this grid.
 .heatmap-chart__grid {
 	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));
 	flex: 1 1 0;
 	width: 100%;
@@ -35,7 +39,7 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	&:focus-visible {
 		outline:
 			$focus-ring-width solid
-			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 		outline-offset: 2px;
 		border-radius: var(--wpds-border-radius-sm, 2px);
 	}
@@ -63,7 +67,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, var(--wpds-color-foreground-content-neutral-weak, #707070));
+	color: var(--a8c-charts-color-label-secondary);
 	font-size: var(--wpds-typography-font-size-xs, 11px);
 	white-space: nowrap;
 	overflow: visible;
@@ -87,9 +91,9 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	justify-content: center;
 	min-width: 0;
 	min-height: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
+	border-radius: var(--a8c-charts-border-radius-cell);
 	// Empty (no-data) default; cells with a value override it below.
-	background: var(--a8c-charts-color-track, var(--wpds-color-background-track-neutral-weak, #f0f0f0));
+	background: var(--a8c-charts-color-track);
 }
 
 // An empty grid slot (calendar ragged edges): keeps its track but paints and
@@ -99,6 +103,15 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	pointer-events: none;
 }
 
+// Grid filler: keeps its slot so the grid reads as continuous, but stands for a
+// day nothing was measured for — so it captures no pointer, and its track is
+// faded to keep it apart from a measured day that simply scored zero. Mixed
+// towards `transparent` rather than a lighter grey so it holds in either theme.
+.heatmap-chart__cell--placeholder {
+	pointer-events: none;
+	background: color-mix(in sRGB, var(--a8c-charts-color-track) 45%, transparent);
+}
+
 // Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
 // an empty cell.
 .heatmap-chart__cell--filled {
@@ -108,24 +121,24 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 .heatmap-chart__cell--selected {
 	outline:
 		$focus-ring-width solid
-		var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+		var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
 	outline-offset: calc(-1 * #{$focus-ring-width});
 }
 
 .heatmap-chart__cell-value {
-	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+	color: var(--a8c-charts-color-label);
 	font-size: var(--wpds-typography-font-size-md, 13px);
 }
 
 // Light text on fills dark enough to out-contrast dark text (decided in JS from
 // the blended fill luminance).
 .heatmap-chart__cell--strong .heatmap-chart__cell-value {
-	color: var(--a8c-charts-color-label-inverse, var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0));
+	color: var(--a8c-charts-color-label-inverse);
 }
 
 .heatmap-chart__legend-swatch {
 	width: var(--wpds-dimension-size-3xs, 12px);
 	height: var(--wpds-dimension-size-3xs, 12px);
-	border-radius: var(--wpds-border-radius-sm, 2px);
+	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));
 }

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

@@ -6,9 +6,11 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'r
 import {
 	GlobalChartsProvider,
 	useChartId,
+	useChartScopeElement,
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
+import { CHART_SCOPE_CLASS } from '../../styles/chart-scope-class';
 import { attachSubComponents } from '../../utils';
 import {
 	isValidHexColor,
@@ -16,10 +18,11 @@ import {
 	normalizeColorToHex,
 	prefersLightText,
 } from '../../utils/color-utils';
+import { resolveCssVariable } from '../../utils/resolve-css-var';
 import { Center } from '../private/center';
 import { useChartChildren } from '../private/chart-composition';
+import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
-import { SingleChartContext } from '../private/single-chart-context';
 import { withResponsive } from '../private/with-responsive';
 import styles from './heatmap-chart.module.scss';
 import {
@@ -58,7 +61,8 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	children,
 } ) => {
 	const chartId = useChartId( providedChartId );
-	const { getElementStyles, resolveThemeColor, theme } = useGlobalChartsContext();
+	const { getElementStyles, theme } = useGlobalChartsContext();
+	const scopeElement = useChartScopeElement();
 	const { heatmapChart: heatmapChartSettings } = theme;
 	const { nonLegendChildren } = useChartChildren( children, 'HeatmapChart' );
 
@@ -79,9 +83,12 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		overrideColor: primaryColor || heatmapChartSettings.primaryColor,
 	} );
 
-	// Resolve the background in the provider's theme scope so the blended-fill text
-	// color tracks a themed (e.g. dark) background.
-	const chartBackgroundHex = resolveThemeColor( theme.backgroundColor );
+	// 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.
+	const chartBackgroundHex = normalizeColorToHex(
+		theme.backgroundColor,
+		scopeElement,
+		resolveCssVariable
+	);
 
 	// Choose text color from the blended fill, not the raw value.
 	// If either color cannot resolve to hex, keep dark text.
@@ -129,8 +136,13 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		hideTooltip();
 	}, [ hideTooltip ] );
 
-	const isCellHidden = useCallback(
-		( col: number, row: number ) => data[ col ]?.data[ row ]?.hidden === true,
+	// Both empty-slot kinds are skipped by navigation: `hidden` paints nothing,
+	// `placeholder` paints an empty cell, and neither has a value to report.
+	const isCellInert = useCallback(
+		( col: number, row: number ) => {
+			const cell = data[ col ]?.data[ row ];
+			return cell?.hidden === true || cell?.placeholder === true;
+		},
 		[ data ]
 	);
 
@@ -156,7 +168,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 				// Start at the first navigable cell (a calendar's leading edge
 				// slots may be hidden).
 				for ( let index = 0; index < columns * rows; index++ ) {
-					if ( ! isCellHidden( Math.floor( index / rows ), index % rows ) ) {
+					if ( ! isCellInert( Math.floor( index / rows ), index % rows ) ) {
 						setSelectedIndex( index );
 						return;
 					}
@@ -184,7 +196,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 			do {
 				col += stepCol;
 				row += stepRow;
-			} while ( col >= 0 && col < columns && row >= 0 && row < rows && isCellHidden( col, row ) );
+			} while ( col >= 0 && col < columns && row >= 0 && row < rows && isCellInert( col, row ) );
 
 			if ( col < 0 || col >= columns || row < 0 || row >= rows ) {
 				return;
@@ -192,7 +204,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 
 			setSelectedIndex( col * rows + row );
 		},
-		[ rows, columns, selectedIndex, hideTooltip, isCellHidden ]
+		[ rows, columns, selectedIndex, hideTooltip, isCellInert ]
 	);
 
 	const handleCellMouseMove = useCallback(
@@ -306,7 +318,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 
 	return (
 		<HeatmapContext.Provider value={ heatmapContext }>
-			<SingleChartContext.Provider value={ { chartId } }>
+			<ChartInstanceContext.Provider value={ { chartId } }>
 				<ChartLayout
 					legendPosition="bottom"
 					// Legend renders via trailingContent, not the legend slot.
@@ -384,6 +396,24 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 											);
 										}
 
+										// Filler: drawn like an empty cell so the grid fills its
+										// container, but it stands for a day nothing was measured
+										// for, so it reports nothing to a pointer or a screen
+										// reader either.
+										if ( cell?.placeholder ) {
+											return (
+												<div
+													key={ `cell-${ columnIndex }-${ rowIndex }` }
+													data-testid="heatmap-cell-placeholder"
+													aria-hidden="true"
+													className={ clsx(
+														styles[ 'heatmap-chart__cell' ],
+														styles[ 'heatmap-chart__cell--placeholder' ]
+													) }
+												/>
+											);
+										}
+
 										const value = cell?.value ?? null;
 										const present = isPresent( value );
 										const normalized = present ? getNormalizedValue( value, extent ) : 0;
@@ -443,13 +473,13 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 					</div>
 					{ withTooltips && tooltipOpen && tooltipData && (
 						<TooltipInPortal top={ tooltipTop } left={ tooltipLeft }>
-							<div role="tooltip" tabIndex={ -1 }>
+							<div className={ CHART_SCOPE_CLASS } role="tooltip" tabIndex={ -1 }>
 								{ ( renderTooltip ?? defaultRenderTooltip )( tooltipData ) }
 							</div>
 						</TooltipInPortal>
 					) }
 				</ChartLayout>
-			</SingleChartContext.Provider>
+			</ChartInstanceContext.Provider>
 		</HeatmapContext.Provider>
 	);
 };