goro-charts 1.0.0 → 1.3.0

package/dist/goro-charts.js

@@ -29,8 +29,8 @@ var e = {
 	yTicks: 6,
 	maxPoints: 0,
 	autoDraw: !1,
-	yMin: 0,
-	yMax: 0,
+	yMin: void 0,
+	yMax: void 0,
 	maxDots: 2e3
 }, t = class {
 	cap;
@@ -100,8 +100,8 @@ var e = {
 	push(e, t) {
 		let n;
 		this.count < this.cap ? (n = this.head + this.count, n >= this.cap && (n -= this.cap), this.count++) : (n = this.head, this.head = this.head + 1 === this.cap ? 0 : this.head + 1), this.x[n] = e, this.y[n] = t;
-		let r = this.seq++;
-		this.ext.push(t, r, r - this.count + 1);
+		let r = this.seq++, i = r - this.count + 1;
+		Number.isNaN(t) || this.ext.push(t, r, i);
 	}
 	clear() {
 		this.head = 0, this.count = 0, this.seq = 0, this.ext.clear();
@@ -134,26 +134,35 @@ var e = {
 		if (e < 1) throw Error("maxPoints must be >= 1");
 		this.ring = new n(e), this.bindRing();
 	}
-	setData(e, t) {
-		if (e.length !== t.length) throw Error("x and y must have same length");
-		if (e.length === 0) throw Error("data arrays must not be empty");
-		this.ring = null, this.xArr = e, this.yArr = t, this.head = 0, this.count = e.length, this.cap = e.length, this.xMin = e[0], this.xMax = e[e.length - 1];
-		let n = Infinity, r = -Infinity;
+	setData(e, t, n = "copy") {
+		this.validateSnapshot(e, t), this.ring = null, this.xArr = n === "copy" ? new Float64Array(e) : e, this.yArr = n === "copy" ? new Float64Array(t) : t, this.head = 0, this.count = e.length, this.cap = e.length, this.xMin = e[0], this.xMax = e[e.length - 1];
+		let r = Infinity, i = -Infinity;
 		for (let e = 0; e < t.length; e++) {
-			let i = t[e];
-			i < n && (n = i), i > r && (r = i);
+			let n = t[e];
+			Number.isNaN(n) || (n < r && (r = n), n > i && (i = n));
 		}
-		this.applyExtent(n, r);
+		r === Infinity && (r = 0, i = 0), this.applyExtent(r, i);
 	}
 	append(e, t) {
 		let n = this.requireRing("append");
-		n.count > 0 && e < n.xLast && console.warn(`[goro-charts] append x=${e} is < last x=${n.xLast}; x values must be monotonically increasing`), n.push(e, t), this.syncFromRing();
+		if (!Number.isFinite(e)) throw Error(`append x=${e} is not finite`);
+		if (n.count > 0 && e < n.xLast) throw Error(`append x=${e} is < last x=${n.xLast}; x must be monotonically increasing`);
+		if (!i(t)) throw Error(`append y=${t} is not finite`);
+		n.push(e, t), this.syncFromRing();
 	}
 	appendBatch(e, t) {
 		let n = this.requireRing("appendBatch");
 		if (e.length !== t.length) throw Error("xs and ys must have same length");
-		for (let r = 0; r < e.length; r++) n.push(e[r], t[r]);
-		this.syncFromRing();
+		let r = e.length;
+		if (r !== 0) {
+			for (let n = 0; n < r; n++) {
+				if (!Number.isFinite(e[n])) throw Error(`xs[${n}]=${e[n]} is not finite`);
+				if (n > 0 && e[n] < e[n - 1]) throw Error(`xs not monotonically increasing at batch index ${n}: xs[${n}]=${e[n]} < xs[${n - 1}]=${e[n - 1]}`);
+				if (!i(t[n])) throw Error(`ys[${n}]=${t[n]} is not finite`);
+			}
+			for (let i = 0; i < r; i++) n.push(e[i], t[i]);
+			this.syncFromRing();
+		}
 	}
 	setMaxPoints(e) {
 		if (e < 1) throw Error("maxPoints must be >= 1");
@@ -179,6 +188,16 @@ var e = {
 		}
 		return n;
 	}
+	validateSnapshot(e, t) {
+		if (e.length !== t.length) throw Error(`x and y length mismatch: x.length=${e.length}, y.length=${t.length}`);
+		if (e.length === 0) throw Error("data arrays must not be empty");
+		if (!Number.isFinite(e[0])) throw Error(`x[0]=${e[0]} is not finite`);
+		for (let t = 1; t < e.length; t++) {
+			if (!Number.isFinite(e[t])) throw Error(`x[${t}]=${e[t]} is not finite`);
+			if (e[t] < e[t - 1]) throw Error(`x not monotonically increasing at index ${t}: x[${t}]=${e[t]} < x[${t - 1}]=${e[t - 1]}`);
+		}
+		for (let e = 0; e < t.length; e++) if (!i(t[e])) throw Error(`y[${e}]=${t[e]} is not finite`);
+	}
 	requireRing(e) {
 		if (!this.ring) throw Error(`${e}() requires the chart to be created with { maxPoints }`);
 		return this.ring;
@@ -194,7 +213,13 @@ var e = {
 	applyExtent(e, t) {
 		t - e === 0 ? (this.yMin = e - 1, this.yMax = t + 1) : (this.yMin = e, this.yMax = t);
 	}
-}, i = class {
+};
+function i(e) {
+	return Number.isFinite(e) || Number.isNaN(e);
+}
+//#endregion
+//#region src/render/surface.ts
+var a = class {
 	canvas;
 	ctx;
 	dpr;
@@ -232,93 +257,93 @@ var e = {
 };
 //#endregion
 //#region src/math/ticks.ts
-function a(e, t) {
+function o(e, t) {
 	let n = t - e;
 	return n === 0 ? 1 : n;
 }
-function o(e, t) {
+function s(e, t) {
 	let n = Math.floor(Math.log10(e / t)), r = e / t / 10 ** n, i;
 	return i = r <= 1.5 ? 1 : r <= 3.5 ? 2 : r <= 7.5 ? 5 : 10, i * 10 ** n;
 }
-function s(e, t, n) {
-	let r = o(a(e, t), n), i = Math.ceil(e / r) * r, s = Math.floor(t / r) * r, c = [];
-	for (let e = i; e <= s + r * .5; e += r) c.push(e);
+function c(e, t, n) {
+	let r = s(o(e, t), n), i = Math.ceil(e / r) * r, a = Math.floor(t / r) * r, c = [];
+	for (let e = i; e <= a + r * .5; e += r) c.push(e);
 	return c;
 }
 //#endregion
 //#region src/math/format.ts
-function c(e) {
+function l(e) {
 	if (Number.isInteger(e)) return e.toFixed(0);
 	let t = Math.abs(e);
 	return (t >= 1e6 || t <= 1e-4 && t > 0) && isFinite(e) ? e.toExponential(2) : t >= 1 ? e.toFixed(2) : e.toPrecision(3);
 }
 //#endregion
 //#region src/math/scale.ts
-function l(e, t, n) {
+function u(e, t, n) {
 	let r = t.xMax - t.xMin;
 	return r <= 0 ? n.x : n.x + (e - t.xMin) / r * n.w;
 }
-function u(e, t, n) {
+function d(e, t, n) {
 	let r = t.yMax - t.yMin;
 	return r <= 0 ? n.y : n.y + (1 - (e - t.yMin) / r) * n.h;
 }
-function d(e, t, n) {
+function f(e, t, n) {
 	let r = t.xMax - t.xMin;
 	return r <= 0 ? t.xMin : t.xMin + (e - n.x) / n.w * r;
 }
 //#endregion
 //#region src/render/axes.ts
-function f(e, t, n, r) {
+function p(e, t, n, r) {
 	e.setLineDash([6, 4]);
 	let i = n.y + n.h, a = n.x + n.w;
 	e.strokeStyle = r.gridColor, e.lineWidth = .5;
-	let o = s(t.yMin, t.yMax, r.yTicks);
+	let o = c(t.yMin, t.yMax, r.yTicks);
 	e.beginPath();
 	for (let r of o) {
-		let o = u(r, t, n);
+		let o = d(r, t, n);
 		o <= n.y || o >= i || (e.moveTo(n.x, o), e.lineTo(a, o));
 	}
 	e.stroke();
-	let c = s(t.xMin, t.xMax, r.xTicks);
+	let s = c(t.xMin, t.xMax, r.xTicks);
 	e.beginPath();
-	for (let r of c) {
-		let o = l(r, t, n);
+	for (let r of s) {
+		let o = u(r, t, n);
 		o <= n.x || o >= a || (e.moveTo(o, n.y), e.lineTo(o, i));
 	}
 	e.stroke(), e.strokeStyle = r.axisColor, e.lineWidth = .8, e.strokeRect(n.x, n.y, n.w, n.h), e.setLineDash([]);
 }
-function p(e, t, n, r, i = "left") {
+function m(e, t, n, r, i = "left") {
 	e.font = `${r.fontSize}px ${r.fontFamily}`, e.fillStyle = r.textColor;
-	let a = s(t.yMin, t.yMax, r.yTicks);
+	let a = c(t.yMin, t.yMax, r.yTicks);
 	e.textAlign = i === "right" ? "left" : "right", e.textBaseline = "middle";
 	let o = i === "right" ? n.x + n.w + 6 : n.x - 6;
-	for (let r of a) e.fillText(c(r), o, u(r, t, n));
+	for (let r of a) e.fillText(l(r), o, d(r, t, n));
 	if (i === "left") {
-		let i = s(t.xMin, t.xMax, r.xTicks);
+		let i = c(t.xMin, t.xMax, r.xTicks);
 		e.textAlign = "center", e.textBaseline = "top";
-		for (let r of i) e.fillText(c(r), l(r, t, n), n.y + n.h + 6);
+		for (let r of i) e.fillText(l(r), u(r, t, n), n.y + n.h + 6);
 	}
 }
 //#endregion
 //#region src/render/shape.ts
-function m(e, t, n, r, i, a) {
+function h(e, t, n, r, i, a) {
 	if (r <= 0 || i <= 0) return;
 	let o = Math.min(a, r / 2, i / 2);
 	e.moveTo(t + o, n), e.arcTo(t + r, n, t + r, n + i, o), e.arcTo(t + r, n + i, t, n + i, o), e.arcTo(t, n + i, t, n, o), e.arcTo(t, n, t + r, n, o), e.closePath();
 }
 //#endregion
 //#region src/render/crosshair.ts
-function h(e, t, n, r) {
+function g(e, t, n, r) {
 	let i = [];
 	for (let a = 0; a < e.length; a++) {
 		let o = e[a], s = o.count;
 		if (s === 0) continue;
-		let c = d(r, o, n), f = o.bracketLogical(c), p = f + 1 < s ? f + 1 : s - 1, m = o.physOf(f), h = o.physOf(p), g = o.xArr[m], _ = o.xArr[h], v = o.yArr[m], y = o.yArr[h], b = _ > g ? (c - g) / (_ - g) : 0;
+		let c = f(r, o, n), l = o.bracketLogical(c), p = l + 1 < s ? l + 1 : s - 1, m = o.physOf(l), h = o.physOf(p), g = o.xArr[m], _ = o.xArr[h], v = o.yArr[m], y = o.yArr[h], b = _ > g ? (c - g) / (_ - g) : 0;
 		b < 0 ? b = 0 : b > 1 && (b = 1);
 		let x = g + (_ - g) * b, S = v + (y - v) * b;
 		i.push({
-			px: l(x, o, n),
-			py: u(S, o, n),
+			px: u(x, o, n),
+			py: d(S, o, n),
 			xVal: x,
 			yVal: S,
 			color: t[a].color,
@@ -327,17 +352,17 @@ function h(e, t, n, r) {
 	}
 	return i;
 }
-function g(e, t, n, r, i, a, o) {
+function _(e, t, n, r, i, a, o) {
 	if (a.x < r.x || a.x > r.x + r.w || a.y < r.y || a.y > r.y + r.h) return;
-	let s = h(t, n, r, a.x);
+	let s = g(t, n, r, a.x);
 	if (s.length === 0) return;
-	let l = s[0].px, u = s[0].xVal;
-	if (e.strokeStyle = i.crosshairColor, e.lineWidth = i.crosshairWidth, e.setLineDash([4, 3]), e.beginPath(), e.moveTo(l, r.y), e.lineTo(l, r.y + r.h), e.stroke(), e.setLineDash([]), s.length === 1) {
+	let c = s[0].px, u = s[0].xVal;
+	if (e.strokeStyle = i.crosshairColor, e.lineWidth = i.crosshairWidth, e.setLineDash([4, 3]), e.beginPath(), e.moveTo(c, r.y), e.lineTo(c, r.y + r.h), e.stroke(), e.setLineDash([]), s.length === 1) {
 		let t = s[0];
 		e.strokeStyle = i.crosshairColor, e.lineWidth = i.crosshairWidth, e.setLineDash([4, 3]), e.beginPath(), e.moveTo(r.x, t.py), e.lineTo(r.x + r.w, t.py), e.stroke(), e.setLineDash([]);
 	}
 	for (let t of s) e.fillStyle = "rgba(0,0,0,0.65)", e.beginPath(), e.arc(t.px, t.py, i.pointRadius + 1.5, 0, Math.PI * 2), e.fill(), e.fillStyle = t.color, e.beginPath(), e.arc(t.px, t.py, i.pointRadius, 0, Math.PI * 2), e.fill();
-	let d = (e) => c(e), f = `${i.fontSize}px ${i.fontFamily}`, p = `600 ${i.fontSize + 1}px ${i.fontFamily}`, g = i.fontSize + 6;
+	let d = (e) => l(e), f = `${i.fontSize}px ${i.fontFamily}`, p = `600 ${i.fontSize + 1}px ${i.fontFamily}`, m = i.fontSize + 6;
 	e.font = f;
 	let _ = Math.max(...s.map((t) => e.measureText(t.label).width));
 	e.font = p;
@@ -345,23 +370,23 @@ function g(e, t, n, r, i, a, o) {
 	e.font = f;
 	let y = e.measureText("x").width;
 	e.font = p;
-	let b = e.measureText(d(u)).width, x = Math.max(0, _, y), S = Math.max(v, b), C = 36 + x + 8 + S, w = g + 4, T = 20 + w + 2 + s.length * g, E = l + 14;
-	E + C > o && (E = Math.max(2, l - C - 14));
+	let b = e.measureText(d(u)).width, x = Math.max(0, _, y), S = Math.max(v, b), C = 36 + x + 8 + S, w = m + 4, T = 20 + w + 2 + s.length * m, E = c + 14;
+	E + C > o && (E = Math.max(2, c - C - 14));
 	let D = a.y - T - 10;
-	D < 2 && (D = a.y + 10), D + T > r.y + r.h && (D = Math.max(2, a.y - T - 10)), e.fillStyle = "rgba(10,12,14,0.70)", e.beginPath(), m(e, E, D, C, T, 6), e.fill(), e.strokeStyle = "rgba(255,255,255,0.08)", e.lineWidth = .8, e.beginPath(), m(e, E, D, C, T, 6), e.stroke();
+	D < 2 && (D = a.y + 10), D + T > r.y + r.h && (D = Math.max(2, a.y - T - 10)), e.fillStyle = "rgba(10,12,14,0.70)", e.beginPath(), h(e, E, D, C, T, 6), e.fill(), e.strokeStyle = "rgba(255,255,255,0.08)", e.lineWidth = .8, e.beginPath(), h(e, E, D, C, T, 6), e.stroke();
 	let O = D + 10;
-	e.fillStyle = i.textColor, e.globalAlpha = .5, e.font = f, e.fillText("x", E + 10 + 8 + 8, O + g - 4), e.globalAlpha = 1, e.font = p, e.textAlign = "right", e.fillStyle = "rgba(255,255,255,0.85)", e.fillText(d(u), E + C - 10, O + g - 4);
+	e.fillStyle = i.textColor, e.globalAlpha = .5, e.font = f, e.fillText("x", E + 10 + 8 + 8, O + m - 4), e.globalAlpha = 1, e.font = p, e.textAlign = "right", e.fillStyle = "rgba(255,255,255,0.85)", e.fillText(d(u), E + C - 10, O + m - 4);
 	let k = D + 10 + w + 1;
 	e.strokeStyle = "rgba(255,255,255,0.07)", e.lineWidth = 1, e.beginPath(), e.moveTo(E + 10, k), e.lineTo(E + C - 10, k), e.stroke();
 	for (let t = 0; t < s.length; t++) {
-		let n = s[t], r = D + 10 + w + 2 + t * g;
-		e.fillStyle = n.color, e.beginPath(), e.arc(E + 10 + 4, r + g / 2, 4, 0, Math.PI * 2), e.fill(), e.font = f, e.textAlign = "left", e.fillStyle = "rgba(255,255,255,0.55)", e.fillText(n.label, E + 10 + 8 + 8, r + g - 4), e.font = p, e.textAlign = "right", e.fillStyle = "rgba(255,255,255,0.90)", e.fillText(d(n.yVal), E + C - 10, r + g - 4);
+		let n = s[t], r = D + 10 + w + 2 + t * m;
+		e.fillStyle = n.color, e.beginPath(), e.arc(E + 10 + 4, r + m / 2, 4, 0, Math.PI * 2), e.fill(), e.font = f, e.textAlign = "left", e.fillStyle = "rgba(255,255,255,0.55)", e.fillText(n.label, E + 10 + 8 + 8, r + m - 4), e.font = p, e.textAlign = "right", e.fillStyle = "rgba(255,255,255,0.90)", e.fillText(d(n.yVal), E + C - 10, r + m - 4);
 	}
 	e.textAlign = "left", e.globalAlpha = 1;
 }
 //#endregion
 //#region src/render/legend.ts
-function _(e, t, n, r) {
+function v(e, t, n, r) {
 	if (t.length < 2) return;
 	e.font = `${r.fontSize}px ${r.fontFamily}`;
 	let i = t.map((t) => ({
@@ -370,7 +395,7 @@ function _(e, t, n, r) {
 	})), a = i.reduce((e, t) => e + t.width + (e > 0 ? 16 : 0), 0), o = Math.max(...i.map((e) => e.width)), s = a <= n.w - 16, c, l;
 	s ? (c = a + 20, l = r.fontSize + 14) : (c = o + 20, l = i.length * (r.fontSize + 6) + 14);
 	let u = n.x + n.w - c - 8, d = n.y + 8;
-	if (e.fillStyle = "rgba(10,12,14,0.70)", e.beginPath(), m(e, u, d, c, l, 6), e.fill(), e.strokeStyle = "rgba(255,255,255,0.08)", e.lineWidth = .7, e.beginPath(), m(e, u, d, c, l, 6), e.stroke(), e.textAlign = "left", e.textBaseline = "middle", s) {
+	if (e.fillStyle = "rgba(10,12,14,0.70)", e.beginPath(), h(e, u, d, c, l, 6), e.fill(), e.strokeStyle = "rgba(255,255,255,0.08)", e.lineWidth = .7, e.beginPath(), h(e, u, d, c, l, 6), e.stroke(), e.textAlign = "left", e.textBaseline = "middle", s) {
 		let t = u + 10;
 		for (let n = 0; n < i.length; n++) {
 			n > 0 && (t += 16);
@@ -388,18 +413,18 @@ function _(e, t, n, r) {
 }
 //#endregion
 //#region src/render/stacked-band.ts
-function v(e, t, n, r, i) {
+function y(e, t, n, r, i) {
 	let a = t[0].count;
 	if (a === 0) return;
-	let o = t[0], { xArr: s, cap: c } = o, l = i.xMax - i.xMin, u = i.yMax - i.yMin, d = l > 0 ? r.w / l : 0, f = r.x - i.xMin * d, p = u > 0 ? r.h / u : 0, m = r.y + r.h + i.yMin * p, h = r.y + r.h, g = r.y, _ = (e) => e < g ? g : e > h ? h : e, v = (e) => _(m - e * p), x = [], S = new Float64Array(a);
+	let o = t[0], { xArr: s, cap: c } = o, l = i.xMax - i.xMin, u = i.yMax - i.yMin, d = l > 0 ? r.w / l : 0, f = r.x - i.xMin * d, p = u > 0 ? r.h / u : 0, m = r.y + r.h + i.yMin * p, h = r.y + r.h, g = r.y, _ = (e) => e < g ? g : e > h ? h : e, v = (e) => _(m - e * p), y = [], S = new Float64Array(a);
 	for (let e = 0; e < t.length; e++) {
 		let n = t[e], r = n.head, i = n.cap - n.head;
 		for (let e = 0; e < a; e++) S[e] += n.yArr[r], --i === 0 ? (r = 0, i = n.cap) : r++;
-		x.push(new Float64Array(S));
+		y.push(new Float64Array(S));
 	}
-	e.lineJoin = "round", a > r.w * 2 ? b(e, x, n, s, o.head, c, f, d, v, h) : y(e, x, n, s, o.head, c, a, f, d, v, h);
+	e.lineJoin = "round", a > r.w * 2 ? x(e, y, n, s, o.head, c, f, d, v, h) : b(e, y, n, s, o.head, c, a, f, d, v, h);
 }
-function y(e, t, n, r, i, a, o, s, c, l, u) {
+function b(e, t, n, r, i, a, o, s, c, l, u) {
 	let d = new Float64Array(o), f = i, p = a - i;
 	for (let e = 0; e < o; e++) d[e] = s + r[f] * c, --p === 0 ? (f = 0, p = a) : f++;
 	for (let r = 0; r < t.length; r++) {
@@ -416,7 +441,7 @@ function y(e, t, n, r, i, a, o, s, c, l, u) {
 		e.stroke();
 	}
 }
-function b(e, t, n, r, i, a, o, s, c, l) {
+function x(e, t, n, r, i, a, o, s, c, l) {
 	let u = t[0].length, d = new Int32Array(u);
 	{
 		let e = i, t = a - i;
@@ -452,7 +477,7 @@ function b(e, t, n, r, i, a, o, s, c, l) {
 }
 //#endregion
 //#region src/charts/chart-base.ts
-var x = class {
+var S = class {
 	opts;
 	surface;
 	stores;
@@ -473,10 +498,12 @@ var x = class {
 	hasRightAxis = !1;
 	stackGroupsAll;
 	stackGroupsByAxis;
+	stackWarned = /* @__PURE__ */ new Set();
 	dirty = !1;
 	cursorX = -1;
 	cursorY = -1;
 	showCrosshair = !1;
+	cursorLogical = -1;
 	autoDraw;
 	rafScheduled = 0;
 	suspendCount = 0;
@@ -484,6 +511,10 @@ var x = class {
 	resizeObserver = null;
 	destroyed = !1;
 	liveRegion = null;
+	reducedMotionMql = null;
+	handleReducedMotionChange = () => {
+		this.draw();
+	};
 	handleResize = () => this.onResize();
 	handleMouseMove = (e) => this.onMouseMove(e);
 	handleMouseLeave = () => this.onMouseLeave();
@@ -495,16 +526,16 @@ var x = class {
 		}, this.autoDraw = this.opts.autoDraw, this.seriesConfigs = this.opts.series.length > 0 ? this.opts.series : [{
 			name: "Series 0",
 			color: this.opts.lineColor
-		}], this.validateOpts(), this.surface = new i(t), this.stores = this.seriesConfigs.map(() => new r()), this.hasRightAxis = this.seriesConfigs.some((e) => e.yAxis === "right"), this.stackGroupsAll = this.computeAllStackGroups(), this.stackGroupsByAxis = {
+		}], this.validateOpts(), this.surface = new a(t), this.stores = this.seriesConfigs.map(() => new r()), this.hasRightAxis = this.seriesConfigs.some((e) => e.yAxis === "right"), this.stackGroupsAll = this.computeAllStackGroups(), this.stackGroupsByAxis = {
 			left: this.computeStackGroupsOnAxis("left"),
 			right: this.computeStackGroupsOnAxis("right")
-		}, n?.maxPoints != null && n.maxPoints > 0) for (let e of this.stores) e.initRing(n.maxPoints);
-		(this.opts.yMin !== 0 || this.opts.yMax !== 0) && (this.gridDomainLeft.yMin = this.opts.yMin, this.gridDomainLeft.yMax = this.opts.yMax, this.gridDomainRight.yMin = this.opts.yMin, this.gridDomainRight.yMax = this.opts.yMax, this.gridPinned = !0), this.dirty = !0, this.attachEvents(), this.applySystemTheme(), this.ensureLiveRegion();
+		}, this.validateStackGroups(), n?.maxPoints != null && n.maxPoints > 0) for (let e of this.stores) e.initRing(n.maxPoints);
+		(this.opts.yMin !== void 0 || this.opts.yMax !== void 0) && (this.opts.yMin !== void 0 && (this.gridDomainLeft.yMin = this.opts.yMin), this.opts.yMax !== void 0 && (this.gridDomainLeft.yMax = this.opts.yMax), this.opts.yMin !== void 0 && (this.gridDomainRight.yMin = this.opts.yMin), this.opts.yMax !== void 0 && (this.gridDomainRight.yMax = this.opts.yMax), this.gridPinned = !0), this.dirty = !0, this.attachEvents(), this.applySystemTheme(), this.ensureLiveRegion();
 	}
 	validateOpts() {
 		this.opts.maxPoints < 0 && (console.warn(`[goro-charts] maxPoints must be >= 0, got ${this.opts.maxPoints}. Using 0.`), this.opts.maxPoints = 0), this.opts.fontSize < 6 && console.warn(`[goro-charts] fontSize ${this.opts.fontSize} is very small. Minimum recommended: 6.`);
 		let e = this.opts.padding;
-		e.some((e) => e < 0) && (console.warn(`[goro-charts] padding values must be >= 0, got [${e}]. Clamping to 0.`), this.opts.padding = e.map((e) => Math.max(0, e))), this.opts.yMin > 0 && this.opts.yMax > 0 && this.opts.yMin >= this.opts.yMax && (console.warn(`[goro-charts] yMin (${this.opts.yMin}) must be < yMax (${this.opts.yMax}). Swapping.`), [this.opts.yMin, this.opts.yMax] = [this.opts.yMax, this.opts.yMin]);
+		e.some((e) => e < 0) && (console.warn(`[goro-charts] padding values must be >= 0, got [${e}]. Clamping to 0.`), this.opts.padding = e.map((e) => Math.max(0, e))), this.opts.yMin !== void 0 && this.opts.yMax !== void 0 && this.opts.yMin >= this.opts.yMax && (console.warn(`[goro-charts] yMin (${this.opts.yMin}) must be < yMax (${this.opts.yMax}). Swapping.`), [this.opts.yMin, this.opts.yMax] = [this.opts.yMax, this.opts.yMin]);
 		for (let e = 0; e < this.seriesConfigs.length; e++) {
 			let t = this.seriesConfigs[e];
 			(!t.name || t.name.trim() === "") && (console.warn(`[goro-charts] series[${e}] name is empty. Using "Series ${e}".`), this.seriesConfigs[e] = {
@@ -518,7 +549,8 @@ var x = class {
 	}
 	applySystemTheme() {
 		try {
-			window.matchMedia("(prefers-reduced-motion: reduce)").matches && (this.autoDraw = !1), window.matchMedia("(prefers-contrast: more)").matches && (this.opts.gridColor === "rgba(255,255,255,0.08)" && (this.opts.gridColor = "rgba(255,255,255,0.25)"), this.opts.textColor === "rgba(255,255,255,0.5)" && (this.opts.textColor = "rgba(255,255,255,0.8)")), window.matchMedia("(forced-colors: active)").matches && (this.opts.textColor = "CanvasText", this.opts.bgColor = "Canvas", this.opts.gridColor = "GrayText", this.opts.axisColor = "GrayText", this.opts.crosshairColor = "GrayText");
+			let e = window.matchMedia("(prefers-reduced-motion: reduce)");
+			this.reducedMotionMql = e, e.addEventListener("change", this.handleReducedMotionChange), window.matchMedia("(prefers-contrast: more)").matches && (this.opts.gridColor === "rgba(255,255,255,0.08)" && (this.opts.gridColor = "rgba(255,255,255,0.25)"), this.opts.textColor === "rgba(255,255,255,0.5)" && (this.opts.textColor = "rgba(255,255,255,0.8)")), window.matchMedia("(forced-colors: active)").matches && (this.opts.textColor = "CanvasText", this.opts.bgColor = "Canvas", this.opts.gridColor = "GrayText", this.opts.axisColor = "GrayText", this.opts.crosshairColor = "GrayText");
 		} catch {}
 	}
 	ensureLiveRegion() {
@@ -532,38 +564,68 @@ var x = class {
 			count: e.count,
 			last: e.lastValue
 		})).filter((e) => e.count > 0), t;
-		t = e.length === 0 ? "Chart: no data" : `Chart: ${e.map((e) => `${e.config.name} ${c(e.last)}`).join(", ")}`, this.surface.canvas.setAttribute("aria-label", t);
+		t = e.length === 0 ? "Chart: no data" : `Chart: ${e.map((e) => `${e.config.name} ${l(e.last)}`).join(", ")}`, this.surface.canvas.setAttribute("aria-label", t);
+	}
+	referenceSeriesIndex() {
+		for (let e = 0; e < this.stores.length; e++) if (this.stores[e].count > 0) return e;
+		return -1;
 	}
 	onKeyDown(e) {
 		if (document.activeElement !== this.surface.canvas) return;
-		let t = e.shiftKey ? 10 : 1, n = this.plotRect();
+		let t = e.shiftKey ? 10 : 1, n = this.referenceSeriesIndex();
+		if (n < 0) return;
+		let r = this.stores[n].count;
 		switch (e.key) {
 			case "ArrowLeft":
-				e.preventDefault(), this.cursorX = Math.max(n.x, this.cursorX - t), this.showCrosshair = !0, this.draw(), this.notifySyncCrosshair();
+				e.preventDefault(), this.cursorLogical < 0 || this.cursorLogical >= r ? this.cursorLogical = r - 1 : this.cursorLogical = Math.max(0, this.cursorLogical - t);
 				break;
 			case "ArrowRight":
-				e.preventDefault(), this.cursorX = Math.min(n.x + n.w, this.cursorX + t), this.showCrosshair = !0, this.draw(), this.notifySyncCrosshair();
+				e.preventDefault(), this.cursorLogical < 0 || this.cursorLogical >= r ? this.cursorLogical = 0 : this.cursorLogical = Math.min(r - 1, this.cursorLogical + t);
 				break;
 			case "Escape":
 				e.preventDefault(), this.showCrosshair = !1, this.draw(), this.notifySyncCrosshairLeave();
-				break;
+				return;
+			default: return;
 		}
+		let i = this.stores[n], a = i.xArr[i.physOf(this.cursorLogical)], o = this.plotRect(), s = (this.seriesConfigs[n].yAxis ?? "left") === "right" ? this.gridDomainRight : this.gridDomainLeft;
+		this.cursorX = u(a, s, o), this.showCrosshair = !0, this.draw(), this.notifySyncCrosshair();
 	}
 	notifySyncCrosshair() {
-		let e = this.surface.canvas.getBoundingClientRect().left + this.cursorX;
+		let e = f(this.cursorX, this.gridDomainLeft, this.plotRect());
 		for (let t of this.syncTargets) t.injectCursor(e);
 	}
 	notifySyncCrosshairLeave() {
 		for (let e of this.syncTargets) e.injectCursorLeave();
 	}
-	setData(e, t, n) {
-		this.destroyed || (this.storeAt(e).setData(t, n), this.gridPinned = !1, this.invalidate());
+	setData(e, t, n, r) {
+		if (!this.destroyed) {
+			try {
+				this.storeAt(e).setData(t, n, r);
+			} catch (t) {
+				throw Error(`series ${e}: ${t.message}`, { cause: t });
+			}
+			this.gridPinned = !1, this.invalidate();
+		}
 	}
 	append(e, t, n) {
-		this.destroyed || (this.storeAt(e).append(t, n), this.invalidate());
+		if (!this.destroyed) {
+			try {
+				this.storeAt(e).append(t, n);
+			} catch (t) {
+				throw Error(`series ${e}: ${t.message}`, { cause: t });
+			}
+			this.invalidate();
+		}
 	}
 	appendBatch(e, t, n) {
-		this.destroyed || (this.storeAt(e).appendBatch(t, n), this.invalidate());
+		if (!this.destroyed) {
+			try {
+				this.storeAt(e).appendBatch(t, n);
+			} catch (t) {
+				throw Error(`series ${e}: ${t.message}`, { cause: t });
+			}
+			this.invalidate();
+		}
 	}
 	setMaxPoints(e) {
 		if (!this.destroyed) {
@@ -574,15 +636,20 @@ var x = class {
 	clear() {
 		if (!this.destroyed) {
 			for (let e of this.stores) e.clear();
-			this.gridPinned = !1, this.invalidate();
+			this.gridPinned = !1, this.stackWarned.clear(), this.invalidate();
 		}
 	}
 	get seriesCount() {
 		return this.destroyed ? 0 : this.stores.length;
 	}
-	get renderedPointCount() {
+	get windowPointCount() {
 		return this.destroyed ? 0 : this.stores.reduce((e, t) => e + t.count, 0);
 	}
+	get drawnPointCount() {
+		if (this.destroyed) return 0;
+		let e = this.plotRect().w;
+		return e <= 0 ? this.windowPointCount : this.stores.reduce((t, n) => n.count === 0 ? t : t + (n.count > e * 2 ? Math.min(n.count, Math.ceil(e * 2)) : n.count), 0);
+	}
 	pointCount(e) {
 		return this.destroyed ? 0 : this.stores[e].count;
 	}
@@ -607,6 +674,9 @@ var x = class {
 	sync(e) {
 		this.destroyed || (this.syncTargets.add(e), e.syncTargets.add(this));
 	}
+	unsync(e) {
+		this.destroyed || (this.syncTargets.delete(e), e.syncTargets.delete(this));
+	}
 	onHover;
 	draw() {
 		if (this.destroyed || !this.dirty && !this.showCrosshair) return;
@@ -618,8 +688,10 @@ var x = class {
 				let { groups: t } = this.detectAllStackGroups(), r = /* @__PURE__ */ new Map();
 				for (let [, e] of t) {
 					if (e.length < 2) continue;
-					let t = this.accumulateStackGroup(e);
-					if (t) for (let n of e) r.set(n, new Float64Array(t));
+					let { posCum: t, negCum: n } = this.accumulateStackGroup(e);
+					if (!t && !n) continue;
+					let i = t && n ? t.map((e, t) => e + n[t]) : t ?? n;
+					for (let t of e) r.set(t, new Float64Array(i));
 				}
 				let i = this.stores.map((e, t) => {
 					let n = this.seriesConfigs[t], i = (n.yAxis ?? "left") === "right" ? this.gridDomainRight : this.gridDomainLeft, a = i.yMin, o = i.yMax;
@@ -634,10 +706,10 @@ var x = class {
 					});
 				});
 				if (this.onHover || this.liveRegion) {
-					let e = h(i, this.seriesConfigs, n, this.cursorX);
-					this.onHover && e.length > 0 && this.onHover(e), this.liveRegion && (this.liveRegion.textContent = e.length > 0 ? e.map((e) => `${e.label}: ${c(e.yVal)}`).join(", ") : "");
+					let e = g(i, this.seriesConfigs, n, this.cursorX);
+					this.onHover && e.length > 0 && this.onHover(e), this.liveRegion && (this.liveRegion.textContent = e.length > 0 ? e.map((e) => `${e.label}: ${l(e.yVal)}`).join(", ") : "");
 				}
-				g(this.surface.ctx, i, this.seriesConfigs, n, this.opts, {
+				_(this.surface.ctx, i, this.seriesConfigs, n, this.opts, {
 					x: this.cursorX,
 					y: this.cursorY
 				}, e);
@@ -646,12 +718,16 @@ var x = class {
 		}
 	}
 	destroy() {
-		this.destroyed || (this.destroyed = !0, this.rafScheduled &&= (cancelAnimationFrame(this.rafScheduled), 0), this.resizeObserver?.disconnect(), this.resizeObserver = null, this.surface.canvas.removeEventListener("mousemove", this.handleMouseMove), this.surface.canvas.removeEventListener("mouseleave", this.handleMouseLeave), this.surface.canvas.removeEventListener("keydown", this.handleKeyDown), this.liveRegion?.remove(), this.liveRegion = null, this.surface.dispose(), this.stores = []);
+		if (!this.destroyed) {
+			this.destroyed = !0, this.rafScheduled &&= (cancelAnimationFrame(this.rafScheduled), 0), this.resizeObserver?.disconnect(), this.resizeObserver = null, this.reducedMotionMql?.removeEventListener("change", this.handleReducedMotionChange), this.reducedMotionMql = null, this.surface.canvas.removeEventListener("mousemove", this.handleMouseMove), this.surface.canvas.removeEventListener("mouseleave", this.handleMouseLeave), this.surface.canvas.removeEventListener("keydown", this.handleKeyDown), this.liveRegion?.remove(), this.liveRegion = null;
+			for (let e of this.syncTargets) e.syncTargets.delete(this);
+			this.syncTargets.clear(), this.surface.dispose(), this.stores = [];
+		}
 	}
 	renderStatic(e) {
 		let t = this.surface.offscreenCtx(), { cssW: n, cssH: r } = this.surface;
 		if (t.clearRect(0, 0, n, r), t.fillStyle = this.opts.bgColor, t.fillRect(0, 0, n, r), this.stores.every((e) => e.count === 0)) return;
-		this.updateGridDomain(), f(t, this.gridDomainLeft, e, this.opts), p(t, this.gridDomainLeft, e, this.opts), this.hasRightAxis && p(t, this.gridDomainRight, e, this.opts, "right");
+		this.updateGridDomain(), p(t, this.gridDomainLeft, e, this.opts), m(t, this.gridDomainLeft, e, this.opts), this.hasRightAxis && m(t, this.gridDomainRight, e, this.opts, "right");
 		let { groups: i, stacked: a } = this.detectAllStackGroups();
 		for (let n = 0; n < this.stores.length; n++) {
 			if (a.has(n)) continue;
@@ -682,9 +758,9 @@ var x = class {
 				for (let i = 0; i < r.length; i++) this.renderOne(t, n[i], r[i], r[i].yArr, e);
 				continue;
 			}
-			v(t, r, i, e, (this.seriesConfigs[n[0]].yAxis ?? "left") === "right" ? this.gridDomainRight : this.gridDomainLeft);
+			y(t, r, i, e, (this.seriesConfigs[n[0]].yAxis ?? "left") === "right" ? this.gridDomainRight : this.gridDomainLeft);
 		}
-		_(t, this.seriesConfigs, e, this.opts);
+		v(t, this.seriesConfigs, e, this.opts);
 	}
 	renderOne(e, t, n, r, i) {
 		let a = this.seriesConfigs[t], o = {
@@ -743,20 +819,45 @@ var x = class {
 			stacked: t
 		};
 	}
+	validateStackGroups() {
+		for (let e = 0; e < this.stores.length; e++) {
+			let t = this.seriesConfigs[e].stack;
+			if (t) for (let n = e + 1; n < this.stores.length; n++) {
+				if (this.seriesConfigs[n].stack !== t) continue;
+				let r = this.seriesConfigs[e].yAxis ?? "left", i = this.seriesConfigs[n].yAxis ?? "left";
+				r !== i && console.warn(`[goro-charts] stack group "${t}" mixes axis ${r} (series ${e}) and ${i} (series ${n}). All series in a stack group must share the same yAxis.`);
+			}
+		}
+	}
 	accumulateStackGroup(e) {
 		let t = this.stores[e[0]].count;
-		if (t === 0) return null;
-		let n = new Float64Array(t);
-		for (let r of e) {
-			let e = this.stores[r], i = e.head, a = e.cap - e.head;
-			for (let r = 0; r < t; r++) n[r] += e.yArr[i], --a === 0 ? (i = 0, a = e.cap) : i++;
+		if (t === 0) return {
+			posCum: null,
+			negCum: null
+		};
+		for (let n of e) if (this.stores[n].count !== t && this.stores[n].count > 0) {
+			let r = `len:${e.join(",")}:${n}:${this.stores[n].count}:${t}`;
+			this.stackWarned.has(r) || (this.stackWarned.add(r), console.warn(`[goro-charts] stack accumulation skipped series ${n}: count=${this.stores[n].count} doesn't match group length ${t}.`));
 		}
-		return n;
+		let n = new Float64Array(t), r = new Float64Array(t), i = !1, a = !1;
+		for (let o of e) {
+			let e = this.stores[o];
+			if (e.count !== t) continue;
+			let s = e.head, c = e.cap - e.head;
+			for (let o = 0; o < t; o++) {
+				let t = e.yArr[s];
+				t > 0 ? (n[o] += t, i = !0) : t < 0 && (r[o] += t, a = !0), --c === 0 ? (s = 0, c = e.cap) : s++;
+			}
+		}
+		return {
+			posCum: i ? n : null,
+			negCum: a ? r : null
+		};
 	}
 	updateGridDomain() {
 		if (this.stores.every((e) => e.count === 0)) return;
-		let e = this.opts.yMin, t = this.opts.yMax, n = e !== 0 || t !== 0, r = this.stores.some((e) => e.isRing), i = () => {
-			n && (e !== 0 && (this.gridDomainLeft.yMin = e, this.gridDomainRight.yMin = e), t !== 0 && (this.gridDomainLeft.yMax = t, this.gridDomainRight.yMax = t));
+		let e = this.opts.yMin, t = this.opts.yMax, n = e !== void 0 || t !== void 0, r = this.stores.some((e) => e.isRing), i = () => {
+			n && (e !== void 0 && (this.gridDomainLeft.yMin = e, this.gridDomainRight.yMin = e), t !== void 0 && (this.gridDomainLeft.yMax = t, this.gridDomainRight.yMax = t));
 		};
 		if (r && !n) {
 			this.initDomain(this.gridDomainLeft, "left", .05), this.hasRightAxis && this.initDomain(this.gridDomainRight, "right", .05), this.refreshXDomain(), this.gridPinned = !0;
@@ -773,15 +874,17 @@ var x = class {
 		let { groups: r, stacked: i } = this.detectStackGroupsOnAxis(t);
 		for (let [, t] of r) {
 			if (t.length < 2) continue;
-			let n = this.accumulateStackGroup(t);
-			if (!n) continue;
-			let r = Infinity, i = -Infinity;
+			let { posCum: n, negCum: r } = this.accumulateStackGroup(t);
+			if (!n && !r) continue;
+			let i = Infinity, a = -Infinity;
 			for (let n of t) {
 				let t = this.stores[n];
 				t.xMin < e.xMin && (e.xMin = t.xMin), t.xMax > e.xMax && (e.xMax = t.xMax);
 			}
-			for (let e = 0; e < n.length; e++) n[e] < r && (r = n[e]), n[e] > i && (i = n[e]);
-			r < e.yMin && (e.yMin = r), i > e.yMax && (e.yMax = i);
+			let o = (e) => {
+				for (let t = 0; t < e.length; t++) e[t] < i && (i = e[t]), e[t] > a && (a = e[t]);
+			};
+			n && o(n), r && o(r), i < e.yMin && (e.yMin = i), a > e.yMax && (e.yMax = a);
 		}
 		for (let n = 0; n < this.stores.length; n++) {
 			if (i.has(n)) continue;
@@ -797,11 +900,12 @@ var x = class {
 		let n = e.yMax - e.yMin || 1, { groups: r, stacked: i } = this.detectStackGroupsOnAxis(t), a = !1;
 		for (let [, t] of r) {
 			if (t.length < 2) continue;
-			let r = this.accumulateStackGroup(t);
-			if (!r) continue;
-			let i = Infinity, o = -Infinity;
-			for (let e = 0; e < r.length; e++) r[e] < i && (i = r[e]), r[e] > o && (o = r[e]);
-			i < e.yMin && (e.yMin = i - n * .1, a = !0), o > e.yMax && (e.yMax = o + n * .1, a = !0);
+			let { posCum: r, negCum: i } = this.accumulateStackGroup(t);
+			if (!r && !i) continue;
+			let o = Infinity, s = -Infinity, c = (e) => {
+				for (let t = 0; t < e.length; t++) e[t] < o && (o = e[t]), e[t] > s && (s = e[t]);
+			};
+			r && c(r), i && c(i), o < e.yMin && (e.yMin = o - n * .1, a = !0), s > e.yMax && (e.yMax = s + n * .1, a = !0);
 		}
 		for (let r = 0; r < this.stores.length; r++) {
 			if (i.has(r)) continue;
@@ -841,8 +945,12 @@ var x = class {
 		return t;
 	}
 	injectCursor(e) {
-		let t = this.surface.canvas.getBoundingClientRect();
-		this.cursorX = e - t.left, this.showCrosshair = !0, this.draw();
+		let t = this.gridDomainLeft;
+		if (e < t.xMin || e > t.xMax) {
+			this.injectCursorLeave();
+			return;
+		}
+		this.cursorX = u(e, t, this.plotRect()), this.showCrosshair = !0, this.draw();
 	}
 	injectCursorLeave() {
 		this.showCrosshair = !1, this.draw();
@@ -863,7 +971,7 @@ var x = class {
 };
 //#endregion
 //#region src/render/line.ts
-function S(e, t, n, r) {
+function C(e, t, n, r) {
 	let { xArr: i, yArr: a, count: o, cap: s } = t;
 	if (o === 0) return;
 	e.strokeStyle = r.lineColor, e.lineWidth = r.lineWidth, e.lineJoin = "round", e.lineCap = "round", e.beginPath();
@@ -885,14 +993,14 @@ function S(e, t, n, r) {
 }
 //#endregion
 //#region src/charts/line-chart.ts
-var C = class extends x {
+var w = class extends S {
 	renderSeries(e, t, n, r) {
-		S(e, t, n, r);
+		C(e, t, n, r);
 	}
 };
 //#endregion
 //#region src/render/area.ts
-function w(e, t, n, r) {
+function T(e, t, n, r) {
 	let { xArr: i, yArr: a, count: o, cap: s } = t;
 	if (o === 0) return;
 	let c = t.xMax - t.xMin, l = t.yMax - t.yMin, u = c > 0 ? n.w / c : 0, d = n.x - t.xMin * u, f = l > 0 ? n.h / l : 0, p = n.y + n.h + t.yMin * f, m = n.y + n.h, h = t.head, g = s - t.head;
@@ -941,42 +1049,42 @@ function w(e, t, n, r) {
 }
 //#endregion
 //#region src/charts/area-chart.ts
-var T = class extends x {
+var E = class extends S {
 	renderSeries(e, t, n, r) {
-		w(e, t, n, r);
+		T(e, t, n, r);
 	}
 };
 //#endregion
 //#region src/render/scatter.ts
-function E(e, t, n) {
+function D(e, t, n) {
 	let r = e + t;
 	return r >= n ? r - n : r;
 }
-function D(e, t, n, r) {
+function O(e, t, n, r) {
 	let { xArr: i, yArr: a, count: o, cap: s } = t;
 	if (o === 0) return;
 	let c = t.xMax - t.xMin, l = t.yMax - t.yMin, u = c > 0 ? n.w / c : 0, d = n.x - t.xMin * u, f = l > 0 ? n.h / l : 0, p = n.y + n.h + t.yMin * f, m = r.maxDots, h = o > m ? Math.max(1, Math.floor(o / m)) : 1, g = r.pointRadius, _ = t.head;
 	e.fillStyle = r.lineColor, e.beginPath();
 	for (let t = 0; t < o; t += h) {
 		let t = d + i[_] * u, n = p - a[_] * f;
-		e.moveTo(t + g, n), e.arc(t, n, g, 0, Math.PI * 2), _ = E(_, h, s);
+		e.moveTo(t + g, n), e.arc(t, n, g, 0, Math.PI * 2), _ = D(_, h, s);
 	}
 	e.fill();
 }
 //#endregion
 //#region src/charts/scatter-chart.ts
-var O = class extends x {
+var k = class extends S {
 	renderSeries(e, t, n, r) {
-		D(e, t, n, r);
+		O(e, t, n, r);
 	}
-}, k = {
+}, A = {
 	gridColor: "rgba(255,255,255,0.08)",
 	axisColor: "rgba(255,255,255,0.25)",
 	textColor: "rgba(255,255,255,0.5)",
 	crosshairColor: "rgba(255,255,255,0.3)",
 	pointColor: "#4ea8ff",
 	bgColor: "#111"
-}, A = {
+}, j = {
 	gridColor: "rgba(0,0,0,0.08)",
 	axisColor: "rgba(0,0,0,0.18)",
 	textColor: "rgba(0,0,0,0.55)",
@@ -985,6 +1093,6 @@ var O = class extends x {
 	bgColor: "#fff"
 };
 //#endregion
-export { T as AreaChart, k as DARK, A as LIGHT, C as LineChart, O as ScatterChart };
+export { E as AreaChart, A as DARK, j as LIGHT, w as LineChart, k as ScatterChart };
 
 //# sourceMappingURL=goro-charts.js.map