@octanejs/visx 0.1.0

package/src/a11y/useChartKeyboardNav.tsrx

@@ -0,0 +1,234 @@
+import type { KeyboardEvent, RefCallback } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
+
+import type { ChartA11yConfig, ChartA11yFocusedPoint } from './types';
+import { DEFAULT_POINT_DESCRIPTION_THRESHOLD, normalizeChartA11yData } from './utils/data';
+import {
+	focusChartA11yPoint,
+	getChartA11ySeriesLengths,
+	initialChartA11yKeyboardState,
+	transitionChartA11yKeyboardState,
+} from './keyboard/stateMachine';
+import type {
+	ChartA11yKeyboardIntent,
+	ChartA11yKeyboardState,
+	ChartA11yPointFocus,
+} from './keyboard/stateMachine';
+
+const defaultKeyboardHelp = 'Press Enter to explore chart data, arrow keys to move, Home and End for boundaries, and Escape to exit.';
+
+export type UseChartKeyboardNavConfig<Datum> =
+	Pick<ChartA11yConfig<Datum>, | 'data'
+	| 'keyboardNavEnabled'
+	| 'locale'
+	| 'onPointFocus'
+	| 'pointDescriptionThreshold'
+	| 'series'> & {
+		onKeyboardHelp?: (message: string) => void;
+	};
+
+export type UseChartKeyboardNavSvgProps = {
+	tabIndex?: 0;
+	onKeyDown?: (event: KeyboardEvent<SVGSVGElement>) => void;
+	ref: RefCallback<SVGSVGElement>;
+};
+
+export type UseChartKeyboardNavPointProps = {
+	ref: RefCallback<SVGElement>;
+	tabIndex: 0 | -1;
+	onFocus: () => void;
+	'data-a11y-focused'?: boolean;
+};
+
+export type UseChartKeyboardNavResult = {
+	svgProps: UseChartKeyboardNavSvgProps;
+	getPointProps: (seriesIndex: number, index: number) => UseChartKeyboardNavPointProps;
+	mode: ChartA11yKeyboardState['mode'];
+	focusedPoint: ChartA11yPointFocus | null;
+	focusPoint: (point: ChartA11yPointFocus | null) => void;
+};
+
+function getPointKey({ seriesIndex, index }: ChartA11yPointFocus) {
+	return `${seriesIndex}:${index}`;
+}
+
+function getKeyboardIntent(
+	event: KeyboardEvent<SVGSVGElement>,
+	mode: ChartA11yKeyboardState['mode'],
+): ChartA11yKeyboardIntent | null {
+	if (mode === 'chart') {
+		return event.key === 'Enter' || event.key === ' ' ? 'enter' : null;
+	}
+
+	if (event.key === 'ArrowRight') {
+		return 'nextPoint';
+	}
+
+	if (event.key === 'ArrowLeft') {
+		return 'previousPoint';
+	}
+
+	if (event.key === 'ArrowDown') {
+		return 'nextSeries';
+	}
+
+	if (event.key === 'ArrowUp') {
+		return 'previousSeries';
+	}
+
+	if (event.key === 'Home') {
+		return event.ctrlKey ? 'firstChartPoint' : 'firstPoint';
+	}
+
+	if (event.key === 'End') {
+		return event.ctrlKey ? 'lastChartPoint' : 'lastPoint';
+	}
+
+	if (event.key === 'Escape') {
+		return 'exit';
+	}
+
+	return null;
+}
+
+function focusElement(element: SVGElement | null | undefined) {
+	const focusableElement = element as (SVGElement & { focus?: () => void }) | null | undefined;
+
+	focusableElement?.focus?.();
+}
+
+export function useChartKeyboardNav<Datum>({
+	data,
+	keyboardNavEnabled = true,
+	locale,
+	onKeyboardHelp,
+	onPointFocus,
+	pointDescriptionThreshold = DEFAULT_POINT_DESCRIPTION_THRESHOLD,
+	series,
+}: UseChartKeyboardNavConfig<Datum>): UseChartKeyboardNavResult {
+	const svgRef = useRef<SVGSVGElement | null>(null);
+	const pointElementsRef = useRef(new Map<string, SVGElement>());
+	const normalized = useMemo(() => normalizeChartA11yData({ data, series }), [data, series]);
+	const seriesLengths = useMemo(
+		() => getChartA11ySeriesLengths(normalized.series.map(({ data: seriesData }) => seriesData)),
+		[normalized.series],
+	);
+	const navigationEnabled =
+		keyboardNavEnabled && normalized.pointCount > 0 &&
+			normalized.pointCount <= pointDescriptionThreshold;
+	const [state, setState] = useState<ChartA11yKeyboardState>(initialChartA11yKeyboardState);
+	const { focusedPoint } = state;
+
+	useEffect(() => {
+		if (!navigationEnabled) {
+			setState(initialChartA11yKeyboardState);
+		}
+	}, [navigationEnabled]);
+
+	useEffect(() => {
+		if (!navigationEnabled || state.mode !== 'data' || !focusedPoint) {
+			return;
+		}
+
+		const focusedElement = pointElementsRef.current.get(getPointKey(focusedPoint));
+		const focusedSeries = normalized.series[focusedPoint.seriesIndex];
+		const datum = focusedSeries?.data[focusedPoint.index];
+
+		focusElement(focusedElement);
+
+		if (datum != null) {
+			onPointFocus?.(
+				{
+					seriesIndex: focusedPoint.seriesIndex,
+					index: focusedPoint.index,
+					datum,
+				} satisfies ChartA11yFocusedPoint<Datum>,
+			);
+		}
+	}, [focusedPoint, navigationEnabled, normalized.series, onPointFocus, state.mode]);
+
+	const setSvgRef = useCallback<RefCallback<SVGSVGElement>>((node) => {
+		svgRef.current = node;
+	}, []);
+
+	const focusPoint = useCallback((point: ChartA11yPointFocus | null) => {
+		if (!navigationEnabled) {
+			return;
+		}
+
+		setState((currentState) => focusChartA11yPoint(currentState, seriesLengths, point));
+	}, [navigationEnabled, seriesLengths]);
+
+	const handleKeyDown = useCallback((event: KeyboardEvent<SVGSVGElement>) => {
+		if (!navigationEnabled) {
+			return;
+		}
+
+		if (event.key === '?' || event.key === 'F1') {
+			event.preventDefault();
+			onKeyboardHelp?.(locale?.keyboardHelp ?? defaultKeyboardHelp);
+			return;
+		}
+
+		const intent = getKeyboardIntent(event, state.mode);
+
+		if (!intent) {
+			return;
+		}
+
+		event.preventDefault();
+		setState(
+			(currentState) => transitionChartA11yKeyboardState(currentState, seriesLengths, intent),
+		);
+
+		if (intent === 'exit') {
+			svgRef.current?.focus();
+		}
+	}, [locale?.keyboardHelp, navigationEnabled, onKeyboardHelp, seriesLengths, state.mode]);
+
+	const svgProps = useMemo<UseChartKeyboardNavSvgProps>(
+		() => ({
+			...(navigationEnabled
+				? {
+						onKeyDown: handleKeyDown,
+						tabIndex: 0 as const,
+					}
+				: {}),
+			ref: setSvgRef,
+		}),
+		[handleKeyDown, navigationEnabled, setSvgRef],
+	);
+
+	const getPointProps = useCallback((
+		seriesIndex: number,
+		index: number,
+	): UseChartKeyboardNavPointProps => {
+		const point = { seriesIndex, index };
+		const isFocused =
+			state.mode === 'data' && focusedPoint?.seriesIndex === seriesIndex &&
+				focusedPoint?.index === index;
+
+		return {
+			ref: (node) => {
+				const key = getPointKey(point);
+
+				if (node) {
+					pointElementsRef.current.set(key, node);
+				} else {
+					pointElementsRef.current.delete(key);
+				}
+			},
+			tabIndex: isFocused ? 0 : -1,
+			onFocus: () => focusPoint(point),
+			'data-a11y-focused': isFocused || undefined,
+		};
+	}, [focusPoint, focusedPoint, state.mode]);
+
+	return {
+		svgProps,
+		getPointProps,
+		mode: state.mode,
+		focusedPoint,
+		focusPoint,
+	};
+}

package/src/a11y/useChartKeyboardNav.tsrx.d.ts

@@ -0,0 +1,26 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { KeyboardEvent, RefCallback } from 'react';
+import type { ChartA11yConfig } from './types';
+import type { ChartA11yKeyboardState, ChartA11yPointFocus } from './keyboard/stateMachine';
+export type UseChartKeyboardNavConfig<Datum> = Pick<ChartA11yConfig<Datum>, 'data' | 'keyboardNavEnabled' | 'locale' | 'onPointFocus' | 'pointDescriptionThreshold' | 'series'> & {
+    onKeyboardHelp?: (message: string) => void;
+};
+export type UseChartKeyboardNavSvgProps = {
+    tabIndex?: 0;
+    onKeyDown?: (event: KeyboardEvent<SVGSVGElement>) => void;
+    ref: RefCallback<SVGSVGElement>;
+};
+export type UseChartKeyboardNavPointProps = {
+    ref: RefCallback<SVGElement>;
+    tabIndex: 0 | -1;
+    onFocus: () => void;
+    'data-a11y-focused'?: boolean;
+};
+export type UseChartKeyboardNavResult = {
+    svgProps: UseChartKeyboardNavSvgProps;
+    getPointProps: (seriesIndex: number, index: number) => UseChartKeyboardNavPointProps;
+    mode: ChartA11yKeyboardState['mode'];
+    focusedPoint: ChartA11yPointFocus | null;
+    focusPoint: (point: ChartA11yPointFocus | null) => void;
+};
+export declare function useChartKeyboardNav<Datum>({ data, keyboardNavEnabled, locale, onKeyboardHelp, onPointFocus, pointDescriptionThreshold, series, }: UseChartKeyboardNavConfig<Datum>): UseChartKeyboardNavResult;

package/src/a11y/utils/data.ts

@@ -0,0 +1,80 @@
+import type { ChartA11yConfig, ChartA11ySeriesConfig } from '../types';
+
+export const DEFAULT_CHART_A11Y_ID_PREFIX = 'visx-a11y';
+export const DEFAULT_POINT_DESCRIPTION_THRESHOLD = 150;
+export const DEFAULT_SINGLE_SERIES_LABEL = 'Data';
+
+export type NormalizedChartA11ySeries<Datum> = {
+	index: number;
+	label: string;
+	data: readonly Datum[];
+};
+
+export type NormalizedChartA11yData<Datum> = {
+	series: NormalizedChartA11ySeries<Datum>[];
+	isMultiSeries: boolean;
+	pointCount: number;
+	maxSeriesLength: number;
+};
+
+function isNestedSeriesData<Datum>(
+	data: ChartA11yConfig<Datum>['data'],
+	seriesConfig: readonly ChartA11ySeriesConfig<Datum>[] | undefined,
+): data is readonly (readonly Datum[])[] {
+	const firstDatum = data[0];
+
+	if (!Array.isArray(firstDatum)) {
+		return false;
+	}
+
+	return (seriesConfig?.length ?? 0) > 1;
+}
+
+function getSeriesLabel<Datum>(
+	seriesConfig: ChartA11ySeriesConfig<Datum> | undefined,
+	seriesIndex: number,
+	seriesCount: number,
+) {
+	if (typeof seriesConfig?.label === 'function') {
+		return seriesConfig.label(seriesIndex);
+	}
+
+	if (seriesConfig?.label) {
+		return seriesConfig.label;
+	}
+
+	return seriesCount === 1 ? DEFAULT_SINGLE_SERIES_LABEL : `Series ${seriesIndex + 1}`;
+}
+
+export function normalizeChartA11yData<Datum>({
+	data,
+	series: seriesConfig,
+}: Pick<ChartA11yConfig<Datum>, 'data' | 'series'>): NormalizedChartA11yData<Datum> {
+	let seriesData: readonly (readonly Datum[])[];
+
+	if (seriesConfig?.some((series) => series.data)) {
+		seriesData = seriesConfig.map((series) => series.data ?? []);
+	} else if (isNestedSeriesData(data, seriesConfig)) {
+		seriesData = data;
+	} else {
+		seriesData = [data];
+	}
+
+	const series = seriesData.map((seriesDatum, index) => ({
+		index,
+		label: getSeriesLabel(seriesConfig?.[index], index, seriesData.length),
+		data: seriesDatum,
+	}));
+	const maxSeriesLength = series.reduce(
+		(maxLength, { data: seriesDatum }) => Math.max(maxLength, seriesDatum.length),
+		0,
+	);
+	const pointCount = series.reduce((total, { data: seriesDatum }) => total + seriesDatum.length, 0);
+
+	return {
+		series,
+		isMultiSeries: series.length > 1,
+		pointCount,
+		maxSeriesLength,
+	};
+}

package/src/a11y/utils/format.ts

@@ -0,0 +1,73 @@
+import type { ChartA11yConfig } from '../types';
+import { DEFAULT_CHART_A11Y_ID_PREFIX } from './data';
+
+const unsafeHtmlPattern = /["&'<>]/g;
+const unsafeHtmlReplacements: Record<string, string> = {
+	'&': '&amp;',
+	'<': '&lt;',
+	'>': '&gt;',
+	'"': '&quot;',
+	"'": '&#39;',
+};
+
+function slugify(value: string) {
+	return value
+		.trim()
+		.toLowerCase()
+		.replace(/[^\da-z]+/g, '-')
+		.replace(/^-+|-+$/g, '');
+}
+
+export function escapeHtml(value: unknown) {
+	return String(value).replace(unsafeHtmlPattern, (match) => unsafeHtmlReplacements[match]);
+}
+
+export function formatChartA11yValue(value: unknown) {
+	if (value instanceof Date) {
+		return value.toISOString().slice(0, 10);
+	}
+
+	if (typeof value === 'number' && Number.isFinite(value)) {
+		return String(value);
+	}
+
+	return String(value);
+}
+
+export function getChartA11yId<Datum>({
+	id,
+	idPrefix = DEFAULT_CHART_A11Y_ID_PREFIX,
+	title,
+}: Pick<ChartA11yConfig<Datum>, 'id' | 'idPrefix' | 'title'>) {
+	return id ?? `${idPrefix}-${slugify(title) || 'chart'}`;
+}
+
+export function formatXValue<Datum>(
+	config: Pick<ChartA11yConfig<Datum>, 'formatX' | 'x'>,
+	datum: Datum,
+	index: number,
+	data: readonly Datum[],
+) {
+	const value = config.x(datum, index, data);
+
+	return config.formatX?.(value) ?? formatChartA11yValue(value);
+}
+
+export function formatYValue<Datum>(
+	config: Pick<ChartA11yConfig<Datum>, 'formatY' | 'y'>,
+	datum: Datum,
+	index: number,
+	data: readonly Datum[],
+) {
+	const value = config.y(datum, index, data);
+
+	return config.formatY?.(value) ?? formatChartA11yValue(value);
+}
+
+export function formatPercent(value: number) {
+	if (!Number.isFinite(value)) {
+		return '0%';
+	}
+
+	return `${Math.round(value * 10) / 10}%`;
+}

package/src/a11y/utils/table.ts

@@ -0,0 +1,81 @@
+import type { ChartA11yConfig } from '../types';
+import type { NormalizedChartA11yData } from './data';
+import { normalizeChartA11yData } from './data';
+import { formatXValue, formatYValue, getChartA11yId } from './format';
+
+export const VISUALLY_HIDDEN_STYLE = {
+	position: 'absolute',
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: 'hidden',
+	clip: 'rect(0, 0, 0, 0)',
+	whiteSpace: 'nowrap',
+	border: 0,
+} as const;
+
+export const VISUALLY_HIDDEN_STYLE_STRING =
+	'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;';
+
+export type ChartA11yTable = {
+	id: string;
+	caption: string;
+	headers: string[];
+	rows: string[][];
+};
+
+function getFirstDatumAtIndex<Datum>(normalized: NormalizedChartA11yData<Datum>, index: number) {
+	return normalized.series.find(({ data }) => data[index] != null);
+}
+
+function getXCell<Datum>(
+	config: ChartA11yConfig<Datum>,
+	normalized: NormalizedChartA11yData<Datum>,
+	index: number,
+) {
+	const series = getFirstDatumAtIndex(normalized, index);
+	const datum = series?.data[index];
+
+	return datum == null || !series ? '' : formatXValue(config, datum, index, series.data);
+}
+
+function getYCell<Datum>(
+	config: ChartA11yConfig<Datum>,
+	normalized: NormalizedChartA11yData<Datum>,
+	seriesIndex: number,
+	index: number,
+) {
+	const series = normalized.series[seriesIndex];
+	const datum = series?.data[index];
+
+	return datum == null || !series ? '' : formatYValue(config, datum, index, series.data);
+}
+
+export function getChartA11yTable<Datum>(config: ChartA11yConfig<Datum>): ChartA11yTable {
+	const normalized = normalizeChartA11yData(config);
+	const xLabel = config.xLabel ?? (config.chartType === 'histogram' ? 'Bin' : 'Category');
+	const yLabel = config.yLabel ?? 'Value';
+	const headers = normalized.isMultiSeries
+		? [xLabel, ...normalized.series.map(({ label }) => label)]
+		: [
+				xLabel,
+				normalized.series[0]?.label === 'Data' ? yLabel : (normalized.series[0]?.label ?? yLabel),
+			];
+	const rows = Array.from({ length: normalized.maxSeriesLength }, (_, index) => {
+		const yCells = normalized.isMultiSeries
+			? normalized.series.map(({ index: seriesIndex }) =>
+					getYCell(config, normalized, seriesIndex, index),
+				)
+			: [getYCell(config, normalized, 0, index)];
+
+		return [getXCell(config, normalized, index), ...yCells];
+	});
+
+	return {
+		id: `${getChartA11yId(config)}-table`,
+		caption: config.locale?.dataTableCaption?.(config.title) ?? config.title,
+		headers,
+		rows,
+	};
+}

package/src/annotation/components/Annotation.tsrx

@@ -0,0 +1,14 @@
+import { useMemo } from 'octane';
+import type { ReactNode } from 'react';
+import AnnotationContext from '../context/AnnotationContext.tsrx';
+import type { AnnotationContextType } from '../types';
+
+export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
+		/** Annotation children (Subject, Label, Connector) */
+		children: ReactNode;
+	};
+
+export default function Annotation({ x, y, dx, dy, children }: AnnotationProps) {
+	const value = useMemo(() => ({ x, y, dx, dy }), [x, y, dx, dy]);
+	return <AnnotationContext.Provider value={value}>{children}</AnnotationContext.Provider>;
+}

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

@@ -0,0 +1,8 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { AnnotationContextType } from '../types';
+export type AnnotationProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
+    /** Annotation children (Subject, Label, Connector) */
+    children: ReactNode;
+};
+export default function Annotation({ x, y, dx, dy, children }: AnnotationProps): import("react").JSX.Element;

package/src/annotation/components/CircleSubject.tsrx

@@ -0,0 +1,37 @@
+import { useContext } from 'octane';
+import type { SVGProps } from 'react';
+import cx from 'classnames';
+import type { AnnotationContextType } from '../types';
+import AnnotationContext from '../context/AnnotationContext.tsrx';
+
+export type CircleSubjectProps = Pick<AnnotationContextType, 'x' | 'y'> & {
+		/** Optional className to apply to CircleSubject in addition to 'visx-annotation-subject'. */
+		className?: string;
+		/** Color of CircleSubject. */
+		stroke?: string;
+		/** Radius of CircleSubject. */
+		radius?: number;
+	};
+
+export default function CircleSubject({
+	className,
+	x: propsX,
+	y: propsY,
+	stroke = '#222',
+	radius = 16,
+	...restProps
+}: CircleSubjectProps & Omit<SVGProps<SVGCircleElement>, keyof CircleSubjectProps>) {
+	// if props are provided, they take precedence over context
+	const annotationContext = useContext(AnnotationContext);
+
+	return <circle
+		className={cx('visx-annotation-subject', 'visx-annotation-subject-circle', className)}
+		cx={propsX || annotationContext.x}
+		cy={propsY || annotationContext.y}
+		r={radius}
+		fill="transparent"
+		pointerEvents="none"
+		stroke={stroke}
+		{...restProps}
+	/>;
+}

package/src/annotation/components/CircleSubject.tsrx.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { AnnotationContextType } from '../types';
+export type CircleSubjectProps = Pick<AnnotationContextType, 'x' | 'y'> & {
+    /** Optional className to apply to CircleSubject in addition to 'visx-annotation-subject'. */
+    className?: string;
+    /** Color of CircleSubject. */
+    stroke?: string;
+    /** Radius of CircleSubject. */
+    radius?: number;
+};
+export default function CircleSubject({ className, x: propsX, y: propsY, stroke, radius, ...restProps }: CircleSubjectProps & Omit<SVGProps<SVGCircleElement>, keyof CircleSubjectProps>): import("react").JSX.Element;

package/src/annotation/components/Connector.tsrx

@@ -0,0 +1,75 @@
+import { useContext } from 'octane';
+import type { SVGProps } from 'react';
+import cx from 'classnames';
+import type { AnnotationContextType } from '../types';
+import AnnotationContext from '../context/AnnotationContext.tsrx';
+
+// @TODO
+// add end marker support
+
+export type ConnectorProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
+		/** Optional className to apply to container in addition to 'visx-annotation-connector'. */
+		className?: string;
+		/** Connector type. */
+		type?: 'line' | 'elbow';
+		/** Color of the connector line. */
+		stroke?: string;
+		/** Optional additional props. */
+		pathProps?: SVGProps<SVGPathElement>;
+	};
+
+export default function Connector({
+	className,
+	x: propsX,
+	y: propsY,
+	dx: propsDx,
+	dy: propsDy,
+	type = 'elbow',
+	stroke = '#222',
+	pathProps,
+}: ConnectorProps) {
+	// if props are provided, they take precedence over context
+	const annotationContext = useContext(AnnotationContext);
+	const x0 =
+		propsX == null ? annotationContext.x ?? 0 : propsX;
+	const y0 =
+		propsY == null ? annotationContext.y ?? 0 : propsY;
+	const dx =
+		propsDx == null ? annotationContext.dx ?? 0 : propsDx;
+	const dy =
+		propsDy == null ? annotationContext.dy ?? 0 : propsDy;
+	let x1: number = x0; // only used with elbow type
+	let y1: number = y0;
+	const x2 = x0 + dx;
+	const y2 = y0 + dy;
+
+	if (type === 'elbow') {
+		// if dx < dy, find the intesection of y=x or y=-x from subject, with vertical line to label
+		if (Math.abs(dx) <= Math.abs(dy)) {
+			// target line is vertical x = x2
+			x1 = x2;
+			// intersection with y=x line (if dy > 0) or y=x (if dy < 0)
+			const sign =
+				dy > 0 ? 1 : -1;
+			y1 = y0 + sign * Math.abs(x1 - x0);
+		} else // if dx > dy, find the intesection of y=x or y=-x from subject, with horizontal line to label
+		{
+			// target line is horizontal y = y2
+			y1 = y2;
+			// find intersection with y=-x line (if dx > 0) or y=x (if dx < 0)
+			const sign =
+				dx > 0 ? 1 : -1;
+			x1 = x0 + sign * Math.abs(y1 - y0);
+		}
+	}
+
+	return <path
+		className={cx('visx-annotation-connector', className)}
+		strokeWidth={1}
+		stroke={stroke}
+		fill="transparent"
+		pointerEvents="none"
+		d={`M${x0},${y0}${type === 'elbow' ? `L${x1},${y1}` : ''}L${x2},${y2}`}
+		{...pathProps}
+	/>;
+}

package/src/annotation/components/Connector.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { AnnotationContextType } from '../types';
+export type ConnectorProps = Pick<AnnotationContextType, 'x' | 'y' | 'dx' | 'dy'> & {
+    /** Optional className to apply to container in addition to 'visx-annotation-connector'. */
+    className?: string;
+    /** Connector type. */
+    type?: 'line' | 'elbow';
+    /** Color of the connector line. */
+    stroke?: string;
+    /** Optional additional props. */
+    pathProps?: SVGProps<SVGPathElement>;
+};
+export default function Connector({ className, x: propsX, y: propsY, dx: propsDx, dy: propsDy, type, stroke, pathProps, }: ConnectorProps): import("react").JSX.Element;