@octanejs/visx 0.1.0

package/src/wordcloud/useWordcloud.tsrx

@@ -0,0 +1,277 @@
+import { useMemo } from 'octane';
+import getStringWidth from '../text/util/getStringWidth';
+import type { BaseDatum, CloudWord, WordcloudConfig } from './types';
+
+const DEGREES_TO_RADIANS = Math.PI / 180;
+const HASH_RANGE = 0x1_0000_0000;
+
+export type WordBounds = {
+	left: number;
+	right: number;
+	top: number;
+	bottom: number;
+};
+
+type ResolvedWord<Datum extends BaseDatum> = Datum & Required<
+	Pick<CloudWord, 'font' | 'padding' | 'rotate' | 'size' | 'style' | 'text' | 'weight'>
+> & { sourceIndex: number };
+
+function valueAt<Datum, Value>(
+	value: Value | ((datum: Datum, index: number) => Value) | undefined,
+	datum: Datum,
+	index: number,
+	fallback: Value,
+): Value {
+	if (typeof value === 'function') return (value as (datum: Datum, index: number) => Value)(
+		datum,
+		index,
+	);
+	return value ?? fallback;
+}
+
+function textHash(text: string): number {
+	let hash = 2166136261;
+	for (const character of text) hash = Math.imul(hash ^ character.charCodeAt(0), 16777619);
+	return hash >>> 0;
+}
+
+function deterministicRandom(text: string, index: number, salt: string): number {
+	return textHash(`${text}\0${index}\0${salt}`) / HASH_RANGE;
+}
+
+function numericFontWeight(weight: string | number): string | number {
+	if (weight === 'bold' || weight === 'bolder') return 700;
+	if (weight === 'lighter') return 300;
+	return weight;
+}
+
+/**
+ * Estimates the axis-aligned rectangle occupied by a laid-out word. The same
+ * browser-independent metric is used for collision checks during SSR and the
+ * first client render.
+ */
+export function getEstimatedWordBounds(
+	word: Pick<CloudWord, 'padding' | 'rotate' | 'size' | 'style' | 'text' | 'weight' | 'x' | 'y'>,
+): WordBounds {
+	const size = Math.max(0, Number(word.size) || 0);
+	const padding = Math.max(0, Number(word.padding) || 0);
+	const text = word.text ?? '';
+	const measuredWidth = getStringWidth(text, {
+		fontSize: size,
+		fontWeight: numericFontWeight(word.weight ?? 'normal'),
+	}) ?? text.length * size * 0.56;
+	const italicFactor = /italic|oblique/i.test(String(word.style ?? '')) ? 1.08 : 1;
+	const glyphWidth = measuredWidth * italicFactor + padding * 2;
+	const glyphHeight = size * 1.2 + padding * 2;
+	const angle = (Number(word.rotate) || 0) * DEGREES_TO_RADIANS;
+	const sin = Math.abs(Math.sin(angle));
+	const cos = Math.abs(Math.cos(angle));
+	const rotatedWidth = glyphWidth * cos + glyphHeight * sin;
+	const rotatedHeight = glyphWidth * sin + glyphHeight * cos;
+	const x = Number(word.x) || 0;
+	const y = Number(word.y) || 0;
+
+	return {
+		left: x - rotatedWidth / 2,
+		right: x + rotatedWidth / 2,
+		top: y - rotatedHeight / 2,
+		bottom: y + rotatedHeight / 2,
+	};
+}
+
+function boundsOverlap(a: WordBounds, b: WordBounds): boolean {
+	return a.left < b.right && a.right > b.left && a.top < b.bottom && a.bottom > b.top;
+}
+
+function isInsideLayout(bounds: WordBounds, width: number, height: number): boolean {
+	const halfWidth = width / 2;
+	const halfHeight = height / 2;
+	return bounds.left >= -halfWidth && bounds.right <= halfWidth &&
+		bounds.top >= -halfHeight &&
+		bounds.bottom <= halfHeight;
+}
+
+function archimedeanSpiral([width, height]: [number, number]) {
+	const aspectRatio = width / height;
+	return (input: number): [number, number] => {
+		const t = input * 0.1;
+		return [aspectRatio * t * Math.cos(t), t * Math.sin(t)];
+	};
+}
+
+function rectangularSpiral([width, height]: [number, number]) {
+	const dy = 4;
+	const dx = dy * width / height;
+	let x = 0;
+	let y = 0;
+
+	return (t: number): [number, number] => {
+		const sign = t < 0 ? -1 : 1;
+		switch ((Math.sqrt(1 + 4 * sign * t) - sign) & 3) {
+			case 0:
+				x += dx;
+				break;
+			case 1:
+				y += dy;
+				break;
+			case 2:
+				x -= dx;
+				break;
+			default:
+				y -= dy;
+		}
+		return [x, y];
+	};
+}
+
+function cellsForBounds(bounds: WordBounds, cellSize: number): string[] {
+	const minX = Math.floor(bounds.left / cellSize);
+	const maxX = Math.floor(bounds.right / cellSize);
+	const minY = Math.floor(bounds.top / cellSize);
+	const maxY = Math.floor(bounds.bottom / cellSize);
+	const cells: string[] = [];
+	for (let x = minX; x <= maxX; x += 1) {
+		for (let y = minY; y <= maxY; y += 1) cells.push(`${x},${y}`);
+	}
+	return cells;
+}
+
+function collides(
+	bounds: WordBounds,
+	grid: Map<string, WordBounds[]>,
+	cellSize: number,
+): boolean {
+	const candidates = new Set<WordBounds>();
+	for (const cell of cellsForBounds(bounds, cellSize)) {
+		for (const placed of grid.get(cell) ?? []) candidates.add(placed);
+	}
+	return [...candidates].some((placed) => boundsOverlap(bounds, placed));
+}
+
+function addToGrid(bounds: WordBounds, grid: Map<string, WordBounds[]>, cellSize: number): void {
+	for (const cell of cellsForBounds(bounds, cellSize)) {
+		const entries = grid.get(cell);
+		if (entries) entries.push(bounds);
+		else grid.set(cell, [bounds]);
+	}
+}
+
+export function layoutWordcloud<Datum extends BaseDatum>({
+	width,
+	height,
+	font,
+	fontSize,
+	fontStyle,
+	fontWeight,
+	padding,
+	random,
+	rotate,
+	spiral,
+	words,
+}: WordcloudConfig<Datum>): CloudWord[] {
+	if (width <= 0 || height <= 0) return [];
+
+	const resolvedWords = words.map((datum, index): ResolvedWord<Datum> => {
+		const text = datum.text;
+		const fallbackSize = Math.sqrt(Number((datum as Datum & { value?: number }).value ?? 100));
+		const rawSize = Number(valueAt(fontSize, datum, index, fallbackSize));
+		const size = Number.isFinite(rawSize) ? Math.max(0, Math.trunc(rawSize)) : 0;
+		const resolvedRotate = rotate === undefined
+			? random
+				? Math.floor(random() * 6 - 3) * 30
+				: (textHash(text) % 6 - 3) * 30
+			: valueAt(rotate, datum, index, 0);
+
+		return {
+			...datum,
+			sourceIndex: index,
+			text,
+			font: valueAt(font, datum, index, 'serif'),
+			padding: Math.max(0, Number(valueAt(padding, datum, index, 1)) || 0),
+			size,
+			style: valueAt(fontStyle, datum, index, 'normal'),
+			weight: valueAt(fontWeight, datum, index, 'normal'),
+			rotate: Number.isFinite(Number(resolvedRotate)) ? Number(resolvedRotate) : 0,
+		};
+	}).sort((a, b) => b.size - a.size || a.sourceIndex - b.sourceIndex);
+
+	const placedWords: CloudWord[] = [];
+	const grid = new Map<string, WordBounds[]>();
+	const cellSize = Math.max(
+		8,
+		Math.min(64, Math.sqrt(width * height / Math.max(1, words.length))),
+	);
+	const maxDelta = Math.hypot(width, height);
+	const maxSteps = Math.max(2048, Math.ceil(maxDelta * 24));
+
+	for (const resolvedWord of resolvedWords) {
+		if (!resolvedWord.text || resolvedWord.size <= 0) continue;
+		const randomX = random
+			? random()
+			: deterministicRandom(resolvedWord.text, resolvedWord.sourceIndex, 'x');
+		const randomY = random
+			? random()
+			: deterministicRandom(resolvedWord.text, resolvedWord.sourceIndex, 'y');
+		const directionRandom = random
+			? random()
+			: deterministicRandom(resolvedWord.text, resolvedWord.sourceIndex, 'direction');
+		const startX = Math.floor(width * (randomX + 0.5) / 2) - width / 2;
+		const startY = Math.floor(height * (randomY + 0.5) / 2) - height / 2;
+		const direction = directionRandom < 0.5 ? 1 : -1;
+		const spiralForWord =
+			typeof spiral === 'function'
+				? spiral([width, height])
+				: spiral === 'rectangular'
+					? rectangularSpiral([width, height])
+					: archimedeanSpiral([width, height]);
+
+		for (let step = 0; step < maxSteps; step += 1) {
+			const point = spiralForWord(step * direction);
+			if (!point || !Number.isFinite(point[0]) || !Number.isFinite(point[1])) break;
+			const candidate: CloudWord = {
+				...resolvedWord,
+				x: startX + Math.trunc(point[0]),
+				y: startY + Math.trunc(point[1]),
+			};
+			delete (candidate as CloudWord & { sourceIndex?: number }).sourceIndex;
+			const bounds = getEstimatedWordBounds(candidate);
+			if (!isInsideLayout(bounds, width, height) || collides(bounds, grid, cellSize)) continue;
+
+			placedWords.push(candidate);
+			addToGrid(bounds, grid, cellSize);
+			break;
+		}
+	}
+
+	return placedWords;
+}
+
+export default function useWordcloud<Datum extends BaseDatum>(config: WordcloudConfig<Datum>) {
+	const {
+		width,
+		height,
+		font,
+		fontSize,
+		fontStyle,
+		fontWeight,
+		padding,
+		random,
+		rotate,
+		spiral,
+		words,
+	} = config;
+
+	return useMemo(() => layoutWordcloud(config), [
+		width,
+		height,
+		font,
+		fontSize,
+		fontStyle,
+		fontWeight,
+		padding,
+		random,
+		rotate,
+		spiral,
+		words,
+	]);
+}

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

@@ -0,0 +1,16 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type { BaseDatum, CloudWord, WordcloudConfig } from './types';
+export type WordBounds = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/**
+ * Estimates the axis-aligned rectangle occupied by a laid-out word. The same
+ * browser-independent metric is used for collision checks during SSR and the
+ * first client render.
+ */
+export declare function getEstimatedWordBounds(word: Pick<CloudWord, 'padding' | 'rotate' | 'size' | 'style' | 'text' | 'weight' | 'x' | 'y'>): WordBounds;
+export declare function layoutWordcloud<Datum extends BaseDatum>({ width, height, font, fontSize, fontStyle, fontWeight, padding, random, rotate, spiral, words, }: WordcloudConfig<Datum>): CloudWord[];
+export default function useWordcloud<Datum extends BaseDatum>(config: WordcloudConfig<Datum>): CloudWord[];

package/src/xychart/classes/DataRegistry.ts

@@ -0,0 +1,53 @@
+import type { AxisScale } from '@octanejs/visx/axis';
+import type { DataRegistryEntry } from '../types/data';
+
+/** A class for holding data entries */
+export default class DataRegistry<
+	XScale extends AxisScale,
+	YScale extends AxisScale,
+	Datum extends object,
+> {
+	private registry: { [key: string]: DataRegistryEntry<XScale, YScale, Datum> } = {};
+
+	private registryKeys: string[] = [];
+
+	/** Add one or more entries to the registry. */
+	public registerData(
+		entryOrEntries:
+			| DataRegistryEntry<XScale, YScale, Datum>
+			| DataRegistryEntry<XScale, YScale, Datum>[],
+	) {
+		const entries = Array.isArray(entryOrEntries) ? entryOrEntries : [entryOrEntries];
+		entries.forEach((currEntry) => {
+			this.registry[currEntry.key] = currEntry;
+			this.registryKeys = Object.keys(this.registry);
+		});
+	}
+
+	/** Remove one or more entries to the registry. */
+	public unregisterData(keyOrKeys: string | string[]) {
+		const keys = Array.isArray(keyOrKeys) ? keyOrKeys : [keyOrKeys];
+		keys.forEach((currKey) => {
+			delete this.registry[currKey];
+			this.registryKeys = Object.keys(this.registry);
+		});
+	}
+
+	/** Returns all data registry entries. This value is not constant between calls. */
+	public entries() {
+		return Object.values(this.registry);
+	}
+
+	/** Returns a specific entity from the registry, if it exists. */
+	public get(key: string) {
+		return this.registry[key];
+	}
+
+	/**
+	 * Returns the current registry keys.
+	 * This value is constant between calls if the keys themselves have not changed.
+	 */
+	public keys() {
+		return this.registryKeys;
+	}
+}

package/src/xychart/components/Tooltip.tsrx

@@ -0,0 +1,356 @@
+import { useCallback, useContext, useEffect, useRef } from 'octane';
+import type { CSSProperties, SVGProps, ReactNode } from 'react';
+import { useTooltipInPortal, defaultStyles } from '@octanejs/visx/tooltip';
+import type {
+	TooltipProps as BaseTooltipProps,
+	UseTooltipPortalOptions,
+} from '@octanejs/visx/tooltip';
+import type { PickD3Scale } from '@octanejs/visx/scale';
+
+import TooltipContext from '../context/TooltipContext.tsrx';
+import DataContext from '../context/DataContext.tsrx';
+import getScaleBandwidth from '../utils/getScaleBandwidth';
+import isValidNumber from '../typeguards/isValidNumber';
+import type { GlyphProps as RenderGlyphProps, TooltipContextType } from '../types';
+
+/** fontSize + lineHeight from default styles break precise location of crosshair, etc. */
+const TOOLTIP_NO_STYLE: CSSProperties = {
+	position: 'absolute',
+	pointerEvents: 'none',
+	fontSize: 0,
+	lineHeight: 0,
+};
+
+export type RenderTooltipParams<Datum extends object> = TooltipContextType<Datum> & {
+		colorScale?: PickD3Scale<'ordinal', string, string>;
+	};
+
+export interface RenderTooltipGlyphProps<Datum extends object> extends RenderGlyphProps<Datum> {
+	glyphStyle?: SVGProps<SVGCircleElement>;
+	isNearestDatum: boolean;
+}
+
+export type TooltipProps<Datum extends object> = {
+		/**
+ * When TooltipContext.tooltipOpen=true, this function is invoked and if the
+ * return value is non-null, its content is rendered inside the tooltip container.
+ * Content will be rendered in an HTML parent.
+ */
+		/**
+ * When TooltipContext.tooltipOpen=true, this function is invoked and if the
+ * return value is non-null, its content is rendered inside the tooltip container.
+ * Content will be rendered in an HTML parent.
+ */
+		renderTooltip: (params: RenderTooltipParams<Datum>) => ReactNode;
+		/** Function which handles rendering glyphs. */
+		renderGlyph?: (params: RenderTooltipGlyphProps<Datum>) => ReactNode;
+		/** Whether to snap tooltip + crosshair x-coord to the nearest Datum x-coord instead of the event x-coord. */
+		snapTooltipToDatumX?: boolean;
+		/** Whether to snap tooltip + crosshair y-coord to the nearest Datum y-coord instead of the event y-coord. */
+		snapTooltipToDatumY?: boolean;
+		/** Whether to show a vertical line at tooltip position. */
+		showVerticalCrosshair?: boolean;
+		/** Whether to show a horizontal line at tooltip position. */
+		showHorizontalCrosshair?: boolean;
+		/** Whether to show a glyph at the tooltip position for the (single) nearest Datum. */
+		showDatumGlyph?: boolean;
+		/** Whether to show a glyph for the nearest Datum in each series. */
+		showSeriesGlyphs?: boolean;
+		/** Optional styles for the vertical crosshair, if visible. */
+		verticalCrosshairStyle?: SVGProps<SVGLineElement>;
+		/** Optional styles for the vertical crosshair, if visible. */
+		horizontalCrosshairStyle?: SVGProps<SVGLineElement>;
+		/** Optional styles for the point, if visible. */
+		glyphStyle?: SVGProps<SVGCircleElement>;
+		/**
+ * Tooltip depends on ResizeObserver, which may be polyfilled globally,
+ * passed to XYChart, or injected into this component.
+ */
+		resizeObserverPolyfill?: UseTooltipPortalOptions['polyfill'];
+	} & Omit<BaseTooltipProps, 'left' | 'top' | 'children'> & Pick<UseTooltipPortalOptions, 'debounce' | 'detectBounds' | 'scroll' | 'zIndex'>;
+
+const INVISIBLE_STYLES: CSSProperties = {
+	position: 'absolute',
+	left: 0,
+	top: 0,
+	opacity: 0,
+	width: 0,
+	height: 0,
+	pointerEvents: 'none',
+};
+
+function DefaultGlyph<Datum extends object>({
+	x,
+	y,
+	size,
+	color,
+	glyphStyle,
+}: Omit<RenderTooltipGlyphProps<Datum>, 'key'>) {
+	const { theme } = useContext(DataContext) || {};
+
+	return <circle
+		cx={x}
+		cy={y}
+		r={size}
+		fill={color}
+		stroke={theme?.backgroundColor}
+		strokeWidth={1.5}
+		paintOrder="fill"
+		{...glyphStyle}
+	/>;
+}
+
+function defaultRenderGlyph<Datum extends object>({
+	key,
+	...props
+}: RenderTooltipGlyphProps<Datum>) {
+	return <DefaultGlyph {...props} />;
+}
+
+function TooltipInner<Datum extends object>({
+	debounce,
+	detectBounds,
+	horizontalCrosshairStyle,
+	glyphStyle,
+	renderTooltip,
+	renderGlyph = defaultRenderGlyph,
+	resizeObserverPolyfill: resizeObserverPolyfillProp,
+	scroll = true,
+	showDatumGlyph = false,
+	showHorizontalCrosshair = false,
+	showSeriesGlyphs = false,
+	showVerticalCrosshair = false,
+	snapTooltipToDatumX = false,
+	snapTooltipToDatumY = false,
+	verticalCrosshairStyle,
+	zIndex,
+	...tooltipProps
+}: TooltipProps<Datum>) {
+	const {
+		colorScale,
+		theme,
+		innerHeight,
+		innerWidth,
+		margin,
+		xScale,
+		yScale,
+		dataRegistry,
+		resizeObserverPolyfill,
+	} = useContext(DataContext) || {};
+	const tooltipContext = useContext(TooltipContext) as TooltipContextType<Datum>;
+	const { containerRef, TooltipInPortal, forceRefreshBounds } = useTooltipInPortal({
+		debounce,
+		detectBounds,
+		polyfill: resizeObserverPolyfill || resizeObserverPolyfillProp,
+		scroll,
+		zIndex,
+	});
+
+	// To correctly position itself in a Portal, the tooltip must know its container bounds
+	// this is done by rendering an invisible node whose ref can be used to find its parentElement
+	const setContainerRef = useCallback((ownRef: HTMLElement | SVGElement | null) => {
+		containerRef(ownRef?.parentElement ?? null);
+	}, [containerRef]);
+
+	const tooltipContent =
+		tooltipContext?.tooltipOpen ? renderTooltip({ ...tooltipContext, colorScale }) : null;
+
+	const showTooltip = tooltipContext?.tooltipOpen && tooltipContent != null;
+
+	// useTooltipInPortal is powered by react-use-measure and will update portal positions upon
+	// resize and page scroll. however it **cannot** detect when a chart container moves on a
+	// page due to animation or drag-and-drop, etc.
+	// therefore we force refresh the bounds any time we transition from a hidden tooltip to
+	// one that is visible.
+	const lastShowTooltip = useRef(false);
+	useEffect(() => {
+		if (showTooltip && !lastShowTooltip.current) {
+			forceRefreshBounds();
+		}
+		lastShowTooltip.current = showTooltip;
+	}, [showTooltip, forceRefreshBounds]);
+
+	let tooltipLeft = tooltipContext?.tooltipLeft;
+	let tooltipTop = tooltipContext?.tooltipTop;
+
+	const xScaleBandwidth =
+		xScale ? getScaleBandwidth(xScale) : 0;
+	const yScaleBandwidth =
+		yScale ? getScaleBandwidth(yScale) : 0;
+
+	const getDatumLeftTop = useCallback((key: string, datum: Datum) => {
+		const entry = dataRegistry?.get(key);
+		const xAccessor = entry?.xAccessor;
+		const yAccessor = entry?.yAccessor;
+		const left =
+			xScale && xAccessor ? Number(xScale(xAccessor(datum))) + xScaleBandwidth / 2 : undefined;
+		const top =
+			yScale && yAccessor ? Number(yScale(yAccessor(datum))) + yScaleBandwidth / 2 : undefined;
+		return { left, top };
+	}, [dataRegistry, xScaleBandwidth, yScaleBandwidth, xScale, yScale]);
+
+	const nearestDatum = tooltipContext?.tooltipData?.nearestDatum;
+	const nearestDatumKey = nearestDatum?.key ?? '';
+
+	// snap x- or y-coord to the actual data point (not event coordinates)
+	if (showTooltip && nearestDatum && (snapTooltipToDatumX || snapTooltipToDatumY)) {
+		const { left, top } = getDatumLeftTop(nearestDatumKey, nearestDatum.datum);
+		tooltipLeft = snapTooltipToDatumX && isValidNumber(left) ? left : tooltipLeft;
+		tooltipTop = snapTooltipToDatumY && isValidNumber(top) ? top : tooltipTop;
+	}
+
+	// collect positions + styles for glyphs; glyphs always snap to Datum, not event coords
+	const glyphProps: RenderTooltipGlyphProps<Datum>[] = [];
+
+	if (showTooltip && (showDatumGlyph || showSeriesGlyphs)) {
+		const size = Number(glyphStyle?.radius ?? 4);
+
+		if (showSeriesGlyphs) {
+			Object.values(tooltipContext?.tooltipData?.datumByKey ?? {}).forEach(({
+				key,
+				datum,
+				index,
+			}) => {
+				const color = colorScale?.(key) ?? theme?.htmlLabel?.color ?? '#222';
+				const { left, top } = getDatumLeftTop(key, datum);
+
+				// don't show glyphs if coords are unavailable
+				if (!isValidNumber(left) || !isValidNumber(top)) return;
+
+				glyphProps.push({
+					key,
+					color,
+					datum,
+					index,
+					size,
+					x: left,
+					y: top,
+					glyphStyle,
+					isNearestDatum: nearestDatum ? nearestDatum.key === key : false,
+				});
+			});
+		} else if (nearestDatum) {
+			const { left, top } = getDatumLeftTop(nearestDatumKey, nearestDatum.datum);
+			// don't show glyphs if coords are unavailable
+			if (isValidNumber(left) && isValidNumber(top)) {
+				const color =
+					(nearestDatumKey && colorScale?.(nearestDatumKey)) ??
+						// @ts-expect-error
+						null ??
+						theme?.gridStyles?.stroke ??
+						theme?.htmlLabel?.color ??
+						'#222';
+				glyphProps.push({
+					key: nearestDatumKey,
+					color,
+					datum: nearestDatum.datum,
+					index: nearestDatum.index,
+					size,
+					x: left,
+					y: top,
+					glyphStyle,
+					isNearestDatum: true,
+				});
+			}
+		}
+	}
+
+	return <>
+		<svg ref={setContainerRef} style={INVISIBLE_STYLES} />
+		{showTooltip &&
+			<>
+				{/** To correctly position crosshair / glyphs in a Portal, we leverage the logic in TooltipInPortal */}
+				{showVerticalCrosshair &&
+					<TooltipInPortal
+						className="visx-crosshair visx-crosshair-vertical"
+						left={tooltipLeft}
+						top={margin?.top}
+						offsetLeft={0}
+						offsetTop={0}
+						detectBounds={false}
+						style={TOOLTIP_NO_STYLE}
+					>
+						<svg width="1" height={innerHeight} overflow="visible">
+							<line
+								x1={0}
+								x2={0}
+								y1={0}
+								y2={innerHeight}
+								strokeWidth={1.5}
+								stroke={theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? '#222'}
+								{...verticalCrosshairStyle}
+							/>
+						</svg>
+					</TooltipInPortal>}
+				{showHorizontalCrosshair &&
+					<TooltipInPortal
+						className="visx-crosshair visx-crosshair-horizontal"
+						left={margin?.left}
+						top={tooltipTop}
+						offsetLeft={0}
+						offsetTop={0}
+						detectBounds={false}
+						style={TOOLTIP_NO_STYLE}
+					>
+						<svg width={innerWidth} height="1" overflow="visible">
+							<line
+								x1={0}
+								x2={innerWidth}
+								y1={0}
+								y2={0}
+								strokeWidth={1.5}
+								stroke={theme?.gridStyles?.stroke ?? theme?.htmlLabel?.color ?? '#222'}
+								{...horizontalCrosshairStyle}
+							/>
+						</svg>
+					</TooltipInPortal>}
+				{glyphProps.map(
+					({
+						key,
+						x,
+						y,
+						...props
+					}) => // We render glyps in a portal so that they can overflow the container if necessary
+					<TooltipInPortal
+						key={key}
+						className="visx-tooltip-glyph"
+						left={x}
+						top={y}
+						offsetLeft={0}
+						offsetTop={0}
+						detectBounds={false}
+						style={TOOLTIP_NO_STYLE}
+					>
+						<svg overflow="visible">{renderGlyph({ key, x: 0, y: 0, ...props })}</svg>
+					</TooltipInPortal>,
+				)}
+				<TooltipInPortal
+					left={tooltipLeft}
+					top={tooltipTop}
+					style={{
+						...defaultStyles,
+						background: theme?.backgroundColor ?? 'white',
+						boxShadow: `0 1px 2px ${
+							theme?.htmlLabel?.color ? `${theme.htmlLabel.color}55` : '#22222255'
+						}`,
+						...theme?.htmlLabel,
+					}}
+					{...tooltipProps}
+				>{tooltipContent}</TooltipInPortal>
+			</>}
+	</>;
+}
+
+/**
+ * This is a wrapper component which bails early if tooltip is not visible.
+ * If scroll detection is enabled in UseTooltipPortalOptions, this avoids re-rendering
+ * the component on every scroll. If many charts with Tooltips are rendered on a page,
+ * this also avoids creating many resize observers / hitting browser limits.
+ */
+export default function Tooltip<Datum extends object>(props: TooltipProps<Datum>) {
+	const tooltipContext = useContext(TooltipContext) as TooltipContextType<Datum>;
+
+	if (!tooltipContext?.tooltipOpen) return null;
+
+	return <TooltipInner {...props} />;
+}