@niekes/charts-3d 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,7 +1,7 @@
 "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 { extent, nice, range, ticks } from "d3-array";
+import { axes3D, box, camera3D, cubes3D, gridPlanes3D, normal, points3D, polygons3D, sort } from "d3-3d";
 import { KeyboardIcon } from "lucide-react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -239,10 +239,9 @@ function keymapOf(keymap, panel) {
 function ChartContainer3D({ id, config, defaultView = {
 	yaw: Math.PI / 6,
 	tilt: Math.PI / 6
-}, width = 640, height = 400, animationDuration, legend = false, renderer: requested = "svg", shortcuts = true, keymap = {}, gizmo = "bottom-left", className, children, "aria-label": ariaLabel, ...props }) {
-	const uniqueId = React.useId();
-	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
-	const { scene, renderer, canvas, repaint, hover, hide, leave, tooltip, focus } = useScene(requested, width, height);
+}, width = 640, height = 400, animationDuration, legend = false, renderer: requested = "svg", shortcuts = true, keymap = {}, gizmo = "bottom-left", tooltip = "top-right", className, children, "aria-label": ariaLabel, ...props }) {
+	const chartId = chartIdOf(id, React.useId());
+	const { scene, renderer, canvas, repaint, hover, hide, leave, tip, focus } = useScene(requested, width, height, tooltip);
 	const keys = keymapOf(keymap, shortcuts);
 	const { view, handlers } = useOrbit(defaultView, width, keys, hide, hover);
 	const camera = useCamera(view, width, height);
@@ -296,11 +295,7 @@ function ChartContainer3D({ id, config, defaultView = {
 						camera,
 						corner: gizmo
 					}),
-					/* @__PURE__ */ jsx(ChartTooltip3D, {
-						tooltip,
-						width,
-						height
-					})
+					/* @__PURE__ */ jsx(ChartTooltip3D, { tip })
 				]
 			}),
 			/* @__PURE__ */ jsx(ChartShortcuts3D, { ...keys }),
@@ -308,6 +303,10 @@ function ChartContainer3D({ id, config, defaultView = {
 		]
 	});
 }
+/** The id the colors of a chart are scoped to: its own `id`, or the one React made up. */
+function chartIdOf(id, uniqueId) {
+	return `chart-${id || uniqueId.replace(/:/g, "")}`;
+}
 /**
 * What the svg says about its keymap: a label that names the drag and the
 * help key if they are on, the keys, the focus only if a key does something
@@ -332,13 +331,13 @@ function keymapProps(keys, label) {
 * 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) {
+function useScene(requested, width, height, placement) {
 	const scene = React.useRef([]);
-	const [tooltip, setTooltip] = React.useState(null);
+	const tip = useTip(placement);
 	const focus = useFocus();
 	const renderer = useRenderer(requested);
 	const { canvas, repaint } = useCanvas(scene, width, height, renderer);
-	const { hover, hide, leave } = useHover(scene, width, height, setTooltip, focus);
+	const { hover, hide, leave } = useHover(scene, width, height, tip, focus);
 	return {
 		scene,
 		renderer,
@@ -347,10 +346,65 @@ function useScene(requested, width, height) {
 		hover,
 		hide,
 		leave,
-		tooltip,
+		tip,
 		focus
 	};
 }
+const TIP_GAP = 12;
+const shift = (isBefore) => isBefore ? `calc(-100% - ${TIP_GAP}px)` : `${TIP_GAP}px`;
+/**
+* Whether a tooltip of `size` goes before the pointer at `at`, on an axis of
+* `length`: as `preferred`, unless it would leave the chart there and the
+* other side has more room.
+*/
+function before(at, size, length, preferred) {
+	const room = preferred ? at : length - at;
+	return room < size + TIP_GAP && length - room > room ? !preferred : preferred;
+}
+/**
+* The tooltip of the hovered mark and where it sits: beside the pointer, in
+* the pixels of the chart, at `placement`. `follow` moves it with the pointer
+* straight in the DOM, so a move within a mark renders nothing; `place` puts
+* it there again once it shows, or its content changes its size.
+*/
+function useTip(placement) {
+	const [tooltip, set] = React.useState(null);
+	const ref = React.useRef(null);
+	const pointer = React.useRef({
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	});
+	const place = React.useCallback(() => {
+		const el = ref.current;
+		if (!el) return;
+		const shows = !el.dataset.placement;
+		if (shows) el.style.transition = "none";
+		const { x, y, width, height } = pointer.current;
+		const top = before(y, el.offsetHeight, height, placement.startsWith("top"));
+		const left = before(x, el.offsetWidth, width, placement.endsWith("left"));
+		el.style.left = `${x}px`;
+		el.style.top = `${y}px`;
+		el.style.translate = `${shift(left)} ${shift(top)}`;
+		el.dataset.placement = `${top ? "top" : "bottom"}-${left ? "left" : "right"}`;
+		if (shows) {
+			el.getBoundingClientRect();
+			el.style.transition = "";
+		}
+	}, [placement]);
+	const follow = (at) => {
+		pointer.current = at;
+		place();
+	};
+	return {
+		tooltip,
+		set,
+		ref,
+		place,
+		follow
+	};
+}
 /** 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({
@@ -740,26 +794,33 @@ function useWheelZoom(jump, on) {
 * drops the tooltip and keeps the focus, so a flow does not flash away and
 * can be followed from every side.
 */
-function useHover(scene, width, height, setTooltip, focus) {
+function useHover(scene, width, height, tip, focus) {
 	const hovered = React.useRef(void 0);
 	const show = (mark) => {
 		focus.set(mark?.groups);
 		if (mark?.key === hovered.current?.key) return;
 		hovered.current = mark;
-		setTooltip(mark?.tooltip ?? null);
+		tip.set(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));
+			const x = e.clientX - rect.left;
+			const y = e.clientY - rect.top;
+			tip.follow({
+				x,
+				y,
+				width: rect.width,
+				height: rect.height
+			});
+			show(hit(scene.current, {
+				x: x / rect.width * width,
+				y: y / rect.height * height
+			}));
 		},
 		hide: () => {
 			hovered.current = void 0;
-			setTooltip(null);
+			tip.set(null);
 		},
 		leave: () => show(void 0)
 	};
@@ -919,7 +980,7 @@ function colorBytes(color, pixel, cache) {
 }
 /**
 * Paints `marks` on a webgl `canvas`, from the view box of `width`×`height` to
-* the pixels of the canvas: a fan per polygon, a fan of 12 segments per
+* the pixels of the canvas: a polygon ear by ear, a fan of 12 segments per
 * circle, in paint order and without a depth test, the color of each as bytes.
 */
 function paintGL(canvas, marks, width, height, color) {
@@ -961,23 +1022,47 @@ const ringOf = (c, r) => Array.from({ length: 12 }, (_, i) => ({
 	x: c.x + r * Math.cos(i / 12 * 2 * Math.PI),
 	y: c.y + r * Math.sin(i / 12 * 2 * Math.PI)
 }));
-/** The triangles of `mark` as view-box points: a fan per polygon, a fan of 12 segments per circle. */
+/** The triangles of `mark` as view-box points: its polygon ear by ear, a fan of 12 segments per circle. */
 function trianglesOf(mark) {
 	const { points, r } = mark;
-	if (r !== void 0) {
-		const ring = ringOf(points[0], r);
-		return ring.flatMap((p, i) => [
-			points[0],
-			p,
-			ring[(i + 1) % 12]
-		]);
-	}
-	return points.slice(1, -1).flatMap((p, i) => [
+	if (r === void 0) return earsOf(points);
+	const ring = ringOf(points[0], r);
+	return ring.flatMap((p, i) => [
 		points[0],
 		p,
-		points[i + 2]
+		ring[(i + 1) % 12]
 	]);
 }
+/** Twice the signed area of the triangle `a`, `b`, `c`: its sign tells which way it turns, 0 on a line. */
+const turn = (a, b, c) => (b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x);
+/**
+* The triangles of a polygon, cut off ear by ear, so a concave one - the
+* front of a ribbon - fills as on the canvas, where a fan would spill over
+* its dents. An ear is a corner that turns the way of the polygon, or not at
+* all, with no other corner inside it; a simple polygon always has one. One
+* that crosses itself may have none, and then loses its first corner.
+*/
+function earsOf(points) {
+	const left = [...points];
+	const way = Math.sign(left.reduce((sum, p, i) => sum + turn(left[0], p, left[i + 1] ?? p), 0));
+	const triangles = [];
+	while (left.length > 3) {
+		const corner = (i) => [
+			left.at(i - 1),
+			left[i],
+			left[(i + 1) % left.length]
+		];
+		const ear = left.findIndex((_, i) => {
+			const [a, b, c] = corner(i);
+			if (way * turn(a, b, c) < 0) return false;
+			return !left.some((p) => way * turn(a, b, p) > 0 && way * turn(b, c, p) > 0 && way * turn(c, a, p) > 0);
+		});
+		const i = Math.max(0, ear);
+		triangles.push(...corner(i));
+		left.splice(i, 1);
+	}
+	return [...triangles, ...left];
+}
 /** The outline of `mark` as view-box points: its polygon, or the ring of its circle. */
 const outlineOf = (mark) => mark.r === void 0 ? mark.points : ringOf(mark.points[0], mark.r);
 const programs = /* @__PURE__ */ new WeakMap();
@@ -1170,15 +1255,14 @@ ${colorConfig.map(([key, item]) => {
 }
 `)].join("\n") } });
 }
-function ChartTooltip3D({ tooltip, width, height }) {
+function ChartTooltip3D({ tip }) {
+	const { tooltip, ref, place } = tip;
+	React.useLayoutEffect(place, [tooltip, place]);
 	if (!tooltip) return null;
 	return /* @__PURE__ */ jsxs("div", {
+		ref,
 		"data-slot": "chart-3d-tooltip",
-		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}%`
-		},
+		className: "pointer-events-none absolute z-10 grid w-max min-w-32 gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl motion-safe:transition-[translate]",
 		children: [tooltip.title && /* @__PURE__ */ jsx("div", {
 			className: "font-medium",
 			children: tooltip.title
@@ -1706,18 +1790,36 @@ function faded(color, opacity) {
 	const percent = Math.round(opacity * 100);
 	return percent >= 100 ? color : `color-mix(in oklab, ${color} ${percent}%, transparent)`;
 }
-/** 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
-	});
+/**
+* The entries of `data` and their series, for a chart that lays the entries
+* out along x and the series along z, as the bar and the area chart do. The
+* name of every entry comes from its `index` field, the series are `keys` or
+* the keys of the config, and the `target` of every cell is keyed by the name
+* of its entry and its series, so it follows its entry when the data
+* reorders; a value that is not a number stands as 0. Each glides by name:
+* `values` from 0, `rows` - the place of every entry - to where it stands, and
+* `presence` from 0 to 1 as an entry comes and back as it goes, the gone ones
+* still among them. `labels` name the ticks: the entry at a tick of x, through
+* `format.x` - a tick of a gone entry fades out unnamed - and the series at a
+* tick of z.
+*/
+function useSeries({ data, index, keys, format = {} }) {
+	const { config } = useChart3D();
+	const series = keys ?? Object.keys(config);
+	const names = data.map((d) => String(d[index] ?? ""));
+	const target = Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${names[i]}-${key}`, Number(d[key]) || 0])));
+	const labels = {
+		x: (i) => (format.x ?? String)(names[i] ?? ""),
+		y: format.y,
+		z: (j) => config[series[j]]?.label ?? series[j]
+	};
 	return {
-		x: sum.x / points.length,
-		y: sum.y / points.length
+		series,
+		target,
+		values: useTween(target, 0),
+		rows: useTween(Object.fromEntries(names.map((name, i) => [name, i]))),
+		presence: useTween(Object.fromEntries(names.map((name) => [name, 1])), 0),
+		labels
 	};
 }
 /** The marks of a cube: its faces that look at the camera, shaded in `color`, each with `tooltip` on hover. */
@@ -1729,20 +1831,214 @@ function cubeMarks(id, faces, color, tooltip) {
 		tooltip
 	}));
 }
+// registry/new-york/ui/area-chart-3d.tsx
+const RIBBON = 2 / 3;
+/**
+* Areas pushed back into ribbons: the entries of `data` along x, one ribbon
+* per series along z, the area under its line reaching down to the floor of
+* the box. The series are the keys of the chart config unless `keys` names
+* them.
+*/
+function AreaChart3D({ data, index, keys, format = {}, titles }) {
+	const { config, camera } = useChart3D();
+	const { series, target, values, rows, presence, labels } = useSeries({
+		data,
+		index,
+		keys,
+		format
+	});
+	const spec = useTweenAxes(areaAxes(data.length, series.length, Object.values(target)));
+	const depth = useTween({ depth: Math.min(1, Math.max(.25, series.length / 6)) }).depth;
+	const world = worldBox(spec, depth);
+	const polygons = intoWorld(polygons3D().camera(camera), world);
+	const ends = [spec.x.domain[0] + .5, spec.x.domain[1] - .5];
+	const toward = Math.sign(camera.viewDirection().x);
+	const marks = series.flatMap((key, j) => {
+		const line = linePoints(rows, values, presence, key, ends);
+		if (!line.length) return [];
+		const z = [j - RIBBON / 2, j + RIBBON / 2];
+		return [{
+			key,
+			line,
+			faces: ribbonFaces(polygons, line, spec.y.domain[0], z)
+		}];
+	}).sort((a, b) => sort(a.faces[4], b.faces[4])).flatMap(({ key, line, faces }) => ribbonMarks(key, painted(faces, toward), line, config[key]?.label ?? key, format.x ?? String));
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Axes3D, {
+		spec,
+		world,
+		titles,
+		format: labels
+	}), /* @__PURE__ */ jsx(Marks3D, { marks })] });
+}
+/**
+* The points of the line of the series `key`, in order along x: every entry,
+* the ones still gliding away among them, at its gliding row and value. An
+* entry that comes or goes unfolds from the point before it - the one after
+* it, at the start of the line - and folds back into it, as far as its
+* `presence`, so the ribbon opens and closes without a step. Its value comes
+* from nothing as its presence grows - the two glide in step - so the part of
+* its neighbour it has not yet left is added: the point heads straight from
+* the neighbour to its own, never down towards the floor. Every
+* point stays within the gliding `ends` of the x axis, so a line with no
+* neighbour to unfold from - one that was empty - grows inside the box
+* instead of standing beyond its walls. A point only one of the tweens still
+* knows is on its way out and stays unseen.
+*/
+function linePoints(rows, values, presence, key, [lo, hi]) {
+	const own = Object.entries(rows).sort(([, a], [, b]) => a - b).flatMap(([name, x]) => {
+		const value = values[`${name}-${key}`];
+		return value === void 0 ? [] : [{
+			name,
+			x,
+			value,
+			seen: presence[name]
+		}];
+	});
+	let anchor = own.find((p) => p.seen === 1);
+	return own.map((p) => {
+		if (p.seen === 1) anchor = p;
+		const { x } = anchor ?? p;
+		return {
+			name: p.name,
+			x: Math.min(hi, Math.max(lo, x + p.seen * (p.x - x))),
+			value: p.value + (1 - p.seen) * (anchor?.value ?? 0)
+		};
+	}).sort((a, b) => a.x - b.x);
+}
+/**
+* The faces of the ribbon of `line`, projected: the area under the line,
+* down to `floor`, pushed back from `z[0]` to `z[1]`. Each is wound
+* counter-clockwise as seen from outside, so `ccw` tells whether it faces the
+* camera. The first five lie on its bounding box - the front and the back,
+* one polygon each however many points the line has, the two ends and the
+* bottom - the rest are its top, one quad per segment of the line.
+*/
+function ribbonFaces(polygons, line, floor, [back, front]) {
+	const on = (p, z) => ({
+		x: p.x,
+		y: p.value,
+		z
+	});
+	const under = (p, z) => ({
+		x: p.x,
+		y: floor,
+		z
+	});
+	const face = (name, points, segment = -1) => Object.assign(points, {
+		face: name,
+		segment
+	});
+	const [a, o] = [line[0], line[line.length - 1]];
+	return polygons.data([
+		face("front", [
+			on(a, front),
+			under(a, front),
+			under(o, front),
+			...line.slice(1).reverse().map((p) => on(p, front))
+		]),
+		face("back", [
+			...line.map((p) => on(p, back)),
+			under(o, back),
+			under(a, back)
+		]),
+		face("left", [
+			on(a, back),
+			under(a, back),
+			under(a, front),
+			on(a, front)
+		]),
+		face("right", [
+			on(o, front),
+			under(o, front),
+			under(o, back),
+			on(o, back)
+		]),
+		face("bottom", [
+			under(a, front),
+			under(a, back),
+			under(o, back),
+			under(o, front)
+		]),
+		...line.slice(1).map((p, i) => face("top", [
+			on(line[i], front),
+			on(p, front),
+			on(p, back),
+			on(line[i], back)
+		], i))
+	]);
+}
+/**
+* The faces of a ribbon that face the camera, in paint order. Every segment
+* of the top is a slab, and the planes x = const separate them: the top is
+* painted from the end of the ribbon away from the camera, which `toward`,
+* the sign of x in the view direction, names. The faces of the bounding box
+* come last: the ribbon lies wholly behind each of them.
+*/
+function painted(faces, toward) {
+	const shown = faces.filter((f) => f.ccw);
+	return [...shown.filter((f) => f.face === "top").sort((a, b) => toward * (a.segment - b.segment)), ...shown.filter((f) => f.face !== "top")];
+}
+/**
+* The marks of one ribbon, shaded in the color of its series. Each face is a
+* group of its own, so hovering highlights the face under the pointer alone.
+* A segment of the top is keyed by the entry it starts at, so it keeps its
+* mark when entries come or go before it. Every face names the series; a
+* segment of the top tells the values at its two ends.
+*/
+function ribbonMarks(key, faces, line, label, name) {
+	const color = `var(--color-${key})`;
+	const spans = (f) => f.face === "top" ? [line[f.segment], line[f.segment + 1]] : [];
+	return faces.map((f) => {
+		const id = f.face === "top" ? `${key}-top-${line[f.segment].name}` : `${key}-${f.face}`;
+		return {
+			key: id,
+			points: f.map((p) => p.projected),
+			fill: shade(f, color),
+			groups: [id],
+			tooltip: {
+				title: label,
+				items: spans(f).map((p) => ({
+					label: name(p.name),
+					value: p.value,
+					color
+				}))
+			}
+		};
+	});
+}
+/**
+* The axes of an area chart: the entries along x, with half a row of room
+* between the first and the last and the walls, a row per series along z.
+* A line has many entries, so x ticks about ten of them, not every one.
+*/
+function areaAxes(entries, series, values) {
+	const every = entries ? ticks(0, entries - 1, 10).filter(Number.isInteger) : [];
+	return {
+		x: pad({
+			domain: [0, Math.max(0, entries - 1)],
+			ticks: every
+		}, 1),
+		y: axis(Math.min(0, ...values), Math.max(0, ...values)),
+		z: pad({
+			domain: [0, Math.max(0, series - 1)],
+			ticks: range(series)
+		}, 1)
+	};
+}
 // 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 }) {
+function BarChart3D({ data, index, keys, barSize = .6, format, titles }) {
 	const { config, camera } = useChart3D();
-	const series = keys ?? Object.keys(config);
-	const names = data.map((d) => String(d[index] ?? ""));
-	const target = barValues(names, data, series);
-	const values = useTween(target, 0);
-	const rows = useTween(Object.fromEntries(names.map((name, i) => [name, i])));
-	const opacity = useTween(Object.fromEntries(names.map((name) => [name, 1])), 0);
+	const { series, target, values, rows, presence, labels } = useSeries({
+		data,
+		index,
+		keys,
+		format
+	});
 	const cells = barCells(rows, series, values);
 	const box = barBox(data.length, series.length, Object.values(target));
 	const spec = useTweenAxes(box.spec);
@@ -1753,11 +2049,7 @@ function BarChart3D({ data, index, keys, barSize = .6, format = {}, titles }) {
 		spec,
 		world,
 		titles,
-		format: {
-			x: (i) => (format.x ?? String)(String(data[i]?.[index] ?? "")),
-			y: format.y,
-			z: (j) => config[series[j]]?.label ?? series[j]
-		}
+		format: labels
 	}), /* @__PURE__ */ jsx(Marks3D, { marks: bars.flatMap((bar) => barMarks({
 		id: `${bar.name}-${bar.key}`,
 		faces: bar.faces,
@@ -1765,7 +2057,7 @@ function BarChart3D({ data, index, keys, barSize = .6, format = {}, titles }) {
 		title: bar.name,
 		label: config[bar.key]?.label ?? bar.key,
 		value: bar.value,
-		opacity: opacity[bar.name]
+		opacity: presence[bar.name]
 	})) })] });
 }
 /** The cubes of the cells, projected by `camera` and painted back to front by their footprint, as the bars stand on one floor. */
@@ -1794,15 +2086,6 @@ function barCells(rows, series, values) {
 	}));
 }
 /**
-* The value of every cell of the chart, keyed as its mark: the name of its
-* entry along x and the series `key` along z, standing as 0 where the entry
-* holds none. Keyed by name, not place, so a bar follows its entry when the
-* data reorders.
-*/
-function barValues(names, data, series) {
-	return Object.fromEntries(data.flatMap((d, i) => series.map((key) => [`${names[i]}-${key}`, Number(d[key]) || 0])));
-}
-/**
 * The box of a bar chart: a row per entry along x, a row per series along z,
 * with half a cell of room between the outer rows and the walls.
 */
@@ -1851,7 +2134,6 @@ function barCorners(world, x, z, value, size) {
 /** The marks of one bar: the faces that look at the camera, shaded and faded to `opacity`, each with its entry and value on hover. Its group is the bar alone, so hovering highlights one bar, not its series. */
 function barMarks({ id, faces, color, title, label, value, opacity }) {
 	return cubeMarks(id, faces, color, {
-		at: center(faces.find((face) => face.face === "top")),
 		title,
 		items: [{
 			label,
@@ -1889,7 +2171,6 @@ function ScatterChart3D({ data, x, y, z, id, series, radius = 4, format, titles
 		groups: [p.name],
 		stroke: faded("var(--background)", opacity[p.name]),
 		tooltip: {
-			at: p.projected,
 			title: series ? config[key(p.name)]?.label ?? key(p.name) : void 0,
 			items: [
 				"x",
@@ -2055,13 +2336,10 @@ function quadMark(quad, fade, ramp, title) {
 		points: quad.map((p) => p.projected),
 		fill: seen < 1 ? `color-mix(in srgb, ${shaded} ${Math.round(seen * 100)}%, transparent)` : shaded,
 		groups: [quad.plane],
-		tooltip: {
-			at: center(quad),
-			items: [{
-				label: title ?? "value",
-				value: height
-			}]
-		}
+		tooltip: { items: [{
+			label: title ?? "value",
+			value: height
+		}] }
 	};
 }
 /** The height of every cell, keyed by its row and column, gliding into new data. */
@@ -2083,6 +2361,6 @@ function gridHeights(tweened, floor) {
 	}
 	return Array.from({ length: rows }, (_, r) => Array.from({ length: columns }, (_, c) => tweened[`${r}-${c}`] ?? floor));
 }
-export { Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, ScatterChart3D, SurfaceChart3D, axis, center, cubeMarks, faded, intoWorld, linear, pad, shade, useChart3D, useTween, useTweenAxes, worldBox };
+export { AreaChart3D, Axes3D, BarChart3D, ChartContainer3D, ChartLegend3D, Labels3D, Marks3D, ScatterChart3D, SurfaceChart3D, axis, cubeMarks, faded, intoWorld, linear, pad, shade, useChart3D, useSeries, useTween, useTweenAxes, worldBox };
 
 //# sourceMappingURL=index.js.map