@martinomagnifico/tablechart 1.2.6 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [1.3.0] - 2026-11-10
+
+### Added
+
+- `data-series="total"` in a summary, for the totals of the rows, such as the stacks of a stacked chart.
+- `{highest.share}`, `{lowest.share}` and `{total}` in a summary.
+- `chart.replay()`, builds a chart again with its animation.
+- `chart.reset()`, takes a chart back to its start, to build when it scrolls into view.
+- `data-chart-group-scale`, one scale for the charts of a group, so the same value is the same height.
+- `data-chart-group`, so the baselines of charts side by side line up when their names take a different number of lines.
+- `--tablechart-max-height` and `--tablechart-height`, so a chart stops getting higher on a wide screen.
+- `data-tablechart-ready` and `data-summary-ready` on `html`, with the events `tablechart:ready` and `tablechart:summary-ready`, for scripts that print the page to PDF.
+
+### Changed
+
+- A chart that builds once stops watching the scroll.
+
+### Fixed
+
+- Brackets and numbers keep clear of each other in print to PDF flows..
+- A chart keeps the room of its `data-chart-aspect` until it is laid out.
+- In a tagged PDF, the summary and the table are outside the figure of the chart, so a screen reader reads them.
+
+
+
 ## [1.2.6] - 2026-11-08
 
 ### Added

package/dist/tablechart-additional-types.mjs

@@ -1,6 +1,6 @@
-import { A as e, C as t, E as n, F as r, I as i, K as a, L as o, M as s, N as c, O as l, R as u, S as d, T as f, U as p, V as m, j as h, w as g } from "./tablechart-shared.mjs";
+import { A as e, D as t, E as n, F as r, I as i, K as a, L as o, M as s, N as c, O as l, R as u, S as d, U as f, V as p, j as m, k as h, w as g } from "./tablechart-shared.mjs";
 // src/js/annotations/quadrant.ts
-var _ = `${p}-name`, v = [
+var _ = `${f}-name`, v = [
 	"top left",
 	"top right",
 	"bottom left",
@@ -30,13 +30,13 @@ var _ = `${p}-name`, v = [
 		}
 		return null;
 	},
-	draw(e, i, l) {
-		let { frame: u, x: d, y: f, rows: v, series: b, height: x, unit: S, svg: C, plot: w, categories: T } = l;
+	draw(n, i, s) {
+		let { frame: u, x: d, y: g, rows: v, series: b, height: x, unit: S, svg: C, plot: w, categories: T } = s;
 		if (!u || !d) {
 			console.warn(`[${o}] A quadrant works on a scatter chart, which has an axis across and an axis up.`);
 			return;
 		}
-		let [E, D, O, k] = u, A = b.flatMap((e, t) => e.group ? [] : [t]), j = (e) => v.flatMap((t) => t.cells[A[e]] && !t.cells[A[e]].missing ? [t.cells[A[e]].value] : []), M = y(e.getAttribute("data-x"), j(0)), N = y(e.getAttribute("data-y"), j(1)), P = M === null ? E + O / 2 : Math.min(Math.max(d(M), E), E + O), F = N === null ? D + k / 2 : Math.min(Math.max(f(N), D), D + k), I = C.querySelector(`:scope > .${r}`);
+		let [E, D, O, k] = u, A = b.flatMap((e, t) => e.group ? [] : [t]), j = (e) => v.flatMap((t) => t.cells[A[e]] && !t.cells[A[e]].missing ? [t.cells[A[e]].value] : []), M = y(n.getAttribute("data-x"), j(0)), N = y(n.getAttribute("data-y"), j(1)), P = M === null ? E + O / 2 : Math.min(Math.max(d(M), E), E + O), F = N === null ? D + k / 2 : Math.min(Math.max(g(N), D), D + k), I = C.querySelector(`:scope > .${r}`);
 		if (I) {
 			let e = (e, t) => Math.abs(e - t) < S / 2, t = (I.getAttribute("d") ?? "").match(/M[^M]+/g) ?? [];
 			I.setAttribute("d", t.filter((t) => {
@@ -44,27 +44,27 @@ var _ = `${p}-name`, v = [
 				return !(i === "V" && e(Number(n), P)) && !(i === "H" && e(Number(r), F));
 			}).join(""));
 		}
-		C.insertBefore(c("path", {
-			class: p,
-			d: `M${s(P)},${s(D)}V${s(D + k)}M${s(E)},${s(F)}H${s(E + O)}`
-		}), C.querySelector(`:scope > .${m}`));
+		C.insertBefore(h("path", {
+			class: f,
+			d: `M${l(P)},${l(D)}V${l(D + k)}M${l(E)},${l(F)}H${l(E + O)}`
+		}), C.querySelector(`:scope > .${p}`));
 		let L = 6 * S, R = [];
 		for (let e of w.querySelectorAll(`:scope > .${_}`)) {
-			let t = e.dataset.corner ?? "", n = t.includes("right"), r = t.includes("bottom"), i = n ? E + O - L : E + L, o = r ? D + k - L : D + L;
-			h(e, i, o, a, x);
-			let s = g(e).width * S, c = g(e).height * S;
+			let n = e.dataset.corner ?? "", r = n.includes("right"), i = n.includes("bottom"), o = r ? E + O - L : E + L, s = i ? D + k - L : D + L;
+			t(e, o, s, a, x);
+			let c = m(e).width * S, l = m(e).height * S;
 			R.push([
-				n ? i - s : i,
 				r ? o - c : o,
-				s,
-				c
+				i ? s - l : s,
+				c,
+				l
 			]);
 		}
-		l.taken.push(...R);
-		for (let e of T) {
-			if (e.hidden || e.hasAttribute("data-left-out") || !e.style.left) continue;
-			let r = t(e, S, a, x, [0, 0]);
-			R.some((e) => n(e, r)) && e.setAttribute("data-left-out", "");
+		s.taken.push(...R);
+		for (let t of T) {
+			if (t.hidden || t.hasAttribute("data-left-out") || !t.style.left) continue;
+			let n = e(t, S, a, x, [0, 0]);
+			R.some((e) => c(e, n)) && t.setAttribute("data-left-out", "");
 		}
 	}
 }, x = [
@@ -96,8 +96,8 @@ var _ = `${p}-name`, v = [
 	axes: !0,
 	numbers: !1,
 	annotations: { quadrant: b },
-	text({ figure: t, plot: n, rows: r, series: a, config: o }) {
-		let { x: s, y: c, size: l, group: d } = C(a), f = n.querySelector(":scope > .tablechart-categories")?.children ?? [], p = /* @__PURE__ */ new Map();
+	text({ figure: e, plot: t, rows: r, series: a, config: o }) {
+		let { x: s, y: c, size: l, group: d } = C(a), f = t.querySelector(":scope > .tablechart-categories")?.children ?? [], p = /* @__PURE__ */ new Map();
 		r.forEach((e, t) => {
 			let n = T(e, s, c);
 			n && (p.get(n)?.push(t) ?? p.set(n, [t]));
@@ -115,81 +115,81 @@ var _ = `${p}-name`, v = [
 		if (h.length < 2 && l === void 0) return;
 		let g = document.createElement("div");
 		g.className = i, g.setAttribute("aria-hidden", "true"), g.inert = !0;
-		let _ = Array.from(t.querySelectorAll(`tbody tr > td:nth-of-type(${d + 1})`)), v = (t, n) => {
-			let r = e(u, g);
-			return r.dataset.place = "legend", r.dataset.line = "none", r.textContent = t, n && o.langattribute && r.setAttribute(o.langattribute, n), r;
+		let _ = Array.from(e.querySelectorAll(`tbody tr > td:nth-of-type(${d + 1})`)), v = (e, t) => {
+			let r = n(u, g);
+			return r.dataset.place = "legend", r.dataset.line = "none", r.textContent = e, t && o.langattribute && r.setAttribute(o.langattribute, t), r;
 		};
 		h.length > 1 && h.forEach((e, t) => {
 			let n = o.langattribute ? _.find((t) => t.textContent?.trim() === e)?.getAttribute(o.langattribute) : null, r = v(e, n);
 			r.dataset.marker = x[t % x.length], r.style.setProperty("--n", String(t)), r.style.setProperty("--palette", `var(--tablechart-color-${t + 1})`);
-		}), l !== void 0 && (v(a[l].name, a[l].key).dataset.marker = "size"), n.after(g);
+		}), l !== void 0 && (v(a[l].name, a[l].key).dataset.marker = "size"), t.after(g);
 	},
 	draw(e) {
-		let { rows: t, series: n, x: r, y: i, frame: o, unit: c, svg: u, categories: p, height: _, config: v, plot: y } = e;
-		if (!r || !o) return;
-		let b = C(n), T = w(t, b.group), E = T.length > 1, D = (e.length("--tablechart-marker-size", "10px") ?? 10 * c) / 2, O = (e.length("--tablechart-bubble-max", "24px") ?? 24 * c) / 2, k = (e.length("--tablechart-bubble-min", "") ?? D * 1.2) / 2, A = (e) => b.size === void 0 ? void 0 : e.cells[b.size], j = l(t.map((e) => Math.abs(A(e)?.value ?? 0))), M = t.flatMap((e, t) => {
-			let n = e.cells[b.x], a = e.cells[b.y];
-			if (!n || !a || n.missing || a.missing) return [];
-			let o = A(e), s = o && !o.missing && j > 0 ? Math.max(k, Math.sqrt(Math.abs(o.value) / j) * O) : D, c = E ? T.indexOf(e.cells[b.group]?.raw ?? "") : -1;
+		let { rows: n, series: r, x: i, y: o, frame: c, unit: u, svg: f, categories: h, height: _, config: v, plot: y } = e;
+		if (!i || !c) return;
+		let b = C(r), T = w(n, b.group), E = T.length > 1, D = (e.length("--tablechart-marker-size", "10px") ?? 10 * u) / 2, O = (e.length("--tablechart-bubble-max", "24px") ?? 24 * u) / 2, k = (e.length("--tablechart-bubble-min", "") ?? D * 1.2) / 2, A = (e) => b.size === void 0 ? void 0 : e.cells[b.size], j = g(n.map((e) => Math.abs(A(e)?.value ?? 0))), M = n.flatMap((e, t) => {
+			let n = e.cells[b.x], r = e.cells[b.y];
+			if (!n || !r || n.missing || r.missing) return [];
+			let a = A(e), s = a && !a.missing && j > 0 ? Math.max(k, Math.sqrt(Math.abs(a.value) / j) * O) : D, c = E ? T.indexOf(e.cells[b.group]?.raw ?? "") : -1;
 			return [{
 				i: t,
-				px: r(n.value),
-				py: i(a.value),
+				px: i(n.value),
+				py: o(r.value),
 				r: s,
 				g: c
 			}];
 		}), N = Math.min(M.length - 1, 6);
 		y.style.setProperty("--count", String(N + 1));
-		let P = new Map([...M].sort((e, t) => e.px - t.px || e.i - t.i).map((e, t) => [e.i, N ? s(t * N / (M.length - 1)) : 0])), F = [...M].sort((e, t) => t.r - e.r || e.i - t.i);
+		let P = new Map([...M].sort((e, t) => e.px - t.px || e.i - t.i).map((e, t) => [e.i, N ? l(t * N / (M.length - 1)) : 0])), F = [...M].sort((e, t) => t.r - e.r || e.i - t.i);
 		for (let e of F) {
 			let t = E ? x[e.g % x.length] : "circle";
-			u.appendChild(d(t, e.px, e.py, e.r, {
-				class: m,
+			f.appendChild(d(t, e.px, e.py, e.r, {
+				class: p,
 				"data-row": e.i + 1,
 				"data-marker": t,
 				style: `--i:${P.get(e.i)}; ${E ? `--n:${e.g}; --palette:var(--tablechart-color-${e.g + 1})` : ""}`
 			}));
 		}
-		let I = y.parentElement?.getAttribute("data-chart-names"), L = I == null ? v.names : I !== "false", R = 4 * c, z = [
-			o[0] + 1.5 * R,
-			o[1],
-			o[2] - 1.5 * R,
-			o[3] - 1.5 * R
+		let I = y.parentElement?.getAttribute("data-chart-names"), L = I == null ? v.names : I !== "false", R = 4 * u, z = [
+			c[0] + 1.5 * R,
+			c[1],
+			c[2] - 1.5 * R,
+			c[3] - 1.5 * R
 		], [B, V, H, U] = z, W = F.map(({ i: e, px: t, py: n, r }) => {
-			if (p[e].hasAttribute("data-same")) return [];
-			let { width: i, height: a } = g(p[e]), o = i * c, s = a * c, l = s * .1, u = r * .7 + R / 2, d = (e, t) => [
+			if (h[e].hasAttribute("data-same")) return [];
+			let { width: i, height: a } = m(h[e]), o = i * u, s = a * u, c = s * .1, l = r * .7 + R / 2, d = (e, t) => [
 				Math.max(B, Math.min(e, B + H - o)),
-				Math.max(V, Math.min(t, V + U - s)) + l,
+				Math.max(V, Math.min(t, V + U - s)) + c,
 				o,
-				s - 2 * l
+				s - 2 * c
 			];
 			return [
 				d(t + r + R, n - s / 2),
 				d(t - r - R - o, n - s / 2),
 				d(t - o / 2, n - r - R - s),
 				d(t - o / 2, n + r + R),
-				d(t + u, n - u - s),
-				d(t - u - o, n - u - s),
-				d(t + u, n + u),
-				d(t - u - o, n + u)
+				d(t + l, n - l - s),
+				d(t - l - o, n - l - s),
+				d(t + l, n + l),
+				d(t - l - o, n + l)
 			];
-		}), G = L ? f(W, M.map(({ px: e, py: t, r: n }) => [
+		}), G = L ? s(W, M.map(({ px: e, py: t, r: n }) => [
 			e - n,
 			t - n,
 			2 * n,
 			2 * n
 		]), z) : F.map(() => null);
-		for (let e of p) e.hidden = !0, e.dataset.missing = "";
-		F.forEach((e, t) => {
-			let n = p[e.i], r = G[t];
-			if (n.hidden = !1, delete n.dataset.missing, n.style.setProperty("--i", String(P.get(e.i))), n.toggleAttribute("data-left-out", r === null), r === null) return;
-			n.dataset.side = S[r];
-			let [i, o, , s] = W[t][r];
-			h(n, i, o - (g(n).height * c - s) / 2, a, _);
+		for (let e of h) e.hidden = !0, e.dataset.missing = "";
+		F.forEach((e, n) => {
+			let r = h[e.i], i = G[n];
+			if (r.hidden = !1, delete r.dataset.missing, r.style.setProperty("--i", String(P.get(e.i))), r.toggleAttribute("data-left-out", i === null), i === null) return;
+			r.dataset.side = S[i];
+			let [o, s, , c] = W[n][i];
+			t(r, o, s - (m(r).height * u - c) / 2, a, _);
 		}), e.rowAt = (e, t) => {
-			let n = null, r = 6 * c;
+			let n = null, r = 6 * u;
 			for (let i of M) {
-				let a = Math.max(Math.hypot(i.px - e * c, i.py - t * c) - i.r, 0);
+				let a = Math.max(Math.hypot(i.px - e * u, i.py - t * u) - i.r, 0);
 				(a < r || a === r && n && i.r < n.r) && (r = a, n = i);
 			}
 			return n ? n.i : null;

package/dist/tablechart-core.d.mts

@@ -1,2 +1,2 @@
-import { A as PRINTING_CLASS, C as Series, D as Config, E as AT_ONCE_CLASS, M as SHOWN_CLASS, N as defaultConfig, O as PLACED_CLASS, S as Row, T as stepTo, _ as setShown, a as loadSources, b as ChartState, f as prepare, g as relabel, h as layout, i as adoptTables, j as QUEUED_CLASS, k as PLOT_CLASS, m as build, n as checkTextContrast, o as readMarkdownRows, p as addType, r as assignKeys, t as checkContrast, u as entranceOf, v as unbuild, w as StepPlan, x as ChartType } from "./tablechart-shared.mjs";
+import { A as PRINTING_CLASS, C as Series, D as Config, E as AT_ONCE_CLASS, M as SHOWN_CLASS, N as defaultConfig, O as PLACED_CLASS, S as Row, T as stepTo, _ as unbuild, a as loadSources, b as ChartState, f as prepare, g as relabel, h as build, i as adoptTables, j as QUEUED_CLASS, k as PLOT_CLASS, m as layout, n as checkTextContrast, o as readMarkdownRows, p as setShown, r as assignKeys, t as checkContrast, u as entranceOf, v as addType, w as StepPlan, x as ChartType } from "./tablechart-shared.mjs";
 export { AT_ONCE_CLASS, type ChartState, type ChartType, type Config, PLACED_CLASS, PLOT_CLASS, PRINTING_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, addType, adoptTables, assignKeys, build, checkContrast, checkTextContrast, defaultConfig, entranceOf, layout, loadSources, prepare, readMarkdownRows, relabel, setShown, stepTo, unbuild };

package/dist/tablechart-core.mjs

@@ -1 +1 @@
-export { P as AT_ONCE_CLASS, z as PLACED_CLASS, B as PLOT_CLASS, H as PRINTING_CLASS, W as QUEUED_CLASS, G as SHOWN_CLASS, u as addType, a as adoptTables, _ as assignKeys, d as build, c as checkContrast, l as checkTextContrast, q as defaultConfig, n as entranceOf, f as layout, o as loadSources, i as prepare, s as readMarkdownRows, p as relabel, m as setShown, g as stepTo, h as unbuild } from "./tablechart-shared.mjs";
+export { P as AT_ONCE_CLASS, z as PLACED_CLASS, B as PLOT_CLASS, H as PRINTING_CLASS, W as QUEUED_CLASS, G as SHOWN_CLASS, h as addType, a as adoptTables, y as assignKeys, d as build, c as checkContrast, l as checkTextContrast, q as defaultConfig, n as entranceOf, u as layout, o as loadSources, i as prepare, s as readMarkdownRows, f as relabel, m as setShown, v as stepTo, p as unbuild } from "./tablechart-shared.mjs";

package/dist/tablechart-shared.d.mts

@@ -330,6 +330,22 @@ interface AnnotationType {
   draw: (spec: HTMLElement, badge: HTMLElement | null, geo: Geometry) => void;
 }
 interface ChartState {
+  /** What the chart needs by itself, for a group that shares a scale; null for a chart that cannot share one. */
+  measured?: {
+    height: number;
+    room: number;
+    floor: number;
+    ceiling: number;
+    bottom: number;
+  } | null;
+  /** What its group with `data-chart-group-scale` agreed on. */
+  agreed?: {
+    height: number;
+    room: number;
+    floor: number;
+    ceiling: number;
+    bottom: number;
+  };
   figure: HTMLElement;
   plot: HTMLElement;
   svg: SVGSVGElement;
@@ -379,12 +395,12 @@ declare const scatter: ChartType;
 declare const addType: (name: string, type: ChartType) => void;
 /** Pass 2: everything a reader will read, before a translation script looks. */
 declare const build: (figure: HTMLElement, config: Config, asKind?: string | null) => ChartState | null;
-/** Pass 3. Needs layout; makes no text, only places it. */
-declare const layout: (state: ChartState, config: Config) => boolean;
 /** Numbers are reformatted in place, so a language change costs no redraw. */
 declare const relabel: (state: ChartState, config: Config) => void;
 /** Removes what `build` added, so the chart can be built again. */
 declare const unbuild: (state: ChartState) => void;
+/** Pass 3. Needs layout; makes no text, only places it. */
+declare const layout: (state: ChartState, config: Config) => boolean;
 /**
  * One class, `is-shown`, starts the whole build. `atOnce` skips it: the chart lands at its end, or back at its start,
  * without transitions, such as a chart in view when the page opens, or one hidden where nobody sees it.
@@ -402,6 +418,10 @@ interface TablechartChart {
   previous(): void;
   /** On a chart that steps: shows the chart up to `step`, from 0 to `steps`. */
   stepTo(step: number): void;
+  /** Builds the chart again, with its animation. A chart with steps goes back to its first step. */
+  replay(): void;
+  /** Takes the chart back to its start, to build when it scrolls into view. */
+  reset(): void;
   /** How many steps are shown. */
   readonly step: number;
   /** How many steps the chart has; 0 for a chart that does not step. */
@@ -425,7 +445,6 @@ declare const entranceOf: (figure: HTMLElement, config: Config) => number;
 declare const prepare: (found: HTMLElement[], config: Config) => Promise<HTMLElement[]>;
 /** Makes a chart of one figure; returns the existing chart if there is one, or null without data. */
 declare const create: (element: HTMLElement, options?: Partial<Config>) => Promise<TablechartChart | null>;
-/** Makes a chart of every figure in `root` that matches the selector, skipping existing charts. */
 declare const init: (options?: Partial<Config>, root?: ParentNode) => Promise<TablechartInstance>;
 /** A Markdown table, or a caption with chart attributes, is wrapped in a figure with the caption and annotations beside it. */
 declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
@@ -439,4 +458,4 @@ declare const assignKeys: (figures: HTMLElement[], langattribute: string | false
 declare const checkContrast: (figure: HTMLElement) => void;
 /** Warns about text that does not stand out enough: a number inside a bar from that bar, other text from the background, once the chart is built. */
 declare const checkTextContrast: (figure: HTMLElement) => void;
-export { PRINTING_CLASS as A, Series as C, Config as D, AT_ONCE_CLASS as E, SHOWN_CLASS as M, defaultConfig as N, PLACED_CLASS as O, Row as S, stepTo as T, setShown as _, loadSources as a, ChartState as b, TablechartInstance as c, init as d, prepare as f, relabel as g, layout as h, adoptTables as i, QUEUED_CLASS as j, PLOT_CLASS as k, create as l, build as m, checkTextContrast as n, readMarkdownRows as o, addType as p, assignKeys as r, TablechartChart as s, checkContrast as t, entranceOf as u, unbuild as v, StepPlan as w, ChartType as x, scatter as y };
+export { PRINTING_CLASS as A, Series as C, Config as D, AT_ONCE_CLASS as E, SHOWN_CLASS as M, defaultConfig as N, PLACED_CLASS as O, Row as S, stepTo as T, unbuild as _, loadSources as a, ChartState as b, TablechartInstance as c, init as d, prepare as f, relabel as g, build as h, adoptTables as i, QUEUED_CLASS as j, PLOT_CLASS as k, create as l, layout as m, checkTextContrast as n, readMarkdownRows as o, setShown as p, assignKeys as r, TablechartChart as s, checkContrast as t, entranceOf as u, addType as v, StepPlan as w, ChartType as x, scatter as y };