@octanejs/visx 0.1.0

package/src/chart/useChartDimensions.tsrx

@@ -0,0 +1,74 @@
+import { useStructuralMemo } from '@octanejs/visx/kernel';
+
+export type MarginShape = {
+	top?: number;
+	right?: number;
+	bottom?: number;
+	left?: number;
+};
+
+export type RequiredMarginShape = Required<MarginShape>;
+
+export type UseChartDimensionsOptions = {
+	/** Outer SVG width. */
+	width?: number;
+	/** Outer SVG height. */
+	height?: number;
+	/** Margins reserved around the drawable chart area. */
+	margin?: MarginShape;
+};
+
+export type ChartDimensions = {
+	width: number;
+	height: number;
+	margin: RequiredMarginShape;
+	innerWidth: number;
+	innerHeight: number;
+	/** Alias for innerWidth, matching common visx example naming. */
+	xMax: number;
+	/** Alias for innerHeight, matching common visx example naming. */
+	yMax: number;
+};
+
+const defaultMargin: RequiredMarginShape = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0,
+};
+
+function finiteOrZero(value: number | undefined) {
+	return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+}
+
+function normalizeMargin(margin: MarginShape | undefined): RequiredMarginShape {
+	return {
+		top: finiteOrZero(margin?.top),
+		right: finiteOrZero(margin?.right),
+		bottom: finiteOrZero(margin?.bottom),
+		left: finiteOrZero(margin?.left),
+	};
+}
+
+export default function useChartDimensions(
+	{ width, height, margin = defaultMargin }: UseChartDimensionsOptions = {},
+): ChartDimensions {
+	const normalizedMargin = useStructuralMemo(normalizeMargin(margin), 1);
+	const outerWidth = finiteOrZero(width);
+	const outerHeight = finiteOrZero(height);
+	const innerWidth = Math.max(0, outerWidth - normalizedMargin.left - normalizedMargin.right);
+	const innerHeight = Math.max(0, outerHeight - normalizedMargin.top - normalizedMargin.bottom);
+
+	return useStructuralMemo(
+		{
+			width: outerWidth,
+			height: outerHeight,
+			margin: normalizedMargin,
+			innerWidth,
+			innerHeight,
+			xMax: innerWidth,
+			yMax: innerHeight,
+		},
+		1,
+	);
+}

package/src/chart/useChartDimensions.tsrx.d.ts

@@ -0,0 +1,28 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type MarginShape = {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+export type RequiredMarginShape = Required<MarginShape>;
+export type UseChartDimensionsOptions = {
+    /** Outer SVG width. */
+    width?: number;
+    /** Outer SVG height. */
+    height?: number;
+    /** Margins reserved around the drawable chart area. */
+    margin?: MarginShape;
+};
+export type ChartDimensions = {
+    width: number;
+    height: number;
+    margin: RequiredMarginShape;
+    innerWidth: number;
+    innerHeight: number;
+    /** Alias for innerWidth, matching common visx example naming. */
+    xMax: number;
+    /** Alias for innerHeight, matching common visx example naming. */
+    yMax: number;
+};
+export default function useChartDimensions({ width, height, margin }?: UseChartDimensionsOptions): ChartDimensions;

package/src/chord/Chord.tsrx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import type { Chords } from 'd3-chord';
+import { chord as d3chord } from 'd3-chord';
+
+type DefaultSortComporator = (a: number, b: number) => number;
+
+export type ChordProps = {
+	/** Square data matrix of size n×n, where the matrix represents the directed flow amongst a network (a complete digraph) of `n` nodes. The given matrix must be an array of length `n`, where each element `matrix[i]` is an array of `n` numbers, where each `matrix[i][j]` represents the flow from the `ith` node in the network to the `jth` node. Each number `matrix[i][j]` must be nonnegative, though it can be zero if there is no flow from node `i` to node `j`. */
+	matrix: number[][];
+	/** Sets the pad angle between adjacent groups to the specified number in radians. */
+	padAngle?: number;
+	/** Comparator used to sort the groups by their total outflow. */
+	sortGroups?: DefaultSortComporator | null;
+	/** Comparator used to sort the subgroups corresponding to `matrix[i][0 … n - 1]` for a given group i by their total outflow. */
+	sortSubgroups?: DefaultSortComporator | null;
+	/** Comparator used to sort the chords by their combined flow; this only affects the `z-order` of the chords. */
+	sortChords?: DefaultSortComporator | null;
+	/** Child render function, passed the configured chords. */
+	children: (chords: { chords: Chords }) => ReactNode;
+};
+
+export default function Chord({
+	matrix,
+	padAngle,
+	sortGroups,
+	sortSubgroups,
+	sortChords,
+	children,
+}: ChordProps) {
+	const chord = d3chord();
+	if (padAngle) chord.padAngle(padAngle);
+	if (sortGroups) chord.sortGroups(sortGroups);
+	if (sortSubgroups) chord.sortSubgroups(sortSubgroups);
+	if (sortChords) chord.sortChords(sortChords);
+	const chords = chord(matrix);
+	if (children) return <>
+		{children({ chords })}
+	</>;
+
+	// so react-docgen picks it up
+	return <g />;
+}

package/src/chord/Chord.tsrx.d.ts

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { Chords } from 'd3-chord';
+type DefaultSortComporator = (a: number, b: number) => number;
+export type ChordProps = {
+    /** Square data matrix of size n×n, where the matrix represents the directed flow amongst a network (a complete digraph) of `n` nodes. The given matrix must be an array of length `n`, where each element `matrix[i]` is an array of `n` numbers, where each `matrix[i][j]` represents the flow from the `ith` node in the network to the `jth` node. Each number `matrix[i][j]` must be nonnegative, though it can be zero if there is no flow from node `i` to node `j`. */
+    matrix: number[][];
+    /** Sets the pad angle between adjacent groups to the specified number in radians. */
+    padAngle?: number;
+    /** Comparator used to sort the groups by their total outflow. */
+    sortGroups?: DefaultSortComporator | null;
+    /** Comparator used to sort the subgroups corresponding to `matrix[i][0 … n - 1]` for a given group i by their total outflow. */
+    sortSubgroups?: DefaultSortComporator | null;
+    /** Comparator used to sort the chords by their combined flow; this only affects the `z-order` of the chords. */
+    sortChords?: DefaultSortComporator | null;
+    /** Child render function, passed the configured chords. */
+    children: (chords: {
+        chords: Chords;
+    }) => ReactNode;
+};
+export default function Chord({ matrix, padAngle, sortGroups, sortSubgroups, sortChords, children, }: ChordProps): import("react").JSX.Element;
+export {};

package/src/chord/Ribbon.tsrx

@@ -0,0 +1,63 @@
+import type { SVGProps } from 'react';
+import cx from 'classnames';
+import type { Chord, ChordSubgroup } from 'd3-chord';
+import { ribbon as d3ribbon } from 'd3-chord';
+
+type NumAccessor = (d: ChordSubgroup) => number;
+
+export type RibbonProps = {
+	/** Chord for which to render a ribbon. */
+	chord: Chord;
+	/** Sets the source accessor (defaults to chord.source). */
+	source?: (d: Chord) => ChordSubgroup;
+	/** Sets the target accessor (defaults to chord.source). */
+	target?: (d: Chord) => ChordSubgroup;
+	/** Sets the radius or radius accessor for the ribbon generator. */
+	radius?: number | NumAccessor;
+	/** Sets the start angle or start angle accessor for the ribbon generator. */
+	startAngle?: number | NumAccessor;
+	/** Sets the end angle or end angle accessor for the ribbon generator. */
+	endAngle?: number | NumAccessor;
+	/** Override the default rendering of a chord `<path />`. */
+	children?: ({
+		path,
+	}: {
+		path: string | null;
+	}) => string | undefined;
+	/** Classname to apply to the rendered `<path />`. */
+	className?: string;
+};
+
+/** This is a workaround for TypeScript not inferring the correct method overload */
+function setNumberOrNumberAccessor(
+	func: (d: number | NumAccessor) => void,
+	value: number | NumAccessor,
+) {
+	if (typeof value === 'number') func(value);
+	else func(value);
+}
+
+export default function Ribbon({
+	chord,
+	source,
+	target,
+	radius,
+	startAngle,
+	endAngle,
+	children,
+	className,
+	...restProps
+}: Omit<SVGProps<SVGPathElement>, keyof RibbonProps> & RibbonProps) {
+	const ribbon = d3ribbon<unknown, Chord, ChordSubgroup>();
+	if (source) ribbon.source(source);
+	if (target) ribbon.target(target);
+	if (radius) setNumberOrNumberAccessor(ribbon.radius, radius);
+	if (startAngle) setNumberOrNumberAccessor(ribbon.startAngle, startAngle);
+	if (endAngle) setNumberOrNumberAccessor(ribbon.endAngle, endAngle);
+	const path = ribbon(chord) as unknown as string | null;
+	if (children) return <>
+		{children({ path })}
+	</>;
+
+	return <path className={cx('visx-ribbon', className)} d={path || ''} {...restProps} />;
+}

package/src/chord/Ribbon.tsrx.d.ts

@@ -0,0 +1,26 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+import type { Chord, ChordSubgroup } from 'd3-chord';
+type NumAccessor = (d: ChordSubgroup) => number;
+export type RibbonProps = {
+    /** Chord for which to render a ribbon. */
+    chord: Chord;
+    /** Sets the source accessor (defaults to chord.source). */
+    source?: (d: Chord) => ChordSubgroup;
+    /** Sets the target accessor (defaults to chord.source). */
+    target?: (d: Chord) => ChordSubgroup;
+    /** Sets the radius or radius accessor for the ribbon generator. */
+    radius?: number | NumAccessor;
+    /** Sets the start angle or start angle accessor for the ribbon generator. */
+    startAngle?: number | NumAccessor;
+    /** Sets the end angle or end angle accessor for the ribbon generator. */
+    endAngle?: number | NumAccessor;
+    /** Override the default rendering of a chord `<path />`. */
+    children?: ({ path, }: {
+        path: string | null;
+    }) => string | undefined;
+    /** Classname to apply to the rendered `<path />`. */
+    className?: string;
+};
+export default function Ribbon({ chord, source, target, radius, startAngle, endAngle, children, className, ...restProps }: Omit<SVGProps<SVGPathElement>, keyof RibbonProps> & RibbonProps): import("react").JSX.Element;
+export {};

package/src/chord/index.ts

@@ -0,0 +1,6 @@
+// @octanejs/visx/chord
+export { default as Chord } from './Chord.tsrx';
+export { default as Ribbon } from './Ribbon.tsrx';
+
+export type { ChordProps } from './Chord.tsrx';
+export type { RibbonProps } from './Ribbon.tsrx';

package/src/clip-path/clip-paths/CircleClipPath.tsrx

@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react';
+import ClipPath from './ClipPath.tsrx';
+
+export type CircleClipPathProps = {
+	/** Unique id for the clipPath. */
+	id?: string;
+	/** x position of the center of the ClipPath circle. */
+	cx?: string | number;
+	/** y position of the center of the ClipPath circle. */
+	cy?: string | number;
+	/** radius of the ClipPath circle. */
+	r?: string | number;
+};
+
+/** ClipPath for clipping to the shape of a `<circle />`, pass any `<circle />` props you want. */
+export default function CircleClipPath({
+	id,
+	cx,
+	cy,
+	r,
+	...restProps
+}: CircleClipPathProps & Omit<SVGProps<SVGCircleElement>, keyof CircleClipPathProps>) {
+	return <ClipPath id={id}>
+		<circle cx={cx} cy={cy} r={r} {...restProps} />
+	</ClipPath>;
+}

package/src/clip-path/clip-paths/CircleClipPath.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+export type CircleClipPathProps = {
+    /** Unique id for the clipPath. */
+    id?: string;
+    /** x position of the center of the ClipPath circle. */
+    cx?: string | number;
+    /** y position of the center of the ClipPath circle. */
+    cy?: string | number;
+    /** radius of the ClipPath circle. */
+    r?: string | number;
+};
+/** ClipPath for clipping to the shape of a `<circle />`, pass any `<circle />` props you want. */
+export default function CircleClipPath({ id, cx, cy, r, ...restProps }: CircleClipPathProps & Omit<SVGProps<SVGCircleElement>, keyof CircleClipPathProps>): import("react").JSX.Element;

package/src/clip-path/clip-paths/ClipPath.tsrx

@@ -0,0 +1,21 @@
+import type { SVGProps, ReactNode } from 'react';
+import useStableId from '../../kernel/ids/useStableId.tsrx';
+
+export type ClipPathProps = {
+	/** Unique id for the clipPath. */
+	id?: string;
+	/** clipPath children. */
+	children?: ReactNode;
+};
+
+/** Handles rendering of <defs> and <clipPath> elements for you, with any children you want. */
+export default function ClipPath({
+	id,
+	children,
+	...restProps
+}: ClipPathProps & Omit<SVGProps<SVGClipPathElement>, keyof ClipPathProps>) {
+	const generatedId = useStableId('visx-clip');
+	return <defs>
+		<clipPath id={id ?? generatedId} {...restProps}>{children}</clipPath>
+	</defs>;
+}

package/src/clip-path/clip-paths/ClipPath.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps, ReactNode } from 'react';
+export type ClipPathProps = {
+    /** Unique id for the clipPath. */
+    id?: string;
+    /** clipPath children. */
+    children?: ReactNode;
+};
+/** Handles rendering of <defs> and <clipPath> elements for you, with any children you want. */
+export default function ClipPath({ id, children, ...restProps }: ClipPathProps & Omit<SVGProps<SVGClipPathElement>, keyof ClipPathProps>): import("react").JSX.Element;

package/src/clip-path/clip-paths/RectClipPath.tsrx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react';
+import ClipPath from './ClipPath.tsrx';
+
+export type RectClipPathProps = {
+	/** Unique id for the clipPath. */
+	id?: string;
+	/** x position of the ClipPath rect. */
+	x?: string | number;
+	/** y position of the ClipPath rect. */
+	y?: string | number;
+	/** width of the ClipPath rect. */
+	width?: string | number;
+	/** height of the ClipPath rect. */
+	height?: string | number;
+};
+
+export default function RectClipPath({
+	id,
+	x = 0,
+	y = 0,
+	width = 1,
+	height = 1,
+	...restProps
+}: RectClipPathProps & Omit<SVGProps<SVGRectElement>, keyof RectClipPathProps>) {
+	return <ClipPath id={id}>
+		<rect x={x} y={y} width={width} height={height} {...restProps} />
+	</ClipPath>;
+}

package/src/clip-path/clip-paths/RectClipPath.tsrx.d.ts

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SVGProps } from 'react';
+export type RectClipPathProps = {
+    /** Unique id for the clipPath. */
+    id?: string;
+    /** x position of the ClipPath rect. */
+    x?: string | number;
+    /** y position of the ClipPath rect. */
+    y?: string | number;
+    /** width of the ClipPath rect. */
+    width?: string | number;
+    /** height of the ClipPath rect. */
+    height?: string | number;
+};
+export default function RectClipPath({ id, x, y, width, height, ...restProps }: RectClipPathProps & Omit<SVGProps<SVGRectElement>, keyof RectClipPathProps>): import("react").JSX.Element;

package/src/clip-path/index.ts

@@ -0,0 +1,4 @@
+// @octanejs/visx/clip-path
+export { default as ClipPath } from './clip-paths/ClipPath.tsrx';
+export { default as CircleClipPath } from './clip-paths/CircleClipPath.tsrx';
+export { default as RectClipPath } from './clip-paths/RectClipPath.tsrx';

package/src/curve/index.ts

@@ -0,0 +1,21 @@
+// @octanejs/visx/curve
+export {
+	curveBasis,
+	curveBasisClosed,
+	curveBasisOpen,
+	curveStep,
+	curveStepAfter,
+	curveStepBefore,
+	curveBundle,
+	curveLinear,
+	curveLinearClosed,
+	curveCardinal,
+	curveCardinalClosed,
+	curveCardinalOpen,
+	curveCatmullRom,
+	curveCatmullRomClosed,
+	curveCatmullRomOpen,
+	curveMonotoneX,
+	curveMonotoneY,
+	curveNatural,
+} from 'd3-shape';

package/src/delaunay/components/Polygon.tsrx

@@ -0,0 +1,32 @@
+import type { ReactNode, SVGProps } from 'react';
+import cx from 'classnames';
+
+export type PolygonProps = {
+	/** Override render function which is provided polygon and generated path. */
+	children?: ({
+		path,
+		polygon,
+	}: {
+		path: string;
+		polygon: [number, number][];
+	}) => ReactNode;
+	/** className to apply to path element. */
+	className?: string;
+	/** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */
+	polygon?: [number, number][];
+};
+
+export default function Polygon({
+	polygon,
+	className,
+	children,
+	...restProps
+}: PolygonProps & Omit<SVGProps<SVGPathElement>, keyof PolygonProps>) {
+	if (!polygon) return null;
+	const path = `M${polygon.join('L')}Z`;
+	if (children) return <>
+		{children({ path, polygon })}
+	</>;
+
+	return <path className={cx('visx-delaunay-polygon', className)} d={path} {...restProps} />;
+}

package/src/delaunay/components/Polygon.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+export type PolygonProps = {
+    /** Override render function which is provided polygon and generated path. */
+    children?: ({ path, polygon, }: {
+        path: string;
+        polygon: [number, number][];
+    }) => ReactNode;
+    /** className to apply to path element. */
+    className?: string;
+    /** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */
+    polygon?: [number, number][];
+};
+export default function Polygon({ polygon, className, children, ...restProps }: PolygonProps & Omit<SVGProps<SVGPathElement>, keyof PolygonProps>): import("react").JSX.Element | null;

package/src/delaunay/delaunay.ts

@@ -0,0 +1,17 @@
+import { Delaunay } from 'd3-delaunay';
+
+interface Config<Datum> {
+	/** The data for the delaunay triangulation */
+	data?: Datum[];
+	/** Set the x-value accessor function for the delaunay triangulation. */
+	x: (d: Datum) => number;
+	/** Set the y-value accessor function for the delaunay triangulation. */
+	y: (d: Datum) => number;
+}
+
+/**
+ * Returns a configured d3 delaunay triangulation. See d3-delaunay for the complete API reference.
+ */
+export default function delaunay<Datum>({ data = [], x, y }: Config<Datum>) {
+	return Delaunay.from(data, x, y);
+}

package/src/delaunay/index.ts

@@ -0,0 +1,4 @@
+// @octanejs/visx/delaunay
+export { default as delaunay } from './delaunay';
+export { default as voronoi } from './voronoi';
+export { default as Polygon } from './components/Polygon.tsrx';

package/src/delaunay/voronoi.ts

@@ -0,0 +1,30 @@
+import { Delaunay } from 'd3-delaunay';
+
+const CLIP_PADDING = 1;
+
+interface Config<Datum> {
+	/** The data for the voronoi diagram */
+	data?: Datum[];
+	/** The total width of the voronoi diagram. */
+	width?: number;
+	/** The total width of the voronoi diagram. */
+	height?: number;
+	/** Set the x-value accessor function for the voronoi diagram. */
+	x: (d: Datum) => number;
+	/** Set the y-value accessor function for the voronoi diagram. */
+	y: (d: Datum) => number;
+}
+
+/**
+ * Returns a configured d3 voronoi diagram for the given data. See d3-delaunay
+ * for the complete API reference.
+ */
+export default function voronoi<Datum>({ data = [], width = 0, height = 0, x, y }: Config<Datum>) {
+	const delaunay = Delaunay.from(data, x, y);
+	return delaunay.voronoi([
+		-CLIP_PADDING,
+		-CLIP_PADDING,
+		width + CLIP_PADDING,
+		height + CLIP_PADDING,
+	]);
+}

package/src/drag/Drag.tsrx

@@ -0,0 +1,66 @@
+/* eslint-disable react/jsx-handler-names */
+import type { ReactNode } from 'react';
+import type { UseDrag, UseDragOptions, HandlerArgs as HandlerArgsType } from './useDrag.tsrx';
+import useDrag from './useDrag.tsrx';
+
+export type HandlerArgs = HandlerArgsType;
+
+export type DragProps = UseDragOptions & {
+		/** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */
+		children: (args: UseDrag) => ReactNode;
+		/** Width of the drag container. */
+		width: number;
+		/** Height of the drag container. */
+		height: number;
+		/** Whether to render an invisible rect below children to capture the drag area as defined by width and height. */
+		captureDragArea?: boolean;
+		/** If defined, parent controls dragging state. */
+		isDragging?: boolean;
+	};
+
+export default function Drag({
+	captureDragArea = true,
+	snapToPointer = true,
+	children,
+	dx,
+	dy,
+	height,
+	onDragEnd,
+	onDragMove,
+	onDragStart,
+	resetOnStart,
+	width,
+	x,
+	y,
+	isDragging,
+	restrict,
+	restrictToPath,
+}: DragProps) {
+	const drag = useDrag({
+		resetOnStart,
+		snapToPointer,
+		onDragEnd,
+		onDragMove,
+		onDragStart,
+		x,
+		y,
+		dx,
+		dy,
+		isDragging,
+		restrict,
+		restrictToPath,
+	});
+
+	return <>
+		{drag.isDragging && captureDragArea &&
+			<rect
+				width={width}
+				height={height}
+				onPointerDown={drag.dragStart}
+				onPointerMove={drag.dragMove}
+				onPointerUp={drag.dragEnd}
+				fill="transparent"
+			/>}
+		{children(drag)}
+	</>;
+}

package/src/drag/Drag.tsrx.d.ts

@@ -0,0 +1,17 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { UseDrag, UseDragOptions, HandlerArgs as HandlerArgsType } from './useDrag.tsrx';
+export type HandlerArgs = HandlerArgsType;
+export type DragProps = UseDragOptions & {
+    /** Children render function which is passed the state of dragging and callbacks for drag start/end/move. */
+    children: (args: UseDrag) => ReactNode;
+    /** Width of the drag container. */
+    width: number;
+    /** Height of the drag container. */
+    height: number;
+    /** Whether to render an invisible rect below children to capture the drag area as defined by width and height. */
+    captureDragArea?: boolean;
+    /** If defined, parent controls dragging state. */
+    isDragging?: boolean;
+};
+export default function Drag({ captureDragArea, snapToPointer, children, dx, dy, height, onDragEnd, onDragMove, onDragStart, resetOnStart, width, x, y, isDragging, restrict, restrictToPath, }: DragProps): import("react").JSX.Element;

package/src/drag/index.ts

@@ -0,0 +1,13 @@
+// @octanejs/visx/drag
+export { default as Drag } from './Drag.tsrx';
+export { default as useDrag } from './useDrag.tsrx';
+export { default as raise } from './util/raise';
+
+export type { DragProps } from './Drag.tsrx';
+export type {
+	DragState,
+	HandlerArgs,
+	MouseTouchOrPointerEvent,
+	UseDrag,
+	UseDragOptions,
+} from './useDrag.tsrx';