@octanejs/visx 0.1.0

package/src/shape/shapes/SplitLinePath.tsrx.d.ts

@@ -0,0 +1,23 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { GetLineSegmentsConfig } from '../util/getSplitLineSegments';
+import type { LinePathConfig } from '../types';
+export type SplitLinePathRenderer = (renderProps: {
+    index: number;
+    segment: {
+        x: number;
+        y: number;
+    }[];
+    styles?: Omit<SVGProps<SVGPathElement>, 'x' | 'y' | 'children'>;
+}) => ReactNode;
+export type SplitLinePathProps<Datum> = {
+    /** Array of data segments, where each segment will be a separate path in the rendered line. */
+    segments: Datum[][];
+    /** Styles to apply to each segment. If fewer styles are specified than the number of segments, they will be re-used. */
+    styles: Omit<SVGProps<SVGPathElement>, 'x' | 'y' | 'children'>[];
+    /** Override render function which is passed the configured path generator as input. */
+    children?: SplitLinePathRenderer;
+    /** className applied to path element. */
+    className?: string;
+} & LinePathConfig<Datum> & Pick<GetLineSegmentsConfig, 'segmentation' | 'sampleRate'>;
+export default function SplitLinePath<Datum>({ children, className, curve, defined, segmentation, sampleRate, segments, x, y, styles, }: SplitLinePathProps<Datum>): import("react").JSX.Element;

package/src/shape/shapes/Stack.tsrx

@@ -0,0 +1,83 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { Area as AreaType, Stack as StackType, SeriesPoint, Series } from 'd3-shape';
+import type {
+	$TSFIXME,
+	AddSVGProps,
+	AccessorForArrayItem,
+	StackKey,
+	BaseStackProps,
+	AreaPathConfig,
+} from '../types';
+import { area, stack as stackPath } from '../util/D3ShapeFactories';
+
+export type StackProps<Datum, Key> = BaseStackProps<Datum, Key> & {
+		/** Returns a color for a given stack key and index. */
+		color?: (key: Key, index: number) => string;
+		/** Override render function which is passed the configured arc generator as input. */
+		children?: (args: {
+			stacks: Series<Datum, Key>[];
+			path: AreaType<SeriesPoint<Datum>>;
+			stack: StackType<$TSFIXME, Datum, Key>;
+		}) => ReactNode;
+		/** Sets the x0 accessor function, and sets x1 to null. */
+		x?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+		/** Specifies the x0 accessor function which defaults to d => d[0]. */
+		x0?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+		/** Specifies the x1 accessor function which defaults to null. */
+		x1?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+		/** Specifies the y0 accessor function which defaults to d => 0. */
+		y0?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+		/** Specifies the y1 accessor function which defaults to d => d[1]. */
+		y1?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+	} & Pick<AreaPathConfig<SeriesPoint<Datum>>, 'defined' | 'curve'>;
+
+export default function Stack<Datum, Key extends StackKey = StackKey>({
+	className,
+	top,
+	left,
+	keys,
+	data,
+	curve,
+	defined,
+	x,
+	x0,
+	x1,
+	y0,
+	y1,
+	value,
+	order,
+	offset,
+	color,
+	children,
+	...restProps
+}: AddSVGProps<StackProps<Datum, Key>, SVGPathElement>) {
+	const stack = stackPath<Datum, Key>({ keys, value, order, offset });
+	const path = area<SeriesPoint<Datum>>({
+		x,
+		x0,
+		x1,
+		y0,
+		y1,
+		curve,
+		defined,
+	});
+
+	const stacks = stack(data);
+
+	if (children) return <>
+		{children({ stacks, path, stack })}
+	</>;
+
+	return <Group top={top} left={left}>{stacks.map(
+		(series, i) =>
+			<path
+				className={cx('visx-stack', className)}
+				key={`stack-${i}-${series.key || ''}`}
+				d={path(series) || ''}
+				fill={color?.(series.key, i)}
+				{...restProps}
+			/>,
+	)}</Group>;
+}

package/src/shape/shapes/Stack.tsrx.d.ts

@@ -0,0 +1,25 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { Area as AreaType, Stack as StackType, SeriesPoint, Series } from 'd3-shape';
+import type { $TSFIXME, AddSVGProps, AccessorForArrayItem, StackKey, BaseStackProps, AreaPathConfig } from '../types';
+export type StackProps<Datum, Key> = BaseStackProps<Datum, Key> & {
+    /** Returns a color for a given stack key and index. */
+    color?: (key: Key, index: number) => string;
+    /** Override render function which is passed the configured arc generator as input. */
+    children?: (args: {
+        stacks: Series<Datum, Key>[];
+        path: AreaType<SeriesPoint<Datum>>;
+        stack: StackType<$TSFIXME, Datum, Key>;
+    }) => ReactNode;
+    /** Sets the x0 accessor function, and sets x1 to null. */
+    x?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+    /** Specifies the x0 accessor function which defaults to d => d[0]. */
+    x0?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+    /** Specifies the x1 accessor function which defaults to null. */
+    x1?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+    /** Specifies the y0 accessor function which defaults to d => 0. */
+    y0?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+    /** Specifies the y1 accessor function which defaults to d => d[1]. */
+    y1?: AccessorForArrayItem<SeriesPoint<Datum>, number>;
+} & Pick<AreaPathConfig<SeriesPoint<Datum>>, 'defined' | 'curve'>;
+export default function Stack<Datum, Key extends StackKey = StackKey>({ className, top, left, keys, data, curve, defined, x, x0, x1, y0, y1, value, order, offset, color, children, ...restProps }: AddSVGProps<StackProps<Datum, Key>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/link/curve/LinkHorizontalCurve.tsrx

@@ -0,0 +1,63 @@
+import cx from 'classnames';
+import { path as d3Path } from 'd3-path';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getY, getX, getSource, getTarget } from '../../../util/accessors';
+
+export function pathHorizontalCurve<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+	percent,
+}: Required<AccessorProps<Link, Node>> & { percent: number }) {
+	return (link: Link) => {
+		const sourceData = source(link);
+		const targetData = target(link);
+
+		const sx = x(sourceData);
+		const sy = y(sourceData);
+		const tx = x(targetData);
+		const ty = y(targetData);
+
+		const dx = tx - sx;
+		const dy = ty - sy;
+		const ix = percent * (dx + dy);
+		const iy = percent * (dy - dx);
+
+		const path = d3Path();
+		path.moveTo(sx, sy);
+		path.bezierCurveTo(sx + ix, sy + iy, tx + iy, ty - ix, tx, ty);
+
+		return path.toString();
+	};
+}
+
+export type LinkHorizontalCurveProps<Link, Node> =
+	AccessorProps<Link, Node> & SharedLinkProps<Link> & {
+		percent?: number;
+	};
+
+export default function LinkHorizontalCurve<Link, Node>({
+	className,
+	children,
+	data,
+	innerRef,
+	path,
+	percent = 0.2,
+	x = getY, // note this returns a y value
+	y = getX, // note this returns an x value
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkHorizontalCurveProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathHorizontalCurve({ source, target, x, y, percent });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-horizontal-curve', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/curve/LinkHorizontalCurve.tsrx.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathHorizontalCurve<Link, Node>({ source, target, x, y, percent, }: Required<AccessorProps<Link, Node>> & {
+    percent: number;
+}): (link: Link) => string;
+export type LinkHorizontalCurveProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link> & {
+    percent?: number;
+};
+export default function LinkHorizontalCurve<Link, Node>({ className, children, data, innerRef, path, percent, x, // note this returns a y value
+y, // note this returns an x value
+source, target, ...restProps }: AddSVGProps<LinkHorizontalCurveProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/link/curve/LinkRadialCurve.tsrx

@@ -0,0 +1,72 @@
+import cx from 'classnames';
+import { path as d3Path } from 'd3-path';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getX, getY, getSource, getTarget } from '../../../util/accessors';
+
+export function pathRadialCurve<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+	percent,
+}: Required<AccessorProps<Link, Node>> & { percent: number }) {
+	return (link: Link) => {
+		const sourceData = source(link);
+		const targetData = target(link);
+
+		const sa = x(sourceData) - Math.PI / 2;
+		const sr = y(sourceData);
+		const ta = x(targetData) - Math.PI / 2;
+		const tr = y(targetData);
+
+		const sc = Math.cos(sa);
+		const ss = Math.sin(sa);
+		const tc = Math.cos(ta);
+		const ts = Math.sin(ta);
+
+		const sx = sr * sc;
+		const sy = sr * ss;
+		const tx = tr * tc;
+		const ty = tr * ts;
+
+		const dx = tx - sx;
+		const dy = ty - sy;
+		const ix = percent * (dx + dy);
+		const iy = percent * (dy - dx);
+
+		const path = d3Path();
+		path.moveTo(sx, sy);
+		path.bezierCurveTo(sx + ix, sy + iy, tx + iy, ty - ix, tx, ty);
+
+		return path.toString();
+	};
+}
+
+export type LinkRadialCurveProps<Link, Node> = {
+		percent?: number;
+	} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkRadialCurve<Link, Node>({
+	className,
+	children,
+	data,
+	innerRef,
+	path,
+	percent = 0.2,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkRadialCurveProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathRadialCurve({ source, target, x, y, percent });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-radial-curve', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/curve/LinkRadialCurve.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathRadialCurve<Link, Node>({ source, target, x, y, percent, }: Required<AccessorProps<Link, Node>> & {
+    percent: number;
+}): (link: Link) => string;
+export type LinkRadialCurveProps<Link, Node> = {
+    percent?: number;
+} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkRadialCurve<Link, Node>({ className, children, data, innerRef, path, percent, x, y, source, target, ...restProps }: AddSVGProps<LinkRadialCurveProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/link/curve/LinkVerticalCurve.tsrx

@@ -0,0 +1,62 @@
+import cx from 'classnames';
+import { path as d3Path } from 'd3-path';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getX, getY, getSource, getTarget } from '../../../util/accessors';
+
+export function pathVerticalCurve<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+	percent,
+}: Required<AccessorProps<Link, Node>> & { percent: number }) {
+	return (link: Link) => {
+		const sourceData = source(link);
+		const targetData = target(link);
+
+		const sx = x(sourceData);
+		const sy = y(sourceData);
+		const tx = x(targetData);
+		const ty = y(targetData);
+
+		const dx = tx - sx;
+		const dy = ty - sy;
+		const ix = percent * (dx + dy);
+		const iy = percent * (dy - dx);
+
+		const path = d3Path();
+		path.moveTo(sx, sy);
+		path.bezierCurveTo(sx + ix, sy + iy, tx + iy, ty - ix, tx, ty);
+
+		return path.toString();
+	};
+}
+
+export type LinkVerticalCurveProps<Link, Node> = {
+		percent?: number;
+	} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkVerticalCurve<Link, Node>({
+	className,
+	children,
+	data,
+	innerRef,
+	path,
+	percent = 0.2,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkVerticalCurveProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathVerticalCurve({ source, target, x, y, percent });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-vertical-curve', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/curve/LinkVerticalCurve.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathVerticalCurve<Link, Node>({ source, target, x, y, percent, }: Required<AccessorProps<Link, Node>> & {
+    percent: number;
+}): (link: Link) => string;
+export type LinkVerticalCurveProps<Link, Node> = {
+    percent?: number;
+} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkVerticalCurve<Link, Node>({ className, children, data, innerRef, path, percent, x, y, source, target, ...restProps }: AddSVGProps<LinkVerticalCurveProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/link/diagonal/LinkHorizontal.tsrx

@@ -0,0 +1,47 @@
+import cx from 'classnames';
+import { linkHorizontal } from 'd3-shape';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getY, getX, getSource, getTarget } from '../../../util/accessors';
+
+export function pathHorizontalDiagonal<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+}: Required<AccessorProps<Link, Node>>) {
+	return (data: Link) => {
+		const link = linkHorizontal<Link, Node>();
+		link.x(x);
+		link.y(y);
+		link.source(source);
+		link.target(target);
+		return link(data);
+	};
+}
+
+export type LinkHorizontalDiagonalProps<Link, Node> =
+	AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkHorizontalDiagonal<Link, Node>({
+	className,
+	children,
+	data,
+	innerRef,
+	path,
+	x = getY, // note this returns a y value
+	y = getX, // note this returns an x value
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkHorizontalDiagonalProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathHorizontalDiagonal({ source, target, x, y });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-horizontal-diagonal', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/diagonal/LinkHorizontal.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathHorizontalDiagonal<Link, Node>({ source, target, x, y, }: Required<AccessorProps<Link, Node>>): (data: Link) => string | null;
+export type LinkHorizontalDiagonalProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkHorizontalDiagonal<Link, Node>({ className, children, data, innerRef, path, x, // note this returns a y value
+y, // note this returns an x value
+source, target, ...restProps }: AddSVGProps<LinkHorizontalDiagonalProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/link/diagonal/LinkRadial.tsrx

@@ -0,0 +1,49 @@
+import cx from 'classnames';
+import { linkRadial } from 'd3-shape';
+import type { SharedLinkProps, RadialAccessorProps, AddSVGProps } from '../../../types';
+import { getX, getY, getSource, getTarget } from '../../../util/accessors';
+
+export function pathRadialDiagonal<Link, Node>({
+	source,
+	target,
+	angle,
+	radius,
+}: Required<RadialAccessorProps<Link, Node>>) {
+	return (data: Link) => {
+		const link = linkRadial<Link, Node>();
+		link.angle(angle);
+		link.radius(radius);
+		link.source(source);
+		link.target(target);
+		return link(data);
+	};
+}
+
+type LinkRadialDiagonalProps<Link, Node> = {
+		angle: (node: Node) => number;
+		radius: (node: Node) => number;
+	} & RadialAccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkRadialDiagonal<Link, Node>({
+	className,
+	children,
+	data,
+	innerRef,
+	path,
+	angle = getX,
+	radius = getY,
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkRadialDiagonalProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathRadialDiagonal({ source, target, angle, radius });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-radial-diagonal', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/diagonal/LinkRadial.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, RadialAccessorProps, AddSVGProps } from '../../../types';
+export declare function pathRadialDiagonal<Link, Node>({ source, target, angle, radius, }: Required<RadialAccessorProps<Link, Node>>): (data: Link) => string | null;
+type LinkRadialDiagonalProps<Link, Node> = {
+    angle: (node: Node) => number;
+    radius: (node: Node) => number;
+} & RadialAccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkRadialDiagonal<Link, Node>({ className, children, data, innerRef, path, angle, radius, source, target, ...restProps }: AddSVGProps<LinkRadialDiagonalProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;
+export {};

package/src/shape/shapes/link/diagonal/LinkVertical.tsrx

@@ -0,0 +1,46 @@
+import cx from 'classnames';
+import { linkVertical } from 'd3-shape';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getX, getY, getSource, getTarget } from '../../../util/accessors';
+
+export function pathVerticalDiagonal<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+}: Required<AccessorProps<Link, Node>>) {
+	return (data: Link) => {
+		const link = linkVertical<Link, Node>();
+		link.x(x);
+		link.y(y);
+		link.source(source);
+		link.target(target);
+		return link(data);
+	};
+}
+
+type LinkVerticalDiagonalProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkVerticalDiagonal<Link, Node>({
+	className,
+	children,
+	data,
+	innerRef,
+	path,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkVerticalDiagonalProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathVerticalDiagonal({ source, target, x, y });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-vertical-diagonal', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/diagonal/LinkVertical.tsrx.d.ts

@@ -0,0 +1,6 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathVerticalDiagonal<Link, Node>({ source, target, x, y, }: Required<AccessorProps<Link, Node>>): (data: Link) => string | null;
+type LinkVerticalDiagonalProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkVerticalDiagonal<Link, Node>({ className, children, data, innerRef, path, x, y, source, target, ...restProps }: AddSVGProps<LinkVerticalDiagonalProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;
+export {};

package/src/shape/shapes/link/line/LinkHorizontalLine.tsrx

@@ -0,0 +1,53 @@
+import cx from 'classnames';
+import { path as d3Path } from 'd3-path';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getY, getX, getSource, getTarget } from '../../../util/accessors';
+
+export function pathHorizontalLine<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+}: Required<AccessorProps<Link, Node>>) {
+	return (data: Link) => {
+		const sourceData = source(data);
+		const targetData = target(data);
+
+		const sx = x(sourceData);
+		const sy = y(sourceData);
+		const tx = x(targetData);
+		const ty = y(targetData);
+
+		const path = d3Path();
+		path.moveTo(sx, sy);
+		path.lineTo(tx, ty);
+
+		return path.toString();
+	};
+}
+
+export type LinkHorizontalLineProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkHorizontalLine<Link, Node>({
+	className,
+	children,
+	innerRef,
+	data,
+	path,
+	x = getY, // note this returns a y value
+	y = getX, // note this returns a x value
+	source = getSource,
+	target = getTarget,
+	...restProps
+}: AddSVGProps<LinkHorizontalLineProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathHorizontalLine({ source, target, x, y });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-horizontal-line', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/line/LinkHorizontalLine.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathHorizontalLine<Link, Node>({ source, target, x, y, }: Required<AccessorProps<Link, Node>>): (data: Link) => string;
+export type LinkHorizontalLineProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkHorizontalLine<Link, Node>({ className, children, innerRef, data, path, x, // note this returns a y value
+y, // note this returns a x value
+source, target, ...restProps }: AddSVGProps<LinkHorizontalLineProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/link/line/LinkRadialLine.tsrx

@@ -0,0 +1,58 @@
+import cx from 'classnames';
+import { path as d3Path } from 'd3-path';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getX, getY, getSource, getTarget } from '../../../util/accessors';
+
+export function pathRadialLine<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+}: Required<AccessorProps<Link, Node>>) {
+	return (data: Link) => {
+		const sourceData = source(data);
+		const targetData = target(data);
+
+		const sa = x(sourceData) - Math.PI / 2;
+		const sr = y(sourceData);
+		const ta = x(targetData) - Math.PI / 2;
+		const tr = y(targetData);
+
+		const sc = Math.cos(sa);
+		const ss = Math.sin(sa);
+		const tc = Math.cos(ta);
+		const ts = Math.sin(ta);
+
+		const path = d3Path();
+		path.moveTo(sr * sc, sr * ss);
+		path.lineTo(tr * tc, tr * ts);
+
+		return path.toString();
+	};
+}
+
+export type LinkRadialLineProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkRadialLine<Link, Node>({
+	className,
+	innerRef,
+	data,
+	path,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	children,
+	...restProps
+}: AddSVGProps<LinkRadialLineProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathRadialLine({ source, target, x, y });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-radial-line', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/line/LinkRadialLine.tsrx.d.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+export declare function pathRadialLine<Link, Node>({ source, target, x, y, }: Required<AccessorProps<Link, Node>>): (data: Link) => string;
+export type LinkRadialLineProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+export default function LinkRadialLine<Link, Node>({ className, innerRef, data, path, x, y, source, target, children, ...restProps }: AddSVGProps<LinkRadialLineProps<Link, Node>, SVGPathElement>): import("react").JSX.Element;