@automattic/charts 3.2.0 → 4.1.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 {
@@ -112,22 +113,53 @@ $focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-fo
 	background: color-mix(in sRGB, var(--a8c-charts-color-track) 45%, transparent);
 }
 
+// A roll-up beside the grid, on another scale from it: no fill, its figure
+// always printed and emphasised.
+.heatmap-chart__cell--summary {
+	background: none;
+}
+
+.heatmap-chart__col-label--summary {
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+}
+
+.heatmap-chart__cell--summary .heatmap-chart__cell-value {
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+}
+
+// Compact rows are `compactCellSize` tall, so the figure shrinks to fit them.
+.heatmap-chart__grid--compact .heatmap-chart__cell--summary .heatmap-chart__cell-value {
+	font-size: var(--wpds-typography-font-size-xs);
+	line-height: 1;
+}
+
+// Deliberately on top of the grid gap: one extra gap sets a summary column
+// apart from the data beside it, on cells and label alike, and the auto track
+// grows by the same amount.
+.heatmap-chart__gap-start {
+	margin-inline-start: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs));
+}
+
+.heatmap-chart__gap-end {
+	margin-inline-end: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs));
+}
+
 // 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 +168,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,
@@ -41,6 +43,10 @@ import type { CSSProperties, FC } from 'react';
 // the rendered fill is the primary mixed over the chart background at 0.15 + 0.85 * intensity.
 const CELL_MIX_FLOOR = 0.15;
 
+// One instance, not a `[]` default in the signature: `buildTooltipData` keys on
+// it, and a fresh array per render re-ran the keyboard tooltip effect endlessly.
+const NO_ROW_LABELS: string[] = [];
+
 const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	data,
 	chartId: providedChartId,
@@ -53,7 +59,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	maxCellHeight,
 	minCellWidth,
 	minCellHeight,
-	rowLabels = [],
+	rowLabels = NO_ROW_LABELS,
 	primaryColor,
 	gap = 'md',
 	withTooltips = false,
@@ -69,23 +75,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 +223,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 +252,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 +263,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 ) => (
@@ -294,10 +316,18 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	const rowTrack = compact
 		? 'var(--a8c-charts-dimension-heatmap-cell-size)'
 		: `minmax(${ minCellHeight ?? 0 }px, ${ maxCellHeight ? `${ maxCellHeight }px` : '1fr' })`;
+	// A summary column takes a content-sized track: a roll-up is wider than a
+	// cell, and a shared track would stretch every cell to fit it. `max-content`
+	// as the max keeps the leftover width out of it once the data tracks hit
+	// `maxCellWidth`, where a plain `auto` would absorb it.
+	const columnTracks = data.some( column => column.summary )
+		? data
+				.map( column => ( column.summary ? 'minmax(auto, max-content)' : columnTrack ) )
+				.join( ' ' )
+		: `repeat(${ columns }, ${ columnTrack })`;
 	const gridStyle: Record< string, string | number > = {
 		'--a8c-charts-color-heatmap-primary': primaryColorHex,
-		'--a8c-charts-color-heatmap-background': theme.backgroundColor,
-		gridTemplateColumns: `auto repeat(${ columns }, ${ columnTrack })`,
+		gridTemplateColumns: `auto ${ columnTracks }`,
 		gridTemplateRows: `auto repeat(${ rows }, ${ rowTrack })`,
 	};
 	if ( compact ) {
@@ -305,6 +335,21 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		gridStyle[ '--a8c-charts-dimension-heatmap-cell-size' ] = `${ compactCellSize }px`;
 	}
 
+	// A summary column sits one gap apart from the data on either side; two
+	// summaries side by side share no extra gap.
+	const summaryGaps = ( columnIndex: number ) => {
+		if ( ! data[ columnIndex ]?.summary ) {
+			return {};
+		}
+
+		return {
+			[ styles[ 'heatmap-chart__gap-start' ] ]:
+				columnIndex > 0 && ! data[ columnIndex - 1 ]?.summary,
+			[ styles[ 'heatmap-chart__gap-end' ] ]:
+				columnIndex < columns - 1 && ! data[ columnIndex + 1 ]?.summary,
+		};
+	};
+
 	const activeDescendant =
 		selectedIndex !== undefined
 			? `${ chartId }-cell-${ Math.floor( selectedIndex / rows ) }-${ selectedIndex % rows }`
@@ -357,7 +402,10 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 							{ data.map( ( column, columnIndex ) => (
 								<span
 									key={ `col-${ columnIndex }` }
-									className={ styles[ 'heatmap-chart__col-label' ] }
+									className={ clsx( styles[ 'heatmap-chart__col-label' ], {
+										[ styles[ 'heatmap-chart__col-label--summary' ] ]: column.summary,
+										...summaryGaps( columnIndex ),
+									} ) }
 								>
 									{ column.label }
 								</span>
@@ -416,7 +464,9 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 
 										const value = cell?.value ?? null;
 										const present = isPresent( value );
-										const normalized = present ? getNormalizedValue( value, extent ) : 0;
+										// A summary cell is on another scale, so it takes no fill.
+										const filled = present && ! column.summary;
+										const normalized = filled ? getNormalizedValue( value, extent ) : 0;
 										const flatIndex = columnIndex * rows + rowIndex;
 										const info = buildTooltipData( columnIndex, rowIndex );
 										const accessibleName =
@@ -432,7 +482,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 											<div
 												key={ `cell-${ columnIndex }-${ rowIndex }` }
 												id={ `${ chartId }-cell-${ columnIndex }-${ rowIndex }` }
-												data-testid="heatmap-cell"
+												data-testid={ column.summary ? 'heatmap-cell-summary' : 'heatmap-cell' }
 												role="gridcell"
 												// Focus stays on the grid (aria-activedescendant); cells are
 												// focusable but out of the tab order.
@@ -442,14 +492,16 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 												data-column={ columnIndex }
 												data-row={ rowIndex }
 												className={ clsx( styles[ 'heatmap-chart__cell' ], {
-													[ styles[ 'heatmap-chart__cell--filled' ] ]: present,
+													[ styles[ 'heatmap-chart__cell--filled' ] ]: filled,
 													[ styles[ 'heatmap-chart__cell--strong' ] ]:
-														present && cellHasLightText( normalized ),
+														filled && cellHasLightText( normalized ),
+													[ styles[ 'heatmap-chart__cell--summary' ] ]: column.summary,
+													...summaryGaps( columnIndex ),
 													[ styles[ 'heatmap-chart__cell--selected' ] ]:
 														selectedIndex === flatIndex,
 												} ) }
 												style={
-													present
+													filled
 														? ( {
 																'--a8c-charts-heatmap-cell-intensity': normalized,
 														  } as CSSProperties )
@@ -458,7 +510,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 												onMouseMove={ handleCellMouseMove }
 												onMouseLeave={ handleCellMouseLeave }
 											>
-												{ drawValues && present && (
+												{ ( drawValues || column.summary ) && present && (
 													<span className={ styles[ 'heatmap-chart__cell-value' ] }>
 														{ /* Compact display; tooltip and aria-label keep full precision. */ }
 														{ formatNumberCompact( value ) }
@@ -472,11 +524,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/index.ts

@@ -1,4 +1,5 @@
 export { default as HeatmapChart, HeatmapChartUnresponsive } from './heatmap-chart';
 export { buildCalendarHeatmapData } from './private';
-export type { CalendarHeatmapResult } from './private';
+export { useCalendarHeatmapData } from './use-calendar-heatmap-data';
+export type { CalendarHeatmapOptions, CalendarHeatmapResult } from './private';
 export type { HeatmapChartProps, HeatmapColumn, HeatmapCell, HeatmapTooltipData } from './types';