@octanejs/visx 0.1.0

package/src/xychart/hooks/useDimensions.tsrx

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'octane';
+
+const DEFAULT_DIMS = {
+	width: 0,
+	height: 0,
+	margin: { top: 0, right: 0, bottom: 0, left: 0 },
+};
+
+export type Dimensions = typeof DEFAULT_DIMS;
+
+/** A hook for accessing and setting memoized width, height, and margin chart dimensions. */
+export default function useDimensions(initialDims?: Partial<Dimensions>): [Dimensions, (dims: Dimensions) => void] {
+	const [dimensions, privateSetDimensions] = useState<Dimensions>({
+		width: initialDims?.width == null ? DEFAULT_DIMS.width : initialDims.width,
+		height: initialDims?.height == null ? DEFAULT_DIMS.height : initialDims.height,
+		margin: initialDims?.margin == null ? DEFAULT_DIMS.margin : initialDims.margin,
+	});
+
+	// expose a setter with better memoization logic
+	const publicSetDimensions = useCallback((dims: Dimensions) => {
+		if (
+			dims.width !== dimensions.width || dims.height !== dimensions.height ||
+				dims.margin.left !== dimensions.margin.left ||
+				dims.margin.right !== dimensions.margin.right ||
+				dims.margin.top !== dimensions.margin.top ||
+				dims.margin.bottom !== dimensions.margin.bottom
+		) {
+			privateSetDimensions(dims);
+		}
+	}, [
+		dimensions.width,
+		dimensions.height,
+		dimensions.margin.left,
+		dimensions.margin.right,
+		dimensions.margin.bottom,
+		dimensions.margin.top,
+	]);
+
+	return [dimensions, publicSetDimensions];
+}

package/src/xychart/hooks/useDimensions.tsrx.d.ts

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+declare const DEFAULT_DIMS: {
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+};
+export type Dimensions = typeof DEFAULT_DIMS;
+/** A hook for accessing and setting memoized width, height, and margin chart dimensions. */
+export default function useDimensions(initialDims?: Partial<Dimensions>): [Dimensions, (dims: Dimensions) => void];
+export {};

package/src/xychart/hooks/useEventEmitter.tsrx

@@ -0,0 +1,62 @@
+import type { PointerEvent, FocusEvent } from 'react';
+import { useCallback, useContext, useEffect, useRef } from 'octane';
+import { localPoint } from '@octanejs/visx/event';
+import EventEmitterContext from '../context/EventEmitterContext.tsrx';
+import type { EventEmitterContextType } from '../types';
+
+export type EventType =
+	'pointermove' | 'pointerout' | 'pointerup' | 'pointerdown' | 'focus' | 'blur';
+
+export type HandlerParams = {
+	/** The react PointerEvent or FocusEvent. */
+	event: PointerEvent | FocusEvent;
+	/** Position of the PointerEvent in svg coordinates. */
+	svgPoint: ReturnType<typeof localPoint>;
+	/** The source of the event. This can be anything, but for this package is the name of the component which emitted the event. */
+	source?: string;
+};
+
+export type Handler = (params?: HandlerParams) => void;
+
+/**
+ * Hook for optionally subscribing to a specified EventType,
+ * and returns emitter for emitting events.
+ */
+export default function useEventEmitter(
+	/** Type of event to subscribe to. */
+	eventType?: EventType,
+	/** Handler invoked on emission of EventType event.  */
+	handler?: Handler,
+	/** Optional valid sources for EventType subscription. */
+	allowedSources?: string[],
+) {
+	const emitter = useContext(EventEmitterContext) as EventEmitterContextType | null;
+	const allowedSourcesRef = useRef<string[] | undefined>(undefined);
+	allowedSourcesRef.current = allowedSources; // use ref so allowedSources[] can change without creating new handlers
+
+	// wrap emitter.emit so we can enforce stricter type signature
+	const emit = useCallback((type: EventType, event: HandlerParams['event'], source?: string) => {
+		if (emitter) {
+			emitter.emit<HandlerParams>(type, { event, svgPoint: localPoint(event), source });
+		}
+	}, [emitter]);
+
+	useEffect(() => {
+		if (emitter && eventType && handler) {
+			// register handler, with source filtering as needed
+			const handlerWithSourceFilter: Handler = (params?: HandlerParams) => {
+				if (
+					!allowedSourcesRef.current ||
+						params?.source && allowedSourcesRef.current?.includes(params.source)
+				) {
+					handler(params);
+				}
+			};
+			emitter.on<HandlerParams>(eventType, handlerWithSourceFilter);
+			return () => emitter?.off<HandlerParams>(eventType, handlerWithSourceFilter);
+		}
+		return undefined;
+	}, [emitter, eventType, handler]);
+
+	return emitter ? emit : null;
+}

package/src/xychart/hooks/useEventEmitter.tsrx.d.ts

@@ -0,0 +1,24 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PointerEvent, FocusEvent } from 'react';
+import { localPoint } from '@octanejs/visx/event';
+export type EventType = 'pointermove' | 'pointerout' | 'pointerup' | 'pointerdown' | 'focus' | 'blur';
+export type HandlerParams = {
+    /** The react PointerEvent or FocusEvent. */
+    event: PointerEvent | FocusEvent;
+    /** Position of the PointerEvent in svg coordinates. */
+    svgPoint: ReturnType<typeof localPoint>;
+    /** The source of the event. This can be anything, but for this package is the name of the component which emitted the event. */
+    source?: string;
+};
+export type Handler = (params?: HandlerParams) => void;
+/**
+ * Hook for optionally subscribing to a specified EventType,
+ * and returns emitter for emitting events.
+ */
+export default function useEventEmitter(
+/** Type of event to subscribe to. */
+eventType?: EventType,
+/** Handler invoked on emission of EventType event.  */
+handler?: Handler,
+/** Optional valid sources for EventType subscription. */
+allowedSources?: string[]): ((type: EventType, event: HandlerParams["event"], source?: string) => void) | null;

package/src/xychart/hooks/useEventEmitters.tsrx

@@ -0,0 +1,64 @@
+import type { PointerEvent, FocusEvent } from 'react';
+import { useCallback } from 'octane';
+import useEventEmitter from './useEventEmitter.tsrx';
+
+type PointerEventEmitterParams = {
+	/** Source of the events, e.g., the component name. */
+	source: string;
+	onBlur?: boolean;
+	onFocus?: boolean;
+	onPointerMove?: boolean;
+	onPointerOut?: boolean;
+	onPointerUp?: boolean;
+	onPointerDown?: boolean;
+};
+
+/**
+ * A hook that simplifies creation of handlers for emitting
+ * pointermove, pointerout, and pointerup events to EventEmitterContext.
+ */
+export default function usePointerEventEmitters({
+	source,
+	onPointerOut = true,
+	onPointerMove = true,
+	onPointerUp = true,
+	onPointerDown = true,
+	onFocus = false,
+	onBlur = false,
+}: PointerEventEmitterParams) {
+	const emit = useEventEmitter();
+
+	const emitPointerMove = useCallback(
+		(event: PointerEvent) => emit?.('pointermove', event, source),
+		[emit, source],
+	);
+	const emitPointerOut = useCallback((event: PointerEvent) => emit?.('pointerout', event, source), [
+		emit,
+		source,
+	]);
+	const emitPointerUp = useCallback((event: PointerEvent) => emit?.('pointerup', event, source), [
+		emit,
+		source,
+	]);
+	const emitPointerDown = useCallback(
+		(event: PointerEvent) => emit?.('pointerdown', event, source),
+		[emit, source],
+	);
+	const emitFocus = useCallback((event: FocusEvent) => emit?.('focus', event, source), [
+		emit,
+		source,
+	]);
+	const emitBlur = useCallback((event: FocusEvent) => emit?.('blur', event, source), [
+		emit,
+		source,
+	]);
+
+	return {
+		onPointerMove: onPointerMove ? emitPointerMove : undefined,
+		onFocus: onFocus ? emitFocus : undefined,
+		onBlur: onBlur ? emitBlur : undefined,
+		onPointerOut: onPointerOut ? emitPointerOut : undefined,
+		onPointerUp: onPointerUp ? emitPointerUp : undefined,
+		onPointerDown: onPointerDown ? emitPointerDown : undefined,
+	};
+}

package/src/xychart/hooks/useEventEmitters.tsrx.d.ts

@@ -0,0 +1,25 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { PointerEvent, FocusEvent } from 'react';
+type PointerEventEmitterParams = {
+    /** Source of the events, e.g., the component name. */
+    source: string;
+    onBlur?: boolean;
+    onFocus?: boolean;
+    onPointerMove?: boolean;
+    onPointerOut?: boolean;
+    onPointerUp?: boolean;
+    onPointerDown?: boolean;
+};
+/**
+ * A hook that simplifies creation of handlers for emitting
+ * pointermove, pointerout, and pointerup events to EventEmitterContext.
+ */
+export default function usePointerEventEmitters({ source, onPointerOut, onPointerMove, onPointerUp, onPointerDown, onFocus, onBlur, }: PointerEventEmitterParams): {
+    onPointerMove: ((event: PointerEvent) => void | undefined) | undefined;
+    onFocus: ((event: FocusEvent) => void | undefined) | undefined;
+    onBlur: ((event: FocusEvent) => void | undefined) | undefined;
+    onPointerOut: ((event: PointerEvent) => void | undefined) | undefined;
+    onPointerUp: ((event: PointerEvent) => void | undefined) | undefined;
+    onPointerDown: ((event: PointerEvent) => void | undefined) | undefined;
+};
+export {};

package/src/xychart/hooks/useEventHandlers.tsrx

@@ -0,0 +1,162 @@
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { PointerEvent, FocusEvent } from 'react';
+import { useCallback, useContext } from 'octane';
+import DataContext from '../context/DataContext.tsrx';
+import { isFocusEvent, isPointerEvent } from '../typeguards/events';
+import type {
+	DataContextType,
+	EventHandlerParams,
+	NearestDatumArgs,
+	NearestDatumReturnType,
+} from '../types';
+import findNearestDatumX from '../utils/findNearestDatumX';
+import findNearestDatumY from '../utils/findNearestDatumY';
+import type { HandlerParams } from './useEventEmitter.tsrx';
+import useEventEmitter from './useEventEmitter.tsrx';
+
+export const POINTER_EVENTS_ALL = '__POINTER_EVENTS_ALL';
+export const POINTER_EVENTS_NEAREST = '__POINTER_EVENTS_NEAREST';
+
+export type PointerEventHandlerParams<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = {
+	/** Controls whether callbacks are invoked for one or more registered dataKeys, the nearest dataKey, or all dataKeys. */
+	dataKey: string | string[] | typeof POINTER_EVENTS_NEAREST | typeof POINTER_EVENTS_ALL; // last two are eaten by string
+	/** Optionally override the findNearestDatum logic. */
+	findNearestDatum?: (params: NearestDatumArgs<XScale, YScale, Datum>) => NearestDatumReturnType<Datum>;
+	/** Callback invoked onFocus for one or more series based on dataKey. */
+	onFocus?: (params: EventHandlerParams<Datum>) => void;
+	/** Callback invoked onBlur. */
+	onBlur?: (event: FocusEvent) => void;
+	/** Callback invoked onPointerMove for one or more series based on dataKey. */
+	onPointerMove?: (params: EventHandlerParams<Datum>) => void;
+	/** Callback invoked onPointerOut. */
+	onPointerOut?: (event: PointerEvent) => void;
+	/** Callback invoked onPointerUp for one or more series based on dataKey. */
+	onPointerUp?: (params: EventHandlerParams<Datum>) => void;
+	/** Callback invoked onPointerDown for one or more series based on dataKey. */
+	onPointerDown?: (params: EventHandlerParams<Datum>) => void;
+	/** Valid event sources for which to invoke handlers. */
+	allowedSources?: string[]
+};
+
+/**
+ * Hook that returns PointerEvent handlers that invoke the passed pointer
+ * handlers with the nearest datum to the event for the passed dataKey.
+ */
+export default function usePointerEventHandlers<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	dataKey,
+	findNearestDatum: findNearestDatumProps,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	allowedSources,
+}: PointerEventHandlerParams<XScale, YScale, Datum>) {
+	const { width, height, horizontal, dataRegistry, xScale, yScale } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, Datum>;
+
+	const findNearestDatum =
+		findNearestDatumProps || (horizontal ? findNearestDatumY : findNearestDatumX);
+
+	// this logic is shared by pointerup, pointermove, and focus handlers
+	const getHandlerParams = useCallback((params?: HandlerParams) => {
+		const { svgPoint, event } = params || {};
+		const pointerParamsByKey: { [dataKey: string]: EventHandlerParams<Datum> } = {};
+
+		// nearest Datum across all dataKeys, if relevant
+		let nearestDatumPointerParams: EventHandlerParams<Datum> | null = null;
+		let nearestDatumDistance = Infinity;
+
+		if (params && event && svgPoint && width && height) {
+			const considerAllKeys = dataKey === POINTER_EVENTS_NEAREST || dataKey === POINTER_EVENTS_ALL;
+
+			const dataKeys =
+				considerAllKeys
+					? dataRegistry?.keys() ?? []
+					: Array.isArray(dataKey)
+						? dataKey
+						: [dataKey];
+
+			// find nearestDatum for relevant dataKey(s)
+			dataKeys.forEach((key) => {
+				const entry = dataRegistry?.get(key);
+				if (entry) {
+					const nearestDatum = findNearestDatum({
+						dataKey: key,
+						data: entry.data,
+						height,
+						point: svgPoint,
+						width,
+						xAccessor: entry.xAccessor,
+						xScale,
+						yAccessor: entry.yAccessor,
+						yScale,
+					});
+
+					if (nearestDatum) {
+						pointerParamsByKey[key] = { key, svgPoint, event, ...nearestDatum };
+
+						// compute nearest Datum if not emitting events for all keys
+						if (dataKey === POINTER_EVENTS_NEAREST) {
+							const distance = Math.sqrt(
+								(nearestDatum.distanceX ?? Infinity ** 2) +
+									(nearestDatum.distanceY ?? Infinity ** 2),
+							);
+							nearestDatumPointerParams = distance < nearestDatumDistance
+								? pointerParamsByKey[key]
+								: nearestDatumPointerParams;
+							nearestDatumDistance = Math.min(nearestDatumDistance, distance);
+						}
+					}
+				}
+			});
+
+			const pointerParams: (EventHandlerParams<Datum> | null)[] =
+				dataKey === POINTER_EVENTS_NEAREST
+					? [nearestDatumPointerParams]
+					: dataKey === POINTER_EVENTS_ALL || Array.isArray(dataKey)
+						? Object.values(pointerParamsByKey)
+						: [pointerParamsByKey[dataKey]];
+
+			return pointerParams.filter((param) => param) as EventHandlerParams<Datum>[];
+		}
+		return [];
+	}, [dataKey, dataRegistry, xScale, yScale, width, height, findNearestDatum]);
+	const handlePointerMove = useCallback((params?: HandlerParams) => {
+		if (onPointerMove) {
+			getHandlerParams(params).forEach((p) => onPointerMove(p));
+		}
+	}, [getHandlerParams, onPointerMove]);
+	const handlePointerUp = useCallback((params?: HandlerParams) => {
+		if (onPointerUp) {
+			getHandlerParams(params).forEach((p) => onPointerUp(p));
+		}
+	}, [getHandlerParams, onPointerUp]);
+	const handlePointerDown = useCallback((params?: HandlerParams) => {
+		if (onPointerDown) {
+			getHandlerParams(params).forEach((p) => onPointerDown(p));
+		}
+	}, [getHandlerParams, onPointerDown]);
+	const handleFocus = useCallback((params?: HandlerParams) => {
+		if (onFocus) {
+			getHandlerParams(params).forEach((p) => onFocus(p));
+		}
+	}, [getHandlerParams, onFocus]);
+	const handlePointerOut = useCallback((params?: HandlerParams) => {
+		const event = params?.event;
+		if (event && isPointerEvent(event) && onPointerOut) onPointerOut(event);
+	}, [onPointerOut]);
+	const handleBlur = useCallback((params?: HandlerParams) => {
+		const event = params?.event;
+		if (event && isFocusEvent(event) && onBlur) onBlur(event);
+	}, [onBlur]);
+
+	useEventEmitter('pointermove', onPointerMove ? handlePointerMove : undefined, allowedSources);
+	useEventEmitter('pointerout', onPointerOut ? handlePointerOut : undefined, allowedSources);
+	useEventEmitter('pointerup', onPointerUp ? handlePointerUp : undefined, allowedSources);
+	useEventEmitter('pointerdown', onPointerDown ? handlePointerDown : undefined, allowedSources);
+	useEventEmitter('focus', onFocus ? handleFocus : undefined, allowedSources);
+	useEventEmitter('blur', onBlur ? handleBlur : undefined, allowedSources);
+}

package/src/xychart/hooks/useEventHandlers.tsrx.d.ts

@@ -0,0 +1,31 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { PointerEvent, FocusEvent } from 'react';
+import type { EventHandlerParams, NearestDatumArgs, NearestDatumReturnType } from '../types';
+export declare const POINTER_EVENTS_ALL = "__POINTER_EVENTS_ALL";
+export declare const POINTER_EVENTS_NEAREST = "__POINTER_EVENTS_NEAREST";
+export type PointerEventHandlerParams<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = {
+    /** Controls whether callbacks are invoked for one or more registered dataKeys, the nearest dataKey, or all dataKeys. */
+    dataKey: string | string[] | typeof POINTER_EVENTS_NEAREST | typeof POINTER_EVENTS_ALL;
+    /** Optionally override the findNearestDatum logic. */
+    findNearestDatum?: (params: NearestDatumArgs<XScale, YScale, Datum>) => NearestDatumReturnType<Datum>;
+    /** Callback invoked onFocus for one or more series based on dataKey. */
+    onFocus?: (params: EventHandlerParams<Datum>) => void;
+    /** Callback invoked onBlur. */
+    onBlur?: (event: FocusEvent) => void;
+    /** Callback invoked onPointerMove for one or more series based on dataKey. */
+    onPointerMove?: (params: EventHandlerParams<Datum>) => void;
+    /** Callback invoked onPointerOut. */
+    onPointerOut?: (event: PointerEvent) => void;
+    /** Callback invoked onPointerUp for one or more series based on dataKey. */
+    onPointerUp?: (params: EventHandlerParams<Datum>) => void;
+    /** Callback invoked onPointerDown for one or more series based on dataKey. */
+    onPointerDown?: (params: EventHandlerParams<Datum>) => void;
+    /** Valid event sources for which to invoke handlers. */
+    allowedSources?: string[];
+};
+/**
+ * Hook that returns PointerEvent handlers that invoke the passed pointer
+ * handlers with the nearest datum to the event for the passed dataKey.
+ */
+export default function usePointerEventHandlers<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ dataKey, findNearestDatum: findNearestDatumProps, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, allowedSources, }: PointerEventHandlerParams<XScale, YScale, Datum>): void;

package/src/xychart/hooks/useScales.tsrx

@@ -0,0 +1,113 @@
+import type { AxisScaleOutput, AxisScale } from '@octanejs/visx/axis';
+import type { ScaleConfig, ScaleInput } from '@octanejs/visx/scale';
+import { createScale, scaleCanBeZeroed } from '@octanejs/visx/scale';
+import { extent as d3Extent } from 'd3-array';
+import { useMemo } from 'octane';
+import type DataRegistry from '../classes/DataRegistry';
+import isDiscreteScale from '../utils/isDiscreteScale';
+
+/** A hook for creating memoized x- and y-scales. */
+export default function useScales<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	dataRegistry,
+	xRange,
+	xScaleConfig,
+	yRange,
+	yScaleConfig,
+}: {
+	xScaleConfig: ScaleConfig<AxisScaleOutput>;
+	yScaleConfig: ScaleConfig<AxisScaleOutput>;
+	dataRegistry: Omit<DataRegistry<XScale, YScale, Datum>, 'registry' | 'registryKeys'>;
+	xRange: [number, number];
+	yRange: [number, number];
+}) {
+	// pull out memoization keys that are less likely to change
+	const registryKeys = dataRegistry.keys();
+	const [xMin, xMax] = xRange;
+	const [yMin, yMax] = yRange;
+
+	const memoizedXScale = useMemo(() => {
+		const registryEntries = registryKeys.map((key) => dataRegistry.get(key));
+
+		type XScaleInput = ScaleInput<XScale>;
+
+		const xValues = registryEntries.reduce<XScaleInput[]>(
+			(combined, entry) => entry
+				? combined.concat(entry.data.map((d: Datum) => entry.xAccessor(d)))
+				: combined,
+			[],
+		);
+
+		const configuredDomain = xScaleConfig.domain;
+
+		// A fixed domain is sufficient for SSR even when a child component owns the
+		// series and its registration effect has not run yet.
+		if (xValues.length === 0 && configuredDomain == null) return undefined;
+
+		const xDomain =
+			configuredDomain ?? (isDiscreteScale(xScaleConfig) ? xValues : d3Extent(xValues));
+
+		let xScale = (scaleCanBeZeroed(xScaleConfig)
+			? createScale({
+					range: [xMin, xMax],
+					domain: xDomain as [XScaleInput, XScaleInput],
+					zero: true,
+					...xScaleConfig,
+				})
+			: createScale({
+					range: [xMin, xMax],
+					domain: xDomain as [XScaleInput, XScaleInput],
+					...xScaleConfig,
+				})) as XScale;
+
+		// apply any scale updates from the registry
+		registryEntries.forEach((entry) => {
+			if (entry?.xScale) xScale = entry.xScale(xScale);
+		});
+
+		return xScale;
+	}, [dataRegistry, xScaleConfig, registryKeys, xMin, xMax]);
+
+	// same for yScale. this logic is hard to apply generically because of the scale types / accessors
+	const memoizedYScale = useMemo(() => {
+		const registryEntries = registryKeys.map((key) => dataRegistry.get(key));
+
+		type YScaleInput = ScaleInput<YScale>;
+
+		const yValues = registryEntries.reduce<YScaleInput[]>(
+			(combined, entry) => entry
+				? combined.concat(entry.data.map((d: Datum) => entry.yAccessor(d)))
+				: combined,
+			[],
+		);
+
+		const configuredDomain = yScaleConfig.domain;
+
+		// See the x-scale branch above: explicit domains are complete server input.
+		if (yValues.length === 0 && configuredDomain == null) return undefined;
+
+		const yDomain =
+			configuredDomain ?? (isDiscreteScale(yScaleConfig) ? yValues : d3Extent(yValues));
+
+		let yScale = (scaleCanBeZeroed(yScaleConfig)
+			? createScale({
+					range: [yMin, yMax],
+					domain: yDomain as [YScaleInput, YScaleInput],
+					zero: true,
+					...yScaleConfig,
+				})
+			: createScale({
+					range: [yMin, yMax],
+					domain: yDomain as [YScaleInput, YScaleInput],
+					...yScaleConfig,
+				})) as YScale;
+
+		// apply any scale updates from the registry
+		registryEntries.forEach((entry) => {
+			if (entry?.yScale) yScale = entry.yScale(yScale);
+		});
+
+		return yScale;
+	}, [dataRegistry, yScaleConfig, registryKeys, yMin, yMax]);
+
+	return { xScale: memoizedXScale, yScale: memoizedYScale };
+}

package/src/xychart/hooks/useScales.tsrx.d.ts

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScaleOutput, AxisScale } from '@octanejs/visx/axis';
+import type { ScaleConfig } from '@octanejs/visx/scale';
+import type DataRegistry from '../classes/DataRegistry';
+/** A hook for creating memoized x- and y-scales. */
+export default function useScales<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ dataRegistry, xRange, xScaleConfig, yRange, yScaleConfig, }: {
+    xScaleConfig: ScaleConfig<AxisScaleOutput>;
+    yScaleConfig: ScaleConfig<AxisScaleOutput>;
+    dataRegistry: Omit<DataRegistry<XScale, YScale, Datum>, 'registry' | 'registryKeys'>;
+    xRange: [number, number];
+    yRange: [number, number];
+}): {
+    xScale: XScale | undefined;
+    yScale: YScale | undefined;
+};

package/src/xychart/hooks/useSeriesEvents.tsrx

@@ -0,0 +1,82 @@
+import type { FocusEvent, PointerEvent } from 'react';
+import { useCallback, useContext } from 'octane';
+import type { AxisScale } from '@octanejs/visx/axis';
+import TooltipContext from '../context/TooltipContext.tsrx';
+import type { EventHandlerParams, SeriesProps, TooltipContextType } from '../types';
+import useEventEmitters from './useEventEmitters.tsrx';
+import type { PointerEventHandlerParams } from './useEventHandlers.tsrx';
+import useEventHandlers from './useEventHandlers.tsrx';
+
+export type SeriesEventsParams<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	Pick<SeriesProps<XScale, YScale, Datum>, | 'enableEvents'
+	| 'onBlur'
+	| 'onFocus'
+	| 'onPointerMove'
+	| 'onPointerOut'
+	| 'onPointerUp'
+	| 'onPointerDown'> & Pick<PointerEventHandlerParams<XScale, YScale, Datum>, | 'dataKey'
+	| 'allowedSources'
+	| 'findNearestDatum'> & {
+		/** The source of emitted events. */
+		source: string;
+	};
+
+/** This hook simplifies the logic for initializing Series event emitters + handlers. */
+export default function useSeriesEvents<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	dataKey,
+	enableEvents,
+	findNearestDatum,
+	onBlur: onBlurProps,
+	onFocus: onFocusProps,
+	onPointerMove: onPointerMoveProps,
+	onPointerOut: onPointerOutProps,
+	onPointerUp: onPointerUpProps,
+	onPointerDown: onPointerDownProps,
+	source,
+	allowedSources,
+}: SeriesEventsParams<XScale, YScale, Datum>) {
+	const { showTooltip, hideTooltip } =
+		useContext(TooltipContext) ?? {} as TooltipContextType<Datum>;
+	const onPointerMove = useCallback((params: EventHandlerParams<Datum>) => {
+		showTooltip(params);
+		if (onPointerMoveProps) onPointerMoveProps(params);
+	}, [showTooltip, onPointerMoveProps]);
+	const onFocus = useCallback((params: EventHandlerParams<Datum>) => {
+		showTooltip(params);
+		if (onFocusProps) onFocusProps(params);
+	}, [showTooltip, onFocusProps]);
+	const onPointerOut = useCallback((event: PointerEvent) => {
+		hideTooltip();
+		if (event && onPointerOutProps) onPointerOutProps(event);
+	}, [hideTooltip, onPointerOutProps]);
+	const onBlur = useCallback((event: FocusEvent) => {
+		hideTooltip();
+		if (event && onBlurProps) onBlurProps(event);
+	}, [hideTooltip, onBlurProps]);
+
+	const onPointerDown = useCallback((params: EventHandlerParams<Datum>) => {
+		showTooltip(params);
+		if (onPointerDownProps) onPointerDownProps(params);
+	}, [showTooltip, onPointerDownProps]);
+
+	useEventHandlers({
+		dataKey,
+		findNearestDatum,
+		onBlur: enableEvents ? onBlur : undefined,
+		onFocus: enableEvents ? onFocus : undefined,
+		onPointerMove: enableEvents ? onPointerMove : undefined,
+		onPointerOut: enableEvents ? onPointerOut : undefined,
+		onPointerUp: enableEvents ? onPointerUpProps : undefined,
+		onPointerDown: enableEvents ? onPointerDown : undefined,
+		allowedSources,
+	});
+	return useEventEmitters({
+		source,
+		onBlur: !!onBlurProps && enableEvents,
+		onFocus: !!onFocusProps && enableEvents,
+		onPointerMove: !!onPointerMoveProps && enableEvents,
+		onPointerOut: !!onPointerOutProps && enableEvents,
+		onPointerUp: !!onPointerUpProps && enableEvents,
+		onPointerDown: !!onPointerDownProps && enableEvents,
+	});
+}

package/src/xychart/hooks/useSeriesEvents.tsrx.d.ts

@@ -0,0 +1,18 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FocusEvent, PointerEvent } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { SeriesProps } from '../types';
+import type { PointerEventHandlerParams } from './useEventHandlers.tsrx';
+export type SeriesEventsParams<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = Pick<SeriesProps<XScale, YScale, Datum>, 'enableEvents' | 'onBlur' | 'onFocus' | 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'onPointerDown'> & Pick<PointerEventHandlerParams<XScale, YScale, Datum>, 'dataKey' | 'allowedSources' | 'findNearestDatum'> & {
+    /** The source of emitted events. */
+    source: string;
+};
+/** This hook simplifies the logic for initializing Series event emitters + handlers. */
+export default function useSeriesEvents<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ dataKey, enableEvents, findNearestDatum, onBlur: onBlurProps, onFocus: onFocusProps, onPointerMove: onPointerMoveProps, onPointerOut: onPointerOutProps, onPointerUp: onPointerUpProps, onPointerDown: onPointerDownProps, source, allowedSources, }: SeriesEventsParams<XScale, YScale, Datum>): {
+    onPointerMove: ((event: PointerEvent) => void | undefined) | undefined;
+    onFocus: ((event: FocusEvent) => void | undefined) | undefined;
+    onBlur: ((event: FocusEvent) => void | undefined) | undefined;
+    onPointerOut: ((event: PointerEvent) => void | undefined) | undefined;
+    onPointerUp: ((event: PointerEvent) => void | undefined) | undefined;
+    onPointerDown: ((event: PointerEvent) => void | undefined) | undefined;
+};