@octanejs/visx 0.1.0

package/src/tooltip/tooltips/TooltipWithBounds.tsrx

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, Ref, CSSProperties } from 'react';
+import type { WithBoundingRectsProps } from '@octanejs/visx/bounds';
+import { withBoundingRects } from '@octanejs/visx/bounds';
+
+import type { TooltipProps } from './Tooltip.tsrx';
+import Tooltip, { defaultStyles } from './Tooltip.tsrx';
+import { TooltipPositionProvider } from '../context/TooltipPositionContext.tsrx';
+
+export type TooltipWithBoundsProps =
+	TooltipProps & HTMLAttributes<HTMLDivElement> & WithBoundingRectsProps & {
+		nodeRef?: Ref<HTMLDivElement>;
+	};
+
+function TooltipWithBounds({
+	children,
+	getRects,
+	left: initialLeft = 0,
+	offsetLeft = 10,
+	offsetTop = 10,
+	parentRect: parentBounds,
+	rect: ownBounds,
+	style = defaultStyles,
+	top: initialTop = 0,
+	unstyled = false,
+	nodeRef,
+	...otherProps
+}: TooltipWithBoundsProps) {
+	let transform: CSSProperties['transform'];
+	let placeTooltipLeft = false;
+	let placeTooltipUp = false;
+
+	if (ownBounds && parentBounds) {
+		let left = initialLeft;
+		let top = initialTop;
+
+		if (parentBounds.width) {
+			const rightPlacementClippedPx = left + offsetLeft + ownBounds.width - parentBounds.width;
+			const leftPlacementClippedPx = ownBounds.width - left - offsetLeft;
+			placeTooltipLeft = rightPlacementClippedPx > 0 &&
+				rightPlacementClippedPx > leftPlacementClippedPx;
+		} else {
+			const rightPlacementClippedPx = left + offsetLeft + ownBounds.width - window.innerWidth;
+			const leftPlacementClippedPx = ownBounds.width - left - offsetLeft;
+			placeTooltipLeft = rightPlacementClippedPx > 0 &&
+				rightPlacementClippedPx > leftPlacementClippedPx;
+		}
+
+		if (parentBounds.height) {
+			const bottomPlacementClippedPx = top + offsetTop + ownBounds.height - parentBounds.height;
+			const topPlacementClippedPx = ownBounds.height - top - offsetTop;
+			placeTooltipUp = bottomPlacementClippedPx > 0 &&
+				bottomPlacementClippedPx > topPlacementClippedPx;
+		} else {
+			placeTooltipUp = top + offsetTop + ownBounds.height > window.innerHeight;
+		}
+
+		left = placeTooltipLeft ? left - ownBounds.width - offsetLeft : left + offsetLeft;
+		top = placeTooltipUp ? top - ownBounds.height - offsetTop : top + offsetTop;
+
+		left = Math.round(left);
+		top = Math.round(top);
+
+		transform = `translate(${left}px, ${top}px)`;
+	}
+
+	return <Tooltip
+		ref={nodeRef}
+		style={{
+			left: 0,
+			top: 0,
+			transform,
+			...!unstyled && style,
+		}}
+		{...otherProps}
+	>
+		<TooltipPositionProvider
+			value={{ isFlippedVertically: !placeTooltipUp, isFlippedHorizontally: !placeTooltipLeft }}
+		>{children}</TooltipPositionProvider>
+	</Tooltip>;
+}
+
+export default withBoundingRects(TooltipWithBounds)

package/src/tooltip/tooltips/TooltipWithBounds.tsrx.d.ts

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { HTMLAttributes, Ref } from 'react';
+import type { WithBoundingRectsProps } from '@octanejs/visx/bounds';
+import type { TooltipProps } from './Tooltip.tsrx';
+export type TooltipWithBoundsProps = TooltipProps & HTMLAttributes<HTMLDivElement> & WithBoundingRectsProps & {
+    nodeRef?: Ref<HTMLDivElement>;
+};
+declare const _default: any;
+export default _default;

package/src/voronoi/components/VoronoiPolygon.tsrx

@@ -0,0 +1,32 @@
+import type { ReactNode, SVGProps } from 'react';
+import cx from 'classnames';
+
+export type VoronoiPolygonProps = {
+	/** Override render function which is provided polygon and generated path. */
+	children?: ({
+		path,
+		polygon,
+	}: {
+		path: string;
+		polygon: [number, number][];
+	}) => ReactNode;
+	/** className to apply to path element. */
+	className?: string;
+	/** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */
+	polygon?: [number, number][];
+};
+
+export default function VoronoiPolygon({
+	polygon,
+	className,
+	children,
+	...restProps
+}: VoronoiPolygonProps & Omit<SVGProps<SVGPathElement>, keyof VoronoiPolygonProps>) {
+	if (!polygon) return null;
+	const path = `M${polygon.join('L')}Z`;
+	if (children) return <>
+		{children({ path, polygon })}
+	</>;
+
+	return <path className={cx('visx-voronoi-polygon', className)} d={path} {...restProps} />;
+}

package/src/voronoi/components/VoronoiPolygon.tsrx.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode, SVGProps } from 'react';
+export type VoronoiPolygonProps = {
+    /** Override render function which is provided polygon and generated path. */
+    children?: ({ path, polygon, }: {
+        path: string;
+        polygon: [number, number][];
+    }) => ReactNode;
+    /** className to apply to path element. */
+    className?: string;
+    /** Array of coordinate arrays for the polygon (e.g., [[x,y], [x1,y1], ...]), used to generate polygon path. */
+    polygon?: [number, number][];
+};
+export default function VoronoiPolygon({ polygon, className, children, ...restProps }: VoronoiPolygonProps & Omit<SVGProps<SVGPathElement>, keyof VoronoiPolygonProps>): import("react").JSX.Element | null;

package/src/voronoi/index.ts

@@ -0,0 +1,6 @@
+// @octanejs/visx/voronoi
+export { default as voronoi } from './voronoi';
+export { default as VoronoiPolygon } from './components/VoronoiPolygon.tsrx';
+
+export type { VoronoiPolygonProps } from './components/VoronoiPolygon.tsrx';
+export type { VoronoiConfig } from './voronoi';

package/src/voronoi/react/index.ts

@@ -0,0 +1,5 @@
+'use client';
+
+export { default as useVoronoi } from './useVoronoi.tsrx';
+
+export type { UseVoronoiOptions } from './useVoronoi.tsrx';

package/src/voronoi/react/useVoronoi.tsrx

@@ -0,0 +1,30 @@
+import { normalizeAccessor, useStructuralMemo } from '@octanejs/visx/kernel';
+import type { AccessorInput } from '@octanejs/visx/kernel';
+import { useMemo } from 'octane';
+import voronoi from '../voronoi';
+import type { VoronoiConfig } from '../voronoi';
+
+export type UseVoronoiOptions<Datum> = Omit<VoronoiConfig<Datum>, 'x' | 'y'> & {
+		/** Set the x-value accessor function or string key for the voronoi layout. */
+		x?: AccessorInput<Datum, number>;
+		/** Set the y-value accessor function or string key for the voronoi layout. */
+		y?: AccessorInput<Datum, number>;
+	};
+
+export default function useVoronoi<Datum>({ width, height, x, y }: UseVoronoiOptions<Datum>) {
+	const normalizedX =
+		x == null ? undefined : normalizeAccessor(x);
+	const normalizedY =
+		y == null ? undefined : normalizeAccessor(y);
+	const config = useStructuralMemo(
+		{
+			width,
+			height,
+			x: normalizedX as VoronoiConfig<Datum>['x'],
+			y: normalizedY as VoronoiConfig<Datum>['y'],
+		},
+		1,
+	);
+
+	return useMemo(() => voronoi(config), [config]);
+}

package/src/voronoi/react/useVoronoi.tsrx.d.ts

@@ -0,0 +1,10 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { AccessorInput } from '@octanejs/visx/kernel';
+import type { VoronoiConfig } from '../voronoi';
+export type UseVoronoiOptions<Datum> = Omit<VoronoiConfig<Datum>, 'x' | 'y'> & {
+    /** Set the x-value accessor function or string key for the voronoi layout. */
+    x?: AccessorInput<Datum, number>;
+    /** Set the y-value accessor function or string key for the voronoi layout. */
+    y?: AccessorInput<Datum, number>;
+};
+export default function useVoronoi<Datum>({ width, height, x, y }: UseVoronoiOptions<Datum>): import("d3-voronoi").VoronoiLayout<unknown>;

package/src/voronoi/voronoi.ts

@@ -0,0 +1,32 @@
+import { voronoi as d3Voronoi } from 'd3-voronoi';
+
+const CLIP_PADDING = 1;
+
+export interface VoronoiConfig<Datum> {
+	/** The total width of the voronoi layout. */
+	width?: number;
+	/** The total width of the voronoi layout. */
+	height?: number;
+	/** Set the x-value accessor function for the voronoi layout. */
+	x?: (d: Datum) => number;
+	/** Set the y-value accessor function for the voronoi layout. */
+	y?: (d: Datum) => number;
+}
+
+/**
+ * Returns a configured d3 voronoi `layout`. calling `layout(data)` returns a voronoi *diagram*.
+ * Alternatively call `layout.polygons(data)`, `layout.triangles(data)`, `layout.links(data)`
+ */
+export default function voronoi<Datum>({ width = 0, height = 0, x, y }: VoronoiConfig<Datum>) {
+	const voronoiGenerator = d3Voronoi<Datum>();
+
+	if (x) voronoiGenerator.x(x);
+	if (y) voronoiGenerator.y(y);
+
+	voronoiGenerator.extent([
+		[-CLIP_PADDING, -CLIP_PADDING],
+		[width + CLIP_PADDING, height + CLIP_PADDING],
+	]);
+
+	return voronoiGenerator;
+}

package/src/wordcloud/Wordcloud.tsrx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { Group } from '@octanejs/visx/group';
+import type { BaseDatum, CloudWord, WordcloudConfig } from './types';
+import useWordcloud from './useWordcloud.tsrx';
+
+export interface WordcloudProps<Datum extends BaseDatum> extends WordcloudConfig<Datum> {
+	children: (words: CloudWord[]) => ReactNode;
+}
+
+export default function Wordcloud<Datum extends BaseDatum>(props: WordcloudProps<Datum>) {
+	const { children, ...wordcloudConfig } = props;
+	const { width, height } = wordcloudConfig;
+	const words = useWordcloud(wordcloudConfig);
+
+	if (width === 0 || height === 0) return null;
+
+	return <svg width={width} height={height}>
+		<Group left={width / 2} top={height / 2}>{children(words)}</Group>
+	</svg>;
+}

package/src/wordcloud/Wordcloud.tsrx.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { ReactNode } from 'react';
+import type { BaseDatum, CloudWord, WordcloudConfig } from './types';
+export interface WordcloudProps<Datum extends BaseDatum> extends WordcloudConfig<Datum> {
+    children: (words: CloudWord[]) => ReactNode;
+}
+export default function Wordcloud<Datum extends BaseDatum>(props: WordcloudProps<Datum>): import("react").JSX.Element | null;

package/src/wordcloud/d3-cloud.d.ts

@@ -0,0 +1 @@
+declare module 'd3-cloud';

package/src/wordcloud/index.ts

@@ -0,0 +1,3 @@
+// @octanejs/visx/wordcloud
+export { default as Wordcloud } from './Wordcloud.tsrx';
+export { default as useWordcloud } from './useWordcloud.tsrx';

package/src/wordcloud/types.ts

@@ -0,0 +1,154 @@
+export interface BaseDatum {
+	text: string;
+}
+
+export interface WordcloudConfig<Datum extends BaseDatum> {
+	/**
+	 * Width of the wordcloud layout.
+	 */
+	width: number;
+	/**
+	 * Height of the wordcloud layout.
+	 */
+	height: number;
+	/**
+	 * Sets the words array.
+	 */
+	words: Datum[];
+	/**
+	 * Sets the padding accessor function, which indicates the numerical padding for each word.
+	 *
+	 * @default 1
+	 */
+	padding?: number | ((datum: Datum, index: number) => number);
+	/**
+	 * Sets the font accessor function, which indicates the font face for each word.
+	 *
+	 * @default serif
+	 */
+	font?: string | ((datum: Datum, index: number) => string);
+	/**
+	 * Sets the fontSize accessor function, which indicates the numerical font size for each word.
+	 *
+	 * @default function(datum) { return Math.sqrt(datum.value); }
+	 */
+	fontSize?: number | ((datum: Datum, index: number) => number);
+	/**
+	 * Sets the fontStyle accessor function, which indicates the font style for each word.
+	 *
+	 * @default normal
+	 */
+	fontStyle?: string | ((datum: Datum, index: number) => string);
+	/**
+	 * Sets the fontWeight accessor function, which indicates the font weight for each word.
+	 *
+	 * @default normal
+	 */
+	fontWeight?: string | number | ((datum: Datum, index: number) => string | number);
+	/**
+	 * Sets the rotate accessor function, which indicates the rotation angle (in degrees) for each word.
+	 *
+	 * @default function() { return (~~(Math.random() * 6) -3) * 30; }
+	 */
+	rotate?: number | ((datum: Datum, index: number) => number);
+	/**
+	 * Sets the current type of spiral used for positioning words.
+	 * This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used.
+	 *
+	 * @default archimedean
+	 */
+	spiral?:
+		| 'archimedean'
+		| 'rectangular'
+		| ((size: [number, number]) => (t: number) => [number, number]);
+	/**
+	 * Sets the internal random number generator, used for selecting the initial position of each word,
+	 * and the clockwise/counterclockwise direction of the spiral for each word. Random function should return a number in the range [0, 1).
+	 * When the returned value is a fixed value, the layout coordinates of each word will be the same every time the word cloud of the same data is rendered.
+	 * By default, the browser's built-in 'Math.random' is used, which means that each rendering will change the position of the word.
+	 *
+	 * @default Math.random
+	 */
+	random?: () => number;
+}
+
+/**
+ * below are taken from @types/d3-cloud
+ * they are copied below because TS@^4.8 is incompatible with its @d3/types dep.
+ */
+export interface CloudWord {
+	text?: string | undefined;
+	font?: string | undefined;
+	style?: string | undefined;
+	weight?: string | number | undefined;
+	rotate?: number | undefined;
+	size?: number | undefined;
+	padding?: number | undefined;
+	x?: number | undefined;
+	y?: number | undefined;
+}
+
+export interface Cloud<T extends CloudWord> {
+	start(): Cloud<T>;
+	stop(): Cloud<T>;
+
+	timeInterval(): number;
+	timeInterval(interval: number): Cloud<T>;
+
+	words(): T[];
+	words(words: T[]): Cloud<T>;
+
+	size(): [number, number];
+	size(size: [number, number]): Cloud<T>;
+
+	font(): (datum: T, index: number) => string;
+	font(font: string | ((datum: T, index: number) => string)): Cloud<T>;
+
+	fontStyle(): (datum: T, index: number) => string;
+	fontStyle(style: string | ((datum: T, index: number) => string)): Cloud<T>;
+
+	fontWeight(): (datum: T, index: number) => string | number;
+	fontWeight(weight: string | number | ((datum: T, index: number) => string | number)): Cloud<T>;
+
+	rotate(): (datum: T, index: number) => number;
+	rotate(rotate: number | ((datum: T, index: number) => number)): Cloud<T>;
+
+	text(): (datum: T, index: number) => string;
+	text(text: string | ((datum: T, index: number) => string)): Cloud<T>;
+
+	spiral(): (size: [number, number]) => (t: number) => [number, number];
+	spiral(name: string | ((size: [number, number]) => (t: number) => [number, number])): Cloud<T>;
+
+	fontSize(): (datum: T, index: number) => number;
+	fontSize(size: number | ((datum: T, index: number) => number)): Cloud<T>;
+
+	padding(): (datum: T, index: number) => number;
+	padding(padding: number | ((datum: T, index: number) => number)): Cloud<T>;
+
+	/**
+	 * If specified, sets the internal random number generator,used for selecting the initial position of each word,
+	 * and the clockwise/counterclockwise direction of the spiral for each word.
+	 *
+	 * @param randomFunction should return a number in the range [0, 1).The default is Math.random.
+	 */
+	random(): Cloud<T>;
+	// eslint-disable-next-line @typescript-eslint/unified-signatures
+	random(randomFunction: () => number): Cloud<T>;
+
+	/**
+	 * If specified, sets the canvas generator function, which is used internally to draw text.
+	 * When using Node.js, you will almost definitely override the default, e.g. using the canvas module.
+	 * @param canvasGenerator should return a HTMLCanvasElement.The default is:  ()=>{document.createElement("canvas");}
+	 */
+	canvas(): Cloud<T>;
+	// eslint-disable-next-line @typescript-eslint/unified-signatures
+	canvas(canvasGenerator: () => HTMLCanvasElement): Cloud<T>;
+
+	on(type: 'word', listener: (word: T) => void): Cloud<T>;
+	on(type: 'end', listener: (tags: T[], bounds: Array<{ x: number; y: number }>) => void): Cloud<T>;
+	on(type: string, listener: (...args: any[]) => void): Cloud<T>;
+
+	on(type: 'word'): (word: T) => void;
+	on(type: 'end'): (tags: T[], bounds: Array<{ x: number; y: number }>) => void;
+	on(type: string): (...args: any[]) => void;
+}