@martinomagnifico/tablechart 1.0.6 → 1.0.7

package/dist/tablechart-shared.mjs

@@ -10,6 +10,7 @@ var e = "tablechart", t = "tablechart-plot", n = "tablechart-value", r = "tablec
 	shape: "straight",
 	legend: !1,
 	tooltip: "auto",
+	tooltipparent: null,
 	table: "never",
 	totallabel: "Total",
 	controls: !0,
@@ -1202,9 +1203,13 @@ var Te = (e) => e.map((e) => ({
 		]), i;
 	};
 	return r.append(i("previous"), i("next")), r;
-}, We = (e, t, n, r = 10, i = 8, a = 12) => {
-	let { offsetWidth: o, offsetHeight: s } = e, { clientWidth: c, clientHeight: l } = document.documentElement, u = n.top - i, d = l - n.bottom - i, f = s + r <= u ? !0 : s + r <= d ? !1 : u >= d, p = f ? n.top - r - s : n.bottom + r, m = n.left + n.width / 2, h = Math.max(i, Math.min(m - o / 2, c - o - i));
-	e.style.left = `${h}px`, e.style.top = `${Math.max(i, Math.min(p, l - s - i))}px`, e.dataset.side = f ? "top" : "bottom", t.style.left = `${Math.max(a, Math.min(m - h, o - a))}px`;
+}, We = (e, t, n, r = {
+	x: 0,
+	y: 0,
+	scale: 1
+}, i = 2, a = 8, o = 12) => {
+	let s = e.getBoundingClientRect(), c = s.width, l = s.height, u = Number.parseFloat(getComputedStyle(e).borderLeftWidth) || 0, d = t.getBoundingClientRect().height / 2 + (i - u) * r.scale, f = o * r.scale, { clientWidth: p, clientHeight: m } = document.documentElement, h = n.top - a, g = m - n.bottom - a, _ = l + d <= h ? !0 : l + d <= g ? !1 : h >= g, v = _ ? n.top - d - l : n.bottom + d, y = n.left + n.width / 2, b = Math.max(a, Math.min(y - c / 2, p - c - a));
+	e.style.left = `${(b - r.x) / r.scale}px`, e.style.top = `${(Math.max(a, Math.min(v, m - l - a)) - r.y) / r.scale}px`, e.dataset.side = _ ? "top" : "bottom", t.style.left = `${Math.max(f, Math.min(y - b, c - f)) / r.scale - u}px`;
 }, Ge = "tablechart-tooltip", Ke = [
 	"--tablechart-surface",
 	"--tablechart-tooltip-surface",
@@ -1216,42 +1221,48 @@ var Te = (e) => e.map((e) => ({
 ], Z = null, qe, Je, Q = null, Ye = null, Xe = 0, $ = () => {
 	clearTimeout(Xe), Z && Q && (Z.hidden = !0, Q = null, Ye = null);
 }, Ze = !1, Qe = !0, $e = NaN, et = NaN, tt = !1, nt = () => {
-	tt || (tt = !0, document.addEventListener("pointermove", (e) => {
+	if (tt) return;
+	tt = !0, document.addEventListener("pointermove", (e) => {
 		e.pointerType === "mouse" && (Qe = e.screenX !== $e || e.screenY !== et, $e = e.screenX, et = e.screenY, Qe && (Ze = !1));
 	}, {
 		capture: !0,
 		passive: !0
-	}), document.addEventListener("keydown", () => {
+	});
+	let e = () => {
 		Ze = !0, $();
-	}, !0));
-}, rt = () => {
+	};
+	document.addEventListener("keydown", e, !0), window.addEventListener("scroll", e, {
+		capture: !0,
+		passive: !0
+	});
+}, rt = (e, t) => t / Number.parseFloat(getComputedStyle(e).width) || 1, it = (e) => {
+	let t = e.tooltipparent;
+	return (typeof t == "string" ? document.querySelector(t) : t) ?? document.body;
+}, at = () => {
 	clearTimeout(Xe), Xe = window.setTimeout($, 120);
-}, it = () => {
+}, ot = () => {
 	let e = document.createElement("div");
-	return e.className = Ge, e.setAttribute("aria-hidden", "true"), e.hidden = !0, qe = document.createElement("div"), Je = document.createElement("div"), Je.className = `${Ge}-arrow`, e.append(qe, Je), document.body.append(e), e.addEventListener("pointerenter", () => clearTimeout(Xe)), e.addEventListener("pointerleave", (e) => e.pointerType === "mouse" && rt()), document.addEventListener("pointerdown", (t) => {
+	return e.className = Ge, e.setAttribute("aria-hidden", "true"), e.hidden = !0, qe = document.createElement("div"), Je = document.createElement("div"), Je.className = `${Ge}-arrow`, e.append(qe, Je), document.body.append(e), e.addEventListener("pointerenter", () => clearTimeout(Xe)), e.addEventListener("pointerleave", (e) => e.pointerType === "mouse" && at()), document.addEventListener("pointerdown", (t) => {
 		let n = t.target;
 		Q && !Q.plot.contains(n) && !e.contains(n) && $();
-	}), window.addEventListener("scroll", $, {
-		capture: !0,
-		passive: !0
 	}), window.addEventListener("resize", $), e;
-}, at = (e, t) => {
+}, st = (e, t) => {
 	let n = t ? t.style.getPropertyValue("--step") : "x";
 	return n === "" || Number(n) < e.step;
-}, ot = (e, t) => {
+}, ct = (e, t) => {
 	let n = e.svg.querySelector(`[data-series="${t + 1}"]:not(.tablechart-hole)`);
 	if (!n) return;
 	let r = getComputedStyle(n);
 	return r.fill && r.fill !== "none" ? r.fill : r.stroke;
-}, st = (e, t, n) => {
+}, lt = (e, t, n) => {
 	let r = e.series.length > 1, i = [];
 	for (let [n, a] of e.seriesValues.entries()) {
-		if (!at(e, a[t])) continue;
+		if (!st(e, a[t])) continue;
 		let o = r ? e.figure.querySelector(`.tablechart-name[data-series="${n + 1}"]`) : null;
 		i.push({
 			name: r ? o?.textContent ?? e.series[n].name : "",
 			value: a[t].textContent ?? "",
-			colour: r ? ot(e, n) : void 0,
+			colour: r ? ct(e, n) : void 0,
 			sample: o ? {
 				marker: o.dataset.marker ?? null,
 				open: o.hasAttribute("data-open"),
@@ -1261,11 +1272,11 @@ var Te = (e) => e.map((e) => ({
 		});
 	}
 	let a = e.totals[t];
-	return i.length > 1 && at(e, a) && i.push({
+	return i.length > 1 && st(e, a) && i.push({
 		name: n.totallabel,
 		value: a.textContent ?? ""
 	}), i;
-}, ct = (e, t) => {
+}, ut = (e, t) => {
 	if (e.type.centre && e.values[t]) return e.values[t].getBoundingClientRect();
 	let n = e.svg.querySelectorAll(`[data-row="${t + 1}"]:not(.tablechart-connector, .tablechart-leader)`), r = null;
 	for (let e of n) {
@@ -1280,11 +1291,11 @@ var Te = (e) => e.map((e) => ({
 		100
 	];
 	return new DOMRect(i.left + i.width * a / 100, i.top + i.height * o / 100, i.width * s / 100, i.height * c / 100);
-}, lt = (e, t, n) => {
+}, dt = (e, t, n) => {
 	if (clearTimeout(Xe), Q === e && Ye === t) return;
-	let r = (e.type.tooltip ?? st)(e, t, n);
+	let r = (e.type.tooltip ?? lt)(e, t, n);
 	if (!r.length) return $();
-	Q && Q !== e && $(), Z ?? (Z = it());
+	Q && Q !== e && $(), Z ?? (Z = ot());
 	let i = (e, t, n, r = !1, i) => {
 		let a = document.createElement("div");
 		if (a.className = `${Ge}-line`, n) {
@@ -1305,13 +1316,21 @@ var Te = (e) => e.map((e) => ({
 		let t = s.getPropertyValue(e).trim();
 		t ? Z.style.setProperty(e, t) : Z.style.removeProperty(e);
 	}
-	Z.style.setProperty("--_color", s.color), Z.style.colorScheme = s.colorScheme, Z.style.fontFamily = s.fontFamily, Z.style.fontSize = s.fontSize, Q = e, Ye = t, Z.hidden = !1, Z.style.left = "0px", We(Z, Je, ct(e, t));
-}, ut = (e, t, n = !1) => {
+	Z.style.setProperty("--_color", s.color), Z.style.colorScheme = s.colorScheme, Z.style.fontFamily = s.fontFamily;
+	let c = it(n);
+	Z.parentElement !== c && c.append(Z), Q = e, Ye = t, Z.hidden = !1, Z.style.left = "0px", Z.style.top = "0px";
+	let l = Z.getBoundingClientRect(), u = {
+		x: l.left,
+		y: l.top,
+		scale: rt(Z, l.width)
+	}, d = rt(e.plot, e.plot.getBoundingClientRect().width);
+	Z.style.fontSize = `${Number.parseFloat(s.fontSize) * d / u.scale}px`, We(Z, Je, ut(e, t), u);
+}, ft = (e, t, n = !1) => {
 	let { plot: r } = e;
 	r.setAttribute("data-hover", ""), nt();
 	let i = (t) => {
 		if (e.rowAt) {
-			let n = r.getBoundingClientRect(), i = n.width / r.offsetWidth || 1;
+			let n = r.getBoundingClientRect(), i = rt(r, n.width);
 			return e.rowAt((t.clientX - n.left) / i, (t.clientY - n.top) / i);
 		}
 		let n = t.target.closest?.("[data-row]")?.getAttribute("data-row");
@@ -1326,8 +1345,8 @@ var Te = (e) => e.map((e) => ({
 		if (!r.classList.contains("is-placed") || !e.figure.classList.contains("is-shown")) return;
 		if (n && !e.figure.hasAttribute("data-left-out")) return Q === e ? $() : void 0;
 		let c = i(a);
-		if (s = c, c === null || o(c)) return Q === e ? rt() : void 0;
-		lt(e, c, t);
+		if (s = c, c === null || o(c)) return Q === e ? at() : void 0;
+		dt(e, c, t);
 	}, l = (t) => {
 		let n = t.target;
 		return e.svg.contains(n) && n.hasAttribute("data-row") ? n : null;
@@ -1341,42 +1360,42 @@ var Te = (e) => e.map((e) => ({
 		if (!r) return;
 		a.delete(r);
 		let i = Number(r.getAttribute("data-row")) - 1;
-		s === i && !o(i) && !Ze && lt(e, i, t);
+		s === i && !o(i) && !Ze && dt(e, i, t);
 	};
 	e.svg.addEventListener("transitionend", u), e.svg.addEventListener("transitioncancel", u), r.addEventListener("pointermove", c), r.addEventListener("pointerdown", c), r.addEventListener("pointerleave", (t) => {
-		t.pointerType === "mouse" && (s = null, Q === e && rt());
+		t.pointerType === "mouse" && (s = null, Q === e && at());
 	});
-}, dt = (e) => {
+}, pt = (e) => {
 	Q === e && $();
-}, ft = {
+}, mt = {
 	area: Oe,
 	bar: pe,
 	column: me,
 	donut: _e,
 	line: De,
 	waterfall: je
-}, pt = {
+}, ht = {
 	"axis-break": M,
 	trend: te,
 	bracket: H
-}, mt = Object.keys(pt), ht = (e) => {
+}, gt = Object.keys(ht), _t = (e) => {
 	let t = "";
 	for (let n = e.previousSibling; n && (t = (n.textContent ?? "") + t, !t.trim()); n = n.previousSibling);
 	return t.trim();
-}, gt = [
+}, vt = [
 	"straight",
 	"step",
 	"smooth"
-], _t = (e, t) => {
+], yt = (e, t) => {
 	let n = e.dataset.chartShape;
-	return n && gt.includes(n) ? n : gt.includes(t.shape) ? t.shape : "straight";
-}, vt = (e) => {
+	return n && vt.includes(n) ? n : vt.includes(t.shape) ? t.shape : "straight";
+}, bt = (e) => {
 	for (let t of e.querySelectorAll("br")) {
-		if (t.previousElementSibling?.classList.contains("tablechart-sr") || /[.!?:;,…]$/.test(ht(t))) continue;
+		if (t.previousElementSibling?.classList.contains("tablechart-sr") || /[.!?:;,…]$/.test(_t(t))) continue;
 		let e = document.createElement("span");
 		e.className = p, e.textContent = ". ", t.before(e);
 	}
-}, yt = (e, t, n) => {
+}, xt = (e, t, n) => {
 	let r = e.querySelector("table");
 	if (!r) return null;
 	let i = r.querySelector("tfoot [data-chart-total]");
@@ -1387,22 +1406,22 @@ var Te = (e) => e.map((e) => ({
 	s && n.langattribute && o.setAttribute(n.langattribute, `${s}-total`);
 	let c = a.insertCell();
 	return c.setAttribute("data-chart-total", ""), c.dataset.value = t.dataset.value ?? "0", a.prepend(o), c;
-}, bt = 0, xt = (e) => {
+}, St = 0, Ct = (e) => {
 	let t = e.querySelector(":scope > figcaption");
 	if (!t) return;
-	vt(t);
+	bt(t);
 	let n = (e) => e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby"), r = (e) => {
-		t.id || (t.id = `tablechart-caption-${++bt}`), e.setAttribute("aria-labelledby", t.id);
+		t.id || (t.id = `tablechart-caption-${++St}`), e.setAttribute("aria-labelledby", t.id);
 	};
 	e.tagName === "FIGURE" && !n(e) && r(e);
 	let i = e.querySelector("table");
 	i && !n(i) && !i.querySelector(":scope > caption") && r(i);
-}, St = (r, i, a = null) => {
-	let o = a ?? (r.getAttribute("data-chart") || "column"), s = ft[o];
-	if (!s) return console.warn(`[${e}] Unknown chart type "${o}". Known types: ${Object.keys(ft).join(", ")}.`), r.setAttribute("data-chart-empty", ""), null;
+}, wt = (r, i, a = null) => {
+	let o = a ?? (r.getAttribute("data-chart") || "column"), s = mt[o];
+	if (!s) return console.warn(`[${e}] Unknown chart type "${o}". Known types: ${Object.keys(mt).join(", ")}.`), r.setAttribute("data-chart-empty", ""), null;
 	let l = Ne(r, i.langattribute);
 	if (!l.length) return console.warn(r.querySelector("table") ? `[${e}] A chart has no rows in its table, so there is nothing to draw.` : `[${e}] A chart has no table, so there is nothing to draw.`, r), r.setAttribute("data-chart-empty", ""), null;
-	xt(r);
+	Ct(r);
 	let d = Ie(r, l, i.langattribute);
 	d.length > 1 && !s.series && (console.warn(`[${e}] A ${o} chart uses only the first of its ${d.length} value columns.`), d = d.slice(0, 1));
 	let f = d.length > 1;
@@ -1430,7 +1449,7 @@ var Te = (e) => e.map((e) => ({
 		let n = E("tablechart-name", D ?? h);
 		D && (n.dataset.place = "legend");
 		let a = s.legend ?? s.swatch;
-		if (a && (n.dataset.swatch = a), n.textContent = e.name, !a && _t(r, i) !== "step") {
+		if (a && (n.dataset.swatch = a), n.textContent = e.name, !a && yt(r, i) !== "step") {
 			let e = ye(d, t);
 			n.dataset.marker = e.shape, n.toggleAttribute("data-open", e.open);
 		}
@@ -1440,7 +1459,7 @@ var Te = (e) => e.map((e) => ({
 		let e = l.find((e) => e.isTotal), t = e ? e.value : l.reduce((e, t) => e + Math.abs(t.value), 0);
 		k.dataset.value = String(t), e && (k.dataset.decimals = String(P(e.number)));
 	}
-	let A = k && !l.some((e) => e.isTotal) ? yt(r, k, i) : null, j = s.categories === "beside", M = document.createElement("div");
+	let A = k && !l.some((e) => e.isTotal) ? xt(r, k, i) : null, j = s.categories === "beside", M = document.createElement("div");
 	M.className = "tablechart-categories", M.setAttribute("aria-hidden", "true"), M.inert = !0, j ? M.dataset.place = "beside" : s.centre && (M.dataset.place = "key"), M.style.setProperty("--_columns", String(l.length));
 	let F = 0;
 	for (let [e, t] of l.entries()) {
@@ -1460,7 +1479,7 @@ var Te = (e) => e.map((e) => ({
 		hint: L && `${L}-step`
 	}, i.langattribute) : null;
 	R && r.appendChild(R);
-	let z = r.getAttribute("data-chart-table"), B = z && wt.includes(z) ? z : i.table;
+	let z = r.getAttribute("data-chart-table"), B = z && Et.includes(z) ? z : i.table;
 	if (B === "never") r.removeAttribute("data-table");
 	else {
 		r.setAttribute("data-table", B);
@@ -1468,8 +1487,8 @@ var Te = (e) => e.map((e) => ({
 		e && r.append(e);
 	}
 	let V = Array.from(r.querySelectorAll("[data-annotation]")).map((t) => {
-		let n = t.getAttribute("data-annotation"), r = pt[n];
-		if (!r) return console.warn(`[${e}] Unknown annotation "${n}". Known annotations: ${Object.keys(pt).join(", ")}.`), null;
+		let n = t.getAttribute("data-annotation"), r = ht[n];
+		if (!r) return console.warn(`[${e}] Unknown annotation "${n}". Known annotations: ${Object.keys(ht).join(", ")}.`), null;
 		let i = Number.parseInt(t.getAttribute("data-series") ?? "1", 10), a = i >= 1 && i <= d.length ? i - 1 : 0;
 		return i !== a + 1 && console.warn(`[${e}] An annotation reads line ${i}, which is not there; it reads line 1.`), {
 			spec: t,
@@ -1479,7 +1498,7 @@ var Te = (e) => e.map((e) => ({
 			after: l.length
 		};
 	}).filter((e) => e !== null);
-	i.animate && r.setAttribute("data-animate", Et(r, o, i, !!I));
+	i.animate && r.setAttribute("data-animate", Ot(r, o, i, !!I));
 	let H = {
 		figure: r,
 		plot: h,
@@ -1509,31 +1528,31 @@ var Te = (e) => e.map((e) => ({
 		t && He(H, H.step + (t === "next" ? 1 : -1));
 	}), He(H, 0, !0);
 	let U = r.getAttribute("data-chart-tooltip") ?? r.getAttribute("data-chart-hover"), ee = U === "false" ? !1 : U === "auto" ? "auto" : U !== null || i.hover !== !1 && i.tooltip;
-	return ee && ut(H, i, ee === "auto"), jt(H, i), H;
-}, Ct = {
+	return ee && ft(H, i, ee === "auto"), Nt(H, i), H;
+}, Tt = {
 	grow: "grow",
 	sweep: "sweep"
-}, wt = [
+}, Et = [
 	"never",
 	"auto",
 	"print",
 	"always"
-], Tt = {
-	...Ct,
+], Dt = {
+	...Tt,
 	up: "grow",
 	across: "sweep"
-}, Et = (e, t, n, r) => {
-	let i = t === "line" || t === "area", a = i ? Tt : Ct, o = a[e.getAttribute("data-chart-animate") ?? ""] ?? a[String(n.animate)];
+}, Ot = (e, t, n, r) => {
+	let i = t === "line" || t === "area", a = i ? Dt : Tt, o = a[e.getAttribute("data-chart-animate") ?? ""] ?? a[String(n.animate)];
 	return i ? r ? "sweep" : o ?? "sweep" : t === "donut" || t === "waterfall" ? o ?? "grow" : "grow";
-}, Dt = (e) => {
+}, kt = (e) => {
 	let t = getComputedStyle(e), n = (t.getPropertyValue("--tablechart-value-align") || t.getPropertyValue("--tablechart-inside-align")).trim();
 	return n === "start" || n === "center" || n === "end" ? n : null;
-}, Ot = (e, t, n, r) => {
+}, At = (e, t, n, r) => {
 	let i = getComputedStyle(e), a = (i.getPropertyValue(n).trim() || r).match(/^(\d+(?:\.\d+)?)(px|%|em|rem)$/);
 	if (!a) return null;
 	let o = Number(a[1]);
 	return a[2] === "%" ? o / 100 * _ : o * (a[2] === "em" ? Number.parseFloat(i.fontSize) : a[2] === "rem" ? Number.parseFloat(getComputedStyle(document.documentElement).fontSize) : 1) * t;
-}, kt = (e, t) => Ot(e, t, "--tablechart-bar-max", "60px") ?? Infinity, At = (t, n) => {
+}, jt = (e, t) => At(e, t, "--tablechart-bar-max", "60px") ?? Infinity, Mt = (t, n) => {
 	let { plot: r, svg: i, rows: a, type: o, values: s, series: c, seriesValues: u, names: d, annotations: p } = t, m = r.clientWidth;
 	if (!m) return !1;
 	let h = _ / m, g = Number.parseFloat(t.figure.dataset.chartAspect ?? ""), v = _ * (g > 0 ? g : o.aspect ?? n.aspect);
@@ -1546,7 +1565,7 @@ var Te = (e) => e.map((e) => ({
 		...t.categories,
 		...p.map((e) => e.badge)
 	]);
-	let y = (s[0] ? W(s[0]).height : 0) * h, b = p[0]?.badge ? W(p[0].badge).height * h : 0, x = Math.max(v, Ot(t.figure, h, "--tablechart-min-height", "200px") ?? 0, o.minHeight?.({
+	let y = (s[0] ? W(s[0]).height : 0) * h, b = p[0]?.badge ? W(p[0].badge).height * h : 0, x = Math.max(v, At(t.figure, h, "--tablechart-min-height", "200px") ?? 0, o.minHeight?.({
 		labelHeight: y,
 		nameHeight: Math.max(0, N(t.categories.map((e) => W(e).height))) * h,
 		unit: h,
@@ -1598,7 +1617,7 @@ var Te = (e) => e.map((e) => ({
 			share: s
 		} : console.warn(`[${e}] This kind of chart cannot break its scale.`);
 	}
-	let H = V ? V.gap : null, U = (V && Ot(t.figure, h, "--tablechart-break-gap", "")) ?? 13, G = x - M, te = F - I || 1, ne = (e) => G - (e - I) / te * P;
+	let H = V ? V.gap : null, U = (V && At(t.figure, h, "--tablechart-break-gap", "")) ?? 13, G = x - M, te = F - I || 1, ne = (e) => G - (e - I) / te * P;
 	if (V) {
 		let { lo: e, hi: t, gap: n, share: r } = V, i = P * r, a = (P - i - U) / (e + (F - t)), o = i / (t - e);
 		ne = (r) => r <= e ? G - r * a : r <= n ? G - e * a - (r - e) * o : r <= t ? G - e * a - (r - e) * o - U : G - e * a - i - U - (r - t) * a;
@@ -1624,8 +1643,8 @@ var Te = (e) => e.map((e) => ({
 		segments: T,
 		cx: oe,
 		y: ne,
-		barWidth: Math.min(K * n.barfill, kt(t.figure, h)),
-		barMax: kt(t.figure, h),
+		barWidth: Math.min(K * n.barfill, jt(t.figure, h)),
+		barMax: jt(t.figure, h),
 		height: x,
 		unit: h,
 		labelHeight: y,
@@ -1633,12 +1652,12 @@ var Te = (e) => e.map((e) => ({
 		after: a.length,
 		note: 0,
 		labels: t.figure.dataset.chartLabels === "inside" || t.figure.dataset.chartLabels !== "outside" && n.labels === "inside" ? "inside" : "outside",
-		insideAlign: Dt(t.figure),
+		insideAlign: kt(t.figure),
 		breakAt: H,
 		squeeze: V,
 		breakGap: U,
 		stacked: t.stacked,
-		shape: _t(t.figure, n),
+		shape: yt(t.figure, n),
 		totals: t.totals,
 		svg: i,
 		plot: r,
@@ -1705,7 +1724,7 @@ var Te = (e) => e.map((e) => ({
 		return t.some((e) => pe(e) && Number(e.dataset.row) <= n && n <= Number(e.dataset.rowEnd ?? e.dataset.row));
 	};
 	return t.figure.toggleAttribute("data-left-out", [...u, t.totals].some((e) => e.some((t) => !fe(t) && !pe(t) && !me(t, e)))), !0;
-}, jt = (e, t) => {
+}, Nt = (e, t) => {
 	let n = [
 		...e.seriesValues.flat(),
 		...e.totals,
@@ -1723,29 +1742,29 @@ var Te = (e) => e.map((e) => ({
 			e.className = "tablechart-minus", e.textContent = o, r.prepend(e);
 		}
 	}
-}, Mt = (e) => {
-	dt(e), e.plot.remove(), e.categories[0]?.parentElement?.remove(), e.figure.querySelector(`:scope > .${c}`)?.remove(), e.controls?.remove();
-}, Nt = (e, t) => {
+}, Pt = (e) => {
+	pt(e), e.plot.remove(), e.categories[0]?.parentElement?.remove(), e.figure.querySelector(`:scope > .${c}`)?.remove(), e.controls?.remove();
+}, Ft = (e, t) => {
 	e.figure.classList.toggle(m, t);
-}, Pt = (e) => e === "id" || e === "style" || e.startsWith("data-chart"), Ft = /^\s*(?:Table)?:\s+/, It = (e) => e?.tagName === "P" && Ft.test(e.textContent ?? ""), Lt = (e) => {
+}, It = (e) => e === "id" || e === "style" || e.startsWith("data-chart"), Lt = /^\s*(?:Table)?:\s+/, Rt = (e) => e?.tagName === "P" && Lt.test(e.textContent ?? ""), zt = (e) => {
 	let t = document.createElement("figcaption");
 	for (let { name: n, value: r } of Array.from(e.attributes)) t.setAttribute(n, r);
 	let n = e.firstChild;
-	n?.nodeType === Node.TEXT_NODE && (n.textContent = (n.textContent ?? "").replace(Ft, ""), n.textContent || n.remove());
+	n?.nodeType === Node.TEXT_NODE && (n.textContent = (n.textContent ?? "").replace(Lt, ""), n.textContent || n.remove());
 	let r = Array.from(e.childNodes), i = r.findIndex((e) => e.nodeName === "BR");
 	if (t.append(...i === -1 ? r : r.slice(0, i + 1)), i !== -1 && i < r.length - 1) {
 		let e = document.createElement("span");
 		e.append(...r.slice(i + 1)), t.append(e);
 	}
 	return e.remove(), t;
-}, Rt = /^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/, zt = (e) => {
-	let t = qt(e);
+}, Bt = /^\s*([a-z][\w-]*)((?:\s+[\w-]+=[^\s:]+)*)\s*(:\s*|$)/, Vt = (e) => {
+	let t = Yt(e);
 	return t?.tagName === "P" ? t : e;
-}, Bt = (e) => {
-	let t = zt(e).firstChild;
+}, Ht = (e) => {
+	let t = Vt(e).firstChild;
 	if (t?.nodeType !== Node.TEXT_NODE) return null;
-	let n = Rt.exec(t.textContent ?? "");
-	if (!n || !mt.includes(n[1]) || !n[3] && t.nextSibling) return null;
+	let n = Bt.exec(t.textContent ?? "");
+	if (!n || !gt.includes(n[1]) || !n[3] && t.nextSibling) return null;
 	let r = n[2].trim().split(/\s+/).filter(Boolean).map((e) => e.split("="));
 	return {
 		name: n[1],
@@ -1753,11 +1772,11 @@ var Te = (e) => e.map((e) => ({
 		text: t,
 		length: n[0].length
 	};
-}, Vt = (e) => {
+}, Ut = (e) => {
 	if (e?.tagName !== "UL" && e?.tagName !== "OL") return null;
-	let t = Array.from(e.children), n = t.map((e) => e.hasAttribute("data-annotation") ? null : Bt(e));
+	let t = Array.from(e.children), n = t.map((e) => e.hasAttribute("data-annotation") ? null : Ht(e));
 	return !t.length || t.some((e, t) => !n[t] && !e.hasAttribute("data-annotation")) ? null : (t.forEach((e, t) => {
-		let r = n[t], i = zt(e);
+		let r = n[t], i = Vt(e);
 		if (i !== e && i.replaceWith(...i.childNodes), r) {
 			e.setAttribute("data-annotation", r.name);
 			for (let [t, n] of r.options) e.setAttribute(`data-${t}`, n);
@@ -1768,18 +1787,18 @@ var Te = (e) => e.map((e) => ({
 			t === 0 && e instanceof HTMLElement && e.matches("em, i") ? (n.className = "tablechart-caption", n.append(...e.childNodes), e.replaceWith(n)) : e.nodeType === Node.TEXT_NODE && (n.textContent = (e.textContent ?? "").trim(), e.replaceWith(n));
 		});
 	}), e.classList.add("chart-annotations"), e);
-}, Ht = (e, t) => {
-	for (let { name: n, value: r } of Array.from(e.attributes)) (n === "class" || Pt(n)) && (t.setAttribute(n, r), e.removeAttribute(n));
-}, Ut = (e) => e.map((e) => {
-	let t = e.closest("p"), n = It(t) ? t : e;
+}, Wt = (e, t) => {
+	for (let { name: n, value: r } of Array.from(e.attributes)) (n === "class" || It(n)) && (t.setAttribute(n, r), e.removeAttribute(n));
+}, Gt = (e) => e.map((e) => {
+	let t = e.closest("p"), n = Rt(t) ? t : e;
 	if (n.tagName !== "TABLE" && n.tagName !== "P") return n;
 	let r = document.createElement("figure");
-	Ht(e, r), e.classList.length || e.removeAttribute("class");
-	let i = n.tagName === "TABLE" ? n : null, a = n.previousElementSibling, o = n.nextElementSibling, s = i ? It(a) ? a : It(o) ? o : null : n;
+	Wt(e, r), e.classList.length || e.removeAttribute("class");
+	let i = n.tagName === "TABLE" ? n : null, a = n.previousElementSibling, o = n.nextElementSibling, s = i ? Rt(a) ? a : Rt(o) ? o : null : n;
 	i && s === o && (o = o?.nextElementSibling ?? null);
-	let c = o?.classList.contains("chart-annotations") ? o : Vt(o);
-	return n.replaceWith(r), s && r.append(Lt(s)), i && r.append(i), c && r.append(c), X?.log?.(`A ${i ? "table" : "caption"} with chart attributes was wrapped in a figure of its own`), r;
-}), Wt = (e, t, n, r = document.createElement("table")) => {
+	let c = o?.classList.contains("chart-annotations") ? o : Ut(o);
+	return n.replaceWith(r), s && r.append(zt(s)), i && r.append(i), c && r.append(c), X?.log?.(`A ${i ? "table" : "caption"} with chart attributes was wrapped in a figure of its own`), r;
+}), Kt = (e, t, n, r = document.createElement("table")) => {
 	for (let e of r.querySelectorAll(":scope > tbody, :scope > tfoot, :scope > tr")) e.remove();
 	if (!r.tHead && (t.length || n)) {
 		let e = r.createTHead().insertRow(), i = document.createElement("th");
@@ -1799,7 +1818,7 @@ var Te = (e) => e.map((e) => ({
 		for (let n of t.values ?? [t.value ?? null]) e.insertCell().textContent = n === null ? "" : String(n);
 	}
 	return r;
-}, Gt = (e) => {
+}, qt = (e) => {
 	if (!e || typeof e != "object") return;
 	let t = Object.entries(e), n = (e) => e === null || typeof e == "string" || typeof e == "number";
 	if (t.length && t.every(([, e]) => n(e) || Array.isArray(e) && e.every(n))) return t.map(([e, t]) => Array.isArray(t) ? {
@@ -1809,16 +1828,16 @@ var Te = (e) => e.map((e) => ({
 		label: e,
 		value: t
 	});
-}, Kt = async (t) => {
+}, Jt = async (t) => {
 	await Promise.all(t.filter((e) => e.hasAttribute("data-chart-src")).map(async (t) => {
 		let n = t.getAttribute("data-chart-src"), r = Array.from(t.querySelectorAll("table")).find((e) => e.tHead) ?? null;
 		for (let e of t.querySelectorAll("table")) e !== r && e.remove();
 		try {
 			let e = await fetch(n);
 			if (!e.ok) throw Error(`${e.status} ${e.statusText}`);
-			let i = await e.json(), a = Array.isArray(i) ? i : i?.rows ? Array.isArray(i.rows) ? i.rows : Gt(i.rows) : Gt(i);
+			let i = await e.json(), a = Array.isArray(i) ? i : i?.rows ? Array.isArray(i.rows) ? i.rows : qt(i.rows) : qt(i);
 			if (!Array.isArray(a)) throw Error("no rows in it: a list of rows, an object with rows, or names with their values");
-			let o = Wt(a, Array.isArray(i?.series) ? i.series.map(String) : [], typeof i?.label == "string" ? i.label : "", r ?? void 0);
+			let o = Kt(a, Array.isArray(i?.series) ? i.series.map(String) : [], typeof i?.label == "string" ? i.label : "", r ?? void 0);
 			if (!r) {
 				let e = t.querySelector(":scope > figcaption");
 				e ? e.after(o) : t.prepend(o);
@@ -1829,10 +1848,10 @@ var Te = (e) => e.map((e) => ({
 			console.warn(`[${e}] Could not read the chart data in "${n}": ${t.message}.` + (r ? " A page opened as a file cannot fetch files; open it from a server." : ""));
 		}
 	}));
-}, qt = (e) => {
+}, Yt = (e) => {
 	let t = Array.from(e.childNodes).filter((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim());
 	return t.length === 1 && t[0] instanceof HTMLElement ? t[0] : null;
-}, Jt = "strong, b, span.total", Yt = (e) => {
+}, Xt = "strong, b, span.total", Zt = (e) => {
 	for (let t of e) {
 		for (let e of t.querySelectorAll("tbody tr")) {
 			let t = e.cells[0];
@@ -1840,16 +1859,16 @@ var Te = (e) => e.map((e) => ({
 			let n = document.createElement("th");
 			for (let { name: e, value: r } of Array.from(t.attributes)) n.setAttribute(e, r);
 			n.append(...t.childNodes), t.replaceWith(n);
-			for (let t = qt(n); t?.matches(Jt); t = qt(n)) e.dataset.kind = "total", t.replaceWith(...t.childNodes);
+			for (let t = Yt(n); t?.matches(Xt); t = Yt(n)) e.dataset.kind = "total", t.replaceWith(...t.childNodes);
 		}
 		let e = Array.from(t.querySelector("thead tr:last-child")?.children ?? []);
-		for (let t of e.slice(1)) for (let e = qt(t); e?.matches(Jt); e = qt(t)) t.setAttribute("data-kind", "focus"), e.replaceWith(...e.childNodes);
+		for (let t of e.slice(1)) for (let e = Yt(t); e?.matches(Xt); e = Yt(t)) t.setAttribute("data-kind", "focus"), e.replaceWith(...e.childNodes);
 	}
-}, Xt = "data-chart-made", Zt = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, Qt = (e) => new Promise((t) => setTimeout(t, e)), $t = (e, t) => {
+}, Qt = "data-chart-made", $t = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches, en = (e) => new Promise((t) => setTimeout(t, e)), tn = (e, t) => {
 	let n = Number.parseFloat(e.dataset.chartEntrance ?? ""), r = Number.isFinite(n) ? n : t.entrance;
 	return Math.min(Math.max(r, 0), 1);
-}, en = async (e, t) => {
-	if (Zt()) return;
+}, nn = async (e, t) => {
+	if ($t()) return;
 	await new Promise(requestAnimationFrame);
 	let n = e.getAnimations().filter((e) => e instanceof CSSAnimation);
 	for (let t = e.parentElement; t && t !== document.body; t = t.parentElement) n.push(...t.getAnimations());
@@ -1860,11 +1879,11 @@ var Te = (e) => e.map((e) => ({
 		let a = Number(n.delay ?? 0) + i * t;
 		r = Math.max(r, a - Number(e.currentTime ?? 0));
 	}
-	r > 0 && await Qt(r);
-}, tn = (e) => {
+	r > 0 && await en(r);
+}, rn = (e) => {
 	for (let t = e; t && t !== document.body; t = t.parentElement) if (getComputedStyle(t).opacity === "0") return t;
 	return null;
-}, nn = (e) => new Promise((t) => {
+}, an = (e) => new Promise((t) => {
 	let n = ["animationstart", "transitionrun"], r = () => {
 		for (let e of n) document.removeEventListener(e, i, !0);
 		a.disconnect(), t();
@@ -1878,41 +1897,41 @@ var Te = (e) => e.map((e) => ({
 		attributes: !0,
 		attributeFilter: ["class", "style"]
 	});
-}), rn = /* @__PURE__ */ new Set(), an = null, on = (e) => {
-	rn.add(e), !an && (an = new MutationObserver(() => {
-		for (let e of rn) e.relabel();
+}), on = /* @__PURE__ */ new Set(), sn = null, cn = (e) => {
+	on.add(e), !sn && (sn = new MutationObserver(() => {
+		for (let e of on) e.relabel();
 		requestAnimationFrame(() => requestAnimationFrame(() => {
-			for (let e of rn) e.refresh();
+			for (let e of on) e.refresh();
 		}));
-	}), an.observe(document.documentElement, {
+	}), sn.observe(document.documentElement, {
 		attributes: !0,
 		attributeFilter: ["lang"]
 	}));
-}, sn = (e) => {
-	rn.delete(e), !rn.size && an && (an.disconnect(), an = null);
-}, cn = ["column", "bar"], ln = (e) => {
+}, ln = (e) => {
+	on.delete(e), !on.size && sn && (sn.disconnect(), sn = null);
+}, un = ["column", "bar"], dn = (e) => {
 	let t = e.getAttribute("data-chart") || "column";
-	if (!cn.includes(t)) return null;
+	if (!un.includes(t)) return null;
 	let n = getComputedStyle(e).getPropertyValue("--tablechart-type").trim();
-	return cn.includes(n) ? n : t;
-}, un = (e, t) => {
-	let n = e, r = ln(n.figure), i = null, a = !1, o = !1, s = async () => {
-		if (!t.animate) return Nt(n, !0);
+	return un.includes(n) ? n : t;
+}, fn = (e, t) => {
+	let n = e, r = dn(n.figure), i = null, a = !1, o = !1, s = async () => {
+		if (!t.animate) return Ft(n, !0);
 		let e = n.figure.classList.contains("is-shown");
 		if (a && i !== null && !e && !o) {
 			o = !0;
-			let e = Zt() ? null : tn(n.figure);
-			e && await nn(e), await en(n.figure, $t(n.figure, t)), o = !1, (a || !t.replay) && Nt(n, !0);
-		} else !a && t.replay && e && Nt(n, !1);
+			let e = $t() ? null : rn(n.figure);
+			e && await an(e), await nn(n.figure, tn(n.figure, t)), o = !1, (a || !t.replay) && Ft(n, !0);
+		} else !a && t.replay && e && Ft(n, !1);
 	}, c = () => {
-		let e = ln(n.figure);
+		let e = dn(n.figure);
 		if (!e || e === r) return;
-		let a = X.timed("Building", n.figure, () => St(n.figure, t, e));
-		a && (Mt(n), He(a, n.step, !0), n = a, r = e, i = null);
+		let a = X.timed("Building", n.figure, () => wt(n.figure, t, e));
+		a && (Pt(n), He(a, n.step, !0), n = a, r = e, i = null);
 	}, l = () => {
 		c();
 		let e = n.plot.clientWidth;
-		e && e !== i && X.timed("Layout", n.figure, () => At(n, t)) && (i = e, s());
+		e && e !== i && X.timed("Layout", n.figure, () => Mt(n, t)) && (i = e, s());
 	}, u = !1, d = new ResizeObserver(() => {
 		u || (u = !0, requestAnimationFrame(() => {
 			u = !1, l();
@@ -1920,14 +1939,14 @@ var Te = (e) => e.map((e) => ({
 	}), f = new IntersectionObserver((e) => {
 		for (let t of e) a = t.isIntersecting, s();
 	}, { threshold: t.threshold }), p = () => {
-		n.figure.classList.add(h), Nt(n, !0), n.figure.offsetWidth;
+		n.figure.classList.add(h), Ft(n, !0), n.figure.offsetWidth;
 	}, m = () => n.figure.classList.remove(h), g = () => {
 		i = null, l();
 	}, _ = {
-		relabel: () => jt(n, t),
+		relabel: () => Nt(n, t),
 		refresh: g
 	};
-	c(), l(), d.observe(n.figure), f.observe(n.figure), window.addEventListener("beforeprint", p), window.addEventListener("afterprint", m), on(_);
+	c(), l(), d.observe(n.figure), f.observe(n.figure), window.addEventListener("beforeprint", p), window.addEventListener("afterprint", m), cn(_);
 	let v = {
 		figure: n.figure,
 		refresh: g,
@@ -1941,29 +1960,29 @@ var Te = (e) => e.map((e) => ({
 			return n.plan?.count ?? 0;
 		},
 		destroy() {
-			d.disconnect(), f.disconnect(), window.removeEventListener("beforeprint", p), window.removeEventListener("afterprint", m), sn(_), dt(n), n.figure.tablechart === v && delete n.figure.tablechart;
+			d.disconnect(), f.disconnect(), window.removeEventListener("beforeprint", p), window.removeEventListener("afterprint", m), ln(_), pt(n), n.figure.tablechart === v && delete n.figure.tablechart;
 		}
 	};
 	return n.figure.tablechart = v, v;
-}, dn = !1, fn = (t) => {
+}, pn = !1, mn = (t) => {
 	let n = t.find((e) => e.tagName !== "FIGURE");
-	!dn && n && (dn = !0, console.warn(`[${e}] A chart is a <${n.tagName.toLowerCase()}>. Use a <figure> with a <figcaption>, so the chart has a title, also for screen readers.`, n));
-}, pn = async (e, t) => {
-	let n = Ut(e.filter((e) => !e.hasAttribute(Xt)));
-	return fn(n), await Kt(n), Yt(n), Le(n, t.langattribute), n;
-}, mn = (e, t) => {
-	let n = X.timed("Building", e, () => St(e, t));
-	return n ? (e.setAttribute(Xt, ""), un(n, t)) : null;
-}, hn = async (e, t = {}) => {
+	!pn && n && (pn = !0, console.warn(`[${e}] A chart is a <${n.tagName.toLowerCase()}>. Use a <figure> with a <figcaption>, so the chart has a title, also for screen readers.`, n));
+}, hn = async (e, t) => {
+	let n = Gt(e.filter((e) => !e.hasAttribute(Qt)));
+	return mn(n), await Jt(n), Zt(n), Le(n, t.langattribute), n;
+}, gn = (e, t) => {
+	let n = X.timed("Building", e, () => wt(e, t));
+	return n ? (e.setAttribute(Qt, ""), fn(n, t)) : null;
+}, _n = async (e, t = {}) => {
 	if (e.tablechart) return e.tablechart;
 	let n = {
 		...v,
 		...t
 	};
 	n.debug && (X.enabled = !0);
-	let [r] = await pn([e], n);
-	return r ? mn(r, n) : null;
-}, gn = [
+	let [r] = await hn([e], n);
+	return r ? gn(r, n) : null;
+}, vn = [
 	["--tablechart-duration", "--tablechart-animation-element-duration"],
 	["--tablechart-stagger", "--tablechart-animation-stagger, a share of the element time"],
 	["--tablechart-easing", "--tablechart-animation-ease"],
@@ -1986,32 +2005,32 @@ var Te = (e) => e.map((e) => ({
 	["--tablechart-key-size", "--tablechart-legend-key-size"],
 	["--tablechart-controls-justify", "--tablechart-control-justify"],
 	["--tablechart-controls-gap", "--tablechart-control-gap"]
-], _n = {
+], yn = {
 	up: "grow",
 	across: "sweep"
-}, vn = !1, yn = (t, n) => {
-	if (vn) return;
+}, bn = !1, xn = (t, n) => {
+	if (bn) return;
 	let r = (e) => {
-		let t = _n[String(e)];
+		let t = yn[String(e)];
 		return t ? [`"${e}" is now "${t}"`] : [];
 	}, i = new Set(r(n.animate));
 	n.hover !== void 0 && i.add("the \"hover\" option is now \"tooltip\"");
 	for (let e of t) {
 		e.hasAttribute("data-chart-hover") && i.add("data-chart-hover is now data-chart-tooltip");
 		let t = getComputedStyle(e);
-		for (let [e, n] of gn) t.getPropertyValue(e).trim() && i.add(`${e} is now ${n}`);
+		for (let [e, n] of vn) t.getPropertyValue(e).trim() && i.add(`${e} is now ${n}`);
 		for (let t of r(e.getAttribute("data-chart-animate"))) i.add(t);
 	}
-	i.size && (vn = !0, console.warn(`[${e}] ${[...i].join("; ")}. The old names work until the next minor version.`));
-}, bn = async (e = {}, t = document) => {
+	i.size && (bn = !0, console.warn(`[${e}] ${[...i].join("; ")}. The old names work until the next minor version.`));
+}, Sn = async (e = {}, t = document) => {
 	let n = {
 		...v,
 		...e
 	};
 	n.debug && (X.enabled = !0);
-	let r = await pn(Array.from(t.querySelectorAll(n.selector)), n);
-	yn(r, n);
-	let i = r.map((e) => mn(e, n)).filter((e) => e !== null);
+	let r = await hn(Array.from(t.querySelectorAll(n.selector)), n);
+	xn(r, n);
+	let i = r.map((e) => gn(e, n)).filter((e) => e !== null);
 	return X.log(`Made ${i.length} chart(s).`), {
 		charts: i,
 		refresh: () => {
@@ -2023,4 +2042,4 @@ var Te = (e) => e.map((e) => ({
 	};
 };
 //#endregion
-export { h as _, Ut as a, v as b, St as c, Nt as d, Mt as f, t as g, f as h, pn as i, At as l, Le as m, $t as n, Kt as o, He as p, bn as r, Yt as s, hn as t, jt as u, g as v, m as y };
+export { h as _, Gt as a, v as b, wt as c, Ft as d, Pt as f, t as g, f as h, hn as i, Mt as l, Le as m, tn as n, Jt as o, He as p, Sn as r, Zt as s, _n as t, Nt as u, g as v, m as y };