resolvcharts 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -1,11 +1,8 @@
-//#region src/charts/bar.ts
-const MAX_BAR_W$1 = 40;
-const RADIUS$1 = 3;
 function barGeometry(r, d, catIdx, seriesIdx, value) {
 	const cats = d.categories.length;
 	if (cats === 0) return null;
 	const slot = r.plot.w / cats;
-	const groupW = Math.min(slot * .8, MAX_BAR_W$1 * d.series.length);
+	const groupW = Math.min(slot * .8, 40 * d.series.length);
 	const barW = groupW / d.series.length;
 	const x = r.plot.x + slot * catIdx + (slot - groupW) / 2 + barW * seriesIdx;
 	const base = r.yScale(0);
@@ -45,7 +42,7 @@ function stackedGeometry(r, d, catIdx, v0, v1) {
 	const cats = d.categories.length;
 	if (cats === 0) return null;
 	const slot = r.plot.w / cats;
-	const w = Math.min(slot * .8, MAX_BAR_W$1);
+	const w = Math.min(slot * .8, 40);
 	const x = r.plot.x + slot * catIdx + (slot - w) / 2;
 	const yTop = r.yScale(Math.max(v0, v1));
 	const yBot = r.yScale(Math.min(v0, v1));
@@ -68,7 +65,7 @@ function renderBar(r) {
 	const slot = r.plot.w / Math.max(1, cats);
 	const animate = r.t < 1;
 	if (r.opts.stacked) {
-		const w = Math.min(slot * .8, MAX_BAR_W$1);
+		const w = Math.min(slot * .8, 40);
 		for (let ci = 0; ci < cats; ci++) {
 			const x = r.plot.x + slot * ci + (slot - w) / 2;
 			let pos = 0;
@@ -91,7 +88,7 @@ function renderBar(r) {
 			}
 		}
 	} else {
-		const groupW = Math.min(slot * .8, MAX_BAR_W$1 * d.series.length);
+		const groupW = Math.min(slot * .8, 40 * d.series.length);
 		const barW = groupW / d.series.length;
 		const base = r.yScale(0);
 		for (let si = 0; si < d.series.length; si++) {
@@ -112,7 +109,7 @@ function renderBar(r) {
 					y,
 					w: barW,
 					h
-				}, RADIUS$1, v >= 0);
+				}, 3, v >= 0);
 			}
 		}
 	}
@@ -375,6 +372,7 @@ function decimateSeriesPx(xs, ys, prev, t, yFallback, xScale, yScale, pixelWidth
 * ys must be pixel-space y coordinates of equal length.
 *
 * Returns interleaved [x, y] pairs ready for path construction.
+* @category Utilities
 */
 function decimateM4(xs, ys, pixelWidth) {
 	const n = Math.min(xs.length, ys.length);
@@ -436,6 +434,7 @@ function decimateM4(xs, ys, pixelWidth) {
 /**
 * Binary search for the index whose value is nearest to `target`.
 * `xs` must be sorted ascending. Returns -1 for empty input.
+* @category Utilities
 */
 function nearestIndex(xs, target) {
 	const n = xs.length;
@@ -845,8 +844,151 @@ function hitCandle(r, px) {
 	};
 }
 //#endregion
+//#region src/charts/combo.ts
+/** pooled scratch for overlay [x, y] pairs — consumed within the call */
+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]);
+	}
+	return path;
+}
+function renderCombo(r) {
+	if (r.data.kind !== "category") return;
+	const d = r.data;
+	const ctx = r.ctx;
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(r.plot.x, r.plot.y, r.plot.w, r.plot.h + 1);
+	ctx.clip();
+	const cats = d.categories.length;
+	const slot = r.plot.w / Math.max(1, cats);
+	const animate = r.t < 1;
+	const valAt = (s, ci) => {
+		const cur = s.values[ci] ?? 0;
+		const prev = s.prevValues?.[ci] ?? 0;
+		return animate ? prev + (cur - prev) * r.t : cur;
+	};
+	let nCols = 0;
+	for (const s of d.series) if (s.kind === "column") nCols++;
+	if (r.opts.stacked) {
+		const w = Math.min(slot * .8, 40);
+		for (let ci = 0; ci < cats; ci++) {
+			const x = r.plot.x + slot * ci + (slot - w) / 2;
+			let pos = 0;
+			let neg = 0;
+			for (const s of d.series) {
+				if (s.kind !== "column") continue;
+				const v = valAt(s, ci);
+				const v0 = v >= 0 ? pos : neg + v;
+				const v1 = v >= 0 ? pos + v : neg;
+				if (v >= 0) pos = v1;
+				else neg = v0;
+				const yTop = r.yScale(Math.max(v0, v1));
+				const h = Math.abs(r.yScale(Math.min(v0, v1)) - yTop);
+				if (h <= 0) continue;
+				ctx.fillStyle = s.color;
+				ctx.fillRect(x, yTop, w, h);
+			}
+		}
+	} else {
+		const groupW = Math.min(slot * .8, 40 * nCols);
+		const barW = groupW / Math.max(1, nCols);
+		const base = r.yScale(0);
+		let k = 0;
+		for (const s of d.series) {
+			if (s.kind !== "column") continue;
+			ctx.fillStyle = s.color;
+			for (let ci = 0; ci < cats; ci++) {
+				const v = valAt(s, ci);
+				const x = r.plot.x + slot * ci + (slot - groupW) / 2 + barW * k;
+				const yv = r.yScale(v);
+				const y = Math.min(base, yv);
+				const h = Math.abs(base - yv);
+				if (h <= 0) continue;
+				topRounded(ctx, {
+					x,
+					y,
+					w: barW,
+					h
+				}, 3, v >= 0);
+			}
+			k++;
+		}
+	}
+	const base = r.yScale(Math.max(0, r.yScale.domain[0]));
+	if (ovScratch.length < cats * 2) ovScratch = new Float64Array(cats * 2);
+	const pts = ovScratch;
+	for (const s of d.series) {
+		if (s.kind === "column") continue;
+		for (let ci = 0; ci < cats; ci++) {
+			pts[2 * ci] = r.plot.x + slot * (ci + .5);
+			pts[2 * ci + 1] = r.yScale(valAt(s, ci));
+		}
+		const path = overlayPath(r, pts, cats);
+		if (s.kind === "area" && cats > 1) {
+			const area = new Path2D(path);
+			area.lineTo(pts[2 * (cats - 1)], base);
+			area.lineTo(pts[0], base);
+			area.closePath();
+			const g = ctx.createLinearGradient(0, r.plot.y, 0, r.plot.y + r.plot.h);
+			g.addColorStop(0, withAlpha(s.color, .16));
+			g.addColorStop(1, withAlpha(s.color, 0));
+			ctx.fillStyle = g;
+			ctx.fill(area);
+		}
+		ctx.strokeStyle = s.color;
+		ctx.lineWidth = 2;
+		ctx.lineJoin = "round";
+		ctx.lineCap = "round";
+		ctx.stroke(path);
+	}
+	ctx.restore();
+}
+function hitCombo(r, px) {
+	if (r.data.kind !== "category") return null;
+	const d = r.data;
+	const cats = d.categories.length;
+	if (cats === 0 || px < r.plot.x || px > r.plot.x + r.plot.w) return null;
+	const cat = Math.min(cats - 1, Math.max(0, Math.floor((px - r.plot.x) / r.plot.w * cats)));
+	const slot = r.plot.w / cats;
+	let py = r.plot.y + r.plot.h;
+	const values = d.series.map((s) => {
+		const y = s.values[cat] ?? 0;
+		const sy = r.yScale(y);
+		if (sy < py) py = sy;
+		return {
+			label: s.label,
+			color: s.color,
+			y
+		};
+	});
+	return {
+		kind: "point",
+		index: cat,
+		x: cat,
+		px: r.plot.x + slot * (cat + .5),
+		py,
+		values,
+		title: d.categories[cat] ?? ""
+	};
+}
+//#endregion
 //#region src/core/format.ts
-/** Compact number formatting: integers verbatim, else 4 significant digits. */
+/** @category Formatting
+* Compact number formatting: integers verbatim, else 4 significant digits. */
 function formatNumber(v) {
 	if (!Number.isFinite(v)) return "";
 	if (Number.isInteger(v) && Math.abs(v) < 0x38d7ea4c68000) return String(v);
@@ -857,7 +999,8 @@ const MAGNITUDES = [
 	[1e6, "M"],
 	[1e3, "k"]
 ];
-/** SI-suffixed formatting: `1.2k`, `3.4M`, `5B`. */
+/** @category Formatting
+* SI-suffixed formatting: `1.2k`, `3.4M`, `5B`. */
 function formatSI(v) {
 	if (!Number.isFinite(v)) return "";
 	const abs = Math.abs(v);
@@ -1109,13 +1252,13 @@ function makeCanvas(cssW, cssH) {
 	c.height = Math.max(1, Math.round(cssH));
 	return c;
 }
-function setup2d(canvas, alpha) {
-	const ctx = canvas.getContext("2d", { alpha });
+function setup2d(canvas, settings) {
+	const ctx = canvas.getContext("2d", settings);
 	if (!ctx) throw new Error("resolvcharts: could not get 2d context");
 	return ctx;
 }
 var CanvasBackend = class {
-	constructor(container, cssW, cssH) {
+	constructor(container, cssW, cssH, settings = {}) {
 		this.kind = "canvas2d";
 		this.plot = {
 			x: 0,
@@ -1126,14 +1269,18 @@ var CanvasBackend = class {
 		this.gridCache = null;
 		this.gridCtx = null;
 		this.container = container;
+		this.settings = {
+			alpha: true,
+			...settings
+		};
 		this.dpr = Math.max(1, window.devicePixelRatio || 1);
 		this.width = cssW;
 		this.height = cssH;
 		this.mainCanvas = makeCanvas(cssW, cssH);
 		this.overlayCanvas = makeCanvas(cssW, cssH);
 		this.overlayCanvas.style.pointerEvents = "none";
-		this.main = setup2d(this.mainCanvas, true);
-		this.overlay = setup2d(this.overlayCanvas, true);
+		this.main = setup2d(this.mainCanvas, this.settings);
+		this.overlay = setup2d(this.overlayCanvas, this.settings);
 		container.append(this.mainCanvas, this.overlayCanvas);
 		this.applySize();
 	}
@@ -1157,7 +1304,7 @@ var CanvasBackend = class {
 			this.gridCache = document.createElement("canvas");
 			this.gridCache.width = Math.max(1, this.width * this.dpr);
 			this.gridCache.height = Math.max(1, this.height * this.dpr);
-			this.gridCtx = setup2d(this.gridCache, true);
+			this.gridCtx = setup2d(this.gridCache, this.settings);
 			this.gridCtx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
 		}
 		const ctx = this.gridCtx;
@@ -1192,7 +1339,8 @@ var CanvasBackend = class {
 };
 //#endregion
 //#region src/core/scales.ts
-/** Linear scale from domain `[d0, d1]` to range `[r0, r1]`, with `invert`. */
+/** @category Utilities
+* Linear scale from domain `[d0, d1]` to range `[r0, r1]`, with `invert`. */
 function linearScale(d0, d1, r0, r1) {
 	const dd = d1 - d0 || 1;
 	const dr = r1 - r0;
@@ -1202,7 +1350,8 @@ function linearScale(d0, d1, r0, r1) {
 	fn.range = [r0, r1];
 	return fn;
 }
-/** `[min, max]` of `values`; degenerate inputs get a sane fallback domain. */
+/** @category Utilities
+* `[min, max]` of `values`; degenerate inputs get a sane fallback domain. */
 function extent(values) {
 	let min = Infinity;
 	let max = -Infinity;
@@ -1215,7 +1364,8 @@ function extent(values) {
 	if (min === max) return min === 0 ? [0, 1] : [min - Math.abs(min) * .1, max + Math.abs(max) * .1];
 	return [min, max];
 }
-/** Pad a domain by 5% on each end; `includeZero` anchors the axis at 0. */
+/** @category Utilities
+* Pad a domain by 5% on each end; `includeZero` anchors the axis at 0. */
 function padDomain(min, max, includeZero = false) {
 	let lo = includeZero ? Math.min(0, min) : min;
 	let hi = includeZero ? Math.max(0, max) : max;
@@ -1269,6 +1419,9 @@ 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",
@@ -1287,6 +1440,9 @@ const lightTheme = {
 	tooltipShadow: "0 4px 14px rgba(0,0,0,0.08)",
 	fontFamily: FONT
 };
+/** Built-in dark theme.
+* @category Theming
+*/
 const darkTheme = {
 	bg: "#0a0a0a",
 	text: "#ededed",
@@ -1317,6 +1473,9 @@ const categoricalDark = [
 	"#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,
@@ -1357,6 +1516,9 @@ function niceStep(range, target) {
 	}
 	return step * pow;
 }
+/** "Nice" round tick values covering `[min, max]`, ~`target` count.
+* @category Utilities
+*/
 function computeTicks(min, max, target = 5) {
 	if (!(min < max)) return [min];
 	const step = niceStep(max - min, target);
@@ -1479,6 +1641,12 @@ const MODULES = {
 		axes: true,
 		defaultTooltip: true
 	},
+	combo: {
+		render: renderCombo,
+		hit: (r, px) => hitCombo(r, px),
+		axes: true,
+		defaultTooltip: true
+	},
 	sparkline: {
 		render: renderSparkline,
 		hit: (r, px) => hitXY(r, px),
@@ -1527,6 +1695,9 @@ 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;
+/** Chart instance. Create via {@link createChart}.
+* @category Charts
+*/
 var Chart = class {
 	constructor(el, options) {
 		this.tooltip = null;
@@ -1607,7 +1778,7 @@ var Chart = class {
 		if (options.height) el.style.height = `${options.height}px`;
 		const w = el.clientWidth || 320;
 		const h = el.clientHeight || (options.type === "sparkline" ? 32 : 240);
-		this.backend = new CanvasBackend(el, w, h);
+		this.backend = new CanvasBackend(el, w, h, options.canvas);
 		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);
@@ -1718,7 +1889,7 @@ var Chart = class {
 				total: slices.reduce((a, s) => a + Math.max(0, s.value), 0)
 			};
 		}
-		if (t === "bar") {
+		if (t === "bar" || t === "combo") {
 			const d = data;
 			const prevSeries = prev?.kind === "category" ? prev.series : [];
 			return {
@@ -1727,6 +1898,7 @@ var Chart = class {
 				series: d.series.map((s, i) => ({
 					label: s.label ?? `Series ${i + 1}`,
 					color: seriesColor(this.theme, i, s.color),
+					kind: s.kind ?? "column",
 					values: Float64Array.from(s.values),
 					prevValues: prevSeries[i]?.values ?? null
 				}))
@@ -1835,18 +2007,26 @@ var Chart = class {
 		if (d.kind === "category") {
 			let min = Infinity;
 			let max = -Infinity;
-			if (this.options.stacked) for (let ci = 0; ci < d.categories.length; ci++) {
-				let pos = 0;
-				let neg = 0;
+			if (this.options.stacked) {
+				for (let ci = 0; ci < d.categories.length; ci++) {
+					let pos = 0;
+					let neg = 0;
+					for (const s of d.series) {
+						if (s.kind !== "column") continue;
+						const v = s.values[ci] ?? 0;
+						if (v >= 0) pos += v;
+						else neg += v;
+					}
+					min = Math.min(min, neg);
+					max = Math.max(max, pos);
+				}
 				for (const s of d.series) {
-					const v = s.values[ci] ?? 0;
-					if (v >= 0) pos += v;
-					else neg += v;
+					if (s.kind === "column") continue;
+					const e = extent(s.values);
+					min = Math.min(min, e[0]);
+					max = Math.max(max, e[1]);
 				}
-				min = Math.min(min, neg);
-				max = Math.max(max, pos);
-			}
-			else for (const s of d.series) {
+			} else for (const s of d.series) {
 				const e = extent(s.values);
 				min = Math.min(min, e[0]);
 				max = Math.max(max, e[1]);
@@ -1980,7 +2160,7 @@ var Chart = class {
 				ctx.fillText(fmtX(t), px, plot.y + plot.h + 6);
 			}
 		}
-		if (this.options.type === "bar") {
+		if (this.options.type === "bar" || this.options.type === "combo") {
 			const base = Math.round(yScale(0)) + .5;
 			if (base >= plot.y && base <= plot.y + plot.h + 1) {
 				ctx.strokeStyle = this.theme.axisBaseline;
@@ -2041,9 +2221,9 @@ var Chart = class {
 			o.lineTo(x, plot.y + plot.h);
 			o.stroke();
 			const d = this.data;
-			if (d.kind === "xy" && info.kind === "point") for (const v of info.values) {
+			if (info.kind === "point" && (d.kind === "xy" || d.kind === "category")) for (const v of info.values) {
 				const s = d.series.find((s2) => s2.label === v.label && s2.color === v.color);
-				const yv = s ? s.y[info.index] : v.y;
+				const yv = s ? "y" in s ? s.y[info.index] : s.values[info.index] : v.y;
 				o.fillStyle = v.color;
 				o.strokeStyle = this.theme.bg;
 				o.lineWidth = 2;
@@ -2105,7 +2285,7 @@ var Chart = class {
 				color: v.color,
 				label: v.label,
 				value: fmtY(v.y)
-			})), fmtX(info.x));
+			})), info.title ?? fmtX(info.x));
 		} else if (info.kind === "bar") this.tooltip.show(info.px, info.py, [{
 			color: info.color,
 			label: info.label,
@@ -2282,6 +2462,7 @@ function resortXY(d) {
 }
 /**
 * Create a chart inside `el`.
+* @category Charts
 *
 * @example
 * ```ts