@octanejs/visx 0.1.0

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

@@ -0,0 +1,53 @@
+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 pathVerticalLine<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 LinkVerticalLineProps<Link, Node> = AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkVerticalLine<Link, Node>({
+	className,
+	innerRef,
+	data,
+	path,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	children,
+	...restProps
+}: AddSVGProps<LinkVerticalLineProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathVerticalLine({ source, target, x, y });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-vertical-line', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

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

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

package/src/shape/shapes/link/step/LinkHorizontalStep.tsrx

@@ -0,0 +1,59 @@
+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 pathHorizontalStep<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 path = d3Path();
+		path.moveTo(sx, sy);
+		path.lineTo(sx + (tx - sx) * percent, sy);
+		path.lineTo(sx + (tx - sx) * percent, ty);
+		path.lineTo(tx, ty);
+
+		return path.toString();
+	};
+}
+
+type LinkHorizontalStepProps<Link, Node> = {
+		percent?: number;
+	} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkHorizontalStep<Link, Node>({
+	className,
+	innerRef,
+	data,
+	path,
+	percent = 0.5,
+	x = getY, // note this returns a y value
+	y = getX, // note this returns a x value
+	source = getSource,
+	target = getTarget,
+	children,
+	...restProps
+}: AddSVGProps<LinkHorizontalStepProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathHorizontalStep({ source, target, x, y, percent });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-horizontal-step', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/step/LinkHorizontalStep.tsrx.d.ts

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

package/src/shape/shapes/link/step/LinkRadialStep.tsrx

@@ -0,0 +1,68 @@
+import cx from 'classnames';
+import type { SharedLinkProps, AccessorProps, AddSVGProps } from '../../../types';
+import { getX, getY, getSource, getTarget } from '../../../util/accessors';
+
+export function pathRadialStep<Link, Node>({
+	source,
+	target,
+	x,
+	y,
+}: Required<AccessorProps<Link, Node>>) {
+	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 sa = sx - Math.PI / 2;
+		const sr = sy;
+		const ta = tx - Math.PI / 2;
+		const tr = ty;
+
+		const sc = Math.cos(sa);
+		const ss = Math.sin(sa);
+		const tc = Math.cos(ta);
+		const ts = Math.sin(ta);
+		const sf =
+			Math.abs(ta - sa) > Math.PI ? ta <= sa : ta > sa;
+
+		return `
+      M${sr * sc},${sr * ss}
+      A${sr},${sr},0,0,${sf ? 1 : 0},${sr * tc},${
+			sr * ts
+		}
+      L${tr * tc},${tr * ts}
+    `;
+	};
+}
+
+type LinkRadialStepProps<Link, Node> = {
+		percent?: number;
+	} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkRadialStep<Link, Node>({
+	className,
+	innerRef,
+	data,
+	path,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	children,
+	...restProps
+}: AddSVGProps<LinkRadialStepProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathRadialStep({ source, target, x, y });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-radial-step', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/step/LinkRadialStep.tsrx.d.ts

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

package/src/shape/shapes/link/step/LinkVerticalStep.tsrx

@@ -0,0 +1,59 @@
+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 pathVerticalStep<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 path = d3Path();
+		path.moveTo(sx, sy);
+		path.lineTo(sx, sy + (ty - sy) * percent);
+		path.lineTo(tx, sy + (ty - sy) * percent);
+		path.lineTo(tx, ty);
+
+		return path.toString();
+	};
+}
+
+type LinkVerticalStepProps<Link, Node> = {
+		percent?: number;
+	} & AccessorProps<Link, Node> & SharedLinkProps<Link>;
+
+export default function LinkVerticalStep<Link, Node>({
+	className,
+	innerRef,
+	data,
+	path,
+	percent = 0.5,
+	x = getX,
+	y = getY,
+	source = getSource,
+	target = getTarget,
+	children,
+	...restProps
+}: AddSVGProps<LinkVerticalStepProps<Link, Node>, SVGPathElement>) {
+	const pathGen = path || pathVerticalStep({ source, target, x, y, percent });
+	if (children) return <>
+		{children({ path: pathGen })}
+	</>;
+	return <path
+		ref={innerRef}
+		className={cx('visx-link visx-link-vertical-step', className)}
+		d={pathGen(data) || ''}
+		{...restProps}
+	/>;
+}

package/src/shape/shapes/link/step/LinkVerticalStep.tsrx.d.ts

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

package/src/shape/types/D3ShapeConfig.ts

@@ -0,0 +1,91 @@
+import type { CurveFactory, CurveFactoryLineOnly } from 'd3-shape';
+import type { Accessor, AccessorForArrayItem } from './accessor';
+import type { STACK_OFFSETS } from '../util/stackOffset';
+import type { STACK_ORDERS } from '../util/stackOrder';
+
+export type ArcPathConfig<Datum> = {
+	/** Number or accessor function which returns a number, which defines the arc innerRadius. */
+	innerRadius?: number | Accessor<Datum, number>;
+	/** Number or accessor function which returns a number, which defines the arc outerRadius. */
+	outerRadius?: number | Accessor<Datum, number>;
+	/** Number or accessor function which returns a number, which defines the arc cornerRadius. */
+	cornerRadius?: number | Accessor<Datum, number>;
+	/** Number or accessor function which returns a number, which defines the arc startAngle. */
+	startAngle?: number | Accessor<Datum, number>;
+	/** Number or accessor function which returns a number, which defines the arc endAngle. */
+	endAngle?: number | Accessor<Datum, number>;
+	/** Number or accessor function which returns a number, which defines the arc padAngle. */
+	padAngle?: number | Accessor<Datum, number>;
+	/** Number or accessor function which returns a number, which defines the arc padRadius. */
+	padRadius?: number | Accessor<Datum, number>;
+};
+
+export type AreaPathConfig<Datum> = {
+	/** The defined accessor for the shape. The final area shape includes all points for which this function returns true. By default all points are defined. */
+	defined?: AccessorForArrayItem<Datum, boolean>;
+	/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the area generator. Defaults to curveLinear. */
+	curve?: CurveFactory;
+	/** Sets the x0 accessor function, and sets x1 to null. */
+	x?: number | AccessorForArrayItem<Datum, number>;
+	/** Specifies the x0 accessor function which defaults to d => d[0]. */
+	x0?: number | AccessorForArrayItem<Datum, number>;
+	/** Specifies the x1 accessor function which defaults to null. */
+	x1?: number | AccessorForArrayItem<Datum, number>;
+	/** Sets the y0 accessor function, and sets y1 to null. */
+	y?: number | AccessorForArrayItem<Datum, number>;
+	/** Specifies the y0 accessor function which defaults to d => 0. */
+	y0?: number | AccessorForArrayItem<Datum, number>;
+	/** Specifies the y1 accessor function which defaults to d => d[1]. */
+	y1?: number | AccessorForArrayItem<Datum, number>;
+};
+
+export type LinePathConfig<Datum> = {
+	/** The defined accessor for the shape. The final line shape includes all points for which this function returns true. By default all points are defined. */
+	defined?: AccessorForArrayItem<Datum, boolean>;
+	/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
+	curve?: CurveFactory | CurveFactoryLineOnly;
+	/** Sets the x0 accessor function, and sets x1 to null. */
+	x?: number | AccessorForArrayItem<Datum, number>;
+	/** Sets the y0 accessor function, and sets y1 to null. */
+	y?: number | AccessorForArrayItem<Datum, number>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AngleAccessor<Datum> = (this: any, data: Datum[], ...args: any[]) => number;
+
+export type PiePathConfig<Datum> = {
+	/** Returns the start angle of the overall Pie shape (the first value starts at startAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */
+	startAngle?: number | AngleAccessor<Datum>;
+	/** Returns the end angle of the overall Pie shape (the last value ends at endAngle), with 0 at -y (12 o’clock) and positive angles proceeding clockwise. */
+	endAngle?: number | AngleAccessor<Datum>;
+	/** Padding angle of the Pie shape, which sets a fixed linear distance separating adjacent arcs. */
+	padAngle?: number | AngleAccessor<Datum>;
+	/** Invoked for each datum, returns the value for a given Pie segment/arc datum. */
+	value?: Accessor<Datum, number>;
+	/** Comparator function to sort *arcs*, overridden by sortValues if defined. If sort and sortValues are null, arcs match input data order. */
+	sort?: null | ((a: Datum, b: Datum) => number);
+	/** Comparator function to sort arc *values*, overrides sort if defined. If sort and sortValues are null, arcs match input data order. */
+	sortValues?: null | ((a: number, b: number) => number);
+};
+
+export type RadialLinePathConfig<Datum> = {
+	/** The defined accessor for the shape. The final radialLine shape includes all points for which this function returns true. By default all points are defined. */
+	defined?: AccessorForArrayItem<Datum, boolean>;
+	/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the radialLine generator. Defaults to curveLinear. */
+	curve?: CurveFactory | CurveFactoryLineOnly;
+	/** Returns the angle value in radians for a given Datum, with 0 at -y (12 o’clock). */
+	angle?: number | AccessorForArrayItem<Datum, number>;
+	/** Returns the radius value in radians for a given Datum, with 0 at the center. */
+	radius?: number | AccessorForArrayItem<Datum, number>;
+};
+
+export type StackPathConfig<Datum, Key> = {
+	/** Array of keys corresponding to stack layers. */
+	keys?: Key[];
+	/** Sets the stack offset to the pre-defined d3 offset, see https://github.com/d3/d3-shape#stack_offset. */
+	offset?: keyof typeof STACK_OFFSETS;
+	/** Sets the stack order to the pre-defined d3 function, see https://github.com/d3/d3-shape#stack_order. */
+	order?: keyof typeof STACK_ORDERS;
+	/** Sets the value accessor for a Datum, which defaults to d[key]. */
+	value?: number | ((d: Datum, key: Key) => number);
+};

package/src/shape/types/accessor.ts

@@ -0,0 +1,9 @@
+export type Accessor<Datum, Output> = (d: Datum) => Output;
+
+export type AccessorWithIndex<Datum, Output> = (d: Datum, index: number) => Output;
+
+export type AccessorForArrayItem<Datum, Output> = (
+	d: Datum,
+	index: number,
+	data: Datum[],
+) => Output;

package/src/shape/types/area.ts

@@ -0,0 +1,14 @@
+import type { Area } from 'd3-shape';
+import type { ReactNode, Ref } from 'react';
+import type { AreaPathConfig } from './D3ShapeConfig';
+
+export type BaseAreaProps<Datum> = {
+	/** Override render function which is passed the configured area generator as input. */
+	children?: (args: { path: Area<Datum> }) => ReactNode;
+	/** Classname applied to path element. */
+	className?: string;
+	/** Array of data for which to generate an area shape. */
+	data?: Datum[];
+	/** React RefObject passed to the path element. */
+	innerRef?: Ref<SVGPathElement>;
+} & AreaPathConfig<Datum>;

package/src/shape/types/barGroup.ts

@@ -0,0 +1,57 @@
+import type { DatumObject } from './base';
+
+/** Unique key for item in a group. */
+export type GroupKey = string | number;
+
+export interface BarGroupBar<Key> {
+	/** group key */
+	key: Key;
+	/** index of BarGroup (matches input Datum index). */
+	index: number;
+	/** group value (Datum[key]) */
+	value: number;
+	/** height of bar. */
+	height: number;
+	/** width of bar. */
+	width: number;
+	/** x position of bar. */
+	x: number;
+	/** y position of bar. */
+	y: number;
+	/** color of bar. */
+	color: string;
+}
+
+interface BaseBarGroup<Key> {
+	/** index of BarGroup (matches input Datum index). */
+	index: number;
+	/** bars within group, one for each key. */
+	bars: BarGroupBar<Key>[];
+}
+
+/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */
+export interface BarGroup<Key> extends BaseBarGroup<Key> {
+	/** x0 position of bar group */
+	x0: number;
+}
+
+/** One BarGroup is returned for each datum, which has multiple sub-bars (based on keys). */
+export interface BarGroupHorizontal<Key> extends BaseBarGroup<Key> {
+	/** y0 position of bar group */
+	y0: number;
+}
+
+export interface BaseBarGroupProps<Datum extends DatumObject, Key extends GroupKey = GroupKey> {
+	/** Array of data for which to generate grouped bars. */
+	data: Datum[];
+	/** Returns the desired color for a bar with a given key and index. */
+	color: (key: Key, index: number) => string;
+	/** Array of keys corresponding to stack layers. */
+	keys: Key[];
+	/** className applied to Bars. */
+	className?: string;
+	/** Top offset of rendered Bars. */
+	top?: number;
+	/** Left offset of rendered Bars. */
+	left?: number;
+}

package/src/shape/types/barStack.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { BarGroupBar } from './barGroup';
+import type { BaseStackProps, StackKey } from './stack';
+import type { PositionScale } from './base';
+
+/**
+ * Each series point j in a stack chart corresponds to the jth element in the input data.
+ * Each point is represented as an array [y0, y1] where y0 is the lower value (baseline) and y1 is the upper value (topline);
+ * the difference between y0 and y1 corresponds to the computed value for this point.
+ *
+ * SeriesPoint is a [number, number] two-element Array with added data and index properties
+ * related to the data element which formed the basis for theSeriesPoint.
+ */
+export interface SeriesPoint<Datum> extends Array<number> {
+	/**
+	 * Corresponds to y0, the lower value (baseline).
+	 */
+	0: number;
+	/**
+	 * Corresponds to y1, the upper value (topline).
+	 */
+	1: number;
+	/**
+	 * The data element underlying the series point.
+	 */
+	data: Datum;
+}
+
+/** One BarStack is returned for each datum, which has multiple sub-bars (based on keys). */
+export interface BarStack<Datum, Key> {
+	index: number;
+	key: Key;
+	bars: (Omit<BarGroupBar<Key>, 'key' | 'value'> & {
+		/** Processed bar Datum with bar bounds and original datum. */
+		bar: SeriesPoint<Datum>;
+		/** stack key */
+		key: Key;
+	})[];
+}
+
+export type BaseBarStackProps<
+	Datum,
+	Key extends StackKey = StackKey,
+	XScale extends PositionScale = PositionScale,
+	YScale extends PositionScale = PositionScale,
+> = BaseStackProps<Datum, Key> & {
+	/** @octanejs/visx/scale or d3-scale that takes an x value and maps it to an x axis position. */
+	xScale: XScale;
+	/** @octanejs/visx/scale or d3-scale that takes a y value and maps it to an y axis position. */
+	yScale: YScale;
+	/** Returns the desired color for a bar with a given key and index. */
+	color: (key: Key, index: number) => string;
+	/** Override render function which is passed the configured stack generator as input. */
+	children?: (stacks: BarStack<Datum, Key>[]) => ReactNode;
+};

package/src/shape/types/base.ts

@@ -0,0 +1,23 @@
+import type { D3Scale, PickD3Scale } from '@octanejs/visx/scale';
+import type { ReactNode, SVGProps } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type $TSFIXME = any;
+
+export type DatumObject = Record<string | number, $TSFIXME>;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyScaleBand = PickD3Scale<'band', any, any>;
+
+/** A catch-all type for scales that returns number */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type PositionScale = D3Scale<number, any, any>;
+
+/**
+ * Add fields from `SVGProps` for the specified SVG `Element`
+ * to `Props` except fields that already exist in `Props`
+ */
+export type AddSVGProps<Props, Element extends SVGElement> = Props &
+	Omit<SVGProps<Element>, keyof Props>;
+
+export type RenderProp<Input> = (args: Input) => ReactNode;

package/src/shape/types/index.ts

@@ -0,0 +1,8 @@
+export type * from './base';
+export type * from './accessor';
+export type * from './area';
+export type * from './barGroup';
+export type * from './barStack';
+export type * from './D3ShapeConfig';
+export type * from './link';
+export type * from './stack';

package/src/shape/types/link.ts

@@ -0,0 +1,37 @@
+import type { ReactNode, Ref } from 'react';
+
+export type AccessorProps<Link, Node> = {
+	/** Given a node, returns its x coordinate. */
+	x?: (node: Node) => number;
+	/** Given a node, returns its y coordinate. */
+	y?: (node: Node) => number;
+	/** Given a link, returns the source node. */
+	source?: (link: Link) => Node;
+	/** Given a link, returns the target node. */
+	target?: (link: Link) => Node;
+};
+
+export type RadialAccessorProps<Link, Node> = Pick<
+	AccessorProps<Link, Node>,
+	'source' | 'target'
+> & {
+	/** Given a node, returns its x coordinate. */
+	angle?: (node: Node) => number;
+	/** Given a node, returns its y coordinate. */
+	radius?: (node: Node) => number;
+};
+
+type PathType<Link> = (link: Link) => string | null;
+
+export type SharedLinkProps<Link> = {
+	/** className applied to path element. */
+	className?: string;
+	/** React ref to the path element. */
+	innerRef?: Ref<SVGPathElement>;
+	/** Path generator, given a link returns a path d attribute string */
+	path?: PathType<Link>;
+	/** Render function override which is passed the configured path generator as input. */
+	children?: (args: { path: PathType<Link> }) => ReactNode;
+	/** Datum for which to render a link. */
+	data: Link;
+};

package/src/shape/types/stack.ts

@@ -0,0 +1,15 @@
+import type { StackPathConfig } from './D3ShapeConfig';
+
+/** Unique key for item in a stack. */
+export type StackKey = string | number;
+
+export type BaseStackProps<Datum, Key> = {
+	/** Array of data for which generates a stack. */
+	data: Datum[];
+	/** className applied to path element. */
+	className?: string;
+	/** Top offset of rendered Stack. */
+	top?: number;
+	/** Left offset of rendered Stack. */
+	left?: number;
+} & StackPathConfig<Datum, Key>;