resolvcharts 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -463,12 +463,12 @@ let smScratch = /* @__PURE__ */ new Float64Array(0);
 * Monotone cubic path (Fritsch–Carlson tangents) — never overshoots data.
 * `pts` is interleaved [x0, y0, x1, y1, ...] with `n` points.
 */
-function smoothPath(ctx, pts, n) {
+function smoothPath(ctx, pts, n, connect = false) {
 	if (n < 3) {
 		for (let i = 0; i < n; i++) {
 			const x = pts[2 * i];
 			const y = pts[2 * i + 1];
-			if (i === 0) ctx.moveTo(x, y);
+			if (i === 0 && !connect) ctx.moveTo(x, y);
 			else ctx.lineTo(x, y);
 		}
 		return;
@@ -499,7 +499,8 @@ function smoothPath(ctx, pts, n) {
 			if (Math.abs(ti1) > lim) tang[i + 1] = Math.sign(ti1) * lim;
 		}
 	}
-	ctx.moveTo(pts[0], pts[1]);
+	if (connect) ctx.lineTo(pts[0], pts[1]);
+	else ctx.moveTo(pts[0], pts[1]);
 	for (let i = 0; i < segs; i++) {
 		const x0 = pts[2 * i];
 		const x1 = pts[2 * (i + 1)];
@@ -509,6 +510,27 @@ function smoothPath(ctx, pts, n) {
 		ctx.bezierCurveTo(x0 + h, y0 + h * tang[i], x1 - h, y1 - h * tang[i + 1], x1, y1);
 	}
 }
+/**
+* Trace `n` interleaved [x, y] pixel points into `path` honoring `curve`
+* (linear / step / smooth). `connect` continues the current subpath with a
+* lineTo instead of starting a new one — used for closed band shapes.
+*/
+function traceCurve(path, pts, n, curve, connect = false) {
+	if (n === 0) return;
+	const join = (x, y) => connect ? path.lineTo(x, y) : path.moveTo(x, y);
+	if (curve === "step") {
+		join(pts[0], pts[1]);
+		for (let i = 1; i < n; i++) {
+			const x = pts[2 * i];
+			path.lineTo(x, pts[2 * i - 1]);
+			path.lineTo(x, pts[2 * i + 1]);
+		}
+	} else if (curve === "smooth") smoothPath(path, pts, n, connect);
+	else {
+		join(pts[0], pts[1]);
+		for (let i = 1; i < n; i++) path.lineTo(pts[2 * i], pts[2 * i + 1]);
+	}
+}
 //#endregion
 //#region src/charts/line.ts
 /** fraction of the tween the trailing edge lags behind the leading point */
@@ -537,19 +559,7 @@ function buildPath(r, s, yFallback) {
 		lastX: 0,
 		lastY: 0
 	};
-	const curve = r.opts.curve ?? "linear";
-	if (curve === "step") {
-		path.moveTo(pts[0], pts[1]);
-		for (let i = 1; i < dn; i++) {
-			const x = pts[2 * i];
-			path.lineTo(x, pts[2 * i - 1]);
-			path.lineTo(x, pts[2 * i + 1]);
-		}
-	} else if (curve === "smooth") smoothPath(path, pts, dn);
-	else {
-		path.moveTo(pts[0], pts[1]);
-		for (let i = 1; i < dn; i++) path.lineTo(pts[2 * i], pts[2 * i + 1]);
-	}
+	traceCurve(path, pts, dn, r.opts.curve ?? "linear");
 	return {
 		path,
 		firstX: pts[0],
@@ -676,6 +686,72 @@ function renderBaseline(r) {
 	ctx.setLineDash([]);
 }
 //#endregion
+//#region src/charts/bubble.ts
+const MIN_R = 3;
+const MAX_R = 16;
+/**
+* Bubble chart: scatter points sized by each series' `r` channel, mapped
+* linearly to [MIN_R, MAX_R] px across the dataset's radius extent.
+*/
+function renderBubble(r) {
+	if (!isXY(r.data)) return;
+	const d = r.data;
+	const ctx = r.ctx;
+	const t = r.t;
+	const lerp = t < 1;
+	const fallback = r.yScale.domain[0];
+	let lo = Infinity;
+	let hi = -Infinity;
+	for (const s of d.series) {
+		const rr = s.r;
+		if (!rr) continue;
+		for (let i = 0; i < rr.length; i++) {
+			const v = rr[i];
+			if (v < lo) lo = v;
+			if (v > hi) hi = v;
+		}
+	}
+	if (lo === Infinity) {
+		lo = 0;
+		hi = 1;
+	}
+	const span = hi - lo || 1;
+	const grow = lerp ? t : 1;
+	const rad = (v) => (MIN_R + (v - lo) / span * 13) * grow;
+	const xMin = r.plot.x - MAX_R;
+	const xMax = r.plot.x + r.plot.w + MAX_R;
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(r.plot.x, r.plot.y, r.plot.w, r.plot.h);
+	ctx.clip();
+	for (const s of d.series) {
+		const y = s.y;
+		const prev = s.prevY;
+		const rr = s.r;
+		ctx.fillStyle = withAlpha(s.color, .45);
+		ctx.strokeStyle = s.color;
+		ctx.lineWidth = 1.5;
+		ctx.beginPath();
+		for (let i = 0; i < d.sortedX.length; i++) {
+			const x = r.xScale(d.sortedX[i]);
+			if (x < xMin || x > xMax) continue;
+			let yv = y[i];
+			if (lerp) {
+				const p = prev ? prev[i] : fallback;
+				yv = p + (yv - p) * t;
+			}
+			const yp = r.yScale(yv);
+			const pr = rad(rr ? rr[i] : lo + span / 2);
+			if (pr <= 0) continue;
+			ctx.moveTo(x + pr, yp);
+			ctx.arc(x, yp, pr, 0, Math.PI * 2);
+		}
+		ctx.fill();
+		ctx.stroke();
+	}
+	ctx.restore();
+}
+//#endregion
 //#region src/charts/candle.ts
 function renderCandles(r, ohlcStyle) {
 	if (r.data.kind !== "ohlc") return;
@@ -850,20 +926,7 @@ function hitCandle(r, px) {
 let ovScratch = /* @__PURE__ */ new Float64Array(0);
 function overlayPath(r, pts, n) {
 	const path = new Path2D();
-	if (n === 0) return path;
-	const curve = r.opts.curve ?? "linear";
-	if (curve === "step") {
-		path.moveTo(pts[0], pts[1]);
-		for (let i = 1; i < n; i++) {
-			const x = pts[2 * i];
-			path.lineTo(x, pts[2 * i - 1]);
-			path.lineTo(x, pts[2 * i + 1]);
-		}
-	} else if (curve === "smooth") smoothPath(path, pts, n);
-	else {
-		path.moveTo(pts[0], pts[1]);
-		for (let i = 1; i < n; i++) path.lineTo(pts[2 * i], pts[2 * i + 1]);
-	}
+	traceCurve(path, pts, n, r.opts.curve ?? "linear");
 	return path;
 }
 function renderCombo(r) {
@@ -1016,14 +1079,16 @@ function formatSI(v) {
 //#region src/charts/donut.ts
 const INNER = .65;
 const GAP = .015;
-const START = -Math.PI / 2;
+const START$1 = -Math.PI / 2;
+/** donut keeps a center hole; pie fills to the middle */
+const innerRatio = (r) => r.opts.type === "pie" ? 0 : INNER;
 function donutGeometry(r, d, t) {
 	const cx = r.plot.x + r.plot.w / 2;
 	const cy = r.plot.y + r.plot.h / 2;
 	const rOuter = Math.max(1, Math.min(r.plot.w, r.plot.h) / 2);
-	const rInner = rOuter * INNER;
+	const rInner = rOuter * innerRatio(r);
 	const angles = [];
-	let a = START;
+	let a = START$1;
 	const sweep = Math.PI * 2 * Math.min(1, Math.max(0, t));
 	for (const s of d.slices) {
 		const frac = d.total > 0 ? s.value / d.total : 0;
@@ -1056,12 +1121,13 @@ function renderDonut(r) {
 		if (a1 <= a0) continue;
 		ctx.beginPath();
 		ctx.arc(geo.cx, geo.cy, geo.rOuter, a0, a1);
-		ctx.arc(geo.cx, geo.cy, geo.rInner, a1, a0, true);
+		if (geo.rInner > 0) ctx.arc(geo.cx, geo.cy, geo.rInner, a1, a0, true);
+		else ctx.lineTo(geo.cx, geo.cy);
 		ctx.closePath();
 		ctx.fillStyle = s.color;
 		ctx.fill();
 	}
-	if (d.slices.length > 0 && r.t > .5) {
+	if (r.opts.type !== "pie" && d.slices.length > 0 && r.t > .5) {
 		ctx.fillStyle = r.theme.text;
 		ctx.font = `600 20px ${r.theme.fontFamily}`;
 		ctx.textAlign = "center";
@@ -1078,8 +1144,8 @@ function hitDonut(r, px, py) {
 	const dist = Math.hypot(dx, dy);
 	if (dist < geo.rInner || dist > geo.rOuter) return null;
 	let angle = Math.atan2(dy, dx);
-	while (angle < START) angle += Math.PI * 2;
-	while (angle >= START + Math.PI * 2) angle -= Math.PI * 2;
+	while (angle < START$1) angle += Math.PI * 2;
+	while (angle >= START$1 + Math.PI * 2) angle -= Math.PI * 2;
 	for (let i = 0; i < geo.angles.length; i++) {
 		const an = geo.angles[i];
 		const s = d.slices[i];
@@ -1098,6 +1164,389 @@ function hitDonut(r, px, py) {
 	return null;
 }
 //#endregion
+//#region src/core/theme.ts
+const FONT = "Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif";
+/** Built-in light theme.
+* @category Theming
+*/
+const lightTheme = {
+	bg: "#ffffff",
+	text: "#1f1f1f",
+	textMuted: "#8a8a8a",
+	grid: "rgba(0,0,0,0.07)",
+	axisBaseline: "rgba(0,0,0,0.15)",
+	crosshair: "rgba(0,0,0,0.25)",
+	series: ["#0070f3"],
+	contextGray: "#b0b0b0",
+	up: "#0e9f6e",
+	down: "#e5484d",
+	tooltipBg: "#ffffff",
+	tooltipText: "#1f1f1f",
+	tooltipMuted: "#8a8a8a",
+	tooltipBorder: "rgba(0,0,0,0.08)",
+	tooltipShadow: "0 4px 14px rgba(0,0,0,0.08)",
+	fontFamily: FONT
+};
+/** Built-in dark theme.
+* @category Theming
+*/
+const darkTheme = {
+	bg: "#0a0a0a",
+	text: "#ededed",
+	textMuted: "#8a8a8a",
+	grid: "rgba(255,255,255,0.07)",
+	axisBaseline: "rgba(255,255,255,0.18)",
+	crosshair: "rgba(255,255,255,0.3)",
+	series: ["#3b9dff"],
+	contextGray: "#5c5c5c",
+	up: "#34c98e",
+	down: "#f2555a",
+	tooltipBg: "#161616",
+	tooltipText: "#ededed",
+	tooltipMuted: "#8a8a8a",
+	tooltipBorder: "rgba(255,255,255,0.1)",
+	tooltipShadow: "0 4px 14px rgba(0,0,0,0.4)",
+	fontFamily: FONT
+};
+const categoricalLight = [
+	"#0070f3",
+	"#0e9f6e",
+	"#8e4ec6",
+	"#f5a623"
+];
+const categoricalDark = [
+	"#3b9dff",
+	"#34c98e",
+	"#a97ef0",
+	"#f5b84d"
+];
+/** Merge a theme option (`"light" | "dark" | partial tokens`) into full {@link ThemeTokens}.
+* @category Theming
+*/
+function resolveTheme(opt, accent) {
+	const base = opt === "dark" ? {
+		...darkTheme,
+		series: [...categoricalDark]
+	} : opt === "light" || opt === void 0 ? {
+		...lightTheme,
+		series: [...categoricalLight]
+	} : {
+		...lightTheme,
+		series: [...categoricalLight],
+		...opt
+	};
+	if (accent) base.series[0] = accent;
+	return base;
+}
+function seriesColor(theme, index, explicit) {
+	if (explicit) return explicit;
+	return theme.series[index % theme.series.length];
+}
+//#endregion
+//#region src/charts/funnel.ts
+const ROW_GAP = 2;
+const LABEL_MIN_W = 72;
+/**
+* Funnel: one stage per `categories` entry using the first series' values.
+* Each stage is a trapezoid whose bottom edge matches the next stage's top
+* width — the classic funnel silhouette.
+*/
+function stages(r, d, t) {
+	const s = d.series[0];
+	if (!s) return [];
+	const n = d.categories.length;
+	let max = 0;
+	for (let i = 0; i < s.values.length; i++) {
+		const v = s.values[i];
+		if (v > max) max = v;
+	}
+	max ||= 1;
+	const rowH = r.plot.h / Math.max(1, n);
+	const out = [];
+	for (let i = 0; i < n; i++) {
+		const cur = s.values[i] ?? 0;
+		const prev = s.prevValues?.[i] ?? 0;
+		const v = t < 1 ? prev + (cur - prev) * t : cur;
+		const cur1 = s.values[i + 1] ?? cur;
+		const prev1 = s.prevValues?.[i + 1] ?? 0;
+		const v1 = i + 1 < n ? t < 1 ? prev1 + (cur1 - prev1) * t : cur1 : v;
+		out.push({
+			cat: d.categories[i] ?? "",
+			value: cur,
+			top: r.plot.y + rowH * i,
+			bot: r.plot.y + rowH * (i + 1) - ROW_GAP,
+			w0: Math.max(0, v) / max * r.plot.w,
+			w1: Math.max(0, v1) / max * r.plot.w,
+			color: seriesColor(r.theme, i, void 0)
+		});
+	}
+	return out;
+}
+function stageRect(r, st) {
+	const cx = r.plot.x + r.plot.w / 2;
+	const w = Math.max(st.w0, st.w1);
+	return {
+		x: cx - w / 2,
+		y: st.top,
+		w,
+		h: st.bot - st.top
+	};
+}
+function renderFunnel(r) {
+	if (r.data.kind !== "category") return;
+	const d = r.data;
+	const ctx = r.ctx;
+	const cx = r.plot.x + r.plot.w / 2;
+	for (const st of stages(r, d, r.t)) {
+		ctx.beginPath();
+		ctx.moveTo(cx - st.w0 / 2, st.top);
+		ctx.lineTo(cx + st.w0 / 2, st.top);
+		ctx.lineTo(cx + st.w1 / 2, st.bot);
+		ctx.lineTo(cx - st.w1 / 2, st.bot);
+		ctx.closePath();
+		ctx.fillStyle = st.color;
+		ctx.fill();
+		const label = `${st.cat} · ${formatSI(st.value)}`;
+		ctx.font = `11px ${r.theme.fontFamily}`;
+		ctx.textBaseline = "middle";
+		if (Math.min(st.w0, st.w1) >= LABEL_MIN_W) {
+			ctx.fillStyle = "#ffffff";
+			ctx.textAlign = "center";
+			ctx.fillText(label, cx, (st.top + st.bot) / 2);
+		} else {
+			ctx.fillStyle = r.theme.textMuted;
+			ctx.textAlign = "left";
+			ctx.fillText(label, cx + Math.max(st.w0, st.w1) / 2 + 8, (st.top + st.bot) / 2);
+		}
+	}
+}
+function hitFunnel(r, px, py) {
+	if (r.data.kind !== "category") return null;
+	const d = r.data;
+	const s = d.series[0];
+	if (!s) return null;
+	const cx = r.plot.x + r.plot.w / 2;
+	for (const st of stages(r, d, 1)) {
+		if (py < st.top || py > st.bot) continue;
+		const frac = st.bot - st.top > 0 ? (py - st.top) / (st.bot - st.top) : 0;
+		const w = st.w0 + (st.w1 - st.w0) * frac;
+		if (Math.abs(px - cx) > w / 2 + 4) continue;
+		return {
+			kind: "bar",
+			category: st.cat,
+			seriesIndex: 0,
+			label: s.label,
+			color: st.color,
+			value: st.value,
+			px: cx,
+			py,
+			rect: stageRect(r, st)
+		};
+	}
+	return null;
+}
+//#endregion
+//#region src/charts/radar.ts
+const RINGS = 4;
+const LABEL_PAD = 16;
+const MIN_AXES = 3;
+const START = -Math.PI / 2;
+function radarGeo(r, d) {
+	const cx = r.plot.x + r.plot.w / 2;
+	const cy = r.plot.y + r.plot.h / 2;
+	const radius = Math.max(1, Math.min(r.plot.w, r.plot.h) / 2 - LABEL_PAD);
+	let max = 0;
+	for (const s of d.series) for (let i = 0; i < s.values.length; i++) {
+		const v = s.values[i];
+		if (v > max) max = v;
+	}
+	return {
+		cx,
+		cy,
+		radius,
+		max: max || 1
+	};
+}
+const angleOf = (i, n) => START + i / n * Math.PI * 2;
+function renderRadar(r) {
+	if (r.data.kind !== "category") return;
+	const d = r.data;
+	const n = d.categories.length;
+	if (n < MIN_AXES) return;
+	const ctx = r.ctx;
+	const { cx, cy, radius, max } = radarGeo(r, d);
+	const animate = r.t < 1;
+	ctx.strokeStyle = r.theme.grid;
+	ctx.lineWidth = 1;
+	for (let ring = 1; ring <= RINGS; ring++) {
+		const rr = radius * ring / RINGS;
+		ctx.beginPath();
+		for (let i = 0; i <= n; i++) {
+			const a = angleOf(i % n, n);
+			const x = cx + Math.cos(a) * rr;
+			const y = cy + Math.sin(a) * rr;
+			if (i === 0) ctx.moveTo(x, y);
+			else ctx.lineTo(x, y);
+		}
+		ctx.stroke();
+	}
+	ctx.beginPath();
+	for (let i = 0; i < n; i++) {
+		const a = angleOf(i, n);
+		ctx.moveTo(cx, cy);
+		ctx.lineTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius);
+	}
+	ctx.stroke();
+	for (const s of d.series) {
+		ctx.beginPath();
+		for (let i = 0; i < n; i++) {
+			const cur = s.values[i] ?? 0;
+			const prev = s.prevValues?.[i] ?? 0;
+			const v = animate ? prev + (cur - prev) * r.t : cur;
+			const rr = Math.max(0, v) / max * radius;
+			const a = angleOf(i, n);
+			const x = cx + Math.cos(a) * rr;
+			const y = cy + Math.sin(a) * rr;
+			if (i === 0) ctx.moveTo(x, y);
+			else ctx.lineTo(x, y);
+		}
+		ctx.closePath();
+		ctx.fillStyle = withAlpha(s.color, .16);
+		ctx.fill();
+		ctx.strokeStyle = s.color;
+		ctx.lineWidth = 2;
+		ctx.lineJoin = "round";
+		ctx.stroke();
+		ctx.fillStyle = s.color;
+		ctx.beginPath();
+		for (let i = 0; i < n; i++) {
+			const cur = s.values[i] ?? 0;
+			const prev = s.prevValues?.[i] ?? 0;
+			const v = animate ? prev + (cur - prev) * r.t : cur;
+			const rr = Math.max(0, v) / max * radius;
+			const a = angleOf(i, n);
+			const x = cx + Math.cos(a) * rr;
+			const y = cy + Math.sin(a) * rr;
+			ctx.moveTo(x + 2.5, y);
+			ctx.arc(x, y, 2.5, 0, Math.PI * 2);
+		}
+		ctx.fill();
+	}
+	ctx.fillStyle = r.theme.textMuted;
+	ctx.font = `11px ${r.theme.fontFamily}`;
+	for (let i = 0; i < n; i++) {
+		const a = angleOf(i, n);
+		const lx = cx + Math.cos(a) * (radius + LABEL_PAD - 4);
+		const ly = cy + Math.sin(a) * (radius + LABEL_PAD - 4);
+		ctx.textAlign = Math.cos(a) > .3 ? "left" : Math.cos(a) < -.3 ? "right" : "center";
+		ctx.textBaseline = Math.sin(a) > .3 ? "top" : Math.sin(a) < -.3 ? "bottom" : "middle";
+		ctx.fillText(d.categories[i] ?? "", lx, ly);
+	}
+}
+function hitRadar(r, px, py) {
+	if (r.data.kind !== "category") return null;
+	const d = r.data;
+	const n = d.categories.length;
+	if (n < MIN_AXES) return null;
+	const { cx, cy, radius } = radarGeo(r, d);
+	const dx = px - cx;
+	const dy = py - cy;
+	if (Math.hypot(dx, dy) > radius + LABEL_PAD) return null;
+	let rel = Math.atan2(dy, dx) - START;
+	while (rel < 0) rel += Math.PI * 2;
+	while (rel >= Math.PI * 2) rel -= Math.PI * 2;
+	const i = Math.round(rel / (Math.PI * 2) * n) % n;
+	return {
+		kind: "point",
+		index: i,
+		x: i,
+		px,
+		py,
+		values: d.series.map((s) => ({
+			label: s.label,
+			color: s.color,
+			y: s.values[i] ?? 0
+		})),
+		title: d.categories[i] ?? ""
+	};
+}
+/** Hover accent: highlighted spoke + vertex dots (replaces the xy crosshair). */
+function drawRadarHover(r, info) {
+	if (r.data.kind !== "category" || info.kind !== "point") return;
+	const d = r.data;
+	const n = d.categories.length;
+	if (info.index < 0 || info.index >= n) return;
+	const o = r.backend.overlay;
+	const { cx, cy, radius, max } = radarGeo(r, d);
+	const a = angleOf(info.index, n);
+	o.strokeStyle = r.theme.crosshair;
+	o.lineWidth = 1;
+	o.beginPath();
+	o.moveTo(cx, cy);
+	o.lineTo(cx + Math.cos(a) * radius, cy + Math.sin(a) * radius);
+	o.stroke();
+	for (const s of d.series) {
+		const v = s.values[info.index] ?? 0;
+		const rr = Math.max(0, v) / max * radius;
+		o.fillStyle = s.color;
+		o.strokeStyle = r.theme.bg;
+		o.lineWidth = 2;
+		o.beginPath();
+		o.arc(cx + Math.cos(a) * rr, cy + Math.sin(a) * rr, 4, 0, Math.PI * 2);
+		o.fill();
+		o.stroke();
+	}
+}
+//#endregion
+//#region src/charts/rangearea.ts
+/** pooled scratch for the reversed lower edge — consumed within the call */
+let revScratch = /* @__PURE__ */ new Float64Array(0);
+/**
+* Range-area chart: a filled band between each series' `y` (lower edge) and
+* `y2` (upper edge) — confidence intervals, min/max envelopes. Series
+* without `y2` are skipped.
+*/
+function renderRangeArea(r) {
+	if (!isXY(r.data)) return;
+	const d = r.data;
+	const ctx = r.ctx;
+	const curve = r.opts.curve ?? "linear";
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(r.plot.x, r.plot.y, r.plot.w, r.plot.h);
+	ctx.clip();
+	for (const s of d.series) {
+		if (!s.y2) continue;
+		const hi = seriesPoints(r, {
+			y: s.y2,
+			prevY: s.prevY2
+		});
+		const lo = seriesPoints(r, s);
+		const n = Math.min(hi.length, lo.length) / 2;
+		if (n === 0) continue;
+		if (revScratch.length < n * 2) revScratch = new Float64Array(n * 2);
+		for (let i = 0; i < n; i++) {
+			revScratch[2 * i] = lo[2 * (n - 1 - i)];
+			revScratch[2 * i + 1] = lo[2 * (n - 1 - i) + 1];
+		}
+		const band = new Path2D();
+		traceCurve(band, hi, n, curve);
+		traceCurve(band, revScratch, n, curve, true);
+		band.closePath();
+		ctx.fillStyle = withAlpha(s.color, .2);
+		ctx.fill(band);
+		ctx.strokeStyle = s.color;
+		ctx.lineWidth = 1.5;
+		ctx.lineJoin = "round";
+		ctx.lineCap = "round";
+		const edges = new Path2D();
+		traceCurve(edges, hi, n, curve);
+		traceCurve(edges, lo, n, curve);
+		ctx.stroke(edges);
+	}
+	ctx.restore();
+}
+//#endregion
 //#region src/charts/scatter.ts
 function renderScatter(r) {
 	if (!isXY(r.data)) return;
@@ -1381,6 +1830,11 @@ function padDomain(min, max, includeZero = false) {
 	}
 	return [lo, hi];
 }
+/** @category Utilities
+* Pin domain ends — each defined bound overrides the fitted value. */
+function boundDomain(dom, min, max) {
+	return [min ?? dom[0], max ?? dom[1]];
+}
 //#endregion
 //#region src/core/scheduler.ts
 const raf = typeof requestAnimationFrame === "function" ? (cb) => requestAnimationFrame(cb) : (cb) => setTimeout(() => cb(Date.now()), 16);
@@ -1418,85 +1872,6 @@ var Scheduler = class {
 const sharedScheduler = new Scheduler();
 const easeOutCubic = (t) => 1 - (1 - t) ** 3;
 //#endregion
-//#region src/core/theme.ts
-const FONT = "Inter, system-ui, -apple-system, \"Segoe UI\", sans-serif";
-/** Built-in light theme.
-* @category Theming
-*/
-const lightTheme = {
-	bg: "#ffffff",
-	text: "#1f1f1f",
-	textMuted: "#8a8a8a",
-	grid: "rgba(0,0,0,0.07)",
-	axisBaseline: "rgba(0,0,0,0.15)",
-	crosshair: "rgba(0,0,0,0.25)",
-	series: ["#0070f3"],
-	contextGray: "#b0b0b0",
-	up: "#0e9f6e",
-	down: "#e5484d",
-	tooltipBg: "#ffffff",
-	tooltipText: "#1f1f1f",
-	tooltipMuted: "#8a8a8a",
-	tooltipBorder: "rgba(0,0,0,0.08)",
-	tooltipShadow: "0 4px 14px rgba(0,0,0,0.08)",
-	fontFamily: FONT
-};
-/** Built-in dark theme.
-* @category Theming
-*/
-const darkTheme = {
-	bg: "#0a0a0a",
-	text: "#ededed",
-	textMuted: "#8a8a8a",
-	grid: "rgba(255,255,255,0.07)",
-	axisBaseline: "rgba(255,255,255,0.18)",
-	crosshair: "rgba(255,255,255,0.3)",
-	series: ["#3b9dff"],
-	contextGray: "#5c5c5c",
-	up: "#34c98e",
-	down: "#f2555a",
-	tooltipBg: "#161616",
-	tooltipText: "#ededed",
-	tooltipMuted: "#8a8a8a",
-	tooltipBorder: "rgba(255,255,255,0.1)",
-	tooltipShadow: "0 4px 14px rgba(0,0,0,0.4)",
-	fontFamily: FONT
-};
-const categoricalLight = [
-	"#0070f3",
-	"#0e9f6e",
-	"#8e4ec6",
-	"#f5a623"
-];
-const categoricalDark = [
-	"#3b9dff",
-	"#34c98e",
-	"#a97ef0",
-	"#f5b84d"
-];
-/** Merge a theme option (`"light" | "dark" | partial tokens`) into full {@link ThemeTokens}.
-* @category Theming
-*/
-function resolveTheme(opt, accent) {
-	const base = opt === "dark" ? {
-		...darkTheme,
-		series: [...categoricalDark]
-	} : opt === "light" || opt === void 0 ? {
-		...lightTheme,
-		series: [...categoricalLight]
-	} : {
-		...lightTheme,
-		series: [...categoricalLight],
-		...opt
-	};
-	if (accent) base.series[0] = accent;
-	return base;
-}
-function seriesColor(theme, index, explicit) {
-	if (explicit) return explicit;
-	return theme.series[index % theme.series.length];
-}
-//#endregion
 //#region src/core/ticks.ts
 const STEPS = [
 	1,
@@ -1636,6 +2011,36 @@ const MODULES = {
 		axes: true,
 		defaultTooltip: true
 	},
+	bubble: {
+		render: renderBubble,
+		hit: (r, px) => hitXY(r, px),
+		axes: true,
+		defaultTooltip: true
+	},
+	rangearea: {
+		render: renderRangeArea,
+		hit: (r, px) => hitXY(r, px),
+		axes: true,
+		defaultTooltip: true
+	},
+	pie: {
+		render: renderDonut,
+		hit: hitDonut,
+		axes: false,
+		defaultTooltip: true
+	},
+	radar: {
+		render: renderRadar,
+		hit: hitRadar,
+		axes: false,
+		defaultTooltip: true
+	},
+	funnel: {
+		render: renderFunnel,
+		hit: hitFunnel,
+		axes: false,
+		defaultTooltip: true
+	},
 	bar: {
 		render: renderBar,
 		hit: hitBar,
@@ -1696,6 +2101,8 @@ const GPU_KIND = {
 };
 /** points retained beyond the window's left edge so they slide off-screen instead of vanishing mid-plot */
 const EDGE_KEEP = 3;
+/** default point count at which `renderer: "auto"` engages the GPU path */
+const GPU_THRESHOLD = 1e5;
 /** Chart instance. Create via {@link createChart}.
 * @category Charts
 */
@@ -1721,6 +2128,8 @@ var Chart = class {
 		this.destroyed = false;
 		this.pendingView = false;
 		this.gpu = null;
+		this.gpuInit = false;
+		this.dataRev = 0;
 		this.lastAppendAt = 0;
 		this.estInterval = 400;
 		this.onScroll = () => {
@@ -1783,7 +2192,35 @@ var Chart = class {
 		this.reduced = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 		if (options.tooltip ?? this.mod.defaultTooltip) this.tooltip = new Tooltip(el, this.theme);
 		this.data = this.normalize(options.data, null);
-		if (GPU_KIND[options.type] && (options.renderer === "webgpu" || options.renderer === "auto")) Promise.resolve().then(() => require("./series-J_5Z6dah.cjs")).then(({ GpuSeries }) => GpuSeries.create(options.gpu).then((g) => {
+		this.maybeInitGpu();
+		this.bindEvents();
+		const dom = this.layout();
+		this.view = {
+			x: [...dom.x],
+			y: [...dom.y]
+		};
+		this.viewTo = {
+			x: [...dom.x],
+			y: [...dom.y]
+		};
+		this.startAnimation(dom);
+	}
+	/**
+	* Lazily acquire the WebGPU backend. `"webgpu"` attaches unconditionally;
+	* `"auto"` waits until the xy point count crosses `gpuThreshold` — small
+	* charts never pay adapter/device acquisition.
+	*/
+	maybeInitGpu() {
+		if (this.gpu || this.gpuInit || this.destroyed) return;
+		if (!GPU_KIND[this.options.type]) return;
+		const r = this.options.renderer ?? "auto";
+		if (r !== "auto" && r !== "webgpu") return;
+		if (r === "auto") {
+			const d = this.data;
+			if ((d.kind === "xy" ? d.sortedX.length * Math.max(1, d.series.length) : 0) < (this.options.gpuThreshold ?? GPU_THRESHOLD)) return;
+		}
+		this.gpuInit = true;
+		Promise.resolve().then(() => require("./series-PmAjztEh.cjs")).then(({ GpuSeries }) => GpuSeries.create(this.options.gpu).then((g) => {
 			if (!g || this.destroyed) {
 				g?.destroy();
 				return;
@@ -1796,17 +2233,6 @@ var Chart = class {
 				return false;
 			});
 		}));
-		this.bindEvents();
-		const dom = this.layout();
-		this.view = {
-			x: [...dom.x],
-			y: [...dom.y]
-		};
-		this.viewTo = {
-			x: [...dom.x],
-			y: [...dom.y]
-		};
-		this.startAnimation(dom);
 	}
 	normalize(data, prev) {
 		const t = this.options.type;
@@ -1878,7 +2304,7 @@ var Chart = class {
 				bars
 			};
 		}
-		if (t === "donut") {
+		if (t === "donut" || t === "pie") {
 			const slices = data.slices.map((s, i) => ({
 				label: s.label,
 				value: s.value,
@@ -1890,7 +2316,7 @@ var Chart = class {
 				total: slices.reduce((a, s) => a + Math.max(0, s.value), 0)
 			};
 		}
-		if (t === "bar" || t === "combo") {
+		if (t === "bar" || t === "combo" || t === "radar" || t === "funnel") {
 			const d = data;
 			const prevSeries = prev?.kind === "category" ? prev.series : [];
 			return {
@@ -1922,15 +2348,22 @@ var Chart = class {
 			kind: "xy",
 			sortedX,
 			series: d.series.map((s, i) => {
-				const y = new Float64Array(n);
-				const src = s.y;
-				if (idx) for (let k = 0; k < n; k++) y[k] = src[idx[k]];
-				else for (let k = 0; k < n; k++) y[k] = src[k];
+				const chan = (src) => {
+					if (!src) return null;
+					const out = new Float64Array(n);
+					if (idx) for (let k = 0; k < n; k++) out[k] = src[idx[k]];
+					else for (let k = 0; k < n; k++) out[k] = src[k];
+					return out;
+				};
+				const y = chan(s.y) ?? new Float64Array(n);
 				return {
 					label: s.label ?? `Series ${i + 1}`,
 					color: seriesColor(this.theme, i, s.color),
 					y,
 					prevY: prevSeries[i]?.y ?? null,
+					r: chan(s.r),
+					y2: chan(s.y2),
+					prevY2: prevSeries[i]?.y2 ?? null,
 					pathCache: null
 				};
 			})
@@ -1994,6 +2427,12 @@ var Chart = class {
 					if (v < min) min = v;
 					if (v > max) max = v;
 				}
+				const y2 = s.y2;
+				if (y2) for (let i = Math.min(x0, y2.length); i < y2.length; i++) {
+					const v = y2[i];
+					if (v < min) min = v;
+					if (v > max) max = v;
+				}
 			}
 			if (min === Infinity) {
 				min = 0;
@@ -2002,7 +2441,7 @@ var Chart = class {
 			const includeZero = this.options.type === "area" || this.options.type === "sparkline";
 			return {
 				x,
-				y: padDomain(min, max, includeZero)
+				y: this.yDomain(padDomain(min, max, includeZero))
 			};
 		}
 		if (d.kind === "category") {
@@ -2038,7 +2477,7 @@ var Chart = class {
 			}
 			return {
 				x: [0, d.categories.length],
-				y: padDomain(min, max, true)
+				y: this.yDomain(padDomain(min, max, true))
 			};
 		}
 		if (d.kind === "ohlc") {
@@ -2057,7 +2496,7 @@ var Chart = class {
 			}
 			return {
 				x,
-				y: padDomain(min, max)
+				y: this.yDomain(padDomain(min, max))
 			};
 		}
 		if (d.kind === "waterfall") {
@@ -2073,14 +2512,17 @@ var Chart = class {
 			}
 			return {
 				x: [0, d.bars.length],
-				y: padDomain(min, max, true)
+				y: this.yDomain(padDomain(min, max, true))
 			};
 		}
 		return {
 			x: [0, 1],
-			y: [0, 1]
+			y: this.yDomain([0, 1])
 		};
 	}
+	yDomain(y) {
+		return boundDomain(y, this.options.yMin, this.options.yMax);
+	}
 	lerpView(eased) {
 		const f = this.viewFrom;
 		const to = this.viewTo;
@@ -2182,30 +2624,35 @@ var Chart = class {
 		else this.mod.render(this.renderContext(t, scales));
 		if (this.hover) this.drawHover(this.hover, scales.yScale);
 	}
-	/** series rasterization on the GPU; grid/labels/hover stay on Canvas2D */
+	/**
+	* Series rasterization on the GPU; grid/labels/hover stay on Canvas2D.
+	* Raw data lives in GPU buffers — the per-frame cost is uniform writes +
+	* instanced draws, with compute decimation above the density threshold.
+	*/
 	gpuRender(t, scales) {
 		const g = this.gpu;
 		const d = this.data;
 		const kind = GPU_KIND[this.options.type];
-		if (!g || !kind || d.kind !== "xy") {
+		if (!g || g.unavailable || !kind || d.kind !== "xy") {
 			this.mod.render(this.renderContext(t, scales));
 			return;
 		}
-		const r = this.renderContext(t, scales);
+		g.syncData(d, this.dataRev);
+		const view = {
+			x: scales.xScale.domain,
+			y: scales.yScale.domain
+		};
 		const flow = this.options.flow ? FLOW_RIPPLE : 0;
-		g.begin(this.backend.plot);
-		for (const s of d.series) {
+		g.begin(this.backend.plot, t, flow);
+		for (let i = 0; i < d.series.length; i++) {
+			const s = d.series[i];
+			if (!s) continue;
 			if (kind === "points") {
-				const pts = mapSeriesPx(d.sortedX, s.y, s.prevY, t, scales.yScale.domain[0], scales.xScale, scales.yScale, flow);
-				g.points(pts, s.color, 2.5, .65);
+				g.points(i, s.color, 2.5, .65, view);
 				continue;
 			}
-			const pts = seriesPoints(r, s);
-			if (kind === "area") {
-				const base = scales.yScale(Math.max(0, scales.yScale.domain[0]));
-				g.area(pts, s.color, base, this.backend.plot);
-			}
-			g.line(pts, s.color, 2);
+			if (kind === "area") g.area(i, s.color, Math.max(0, scales.yScale.domain[0]), view);
+			g.line(i, s.color, 2, view);
 		}
 		g.end();
 	}
@@ -2213,6 +2660,10 @@ var Chart = class {
 		const o = this.backend.overlay;
 		const plot = this.backend.plot;
 		this.backend.beginOverlay();
+		if (info.kind === "point" && this.options.type === "radar") {
+			drawRadarHover(this.renderContext(1), info);
+			return;
+		}
 		if (info.kind === "point" || info.kind === "candle") {
 			o.strokeStyle = this.theme.crosshair;
 			o.lineWidth = 1;
@@ -2243,7 +2694,7 @@ var Chart = class {
 				const cx = plot.x + plot.w / 2;
 				const cy = plot.y + plot.h / 2;
 				const rOuter = Math.min(plot.w, plot.h) / 2;
-				const rInner = rOuter * .65;
+				const rInner = this.options.type === "pie" ? 0 : rOuter * .65;
 				let a = -Math.PI / 2;
 				for (let i = 0; i < d.slices.length; i++) {
 					const s = d.slices[i];
@@ -2340,6 +2791,8 @@ var Chart = class {
 	setData(data) {
 		const prev = this.data;
 		this.data = this.normalize(data, prev);
+		this.dataRev++;
+		this.maybeInitGpu();
 		const dom = this.layout();
 		this.startAnimation(dom);
 	}
@@ -2350,7 +2803,7 @@ var Chart = class {
 	*/
 	append(x, y) {
 		const d = this.data;
-		if (d.kind !== "xy") throw new Error("[resolvcharts] append() requires xy data (line/area/scatter/sparkline)");
+		if (d.kind !== "xy") throw new Error("[resolvcharts] append() requires xy data (line/area/scatter/bubble/rangearea/sparkline)");
 		const nowT = typeof performance === "undefined" ? Date.now() : performance.now();
 		if (this.lastAppendAt > 0) {
 			const dt = nowT - this.lastAppendAt;
@@ -2392,11 +2845,30 @@ var Chart = class {
 				prevY.set(s.y.subarray(drop));
 				prevY[m - 1] = m > 1 ? yNew[m - 2] : yNew[m - 1];
 			}
+			let rNew = null;
+			if (s.r) {
+				rNew = new Float64Array(m);
+				rNew.set(s.r.subarray(drop));
+				rNew[m - 1] = s.r[n - 1];
+			}
+			let y2New = null;
+			let prevY2 = null;
+			if (s.y2) {
+				y2New = new Float64Array(m);
+				y2New.set(s.y2.subarray(drop));
+				y2New[m - 1] = s.y2[n - 1];
+				prevY2 = new Float64Array(m);
+				prevY2.set(s.y2.subarray(drop));
+				prevY2[m - 1] = m > 1 ? y2New[m - 2] : y2New[m - 1];
+			}
 			return {
 				label: s.label,
 				color: s.color,
 				y: yNew,
 				prevY,
+				r: rNew,
+				y2: y2New,
+				prevY2,
 				pathCache: null
 			};
 		});
@@ -2405,8 +2877,14 @@ var Chart = class {
 			sortedX,
 			series
 		};
-		if (m > 1 && x < sortedX[m - 2]) resortXY(nd);
+		const resort = m > 1 && x < sortedX[m - 2];
+		if (resort) resortXY(nd);
 		this.data = nd;
+		if (resort) this.dataRev++;
+		else if (this.gpu && !this.gpu.unavailable) {
+			if (!this.gpu.appended(x, d.series.map((s, i) => ys[i] ?? s.y[n - 1]), d.series.map((s) => s.y[n - 1]), drop)) this.dataRev++;
+		}
+		this.maybeInitGpu();
 		this.pendingView = true;
 		sharedScheduler.add(this.frame);
 	}
@@ -2452,13 +2930,22 @@ function resortXY(d) {
 	for (const s of d.series) {
 		const ny = new Float64Array(n);
 		const np = s.prevY ? new Float64Array(n) : null;
+		const nr = s.r ? new Float64Array(n) : null;
+		const ny2 = s.y2 ? new Float64Array(n) : null;
+		const np2 = s.prevY2 ? new Float64Array(n) : null;
 		for (let i = 0; i < n; i++) {
 			const k = idx[i];
 			ny[i] = s.y[k];
 			if (np && s.prevY) np[i] = s.prevY[k];
+			if (nr && s.r) nr[i] = s.r[k];
+			if (ny2 && s.y2) ny2[i] = s.y2[k];
+			if (np2 && s.prevY2) np2[i] = s.prevY2[k];
 		}
 		s.y = ny;
 		s.prevY = np;
+		s.r = nr;
+		s.y2 = ny2;
+		s.prevY2 = np2;
 	}
 }
 /**
@@ -2482,6 +2969,7 @@ function createChart(el, options) {
 }
 //#endregion
 exports.Chart = Chart;
+exports.boundDomain = boundDomain;
 exports.computeTicks = computeTicks;
 exports.createChart = createChart;
 exports.darkTheme = darkTheme;