@niekes/charts-3d 0.0.0-stage → 0.2.0

package/dist/index.js

@@ -0,0 +1,875 @@
+"use client"
+import * as React from "react";
+import { extent, nice, ticks } from "d3-array";
+import { axes3D, box, camera3D, cubes3D, gridPlanes3D, normal, points3D, sort } from "d3-3d";
+import { KeyboardIcon } from "lucide-react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+// registry/new-york/ui/chart-3d.tsx
+const THEMES = {
+	light: "",
+	dark: ".dark"
+};
+const Chart3DContext = React.createContext(null);
+function useChart3D() {
+	const context = React.useContext(Chart3DContext);
+	if (!context) throw new Error("useChart3D must be used within a <ChartContainer3D />");
+	return context;
+}
+const DRAG = Math.PI / 230;
+const KEY_STEP = Math.PI / 36;
+const PAN_STEP = 20;
+const ZOOM_STEP = 1.2;
+const CLICK_DISTANCE = 4;
+const SHORTCUTS = [
+	{
+		hint: ["Drag"],
+		label: "Rotate"
+	},
+	{
+		hint: [
+			"←",
+			"→",
+			"↑",
+			"↓"
+		],
+		label: "Rotate",
+		keys: {
+			ArrowLeft: { yaw: -KEY_STEP },
+			ArrowRight: { yaw: KEY_STEP },
+			ArrowUp: { tilt: -KEY_STEP },
+			ArrowDown: { tilt: KEY_STEP }
+		}
+	},
+	{
+		hint: ["Space", "Drag"],
+		label: "Pan"
+	},
+	{
+		hint: [
+			"Shift",
+			"←",
+			"→",
+			"↑",
+			"↓"
+		],
+		label: "Pan",
+		keys: {
+			"Shift+ArrowLeft": { pan: {
+				x: -20,
+				y: 0
+			} },
+			"Shift+ArrowRight": { pan: {
+				x: PAN_STEP,
+				y: 0
+			} },
+			"Shift+ArrowUp": { pan: {
+				x: 0,
+				y: -20
+			} },
+			"Shift+ArrowDown": { pan: {
+				x: 0,
+				y: PAN_STEP
+			} }
+		}
+	},
+	{
+		hint: ["+", "−"],
+		label: "Zoom",
+		keys: {
+			"+": { zoom: ZOOM_STEP },
+			"=": { zoom: ZOOM_STEP },
+			"-": { zoom: 1 / ZOOM_STEP }
+		}
+	},
+	{
+		hint: ["Ctrl", "Scroll"],
+		label: "Zoom"
+	},
+	{
+		hint: ["0"],
+		label: "Reset",
+		keys: { "0": { reset: true } }
+	},
+	{
+		hint: ["Double-click"],
+		label: "Reset"
+	},
+	{
+		hint: ["?"],
+		label: "Shortcuts"
+	}
+];
+const KEYS = Object.assign({}, ...SHORTCUTS.map((s) => s.keys));
+function ChartContainer3D({ id, config, defaultView = {
+	yaw: Math.PI / 6,
+	tilt: Math.PI / 6
+}, width = 640, height = 400, legend = false, renderer: requested = "svg", shortcuts = true, className, children, "aria-label": ariaLabel = "3D chart. Drag to rotate it, press ? for all shortcuts.", ...props }) {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	const [tooltip, setTooltip] = React.useState(null);
+	const { scene, renderer, canvas, repaint, hover, leave } = useScene(requested, width, height, setTooltip);
+	const { view, orbiting, handlers } = useOrbit(defaultView, width, leave, hover);
+	const camera = useCamera(view, width, height);
+	const context = React.useMemo(() => ({
+		config,
+		camera,
+		renderer,
+		scene,
+		repaint
+	}), [
+		config,
+		camera,
+		renderer,
+		repaint
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-3d",
+		"data-chart": chartId,
+		className: cn("relative w-full text-xs", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ChartStyle, {
+				id: chartId,
+				config
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				viewBox: `0 0 ${width} ${height}`,
+				role: "img",
+				"aria-label": ariaLabel,
+				tabIndex: 0,
+				className: "block h-auto w-full cursor-grab touch-none rounded-lg outline-hidden select-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:cursor-grabbing",
+				"data-orbiting": orbiting,
+				onPointerLeave: leave,
+				...handlers,
+				children: /* @__PURE__ */ jsx(Chart3DContext.Provider, {
+					value: context,
+					children
+				})
+			}),
+			/* @__PURE__ */ jsx(ChartCanvas3D, {
+				renderer,
+				canvas,
+				width,
+				height
+			}),
+			/* @__PURE__ */ jsx(ChartTooltip3D, {
+				tooltip,
+				width,
+				height
+			}),
+			shortcuts && /* @__PURE__ */ jsx(ChartShortcuts3D, {}),
+			legend && /* @__PURE__ */ jsx(ChartLegend3D, { config })
+		]
+	});
+}
+/**
+* The marks of the chart and what reads them: the renderer that draws them,
+* the canvas it paints them on and the hover that shows their tooltips.
+*/
+function useScene(requested, width, height, setTooltip) {
+	const scene = React.useRef([]);
+	const renderer = useRenderer(requested);
+	const { canvas, repaint } = useCanvas(scene, width);
+	const { hover, leave } = useHover(scene, width, height, setTooltip);
+	return {
+		scene,
+		renderer,
+		canvas,
+		repaint,
+		hover,
+		leave
+	};
+}
+/** The camera of a view. The shapes of the chart hang on it, so a new view re-projects them all. */
+function useCamera(view, width, height) {
+	return React.useMemo(() => camera3D().origin({
+		x: width / 2 + (view.pan?.x ?? 0),
+		y: height / 2 + (view.pan?.y ?? 0)
+	}).scale(Math.min(width, height) * .3 * (view.zoom ?? 1)).perspective(view.perspective ?? Infinity).rotateY(view.yaw).rotateX(-view.tilt), [
+		view,
+		width,
+		height
+	]);
+}
+/** `view` moved by one step. The tilt stops at the zenith and the nadir, the zoom at 1/4 and 8. */
+function moved(view, move, initial) {
+	if (move.reset) return initial;
+	const step = {
+		yaw: 0,
+		tilt: 0,
+		zoom: 1,
+		pan: {
+			x: 0,
+			y: 0
+		},
+		...move
+	};
+	const pan = view.pan ?? {
+		x: 0,
+		y: 0
+	};
+	const clamp = (lo, hi, value) => Math.max(lo, Math.min(hi, value));
+	return {
+		...view,
+		yaw: view.yaw + step.yaw,
+		tilt: clamp(-Math.PI / 2, Math.PI / 2, view.tilt + step.tilt),
+		zoom: clamp(.25, 8, (view.zoom ?? 1) * step.zoom),
+		pan: {
+			x: pan.x + step.pan.x,
+			y: pan.y + step.pan.y
+		}
+	};
+}
+/**
+* The view of the camera, and the handlers that move it: a drag turns it,
+* or pans it while Space is held, the keys of `SHORTCUTS` step it, Ctrl or ⌘
+* with the wheel zooms it and a double click resets it. `orbiting` is true
+* while the camera turns. `onDragStart` runs when a press becomes a drag,
+* `onHover` on a move without one.
+*/
+function useOrbit(defaultView, width, onDragStart, onHover) {
+	const [view, setView] = React.useState(defaultView);
+	const [orbiting, setOrbiting] = React.useState(false);
+	const drag = React.useRef(null);
+	const space = React.useRef(false);
+	const ref = useWheelZoom(setView);
+	const move = (step) => setView((v) => moved(v, step, defaultView));
+	const release = () => {
+		drag.current = null;
+		setOrbiting(false);
+	};
+	return {
+		view,
+		orbiting,
+		handlers: {
+			ref,
+			onPointerDown: (e) => {
+				drag.current = {
+					x: e.clientX,
+					y: e.clientY,
+					moved: false
+				};
+			},
+			onPointerMove: (e) => {
+				const d = drag.current;
+				if (!d) return onHover(e);
+				const dx = e.clientX - d.x;
+				const dy = e.clientY - d.y;
+				if (!d.moved && Math.hypot(dx, dy) < CLICK_DISTANCE) return;
+				if (!d.moved) {
+					e.currentTarget.setPointerCapture(e.pointerId);
+					onDragStart();
+				}
+				drag.current = {
+					x: e.clientX,
+					y: e.clientY,
+					moved: true
+				};
+				const k = width / e.currentTarget.getBoundingClientRect().width;
+				setOrbiting(!space.current);
+				move(space.current ? { pan: {
+					x: dx * k,
+					y: dy * k
+				} } : {
+					yaw: dx * DRAG,
+					tilt: dy * DRAG
+				});
+			},
+			onPointerUp: release,
+			onPointerCancel: release,
+			onDoubleClick: () => move({ reset: true }),
+			onKeyDown: (e) => {
+				if (e.key === " ") space.current = true;
+				const step = e.shiftKey && KEYS[`Shift+${e.key}`] || KEYS[e.key];
+				if (!step && e.key !== " ") return;
+				e.preventDefault();
+				if (!step) return;
+				setOrbiting(Boolean(step.yaw || step.tilt));
+				move(step);
+			},
+			onKeyUp: (e) => {
+				if (e.key === " ") space.current = false;
+				setOrbiting(false);
+			}
+		}
+	};
+}
+/**
+* A ref for the svg that zooms the view with Ctrl or ⌘ and the wheel, which
+* is also how a trackpad pinches. The wheel alone still scrolls the page.
+*/
+function useWheelZoom(setView) {
+	return React.useCallback((svg) => {
+		const onWheel = (e) => {
+			if (!e.ctrlKey && !e.metaKey) return;
+			e.preventDefault();
+			setView((v) => moved(v, { zoom: 2 ** (-e.deltaY / 200) }, v));
+		};
+		svg?.addEventListener("wheel", onWheel, { passive: false });
+		return () => svg?.removeEventListener("wheel", onWheel);
+	}, [setView]);
+}
+/**
+* The tooltip of the mark under the pointer, the one painted last. `hover`
+* sets it only when the pointer moves onto another mark, so a move within
+* one does not render the chart again.
+*/
+function useHover(scene, width, height, setTooltip) {
+	const hovered = React.useRef(void 0);
+	const show = (mark) => {
+		if (mark?.key === hovered.current?.key) return;
+		hovered.current = mark;
+		setTooltip(mark?.tooltip ?? null);
+	};
+	return {
+		hover: (e) => {
+			const rect = e.currentTarget.getBoundingClientRect();
+			const at = {
+				x: (e.clientX - rect.left) / rect.width * width,
+				y: (e.clientY - rect.top) / rect.height * height
+			};
+			show(hit(scene.current, at));
+		},
+		leave: () => show(void 0)
+	};
+}
+/** The topmost mark under `at`: the last one painted that holds it. */
+function hit(marks, at) {
+	for (let i = marks.length - 1; i >= 0; i -= 1) {
+		const { points, r } = marks[i];
+		if (r === void 0 ? inside(points, at) : Math.hypot(points[0].x - at.x, points[0].y - at.y) <= r) return marks[i];
+	}
+}
+/** Whether `at` lies inside `polygon`: a ray from it crosses an odd number of its edges. */
+function inside(polygon, at) {
+	let odd = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 1) {
+		const a = polygon[i];
+		const b = polygon[j];
+		if (a.y > at.y !== b.y > at.y && at.x < (b.x - a.x) * (at.y - a.y) / (b.y - a.y) + a.x) odd = !odd;
+	}
+	return odd;
+}
+/**
+* The renderer the chart draws with: SVG on the server and in the first
+* render on the client, then the requested one if the browser has it.
+*/
+function useRenderer(requested) {
+	const [renderer, setRenderer] = React.useState("svg");
+	React.useEffect(() => {
+		const canvas = requested === "canvas" && document.createElement("canvas").getContext("2d");
+		setRenderer(canvas ? "canvas" : "svg");
+	}, [requested]);
+	return renderer;
+}
+/**
+* A ref for the canvas of the marks, and the repaint that paints them: on new
+* marks, when the canvas changes its size and when the theme changes. A color
+* resolves on the canvas itself, inside the chart, so the `--color-*` apply.
+*/
+function useCanvas(scene, width) {
+	const element = React.useRef(null);
+	const colors = React.useRef(/* @__PURE__ */ new Map());
+	const repaint = React.useCallback(() => {
+		const canvas = element.current;
+		if (!canvas) return;
+		paint(canvas, scene.current, width, (css) => {
+			let color = colors.current.get(css);
+			if (color === void 0) {
+				canvas.style.color = css;
+				color = getComputedStyle(canvas).color;
+				colors.current.set(css, color);
+			}
+			return color;
+		});
+	}, [scene, width]);
+	return {
+		canvas: React.useCallback((node) => {
+			element.current = node;
+			if (!node) return;
+			repaint();
+			const resize = new ResizeObserver(repaint);
+			resize.observe(node);
+			const theme = new MutationObserver(() => {
+				colors.current.clear();
+				repaint();
+			});
+			theme.observe(document.documentElement, { attributeFilter: ["class", "style"] });
+			return () => {
+				element.current = null;
+				resize.disconnect();
+				theme.disconnect();
+			};
+		}, [repaint]),
+		repaint
+	};
+}
+/** Paints `marks` on `canvas`, from the view box of `width` to the pixels of the canvas. */
+function paint(canvas, marks, width, color) {
+	canvas.width = Math.round(canvas.clientWidth * devicePixelRatio);
+	canvas.height = Math.round(canvas.clientHeight * devicePixelRatio);
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return;
+	const scale = canvas.width / width;
+	ctx.setTransform(scale, 0, 0, scale, 0, 0);
+	ctx.lineJoin = "round";
+	for (const { points, r, fill, stroke } of marks) {
+		ctx.beginPath();
+		if (r === void 0) {
+			for (const p of points) ctx.lineTo(p.x, p.y);
+			ctx.closePath();
+		} else ctx.arc(points[0].x, points[0].y, r, 0, 2 * Math.PI);
+		ctx.fillStyle = color(fill);
+		ctx.fill();
+		const outline = r === void 0 ? fill : stroke;
+		if (!outline) continue;
+		ctx.strokeStyle = color(outline);
+		ctx.lineWidth = r === void 0 ? .5 : 1;
+		ctx.stroke();
+	}
+}
+/** The canvas over the chart box that the marks are painted on, if the chart draws on one. */
+function ChartCanvas3D({ renderer, canvas, width, height }) {
+	if (renderer !== "canvas") return null;
+	return /* @__PURE__ */ jsx("canvas", {
+		ref: canvas,
+		className: "pointer-events-none absolute top-0 left-0 w-full",
+		style: { aspectRatio: `${width} / ${height}` }
+	});
+}
+/**
+* The marks of a chart, drawn by the renderer of the container: as SVG
+* elements, or on the canvas over the chart box. The hover reads them too.
+*/
+function Marks3D({ marks }) {
+	const { renderer, scene, repaint } = useChart3D();
+	React.useLayoutEffect(() => {
+		scene.current = marks;
+		repaint();
+	});
+	if (renderer === "canvas") return null;
+	return marks.map(({ key, points, r, fill, stroke }) => r === void 0 ? /* @__PURE__ */ jsx("path", {
+		d: `M${points.map((p) => `${+p.x.toFixed(2)},${+p.y.toFixed(2)}`).join("L")}Z`,
+		fill,
+		stroke: fill,
+		strokeWidth: .5,
+		strokeLinejoin: "round"
+	}, key) : /* @__PURE__ */ jsx("circle", {
+		cx: points[0].x,
+		cy: points[0].y,
+		r,
+		fill,
+		stroke,
+		strokeWidth: stroke ? 1 : void 0
+	}, key));
+}
+function ChartStyle({ id, config }) {
+	const colorConfig = Object.entries(config).filter(([, c]) => c.theme || c.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, item]) => {
+		const color = item.theme?.[theme] || item.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+}
+function ChartTooltip3D({ tooltip, width, height }) {
+	if (!tooltip) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pointer-events-none absolute z-10 grid min-w-32 -translate-x-1/2 -translate-y-[calc(100%+0.5rem)] gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+		style: {
+			left: `${tooltip.at.x / width * 100}%`,
+			top: `${tooltip.at.y / height * 100}%`
+		},
+		children: [tooltip.title && /* @__PURE__ */ jsx("div", {
+			className: "font-medium",
+			children: tooltip.title
+		}), tooltip.items.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				item.color && /* @__PURE__ */ jsx("span", {
+					className: "size-2.5 shrink-0 rounded-[2px]",
+					style: { background: item.color }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: item.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ml-auto font-mono font-medium text-foreground tabular-nums",
+					children: typeof item.value === "number" ? item.value.toLocaleString() : item.value
+				})
+			]
+		}, i))]
+	});
+}
+/**
+* A button in the corner of the chart that lists `SHORTCUTS`. `?` on the
+* chart opens and closes the list, Escape closes it.
+*/
+function ChartShortcuts3D() {
+	const [open, setOpen] = React.useState(false);
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		const chart = ref.current?.parentElement;
+		const onKeyDown = (e) => {
+			if (e.key === "?") setOpen((o) => !o);
+			if (e.key === "Escape") setOpen(false);
+		};
+		chart?.addEventListener("keydown", onKeyDown);
+		return () => chart?.removeEventListener("keydown", onKeyDown);
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "absolute top-2 right-2 z-10 flex flex-col items-end gap-1",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Keyboard shortcuts",
+			"aria-expanded": open,
+			onClick: () => setOpen((o) => !o),
+			className: "inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4",
+			children: /* @__PURE__ */ jsx(KeyboardIcon, {})
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-2 shadow-xl",
+			children: SHORTCUTS.map(({ hint, label }, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "flex gap-1",
+				children: hint.map((key) => /* @__PURE__ */ jsx("kbd", {
+					className: "pointer-events-none inline-flex h-5 min-w-5 items-center justify-center rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
+					children: key
+				}, key))
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: label
+			})] }, i))
+		})]
+	});
+}
+function ChartLegend3D({ config }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center gap-4 pt-3",
+		children: Object.entries(config).map(([key, item]) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [item.icon ? /* @__PURE__ */ jsx(item.icon, {}) : /* @__PURE__ */ jsx("span", {
+				className: "size-2 rounded-[2px]",
+				style: { background: `var(--color-${key})` }
+			}), item.label ?? key]
+		}, key))
+	});
+}
+/**
+* The walls of the chart box that face away from the camera, with their
+* gridlines, and an axis with ticks on the outline of the box.
+*/
+function Axes3D({ spec, world, format = {}, titles = {} }) {
+	const { camera } = useChart3D();
+	const box = axes3D().camera(camera).x((p) => world.x(p.x)).y((p) => world.y(p.y)).z((p) => world.z(p.z));
+	return /* @__PURE__ */ jsxs("g", {
+		"data-slot": "chart-3d-axes",
+		children: [box.data(spec).filter((wall) => !wall.ccw).map((wall) => /* @__PURE__ */ jsx("path", {
+			d: box.draw(wall),
+			className: "fill-muted/40 stroke-border",
+			strokeWidth: .75
+		}, `${wall.axis}${wall.side}`)), box.axes(spec).map((edge) => /* @__PURE__ */ jsx(AxisEdge3D, {
+			edge,
+			format: format[edge.axis] ?? String,
+			title: titles[edge.axis]
+		}, edge.axis))]
+	});
+}
+/**
+* The tick labels of one axis on the outline of the box, pushed away from the
+* box along the normal of the edge, and the title of the axis further out.
+*/
+function AxisEdge3D({ edge, format, title }) {
+	if (!edge.length) return null;
+	const { normal: n } = edge;
+	const start = edge[0].projected;
+	const end = edge[edge.length - 1].projected;
+	const anchor = n.x > .3 ? "start" : n.x < -.3 ? "end" : "middle";
+	return /* @__PURE__ */ jsxs("g", {
+		className: "transition-opacity delay-300 duration-300 in-data-[orbiting=true]:opacity-0 in-data-[orbiting=true]:delay-0 in-data-[orbiting=true]:duration-150",
+		children: [edge.map((tick, i) => /* @__PURE__ */ jsx("text", {
+			x: tick.projected.x + n.x * 10,
+			y: tick.projected.y + n.y * 10,
+			textAnchor: anchor,
+			dominantBaseline: "central",
+			className: "fill-muted-foreground text-[10px]",
+			children: format(tick[edge.axis])
+		}, i)), title && /* @__PURE__ */ jsx("text", {
+			x: (start.x + end.x) / 2 + n.x * 44,
+			y: (start.y + end.y) / 2 + n.y * 44,
+			textAnchor: anchor,
+			dominantBaseline: "central",
+			className: "fill-foreground font-medium",
+			children: title
+		})]
+	});
+}
+/** A nice axis from `lo` to `hi` with about `count` ticks. */
+function axis(lo, hi, count = 5) {
+	const [start, stop] = nice(lo, lo === hi ? hi + 1 : hi, count);
+	return {
+		domain: [start, stop],
+		ticks: ticks(start, stop, count)
+	};
+}
+/** The linear map from `domain` to `range`. */
+function linear([d0, d1], [r0, r1]) {
+	return (value) => r0 + (value - d0) / (d1 - d0 || 1) * (r1 - r0);
+}
+/** The world box of `spec`: x from -1 to 1, y up from 1 to -1, z from -`depth` to `depth`. */
+function worldBox(spec, depth = 1) {
+	return {
+		x: linear(spec.x.domain, [-1, 1]),
+		y: linear(spec.y.domain, [1, -1]),
+		z: linear(spec.z.domain, [-depth, depth])
+	};
+}
+const LIGHT = {
+	x: -.4,
+	y: -.8,
+	z: .44
+};
+/**
+* `color` lit by the light from the upper left: the face that looks at it
+* keeps the color, one that turns away gets darker. A CSS color-mix, so the
+* shade follows the theme variables.
+*/
+function shade(face, color) {
+	const n = normal(face.map((p) => p.rotated));
+	const side = n.z < 0 ? -1 : 1;
+	const light = Math.max(0, side * (n.x * LIGHT.x + n.y * LIGHT.y + n.z * LIGHT.z));
+	return `color-mix(in oklch, ${color} ${Math.round(65 + 35 * light)}%, black)`;
+}
+/** The mean of the projected points, where a tooltip points at. */
+function center(points) {
+	const sum = points.reduce((s, p) => ({
+		x: s.x + p.projected.x,
+		y: s.y + p.projected.y
+	}), {
+		x: 0,
+		y: 0
+	});
+	return {
+		x: sum.x / points.length,
+		y: sum.y / points.length
+	};
+}
+// registry/new-york/ui/bar-chart-3d.tsx
+/**
+* Bars on a floor: one row per entry of `data` along x, one per series
+* along z, the value as the height. The series are the keys of the chart
+* config unless `keys` names them.
+*/
+function BarChart3D({ data, index, keys, barSize = .6, format = {}, titles }) {
+	const { config, camera } = useChart3D();
+	const series = keys ?? Object.keys(config);
+	const values = data.flatMap((d) => series.map((key) => Number(d[key]) || 0));
+	const { spec, world, size } = barBox(data.length, series.length, values, barSize);
+	const bars = cubes3D().camera(camera).data(data.flatMap((d, i) => series.map((key, j) => {
+		const value = Number(d[key]) || 0;
+		return Object.assign(barCorners(world, i, j, value, size), {
+			i,
+			key,
+			value
+		});
+	}))).map((bar) => Object.assign(bar, { bottom: bar.faces.find((f) => f.face === "bottom") })).sort((a, b) => sort(a.bottom, b.bottom));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		titles,
+		format: {
+			x: (i) => (format.x ?? String)(String(data[i]?.[index] ?? "")),
+			y: format.y,
+			z: (j) => config[series[j]]?.label ?? series[j]
+		}
+	}), /* @__PURE__ */ jsx(Marks3D, { marks: bars.flatMap((bar) => barMarks({
+		id: `${bar.i}-${bar.key}`,
+		faces: bar.faces,
+		color: `var(--color-${bar.key})`,
+		title: String(data[bar.i][index]),
+		label: config[bar.key]?.label ?? bar.key,
+		value: bar.value
+	})) })] });
+}
+/**
+* The box of a bar chart: a row per entry along x, a row per series along z,
+* and the size of a bar, the share `barSize` of its cell.
+*/
+function barBox(entries, series, values, barSize) {
+	const index = (length) => Array.from({ length }, (_, i) => i);
+	const spec = {
+		x: {
+			domain: [-.5, entries - .5],
+			ticks: index(entries)
+		},
+		y: axis(Math.min(0, ...values), Math.max(0, ...values)),
+		z: {
+			domain: [-.5, series - .5],
+			ticks: index(series)
+		}
+	};
+	const depth = Math.min(1, Math.max(.25, series / entries));
+	const size = {
+		width: 2 / entries * barSize,
+		depth: 2 * depth / series * barSize
+	};
+	return {
+		spec,
+		world: worldBox(spec, depth),
+		size
+	};
+}
+/**
+* The corners of one bar, from the floor to its value, at row `x` and series
+* `z`. box() rises towards -y, so a negative bar starts at its value.
+*/
+function barCorners(world, x, z, value, size) {
+	const floor = world.y(0);
+	const top = world.y(value);
+	return box({
+		x: world.x(x),
+		y: Math.max(floor, top),
+		z: world.z(z),
+		...size,
+		height: Math.abs(floor - top)
+	});
+}
+/** The marks of one bar: the faces that look at the camera, shaded, each with its entry and value on hover. */
+function barMarks({ id, faces, color, title, label, value }) {
+	const tooltip = {
+		at: center(faces.find((face) => face.face === "top")),
+		title,
+		items: [{
+			label,
+			value,
+			color
+		}]
+	};
+	return faces.filter((face) => face.ccw).map((face) => ({
+		key: `${id}-${face.face}`,
+		points: face.map((p) => p.projected),
+		fill: shade(face, color),
+		tooltip
+	}));
+}
+// registry/new-york/ui/scatter-chart-3d.tsx
+/**
+* Points in the chart box, at the fields `x`, `y` and `z` of each entry.
+* `series` names the field whose value is the config key of the color.
+*/
+function ScatterChart3D({ data, x, y, z, series, radius = 4, format, titles }) {
+	const { config, camera } = useChart3D();
+	const fields = {
+		x,
+		y,
+		z
+	};
+	const read = (d, axis) => Number(d[fields[axis]]);
+	const range = (a) => {
+		const [lo = 0, hi = 0] = extent(data, (d) => read(d, a));
+		return axis(lo, hi);
+	};
+	const spec = {
+		x: range("x"),
+		y: range("y"),
+		z: range("z")
+	};
+	const world = worldBox(spec);
+	const points = points3D().camera(camera).x(({ d }) => world.x(read(d, "x"))).y(({ d }) => world.y(read(d, "y"))).z(({ d }) => world.z(read(d, "z")));
+	const fallback = Object.keys(config)[0];
+	const marks = points.data(data.map((d, i) => ({
+		d,
+		i
+	}))).sort(sort).map((p) => {
+		const key = series ? String(p.d[series]) : fallback;
+		return {
+			key: String(p.i),
+			points: [p.projected],
+			r: radius,
+			fill: `var(--color-${key})`,
+			stroke: "var(--background)",
+			tooltip: {
+				at: p.projected,
+				title: series ? config[key]?.label ?? key : void 0,
+				items: [
+					"x",
+					"y",
+					"z"
+				].map((a) => ({
+					label: titles?.[a] ?? fields[a],
+					value: read(p.d, a)
+				}))
+			}
+		};
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		format,
+		titles
+	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+}
+// registry/new-york/ui/surface-chart-3d.tsx
+/**
+* A surface over a grid: `data[row][column]` is the height, the columns run
+* along x and the rows along z. The fill ramps from the first color of
+* `colors` at the lowest height to the second at the highest; both are keys
+* of the chart config, by default its first two.
+*/
+function SurfaceChart3D({ data, domain = {}, colors, format, titles }) {
+	const { config, camera } = useChart3D();
+	const [low, high = low] = colors ?? Object.keys(config);
+	const rows = data.length;
+	const columns = data[0]?.length ?? 0;
+	const [x0, x1] = domain.x ?? [0, columns - 1];
+	const [z0, z1] = domain.z ?? [0, rows - 1];
+	const [lo = 0, hi = 0] = extent(data.flat());
+	const spec = {
+		x: axis(x0, x1),
+		y: axis(lo, hi),
+		z: axis(z0, z1)
+	};
+	const world = worldBox(spec);
+	const toX = linear([0, columns - 1], [x0, x1]);
+	const toZ = linear([0, rows - 1], [z0, z1]);
+	const grid = gridPlanes3D().camera(camera).rows(columns).x((p) => world.x(p.x)).y((p) => world.y(p.y)).z((p) => world.z(p.z));
+	const points = data.flatMap((row, r) => row.map((y, c) => ({
+		x: toX(c),
+		y,
+		z: toZ(r)
+	})));
+	const marks = grid.data(points).sort(sort).map((quad) => {
+		const height = quad.reduce((sum, p) => sum + p.y, 0) / quad.length;
+		const t = Math.round((height - lo) / (hi - lo || 1) * 100);
+		return {
+			key: quad.plane,
+			points: quad.map((p) => p.projected),
+			fill: shade(quad, `color-mix(in oklch, var(--color-${high}) ${t}%, var(--color-${low}))`),
+			tooltip: {
+				at: center(quad),
+				items: [{
+					label: titles?.y ?? "value",
+					value: height
+				}]
+			}
+		};
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		format,
+		titles
+	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+}
+export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Marks3D, ScatterChart3D, SurfaceChart3D, axis, center, linear, shade, useChart3D, worldBox };
+
+//# sourceMappingURL=index.js.map