@octanejs/visx 0.1.0

package/src/heatmap/heatmaps/HeatmapCircle.tsrx

@@ -0,0 +1,109 @@
+import type { ReactNode, SVGProps } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { GenericCell, ColorScale, OpacityScale } from '../types';
+
+export type HeatmapCircleProps<ColumnDatum, BinDatum> = {
+	/** Array of column data (one per column desired) for the heatmap. */
+	data?: ColumnDatum[];
+	/** Left offset applied to heatmap wrapper g element. */
+	left?: number;
+	/** Top offset applied to heatmap wrapper g element. */
+	top?: number;
+	/** Pixel gap between heatmap circles. */
+	gap?: number;
+	/** Pixel radius of heatmap circles. */
+	radius?: number;
+	/** Given a column index, returns the x position of a circle cell. */
+	xScale: (columnIndex: number) => number;
+	/** Given a row index, returns the y position of a circle cell. */
+	yScale: (rowIndex: number) => number;
+	/** Given a count value, returns the desired circle fill color. */
+	colorScale?: ColorScale;
+	/** Given a count value, returns the desired circle fill opacity. */
+	opacityScale?: OpacityScale;
+	/** Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData. */
+	bins?: (column: ColumnDatum) => BinDatum[];
+	/** Accessor that returns the count for the provided Bin. */
+	count?: (bin: BinDatum) => number;
+	/** className to apply to each heatmap circle element. */
+	className?: string;
+	/** Render function override, provided with heatmap. */
+	children?: (cells: CircleCell<ColumnDatum, BinDatum>[][]) => ReactNode;
+};
+
+export type CircleCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatum> & {
+		/** Computed radius for the circle (radius - gap). */
+		r: number;
+		/** Input radius for the circle including specified gap. */
+		radius: number;
+		/** x position of the cell circle center. */
+		cx: number;
+		/** y position of the cell circle center. */
+		cy: number;
+	};
+
+export default function HeatmapCircle<ColumnDatum, BinDatum>({
+	className,
+	top,
+	left,
+	data = [],
+	gap = 1,
+	radius = 6,
+	xScale,
+	yScale,
+	colorScale = () => undefined,
+	opacityScale = () => 1,
+	bins = (column: any) => column?.bins, // eslint-disable-line @typescript-eslint/no-explicit-any
+	count = (cell: any) => cell?.count, // eslint-disable-line @typescript-eslint/no-explicit-any
+	children,
+	...restProps
+}: HeatmapCircleProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGCircleElement>, | keyof HeatmapCircleProps<ColumnDatum, BinDatum>
+| 'r'
+| 'cx'
+| 'cy'
+| 'fill'
+| 'fillOpacity'>) {
+	const innerRadius = radius - gap;
+
+	const heatmap: CircleCell<ColumnDatum, BinDatum>[][] = data.map((columnDatum, column) => {
+		const x = xScale(column);
+		return bins(columnDatum).map((bin, row) => {
+			const countValue = count(bin);
+			return {
+				bin,
+				row,
+				column,
+				datum: columnDatum,
+				radius,
+				gap,
+				count: countValue,
+				cx: radius + x,
+				cy: yScale(row) + gap + radius,
+				r: innerRadius,
+				opacity: opacityScale(countValue),
+				color: colorScale(countValue),
+			};
+		});
+	});
+
+	if (children) return <>
+		{children(heatmap)}
+	</>;
+
+	return <Group className="visx-heatmap-circles" top={top} left={left}>{heatmap.flatMap(
+		(columns) => columns.map(
+			(bin) =>
+				<circle
+					key={`heatmap-tile-circle-${bin.row}-${bin.column}`}
+					className={cx('visx-heatmap-circle', className)}
+					r={bin.r}
+					cx={bin.cx}
+					cy={bin.cy}
+					fill={bin.color}
+					fillOpacity={bin.opacity}
+					{...restProps}
+				/>,
+		),
+	)}</Group>;
+}

package/src/heatmap/heatmaps/HeatmapCircle.tsrx.d.ts

@@ -0,0 +1,44 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { GenericCell, ColorScale, OpacityScale } from '../types';
+export type HeatmapCircleProps<ColumnDatum, BinDatum> = {
+    /** Array of column data (one per column desired) for the heatmap. */
+    data?: ColumnDatum[];
+    /** Left offset applied to heatmap wrapper g element. */
+    left?: number;
+    /** Top offset applied to heatmap wrapper g element. */
+    top?: number;
+    /** Pixel gap between heatmap circles. */
+    gap?: number;
+    /** Pixel radius of heatmap circles. */
+    radius?: number;
+    /** Given a column index, returns the x position of a circle cell. */
+    xScale: (columnIndex: number) => number;
+    /** Given a row index, returns the y position of a circle cell. */
+    yScale: (rowIndex: number) => number;
+    /** Given a count value, returns the desired circle fill color. */
+    colorScale?: ColorScale;
+    /** Given a count value, returns the desired circle fill opacity. */
+    opacityScale?: OpacityScale;
+    /** Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData. */
+    bins?: (column: ColumnDatum) => BinDatum[];
+    /** Accessor that returns the count for the provided Bin. */
+    count?: (bin: BinDatum) => number;
+    /** className to apply to each heatmap circle element. */
+    className?: string;
+    /** Render function override, provided with heatmap. */
+    children?: (cells: CircleCell<ColumnDatum, BinDatum>[][]) => ReactNode;
+};
+export type CircleCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatum> & {
+    /** Computed radius for the circle (radius - gap). */
+    r: number;
+    /** Input radius for the circle including specified gap. */
+    radius: number;
+    /** x position of the cell circle center. */
+    cx: number;
+    /** y position of the cell circle center. */
+    cy: number;
+};
+export default function HeatmapCircle<ColumnDatum, BinDatum>({ className, top, left, data, gap, radius, xScale, yScale, colorScale, opacityScale, bins, // eslint-disable-line @typescript-eslint/no-explicit-any
+count, // eslint-disable-line @typescript-eslint/no-explicit-any
+children, ...restProps }: HeatmapCircleProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGCircleElement>, keyof HeatmapCircleProps<ColumnDatum, BinDatum> | 'r' | 'cx' | 'cy' | 'fill' | 'fillOpacity'>): import("react").JSX.Element;

package/src/heatmap/heatmaps/HeatmapRect.tsrx

@@ -0,0 +1,121 @@
+import type { ReactNode, SVGProps } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { GenericCell, ColorScale, OpacityScale } from '../types';
+
+export type HeatmapRectProps<ColumnDatum, BinDatum> = {
+	/** Array of column data (one per column desired) for the heatmap. */
+	data?: ColumnDatum[];
+	/** Left offset applied to heatmap wrapper g element. */
+	left?: number;
+	/** Top offset applied to heatmap wrapper g element. */
+	top?: number;
+	/** Width of a rect bin. */
+	binWidth?: number;
+	/** Height of a rect bin. */
+	binHeight?: number;
+	/**  */
+	x0?: number;
+	/** Pixel gap between heatmap rects. */
+	gap?: number;
+	/** Given a column index, returns the x position of a rect cell. */
+	xScale: (columnIndex: number) => number;
+	/** Given a row index, returns the y position of a rect cell. */
+	yScale: (rowIndex: number) => number;
+	/** Given a count value, returns the desired rect fill color. */
+	colorScale?: ColorScale;
+	/** Given a count value, returns the desired rect fill opacity. */
+	opacityScale?: OpacityScale;
+	/** Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData. */
+	bins?: (column: ColumnDatum) => BinDatum[];
+	/** Accessor that returns the count for the provided Bin. */
+	count?: (bin: BinDatum) => number;
+	/** className to apply to each heatmap rect element. */
+	className?: string;
+	/** Render function override, provided with heatmap. */
+	children?: (cells: RectCell<ColumnDatum, BinDatum>[][]) => ReactNode;
+};
+
+export type RectCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatum> & {
+		/** binWidth less grid gap (effective width). */
+		width: number;
+		/** binHeight less grid gap (effective height). */
+		height: number;
+		/** x position of the cell rect. */
+		x: number;
+		/** y position of the cell rect. */
+		y: number;
+	};
+
+export type ComponentProps<ColumnDatum, BinDatum> =
+	HeatmapRectProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGRectElement>, | keyof HeatmapRectProps<ColumnDatum, BinDatum>
+	| 'width'
+	| 'height'
+	| 'x'
+	| 'y'
+	| 'fill'
+	| 'fillOpacity'>;
+
+export default function HeatmapRect<ColumnDatum, BinDatum>({
+	className,
+	top,
+	left,
+	data = [],
+	binWidth = 6,
+	binHeight = 6,
+	x0 = 0,
+	gap = 1,
+	xScale,
+	yScale,
+	colorScale = () => undefined,
+	opacityScale = () => 1,
+	bins = (d: any) => d?.bins, // eslint-disable-line @typescript-eslint/no-explicit-any
+	count = (d: any) => d?.count, // eslint-disable-line @typescript-eslint/no-explicit-any
+	children,
+	...restProps
+}: ComponentProps<ColumnDatum, BinDatum>) {
+	const width = binWidth - gap;
+	const height = binHeight - gap;
+
+	const heatmap: RectCell<ColumnDatum, BinDatum>[][] = data.map((datum, column) => {
+		const x = xScale(column);
+		return bins(datum).map((bin, row) => {
+			const countValue = count(bin);
+			return {
+				bin,
+				row,
+				column,
+				datum,
+				width,
+				height,
+				gap,
+				count: countValue,
+				x: x + x0,
+				y: yScale(row) + gap,
+				color: colorScale(countValue),
+				opacity: opacityScale(countValue),
+			};
+		});
+	});
+
+	if (children) return <>
+		{children(heatmap)}
+	</>;
+
+	return <Group className="visx-heatmap-rects" top={top} left={left}>{heatmap.flatMap(
+		(_bins) => _bins.map(
+			(bin) =>
+				<rect
+					key={`heatmap-tile-rect-${bin.row}-${bin.column}`}
+					className={cx('visx-heatmap-rect', className)}
+					width={bin.width}
+					height={bin.height}
+					x={bin.x}
+					y={bin.y}
+					fill={bin.color}
+					fillOpacity={bin.opacity}
+					{...restProps}
+				/>,
+		),
+	)}</Group>;
+}

package/src/heatmap/heatmaps/HeatmapRect.tsrx.d.ts

@@ -0,0 +1,49 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+import type { GenericCell, ColorScale, OpacityScale } from '../types';
+export type HeatmapRectProps<ColumnDatum, BinDatum> = {
+    /** Array of column data (one per column desired) for the heatmap. */
+    data?: ColumnDatum[];
+    /** Left offset applied to heatmap wrapper g element. */
+    left?: number;
+    /** Top offset applied to heatmap wrapper g element. */
+    top?: number;
+    /** Width of a rect bin. */
+    binWidth?: number;
+    /** Height of a rect bin. */
+    binHeight?: number;
+    /**  */
+    x0?: number;
+    /** Pixel gap between heatmap rects. */
+    gap?: number;
+    /** Given a column index, returns the x position of a rect cell. */
+    xScale: (columnIndex: number) => number;
+    /** Given a row index, returns the y position of a rect cell. */
+    yScale: (rowIndex: number) => number;
+    /** Given a count value, returns the desired rect fill color. */
+    colorScale?: ColorScale;
+    /** Given a count value, returns the desired rect fill opacity. */
+    opacityScale?: OpacityScale;
+    /** Accessor that returns an array of cell BinDatums (rows) for the provided ColumnData. */
+    bins?: (column: ColumnDatum) => BinDatum[];
+    /** Accessor that returns the count for the provided Bin. */
+    count?: (bin: BinDatum) => number;
+    /** className to apply to each heatmap rect element. */
+    className?: string;
+    /** Render function override, provided with heatmap. */
+    children?: (cells: RectCell<ColumnDatum, BinDatum>[][]) => ReactNode;
+};
+export type RectCell<ColumnDatum, BinDatum> = GenericCell<ColumnDatum, BinDatum> & {
+    /** binWidth less grid gap (effective width). */
+    width: number;
+    /** binHeight less grid gap (effective height). */
+    height: number;
+    /** x position of the cell rect. */
+    x: number;
+    /** y position of the cell rect. */
+    y: number;
+};
+export type ComponentProps<ColumnDatum, BinDatum> = HeatmapRectProps<ColumnDatum, BinDatum> & Omit<SVGProps<SVGRectElement>, keyof HeatmapRectProps<ColumnDatum, BinDatum> | 'width' | 'height' | 'x' | 'y' | 'fill' | 'fillOpacity'>;
+export default function HeatmapRect<ColumnDatum, BinDatum>({ className, top, left, data, binWidth, binHeight, x0, gap, xScale, yScale, colorScale, opacityScale, bins, // eslint-disable-line @typescript-eslint/no-explicit-any
+count, // eslint-disable-line @typescript-eslint/no-explicit-any
+children, ...restProps }: ComponentProps<ColumnDatum, BinDatum>): import("react").JSX.Element;

package/src/heatmap/index.ts

@@ -0,0 +1,11 @@
+// @octanejs/visx/heatmap
+export { default as HeatmapCircle } from './heatmaps/HeatmapCircle.tsrx';
+export { default as HeatmapRect } from './heatmaps/HeatmapRect.tsrx';
+
+export type * from './types';
+export type { CircleCell, HeatmapCircleProps } from './heatmaps/HeatmapCircle.tsrx';
+export type {
+	ComponentProps as HeatmapRectComponentProps,
+	HeatmapRectProps,
+	RectCell,
+} from './heatmaps/HeatmapRect.tsrx';

package/src/heatmap/types.ts

@@ -0,0 +1,22 @@
+export interface GenericCell<ColumnDatum, BinDatum> {
+	/** BinDatum for cell. */
+	bin: BinDatum;
+	/** Cell row index. */
+	row: number;
+	/** Cell column index. */
+	column: number;
+	/** ColumnDatum for the cell. */
+	datum: ColumnDatum;
+	/** Cell gap specified. */
+	gap: number;
+	/** Count returned for this BinDatum. */
+	count?: number | null;
+	/** Opacity returned for this BinDatum's count. */
+	opacity: number | undefined;
+	/** Color returned for this BinDatum's count. */
+	color: string | undefined;
+}
+
+export type ColorScale = (count: number | { valueOf(): number }) => string | undefined;
+
+export type OpacityScale = (count: number | { valueOf(): number }) => number | undefined;

package/src/hierarchy/HierarchyDefaultLink.tsrx

@@ -0,0 +1,19 @@
+type Node = { x: number; y: number };
+
+export type LinkProps = {
+	link?: { source: Node; target: Node };
+};
+
+const DEFAULT_LINK = { source: { x: 0, y: 0 }, target: { x: 0, y: 0 } };
+
+export default function HierarchyDefaultLink({ link = DEFAULT_LINK }: LinkProps) {
+	return <line
+		x1={link.source.x}
+		y1={link.source.y}
+		x2={link.target.x}
+		y2={link.target.y}
+		strokeWidth={2}
+		stroke="#999"
+		strokeOpacity={0.6}
+	/>;
+}

package/src/hierarchy/HierarchyDefaultLink.tsrx.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+type Node = {
+    x: number;
+    y: number;
+};
+export type LinkProps = {
+    link?: {
+        source: Node;
+        target: Node;
+    };
+};
+export default function HierarchyDefaultLink({ link }: LinkProps): import("react").JSX.Element;
+export {};

package/src/hierarchy/HierarchyDefaultNode.tsrx

@@ -0,0 +1,7 @@
+export type NodeProps = {
+	node?: { x: number; y: number; r?: number };
+};
+
+export default function HierarchyDefaultNode({ node = { x: 0, y: 0, r: 15 } }: NodeProps) {
+	return <circle cx={node.x} cy={node.y} r={node.r || 15} fill="#21D4FD" />;
+}

package/src/hierarchy/HierarchyDefaultNode.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type NodeProps = {
+    node?: {
+        x: number;
+        y: number;
+        r?: number;
+    };
+};
+export default function HierarchyDefaultNode({ node }: NodeProps): import("react").JSX.Element;

package/src/hierarchy/HierarchyDefaultRectNode.tsrx

@@ -0,0 +1,7 @@
+export type NodeProps = {
+	node: { x0: number; x1: number; y0: number; y1: number };
+};
+
+export default function HierarchyDefaultRectNode({ node: { x0, x1, y0, y1 } }: NodeProps) {
+	return <rect x={x0} y={y0} width={Math.abs(x1 - x0)} height={Math.abs(y1 - y0)} fill="#21D4FD" />;
+}

package/src/hierarchy/HierarchyDefaultRectNode.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+export type NodeProps = {
+    node: {
+        x0: number;
+        x1: number;
+        y0: number;
+        y1: number;
+    };
+};
+export default function HierarchyDefaultRectNode({ node: { x0, x1, y0, y1 } }: NodeProps): import("react").JSX.Element;

package/src/hierarchy/hierarchies/Cluster.tsrx

@@ -0,0 +1,81 @@
+import { createElement } from 'octane';
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { HierarchyNode, HierarchyPointNode, HierarchyPointLink } from 'd3-hierarchy';
+import { cluster as d3cluster } from 'd3-hierarchy';
+import DefaultLink from '../HierarchyDefaultLink.tsrx';
+import DefaultNode from '../HierarchyDefaultNode.tsrx';
+
+export type NodeComponentProps<Datum> = { node: HierarchyPointNode<Datum> };
+export type LinkComponentProps<Datum> = { link: HierarchyPointLink<Datum> };
+
+export type ClusterProps<Datum> = {
+	/** The root hierarchy node from which to derive the treemap layout. */
+	root: HierarchyNode<Datum>;
+	/** Render override function which is passed the computed cluster layout data. */
+	children?: (pack: HierarchyPointNode<Datum>) => ReactNode;
+	/** top offset applied to the g element container. */
+	top?: number;
+	/** left offset applied to the g element container. */
+	left?: number;
+	/** className applied to the g element container. */
+	className?: string;
+	/**
+ * Sets this cluster layout’s size to the specified two-element array of numbers `[width, height]`.
+ * This is an arbitrary coordinate system, e.g., for a radial layout, a size of `[360, radius]`
+ * corresponds to a breadth of 360° and a depth of radius.
+ */
+	size?: [number, number];
+	/**
+ * Sets this cluster layout’s node size to the specified two-element array of numbers `[width, height]`.
+ * If unset, layout size is used instead.  When a node size is specified, the root node is always
+ * positioned at `⟨0, 0⟩`.
+ */
+	nodeSize?: [number, number];
+	/** Sets the separation accessor, used to separate neighboring leaves. */
+	separation?: (a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number;
+	/** Component which renders a single cluster link, passed the link object. */
+	linkComponent?: | FunctionComponent<LinkComponentProps<Datum>>
+	| ComponentClass<LinkComponentProps<Datum>>;
+	/** Component which renders a single cluster node, passed the node object. */
+	nodeComponent?: | FunctionComponent<NodeComponentProps<Datum>>
+	| ComponentClass<NodeComponentProps<Datum>>;
+};
+
+export default function Cluster<Datum>({
+	top,
+	left,
+	className,
+	root,
+	size,
+	nodeSize,
+	separation,
+	children,
+	linkComponent = DefaultLink,
+	nodeComponent = DefaultNode,
+}: ClusterProps<Datum>) {
+	const cluster = d3cluster<Datum>();
+	if (size) cluster.size(size);
+	if (nodeSize !== undefined) cluster.nodeSize(nodeSize);
+	if (separation) cluster.separation(separation);
+
+	const data = cluster(root);
+
+	if (children) return <>
+		{children(data)}
+	</>;
+
+	return <Group top={top} left={left} className={cx('visx-cluster', className)}>
+		{linkComponent &&
+			data.links().map(
+				(link, i) =>
+					<Group key={`cluster-link-${i}`}>{createElement(linkComponent, { link })}</Group>,
+			)}
+		{nodeComponent &&
+			data.descendants().map(
+				(node, i) =>
+					<Group key={`cluster-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+			)}
+	</Group>;
+}

package/src/hierarchy/hierarchies/Cluster.tsrx.d.ts

@@ -0,0 +1,40 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { HierarchyNode, HierarchyPointNode, HierarchyPointLink } from 'd3-hierarchy';
+export type NodeComponentProps<Datum> = {
+    node: HierarchyPointNode<Datum>;
+};
+export type LinkComponentProps<Datum> = {
+    link: HierarchyPointLink<Datum>;
+};
+export type ClusterProps<Datum> = {
+    /** The root hierarchy node from which to derive the treemap layout. */
+    root: HierarchyNode<Datum>;
+    /** Render override function which is passed the computed cluster layout data. */
+    children?: (pack: HierarchyPointNode<Datum>) => ReactNode;
+    /** top offset applied to the g element container. */
+    top?: number;
+    /** left offset applied to the g element container. */
+    left?: number;
+    /** className applied to the g element container. */
+    className?: string;
+    /**
+ * Sets this cluster layout’s size to the specified two-element array of numbers `[width, height]`.
+ * This is an arbitrary coordinate system, e.g., for a radial layout, a size of `[360, radius]`
+ * corresponds to a breadth of 360° and a depth of radius.
+ */
+    size?: [number, number];
+    /**
+ * Sets this cluster layout’s node size to the specified two-element array of numbers `[width, height]`.
+ * If unset, layout size is used instead.  When a node size is specified, the root node is always
+ * positioned at `⟨0, 0⟩`.
+ */
+    nodeSize?: [number, number];
+    /** Sets the separation accessor, used to separate neighboring leaves. */
+    separation?: (a: HierarchyPointNode<Datum>, b: HierarchyPointNode<Datum>) => number;
+    /** Component which renders a single cluster link, passed the link object. */
+    linkComponent?: FunctionComponent<LinkComponentProps<Datum>> | ComponentClass<LinkComponentProps<Datum>>;
+    /** Component which renders a single cluster node, passed the node object. */
+    nodeComponent?: FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>>;
+};
+export default function Cluster<Datum>({ top, left, className, root, size, nodeSize, separation, children, linkComponent, nodeComponent, }: ClusterProps<Datum>): import("react").JSX.Element;

package/src/hierarchy/hierarchies/Pack.tsrx

@@ -0,0 +1,69 @@
+import { createElement } from 'octane';
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { HierarchyNode, HierarchyCircularNode } from 'd3-hierarchy';
+import { pack as d3pack } from 'd3-hierarchy';
+import DefaultNode from '../HierarchyDefaultNode.tsrx';
+
+export type PackProps<Datum> = {
+	/** The root hierarchy node from which to derive the pack layout. */
+	root: HierarchyNode<Datum>;
+	/** Render override function which is passed the computed pack layout data. */
+	children?: (pack: HierarchyCircularNode<Datum>) => ReactNode;
+	/** top offset applied to the g element container. */
+	top?: number;
+	/** left offset applied to the g element container. */
+	left?: number;
+	/** className applied to the g element container. */
+	className?: string;
+	/**
+ * Radius accessor function which defines the radius of each leaf node.
+ * If the radius accessor is null, the radius of each leaf circle is derived
+ * from the leaf node.value, and scaled proportionally to fit within
+ * the defined layout `size`.
+ */
+	radius?: (node: HierarchyNode<Datum>) => number;
+	/** Sets the pack layout size to the defined [width, height]. */
+	size?: [number, number];
+	/**
+ * Sets this pack layout's padding accessor to the specified number or function,
+ * which determines approximate separation of nodes in the resulting pack.
+ */
+	padding?: number;
+	/** Component which renders a single pack node, passed the node object. */
+	nodeComponent?: | FunctionComponent<NodeComponentProps<Datum>>
+	| ComponentClass<NodeComponentProps<Datum>>;
+};
+
+export type NodeComponentProps<Datum> = { node: HierarchyCircularNode<Datum> };
+
+export default function Pack<Datum>({
+	top,
+	left,
+	className,
+	root,
+	radius,
+	size,
+	padding,
+	children,
+	nodeComponent = DefaultNode,
+}: PackProps<Datum>) {
+	const pack = d3pack<Datum>();
+	if (size) pack.size(size);
+	if (radius !== undefined) pack.radius(radius);
+	if (padding) pack.padding(padding);
+
+	const data = pack(root);
+
+	if (children) return <>
+		{children(data)}
+	</>;
+
+	return <Group top={top} left={left} className={cx('visx-pack', className)}>
+		{nodeComponent &&
+			data.descendants().map(
+				(node, i) => <Group key={`pack-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+			)}
+	</Group>;
+}

package/src/hierarchy/hierarchies/Pack.tsrx.d.ts

@@ -0,0 +1,35 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { HierarchyNode, HierarchyCircularNode } from 'd3-hierarchy';
+export type PackProps<Datum> = {
+    /** The root hierarchy node from which to derive the pack layout. */
+    root: HierarchyNode<Datum>;
+    /** Render override function which is passed the computed pack layout data. */
+    children?: (pack: HierarchyCircularNode<Datum>) => ReactNode;
+    /** top offset applied to the g element container. */
+    top?: number;
+    /** left offset applied to the g element container. */
+    left?: number;
+    /** className applied to the g element container. */
+    className?: string;
+    /**
+ * Radius accessor function which defines the radius of each leaf node.
+ * If the radius accessor is null, the radius of each leaf circle is derived
+ * from the leaf node.value, and scaled proportionally to fit within
+ * the defined layout `size`.
+ */
+    radius?: (node: HierarchyNode<Datum>) => number;
+    /** Sets the pack layout size to the defined [width, height]. */
+    size?: [number, number];
+    /**
+ * Sets this pack layout's padding accessor to the specified number or function,
+ * which determines approximate separation of nodes in the resulting pack.
+ */
+    padding?: number;
+    /** Component which renders a single pack node, passed the node object. */
+    nodeComponent?: FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>>;
+};
+export type NodeComponentProps<Datum> = {
+    node: HierarchyCircularNode<Datum>;
+};
+export default function Pack<Datum>({ top, left, className, root, radius, size, padding, children, nodeComponent, }: PackProps<Datum>): import("react").JSX.Element;