Line Chart: expose events handling (#42168)

* detectbounds + events handling

* changelog

* add story for events

Author: kangzj

projects/js-packages/charts/changelog/add-add-events-handling-line-chart

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Expose event handling for line chart

projects/js-packages/charts/src/components/line-chart/line-chart.tsx

@@ -104,6 +104,10 @@ const LineChart: FC< LineChartProps > = ( {
 	smoothing = true,
 	renderTooltip = renderDefaultTooltip,
 	options = {},
+	onPointerDown = undefined,
+	onPointerUp = undefined,
+	onPointerMove = undefined,
+	onPointerOut = undefined,
 } ) => {
 	const providerTheme = useChartTheme();
 	const chartId = useId(); // Ensure unique ids for gradient fill.
@@ -177,6 +181,11 @@ const LineChart: FC< LineChartProps > = ( {
 				// xScale and yScale could be set in Axis as well, but they are `scale` props there.
 				xScale={ { type: 'time', ...options?.xScale } }
 				yScale={ { type: 'linear', nice: true, zero: false, ...options?.yScale } }
+				onPointerDown={ onPointerDown }
+				onPointerUp={ onPointerUp }
+				onPointerMove={ onPointerMove }
+				onPointerOut={ onPointerOut }
+				pointerEventsDataKey="nearest"
 			>
 				<AnimatedGrid columns={ false } numTicks={ 4 } />
 				<AnimatedAxis
@@ -219,6 +228,7 @@ const LineChart: FC< LineChartProps > = ( {
 
 				{ withTooltips && (
 					<Tooltip
+						detectBounds
 						snapTooltipToDatumX
 						snapTooltipToDatumY
 						showSeriesGlyphs

projects/js-packages/charts/src/components/line-chart/stories/index.stories.tsx

@@ -219,3 +219,10 @@ CustomTooltips.args = {
 		);
 	},
 };
+
+export const WithPointerEvents: StoryObj< typeof LineChart > = Template.bind( {} );
+WithPointerEvents.args = {
+	...Default.args,
+	// eslint-disable-next-line no-alert
+	onPointerDown: ( { datum } ) => alert( 'Pointer down:' + JSON.stringify( datum ) ),
+};

projects/js-packages/charts/src/types.ts

@@ -1,7 +1,7 @@
 import { Orientation } from '@visx/axis';
 import { ScaleType } from '@visx/scale';
-import { LineStyles } from '@visx/xychart';
-import type { CSSProperties } from 'react';
+import { EventHandlerParams, LineStyles } from '@visx/xychart';
+import type { CSSProperties, PointerEvent } from 'react';
 
 type ValueOf< T > = T[ keyof T ];
 
@@ -125,6 +125,22 @@ export type BaseChartProps< T = DataPoint | DataPointDate > = {
 		bottom?: number;
 		left?: number;
 	};
+	/**
+	 * Callback function for pointer down event
+	 */
+	onPointerDown?: ( event: EventHandlerParams< object > ) => void;
+	/**
+	 * Callback function for pointer down event
+	 */
+	onPointerUp?: ( event: EventHandlerParams< object > ) => void;
+	/**
+	 * Callback function for pointer down event
+	 */
+	onPointerMove?: ( event: EventHandlerParams< object > ) => void;
+	/**
+	 * Callback function for pointer up event
+	 */
+	onPointerOut?: ( event: PointerEvent< Element > ) => void;
 	/**
 	 * Whether to show tooltips on hover. False by default.
 	 */