@octanejs/visx 0.1.0

package/src/shape/shapes/BarGroup.tsrx

@@ -0,0 +1,131 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import Bar from './Bar.tsrx';
+import type {
+	PositionScale,
+	DatumObject,
+	AnyScaleBand,
+	AddSVGProps,
+	BaseBarGroupProps,
+	BarGroup as BarGroupType,
+	GroupKey,
+	Accessor,
+} from '../types';
+import getBandwidth from '../util/getBandwidth';
+
+export type BarGroupProps<Datum extends DatumObject, Key extends GroupKey = GroupKey, X0Scale extends AnyScaleBand = AnyScaleBand, X1Scale extends AnyScaleBand = AnyScaleBand> =
+	BaseBarGroupProps<Datum, Key> & {
+		/** Returns the value mapped to the x0 (group position) of a bar */
+		x0: Accessor<Datum, ScaleInput<X0Scale>>;
+		/** @octanejs/visx/scale or d3-scale that takes an x0 value (position of group) and maps it to an x0 axis position of the group. */
+		x0Scale: X0Scale;
+		/** @octanejs/visx/scale or d3-scale that takes a group key and maps it to an x axis position (within a group). */
+		x1Scale: X1Scale;
+		/** @octanejs/visx/scale or d3-scale that takes an y value (Datum[key]) and maps it to a y axis position. */
+		yScale: PositionScale;
+		/** Total height of the y-axis. */
+		height: number;
+		/** Override render function which is passed the computed BarGroups. */
+		children?: (barGroups: BarGroupType<Key>[]) => ReactNode;
+	};
+
+/**
+ * Generates bar groups as an array of objects and renders `<rect />`s for each datum grouped by `key`. A general setup might look like this:
+ *
+ * ```js
+ * const data = [{
+ *  date: date1,
+ *  key1: value,
+ *  key2: value,
+ *  key3: value
+ * }, {
+ *  date: date2,
+ *  key1: value,
+ *  key2: value,
+ *  key3: value,
+ * }];
+ *
+ * const x0 = d => d.date;
+ * const keys = [key1, key2, key3];
+ *
+ * const x0Scale = scaleBand({
+ *  domain: data.map(x0),
+ *  padding: 0.2
+ * });
+ * const x1Scale = scaleBand({
+ *  domain: keys,
+ *  padding: 0.1
+ * });
+ * const yScale = scaleLinear({
+ *   domain: [0, Math.max(...data.map(d => Math.max(...keys.map(key => d[key]))))]
+ * });
+ * const color = scaleOrdinal({
+ *   domain: keys,
+ *   range: [blue, green, purple]
+ * });
+ * ```
+ *
+ * Example: [https://airbnb.io/visx/bargroup](https://airbnb.io/visx/bargroup)
+ */
+export default function BarGroup<Datum extends DatumObject, Key extends GroupKey = GroupKey, X0Scale extends AnyScaleBand = AnyScaleBand, X1Scale extends AnyScaleBand = AnyScaleBand>({
+	data,
+	className,
+	top,
+	left,
+	x0,
+	x0Scale,
+	x1Scale,
+	yScale,
+	color,
+	keys,
+	height,
+	children,
+	...restProps
+}: AddSVGProps<BarGroupProps<Datum, Key, X0Scale, X1Scale>, SVGRectElement>) {
+	const barWidth = getBandwidth(x1Scale);
+
+	const barGroups: BarGroupType<Key>[] = data.map(
+		(group, i) => ({
+			index: i,
+			x0: x0Scale(x0(group))!,
+			bars: keys.map((key, j) => {
+				const value = group[key];
+				return {
+					index: j,
+					key,
+					value,
+					width: barWidth,
+					x: x1Scale(key) || 0,
+					y: yScale(value) || 0,
+					color: color(key, j),
+					height: height - (yScale(value) || 0),
+				};
+			}),
+		}),
+	);
+
+	if (children) return <>
+		{children(barGroups)}
+	</>;
+
+	return <Group className={cx('visx-bar-group', className)} top={top} left={left}>{barGroups.map(
+		(barGroup) =>
+			<Group
+				key={`bar-group-${barGroup.index}-${barGroup.x0}`}
+				left={barGroup.x0}
+			>{barGroup.bars.map(
+				(bar) =>
+					<Bar
+						key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
+						x={bar.x}
+						y={bar.y}
+						width={bar.width}
+						height={bar.height}
+						fill={bar.color}
+						{...restProps}
+					/>,
+			)}</Group>,
+	)}</Group>;
+}

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

@@ -0,0 +1,57 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { PositionScale, DatumObject, AnyScaleBand, AddSVGProps, BaseBarGroupProps, BarGroup as BarGroupType, GroupKey, Accessor } from '../types';
+export type BarGroupProps<Datum extends DatumObject, Key extends GroupKey = GroupKey, X0Scale extends AnyScaleBand = AnyScaleBand, X1Scale extends AnyScaleBand = AnyScaleBand> = BaseBarGroupProps<Datum, Key> & {
+    /** Returns the value mapped to the x0 (group position) of a bar */
+    x0: Accessor<Datum, ScaleInput<X0Scale>>;
+    /** @octanejs/visx/scale or d3-scale that takes an x0 value (position of group) and maps it to an x0 axis position of the group. */
+    x0Scale: X0Scale;
+    /** @octanejs/visx/scale or d3-scale that takes a group key and maps it to an x axis position (within a group). */
+    x1Scale: X1Scale;
+    /** @octanejs/visx/scale or d3-scale that takes an y value (Datum[key]) and maps it to a y axis position. */
+    yScale: PositionScale;
+    /** Total height of the y-axis. */
+    height: number;
+    /** Override render function which is passed the computed BarGroups. */
+    children?: (barGroups: BarGroupType<Key>[]) => ReactNode;
+};
+/**
+ * Generates bar groups as an array of objects and renders `<rect />`s for each datum grouped by `key`. A general setup might look like this:
+ *
+ * ```js
+ * const data = [{
+ *  date: date1,
+ *  key1: value,
+ *  key2: value,
+ *  key3: value
+ * }, {
+ *  date: date2,
+ *  key1: value,
+ *  key2: value,
+ *  key3: value,
+ * }];
+ *
+ * const x0 = d => d.date;
+ * const keys = [key1, key2, key3];
+ *
+ * const x0Scale = scaleBand({
+ *  domain: data.map(x0),
+ *  padding: 0.2
+ * });
+ * const x1Scale = scaleBand({
+ *  domain: keys,
+ *  padding: 0.1
+ * });
+ * const yScale = scaleLinear({
+ *   domain: [0, Math.max(...data.map(d => Math.max(...keys.map(key => d[key]))))]
+ * });
+ * const color = scaleOrdinal({
+ *   domain: keys,
+ *   range: [blue, green, purple]
+ * });
+ * ```
+ *
+ * Example: [https://airbnb.io/visx/bargroup](https://airbnb.io/visx/bargroup)
+ */
+export default function BarGroup<Datum extends DatumObject, Key extends GroupKey = GroupKey, X0Scale extends AnyScaleBand = AnyScaleBand, X1Scale extends AnyScaleBand = AnyScaleBand>({ data, className, top, left, x0, x0Scale, x1Scale, yScale, color, keys, height, children, ...restProps }: AddSVGProps<BarGroupProps<Datum, Key, X0Scale, X1Scale>, SVGRectElement>): import("react").JSX.Element;

package/src/shape/shapes/BarGroupHorizontal.tsrx

@@ -0,0 +1,100 @@
+import type { ReactNode } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import Bar from './Bar.tsrx';
+import type {
+	PositionScale,
+	AnyScaleBand,
+	DatumObject,
+	AddSVGProps,
+	BarGroupHorizontal as BarGroupHorizontalType,
+	BaseBarGroupProps,
+	GroupKey,
+	Accessor,
+} from '../types';
+import getBandwidth from '../util/getBandwidth';
+
+export type BarGroupHorizontalProps<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand> =
+	BaseBarGroupProps<Datum, Key> & {
+		/** Returns the value (Datum[key]) mapped to the x of a bar */
+		x?: (barValue: number) => number;
+		/** Returns the value mapped to the y0 (position of group) of a bar */
+		y0: Accessor<Datum, ScaleInput<Y0Scale>>;
+		/** @octanejs/visx/scale or d3-scale that takes a key value (Datum[key]) and maps it to an x axis position (width of bar). */
+		xScale: PositionScale;
+		/** @octanejs/visx/scale or d3-scale that takes a y0 value (position of group) and maps it to a y axis position. */
+		y0Scale: Y0Scale;
+		/** @octanejs/visx/scale or d3-scale that takes a group key and maps it to an y axis position (within a group). */
+		y1Scale: Y1Scale;
+		/** Total width of the x-axis. */
+		width: number;
+		/** Override render function which is passed the computed Ba/rGroups. */
+		children?: (barGroups: BarGroupHorizontalType<Key>[]) => ReactNode;
+	};
+
+export default function BarGroupHorizontal<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand>({
+	data,
+	className,
+	top,
+	left,
+	x = () => /** val */ 0,
+	y0,
+	y0Scale,
+	y1Scale,
+	xScale,
+	color,
+	keys,
+	width,
+	children,
+	...restProps
+}: AddSVGProps<BarGroupHorizontalProps<Datum, Key, Y0Scale, Y1Scale>, SVGRectElement>) {
+	const barHeight = getBandwidth(y1Scale);
+
+	const barGroups: BarGroupHorizontalType<Key>[] = data.map(
+		(group, i) => ({
+			index: i,
+			y0: y0Scale(y0(group)) || 0,
+			bars: keys.map((key, j) => {
+				const value = group[key];
+				return {
+					index: j,
+					key,
+					value,
+					height: barHeight,
+					x: x(value) || 0,
+					y: y1Scale(key) || 0,
+					color: color(key, j),
+					width: xScale(value) || 0,
+				};
+			}),
+		}),
+	);
+
+	if (children) return <>
+		{children(barGroups)}
+	</>;
+
+	return <Group
+		className={cx('visx-bar-group-horizontal', className)}
+		top={top}
+		left={left}
+	>{barGroups.map(
+		(barGroup) =>
+			<Group
+				key={`bar-group-${barGroup.index}-${barGroup.y0}`}
+				top={barGroup.y0}
+			>{barGroup.bars.map(
+				(bar) =>
+					<Bar
+						key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
+						x={bar.x}
+						y={bar.y}
+						width={bar.width}
+						height={bar.height}
+						fill={bar.color}
+						{...restProps}
+					/>,
+			)}</Group>,
+	)}</Group>;
+}

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

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { ScaleInput } from '@octanejs/visx/scale';
+import type { PositionScale, AnyScaleBand, DatumObject, AddSVGProps, BarGroupHorizontal as BarGroupHorizontalType, BaseBarGroupProps, GroupKey, Accessor } from '../types';
+export type BarGroupHorizontalProps<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand> = BaseBarGroupProps<Datum, Key> & {
+    /** Returns the value (Datum[key]) mapped to the x of a bar */
+    x?: (barValue: number) => number;
+    /** Returns the value mapped to the y0 (position of group) of a bar */
+    y0: Accessor<Datum, ScaleInput<Y0Scale>>;
+    /** @octanejs/visx/scale or d3-scale that takes a key value (Datum[key]) and maps it to an x axis position (width of bar). */
+    xScale: PositionScale;
+    /** @octanejs/visx/scale or d3-scale that takes a y0 value (position of group) and maps it to a y axis position. */
+    y0Scale: Y0Scale;
+    /** @octanejs/visx/scale or d3-scale that takes a group key and maps it to an y axis position (within a group). */
+    y1Scale: Y1Scale;
+    /** Total width of the x-axis. */
+    width: number;
+    /** Override render function which is passed the computed Ba/rGroups. */
+    children?: (barGroups: BarGroupHorizontalType<Key>[]) => ReactNode;
+};
+export default function BarGroupHorizontal<Datum extends DatumObject, Key extends GroupKey = GroupKey, Y0Scale extends AnyScaleBand = AnyScaleBand, Y1Scale extends AnyScaleBand = AnyScaleBand>({ data, className, top, left, x, y0, y0Scale, y1Scale, xScale, color, keys, width, children, ...restProps }: AddSVGProps<BarGroupHorizontalProps<Datum, Key, Y0Scale, Y1Scale>, SVGRectElement>): import("react").JSX.Element;

package/src/shape/shapes/BarRounded.tsrx

@@ -0,0 +1,153 @@
+import type { ReactNode, Ref } from 'react';
+import cx from 'classnames';
+import type { AddSVGProps } from '../types';
+
+export type BarRoundedProps = {
+	/** className to apply to path element. */
+	className?: string;
+	/** reference to path element. */
+	innerRef?: Ref<SVGPathElement>;
+	/** left position of the bar */
+	x: number;
+	/** top position of the bar */
+	y: number;
+	/** width of the bar starting from x */
+	width: number;
+	/** height of the bar starting from y */
+	height: number;
+	/** corner radius of the bar. clamped to center of the shorter side of the bar (Math.min(width,height) / 2) */
+	radius: number;
+	/** apply corner radius to top left corner, top right corner, bottom right corner, and bottom left corner */
+	all?: boolean;
+	/** apply corner radius to top left corner, and top right corner */
+	top?: boolean;
+	/** apply corner radius to bottom right corner, and bottom left corner */
+	bottom?: boolean;
+	/** apply corner radius to top left corner, and bottom left corner */
+	left?: boolean;
+	/** apply corner radius to top right corner, and bottom right corner */
+	right?: boolean;
+	/** apply corner radius to top left corner */
+	topLeft?: boolean;
+	/** apply corner radius to top right corner */
+	topRight?: boolean;
+	/** apply corner radius to bottom left corner */
+	bottomLeft?: boolean;
+	/** apply corner radius to bottom right */
+	bottomRight?: boolean;
+	/** Optional children override. */
+	children?: ({
+		path,
+	}: {
+		path: string;
+	}) => ReactNode;
+};
+
+/** Hook that returns a BarRounded path. */
+export function useBarRoundedPath({
+	all,
+	bottom,
+	bottomLeft,
+	bottomRight,
+	height,
+	left,
+	radius,
+	right,
+	top,
+	topLeft,
+	topRight,
+	width,
+	x,
+	y,
+}: Pick<BarRoundedProps, | 'all'
+| 'top'
+| 'bottom'
+| 'left'
+| 'right'
+| 'x'
+| 'y'
+| 'width'
+| 'height'
+| 'radius'
+| 'topLeft'
+| 'topRight'
+| 'bottomRight'
+| 'bottomLeft'>) {
+	topRight = all || top || right || topRight;
+	bottomRight = all || bottom || right || bottomRight;
+	bottomLeft = all || bottom || left || bottomLeft;
+	topLeft = all || top || left || topLeft;
+
+	// clamp radius to center of shortest side of the rect
+	radius = Math.max(1, Math.min(radius, Math.min(width, height) / 2));
+
+	const diameter = 2 * radius;
+	const path = `M${x + radius},${y} h${width - diameter}
+ ${
+		topRight ? `a${radius},${radius} 0 0 1 ${radius},${radius}` : `h${radius}v${radius}`
+	}
+ v${height - diameter}
+ ${
+		bottomRight ? `a${radius},${radius} 0 0 1 ${-radius},${radius}` : `v${radius}h${-radius}`
+	}
+ h${diameter - width}
+ ${
+		bottomLeft ? `a${radius},${radius} 0 0 1 ${-radius},${-radius}` : `h${-radius}v${-radius}`
+	}
+ v${diameter - height}
+ ${
+		topLeft ? `a${radius},${radius} 0 0 1 ${radius},${-radius}` : `v${-radius}h${radius}`
+	}
+z`.split('\n').join('');
+
+	return path;
+}
+
+export default function BarRounded({
+	children,
+	className,
+	innerRef,
+	x,
+	y,
+	width,
+	height,
+	radius,
+	all = false,
+	top = false,
+	bottom = false,
+	left = false,
+	right = false,
+	topLeft = false,
+	topRight = false,
+	bottomLeft = false,
+	bottomRight = false,
+	...restProps
+}: AddSVGProps<BarRoundedProps, SVGPathElement>) {
+	const path = useBarRoundedPath({
+		x,
+		y,
+		width,
+		height,
+		radius,
+		all,
+		top,
+		bottom,
+		left,
+		right,
+		topLeft,
+		topRight,
+		bottomLeft,
+		bottomRight,
+	});
+
+	if (children) return <>
+		{children({ path })}
+	</>;
+
+	return <path
+		ref={innerRef}
+		className={cx('visx-bar-rounded', className)}
+		d={path}
+		{...restProps}
+	/>;
+}

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

@@ -0,0 +1,44 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, Ref } from 'react';
+import type { AddSVGProps } from '../types';
+export type BarRoundedProps = {
+    /** className to apply to path element. */
+    className?: string;
+    /** reference to path element. */
+    innerRef?: Ref<SVGPathElement>;
+    /** left position of the bar */
+    x: number;
+    /** top position of the bar */
+    y: number;
+    /** width of the bar starting from x */
+    width: number;
+    /** height of the bar starting from y */
+    height: number;
+    /** corner radius of the bar. clamped to center of the shorter side of the bar (Math.min(width,height) / 2) */
+    radius: number;
+    /** apply corner radius to top left corner, top right corner, bottom right corner, and bottom left corner */
+    all?: boolean;
+    /** apply corner radius to top left corner, and top right corner */
+    top?: boolean;
+    /** apply corner radius to bottom right corner, and bottom left corner */
+    bottom?: boolean;
+    /** apply corner radius to top left corner, and bottom left corner */
+    left?: boolean;
+    /** apply corner radius to top right corner, and bottom right corner */
+    right?: boolean;
+    /** apply corner radius to top left corner */
+    topLeft?: boolean;
+    /** apply corner radius to top right corner */
+    topRight?: boolean;
+    /** apply corner radius to bottom left corner */
+    bottomLeft?: boolean;
+    /** apply corner radius to bottom right */
+    bottomRight?: boolean;
+    /** Optional children override. */
+    children?: ({ path, }: {
+        path: string;
+    }) => ReactNode;
+};
+/** Hook that returns a BarRounded path. */
+export declare function useBarRoundedPath({ all, bottom, bottomLeft, bottomRight, height, left, radius, right, top, topLeft, topRight, width, x, y, }: Pick<BarRoundedProps, 'all' | 'top' | 'bottom' | 'left' | 'right' | 'x' | 'y' | 'width' | 'height' | 'radius' | 'topLeft' | 'topRight' | 'bottomRight' | 'bottomLeft'>): string;
+export default function BarRounded({ children, className, innerRef, x, y, width, height, radius, all, top, bottom, left, right, topLeft, topRight, bottomLeft, bottomRight, ...restProps }: AddSVGProps<BarRoundedProps, SVGPathElement>): import("react").JSX.Element;

package/src/shape/shapes/BarStack.tsrx

@@ -0,0 +1,103 @@
+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 {
+	PositionScale,
+	AddSVGProps,
+	BarStack as BarStackType,
+	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 BarStackProps<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale> =
+	BaseBarStackProps<Datum, Key, XScale, YScale> & {
+		/** Returns the value mapped to the x of a bar. */
+		x: Accessor<Datum, ScaleInput<XScale>>;
+		/** Returns the value mapped to the y0 of a bar. */
+		y0?: Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>;
+		/** Returns the value mapped to the y1 of a bar. */
+		y1?: Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>;
+	};
+
+export default function BarStack<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale>({
+	data,
+	className,
+	top,
+	left,
+	x,
+	y0 = getFirstItem,
+	y1 = getSecondItem,
+	xScale,
+	yScale,
+	color,
+	keys,
+	value,
+	order,
+	offset,
+	children,
+	...restProps
+}: AddSVGProps<BarStackProps<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 barWidth = getBandwidth(xScale);
+
+	const barStacks: BarStackType<Datum, Key>[] = stacks.map((barStack, i) => {
+		const { key } = barStack;
+		return {
+			index: i,
+			key,
+			bars: barStack.map((bar, j) => {
+				const barHeight = (yScale(y0(bar)) || 0) - (yScale(y1(bar)) || 0);
+				const barY = yScale(y1(bar));
+				const barX =
+					'bandwidth' in xScale
+						? xScale(x(bar.data))
+						: Math.max((xScale(x(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', 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/BarStack.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 { PositionScale, AddSVGProps, BaseBarStackProps, StackKey, Accessor } from '../types';
+export type BarStackProps<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale> = BaseBarStackProps<Datum, Key, XScale, YScale> & {
+    /** Returns the value mapped to the x of a bar. */
+    x: Accessor<Datum, ScaleInput<XScale>>;
+    /** Returns the value mapped to the y0 of a bar. */
+    y0?: Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>;
+    /** Returns the value mapped to the y1 of a bar. */
+    y1?: Accessor<SeriesPoint<Datum>, ScaleInput<YScale>>;
+};
+export default function BarStack<Datum, Key extends StackKey = StackKey, XScale extends PositionScale = PositionScale, YScale extends PositionScale = PositionScale>({ data, className, top, left, x, y0, y1, xScale, yScale, color, keys, value, order, offset, children, ...restProps }: AddSVGProps<BarStackProps<Datum, Key, XScale, YScale>, SVGRectElement>): import("react").JSX.Element;