@octanejs/visx 0.1.0

package/src/xychart/components/Tooltip.tsrx.d.ts

@@ -0,0 +1,57 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps, ReactNode } from 'react';
+import type { TooltipProps as BaseTooltipProps, UseTooltipPortalOptions } from '@octanejs/visx/tooltip';
+import type { PickD3Scale } from '@octanejs/visx/scale';
+import type { GlyphProps as RenderGlyphProps, TooltipContextType } from '../types';
+export type RenderTooltipParams<Datum extends object> = TooltipContextType<Datum> & {
+    colorScale?: PickD3Scale<'ordinal', string, string>;
+};
+export interface RenderTooltipGlyphProps<Datum extends object> extends RenderGlyphProps<Datum> {
+    glyphStyle?: SVGProps<SVGCircleElement>;
+    isNearestDatum: boolean;
+}
+export type TooltipProps<Datum extends object> = {
+    /**
+* When TooltipContext.tooltipOpen=true, this function is invoked and if the
+* return value is non-null, its content is rendered inside the tooltip container.
+* Content will be rendered in an HTML parent.
+*/
+    /**
+* When TooltipContext.tooltipOpen=true, this function is invoked and if the
+* return value is non-null, its content is rendered inside the tooltip container.
+* Content will be rendered in an HTML parent.
+*/
+    renderTooltip: (params: RenderTooltipParams<Datum>) => ReactNode;
+    /** Function which handles rendering glyphs. */
+    renderGlyph?: (params: RenderTooltipGlyphProps<Datum>) => ReactNode;
+    /** Whether to snap tooltip + crosshair x-coord to the nearest Datum x-coord instead of the event x-coord. */
+    snapTooltipToDatumX?: boolean;
+    /** Whether to snap tooltip + crosshair y-coord to the nearest Datum y-coord instead of the event y-coord. */
+    snapTooltipToDatumY?: boolean;
+    /** Whether to show a vertical line at tooltip position. */
+    showVerticalCrosshair?: boolean;
+    /** Whether to show a horizontal line at tooltip position. */
+    showHorizontalCrosshair?: boolean;
+    /** Whether to show a glyph at the tooltip position for the (single) nearest Datum. */
+    showDatumGlyph?: boolean;
+    /** Whether to show a glyph for the nearest Datum in each series. */
+    showSeriesGlyphs?: boolean;
+    /** Optional styles for the vertical crosshair, if visible. */
+    verticalCrosshairStyle?: SVGProps<SVGLineElement>;
+    /** Optional styles for the vertical crosshair, if visible. */
+    horizontalCrosshairStyle?: SVGProps<SVGLineElement>;
+    /** Optional styles for the point, if visible. */
+    glyphStyle?: SVGProps<SVGCircleElement>;
+    /**
+* Tooltip depends on ResizeObserver, which may be polyfilled globally,
+* passed to XYChart, or injected into this component.
+*/
+    resizeObserverPolyfill?: UseTooltipPortalOptions['polyfill'];
+} & Omit<BaseTooltipProps, 'left' | 'top' | 'children'> & Pick<UseTooltipPortalOptions, 'debounce' | 'detectBounds' | 'scroll' | 'zIndex'>;
+/**
+ * This is a wrapper component which bails early if tooltip is not visible.
+ * If scroll detection is enabled in UseTooltipPortalOptions, this avoids re-rendering
+ * the component on every scroll. If many charts with Tooltips are rendered on a page,
+ * this also avoids creating many resize observers / hitting browser limits.
+ */
+export default function Tooltip<Datum extends object>(props: TooltipProps<Datum>): import("react").JSX.Element | null;

package/src/xychart/components/XYChart.tsrx

@@ -0,0 +1,196 @@
+/* eslint jsx-a11y/mouse-events-have-key-events: 'off', @typescript-eslint/no-explicit-any: 'off' */
+import { useContext, useEffect } from 'octane';
+import type { ReactNode, PointerEvent } from 'react';
+import { ParentSize } from '@octanejs/visx/responsive';
+import type { ResizeObserverPolyfill } from '@octanejs/visx/responsive';
+import type { AxisScaleOutput } from '@octanejs/visx/axis';
+import type { ScaleConfig } from '@octanejs/visx/scale';
+
+import DataContext from '../context/DataContext.tsrx';
+import type { Margin, EventHandlerParams } from '../types';
+import useEventEmitter from '../hooks/useEventEmitter.tsrx';
+import EventEmitterProvider from '../providers/EventEmitterProvider.tsrx';
+import TooltipContext from '../context/TooltipContext.tsrx';
+import TooltipProvider from '../providers/TooltipProvider.tsrx';
+import type { DataProviderProps } from '../providers/DataProvider.tsrx';
+import DataProvider from '../providers/DataProvider.tsrx';
+import useEventEmitters from '../hooks/useEventEmitters.tsrx';
+import { XYCHART_EVENT_SOURCE } from '../constants';
+import useEventHandlers, {
+	POINTER_EVENTS_ALL,
+	POINTER_EVENTS_NEAREST,
+} from '../hooks/useEventHandlers.tsrx';
+
+const DEFAULT_MARGIN = { top: 50, right: 50, bottom: 50, left: 50 };
+
+export type XYChartProps<XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, Datum extends object> = {
+	/** aria-label for the chart svg element. */
+	accessibilityLabel?: string;
+	/** Whether to capture and dispatch pointer events to EventEmitter context (which e.g., Series subscribe to). */
+	captureEvents?: boolean;
+	/** Total width of the desired chart svg, including margin. */
+	width?: number;
+	/** Total height of the desired chart svg, including margin. */
+	height?: number;
+	/** Margin to apply around the outside. */
+	margin?: Margin;
+	/** XYChart children (Series, Tooltip, etc.). */
+	children: ReactNode;
+	/** If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the theme. */
+	theme?: DataProviderProps<XScaleConfig, YScaleConfig>['theme'];
+	/** If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the xScale config. */
+	xScale?: DataProviderProps<XScaleConfig, YScaleConfig>['xScale'];
+	/** If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the yScale config. */
+	yScale?: DataProviderProps<XScaleConfig, YScaleConfig>['yScale'];
+	/* If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as horizontal. Determines whether Series will be plotted horizontally (e.g., horizontal bars). By default this will try to be inferred based on scale types. */
+	horizontal?: boolean | 'auto';
+	/** Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+	onPointerMove?: ({
+		datum,
+		distanceX,
+		distanceY,
+		event,
+		index,
+		key,
+		svgPoint,
+	}: EventHandlerParams<Datum>) => void;
+	/** Callback invoked for onPointerOut events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+	onPointerOut?: (/** The PointerEvent. */
+	/** The PointerEvent. */
+	event: PointerEvent) => void;
+	/** Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+	onPointerUp?: ({
+		datum,
+		distanceX,
+		distanceY,
+		event,
+		index,
+		key,
+		svgPoint,
+	}: EventHandlerParams<Datum>) => void;
+	/** Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+	onPointerDown?: ({
+		datum,
+		distanceX,
+		distanceY,
+		event,
+		index,
+		key,
+		svgPoint,
+	}: EventHandlerParams<Datum>) => void;
+	/** Whether to invoke PointerEvent handlers for all dataKeys, or the nearest dataKey. */
+	pointerEventsDataKey?: 'all' | 'nearest';
+	/**
+ * Responsive charts, <Tooltip />, and <AnnotationLabel /> depend on ResizeObserver
+ * which may be polyfilled globally, passed to individual components or injected once
+ * into this component.
+ */
+	resizeObserverPolyfill?: ResizeObserverPolyfill
+};
+
+const allowedEventSources = [XYCHART_EVENT_SOURCE];
+
+export default function XYChart<XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, Datum extends object>(props: XYChartProps<XScaleConfig, YScaleConfig, Datum>) {
+	const {
+		accessibilityLabel = 'XYChart',
+		captureEvents = true,
+		children,
+		height,
+		horizontal,
+		margin = DEFAULT_MARGIN,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		pointerEventsDataKey = 'nearest',
+		theme,
+		width,
+		xScale,
+		yScale,
+		// pass prop to context so it can be used anywhere
+		resizeObserverPolyfill: resizeObserverPolyfillProp,
+	} = props;
+	const { setDimensions, resizeObserverPolyfill } = useContext(DataContext);
+	const tooltipContext = useContext(TooltipContext);
+	const emit = useEventEmitter();
+
+	// update dimensions in context
+	useEffect(() => {
+		if (setDimensions && width != null && height != null && width > 0 && height > 0) {
+			setDimensions({ width, height, margin });
+		}
+	}, [setDimensions, width, height, margin]);
+
+	const eventEmitters = useEventEmitters({ source: XYCHART_EVENT_SOURCE });
+	useEventHandlers({
+		dataKey: pointerEventsDataKey === 'nearest' ? POINTER_EVENTS_NEAREST : POINTER_EVENTS_ALL,
+		onPointerMove,
+		onPointerOut,
+		onPointerUp,
+		onPointerDown,
+		allowedSources: allowedEventSources,
+	});
+
+	// if Context or dimensions are not available, wrap self in the needed providers
+	if (!setDimensions) {
+		if (!xScale || !yScale) {
+			console.warn(
+				'[@octanejs/visx/xychart] XYChart: When no DataProvider is available in context, you must pass xScale & yScale config to XYChart.',
+			);
+			return null;
+		}
+		return <DataProvider
+			xScale={xScale}
+			yScale={yScale}
+			theme={theme}
+			initialDimensions={{ width, height, margin }}
+			horizontal={horizontal}
+			resizeObserverPolyfill={resizeObserverPolyfillProp}
+		>
+			<XYChart {...props} />
+		</DataProvider>;
+	}
+	if (width == null || height == null) {
+		return <ParentSize resizeObserverPolyfill={resizeObserverPolyfill}>
+			{(dims) =>
+				<XYChart
+					{...props}
+					width={props.width == null ? dims.width : props.width}
+					height={props.height == null ? dims.height : props.height}
+				/>}
+		</ParentSize>;
+	}
+
+	if (tooltipContext == null) {
+		return <TooltipProvider>
+			<XYChart {...props} />
+		</TooltipProvider>;
+	}
+
+	// EventEmitterProvider should be the last wrapper so we do not duplicate handlers
+	if (emit == null) {
+		return <EventEmitterProvider>
+			<XYChart {...props} />
+		</EventEmitterProvider>;
+	}
+
+	if (width <= 0 || height <= 0) {
+		if (process.env.NODE_ENV === 'development') {
+			console.info('XYChart has a zero width or height, bailing', { width, height });
+		}
+		return null;
+	}
+
+	return <svg width={width} height={height} aria-label={accessibilityLabel}>
+		{children}
+		{captureEvents &&
+			<rect
+				x={margin.left}
+				y={margin.top}
+				width={width - margin.left - margin.right}
+				height={height - margin.top - margin.bottom}
+				fill="transparent"
+				{...eventEmitters}
+			/>}
+	</svg>;
+}

package/src/xychart/components/XYChart.tsrx.d.ts

@@ -0,0 +1,47 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, PointerEvent } from 'react';
+import type { ResizeObserverPolyfill } from '@octanejs/visx/responsive';
+import type { AxisScaleOutput } from '@octanejs/visx/axis';
+import type { ScaleConfig } from '@octanejs/visx/scale';
+import type { Margin, EventHandlerParams } from '../types';
+import type { DataProviderProps } from '../providers/DataProvider.tsrx';
+export type XYChartProps<XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, Datum extends object> = {
+    /** aria-label for the chart svg element. */
+    accessibilityLabel?: string;
+    /** Whether to capture and dispatch pointer events to EventEmitter context (which e.g., Series subscribe to). */
+    captureEvents?: boolean;
+    /** Total width of the desired chart svg, including margin. */
+    width?: number;
+    /** Total height of the desired chart svg, including margin. */
+    height?: number;
+    /** Margin to apply around the outside. */
+    margin?: Margin;
+    /** XYChart children (Series, Tooltip, etc.). */
+    children: ReactNode;
+    /** If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the theme. */
+    theme?: DataProviderProps<XScaleConfig, YScaleConfig>['theme'];
+    /** If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the xScale config. */
+    xScale?: DataProviderProps<XScaleConfig, YScaleConfig>['xScale'];
+    /** If DataContext is not available, XYChart will wrap itself in a DataProvider and set this as the yScale config. */
+    yScale?: DataProviderProps<XScaleConfig, YScaleConfig>['yScale'];
+    horizontal?: boolean | 'auto';
+    /** Callback invoked for onPointerMove events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+    onPointerMove?: ({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void;
+    /** Callback invoked for onPointerOut events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+    onPointerOut?: (/** The PointerEvent. */
+    /** The PointerEvent. */
+    event: PointerEvent) => void;
+    /** Callback invoked for onPointerUp events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+    onPointerUp?: ({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void;
+    /** Callback invoked for onPointerDown events for the nearest Datum to the PointerEvent _for each Series with pointerEvents={true}_. */
+    onPointerDown?: ({ datum, distanceX, distanceY, event, index, key, svgPoint, }: EventHandlerParams<Datum>) => void;
+    /** Whether to invoke PointerEvent handlers for all dataKeys, or the nearest dataKey. */
+    pointerEventsDataKey?: 'all' | 'nearest';
+    /**
+ * Responsive charts, <Tooltip />, and <AnnotationLabel /> depend on ResizeObserver
+ * which may be polyfilled globally, passed to individual components or injected once
+ * into this component.
+ */
+    resizeObserverPolyfill?: ResizeObserverPolyfill;
+};
+export default function XYChart<XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>, Datum extends object>(props: XYChartProps<XScaleConfig, YScaleConfig, Datum>): import("react").JSX.Element | null;

package/src/xychart/components/annotation/AnimatedAnnotation.tsrx

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef } from 'octane';
+import type { FC } from 'react';
+import { useSpring, animated, to } from '../../../internal/spring.tsrx';
+import {
+  Annotation as VisxAnnotation,
+  EditableAnnotation as VisxEditableAnnotation,
+} from '@octanejs/visx/annotation';
+import type {
+  AnnotationProps as VisxAnnotationProps,
+  EditableAnnotationProps,
+  EditableAnnotationProps as VisxEditableAnnotationProps,
+} from '@octanejs/visx/annotation';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BaseAnnotationProps } from './private/BaseAnnotation.tsrx';
+import BaseAnnotation from './private/BaseAnnotation.tsrx';
+
+export type AnnotationProps<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object,
+> = { editable?: boolean } & Omit<
+  BaseAnnotationProps<XScale, YScale, Datum>,
+  'AnnotationComponent'
+>;
+
+function BaseAnimatedAnnotation({
+  x = 0,
+  y = 0,
+  AnnotationComponent,
+  ...props
+}: {
+  AnnotationComponent: FC<VisxAnnotationProps> | FC<VisxEditableAnnotationProps>;
+} & VisxAnnotationProps &
+  EditableAnnotationProps) {
+  const lastXY = useRef({ x, y });
+
+  // in order to keep x/y/dx/dy accurate in AnnotationComponent, animate the delta
+  // between positions, to an x + y transform of zero from the previous value
+  const animatedXY = useSpring({
+    from: { x: lastXY.current.x - x, y: lastXY.current.y - y },
+    to: { x: 0, y: 0 },
+    reset: true,
+  });
+
+  useEffect(() => {
+    lastXY.current = { x, y };
+  }, [x, y]);
+
+  return <animated.g // for perf animate a group element not the Annotation itself
+      transform={to([animatedXY.x, animatedXY.y], (xVal, yVal) => `translate(${xVal}, ${yVal})`)}
+    >
+      <AnnotationComponent x={x} y={y} {...props} />
+    </animated.g>
+}
+
+export default function AnimatedAnnotation<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object,
+>({ editable, ...props }: AnnotationProps<XScale, YScale, Datum>) {
+  const AnnotationComponent: BaseAnnotationProps<XScale, YScale, Datum>['AnnotationComponent'] =
+    useCallback(
+      (annotationProps: VisxAnnotationProps & VisxEditableAnnotationProps) => (
+        <BaseAnimatedAnnotation
+          AnnotationComponent={editable ? VisxEditableAnnotation : VisxAnnotation}
+          {...annotationProps}
+        />
+      ),
+      [editable],
+    );
+  return <BaseAnnotation AnnotationComponent={AnnotationComponent} {...props} />;
+}

package/src/xychart/components/annotation/AnimatedAnnotation.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BaseAnnotationProps } from './private/BaseAnnotation.tsrx';
+export type AnnotationProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = {
+    editable?: boolean;
+} & Omit<BaseAnnotationProps<XScale, YScale, Datum>, 'AnnotationComponent'>;
+export default function AnimatedAnnotation<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ editable, ...props }: AnnotationProps<XScale, YScale, Datum>): import("react").JSX.Element;

package/src/xychart/components/annotation/Annotation.tsrx

@@ -0,0 +1,20 @@
+import {
+	Annotation as VisxAnnotation,
+	EditableAnnotation as VisxEditableAnnotation,
+} from '@octanejs/visx/annotation';
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BaseAnnotationProps } from './private/BaseAnnotation.tsrx';
+import BaseAnnotation from './private/BaseAnnotation.tsrx';
+
+export type AnnotationProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	{ editable?: boolean } & Omit<BaseAnnotationProps<XScale, YScale, Datum>, 'AnnotationComponent'>;
+
+export default function Annotation<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	editable,
+	...props
+}: AnnotationProps<XScale, YScale, Datum>) {
+	return <BaseAnnotation
+		AnnotationComponent={editable ? VisxEditableAnnotation : VisxAnnotation}
+		{...props}
+	/>;
+}

package/src/xychart/components/annotation/Annotation.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { BaseAnnotationProps } from './private/BaseAnnotation.tsrx';
+export type AnnotationProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = {
+    editable?: boolean;
+} & Omit<BaseAnnotationProps<XScale, YScale, Datum>, 'AnnotationComponent'>;
+export default function Annotation<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ editable, ...props }: AnnotationProps<XScale, YScale, Datum>): import("react").JSX.Element;

package/src/xychart/components/annotation/AnnotationCircleSubject.tsrx

@@ -0,0 +1,12 @@
+import { useContext } from 'octane';
+import { CircleSubject as BaseCircleSubject } from '@octanejs/visx/annotation';
+import type { CircleSubjectProps } from '@octanejs/visx/annotation';
+import DataContext from '../../context/DataContext.tsrx';
+
+export type AnnotationSubjectCircleProps = CircleSubjectProps;
+
+/** AnnotationSubjectCircle which provides color from theme. */
+export default function AnnotationCircleSubject(props: AnnotationSubjectCircleProps) {
+	const { theme } = useContext(DataContext);
+	return <BaseCircleSubject stroke={theme?.axisStyles.x.bottom.axisLine.stroke} {...props} />;
+}

package/src/xychart/components/annotation/AnnotationCircleSubject.tsrx.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { CircleSubjectProps } from '@octanejs/visx/annotation';
+export type AnnotationSubjectCircleProps = CircleSubjectProps;
+/** AnnotationSubjectCircle which provides color from theme. */
+export default function AnnotationCircleSubject(props: AnnotationSubjectCircleProps): import("react").JSX.Element;

package/src/xychart/components/annotation/AnnotationConnector.tsrx

@@ -0,0 +1,12 @@
+import { useContext } from 'octane';
+import { Connector as BaseConnector } from '@octanejs/visx/annotation';
+import type { ConnectorProps as BaseConnectorProps } from '@octanejs/visx/annotation';
+import DataContext from '../../context/DataContext.tsrx';
+
+export type AnnotationConnectorProps = BaseConnectorProps;
+
+/** AnnotationConnector which provides color from theme. */
+export default function AnnotationConnector(props: AnnotationConnectorProps) {
+	const { theme } = useContext(DataContext);
+	return <BaseConnector stroke={theme?.axisStyles.x.bottom.axisLine.stroke} {...props} />;
+}

package/src/xychart/components/annotation/AnnotationConnector.tsrx.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ConnectorProps as BaseConnectorProps } from '@octanejs/visx/annotation';
+export type AnnotationConnectorProps = BaseConnectorProps;
+/** AnnotationConnector which provides color from theme. */
+export default function AnnotationConnector(props: AnnotationConnectorProps): import("react").JSX.Element;

package/src/xychart/components/annotation/AnnotationLabel.tsrx

@@ -0,0 +1,29 @@
+import { useContext } from 'octane';
+import { Label as BaseLabel } from '@octanejs/visx/annotation';
+import type { LabelProps as BaseLabelProps } from '@octanejs/visx/annotation';
+import DataContext from '../../context/DataContext.tsrx';
+
+export type AnnotationLabelProps = BaseLabelProps;
+
+const defaultBackgroundProps = { fillOpacity: 0.7 };
+
+/** AnnotationLabel which provides text styles from theme. */
+export default function AnnotationLabel(props: AnnotationLabelProps) {
+	const { theme, resizeObserverPolyfill } = useContext(DataContext);
+	const titleProps = theme?.svgLabelBig;
+	const subtitleProps = theme?.svgLabelSmall;
+	return <BaseLabel
+		anchorLineStroke={theme?.axisStyles.x.bottom.axisLine.stroke}
+		backgroundFill={theme?.backgroundColor}
+		backgroundProps={defaultBackgroundProps}
+		showAnchorLine
+		subtitleFontSize={subtitleProps?.fontSize}
+		subtitleFontWeight={subtitleProps?.fontWeight}
+		subtitleProps={subtitleProps}
+		titleFontSize={titleProps?.fontSize}
+		titleFontWeight={titleProps?.fontWeight}
+		titleProps={titleProps}
+		resizeObserverPolyfill={resizeObserverPolyfill}
+		{...props}
+	/>;
+}

package/src/xychart/components/annotation/AnnotationLabel.tsrx.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { LabelProps as BaseLabelProps } from '@octanejs/visx/annotation';
+export type AnnotationLabelProps = BaseLabelProps;
+/** AnnotationLabel which provides text styles from theme. */
+export default function AnnotationLabel(props: AnnotationLabelProps): import("react").JSX.Element;

package/src/xychart/components/annotation/AnnotationLineSubject.tsrx

@@ -0,0 +1,28 @@
+import { useContext } from 'octane';
+import type { SVGProps } from 'react';
+import { LineSubject as BaseLineSubject } from '@octanejs/visx/annotation';
+import type { LineSubjectProps } from '@octanejs/visx/annotation';
+import DataContext from '../../context/DataContext.tsrx';
+
+export type AnnotationLineSubjectProps = Omit<LineSubjectProps, 'min' | 'max'> & {
+		min?: number;
+		max?: number;
+	};
+
+/** AnnotationLineSubject which provides color and dimensions from context. */
+export default function AnnotationLineSubject({
+	min,
+	max,
+	...props
+}: AnnotationLineSubjectProps & Omit<SVGProps<SVGLineElement>, keyof AnnotationLineSubjectProps>) {
+	const { theme, margin, innerHeight = 0, innerWidth = 0 } = useContext(DataContext);
+	return <BaseLineSubject
+		stroke={theme?.axisStyles.x.bottom.axisLine.stroke}
+		min={min ?? (props.orientation === 'horizontal' ? margin?.left : margin?.top) ?? 0}
+		max={max ??
+			(props.orientation === 'horizontal'
+				? (margin?.left ?? 0) + innerWidth
+				: (margin?.top ?? 0) + innerHeight)}
+		{...props}
+	/>;
+}

package/src/xychart/components/annotation/AnnotationLineSubject.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { LineSubjectProps } from '@octanejs/visx/annotation';
+export type AnnotationLineSubjectProps = Omit<LineSubjectProps, 'min' | 'max'> & {
+    min?: number;
+    max?: number;
+};
+/** AnnotationLineSubject which provides color and dimensions from context. */
+export default function AnnotationLineSubject({ min, max, ...props }: AnnotationLineSubjectProps & Omit<SVGProps<SVGLineElement>, keyof AnnotationLineSubjectProps>): import("react").JSX.Element;

package/src/xychart/components/annotation/private/BaseAnnotation.tsrx

@@ -0,0 +1,86 @@
+import { useContext, useMemo } from 'octane';
+import type { FC } from 'react';
+import type { AnnotationProps, EditableAnnotationProps } from '@octanejs/visx/annotation';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import { coerceNumber } from '@octanejs/visx/scale';
+import type { AxisScale } from '@octanejs/visx/axis';
+import DataContext from '../../../context/DataContext.tsrx';
+import getScaleBandwidth from '../../../utils/getScaleBandwidth';
+import isValidNumber from '../../../typeguards/isValidNumber';
+
+export type BaseAnnotationProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
+	Pick<EditableAnnotationProps, | 'canEditLabel'
+	| 'canEditSubject'
+	| 'children'
+	| 'dx'
+	| 'dy'
+	| 'onDragEnd'
+	| 'onDragMove'
+	| 'onDragStart'> & {
+		/** Annotation component to render. */
+		AnnotationComponent: FC<AnnotationProps> | FC<EditableAnnotationProps>;
+		/** Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified. */
+		dataKey?: string;
+		/** Datum to annotate, used for Annotation positioning. */
+		datum: Datum;
+		/** If dataKey is not specified, you must specify an xAccessor for datum. */
+		xAccessor?: (d: Datum) => ScaleInput<XScale>;
+		/** If dataKey is not specified, you must specify an yAccessor for datum. */
+		yAccessor?: (d: Datum) => ScaleInput<YScale>;
+	};
+
+// used for auto-positioning
+const minimumLabelDimension = 16;
+
+export default function BaseAnnotation<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+	AnnotationComponent,
+	children,
+	datum,
+	dataKey,
+	xAccessor: propsXAccessor,
+	yAccessor: propsYAccessor,
+	dx: propsDx = 0,
+	dy: propsDy = 0,
+	...annotationProps
+}: BaseAnnotationProps<XScale, YScale, Datum>) {
+	const { innerHeight, innerWidth, margin, xScale, yScale, dataRegistry } =
+		useContext(DataContext) || {};
+
+	const xBandWidth = useMemo(() => (xScale ? getScaleBandwidth(xScale) : 0), [xScale]);
+	const yBandWidth = useMemo(() => (yScale ? getScaleBandwidth(yScale) : 0), [yScale]);
+
+	if ((!propsXAccessor || !propsYAccessor) && !dataKey) {
+		console.warn(
+			'[@octanejs/visx/xychart/BaseAnnotation]: dataKey or x/yAccessors must be specified.',
+		);
+		return null;
+	}
+
+	const registryEntry =
+		propsXAccessor && propsYAccessor || dataKey == null ? null : dataRegistry?.get(dataKey);
+	const xAccessor = propsXAccessor || registryEntry?.xAccessor;
+	const yAccessor = propsYAccessor || registryEntry?.yAccessor;
+
+	if (!xScale || !yScale || !innerWidth || !innerHeight || !xAccessor || !yAccessor || !margin) {
+		return null;
+	}
+
+	const x = (coerceNumber(xScale(xAccessor(datum))) ?? NaN) + xBandWidth / 2;
+	const y = (coerceNumber(yScale(yAccessor(datum))) ?? NaN) + yBandWidth / 2;
+	const dx =
+		x + propsDx + minimumLabelDimension > margin.left + innerWidth ? -propsDx : propsDx;
+	const dy =
+		y + propsDy + minimumLabelDimension > margin.top + innerHeight ? -propsDy : propsDy;
+
+	return isValidNumber(x) && isValidNumber(y)
+		? <AnnotationComponent
+				width={innerWidth}
+				height={innerHeight}
+				{...annotationProps}
+				x={x}
+				y={y}
+				dx={dx}
+				dy={dy}
+			>{children}</AnnotationComponent>
+		: null;
+}

package/src/xychart/components/annotation/private/BaseAnnotation.tsrx.d.ts

@@ -0,0 +1,18 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { FC } from 'react';
+import type { AnnotationProps, EditableAnnotationProps } from '@octanejs/visx/annotation';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { AxisScale } from '@octanejs/visx/axis';
+export type BaseAnnotationProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = Pick<EditableAnnotationProps, 'canEditLabel' | 'canEditSubject' | 'children' | 'dx' | 'dy' | 'onDragEnd' | 'onDragMove' | 'onDragStart'> & {
+    /** Annotation component to render. */
+    AnnotationComponent: FC<AnnotationProps> | FC<EditableAnnotationProps>;
+    /** Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified. */
+    dataKey?: string;
+    /** Datum to annotate, used for Annotation positioning. */
+    datum: Datum;
+    /** If dataKey is not specified, you must specify an xAccessor for datum. */
+    xAccessor?: (d: Datum) => ScaleInput<XScale>;
+    /** If dataKey is not specified, you must specify an yAccessor for datum. */
+    yAccessor?: (d: Datum) => ScaleInput<YScale>;
+};
+export default function BaseAnnotation<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ AnnotationComponent, children, datum, dataKey, xAccessor: propsXAccessor, yAccessor: propsYAccessor, dx: propsDx, dy: propsDy, ...annotationProps }: BaseAnnotationProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

package/src/xychart/components/axis/AnimatedAxis.tsrx

@@ -0,0 +1,15 @@
+import type { AxisScale } from '@octanejs/visx/axis';
+import { AnimatedAxis as VxAnimatedAxis } from '@octanejs/visx/react-spring';
+import type { AnimationTrajectory } from '@octanejs/visx/react-spring';
+import type { BaseAxisProps } from './BaseAxis.tsrx';
+import BaseAxis from './BaseAxis.tsrx';
+
+export type AnimatedAxisProps<Scale extends AxisScale> =
+	Omit<BaseAxisProps<Scale>, 'AxisComponent'> & {
+		/** Animation trjectory of axis ticks. */
+		animationTrajectory?: AnimationTrajectory;
+	};
+
+export default function AnimatedAxis<Scale extends AxisScale>(props: AnimatedAxisProps<Scale>) {
+	return <BaseAxis AxisComponent={VxAnimatedAxis} {...props} />;
+}