@octane-xplat/charts 0.0.1 → 0.11.0

package/package.json

@@ -1,11 +1,94 @@
 {
   "name": "@octane-xplat/charts",
-  "version": "0.0.1",
-  "description": "Placeholder stub for @octane-xplat/charts — no supported API yet.",
+  "version": "0.11.0",
+  "description": "Cross-platform SVG charts for Octane xplat — a DOM-free d3 core with web, iOS/Android, and macOS AppKit leaves",
+  "keywords": [
+    "android",
+    "charts",
+    "cross-platform",
+    "d3",
+    "graph",
+    "ios",
+    "macos",
+    "nativescript",
+    "octane",
+    "svg",
+    "visualization",
+    "xplat"
+  ],
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/charts",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/charts"
+  },
+  "files": [
+    "dist",
+    "types",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/macos/index.js"
+      },
+      "types": "./types/index.d.ts",
+      "web": "./dist/web/index.js",
+      "native": "./dist/native/index.js",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "d3-array": "3.2.4",
+    "d3-format": "3.1.2",
+    "d3-scale": "4.0.2",
+    "d3-shape": "3.2.0",
+    "d3-time-format": "4.1.0"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octane-xplat/macos-renderer": "0.11.0",
+    "@octane-xplat/ui": "0.11.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tsrx/typescript-plugin": "0.4.11",
+    "@types/d3-array": "3.2.2",
+    "@types/d3-format": "3.0.4",
+    "@types/d3-scale": "4.0.9",
+    "@types/d3-shape": "3.2.0",
+    "@types/d3-time-format": "4.0.3",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.2.2",
+    "typescript": "5.9.3",
+    "vite": "8.3.0",
+    "vitest": "5.0.1"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "@octane-xplat/ui": ">=0.6.0 <1",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && vite build --mode macos && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "typegen": "tsc -p tsconfig.types.json",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.check.json && tsrx-tsc --noEmit -p tsconfig.check.web.json && tsrx-tsc --noEmit -p tsconfig.check.macos.json",
+    "test": "vitest run",
+    "test:packed": "node tests/packed-consumer.mjs",
+    "pack:check": "tsrx-typegen --pack-check"
   }
-}
+}

package/src/Chart.macos.tsrx

@@ -0,0 +1,134 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo, useRef, useState } from 'octane';
+import { appKitImageSource } from './svg-image.macos';
+import { useMeasure } from '@octane-xplat/ui';
+import type { ChartProps } from './props';
+import { computeScene } from './core/scene';
+import type { ChartScene } from './core/scene';
+import { createScrub, hitLabel } from './core/hit';
+import type { SceneHit } from './core/hit';
+
+const EMPTY_SVG = '<svg xmlns="http://www.w3.org/2000/svg"/>';
+const TIP_ESTIMATE_CHAR = 6.2;
+
+/** AppKit leaf: one NSImage plus native label and cursor overlays.
+ * Click recognizers currently supply no coordinates; taps use the scene center.
+ * AppKit does not deliver onTouch, so touch scrubbing is unavailable. */
+export function Chart(props: ChartProps) @{
+	const measure = useMeasure();
+	const [cursor, setCursor] = useState<SceneHit | null>(null);
+	const sceneRef = useRef<ChartScene | null>(null);
+	const propsRef = useRef(props);
+	propsRef.current = props;
+
+	const bounds = measure.bounds;
+	const w = props.width ?? bounds?.width ?? 0;
+	const h =
+		props.height ??
+		(props.aspectRatio && w > 0
+			? w / props.aspectRatio
+			: bounds?.height && bounds.height > 0
+				? bounds.height
+				: w > 0
+					? w / 1.6
+					: 0);
+
+	const scene = useMemo(
+		() => (w > 0 && h > 0 ? computeScene(propsRef.current, w, h) : null),
+		[
+			props.type,
+			props.data,
+			props.margin,
+			props.stacked,
+			props.innerRadiusRatio,
+			props.xAxis,
+			props.yAxis,
+			w,
+			h,
+		],
+	);
+
+	sceneRef.current = scene;
+
+	const interactive = !!(props.onPress || props.onScrub || props.tooltip || props.crosshair);
+	const onTap = useMemo(() => {
+		const scrub = createScrub(() => sceneRef.current, () => propsRef.current, setCursor);
+		return (e?: any) => {
+			const scene = sceneRef.current;
+			scrub('tap', e?.getX?.() ?? (scene?.width ?? 0) / 2, e?.getY?.() ?? (scene?.height ?? 0) / 2);
+		};
+	}, []);
+
+	const markup = scene?.markup ?? EMPTY_SVG;
+	const imageSource = useMemo(() => appKitImageSource(markup), [markup]);
+
+	const legend = props.legend === true ? 'bottom' : props.legend;
+	const plot = scene?.plot;
+	const dotColor = cursor && scene ? (scene.pie ? scene.pie.slices.find((s) => s.series === cursor.series && s.index === cursor.index)?.color : scene.series[cursor.series]?.color) : undefined;
+	const tipText = cursor && scene ? hitLabel(scene, cursor) : null;
+	const tipWidth = tipText ? tipText.length * TIP_ESTIMATE_CHAR + 14 : 0;
+	const tipLeft = cursor && scene ? Math.min(Math.max(0, cursor.px - tipWidth / 2), Math.max(0, scene.width - tipWidth)) : 0;
+	const tipTop = cursor ? cursor.py - 30 : 0;
+
+	<flexboxlayout
+		id={props.id}
+		className={props.className}
+		style={{ flexDirection: 'column', ...props.style }}
+		accessible={props.accessibilityLabel != null}
+		accessibilityRole={'image'}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@if (legend === 'top' && scene) {
+			<flexboxlayout flexDirection="row" flexWrap="wrap" style={{ paddingBottom: 4 }}>
+				{scene.legend.map((item) => (
+					<flexboxlayout flexDirection="row" alignItems="center" style={{ marginRight: 12 }}>
+						<flexboxlayout style={{ width: 10, height: 10, borderRadius: 2, backgroundColor: item.color, marginRight: 4 }} />
+						<label text={item.text} style={{ fontSize: 11 }} />
+					</flexboxlayout>
+				))}
+			</flexboxlayout>
+		}
+		<gridlayout
+			ref={measure.ref}
+			style={{
+				width: props.width,
+				height: props.height ?? (props.aspectRatio && w > 0 ? w / props.aspectRatio : undefined),
+				flexGrow: 1,
+			}}
+		>
+			<image id={props.id ? props.id + '-image' : undefined} src={imageSource} style={{ width: w, height: h }} accessibilityLabel="" />
+			<flexboxlayout id={props.id ? props.id + '-tap' : undefined} style={{ width: w, height: h }} onTap={interactive ? onTap : undefined}>	
+				<absolutelayout
+					id={props.id ? props.id + '-overlay' : undefined}
+					style={{ width: w, height: h }}
+				>
+					{scene?.labels.map((l) => (
+						<label
+							text={l.text}
+							{...{ left: l.x, top: l.y }} style={{ width: l.width, fontSize: 10, opacity: 0.7, textAlign: l.align === 'center' ? 'center' : l.align === 'end' ? 'right' : 'left' }}
+						/>
+					))}
+					@if (cursor && props.crosshair && !scene?.pie && plot) {
+						<flexboxlayout left={cursor.px - 0.5} top={plot.y} style={{ width: 1, height: plot.height, backgroundColor: '#8a8a8a' }} />
+					}
+					@if (cursor && (props.crosshair || props.tooltip)) {
+						<flexboxlayout left={cursor.px - 4} top={cursor.py - 4} style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: dotColor ?? '#4e79a7' }} />
+					}
+					@if (cursor && props.tooltip && tipText) {
+						<label id={props.id ? props.id + '-tooltip' : undefined} text={tipText} {...{ left: tipLeft, top: tipTop < 0 ? cursor.py + 12 : tipTop }} style={{ width: tipWidth, height: 24, backgroundColor: 'rgba(20,20,20,0.88)', borderRadius: 4, color: '#ffffff', fontSize: 11, textAlign: 'center' }} />
+					}
+				</absolutelayout>
+			</flexboxlayout>
+		</gridlayout>
+		@if (legend === 'bottom' && scene) {
+			<flexboxlayout flexDirection="row" flexWrap="wrap" style={{ paddingTop: 4 }}>
+				{scene.legend.map((item) => (
+					<flexboxlayout flexDirection="row" alignItems="center" style={{ marginRight: 12 }}>
+						<flexboxlayout style={{ width: 10, height: 10, borderRadius: 2, backgroundColor: item.color, marginRight: 4 }} />
+						<label text={item.text} style={{ fontSize: 11 }} />
+					</flexboxlayout>
+				))}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Chart.tsrx

@@ -0,0 +1,174 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo, useRef, useState } from 'octane';
+import { AccessibilityRole, Color } from '@nativescript/core';
+import { useMeasure } from '@octane-xplat/ui';
+import type { ChartProps } from './props';
+import { computeScene } from './core/scene';
+import type { ChartScene } from './core/scene';
+import { createScrub, hitLabel } from './core/hit';
+import type { SceneHit } from './core/hit';
+
+const EMPTY_SVG = '<svg xmlns="http://www.w3.org/2000/svg"/>';
+const TIP_ESTIMATE_CHAR = 6.2;
+
+/** Chart — NativeScript leaf. The core's Mark[] serialize to one svg markup
+ *  string fed to `<svgview>` (vendored ui-svg → SVGKit/androidsvg — its
+ *  registration arrives transitively through `@octane-xplat/ui`'s native
+ *  entry). Axis labels, legend, tooltip, and crosshair are real views in an
+ *  `absolutelayout` overlay — never `<text>` in the markup. Touch input on
+ *  the overlay reports view-relative dips (`e.getX()/getY()`), matching the
+ *  markup's coordinate space. */
+export function Chart(props: ChartProps) @{
+	const measure = useMeasure();
+	const [cursor, setCursor] = useState<SceneHit | null>(null);
+	const sceneRef = useRef<ChartScene | null>(null);
+	const propsRef = useRef(props);
+	propsRef.current = props;
+
+	const bounds = measure.bounds;
+	const w = props.width ?? bounds?.width ?? 0;
+	const h =
+		props.height ??
+		(props.aspectRatio && w > 0
+			? w / props.aspectRatio
+			: bounds?.height && bounds.height > 0
+				? bounds.height
+				: w > 0
+					? w / 1.6
+					: 0);
+
+	const scene = useMemo(
+		() => (w > 0 && h > 0 ? computeScene(propsRef.current, w, h) : null),
+		[
+			props.type,
+			props.data,
+			props.margin,
+			props.stacked,
+			props.innerRadiusRatio,
+			props.xAxis,
+			props.yAxis,
+			w,
+			h,
+		],
+	);
+
+	sceneRef.current = scene;
+
+	const interactive = !!(props.onPress || props.onScrub || props.tooltip || props.crosshair);
+	// Stable handler identity — the driver's prop apply subscribes `onTouch`
+	// per identity change, so the closure reads scene/props through refs.
+	const onTouch = useMemo(() => {
+		const scrub = createScrub(
+			() => sceneRef.current,
+			() => propsRef.current,
+			setCursor,
+		);
+
+		return (e: any) => {
+			scrub(e.action, e.getX(), e.getY());
+		};
+	}, []);
+
+	// `tap` is the completed-press phase — NS's tap recognizer (and the probe
+	// harness's tap dispatch) reach onPress without a touch-sequence guess.
+	const onTap = useMemo(() => {
+		const scrub = createScrub(
+			() => sceneRef.current,
+			() => propsRef.current,
+			setCursor,
+		);
+
+		return (e: any) => {
+			// Probe harness taps dispatch with a synthetic event lacking
+			// getX/getY — fall back to the view center there.
+			const size = e.object?.getActualSize?.();
+			scrub('tap', e.getX?.() ?? (size ? size.width / 2 : 0), e.getY?.() ?? (size ? size.height / 2 : 0));
+		};
+	}, []);
+
+	const legend = props.legend === true ? 'bottom' : props.legend;
+	const plot = scene?.plot;
+	const dotColor = cursor && scene ? (scene.pie ? scene.pie.slices.find((s) => s.series === cursor.series && s.index === cursor.index)?.color : scene.series[cursor.series]?.color) : undefined;
+	const tipText = cursor && scene ? hitLabel(scene, cursor) : null;
+	const tipWidth = tipText ? tipText.length * TIP_ESTIMATE_CHAR + 14 : 0;
+	const tipLeft = cursor && scene ? Math.min(Math.max(0, cursor.px - tipWidth / 2), Math.max(0, scene.width - tipWidth)) : 0;
+	const tipTop = cursor ? cursor.py - 30 : 0;
+
+	<flexboxlayout
+		id={props.id}
+		className={props.className}
+		style={{ flexDirection: 'column', ...props.style }}
+		accessible={props.accessibilityLabel != null}
+		accessibilityRole={AccessibilityRole.Image}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		@if (legend === 'top' && scene) {
+			<flexboxlayout flexDirection="row" flexWrap="wrap" style={{ paddingBottom: 4 }}>
+				{scene.legend.map((item) => (
+					<flexboxlayout flexDirection="row" alignItems="center" style={{ marginRight: 12 }}>
+						<contentview style={{ width: 10, height: 10, borderRadius: 2, backgroundColor: new Color(item.color), marginRight: 4 }} />
+						<label text={item.text} style={{ fontSize: 11 }} />
+					</flexboxlayout>
+				))}
+			</flexboxlayout>
+		}
+		<gridlayout
+			ref={measure.ref}
+			style={{
+				width: props.width,
+				height: props.height ?? (props.aspectRatio && w > 0 ? w / props.aspectRatio : undefined),
+				flexGrow: 1,
+			}}
+		>
+			<svgview src={scene?.markup ?? EMPTY_SVG} stretch="aspectFit" style={{ width: w, height: h }} />
+			<absolutelayout
+				id={props.id ? props.id + '-overlay' : undefined}
+				style={{ width: w, height: h }}
+				isUserInteractionEnabled={interactive}
+				onTouch={interactive ? onTouch : undefined}
+				onTap={interactive ? onTap : undefined}
+			>
+				{scene?.labels.map((l) => (
+					<label
+						left={l.x}
+						top={l.y}
+						width={l.width}
+						text={l.text}
+						textAlignment={l.align === 'center' ? 'center' : l.align === 'end' ? 'right' : 'left'}
+						style={{ fontSize: 10, opacity: 0.7 }}
+					/>
+				))}
+				@if (cursor && props.crosshair && !scene?.pie && plot) {
+					<contentview left={cursor.px - 0.5} top={plot.y} width={1} height={plot.height} backgroundColor={new Color('#8a8a8a')} />
+				}
+				@if (cursor && (props.crosshair || props.tooltip)) {
+					<contentview left={cursor.px - 4} top={cursor.py - 4} width={8} height={8} borderRadius={4} backgroundColor={new Color(dotColor ?? '#4e79a7')} />
+				}
+				@if (cursor && props.tooltip && tipText) {
+					<flexboxlayout
+						left={tipLeft}
+						top={tipTop < 0 ? cursor.py + 12 : tipTop}
+						backgroundColor={new Color('rgba(20,20,20,0.88)')}
+						borderRadius={4}
+						paddingTop={2}
+						paddingBottom={2}
+						paddingLeft={6}
+						paddingRight={6}
+					>
+						<label text={tipText} color={new Color('#ffffff')} style={{ fontSize: 11 }} />
+					</flexboxlayout>
+				}
+			</absolutelayout>
+		</gridlayout>
+		@if (legend === 'bottom' && scene) {
+			<flexboxlayout flexDirection="row" flexWrap="wrap" style={{ paddingTop: 4 }}>
+				{scene.legend.map((item) => (
+					<flexboxlayout flexDirection="row" alignItems="center" style={{ marginRight: 12 }}>
+						<contentview style={{ width: 10, height: 10, borderRadius: 2, backgroundColor: new Color(item.color), marginRight: 4 }} />
+						<label text={item.text} style={{ fontSize: 11 }} />
+					</flexboxlayout>
+				))}
+			</flexboxlayout>
+		}
+	</flexboxlayout>
+}

package/src/Chart.web.tsrx

@@ -0,0 +1,215 @@
+import { useEffect, useMemo, useRef, useState } from 'octane';
+import { useMeasure } from '@octane-xplat/ui';
+import type { ChartProps } from './props';
+import { computeScene } from './core/scene';
+import type { ChartScene } from './core/scene';
+import { createScrub, hitLabel } from './core/hit';
+import type { SceneHit } from './core/hit';
+
+const TIP_ESTIMATE_CHAR = 6.2;
+
+/** Chart — web leaf. The core's Mark[] serialize to one svg markup string,
+ *  inlined as `innerHTML` (Icon.web precedent — the same bytes feed
+ *  `<svgview>` on native). Axis labels, legend, tooltip, and crosshair are
+ *  real absolutely-positioned elements in the overlay — never `<text>` in
+ *  the markup. Pointer handlers attach to the plot host so chart coords are
+ *  client-minus-rect, matching the markup's coordinate space. */
+export function Chart(props: ChartProps) @{
+	const measure = useMeasure();
+	const [cursor, setCursor] = useState<SceneHit | null>(null);
+	const sceneRef = useRef<ChartScene | null>(null);
+	const propsRef = useRef(props);
+	propsRef.current = props;
+	const hostRef = useRef<HTMLElement | null>(null);
+
+	const bounds = measure.bounds;
+	const w = props.width ?? bounds?.width ?? 0;
+	const h =
+		props.height ??
+		(props.aspectRatio && w > 0
+			? w / props.aspectRatio
+			: bounds?.height && bounds.height > 0
+				? bounds.height
+				: w > 0
+					? w / 1.6
+					: 0);
+
+	const scene = useMemo(
+		() => (w > 0 && h > 0 ? computeScene(propsRef.current, w, h) : null),
+		[
+			props.type,
+			props.data,
+			props.margin,
+			props.stacked,
+			props.innerRadiusRatio,
+			props.xAxis,
+			props.yAxis,
+			w,
+			h,
+		],
+	);
+
+	sceneRef.current = scene;
+
+	const interactive = !!(props.onPress || props.onScrub || props.tooltip || props.crosshair);
+	useEffect(() => {
+		const el = hostRef.current;
+		if (!el || !interactive) {
+			return;
+		}
+
+		const scrub = createScrub(
+			() => sceneRef.current,
+			() => propsRef.current,
+			setCursor,
+		);
+
+		const at = (e: PointerEvent) => {
+			const rect = el.getBoundingClientRect();
+			return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+		};
+
+		const down = (e: PointerEvent) => {
+			el.setPointerCapture?.(e.pointerId);
+			const p = at(e);
+			scrub('down', p.x, p.y);
+		};
+
+		const move = (e: PointerEvent) => {
+			const p = at(e);
+			scrub(e.buttons !== 0 ? 'move' : 'hover', p.x, p.y);
+		};
+
+		const up = (e: PointerEvent) => {
+			const p = at(e);
+			scrub('up', p.x, p.y);
+		};
+
+		// `click` (incl. el.click()/AT activation) is the web 'tap' — onPress
+		// lives on tap so a real click after pointerup doesn't double-fire.
+		// Synthetic clicks carry no pointer position → tap the center.
+		const click = (e: MouseEvent) => {
+			const p =
+				e.clientX === 0 && e.clientY === 0
+					? { x: el.getBoundingClientRect().width / 2, y: el.getBoundingClientRect().height / 2 }
+					: at(e as PointerEvent);
+
+			scrub('tap', p.x, p.y);
+		};
+
+		const end = () => scrub('cancel', 0, 0);
+		const leave = () => scrub('leave', 0, 0);
+		el.addEventListener('pointerdown', down);
+		el.addEventListener('pointermove', move);
+		el.addEventListener('pointerup', up);
+		el.addEventListener('pointercancel', end);
+		el.addEventListener('pointerleave', leave);
+		el.addEventListener('click', click);
+		return () => {
+			el.removeEventListener('pointerdown', down);
+			el.removeEventListener('pointermove', move);
+			el.removeEventListener('pointerup', up);
+			el.removeEventListener('pointercancel', end);
+			el.removeEventListener('pointerleave', leave);
+			el.removeEventListener('click', click);
+		};
+	}, [interactive]);
+
+	const legend = props.legend === true ? 'bottom' : props.legend;
+	const plot = scene?.plot;
+	const dotColor =
+		cursor && scene
+			? scene.pie
+				? scene.pie.slices.find((s) => s.series === cursor.series && s.index === cursor.index)?.color
+				: scene.series[cursor.series]?.color
+			: undefined;
+
+	const tipText = cursor && scene ? hitLabel(scene, cursor) : null;
+	const tipWidth = tipText ? tipText.length * TIP_ESTIMATE_CHAR + 14 : 0;
+	const tipLeft =
+		cursor && scene ? Math.min(Math.max(0, cursor.px - tipWidth / 2), Math.max(0, scene.width - tipWidth)) : 0;
+
+	const tipTop = cursor ? cursor.py - 30 : 0;
+
+	const legendRow = (items: { color: string; text: string }[], position: 'top' | 'bottom') => (
+		<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, paddingTop: position === 'bottom' ? 4 : 0, paddingBottom: position === 'top' ? 4 : 0 }}>
+			{items.map((item) => (
+				<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11 }}>
+					<span style={{ width: 10, height: 10, borderRadius: 2, backgroundColor: item.color, display: 'inline-block' }} />
+					{item.text}
+				</span>
+			))}
+		</div>
+	);
+
+	<div
+		id={props.id}
+		className={props.className}
+		style={{ display: 'flex', flexDirection: 'column', width: props.width, height: props.height, ...props.style }}
+		role={props.accessibilityLabel ? 'img' : undefined}
+		aria-label={props.accessibilityLabel}
+	>
+		{legend === 'top' && scene ? legendRow(scene.legend, 'top') : null}
+		<div
+			id={props.id ? props.id + '-overlay' : undefined}
+			ref={(el: HTMLElement | null) => {
+				hostRef.current = el;
+				measure.ref(el);
+			}}
+			style={{
+				position: 'relative',
+				flexGrow: 1,
+				minHeight: 0,
+				width: props.width,
+				height: props.height ?? (props.aspectRatio && w > 0 ? w / props.aspectRatio : undefined),
+			}}
+		>
+			<div dangerouslySetInnerHTML={scene ? { __html: scene.markup } : undefined} />
+			<div style={{ position: 'absolute', inset: 0 }}>
+				{scene?.labels.map((l) => (
+					<div
+						style={{
+							position: 'absolute',
+							left: l.x,
+							top: l.y,
+							width: l.width,
+							fontSize: 10,
+							opacity: 0.7,
+							textAlign: l.align,
+							overflow: 'hidden',
+							whiteSpace: 'nowrap',
+							textOverflow: 'ellipsis',
+						}}
+					>
+						{l.text}
+					</div>
+				))}
+				{cursor && props.crosshair && !scene?.pie && plot ? (
+					<div style={{ position: 'absolute', left: cursor.px - 0.5, top: plot.y, width: 1, height: plot.height, backgroundColor: '#8a8a8a', pointerEvents: 'none' }} />
+				) : null}
+				{cursor && (props.crosshair || props.tooltip) ? (
+					<div style={{ position: 'absolute', left: cursor.px - 4, top: cursor.py - 4, width: 8, height: 8, borderRadius: 4, backgroundColor: dotColor ?? '#4e79a7', pointerEvents: 'none' }} />
+				) : null}
+				{cursor && props.tooltip && tipText ? (
+					<div
+						style={{
+							position: 'absolute',
+							left: tipLeft,
+							top: tipTop < 0 ? cursor.py + 12 : tipTop,
+							backgroundColor: 'rgba(20,20,20,0.88)',
+							color: '#fff',
+							fontSize: 11,
+							padding: '2px 6px',
+							borderRadius: 4,
+							whiteSpace: 'nowrap',
+							pointerEvents: 'none',
+						}}
+					>
+						{tipText}
+					</div>
+				) : null}
+			</div>
+		</div>
+		{legend === 'bottom' && scene ? legendRow(scene.legend, 'bottom') : null}
+	</div>
+}