@octanejs/visx 0.1.0

package/src/hierarchy/hierarchies/Partition.tsrx

@@ -0,0 +1,62 @@
+import { createElement } from 'octane';
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { HierarchyNode, HierarchyRectangularNode } from 'd3-hierarchy';
+import { partition as d3partition } from 'd3-hierarchy';
+import DefaultNode from '../HierarchyDefaultRectNode.tsrx';
+
+export type NodeComponentProps<Datum> = { node: HierarchyRectangularNode<Datum> };
+
+export type PartitionProps<Datum> = {
+	/** The root hierarchy node from which to derive the treemap layout. */
+	root: HierarchyNode<Datum>;
+	/** Render override function which is passed the computed partition layout data. */
+	children?: (pack: HierarchyRectangularNode<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 partition layout’s size to the specified two-element array of numbers `[width, height]` . */
+	size?: [number, number];
+	/** Whether partition layout rounds values. */
+	round?: boolean;
+	/** Sets padding, used to separate a node’s adjacent children. */
+	padding?: number;
+	/** Component which renders a single cluster node, passed the node object. */
+	nodeComponent?: | FunctionComponent<NodeComponentProps<Datum>>
+	| ComponentClass<NodeComponentProps<Datum>>;
+};
+
+export default function Partition<Datum>({
+	top,
+	left,
+	className,
+	root,
+	size,
+	round,
+	padding,
+	children,
+	nodeComponent = DefaultNode,
+}: PartitionProps<Datum>) {
+	const partition = d3partition<Datum>();
+	if (size) partition.size(size);
+	if (round) partition.round(round);
+	if (padding) partition.padding(padding);
+
+	const data = partition(root);
+
+	if (children) return <>
+		{children(data)}
+	</>;
+
+	return <Group top={top} left={left} className={cx('visx-partition', className)}>
+		{nodeComponent &&
+			data.descendants().map(
+				(node, i) =>
+					<Group key={`partition-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+			)}
+	</Group>;
+}

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

@@ -0,0 +1,27 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { HierarchyNode, HierarchyRectangularNode } from 'd3-hierarchy';
+export type NodeComponentProps<Datum> = {
+    node: HierarchyRectangularNode<Datum>;
+};
+export type PartitionProps<Datum> = {
+    /** The root hierarchy node from which to derive the treemap layout. */
+    root: HierarchyNode<Datum>;
+    /** Render override function which is passed the computed partition layout data. */
+    children?: (pack: HierarchyRectangularNode<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 partition layout’s size to the specified two-element array of numbers `[width, height]` . */
+    size?: [number, number];
+    /** Whether partition layout rounds values. */
+    round?: boolean;
+    /** Sets padding, used to separate a node’s adjacent children. */
+    padding?: number;
+    /** Component which renders a single cluster node, passed the node object. */
+    nodeComponent?: FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>>;
+};
+export default function Partition<Datum>({ top, left, className, root, size, round, padding, children, nodeComponent, }: PartitionProps<Datum>): import("react").JSX.Element;

package/src/hierarchy/hierarchies/Tree.tsrx

@@ -0,0 +1,82 @@
+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 { tree as d3tree } 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 TreeProps<Datum> = {
+	/** The root hierarchy node from which to derive the tree 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 tree 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 tree 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 layout's separation accessor used to determine the separation of neighboring nodes.
+ * See https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_separation for more.
+ */
+	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 Tree<Datum>({
+	top,
+	left,
+	className,
+	root,
+	size,
+	nodeSize,
+	separation,
+	children,
+	linkComponent = DefaultLink,
+	nodeComponent = DefaultNode,
+}: TreeProps<Datum>) {
+	const tree = d3tree<Datum>();
+	if (size) tree.size(size);
+	if (nodeSize) tree.nodeSize(nodeSize);
+	if (separation) tree.separation(separation);
+
+	const data = tree(root);
+
+	if (children) return <>
+		{children(data)}
+	</>;
+
+	return <Group top={top} left={left} className={cx('visx-tree', className)}>
+		{linkComponent &&
+			data.links().map(
+				(link, i) => <Group key={`tree-link-${i}`}>{createElement(linkComponent, { link })}</Group>,
+			)}
+		{nodeComponent &&
+			data.descendants().map(
+				(node, i) => <Group key={`tree-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+			)}
+	</Group>;
+}

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

@@ -0,0 +1,43 @@
+// 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 TreeProps<Datum> = {
+    /** The root hierarchy node from which to derive the tree 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 tree 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 tree 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 layout's separation accessor used to determine the separation of neighboring nodes.
+ * See https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_separation for more.
+ */
+    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 Tree<Datum>({ top, left, className, root, size, nodeSize, separation, children, linkComponent, nodeComponent, }: TreeProps<Datum>): import("react").JSX.Element;

package/src/hierarchy/hierarchies/Treemap.tsrx

@@ -0,0 +1,97 @@
+import { createElement } from 'octane';
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import cx from 'classnames';
+import { Group } from '@octanejs/visx/group';
+import type { HierarchyRectangularNode, HierarchyNode } from 'd3-hierarchy';
+import { treemap as d3treemap } from 'd3-hierarchy';
+import HierarchyDefaultRectNode from '../HierarchyDefaultRectNode.tsrx';
+import setNumberOrNumberAccessor from '../utils/setNumOrNumAccessor';
+import type { TileMethod } from '../types';
+
+export type NodeComponentProps<Datum> = { node: HierarchyRectangularNode<Datum> };
+
+type NumerOrNumberAccessor<Datum> = number | ((node: HierarchyRectangularNode<Datum>) => number);
+
+export type TreemapProps<Datum> = {
+	/** The root hierarchy node from which to derive the treemap layout. */
+	root: HierarchyNode<Datum>;
+	/** Render override function which is passed the computed pack layout data. */
+	children?: (pack: HierarchyRectangularNode<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 the treemap tiling method to the specified function (exported from this package).
+ * See https://github.com/d3/d3-hierarchy#treemap for more.
+ */
+	tile?: TileMethod<Datum>;
+	/** Sets this treemap layout’s size to the specified two-element array of numbers [width, height]  */
+	size?: [number, number];
+	/** Whether to round treemap values. */
+	round?: boolean;
+	/** Sets both inner and outer padding to the specified number or accessor. */
+	padding?: NumerOrNumberAccessor<Datum>;
+	/** Sets padding used to separate a node’s adjacent children. */
+	paddingInner?: NumerOrNumberAccessor<Datum>;
+	/** Sets padding used to spearate a node from its children. */
+	paddingOuter?: NumerOrNumberAccessor<Datum>;
+	/** Sets padding used to spearate the top edge of a node from its children. */
+	paddingTop?: NumerOrNumberAccessor<Datum>;
+	/** Sets padding used to spearate the right edge of a node from its children. */
+	paddingRight?: NumerOrNumberAccessor<Datum>;
+	/** Sets padding used to spearate the bottom edge of a node from its children. */
+	paddingBottom?: NumerOrNumberAccessor<Datum>;
+	/** Sets padding used to spearate the left edge of a node from its children. */
+	paddingLeft?: NumerOrNumberAccessor<Datum>;
+	/** Component which renders a single pack node, passed the node object. */
+	nodeComponent?: | FunctionComponent<NodeComponentProps<Datum>>
+	| ComponentClass<NodeComponentProps<Datum>>;
+};
+
+export default function Treemap<Datum>({
+	top,
+	left,
+	className,
+	root,
+	tile,
+	size,
+	round,
+	padding,
+	paddingInner,
+	paddingOuter,
+	paddingTop,
+	paddingRight,
+	paddingBottom,
+	paddingLeft,
+	children,
+	nodeComponent = HierarchyDefaultRectNode,
+}: TreemapProps<Datum>) {
+	const treemap = d3treemap<Datum>();
+	if (tile) treemap.tile(tile);
+	if (size) treemap.size(size);
+	if (round) treemap.round(round);
+	if (padding) setNumberOrNumberAccessor(treemap.padding, padding);
+	if (paddingInner) setNumberOrNumberAccessor(treemap.paddingInner, paddingInner);
+	if (paddingOuter) setNumberOrNumberAccessor(treemap.paddingOuter, paddingOuter);
+	if (paddingTop) setNumberOrNumberAccessor(treemap.paddingTop, paddingTop);
+	if (paddingRight) setNumberOrNumberAccessor(treemap.paddingRight, paddingRight);
+	if (paddingBottom) setNumberOrNumberAccessor(treemap.paddingBottom, paddingBottom);
+	if (paddingLeft) setNumberOrNumberAccessor(treemap.paddingLeft, paddingLeft);
+
+	const data = treemap(root);
+
+	if (children) return <>
+		{children(data)}
+	</>;
+
+	return <Group top={top} left={left} className={cx('visx-treemap', className)}>
+		{nodeComponent &&
+			data.descendants().map(
+				(node, i) =>
+					<Group key={`treemap-node-${i}`}>{createElement(nodeComponent, { node })}</Group>,
+			)}
+	</Group>;
+}

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

@@ -0,0 +1,47 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, FunctionComponent, ComponentClass } from 'react';
+import type { HierarchyRectangularNode, HierarchyNode } from 'd3-hierarchy';
+import type { TileMethod } from '../types';
+export type NodeComponentProps<Datum> = {
+    node: HierarchyRectangularNode<Datum>;
+};
+type NumerOrNumberAccessor<Datum> = number | ((node: HierarchyRectangularNode<Datum>) => number);
+export type TreemapProps<Datum> = {
+    /** The root hierarchy node from which to derive the treemap layout. */
+    root: HierarchyNode<Datum>;
+    /** Render override function which is passed the computed pack layout data. */
+    children?: (pack: HierarchyRectangularNode<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 the treemap tiling method to the specified function (exported from this package).
+ * See https://github.com/d3/d3-hierarchy#treemap for more.
+ */
+    tile?: TileMethod<Datum>;
+    /** Sets this treemap layout’s size to the specified two-element array of numbers [width, height]  */
+    size?: [number, number];
+    /** Whether to round treemap values. */
+    round?: boolean;
+    /** Sets both inner and outer padding to the specified number or accessor. */
+    padding?: NumerOrNumberAccessor<Datum>;
+    /** Sets padding used to separate a node’s adjacent children. */
+    paddingInner?: NumerOrNumberAccessor<Datum>;
+    /** Sets padding used to spearate a node from its children. */
+    paddingOuter?: NumerOrNumberAccessor<Datum>;
+    /** Sets padding used to spearate the top edge of a node from its children. */
+    paddingTop?: NumerOrNumberAccessor<Datum>;
+    /** Sets padding used to spearate the right edge of a node from its children. */
+    paddingRight?: NumerOrNumberAccessor<Datum>;
+    /** Sets padding used to spearate the bottom edge of a node from its children. */
+    paddingBottom?: NumerOrNumberAccessor<Datum>;
+    /** Sets padding used to spearate the left edge of a node from its children. */
+    paddingLeft?: NumerOrNumberAccessor<Datum>;
+    /** Component which renders a single pack node, passed the node object. */
+    nodeComponent?: FunctionComponent<NodeComponentProps<Datum>> | ComponentClass<NodeComponentProps<Datum>>;
+};
+export default function Treemap<Datum>({ top, left, className, root, tile, size, round, padding, paddingInner, paddingOuter, paddingTop, paddingRight, paddingBottom, paddingLeft, children, nodeComponent, }: TreemapProps<Datum>): import("react").JSX.Element;
+export {};

package/src/hierarchy/index.ts

@@ -0,0 +1,26 @@
+// @octanejs/visx/hierarchy
+export { default as Tree } from './hierarchies/Tree.tsrx';
+export { default as Treemap } from './hierarchies/Treemap.tsrx';
+export { default as Cluster } from './hierarchies/Cluster.tsrx';
+export { default as Pack } from './hierarchies/Pack.tsrx';
+export { default as Partition } from './hierarchies/Partition.tsrx';
+export { default as HierarchyDefaultLink } from './HierarchyDefaultLink.tsrx';
+export { default as HierarchyDefaultNode } from './HierarchyDefaultNode.tsrx';
+export { default as HierarchyDefaultRectNode } from './HierarchyDefaultRectNode.tsrx';
+export {
+	hierarchy,
+	stratify,
+	treemapSquarify,
+	treemapBinary,
+	treemapResquarify,
+	treemapDice,
+	treemapSlice,
+	treemapSliceDice,
+} from 'd3-hierarchy';
+
+export type * from './types';
+export type { ClusterProps } from './hierarchies/Cluster.tsrx';
+export type { PackProps } from './hierarchies/Pack.tsrx';
+export type { PartitionProps } from './hierarchies/Partition.tsrx';
+export type { TreeProps } from './hierarchies/Tree.tsrx';
+export type { TreemapProps } from './hierarchies/Treemap.tsrx';

package/src/hierarchy/types.ts

@@ -0,0 +1,21 @@
+/** Re-export useful types from d3-hierarchy. */
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
+
+export type {
+	HierarchyNode,
+	HierarchyRectangularNode,
+	HierarchyCircularNode,
+	HierarchyPointLink,
+	HierarchyPointNode,
+	HierarchyCircularLink,
+	HierarchyRectangularLink,
+	HierarchyLink,
+} from 'd3-hierarchy';
+
+export type TileMethod<Datum> = (
+	n: HierarchyRectangularNode<Datum>,
+	x0: number,
+	y0: number,
+	x1: number,
+	y1: number,
+) => void;

package/src/hierarchy/utils/setNumOrNumAccessor.ts

@@ -0,0 +1,11 @@
+/**
+ * This is a workaround for TypeScript not inferring the correct
+ * method overload/signature for some d3 shape methods.
+ */
+export default function setNumberOrNumberAccessor<NumAccessor>(
+	func: (d: number | NumAccessor) => void,
+	value: number | NumAccessor,
+) {
+	if (typeof value === 'number') func(value);
+	else func(value);
+}

package/src/index.ts

@@ -0,0 +1,74 @@
+// @octanejs/visx/visx
+import * as A11y from '@octanejs/visx/a11y';
+import * as Annotation from '@octanejs/visx/annotation';
+import * as Axis from '@octanejs/visx/axis';
+import * as Bounds from '@octanejs/visx/bounds';
+import * as Brush from '@octanejs/visx/brush';
+import * as Chart from '@octanejs/visx/chart';
+import * as ClipPath from '@octanejs/visx/clip-path';
+import * as Curve from '@octanejs/visx/curve';
+import * as Drag from '@octanejs/visx/drag';
+import * as Event from '@octanejs/visx/event';
+import * as Geo from '@octanejs/visx/geo';
+import * as Glyph from '@octanejs/visx/glyph';
+import * as Gradient from '@octanejs/visx/gradient';
+import * as Grid from '@octanejs/visx/grid';
+import * as Group from '@octanejs/visx/group';
+import * as Heatmap from '@octanejs/visx/heatmap';
+import * as Hierarchy from '@octanejs/visx/hierarchy';
+import * as Kernel from '@octanejs/visx/kernel';
+import * as Legend from '@octanejs/visx/legend';
+import * as Marker from '@octanejs/visx/marker';
+import * as MockData from '@octanejs/visx/mock-data';
+import * as Network from '@octanejs/visx/network';
+import * as Pattern from '@octanejs/visx/pattern';
+import * as Point from '@octanejs/visx/point';
+import * as Responsive from '@octanejs/visx/responsive';
+import * as Scale from '@octanejs/visx/scale';
+import * as Shape from '@octanejs/visx/shape';
+import * as Text from '@octanejs/visx/text';
+import * as Theme from '@octanejs/visx/theme';
+import * as Threshold from '@octanejs/visx/threshold';
+import * as Tooltip from '@octanejs/visx/tooltip';
+import * as Voronoi from '@octanejs/visx/voronoi';
+import * as Wordcloud from '@octanejs/visx/wordcloud';
+import * as XYChart from '@octanejs/visx/xychart';
+import * as Zoom from '@octanejs/visx/zoom';
+
+export {
+	A11y,
+	Annotation,
+	Axis,
+	Bounds,
+	Brush,
+	Chart,
+	ClipPath,
+	Curve,
+	Drag,
+	Event,
+	Geo,
+	Glyph,
+	Gradient,
+	Grid,
+	Group,
+	Heatmap,
+	Hierarchy,
+	Kernel,
+	Legend,
+	Marker,
+	MockData,
+	Network,
+	Pattern,
+	Point,
+	Responsive,
+	Scale,
+	Shape,
+	Text,
+	Theme,
+	Threshold,
+	Tooltip,
+	Voronoi,
+	Wordcloud,
+	XYChart,
+	Zoom,
+};