@automattic/charts 4.2.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "4.2.0",
+	"version": "4.4.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

@@ -37,6 +37,7 @@ import { ChartLayout } from '../private/chart-layout';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
 import { getCurveType } from '../private/time-axis';
 import { buildTimeAxisOptions } from '../private/time-axis-options';
+import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
 import { withResponsive } from '../private/with-responsive';
 import { useXZoom, ZoomResetButton, ZoomSelectionRect, ZoomClip } from '../private/x-zoom';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
@@ -142,6 +143,15 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 			[ seriesWithVisibility ]
 		);
 
+		// A normalized stack (expand/wiggle/silhouette) turns whole-number data into
+		// fractions, so the filter is skipped for every offset but 'none'.
+		const hasWholeNumberValues = useMemo(
+			() =>
+				( ! stacked || stackOffset === 'none' ) &&
+				hasOnlyWholeNumbers( dataSorted.filter( series => isSeriesVisible( series.label ) ) ),
+			[ dataSorted, isSeriesVisible, stacked, stackOffset ]
+		);
+
 		const { tooltipRef, onChartFocus, onChartBlur, onChartKeyDown } = useKeyboardNavigation( {
 			selectedIndex,
 			setSelectedIndex,
@@ -250,8 +260,9 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 				withGlyph: false,
 				glyphSize: 0,
 				collapseGroups: legend.collapseGroups ?? false,
+				comparisonItem: legend.comparisonItem ?? false,
 			} ),
-			[ legend.collapseGroups ]
+			[ legend.collapseGroups, legend.comparisonItem ]
 		);
 		const legendItems = useChartLegendItems( dataSorted, legendOptions, legendShape );
 
@@ -438,15 +449,36 @@ const AreaChartInternal = forwardRef< ChartInstanceRef, AreaChartProps >(
 											{ /* With every series hidden the value scale collapses, so the grid and axes
 											     are dropped while the empty state stands in — otherwise they render
 											     squished at the top. */ }
-											{ ! allSeriesHidden && gridVisibility !== 'none' && (
-												<Grid columns={ false } numTicks={ 4 } />
-											) }
-											{ ! allSeriesHidden && chartOptions.axis.x.display && (
-												<Axis { ...chartOptions.axis.x } />
-											) }
-											{ ! allSeriesHidden && chartOptions.axis.y.display && (
-												<Axis { ...chartOptions.axis.y } />
-											) }
+											<WholeNumberTicks
+												axis="y"
+												numTicks={ chartOptions.axis.y.numTicks }
+												enabled={
+													hasWholeNumberValues &&
+													! chartOptions.axis.y.tickValues &&
+													! options?.yScale?.domain
+												}
+											>
+												{ tickValues => (
+													<>
+														{ ! allSeriesHidden && gridVisibility !== 'none' && (
+															<Grid
+																columns={ false }
+																numTicks={ chartOptions.axis.y.numTicks }
+																{ ...{ tickValues: tickValues ?? chartOptions.axis.y.tickValues } }
+															/>
+														) }
+														{ ! allSeriesHidden && chartOptions.axis.x.display && (
+															<Axis { ...chartOptions.axis.x } />
+														) }
+														{ ! allSeriesHidden && chartOptions.axis.y.display && (
+															<Axis
+																{ ...chartOptions.axis.y }
+																{ ...( tickValues ? { tickValues } : {} ) }
+															/>
+														) }
+													</>
+												) }
+											</WholeNumberTicks>
 
 											{ allSeriesHidden ? (
 												<SvgEmptyState

package/src/charts/area-chart/private/validate-data.ts

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { isInvalidReading } from '../../private/readings';
 import type { DataPoint, DataPointDate, SeriesData } from '../../../types';
 
 /**
@@ -19,9 +20,7 @@ export const validateData = ( data: SeriesData[] ) => {
 	const hasInvalidData = data.some( series =>
 		series.data.some(
 			( point: DataPointDate | DataPoint ) =>
-				isNaN( point.value as number ) ||
-				point.value === null ||
-				point.value === undefined ||
+				isInvalidReading( point.value, { allowMissing: false } ) ||
 				( 'date' in point && point.date && isNaN( point.date.getTime() ) )
 		)
 	);

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

@@ -1,4 +1,4 @@
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, within, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
 import { GlobalChartsProvider } from '../../../providers';
@@ -188,6 +188,77 @@ describe( 'AreaChart', () => {
 		} );
 	} );
 
+	describe( 'Y-Axis Ticks', () => {
+		test( 'labels a whole-number range smaller than the tick count once per whole number', () => {
+			renderWithProvider( {
+				stacked: false,
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 1, 1, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			const ticks = within( chart )
+				.getAllByText( /^-?[\d.,]+$/ )
+				.map( el => el.textContent );
+			expect( ticks.sort() ).toEqual( [ '0', '1' ] );
+		} );
+
+		test( 'keeps every tick on a y domain the caller pinned', () => {
+			renderWithProvider( {
+				stacked: false,
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 0, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+				options: {
+					yScale: { domain: [ 0, 1 ] },
+					axis: { y: { tickFormat: ( value: number ) => `${ Math.round( value * 100 ) }%` } },
+				},
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			expect( within( chart ).getAllByText( /^\d+%$/ ) ).toHaveLength( 6 );
+		} );
+
+		test( 'keeps fractional ticks for a normalized stack even when the data is whole numbers', () => {
+			renderWithProvider( {
+				stacked: true,
+				stackOffset: 'expand',
+				data: [
+					{
+						label: 'Series A',
+						data: [ 0, 1, 1, 0 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+					{
+						label: 'Series B',
+						data: [ 1, 0, 0, 1 ].map( ( value, i ) => ( {
+							date: new Date( 2024, i + 2, 1 ),
+							value,
+						} ) ),
+					},
+				],
+			} );
+
+			const chart = screen.getByRole( 'grid', { name: /area chart/i } );
+			expect( within( chart ).getAllByText( /^-?[\d.,]+$/ ).length ).toBeGreaterThan( 2 );
+		} );
+	} );
+
 	describe( 'Stacking', () => {
 		test( 'is stacked by default', () => {
 			renderWithProvider();

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

@@ -1,4 +1,3 @@
-import { formatNumber } from '@automattic/number-formatters';
 import { PatternLines, PatternCircles, PatternWaves, PatternHexagons } from '@visx/pattern';
 import { Axis, BarSeries, BarGroup, Grid, XYChart } from '@visx/xychart';
 import { __, sprintf } from '@wordpress/i18n';
@@ -22,10 +21,13 @@ import {
 } from '../../providers';
 import { useDefaultHiddenSeries } from '../../providers/chart-context/hooks/use-default-hidden-series';
 import { attachSubComponents } from '../../utils';
+import { warnOnce } from '../../utils/warn-once';
 import { useChartChildren } from '../private/chart-composition';
 import { ChartInstanceContext } from '../private/chart-instance-context';
 import { ChartLayout } from '../private/chart-layout';
+import { formatReading, isInvalidReading } from '../private/readings';
 import { getAllHiddenMessage, SvgEmptyState } from '../private/svg-empty-state';
+import { hasOnlyWholeNumbers, WholeNumberTicks } from '../private/whole-number-ticks';
 import { withResponsive } from '../private/with-responsive';
 import plotStyles from '../private/xy-plot/xy-plot.module.scss';
 import styles from './bar-chart.module.scss';
@@ -33,53 +35,24 @@ import {
 	useBarChartOptions,
 	BandHighlight,
 	BandTooltip,
+	ClassifiedBarSeries,
 	ComparisonBars,
 	DEFAULT_COMPARISON_WIDTH_FACTOR,
 	COMPARISON_INNER_GAP,
 	MAX_GROUP_PADDING,
 	COMPARISON_TICK_GAP_FACTOR,
 	BASE_BAND_PADDING_INNER,
+	countRenderedBars,
+	isBarRendered,
 } from './private';
 import type { ComparisonSeriesEntry } from './private';
-import type {
-	BaseChartProps,
-	DataPointDate,
-	SeriesData,
-	SeriesChartLegendConfig,
-	SeriesVisibilityProps,
-	Optional,
-} from '../../types';
+import type { BarChartProps } from './types';
+import type { DataPointDate, SeriesData, Optional } from '../../types';
 import type { RenderTooltipParams } from '../../visx/types';
 import type { ResponsiveConfig } from '../private/with-responsive';
-import type { FC, ReactNode, ComponentType } from 'react';
-
-export type BandHighlightSelection = {
-	datum: DataPointDate;
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-};
+import type { FC, ComponentType } from 'react';
 
-export interface BarChartProps extends BaseChartProps< SeriesData[] >, SeriesVisibilityProps {
-	/**
-	 * Legend configuration. Supports `collapseGroups` on top of the shared options.
-	 */
-	legend?: SeriesChartLegendConfig;
-	renderTooltip?: ( params: RenderTooltipParams< DataPointDate > ) => ReactNode;
-	/** Place the tooltip beside its category without vertical flipping. */
-	tooltipPlacement?: 'auto' | 'beside';
-	/** Tooltip top anchor in SVG coordinates; negative offsets are supported. */
-	tooltipAnchorTop?: number;
-	orientation?: 'horizontal' | 'vertical';
-	withPatterns?: boolean;
-	showZeroValues?: boolean;
-	/** Highlight the active band across the plot when tooltips are enabled. */
-	withBandHighlight?: boolean;
-	/** Receive active band bounds in SVG coordinates, or null when dismissed. */
-	onBandHighlightChange?: ( selection: BandHighlightSelection | null ) => void;
-	children?: ReactNode;
-}
+export type { BarChartProps, BandHighlightSelection } from './types';
 
 // Base props type with optional responsive properties
 type BarChartBaseProps = Optional< BarChartProps, 'width' | 'height' | 'size' >;
@@ -95,20 +68,18 @@ type BarChartResponsiveComponent = FC< BarChartBaseProps & ResponsiveConfig > &
 
 // Validation function similar to LineChart
 const validateData = ( data: SeriesData[] ) => {
-	if ( ! data?.length ) return 'No data available';
+	if ( ! data?.length ) return __( 'No data available', 'jetpack-charts' );
 
 	const hasInvalidData = data.some( series =>
 		series.data.some(
 			point =>
-				isNaN( point.value as number ) ||
-				point.value === null ||
-				point.value === undefined ||
+				isInvalidReading( point.value, { allowMissing: true } ) ||
 				( ! point.label &&
 					( ! ( 'date' in point && point.date ) || isNaN( point.date.getTime() ) ) )
 		)
 	);
 
-	if ( hasInvalidData ) return 'Invalid data';
+	if ( hasInvalidData ) return __( 'Invalid data', 'jetpack-charts' );
 	return null;
 };
 
@@ -141,6 +112,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	renderTooltip,
 	tooltipPlacement,
 	tooltipAnchorTop,
+	tooltipStyle,
+	barClassName,
 	options = {},
 	orientation = 'vertical',
 	withPatterns = false,
@@ -155,8 +128,16 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	onPointerUp,
 	onDatumActivate,
 } ) => {
+	if ( ! withTooltips && ( withBandHighlight || onBandHighlightChange ) ) {
+		warnOnce(
+			'bar-chart-band-highlight-without-tooltips',
+			'BarChart: withBandHighlight and onBandHighlightChange require withTooltips.'
+		);
+	}
+
 	const legendInteractive = legend.interactive ?? false;
 	const legendCollapseGroups = legend.collapseGroups ?? false;
+	const legendComparisonItem = legend.comparisonItem ?? false;
 	const horizontal = orientation === 'horizontal';
 	const chartId = useChartId( providedChartId );
 	const hiddenSeries = useDefaultHiddenSeries( chartId, defaultHiddenSeries );
@@ -177,8 +158,8 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 	// Create legend items using the reusable hook
 	const legendOptions = useMemo(
-		() => ( { collapseGroups: legendCollapseGroups } ),
-		[ legendCollapseGroups ]
+		() => ( { collapseGroups: legendCollapseGroups, comparisonItem: legendComparisonItem } ),
+		[ legendCollapseGroups, legendComparisonItem ]
 	);
 	const legendItems = useChartLegendItems( dataSorted, legendOptions );
 
@@ -192,12 +173,24 @@ const BarChartInternal: FC< BarChartProps > = ( {
 		[ isSeriesVisible ]
 	);
 
+	const hasWholeNumberValues = useMemo(
+		() => hasOnlyWholeNumbers( dataSorted.filter( isSeriesRendered ) ),
+		[ dataSorted, isSeriesRendered ]
+	);
+
 	const chartOptions = useBarChartOptions(
 		dataWithVisibleZeros,
 		horizontal,
 		options,
 		isSeriesRendered
 	);
+	const valueAxis = horizontal ? chartOptions.axis.x : chartOptions.axis.y;
+	const callerValueDomain = horizontal ? options.xScale?.domain : options.yScale?.domain;
+	const wholeNumberTicksProps = {
+		axis: horizontal ? ( 'x' as const ) : ( 'y' as const ),
+		numTicks: valueAxis.numTicks,
+		enabled: hasWholeNumberValues && ! valueAxis.tickValues && ! callerValueDomain,
+	};
 	const defaultMargin = useChartMargin( height, chartOptions, dataSorted, theme, horizontal );
 	const chartRef = useRef< HTMLDivElement >( null );
 
@@ -404,14 +397,14 @@ const BarChartInternal: FC< BarChartProps > = ( {
 
 			// With a paired comparison value, show the category as the header and one row
 			// per period (primary + comparison).
-			if ( comparisonEntry && comparisonDatum && comparisonDatum.value != null ) {
+			if ( comparisonEntry && comparisonDatum ) {
 				return (
 					<div className={ styles[ 'bar-chart__tooltip' ] }>
 						<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ categoryLabel }</div>
-						{ renderTooltipRow( primaryKey, formatNumber( nearestDatum.value as number ) ) }
+						{ renderTooltipRow( primaryKey, formatReading( nearestDatum.value ) ) }
 						{ renderTooltipRow(
 							comparisonEntry.series.label,
-							formatNumber( comparisonDatum.value as number )
+							formatReading( comparisonDatum.value )
 						) }
 					</div>
 				);
@@ -420,7 +413,7 @@ const BarChartInternal: FC< BarChartProps > = ( {
 			return (
 				<div className={ styles[ 'bar-chart__tooltip' ] }>
 					<div className={ styles[ 'bar-chart__tooltip-header' ] }>{ primaryKey }</div>
-					{ renderTooltipRow( categoryLabel, formatNumber( nearestDatum.value as number ) ) }
+					{ renderTooltipRow( categoryLabel, formatReading( nearestDatum.value ) ) }
 				</div>
 			);
 		},
@@ -482,34 +475,33 @@ const BarChartInternal: FC< BarChartProps > = ( {
 	const createKeyboardHighlightStyle = useCallback( () => {
 		if ( selectedIndex === undefined ) return '';
 
-		// Use only primary entries — comparison series have no .visx-bar elements so
+		// Use only primary entries: comparison series have no .visx-bar elements, so
 		// their indices must not appear in the nth-child selector.
 		// Pattern: [series1[0], series2[0], series3[0], series1[1], series2[1], series3[1], ...]
 		const primaryCount = primaryEntries.length;
-		const maxDataPoints = Math.max( ...primaryEntries.map( e => e.series.data.length ) );
-		const dataPointIndex = Math.floor( selectedIndex / primaryCount );
-		const seriesIndex = selectedIndex % primaryCount;
-
-		// Only highlight if we're within valid bounds
-		if ( dataPointIndex >= maxDataPoints || seriesIndex >= primaryCount ) {
+		if ( ! primaryCount ) {
 			return '';
 		}
-
+		const dataPointIndex = Math.floor( selectedIndex / primaryCount );
+		const seriesIndex = selectedIndex % primaryCount;
 		const seriesData = primaryEntries[ seriesIndex ]?.series;
-		if ( ! seriesData || dataPointIndex >= seriesData.data.length ) {
+		const datum = seriesData?.data[ dataPointIndex ];
+
+		if ( ! seriesData || ! datum || ! isBarRendered( datum ) ) {
 			return '';
 		}
 
-		// Based on the DOM structure analysis:
-		// - All bars are in a single .visx-bar-group
-		// - Bars are ordered as: [series1[0], series1[1], series2[0], series2[1], ...]
-		// - So we need to calculate the actual bar index in the DOM
-		const actualBarIndex = seriesIndex * maxDataPoints + dataPointIndex;
+		// The single .visx-bar-group holds series after series, and only the points visx drew a bar for.
+		const domBarIndex =
+			primaryEntries
+				.slice( 0, seriesIndex )
+				.reduce( ( count, { series } ) => count + countRenderedBars( series.data ), 0 ) +
+			countRenderedBars( seriesData.data.slice( 0, dataPointIndex ) );
 
 		// Use a CSS class selector instead of ID since useId() generates invalid CSS ID characters
 		const generatedStyles = `
 			.bar-chart[data-chart-id="bar-chart-${ chartId }"] .visx-bar-group .visx-bar:nth-child(${
-				actualBarIndex + 1
+				domBarIndex + 1
 			}) {
 				stroke: #005fcc;
 				stroke-width: 2px;
@@ -633,21 +625,33 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										) }
 
 										{ ! allSeriesHidden && (
-											<>
-												{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
-												<Grid
-													columns={ gridVisibility.includes( 'y' ) }
-													rows={ false }
-													numTicks={ 4 }
-													{ ...{ tickValues: chartOptions.axis.x.tickValues } }
-												/>
-												<Grid
-													columns={ false }
-													rows={ gridVisibility.includes( 'x' ) }
-													numTicks={ 4 }
-													{ ...{ tickValues: chartOptions.axis.y.tickValues } }
-												/>
-											</>
+											<WholeNumberTicks { ...wholeNumberTicksProps }>
+												{ valueTicks => (
+													<>
+														{ /* Visx forwards tickValues to its grid primitives but omits it from GridProps. */ }
+														<Grid
+															columns={ gridVisibility.includes( 'y' ) }
+															rows={ false }
+															numTicks={ chartOptions.axis.x.numTicks }
+															{ ...{
+																tickValues:
+																	( horizontal ? valueTicks : undefined ) ??
+																	chartOptions.axis.x.tickValues,
+															} }
+														/>
+														<Grid
+															columns={ false }
+															rows={ gridVisibility.includes( 'x' ) }
+															numTicks={ chartOptions.axis.y.numTicks }
+															{ ...{
+																tickValues:
+																	( horizontal ? undefined : valueTicks ) ??
+																	chartOptions.axis.y.tickValues,
+															} }
+														/>
+													</>
+												) }
+											</WholeNumberTicks>
 										) }
 
 										{ withPatterns && (
@@ -671,7 +675,11 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											</>
 										) }
 
-										{ highlightedBarStyle && <style>{ highlightedBarStyle }</style> }
+										{ highlightedBarStyle && (
+											<style data-testid="bar-chart-keyboard-highlight">
+												{ highlightedBarStyle }
+											</style>
+										) }
 
 										{ allSeriesHidden ? (
 											<SvgEmptyState
@@ -699,19 +707,37 @@ const BarChartInternal: FC< BarChartProps > = ( {
 											resolveFill={ resolveComparisonFill }
 										/>
 
-										<BarGroup padding={ groupPadding }>
-											{ primaryEntries.map( ( { series: seriesData, index } ) => (
-												<BarSeries
-													key={ seriesData?.label }
-													dataKey={ seriesData?.label }
-													data={ seriesData.data as DataPointDate[] }
-													yAccessor={ chartOptions.accessors.yAccessor }
-													xAccessor={ chartOptions.accessors.xAccessor }
-													colorAccessor={ getBarBackground( index ) }
-												/>
-											) ) }
-										</BarGroup>
-										{ /* Do not reorder: for one key the last showTooltip wins, so this must run after BarGroup. */ }
+										{ barClassName ? (
+											<g className="visx-bar-group">
+												{ primaryEntries.map( ( { series: seriesData, index } ) => (
+													<ClassifiedBarSeries
+														key={ seriesData.label }
+														dataKey={ seriesData.label }
+														data={ seriesData.data as DataPointDate[] }
+														xAccessor={ chartOptions.accessors.xAccessor }
+														yAccessor={ chartOptions.accessors.yAccessor }
+														colorAccessor={ getBarBackground( index ) }
+														barClassName={ barClassName }
+														primaryKeys={ primaryKeys }
+														groupPadding={ groupPadding }
+													/>
+												) ) }
+											</g>
+										) : (
+											<BarGroup padding={ groupPadding }>
+												{ primaryEntries.map( ( { series: seriesData, index } ) => (
+													<BarSeries
+														key={ seriesData?.label }
+														dataKey={ seriesData?.label }
+														data={ seriesData.data as DataPointDate[] }
+														yAccessor={ chartOptions.accessors.yAccessor }
+														xAccessor={ chartOptions.accessors.xAccessor }
+														colorAccessor={ getBarBackground( index ) }
+													/>
+												) ) }
+											</BarGroup>
+										) }
+										{ /* Do not reorder: for one key the last showTooltip wins, so this must run after the primary series. */ }
 										{ ( withTooltips || onPointerDown || onPointerUp ) && (
 											<BandTooltip
 												keys={ primaryKeys }
@@ -726,16 +752,29 @@ const BarChartInternal: FC< BarChartProps > = ( {
 										     visx collapses the domain and the axes render squished at the top. Drop them
 										     while the empty state stands in. */ }
 										{ ! allSeriesHidden && (
-											<>
-												<Axis { ...chartOptions.axis.x } />
-												<Axis { ...chartOptions.axis.y } />
-											</>
+											<WholeNumberTicks { ...wholeNumberTicksProps }>
+												{ valueTicks => (
+													<>
+														<Axis
+															{ ...chartOptions.axis.x }
+															{ ...( horizontal && valueTicks ? { tickValues: valueTicks } : {} ) }
+														/>
+														<Axis
+															{ ...chartOptions.axis.y }
+															{ ...( ! horizontal && valueTicks
+																? { tickValues: valueTicks }
+																: {} ) }
+														/>
+													</>
+												) }
+											</WholeNumberTicks>
 										) }
 
 										{ withTooltips && (
 											<AccessibleTooltip
 												tooltipPlacement={ tooltipPlacement }
 												tooltipAnchorTop={ tooltipAnchorTop }
+												style={ tooltipStyle }
 												detectBounds
 												snapTooltipToDatumX
 												snapTooltipToDatumY

package/src/charts/bar-chart/index.ts

@@ -1,2 +1,2 @@
 export { default as BarChart, BarChartUnresponsive } from './bar-chart';
-export type { BarChartProps, BandHighlightSelection } from './bar-chart';
+export type { BarChartProps, BandHighlightSelection } from './types';

package/src/charts/bar-chart/private/band-highlight.tsx

@@ -4,7 +4,7 @@ import { useDeepMemo } from '../../../hooks';
 import { CATALOG_POINTERS } from '../../../providers/chart-context/private/catalog-pointers';
 import type { BandScale } from './band-scale';
 import type { DataPointDate } from '../../../types';
-import type { BandHighlightSelection } from '../bar-chart';
+import type { BandHighlightSelection } from '../types';
 
 type Props = {
 	visible: boolean;
@@ -41,6 +41,8 @@ export function BandHighlight( { visible, horizontal, onChange }: Props ) {
 		}
 		return {
 			datum: nearest.datum as DataPointDate,
+			key: nearest.key,
+			index: nearest.index,
 			x: horizontal ? ( margin?.left ?? 0 ) : position,
 			y: horizontal ? position : ( margin?.top ?? 0 ),
 			width: horizontal ? innerWidth : scale.bandwidth(),

package/src/charts/bar-chart/private/band-tooltip.tsx

@@ -2,7 +2,7 @@ import { DataContext, TooltipContext, useEventEmitter } from '@visx/xychart';
 import { useCallback, useContext, useMemo } from 'react';
 import { createGroupScale } from './band-scale';
 import type { BandScale } from './band-scale';
-import type { BarChartProps } from '../bar-chart';
+import type { BarChartProps } from '../types';
 
 type PointerHandler = NonNullable< Parameters< typeof useEventEmitter >[ 1 ] >;
 type PointerSelection = Parameters< NonNullable< BarChartProps[ 'onPointerUp' ] > >[ 0 ];