@octanejs/visx 0.1.0

package/src/shape/shapes/BarStackHorizontal.tsrx

@@ -0,0 +1,99 @@
+import cx from 'classnames';
+import type { SeriesPoint } from 'd3-shape';
+import { stack as d3stack } from 'd3-shape';
+import { Group } from '@octanejs/visx/group';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { AddSVGProps, PositionScale, BaseBarStackProps, StackKey, Accessor } from '../types';
+import { getFirstItem, getSecondItem } from '../util/accessors';
+import getBandwidth from '../util/getBandwidth';
+import setNumOrAccessor from '../util/setNumberOrNumberAccessor';
+import stackOrder from '../util/stackOrder';
+import stackOffset from '../util/stackOffset';
+import Bar from './Bar.tsrx';
+
+export type BarStackHorizontalProps<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale> =
+	BaseBarStackProps<Datum, Key, XScale, YScale> & {
+		/** Returns the value mapped to the x0 of a bar. */
+		x0?: Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>;
+		/** Returns the value mapped to the x1 of a bar. */
+		x1?: Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>;
+		/** Returns the value mapped to the y of a bar. */
+		y: Accessor<Datum, ScaleInput<YScale>>;
+	};
+
+export default function BarStackHorizontal<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale>({
+	data,
+	className,
+	top,
+	left,
+	y,
+	x0 = getFirstItem,
+	x1 = getSecondItem,
+	xScale,
+	yScale,
+	color,
+	keys,
+	value,
+	order,
+	offset,
+	children,
+	...restProps
+}: AddSVGProps<BarStackHorizontalProps<Datum, Key, XScale, YScale>, SVGRectElement>) {
+	const stack = d3stack<Datum, Key>();
+	if (keys) stack.keys(keys);
+	if (value) setNumOrAccessor(stack.value, value);
+	if (order) stack.order(stackOrder(order));
+	if (offset) stack.offset(stackOffset(offset));
+
+	const stacks = stack(data);
+	const barHeight = getBandwidth(yScale);
+
+	const barStacks = stacks.map((barStack, i) => {
+		const { key } = barStack;
+		return {
+			index: i,
+			key,
+			bars: barStack.map((bar, j) => {
+				const barWidth = (xScale(x1(bar)) || 0) - (xScale(x0(bar)) || 0);
+				const barX = xScale(x0(bar));
+				const barY =
+					'bandwidth' in yScale
+						? yScale(y(bar.data))
+						: Math.max((yScale(y(bar.data)) || 0) - barWidth / 2);
+				return {
+					bar,
+					key,
+					index: j,
+					height: barHeight,
+					width: barWidth,
+					x: barX || 0,
+					y: barY || 0,
+					color: color(barStack.key, j),
+				};
+			}),
+		};
+	});
+
+	if (children) return <>
+		{children(barStacks)}
+	</>;
+
+	return <Group
+		className={cx('visx-bar-stack-horizontal', className)}
+		top={top}
+		left={left}
+	>{barStacks.map(
+		(barStack) => barStack.bars.map(
+			(bar) =>
+				<Bar
+					key={`bar-stack-${barStack.index}-${bar.index}`}
+					x={bar.x}
+					y={bar.y}
+					height={bar.height}
+					width={bar.width}
+					fill={bar.color}
+					{...restProps}
+				/>,
+		),
+	)}</Group>;
+}

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

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { SeriesPoint } from 'd3-shape';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { AddSVGProps, PositionScale, BaseBarStackProps, StackKey, Accessor } from '../types';
+export type BarStackHorizontalProps<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale> = BaseBarStackProps<Datum, Key, XScale, YScale> & {
+    /** Returns the value mapped to the x0 of a bar. */
+    x0?: Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>;
+    /** Returns the value mapped to the x1 of a bar. */
+    x1?: Accessor<SeriesPoint<Datum>, ScaleInput<XScale>>;
+    /** Returns the value mapped to the y of a bar. */
+    y: Accessor<Datum, ScaleInput<YScale>>;
+};
+export default function BarStackHorizontal<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale>({ data, className, top, left, y, x0, x1, xScale, yScale, color, keys, value, order, offset, children, ...restProps }: AddSVGProps<BarStackHorizontalProps<Datum, Key, XScale, YScale>, SVGRectElement>): import("react").JSX.Element;

package/src/shape/shapes/Circle.tsrx

@@ -0,0 +1,18 @@
+import type { Ref } from 'react';
+import cx from 'classnames';
+import type { AddSVGProps } from '../types';
+
+export type CircleProps = {
+	/** className to apply to circle element. */
+	className?: string;
+	/** reference to circle element. */
+	innerRef?: Ref<SVGCircleElement>;
+};
+
+export default function Circle({
+	className,
+	innerRef,
+	...restProps
+}: AddSVGProps<CircleProps, SVGCircleElement>) {
+	return <circle ref={innerRef} className={cx('visx-circle', className)} {...restProps} />;
+}

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

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { Ref } from 'react';
+import type { AddSVGProps } from '../types';
+export type CircleProps = {
+    /** className to apply to circle element. */
+    className?: string;
+    /** reference to circle element. */
+    innerRef?: Ref<SVGCircleElement>;
+};
+export default function Circle({ className, innerRef, ...restProps }: AddSVGProps<CircleProps, SVGCircleElement>): import("react").JSX.Element;

package/src/shape/shapes/Line.tsrx

@@ -0,0 +1,43 @@
+import type { Ref } from 'react';
+import cx from 'classnames';
+import type { AddSVGProps } from '../types';
+
+interface Point {
+	x?: number;
+	y?: number;
+}
+
+export type LineProps = {
+	/** className to apply to line element. */
+	className?: string;
+	/** reference to line element. */
+	innerRef?: Ref<SVGLineElement>;
+	/** fill color applied to line element. */
+	fill?: string;
+	/** Starting x,y point of the line. */
+	from?: Point;
+	/** Ending x,y point of the line. */
+	to?: Point;
+};
+
+export default function Line({
+	from = { x: 0, y: 0 },
+	to = { x: 1, y: 1 },
+	fill = 'transparent',
+	className,
+	innerRef,
+	...restProps
+}: AddSVGProps<LineProps, SVGLineElement>) {
+	const isRectilinear = from.x === to.x || from.y === to.y;
+	return <line
+		ref={innerRef}
+		className={cx('visx-line', className)}
+		x1={from.x}
+		y1={from.y}
+		x2={to.x}
+		y2={to.y}
+		fill={fill}
+		shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}
+		{...restProps}
+	/>;
+}

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

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { Ref } from 'react';
+import type { AddSVGProps } from '../types';
+interface Point {
+    x?: number;
+    y?: number;
+}
+export type LineProps = {
+    /** className to apply to line element. */
+    className?: string;
+    /** reference to line element. */
+    innerRef?: Ref<SVGLineElement>;
+    /** fill color applied to line element. */
+    fill?: string;
+    /** Starting x,y point of the line. */
+    from?: Point;
+    /** Ending x,y point of the line. */
+    to?: Point;
+};
+export default function Line({ from, to, fill, className, innerRef, ...restProps }: AddSVGProps<LineProps, SVGLineElement>): import("react").JSX.Element;
+export {};

package/src/shape/shapes/LinePath.tsrx

@@ -0,0 +1,44 @@
+import type { Ref, ReactNode } from 'react';
+import cx from 'classnames';
+import type { Line as LineType } from 'd3-shape';
+import type { AddSVGProps, LinePathConfig } from '../types';
+import { line } from '../util/D3ShapeFactories';
+
+export type LinePathProps<Datum> = {
+		/** Array of data for which to generate a line shape. */
+		data?: Datum[];
+		/** React RefObject passed to the path element. */
+		innerRef?: Ref<SVGPathElement>;
+		/** Override render function which is passed the configured path generator as input. */
+		children?: (args: { path: LineType<Datum> }) => ReactNode;
+		/** Fill color of the path element. */
+		fill?: string;
+		/** className applied to path element. */
+		className?: string;
+	} & LinePathConfig<Datum>;
+
+export default function LinePath<Datum>({
+	children,
+	data = [],
+	x,
+	y,
+	fill = 'transparent',
+	className,
+	curve,
+	innerRef,
+	defined = () => true,
+	...restProps
+}: AddSVGProps<LinePathProps<Datum>, SVGPathElement>) {
+	const path = line<Datum>({ x, y, defined, curve });
+	if (children) return <>
+		{children({ path })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-linepath', className)}
+		d={path(data) || ''}
+		fill={fill}
+		strokeLinecap="round"
+		{...restProps}
+	/>;
+}

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

@@ -0,0 +1,19 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { Ref, ReactNode } from 'react';
+import type { Line as LineType } from 'd3-shape';
+import type { AddSVGProps, LinePathConfig } from '../types';
+export type LinePathProps<Datum> = {
+    /** Array of data for which to generate a line shape. */
+    data?: Datum[];
+    /** React RefObject passed to the path element. */
+    innerRef?: Ref<SVGPathElement>;
+    /** Override render function which is passed the configured path generator as input. */
+    children?: (args: {
+        path: LineType<Datum>;
+    }) => ReactNode;
+    /** Fill color of the path element. */
+    fill?: string;
+    /** className applied to path element. */
+    className?: string;
+} & LinePathConfig<Datum>;
+export default function LinePath<Datum>({ children, data, x, y, fill, className, curve, innerRef, defined, ...restProps }: AddSVGProps<LinePathProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/LineRadial.tsrx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import type { RadialLine } from 'd3-shape';
+import type { LinePathProps } from './LinePath.tsrx';
+import type { AddSVGProps, RadialLinePathConfig } from '../types';
+import { radialLine } from '../util/D3ShapeFactories';
+
+export type LineRadialProps<Datum> =
+	Pick<LinePathProps<Datum>, 'className' | 'data' | 'fill' | 'innerRef'> & {
+		/** Override render function which is passed the configured path generator as input. */
+		children?: (args: { path: RadialLine<Datum> }) => ReactNode;
+	} & RadialLinePathConfig<Datum>;
+
+export default function LineRadial<Datum>({
+	className,
+	angle,
+	radius,
+	defined,
+	curve,
+	data = [],
+	innerRef,
+	children,
+	fill = 'transparent',
+	...restProps
+}: AddSVGProps<LineRadialProps<Datum>, SVGPathElement>) {
+	const path = radialLine<Datum>({
+		angle,
+		radius,
+		defined,
+		curve,
+	});
+	if (children) return <>
+		{children({ path })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-line-radial', className)}
+		d={path(data) || ''}
+		fill={fill}
+		{...restProps}
+	/>;
+}

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

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { RadialLine } from 'd3-shape';
+import type { LinePathProps } from './LinePath.tsrx';
+import type { AddSVGProps, RadialLinePathConfig } from '../types';
+export type LineRadialProps<Datum> = Pick<LinePathProps<Datum>, 'className' | 'data' | 'fill' | 'innerRef'> & {
+    /** Override render function which is passed the configured path generator as input. */
+    children?: (args: {
+        path: RadialLine<Datum>;
+    }) => ReactNode;
+} & RadialLinePathConfig<Datum>;
+export default function LineRadial<Datum>({ className, angle, radius, defined, curve, data, innerRef, children, fill, ...restProps }: AddSVGProps<LineRadialProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/Pie.tsrx

@@ -0,0 +1,87 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { AddSVGProps, ArcPathConfig, PiePathConfig } from '../types';
+import usePie from '../react/usePie.tsrx';
+import type { PieArcDatum, UsePieResult } from '../react/usePie.tsrx';
+
+export type { PieArcDatum };
+
+type StringAccessor<Datum> = (pieArcDatum: PieArcDatum<Datum>) => string;
+
+export type ProvidedProps<Datum> = UsePieResult<Datum>;
+
+export type PieProps<Datum> = {
+		/** className applied to path element. */
+		className?: string;
+		/** Top offset of rendered Pie. */
+		top?: number;
+		/** Left offset of rendered Pie. */
+		left?: number;
+		/** Array of data to generate a Pie for. */
+		data?: Datum[];
+		/** Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid. */
+		centroid?: (xyCoords: [number, number], arc: PieArcDatum<Datum>) => ReactNode;
+		// These three fields are renamed
+		/** Invoked for each datum, returns the value for a given Pie segment/arc datum. */
+		pieValue?: PiePathConfig<Datum>['value'];
+		/** Comparator function to sort *arcs*, overridden by pieSortValues if defined. If pieSort and pieSortValues are null, arcs match input data order. */
+		pieSort?: PiePathConfig<Datum>['sort'];
+		/** Comparator function to sort arc *values*, overrides pieSort if defined. If pieSort and pieSortValues are null, arcs match input data order. */
+		pieSortValues?: PiePathConfig<Datum>['sortValues'];
+		/** Render function override which is passed the configured arc generator as input. */
+		children?: (provided: ProvidedProps<Datum>) => ReactNode;
+		/** Optional accessor function to return the fill string value of a given arc. */
+		fill?: string | StringAccessor<Datum>;
+	} & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> & Pick<ArcPathConfig<PieArcDatum<Datum>>, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'padRadius'>;
+
+export default function Pie<Datum>({
+	className,
+	top,
+	left,
+	data = [],
+	centroid,
+	innerRadius = 0,
+	outerRadius,
+	cornerRadius,
+	startAngle,
+	endAngle,
+	padAngle,
+	padRadius,
+	pieSort,
+	pieSortValues,
+	pieValue,
+	children,
+	fill = '',
+	...restProps
+}: AddSVGProps<PieProps<Datum>, SVGPathElement>) {
+	const { arcs, path, pie } = usePie({
+		data,
+		innerRadius,
+		outerRadius,
+		cornerRadius,
+		startAngle,
+		endAngle,
+		padAngle,
+		padRadius,
+		pieSort,
+		pieSortValues,
+		pieValue,
+	});
+
+	if (children) return <>
+		{children({ arcs, path, pie })}
+	</>;
+
+	return <Group className="visx-pie-arcs-group" top={top} left={left}>{arcs.map(
+		(arc, i) => <g key={`pie-arc-${i}`}>
+			<path
+				className={cx('visx-pie-arc', className)}
+				d={path(arc) || ''}
+				fill={fill == null || typeof fill === 'string' ? fill : fill(arc)}
+				{...restProps}
+			/>
+			{centroid?.(path.centroid(arc), arc)}
+		</g>,
+	)}</Group>;
+}

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

@@ -0,0 +1,30 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { AddSVGProps, ArcPathConfig, PiePathConfig } from '../types';
+import type { PieArcDatum, UsePieResult } from '../react/usePie.tsrx';
+export type { PieArcDatum };
+type StringAccessor<Datum> = (pieArcDatum: PieArcDatum<Datum>) => string;
+export type ProvidedProps<Datum> = UsePieResult<Datum>;
+export type PieProps<Datum> = {
+    /** className applied to path element. */
+    className?: string;
+    /** Top offset of rendered Pie. */
+    top?: number;
+    /** Left offset of rendered Pie. */
+    left?: number;
+    /** Array of data to generate a Pie for. */
+    data?: Datum[];
+    /** Optional render function invoked for each Datum to render something (e.g., a Label) at each pie centroid. */
+    centroid?: (xyCoords: [number, number], arc: PieArcDatum<Datum>) => ReactNode;
+    /** Invoked for each datum, returns the value for a given Pie segment/arc datum. */
+    pieValue?: PiePathConfig<Datum>['value'];
+    /** Comparator function to sort *arcs*, overridden by pieSortValues if defined. If pieSort and pieSortValues are null, arcs match input data order. */
+    pieSort?: PiePathConfig<Datum>['sort'];
+    /** Comparator function to sort arc *values*, overrides pieSort if defined. If pieSort and pieSortValues are null, arcs match input data order. */
+    pieSortValues?: PiePathConfig<Datum>['sortValues'];
+    /** Render function override which is passed the configured arc generator as input. */
+    children?: (provided: ProvidedProps<Datum>) => ReactNode;
+    /** Optional accessor function to return the fill string value of a given arc. */
+    fill?: string | StringAccessor<Datum>;
+} & Pick<PiePathConfig<Datum>, 'startAngle' | 'endAngle' | 'padAngle'> & Pick<ArcPathConfig<PieArcDatum<Datum>>, 'innerRadius' | 'outerRadius' | 'cornerRadius' | 'padRadius'>;
+export default function Pie<Datum>({ className, top, left, data, centroid, innerRadius, outerRadius, cornerRadius, startAngle, endAngle, padAngle, padRadius, pieSort, pieSortValues, pieValue, children, fill, ...restProps }: AddSVGProps<PieProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/Polygon.tsrx

@@ -0,0 +1,85 @@
+import type { ReactNode, Ref } from 'react';
+import cx from 'classnames';
+import { degreesToRadians } from '../util/trigonometry';
+import type { AddSVGProps } from '../types';
+
+const DEFAULT_CENTER = { x: 0, y: 0 };
+
+export const getPoint = ({ sides = 4, size = 25, center = DEFAULT_CENTER, rotate = 0, side }: {
+	side: number;
+} & NonNullable<Pick<PolygonProps, 'sides' | 'size' | 'center' | 'rotate'>>) => {
+	const degrees = (360 / sides) * side - rotate;
+	const radians = degreesToRadians(degrees);
+
+	return {
+		x: center.x + size * Math.cos(radians),
+		y: center.y + size * Math.sin(radians),
+	};
+};
+
+export const getPoints = ({ sides, size, center, rotate }: NonNullable<Pick<PolygonProps, | 'sides'
+| 'size'
+| 'center'
+| 'rotate'>>) => new Array(sides).fill(0).map(
+	(_, side) => getPoint({
+		sides,
+		size,
+		center,
+		rotate,
+		side,
+	}),
+);
+
+export type PolygonProps = {
+	/** Number of polygon sides. */
+	sides?: number;
+	/** Size of the shape. */
+	size?: number;
+	/** Points to use to render the polygon. If this is defined, `sides`, `size`, `rotate`, and `center` are ignored. */
+	points?: [number, number][];
+	/** className to apply to polygon element. */
+	className?: string;
+	/** Rotation transform to apply to polygon. */
+	rotate?: number;
+	/** Render function override which is passed the generated polygon points. */
+	children?: (args: { points: [number, number][] }) => ReactNode;
+	/** Reference to polygon element. */
+	innerRef?: Ref<SVGPolygonElement>;
+	/** Polygon center position. */
+	center?: {
+		x: number;
+		y: number;
+	};
+};
+
+export default function Polygon({
+	sides = 4,
+	size = 25,
+	center = DEFAULT_CENTER,
+	rotate = 0,
+	className,
+	children,
+	innerRef,
+	points,
+	...restProps
+}: AddSVGProps<PolygonProps, SVGPolygonElement>) {
+	const pointsToRender: [number, number][] =
+		points ||
+			getPoints({
+				sides,
+				size,
+				center,
+				rotate,
+			}).map(({ x, y }) => [x, y]);
+
+	if (children) return <>
+		{children({ points: pointsToRender })}
+	</>;
+
+	return <polygon
+		ref={innerRef}
+		className={cx('visx-polygon', className)}
+		points={pointsToRender.join(' ')}
+		{...restProps}
+	/>;
+}

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

@@ -0,0 +1,37 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, Ref } from 'react';
+import type { AddSVGProps } from '../types';
+export declare const getPoint: ({ sides, size, center, rotate, side }: {
+    side: number;
+} & NonNullable<Pick<PolygonProps, "sides" | "size" | "center" | "rotate">>) => {
+    x: number;
+    y: number;
+};
+export declare const getPoints: ({ sides, size, center, rotate }: NonNullable<Pick<PolygonProps, "sides" | "size" | "center" | "rotate">>) => {
+    x: number;
+    y: number;
+}[];
+export type PolygonProps = {
+    /** Number of polygon sides. */
+    sides?: number;
+    /** Size of the shape. */
+    size?: number;
+    /** Points to use to render the polygon. If this is defined, `sides`, `size`, `rotate`, and `center` are ignored. */
+    points?: [number, number][];
+    /** className to apply to polygon element. */
+    className?: string;
+    /** Rotation transform to apply to polygon. */
+    rotate?: number;
+    /** Render function override which is passed the generated polygon points. */
+    children?: (args: {
+        points: [number, number][];
+    }) => ReactNode;
+    /** Reference to polygon element. */
+    innerRef?: Ref<SVGPolygonElement>;
+    /** Polygon center position. */
+    center?: {
+        x: number;
+        y: number;
+    };
+};
+export default function Polygon({ sides, size, center, rotate, className, children, innerRef, points, ...restProps }: AddSVGProps<PolygonProps, SVGPolygonElement>): import("react").JSX.Element;

package/src/shape/shapes/SplitLinePath.tsrx

@@ -0,0 +1,86 @@
+import { useMemo, Fragment } from 'octane';
+import type { ReactNode, SVGProps } from 'react';
+import type { GetLineSegmentsConfig } from '../util/getSplitLineSegments';
+import getSplitLineSegments from '../util/getSplitLineSegments';
+import { line } from '../util/D3ShapeFactories';
+import type { LinePathConfig } from '../types';
+import LinePath from './LinePath.tsrx';
+
+interface Point {
+	x: number;
+	y: number;
+}
+
+const getX = (d: Point) => d.x || 0;
+const getY = (d: Point) => d.y || 0;
+
+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>) {
+	// Convert data in all segments to points.
+	const pointsInSegments = useMemo(() => {
+		const xFn =
+			typeof x === 'number' || typeof x === 'undefined' ? () => x : x;
+		const yFn =
+			typeof y === 'number' || typeof y === 'undefined' ? () => y : y;
+		return segments.map((s) => s.map((value, i) => ({ x: xFn(value, i, s), y: yFn(value, i, s) })));
+	}, [x, y, segments]);
+
+	const pathString = useMemo(() => {
+		const path = line<Datum>({ x, y, defined, curve });
+		return path(segments.flat()) || '';
+	}, [x, y, defined, curve, segments]);
+
+	const splitLineSegments = useMemo(
+		() => getSplitLineSegments({
+			path: pathString,
+			segmentation,
+			pointsInSegments,
+			sampleRate,
+		}),
+		[pathString, segmentation, pointsInSegments, sampleRate],
+	);
+
+	return <g>{splitLineSegments.map(
+		(segment, index) => children
+			? <Fragment key={index}>{children({
+					index,
+					segment,
+					styles: styles[index] || styles[index % styles.length],
+				})}</Fragment>
+			: <LinePath
+					key={index}
+					className={className}
+					data={segment}
+					x={getX}
+					y={getY}
+					{...styles[index] || styles[index % styles.length]}
+				/>,
+	)}</g>;
+}