@octanejs/visx 0.1.0

package/src/xychart/components/series/private/BaseBarStack.tsrx

@@ -0,0 +1,192 @@
+import { useContext, useCallback } from 'octane';
+import type { ReactElement, FC } from 'react';
+import type { SeriesPoint } from 'd3-shape';
+import type { PositionScale, StackPathConfig } from '@octanejs/visx/shape';
+import { getFirstItem, getSecondItem, getBandwidth } from '@octanejs/visx/shape';
+
+import type { BaseBarSeriesProps } from './BaseBarSeries.tsrx';
+import DataContext from '../../../context/DataContext.tsrx';
+import type {
+	Bar,
+	BarsProps,
+	BarStackDatum,
+	CombinedStackData,
+	DataContextType,
+	NearestDatumArgs,
+	NearestDatumReturnType,
+	SeriesProps,
+} from '../../../types';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import { getStackValue } from '../../../utils/combineBarStackData';
+import { BARSTACK_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+import findNearestStackDatum from '../../../utils/findNearestStackDatum';
+import useStackedData from '../../../hooks/useStackedData.tsrx';
+
+type BarStackChildProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> =
+	Omit<BaseBarSeriesProps<XScale, YScale, Datum>, 'BarsComponent'>;
+
+type StackBar<XScale extends PositionScale, YScale extends PositionScale> =
+	SeriesPoint<CombinedStackData<XScale, YScale>>;
+
+export type BaseBarStackProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> =
+	{
+		/** `BarSeries` elements, note we can't strictly enforce this with TS yet. */
+		children: | ReactElement<BarStackChildProps<XScale, YScale, Datum>>
+		| ReactElement<BarStackChildProps<XScale, YScale, Datum>>[];
+		/** Rendered component which is passed BarsProps by BaseBarStack after processing. */
+		BarsComponent: FC<BarsProps<XScale, YScale>>;
+	} & Pick<StackPathConfig<Datum, string>, | 'offset'
+	| 'order'> & Pick<SeriesProps<XScale, YScale, Datum>, | 'onPointerMove'
+	| 'onPointerOut'
+	| 'onPointerUp'
+	| 'onPointerDown'
+	| 'onBlur'
+	| 'onFocus'
+	| 'enableEvents'>;
+
+function BaseBarStack<XScale extends PositionScale, YScale extends PositionScale, Datum extends object>({
+	children,
+	order,
+	offset,
+	BarsComponent,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	enableEvents = true,
+}: BaseBarStackProps<XScale, YScale, Datum>) {
+	const { colorScale, dataRegistry, horizontal, xScale, yScale } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, BarStackDatum<XScale, YScale>>;
+
+	const { seriesChildren, dataKeys, stackedData } = useStackedData<
+		XScale,
+		YScale,
+		Datum,
+		BaseBarSeriesProps<XScale, YScale, Datum>
+	>({
+		children,
+		order,
+		offset,
+	});
+
+	// custom logic to find the nearest AreaStackDatum (context) and return the original Datum (props)
+	const findNearestDatum = useCallback(
+		(params: NearestDatumArgs<XScale, YScale, BarStackDatum<XScale, YScale>>): NearestDatumReturnType<Datum> => {
+			const childData = seriesChildren.find(
+				(child) => child.props.dataKey === params.dataKey,
+			)?.props?.data;
+			return childData ? findNearestStackDatum(params, childData, horizontal) : null;
+		},
+		[seriesChildren, horizontal],
+	);
+
+	const ownEventSourceKey = `${BARSTACK_EVENT_SOURCE}-${dataKeys.join('-')}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey: dataKeys,
+		enableEvents,
+		// @ts-expect-error Datum input + return type are expected to be the same type but they differ for BarStack (registry data is StackedDatum, return type is user Datum)
+		findNearestDatum,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	const registryEntries = dataKeys.map((key) => dataRegistry.get(key));
+
+	// if scales and data are not available in the registry, bail
+	if (registryEntries.some((entry) => entry == null) || !xScale || !yScale || !colorScale) {
+		return null;
+	}
+
+	const barThickness = getBandwidth(horizontal ? yScale : xScale);
+	const halfBarThickness = barThickness / 2;
+
+	let getWidth: (bar: StackBar<XScale, YScale>) => number | undefined;
+	let getHeight: (bar: StackBar<XScale, YScale>) => number | undefined;
+	let getX: (bar: StackBar<XScale, YScale>) => number | undefined;
+	let getY: (bar: StackBar<XScale, YScale>) => number | undefined;
+
+	if (horizontal) {
+		getWidth = (bar) => (xScale(getSecondItem(bar)) ?? NaN) - (xScale(getFirstItem(bar)) ?? NaN);
+		getHeight = () => barThickness;
+		getX = (bar) => xScale(getFirstItem(bar));
+		getY = (bar) => 'bandwidth' in yScale
+			? yScale(getStackValue(bar.data))
+			: Math.max((yScale(getStackValue(bar.data)) ?? NaN) - halfBarThickness);
+	} else {
+		getWidth = () => barThickness;
+		getHeight = (bar) => (yScale(getFirstItem(bar)) ?? NaN) - (yScale(getSecondItem(bar)) ?? NaN);
+		getX = (bar) => 'bandwidth' in xScale
+			? xScale(getStackValue(bar.data))
+			: Math.max((xScale(getStackValue(bar.data)) ?? NaN) - halfBarThickness);
+		getY = (bar) => yScale(getSecondItem(bar));
+	}
+
+	const barSeries = stackedData.map((barStack, stackIndex) => {
+		const entry = dataRegistry.get(barStack.key);
+		if (!entry) return null;
+
+		// get props from child BarSeries, if available
+		const childBarSeries: ReactElement<BaseBarSeriesProps<XScale, YScale, Datum>> | undefined =
+			seriesChildren.find((child) => child.props.dataKey === barStack.key);
+		const { colorAccessor, radius, radiusAll, radiusBottom, radiusLeft, radiusRight, radiusTop } =
+			childBarSeries?.props || {};
+
+		return {
+			key: barStack.key,
+			radius,
+			radiusAll,
+			radiusBottom,
+			radiusLeft,
+			radiusRight,
+			radiusTop,
+			bars: barStack.map((bar, index) => {
+				const barX = getX(bar);
+				if (!isValidNumber(barX)) return null;
+				const barY = getY(bar);
+				if (!isValidNumber(barY)) return null;
+				const barWidth = getWidth(bar);
+				if (!isValidNumber(barWidth)) return null;
+				const barHeight = getHeight(bar);
+				if (!isValidNumber(barHeight)) return null;
+
+				const barSeriesDatum = colorAccessor ? childBarSeries?.props?.data[index] : null;
+
+				return {
+					key: `${stackIndex}-${barStack.key}-${index}`,
+					x: barX,
+					y: barY,
+					width: barWidth,
+					height: barHeight,
+					fill: barSeriesDatum && colorAccessor
+						? colorAccessor(barSeriesDatum, index)
+						: colorScale(barStack.key),
+				};
+			}).filter((bar) => bar) as Bar[],
+		};
+	}).filter((series) => series);
+
+	return <g className="visx-bar-stack">{barSeries.map(
+		(series) =>
+			series &&
+				<BarsComponent
+					horizontal={horizontal}
+					xScale={xScale}
+					yScale={yScale}
+					{...series}
+					{...eventEmitters}
+					key={series.key}
+				/>,
+	)}</g>;
+}
+
+export default BaseBarStack

package/src/xychart/components/series/private/BaseBarStack.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactElement, FC } from 'react';
+import type { PositionScale, StackPathConfig } from '@octanejs/visx/shape';
+import type { BaseBarSeriesProps } from './BaseBarSeries.tsrx';
+import type { BarsProps, SeriesProps } from '../../../types';
+type BarStackChildProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> = Omit<BaseBarSeriesProps<XScale, YScale, Datum>, 'BarsComponent'>;
+export type BaseBarStackProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> = {
+    /** `BarSeries` elements, note we can't strictly enforce this with TS yet. */
+    children: ReactElement<BarStackChildProps<XScale, YScale, Datum>> | ReactElement<BarStackChildProps<XScale, YScale, Datum>>[];
+    /** Rendered component which is passed BarsProps by BaseBarStack after processing. */
+    BarsComponent: FC<BarsProps<XScale, YScale>>;
+} & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'> & Pick<SeriesProps<XScale, YScale, Datum>, 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'onPointerDown' | 'onBlur' | 'onFocus' | 'enableEvents'>;
+declare function BaseBarStack<XScale extends PositionScale, YScale extends PositionScale, Datum extends object>({ children, order, offset, BarsComponent, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, enableEvents, }: BaseBarStackProps<XScale, YScale, Datum>): import("react").JSX.Element | null;
+export default BaseBarStack;

package/src/xychart/components/series/private/BaseGlyphSeries.tsrx

@@ -0,0 +1,107 @@
+import { useContext, useEffect, useMemo } from 'octane';
+import type { ReactNode } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import DataContext from '../../../context/DataContext.tsrx';
+import type { DataContextType, GlyphProps, GlyphsProps, SeriesProps } from '../../../types';
+import getScaledValueFactory from '../../../utils/getScaledValueFactory';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import { GLYPHSERIES_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+
+export type BaseGlyphSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	SeriesProps<XScale, YScale, Datum> & {
+		/** Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+		colorAccessor?: (d: Datum, index: number) => string | null | undefined;
+		/** The size of a `Glyph`, a `number` or a function which takes a `Datum` and returns a `number`. */
+		size?: number | ((d: Datum) => number);
+		/** Function which handles rendering glyphs. */
+		renderGlyphs: (glyphsProps: GlyphsProps<XScale, YScale, Datum>) => ReactNode;
+	};
+
+export function BaseGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	colorAccessor,
+	data,
+	dataKey,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	enableEvents = true,
+	renderGlyphs,
+	size = 8,
+	xAccessor,
+	xScale,
+	yAccessor,
+	yScale,
+}: BaseGlyphSeriesProps<XScale, YScale, Datum> & Pick<DataContextType<XScale, YScale, Datum>, | 'xScale'
+| 'yScale'>) {
+	const { colorScale, theme, horizontal } = useContext(DataContext);
+	const getScaledX = useMemo(() => getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
+	const getScaledY = useMemo(() => getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
+	const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
+
+	const ownEventSourceKey = `${GLYPHSERIES_EVENT_SOURCE}-${dataKey}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey,
+		enableEvents,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	const glyphs = useMemo(
+		() => data.map((datum, i) => {
+			const x = getScaledX(datum);
+			if (!isValidNumber(x)) return null;
+			const y = getScaledY(datum);
+			if (!isValidNumber(y)) return null;
+			return {
+				key: `${i}`,
+				x,
+				y,
+				color: colorAccessor?.(datum, i) ?? color,
+				size: typeof size === 'function' ? size(datum) : size,
+				datum,
+			};
+		}).filter((point) => point) as GlyphProps<Datum>[],
+		[color, colorAccessor, data, getScaledX, getScaledY, size],
+	);
+
+	return <>
+		{renderGlyphs({ glyphs, xScale, yScale, horizontal, ...eventEmitters })}
+	</>;
+}
+
+export default function BaseGlyphSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseGlyphSeriesProps<XScale, YScale, Datum>) {
+	const { dataKey, data, xAccessor, yAccessor } = props;
+	const { xScale, yScale, dataRegistry } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, Datum>;
+
+	useEffect(() => {
+		if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
+		return () => dataRegistry?.unregisterData(dataKey);
+	}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
+
+	const registryEntry = dataRegistry?.get(dataKey);
+
+	// Explicit domains let wrapped series render before their registration effect.
+	if (!xScale || !yScale) return null;
+
+	// otherwise pass props + over-write data/accessors
+	return <BaseGlyphSeries
+		{...props}
+		xScale={xScale}
+		yScale={yScale}
+		data={registryEntry?.data ?? data}
+		xAccessor={registryEntry?.xAccessor ?? xAccessor}
+		yAccessor={registryEntry?.yAccessor ?? yAccessor}
+	/>;
+}

package/src/xychart/components/series/private/BaseGlyphSeries.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { DataContextType, GlyphsProps, SeriesProps } from '../../../types';
+export type BaseGlyphSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
+    /** Given a Datum, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+    colorAccessor?: (d: Datum, index: number) => string | null | undefined;
+    /** The size of a `Glyph`, a `number` or a function which takes a `Datum` and returns a `number`. */
+    size?: number | ((d: Datum) => number);
+    /** Function which handles rendering glyphs. */
+    renderGlyphs: (glyphsProps: GlyphsProps<XScale, YScale, Datum>) => ReactNode;
+};
+export declare function BaseGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ colorAccessor, data, dataKey, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, enableEvents, renderGlyphs, size, xAccessor, xScale, yAccessor, yScale, }: BaseGlyphSeriesProps<XScale, YScale, Datum> & Pick<DataContextType<XScale, YScale, Datum>, 'xScale' | 'yScale'>): import("react").JSX.Element;
+export default function BaseGlyphSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseGlyphSeriesProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

package/src/xychart/components/series/private/BaseLineSeries.tsrx

@@ -0,0 +1,135 @@
+import { Fragment, useContext, useCallback, useMemo, useEffect } from 'octane';
+import type { FC, SVGProps } from 'react';
+import type { LinePathProps } from '@octanejs/visx/shape';
+import { LinePath } from '@octanejs/visx/shape';
+import type { AxisScale } from '@octanejs/visx/axis';
+import DataContext from '../../../context/DataContext.tsrx';
+import type { DataContextType, GlyphsProps, SeriesProps } from '../../../types';
+import getScaledValueFactory from '../../../utils/getScaledValueFactory';
+import isValidNumber from '../../../typeguards/isValidNumber';
+import { LINESERIES_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import { BaseGlyphSeries } from './BaseGlyphSeries.tsrx';
+import defaultRenderGlyph from './defaultRenderGlyph.tsrx';
+import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
+
+export type BaseLineSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	SeriesProps<XScale, YScale, Datum> & {
+		/** Rendered component which is passed path props by BaseLineSeries after processing. */
+		PathComponent?: FC<Omit<SVGProps<SVGPathElement>, 'ref'>> | 'path';
+		/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+		curve?: LinePathProps<Datum>['curve'];
+		/** Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+		colorAccessor?: (dataKey: string) => string | undefined | null;
+	} & Omit<SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+
+function BaseLineSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	colorAccessor,
+	curve,
+	data,
+	dataKey,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+	onPointerDown,
+	enableEvents = true,
+	xAccessor,
+	xScale,
+	yAccessor,
+	yScale,
+	PathComponent = 'path',
+	...lineProps
+}: BaseLineSeriesProps<XScale, YScale, Datum> & Pick<DataContextType<XScale, YScale, Datum>, | 'xScale'
+| 'yScale'>) {
+	const { colorScale, theme } = useContext(DataContext);
+	const getScaledX = useMemo(() => getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
+	const getScaledY = useMemo(() => getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
+	const isDefined = useCallback(
+		(d: Datum) => isValidNumber(xScale(xAccessor(d))) && isValidNumber(yScale(yAccessor(d))),
+		[xScale, xAccessor, yScale, yAccessor],
+	);
+	const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
+
+	const ownEventSourceKey = `${LINESERIES_EVENT_SOURCE}-${dataKey}`;
+	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
+		dataKey,
+		enableEvents,
+		onBlur,
+		onFocus,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		source: ownEventSourceKey,
+		allowedSources: [XYCHART_EVENT_SOURCE, ownEventSourceKey],
+	});
+
+	// render invisible glyphs for focusing if onFocus/onBlur are defined
+	const captureFocusEvents = Boolean(onFocus || onBlur);
+	const renderGlyphs = useCallback(
+		({ glyphs }: GlyphsProps<XScale, YScale, Datum>) => captureFocusEvents
+			? glyphs.map(
+					(glyph) => <Fragment key={glyph.key}>{defaultRenderGlyph({
+						...glyph,
+						color: 'transparent',
+						onFocus: eventEmitters.onFocus,
+						onBlur: eventEmitters.onBlur,
+					})}</Fragment>,
+				)
+			: null,
+		[captureFocusEvents, eventEmitters.onFocus, eventEmitters.onBlur],
+	);
+
+	return <>
+		<LinePath x={getScaledX} y={getScaledY} defined={isDefined} curve={curve} {...lineProps}>
+			{({ path }) =>
+				<PathComponent
+					stroke={colorAccessor?.(dataKey) ?? color}
+					strokeWidth={2}
+					fill="transparent"
+					strokeLinecap="round"
+					{...lineProps}
+					d={path(data) || ''}
+					{...eventEmitters}
+				/>}
+		</LinePath>
+		{captureFocusEvents &&
+			<BaseGlyphSeries
+				dataKey={dataKey}
+				data={data}
+				xAccessor={xAccessor}
+				yAccessor={yAccessor}
+				xScale={xScale}
+				yScale={yScale}
+				renderGlyphs={renderGlyphs}
+			/>}
+	</>;
+}
+
+export default function BaseBaseLineSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseLineSeriesProps<XScale, YScale, Datum>) {
+	const { dataKey, data, xAccessor, yAccessor } = props;
+	const { xScale, yScale, dataRegistry } = useContext(
+		DataContext,
+	) as unknown as DataContextType<XScale, YScale, Datum>;
+
+	useEffect(() => {
+		if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
+		return () => dataRegistry?.unregisterData(dataKey);
+	}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
+
+	const registryEntry = dataRegistry?.get(dataKey);
+
+	// Explicit domains let wrapped series render before their registration effect.
+	if (!xScale || !yScale) return null;
+
+	// otherwise pass props + over-write data/accessors
+	return <BaseLineSeries
+		{...props}
+		xScale={xScale}
+		yScale={yScale}
+		data={registryEntry?.data ?? data}
+		xAccessor={registryEntry?.xAccessor ?? xAccessor}
+		yAccessor={registryEntry?.yAccessor ?? yAccessor}
+	/>;
+}

package/src/xychart/components/series/private/BaseLineSeries.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FC, SVGProps } from 'react';
+import type { LinePathProps } from '@octanejs/visx/shape';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { SeriesProps } from '../../../types';
+export type BaseLineSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
+    /** Rendered component which is passed path props by BaseLineSeries after processing. */
+    PathComponent?: FC<Omit<SVGProps<SVGPathElement>, 'ref'>> | 'path';
+    /** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+    curve?: LinePathProps<Datum>['curve'];
+    /** Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
+    colorAccessor?: (dataKey: string) => string | undefined | null;
+} & Omit<SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+export default function BaseBaseLineSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseLineSeriesProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

package/src/xychart/components/series/private/defaultRenderGlyph.tsrx

@@ -0,0 +1,29 @@
+import type { GlyphProps } from '../../../types';
+
+export default function defaultRenderGlyph<Datum extends object>({
+	key,
+	color,
+	x,
+	y,
+	size,
+	onBlur,
+	onFocus,
+	onPointerMove,
+	onPointerOut,
+	onPointerUp,
+}: GlyphProps<Datum>) {
+	return <circle
+		className="visx-circle-glyph"
+		key={key}
+		tabIndex={onBlur || onFocus ? 0 : undefined}
+		fill={color}
+		r={size / 2}
+		cx={x}
+		cy={y}
+		onBlur={onBlur}
+		onFocus={onFocus}
+		onPointerMove={onPointerMove}
+		onPointerOut={onPointerOut}
+		onPointerUp={onPointerUp}
+	/>;
+}

package/src/xychart/components/series/private/defaultRenderGlyph.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { GlyphProps } from '../../../types';
+export default function defaultRenderGlyph<Datum extends object>({ key, color, x, y, size, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, }: GlyphProps<Datum>): import("react").JSX.Element;

package/src/xychart/constants.ts

@@ -0,0 +1,9 @@
+// event sources
+export const AREASERIES_EVENT_SOURCE = 'AREASERIES_EVENT_SOURCE';
+export const AREASTACK_EVENT_SOURCE = 'AREASTACK_EVENT_SOURCE';
+export const BARGROUP_EVENT_SOURCE = 'BARGROUP_EVENT_SOURCE';
+export const BARSERIES_EVENT_SOURCE = 'BARSERIES_EVENT_SOURCE';
+export const BARSTACK_EVENT_SOURCE = 'BARSTACK_EVENT_SOURCE';
+export const GLYPHSERIES_EVENT_SOURCE = 'GLYPHSERIES_EVENT_SOURCE';
+export const LINESERIES_EVENT_SOURCE = 'LINESERIES_EVENT_SOURCE';
+export const XYCHART_EVENT_SOURCE = 'XYCHART_EVENT_SOURCE';

package/src/xychart/context/DataContext.tsrx

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createContext } from 'octane';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { DataContextType } from '../types';
+
+type AnyDataContext = DataContextType<AxisScale, AxisScale, any>;
+
+/** Utilities for inferring context generics */
+export type InferXScaleConfig<X extends AnyDataContext> =
+	X extends DataContextType<infer T, any, any> ? T : AxisScale;
+
+export type InferYScaleConfig<X extends AnyDataContext> =
+	X extends DataContextType<any, infer T, any> ? T : AxisScale;
+
+export type InferDatum<X extends AnyDataContext> =
+	X extends DataContextType<any, any, infer T> ? T : any;
+
+export type InferDataContext<C extends AnyDataContext = AnyDataContext> =
+	DataContextType<InferXScaleConfig<C>, InferYScaleConfig<C>, InferDatum<C>>;
+
+const DataContext = createContext<Partial<InferDataContext>>({});
+
+export default DataContext

package/src/xychart/context/DataContext.tsrx.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { DataContextType } from '../types';
+type AnyDataContext = DataContextType<AxisScale, AxisScale, any>;
+/** Utilities for inferring context generics */
+export type InferXScaleConfig<X extends AnyDataContext> = X extends DataContextType<infer T, any, any> ? T : AxisScale;
+export type InferYScaleConfig<X extends AnyDataContext> = X extends DataContextType<any, infer T, any> ? T : AxisScale;
+export type InferDatum<X extends AnyDataContext> = X extends DataContextType<any, any, infer T> ? T : any;
+export type InferDataContext<C extends AnyDataContext = AnyDataContext> = DataContextType<InferXScaleConfig<C>, InferYScaleConfig<C>, InferDatum<C>>;
+declare const DataContext: import("octane").Context<Partial<InferDataContext<AnyDataContext>>>;
+export default DataContext;

package/src/xychart/context/EventEmitterContext.tsrx

@@ -0,0 +1,6 @@
+import { createContext } from 'octane';
+import type { EventEmitterContextType } from '../types';
+
+const EventEmitterContext = createContext<EventEmitterContextType | null>(null);
+
+export default EventEmitterContext

package/src/xychart/context/EventEmitterContext.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+declare const EventEmitterContext: import("octane").Context<import("mitt").Emitter | null>;
+export default EventEmitterContext;

package/src/xychart/context/ThemeContext.tsrx

@@ -0,0 +1,7 @@
+import { createContext } from 'octane';
+import type { XYChartTheme } from '../types';
+import lightTheme from '../theme/themes/light';
+
+const ThemeContext = createContext<XYChartTheme>(lightTheme);
+
+export default ThemeContext

package/src/xychart/context/ThemeContext.tsrx.d.ts

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { XYChartTheme } from '../types';
+declare const ThemeContext: import("octane").Context<XYChartTheme>;
+export default ThemeContext;

package/src/xychart/context/TooltipContext.tsrx

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createContext } from 'octane';
+import type { TooltipContextType } from '../types';
+
+const TooltipContext = createContext<TooltipContextType<any> | null>(null);
+
+export default TooltipContext

package/src/xychart/context/TooltipContext.tsrx.d.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+declare const TooltipContext: import("octane").Context<any>;
+export default TooltipContext;

package/src/xychart/hooks/useDataRegistry.tsrx

@@ -0,0 +1,41 @@
+import type { AxisScale } from '@octanejs/visx/axis';
+import { useMemo, useRef, useState } from 'octane';
+import DataRegistry from '../classes/DataRegistry';
+import type { DataContextType, DataRegistryEntry } from '../types';
+
+/** Hook that returns an API equivalent to DataRegistry but which updates as needed for use as a hook. */
+export default function useDataRegistry<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(
+	initialEntries: DataRegistryEntry<XScale, YScale, Datum>[] = [],
+): DataContextType<XScale, YScale, Datum>['dataRegistry'] {
+	const [, forceUpdate] = useState(0);
+	const privateRegistry = useMemo(() => new DataRegistry<XScale, YScale, Datum>(), []);
+	const initialKeysRef = useRef<string[]>([]);
+
+	const initialKeys = initialEntries.map((entry) => entry.key);
+	const currentKeySet = new Set(initialKeys);
+	const removedKeys = initialKeysRef.current.filter((key) => !currentKeySet.has(key));
+	if (removedKeys.length > 0) privateRegistry.unregisterData(removedKeys);
+	if (initialEntries.length > 0) privateRegistry.registerData(initialEntries);
+	initialKeysRef.current = initialKeys;
+
+	return useMemo(
+		() => ({
+			registerData: (
+				...params: Parameters<DataContextType<XScale, YScale, Datum>['dataRegistry']['registerData']>
+			) => {
+				privateRegistry.registerData(...params);
+				forceUpdate((version) => version + 1);
+			},
+			unregisterData: (
+				...params: Parameters<DataContextType<XScale, YScale, Datum>['dataRegistry']['unregisterData']>
+			) => {
+				privateRegistry.unregisterData(...params);
+				forceUpdate((version) => version + 1);
+			},
+			entries: () => privateRegistry.entries(),
+			get: (key: string) => privateRegistry.get(key),
+			keys: () => privateRegistry.keys(),
+		}),
+		[privateRegistry],
+	);
+}

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

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { DataContextType, DataRegistryEntry } from '../types';
+/** Hook that returns an API equivalent to DataRegistry but which updates as needed for use as a hook. */
+export default function useDataRegistry<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(initialEntries?: DataRegistryEntry<XScale, YScale, Datum>[]): DataContextType<XScale, YScale, Datum>['dataRegistry'];