@automattic/charts 4.7.0 → 4.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.7.0",
+	"version": "4.8.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

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

@@ -12,7 +12,7 @@ import {
 	useCallback,
 } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -509,7 +509,7 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 
 											{ withTooltips && (
 												<>
-													<AccessibleTooltip
+													<XYChartTooltip
 														detectBounds
 														snapTooltipToDatumX
 														// Stacked mode: yAccessor returns raw value, not stacked y — snapping mispositions.

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

@@ -817,7 +817,7 @@ describe( 'AreaChart', () => {
 	} );
 
 	describe( 'Hover glyphs', () => {
-		// Trigger the AccessibleTooltip's keyboard nav so a tooltip is opened
+		// Trigger the XYChartTooltip's keyboard nav so a tooltip is opened
 		// against a known datum index, which is the only reliable way to
 		// surface the visx TooltipContext state in a jsdom environment.
 		const focusFirstDatum = async () => {

package/src/charts/area-chart/test/tooltip-resolution-branches.test.tsx

@@ -19,7 +19,7 @@ type CapturedRenderTooltip = ( params: RenderTooltipParams< DataPointDate > ) =>
 let capturedRenderTooltip: CapturedRenderTooltip | undefined;
 jest.mock( '../../../components/tooltip', () => ( {
 	...jest.requireActual( '../../../components/tooltip' ),
-	AccessibleTooltip: ( props: { renderTooltip?: CapturedRenderTooltip } ) => {
+	XYChartTooltip: ( props: { renderTooltip?: CapturedRenderTooltip } ) => {
 		capturedRenderTooltip = props.renderTooltip;
 		return null;
 	},

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

@@ -4,6 +4,13 @@
 		overflow: visible;
 	}
 
+	// The CSS property, not the attribute: an SVG geometry attribute does
+	// not substitute var().
+	:global(.visx-bar),
+	:global(.bar-chart__comparison-bar) {
+		rx: var(--a8c-charts-border-radius-bar-chart);
+	}
+
 	// Keep the collapsed state in `from` and never on the element: a dropped
 	// animation then fails visible. `both`, not `forwards`, for backwards fill.
 	&--animated rect {

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

@@ -4,7 +4,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import clsx from 'clsx';
 import { useCallback, useContext, useState, useRef, useMemo } from 'react';
 import { Legend, useChartLegendItems } from '../../components/legend';
-import { AccessibleTooltip, useKeyboardNavigation } from '../../components/tooltip';
+import { XYChartTooltip, useKeyboardNavigation } from '../../components/tooltip';
 import {
 	useXYChartTheme,
 	useChartDataTransform,
@@ -242,7 +242,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	);
 
 	// The keyboard-navigation index space and the highlight CSS both stride over primary
-	// bars only; the accessible tooltip must use the same list, or its datum diverges from
+	// bars only; `XYChartTooltip` must use the same list, or its datum diverges from
 	// the highlighted bar once a comparison series shifts the indices.
 	const primarySeries = useMemo(
 		() => primaryEntries.map( ( { series } ) => series ),
@@ -474,7 +474,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			// so a patterned shadow gets the same outline as its primary bar.
 			return `
 			.visx-bar[fill="url(#${ patternId })"],
-			.bar-chart__comparison-bars rect[fill="url(#${ patternId })"] {
+			.bar-chart__comparison-bar[fill="url(#${ patternId })"] {
 				stroke: ${ color };
 				stroke-width: 1;
 				}
@@ -767,23 +767,29 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											<WholeNumberTicks { ...wholeNumberTicksProps }>
 												{ valueTicks => (
 													<>
-														<Axis
-															{ ...chartOptions.axis.x }
-															{ ...( horizontal && valueTicks ? { tickValues: valueTicks } : {} ) }
-														/>
-														<Axis
-															{ ...chartOptions.axis.y }
-															{ ...( ! horizontal && valueTicks
-																? { tickValues: valueTicks }
-																: {} ) }
-														/>
+														{ chartOptions.axis.x.display !== false && (
+															<Axis
+																{ ...chartOptions.axis.x }
+																{ ...( horizontal && valueTicks
+																	? { tickValues: valueTicks }
+																	: {} ) }
+															/>
+														) }
+														{ chartOptions.axis.y.display !== false && (
+															<Axis
+																{ ...chartOptions.axis.y }
+																{ ...( ! horizontal && valueTicks
+																	? { tickValues: valueTicks }
+																	: {} ) }
+															/>
+														) }
 													</>
 												) }
 											</WholeNumberTicks>
 										) }
 
 										{ withTooltips && (
-											<AccessibleTooltip
+											<XYChartTooltip
 												tooltipPlacement={ tooltipPlacement }
 												tooltipAnchorTop={ tooltipAnchorTop }
 												style={ tooltipStyle }

package/src/charts/bar-chart/private/comparison-bars.tsx

@@ -127,6 +127,7 @@ export const ComparisonBars: FC< {
 			rects.push(
 				<rect
 					key={ `${ index }-${ i }` }
+					className="bar-chart__comparison-bar"
 					data-testid={ `bar-chart-comparison-${ index }-${ i }` }
 					x={ rect.x }
 					y={ rect.y }

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

@@ -806,6 +806,31 @@ describe( 'BarChart', () => {
 		);
 	} );
 
+	describe( 'Axis display', () => {
+		test.each( [
+			[ 'vertical', 'x', 'y' ],
+			[ 'vertical', 'y', 'x' ],
+			[ 'horizontal', 'x', 'y' ],
+			[ 'horizontal', 'y', 'x' ],
+		] )( 'skips a hidden axis (%s, hidden %s)', ( orientation, hidden, shown ) => {
+			renderWithTheme( {
+				orientation,
+				options: {
+					axis: {
+						[ hidden ]: { display: false, axisClassName: 'test-hidden-axis' },
+						[ shown ]: { axisClassName: 'test-shown-axis' },
+					},
+				},
+			} );
+			const chart = screen.getByRole( 'grid' );
+
+			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
+			expect( chart.querySelector( '.test-hidden-axis' ) ).toBeNull();
+			// eslint-disable-next-line testing-library/no-node-access -- See the visx node constraint above.
+			expect( chart.querySelector( '.test-shown-axis' ) ).not.toBeNull();
+		} );
+	} );
+
 	describe( 'Grid Visibility', () => {
 		test( 'renders with different grid visibility options', () => {
 			const { rerender } = renderWithTheme( { gridVisibility: 'x' } );

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

@@ -427,7 +427,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 							className={ standaloneScopeClass }
 							style={ tooltipStyle }
 						>
-							{ tooltipContent }
+							<div role="tooltip">{ tooltipContent }</div>
 						</BoundedTooltip>
 					);
 				} )() }

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

@@ -430,6 +430,15 @@ describe( 'ConversionFunnelChart', () => {
 			} );
 		} );
 
+		it( 'exposes the tooltip content with role="tooltip"', async () => {
+			const user = userEvent.setup();
+			renderWithoutTheme( <ConversionFunnelChart { ...defaultProps } /> );
+
+			await user.click( screen.getByRole( 'button', { name: /cart/i } ) );
+
+			expect( screen.getByRole( 'tooltip' ) ).toHaveTextContent( 'Cart' );
+		} );
+
 		it( 'merges tooltipStyle onto the tooltip box', async () => {
 			const user = userEvent.setup();
 			renderWithoutTheme(

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

@@ -3,6 +3,10 @@
 // module, so it needs no runtime cascade and never lands on the DOM.
 $focus-ring-width: var(--wpds-border-width-focus);
 
+// JS sets the ends (getHeatmapScale): 3:1 against background and empty cell at
+// the low end. Unresolved, the floor is 15% of the primary.
+$heatmap-fill: color-mix(in sRGB, var(--a8c-charts-color-heatmap-high, var(--a8c-charts-color-heatmap-primary)) calc(var(--a8c-charts-heatmap-cell-intensity) * 100%), var(--a8c-charts-color-heatmap-low, color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) 15%, var(--a8c-charts-color-background, #fff))));
+
 .heatmap-chart {
 	position: relative;
 	// Keeps the tooltip's z-index inside the chart, as `.xy-plot` does.
@@ -165,10 +169,8 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	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-background, #fff));
+	background: $heatmap-fill;
 }
 
 .heatmap-chart__cell--selected {
@@ -204,7 +206,7 @@ $focus-ring-width: var(--wpds-border-width-focus);
 	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-background, #fff));
+	background: $heatmap-fill;
 }
 
 // One band: the steps butt against each other and only the band's ends round.

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

@@ -13,12 +13,16 @@ import {
 	useGlobalChartsContext,
 	GlobalChartsContext,
 } from '../../providers';
-import { CATALOG_POINTERS } from '../../providers/chart-context/private/catalog-pointers';
+import {
+	BACKGROUND_FALLBACK,
+	CATALOG_POINTERS,
+} from '../../providers/chart-context/private/catalog-pointers';
 import { blendRgb, hexToRgb } from '../../providers/chart-context/private/perceptual-color';
+import { resolveOpaqueHex } from '../../providers/chart-context/private/resolve-opaque-hex';
 import { useStandaloneScopeClass } from '../../providers/chart-scope';
 import { attachSubComponents } from '../../utils';
 import { isValidHexColor, normalizeColorToHex } from '../../utils/color-utils';
-import { createCssVariableResolver, resolveCssVariable } from '../../utils/resolve-css-var';
+import { createCssVariableResolver } from '../../utils/resolve-css-var';
 import { Center } from '../private/center';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartInstanceContext } from '../private/chart-instance-context';
@@ -27,10 +31,12 @@ import { pickLabelTextColorForFill, resolveLabelRoles } from '../private/label-t
 import { withResponsive } from '../private/with-responsive';
 import styles from './heatmap-chart.module.scss';
 import {
+	getHeatmapScale,
 	getValueExtent,
 	getNormalizedValue,
 	HeatmapContext,
 	HeatmapLegend,
+	isEmptyValue,
 	isPresent,
 	resolveColumnGroups,
 } from './private';
@@ -48,10 +54,6 @@ import type { LabelRoles, LabelTextColor } from '../private/label-text-color';
 import type { ResponsiveConfig } from '../private/with-responsive';
 import type { CSSProperties, FC } from 'react';
 
-// Mirrors the color-mix floor in heatmap-chart.module.scss (.heatmap-chart__cell--filled):
-// the rendered fill is the primary mixed over the chart background at 0.15 + 0.85 * intensity.
-const CELL_MIX_FLOOR = 0.15;
-
 // `label` is the stylesheet's default, so it needs no modifier.
 const CELL_VALUE_MODIFIER: Record< LabelTextColor, string | undefined > = {
 	label: undefined,
@@ -125,29 +127,37 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		overrideColor: primaryColor,
 	} );
 
-	// 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(
-		CATALOG_POINTERS.background,
-		scopeElement,
-		resolveCssVariable
-	);
+	// Both read at the scope element, so an override on the chart's own class reaches neither the
+	// fill scale nor the text color (CHARTS-255). See-through counts as white, as for the palette.
+	const resolveAtScope = createCssVariableResolver( scopeElement );
+	const chartBackgroundHex =
+		resolveOpaqueHex( CATALOG_POINTERS.background, resolveAtScope ) ?? BACKGROUND_FALLBACK;
+	const emptyCellHex = resolveOpaqueHex( CATALOG_POINTERS.track, resolveAtScope );
 
-	// Choose text color from the blended fill, not the raw value.
-	// If either color cannot resolve to hex, keep the stylesheet's default role.
+	// If the primary cannot resolve to hex, the stylesheet falls back to its own blend.
 	const primaryHex = normalizeColorToHex( primaryColorHex );
-	const cellMix =
-		isValidHexColor( primaryHex ) && isValidHexColor( chartBackgroundHex )
-			? { primary: hexToRgb( primaryHex ), background: hexToRgb( chartBackgroundHex ) }
-			: null;
+	const scale = useMemo(
+		() =>
+			isValidHexColor( primaryHex )
+				? getHeatmapScale( primaryHex, chartBackgroundHex, emptyCellHex )
+				: null,
+		[ primaryHex, chartBackgroundHex, emptyCellHex ]
+	);
+	const fillVars = useMemo(
+		() => ( {
+			'--a8c-charts-color-heatmap-primary': primaryColorHex,
+			...( scale && {
+				'--a8c-charts-color-heatmap-low': scale.low,
+				'--a8c-charts-color-heatmap-high': scale.high,
+			} ),
+		} ),
+		[ primaryColorHex, scale ]
+	);
+	// Choose text color from the fill the cell paints, mirroring .heatmap-chart__cell--filled.
 	const cellTextColor = ( intensity: number ): LabelTextColor =>
-		cellMix
+		scale
 			? pickLabelTextColorForFill(
-					blendRgb(
-						cellMix.primary,
-						cellMix.background,
-						CELL_MIX_FLOOR + ( 1 - CELL_MIX_FLOOR ) * intensity
-					),
+					blendRgb( hexToRgb( scale.high ), hexToRgb( scale.low ), intensity ),
 					labelRoles,
 					'label'
 				)
@@ -165,8 +175,8 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 
 	const extent = useMemo( () => getValueExtent( data ), [ data ] );
 	const heatmapContext = useMemo< HeatmapContextValue >(
-		() => ( { extent, primaryColorHex } ),
-		[ extent, primaryColorHex ]
+		() => ( { extent, fillVars } ),
+		[ extent, fillVars ]
 	);
 
 	const columns = data.length;
@@ -390,7 +400,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 		)
 		.join( ' ' );
 	const gridStyle: Record< string, string | number > = {
-		'--a8c-charts-color-heatmap-primary': primaryColorHex,
+		...fillVars,
 		gridTemplateColumns: `auto ${ columnTracks }`,
 		gridTemplateRows: `${ hasColumnLabels ? 'auto ' : '' }repeat(${ rows }, ${ rowTrack })${
 			hasGroups ? ' auto' : ''
@@ -542,7 +552,7 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 										const value = cell?.value ?? null;
 										const present = isPresent( value );
 										// A summary cell is on another scale, so it takes no fill.
-										const filled = present && ! column.summary;
+										const filled = present && ! column.summary && ! isEmptyValue( value, extent );
 										const normalized = filled ? getNormalizedValue( value, extent ) : 0;
 										const info = buildTooltipData( columnIndex, rowIndex );
 										const accessibleLabel = `${ cellName( info ) }: ${

package/src/charts/heatmap-chart/private/heatmap-context.ts

@@ -2,8 +2,8 @@ import { createContext } from 'react';
 
 export type HeatmapContextValue = {
 	extent: [ number, number ];
-	/** The resolved primary color (full intensity); the legend mixes toward it in CSS. */
-	primaryColorHex: string;
+	/** The custom properties the fill reads, set on the grid and on each legend swatch. */
+	fillVars: Record< string, string >;
 };
 
 /** Shared by the chart and legend without importing back from `heatmap-chart.tsx`. */

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

@@ -29,7 +29,7 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( {
 	if ( ! context ) {
 		return null;
 	}
-	const { primaryColorHex } = context;
+	const { fillVars } = context;
 	const labelStyle = legend.labelStyles;
 
 	return (
@@ -57,7 +57,7 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( {
 							className={ styles[ 'heatmap-chart__legend-swatch' ] }
 							style={
 								{
-									'--a8c-charts-color-heatmap-primary': primaryColorHex,
+									...fillVars,
 									'--a8c-charts-heatmap-cell-intensity': intensity,
 								} as CSSProperties
 							}

package/src/charts/heatmap-chart/private/heatmap-scale.ts

@@ -0,0 +1,74 @@
+import { MIN_BACKGROUND_CONTRAST } from '../../../providers/chart-context/private/palette-generator';
+import { contrastRatio } from '../../../providers/chart-context/private/perceptual-color';
+import { mixHexColors, relativeLuminance } from '../../../utils/color-utils';
+
+/** Contrast the highest step aims for against the background, so the steps stay apart. */
+export const HEATMAP_HIGH_CONTRAST = 9;
+
+const STEPS = 200;
+
+export type HeatmapScale = {
+	low: string;
+	high: string;
+};
+
+// Measured on the rounded hex the browser paints, so an endpoint never lands under its threshold.
+const firstMeeting = ( from: string, to: string, meets: ( color: string ) => boolean ) => {
+	for ( let step = 0; step <= STEPS; step++ ) {
+		const color = mixHexColors( from, to, step / STEPS );
+		if ( meets( color ) ) {
+			return color;
+		}
+	}
+	return null;
+};
+
+/**
+ * The two ends of the heatmap fill scale: 3:1 against the background and the empty cell at the
+ * low end, toward 9:1 against the background at the high end.
+ *
+ * @param primary    - The resolved primary color, as six-digit hex.
+ * @param background - The resolved chart background, as six-digit hex.
+ * @param emptyCell  - The resolved empty-cell color, as six-digit hex, when it is opaque.
+ * @return The scale ends, as six-digit hex.
+ */
+export const getHeatmapScale = (
+	primary: string,
+	background: string,
+	emptyCell?: string | null
+): HeatmapScale => {
+	const primaryStandsOut = contrastRatio( primary, background ) >= MIN_BACKGROUND_CONTRAST;
+	// The scale deepens to black or white on the primary's own side of the background, so it never
+	// crosses it. A primary too close to the background takes whichever contrasts more.
+	const towardWhite = primaryStandsOut
+		? relativeLuminance( primary ) > relativeLuminance( background )
+		: contrastRatio( '#ffffff', background ) > contrastRatio( '#000000', background );
+	const extreme = towardWhite ? '#ffffff' : '#000000';
+
+	const lowAgainst = ( references: string[] ) => {
+		const meets = ( color: string ) =>
+			references.every( reference => contrastRatio( color, reference ) >= MIN_BACKGROUND_CONTRAST );
+		return (
+			( primaryStandsOut ? firstMeeting( background, primary, meets ) : null ) ??
+			firstMeeting( primary, extreme, meets )
+		);
+	};
+	// Only `high` can miss: black or white tops out near 4.58:1 on a mid-tone background.
+	const high =
+		firstMeeting(
+			primary,
+			extreme,
+			color => contrastRatio( color, background ) >= HEATMAP_HIGH_CONTRAST
+		) ?? extreme;
+
+	// The lowest step sits beside empty cells, so it stands apart from them too, unless an
+	// empty-cell color far from the background would push it past the high end.
+	const againstEmptyCell = emptyCell ? lowAgainst( [ background, emptyCell ] ) : null;
+	const low =
+		againstEmptyCell &&
+		contrastRatio( againstEmptyCell, background ) <= contrastRatio( high, background )
+			? againstEmptyCell
+			: lowAgainst( [ background ] );
+
+	return { low: low ?? extreme, high };
+};

package/src/charts/heatmap-chart/private/index.ts

@@ -1,4 +1,5 @@
-export { getValueExtent, getNormalizedValue, isPresent } from './use-heatmap-colors';
+export { getValueExtent, getNormalizedValue, isEmptyValue, isPresent } from './use-heatmap-colors';
+export { getHeatmapScale } from './heatmap-scale';
 export { HeatmapLegend } from './heatmap-legend';
 export { HeatmapContext } from './heatmap-context';
 export type { HeatmapLegendProps } from './heatmap-legend';

package/src/charts/heatmap-chart/private/use-heatmap-colors.ts

@@ -4,14 +4,16 @@ export const isPresent = ( value: number | null | undefined ): value is number =
 	value !== null && value !== undefined && ! isNaN( value );
 
 /**
- * Get the min and max values from heatmap data, ignoring null/NaN. Summary
- * columns stay out: a roll-up on the scale would flatten every real cell.
+ * Get the min and max values from heatmap data, ignoring null/NaN and the zeros
+ * `isEmptyValue` paints as empty. Summary columns stay out: a roll-up on the
+ * scale would flatten every real cell.
  * @param data - The heatmap columns
  * @return Tuple of [min, max] values
  */
 export const getValueExtent = ( data: HeatmapColumn[] ): [ number, number ] => {
 	let min = Infinity;
 	let max = -Infinity;
+	let hasZero = false;
 	for ( const column of data ) {
 		if ( column.summary ) {
 			continue;
@@ -20,6 +22,10 @@ export const getValueExtent = ( data: HeatmapColumn[] ): [ number, number ] => {
 			if ( ! isPresent( cell.value ) ) {
 				continue;
 			}
+			if ( cell.value === 0 ) {
+				hasZero = true;
+				continue;
+			}
 			if ( cell.value < min ) {
 				min = cell.value;
 			}
@@ -28,17 +34,29 @@ export const getValueExtent = ( data: HeatmapColumn[] ): [ number, number ] => {
 			}
 		}
 	}
+	if ( hasZero && min < 0 ) {
+		max = Math.max( max, 0 );
+	}
 	if ( min === Infinity ) {
 		return [ 0, 0 ];
 	}
 	return [ min, max ];
 };
 
+/**
+ * Whether a value paints as an empty cell: a zero in data with no negatives
+ * counts nothing, so it must not look like the lowest step of activity.
+ *
+ * @param value  - The cell value
+ * @param extent - The extent from `getValueExtent`
+ * @return True when the cell takes the empty-cell color
+ */
+export const isEmptyValue = ( value: number, extent: [ number, number ] ): boolean =>
+	value === 0 && extent[ 0 ] >= 0;
+
 /**
  * Normalize a value to 0–1 within the extent. A flat extent (min === max)
- * maps to 1 — every cell is equally the "highest" — except an all-zero
- * extent, which maps to 0 so a no-activity grid renders at the scale's
- * bottom instead of full intensity.
+ * maps to 1, since every cell is equally the "highest".
  *
  * @param value  - The value to normalize
  * @param extent - Tuple of [min, max] values for the normalization range
@@ -47,7 +65,7 @@ export const getValueExtent = ( data: HeatmapColumn[] ): [ number, number ] => {
 export const getNormalizedValue = ( value: number, extent: [ number, number ] ): number => {
 	const [ min, max ] = extent;
 	if ( min === max ) {
-		return max === 0 ? 0 : 1;
+		return 1;
 	}
 	return Math.min( 1, Math.max( 0, ( value - min ) / ( max - min ) ) );
 };