@martinomagnifico/tablechart 1.2.1 → 1.2.3

package/CHANGELOG.md

@@ -1,6 +1,35 @@
 # Changelog
 
-## [1.2.1] - 2026-10-30
+## [1.2.3] - 2026-10-31
+
+### Added
+
+- `checkContrast` and `checkTextContrast` in `@martinomagnifico/tablechart/core`. A script that builds its own charts, can check their contrast too.
+- `--tablechart-value-on-dark` and `--tablechart-value-on-light`, the two colours a number inside a bar chooses from, such as ivory and navy. If neither has enough contrast with the bar, the number gets to be black or white.
+- `--tablechart-value-contrast`, the contrast a number inside a bar needs: 5:1 by default, a little more than the 4.5:1 that WCAG asks, so it is easier to read.
+- `--tablechart-contrast-wcag: 3` measures contrast with APCA, from the draft of WCAG 3, for the number colours and the warnings alike. It follows what people see more closely than WCAG 2, which stays the default.
+- `--tablechart-marker-ease`, the easing with which a scatter marker grows. With a `linear()` curve, markers can bounce in.
+
+### Changed
+
+- Tablechart measures the background behind a chart, such as a card or a slide, so `--tablechart-surface` is only needed on an image or a gradient. Before, a chart in a card needed it by hand.
+- The contrast check runs for every chart, not only with `debug`. A printed page or a PDF has the same colours as the screen.
+
+### Deprecated
+
+- `--tablechart-bar-value-color`, `-piece-`, `-up-`, `-down-` and `-total-value-color` still work, but go in 1.3.0, and the console warns about them. They set one colour without a contrast check; `--tablechart-value-on-dark` and `--tablechart-value-on-light` replace them.
+
+### Fixed
+
+- A chart whose width changes is laid out before the next frame is shown. Before, it was shown scaled for a frame or two, so the page jumped.
+- After a chart is built, a change of colour, such as to dark mode, changes its text at once. Before, the text took the time of the whole build again.
+- A scatter chart keeps the room it needs before it is laid out. Before, the page moved down by about a third of its width when it appeared.
+- On a scatter chart with steps, a marker grows at its step. Before, it only faded in, because it had grown while still hidden.
+- A chart with steps and gridlines or a quadrant builds smoothly in Safari. Its lines now stop around the text as they do without steps; the mask they had made Safari draw the chart again on every frame.
+
+
+
+## [1.2.2] - 2026-10-30
 
 ### Added
 
@@ -14,7 +43,6 @@
 ### Changed
 
 - The parts of a stacked column or bar have a gap of 1px between them, but not at the zero line. Two parts in similar colours stay apart. `--tablechart-stack-gap` sets it.
-- The zero line darkens a bar it crosses, as a multiply does, and lightens it in dark mode. Before, it was a grey line over the bar.
 - A number inside a bar has at least 4.5:1 with the bar: in the background colour if that has enough, else a bit lighter or darker, else black or white. Before, a number on a middle colour could have less than 4.5:1.
 - With `debug`, the console warns about a line, slice or bar with a contrast below 3:1 with the background. That is the minimum for parts of a chart (WCAG 1.4.11).
 

package/dist/tablechart-additional-types.d.mts

@@ -1,2 +1,2 @@
-import { _ as scatter } from "./tablechart-shared.mjs";
+import { y as scatter } from "./tablechart-shared.mjs";
 export { scatter };

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, N as a, O as o, P as s, S as c, V as l, W as u, b as d, j as f, k as p, w as m, x as h, z as g } from "./tablechart-shared.mjs";
+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";
 // src/js/annotations/quadrant.ts
-var _ = `${l}-name`, v = [
+var _ = `${p}-name`, v = [
 	"top left",
 	"top right",
 	"bottom left",
@@ -17,26 +17,26 @@ var _ = `${l}-name`, v = [
 }, b = {
 	create(e, t) {
 		for (let n of e.querySelectorAll("[data-corner]")) {
-			let e = (n.getAttribute("data-corner") ?? "").toLowerCase().split(/\s+/), i = `${e.find((e) => e === "top" || e === "bottom")} ${e.find((e) => e === "left" || e === "right")}`;
-			if (!v.includes(i)) {
-				console.warn(`[${r}] A quadrant has a corner "${n.getAttribute("data-corner")}". It takes ${v.join(", ")}.`);
+			let e = (n.getAttribute("data-corner") ?? "").toLowerCase().split(/\s+/), r = `${e.find((e) => e === "top" || e === "bottom")} ${e.find((e) => e === "left" || e === "right")}`;
+			if (!v.includes(r)) {
+				console.warn(`[${o}] A quadrant has a corner "${n.getAttribute("data-corner")}". It takes ${v.join(", ")}.`);
 				continue;
 			}
-			let a = document.createElement("span");
-			if (a.className = _, a.dataset.corner = i, a.inert = !0, n.childElementCount) for (let e of Array.from(n.children)) a.append(e.cloneNode(!0));
-			else a.textContent = (n.textContent ?? "").trim();
-			for (let { name: e, value: t } of Array.from(n.attributes)) e !== "data-corner" && a.setAttribute(e, t);
-			t.append(a);
+			let i = document.createElement("span");
+			if (i.className = _, i.dataset.corner = r, i.inert = !0, n.childElementCount) for (let e of Array.from(n.children)) i.append(e.cloneNode(!0));
+			else i.textContent = (n.textContent ?? "").trim();
+			for (let { name: e, value: t } of Array.from(n.attributes)) e !== "data-corner" && i.setAttribute(e, t);
+			t.append(i);
 		}
 		return null;
 	},
-	draw(t, n, i) {
-		let { frame: o, x: s, y: d, rows: v, series: b, height: x, unit: S, svg: C, plot: w, categories: T } = i;
-		if (!o || !s) {
-			console.warn(`[${r}] A quadrant works on a scatter chart, which has an axis across and an axis up.`);
+	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;
+		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] = o, 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(t.getAttribute("data-x"), j(0)), N = y(t.getAttribute("data-y"), j(1)), P = M === null ? E + O / 2 : Math.min(Math.max(s(M), E), E + O), F = N === null ? D + k / 2 : Math.min(Math.max(d(N), D), D + k), I = C.querySelector(`:scope > .${a}`);
+		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}`);
 		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 _ = `${l}-name`, v = [
 				return !(i === "V" && e(Number(n), P)) && !(i === "H" && e(Number(r), F));
 			}).join(""));
 		}
-		C.insertBefore(f("path", {
-			class: l,
-			d: `M${e(P)},${e(D)}V${e(D + k)}M${e(E)},${e(F)}H${e(E + O)}`
-		}), C.querySelector(`:scope > .${g}`));
+		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}`));
 		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, a = r ? D + k - L : D + L;
-			p(e, i, a, u, x);
-			let o = c(e).width * S, s = c(e).height * S;
+			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;
 			R.push([
-				n ? i - o : i,
-				r ? a - s : a,
-				o,
-				s
+				n ? i - s : i,
+				r ? o - c : o,
+				s,
+				c
 			]);
 		}
-		i.taken.push(...R);
+		l.taken.push(...R);
 		for (let e of T) {
 			if (e.hidden || e.hasAttribute("data-left-out") || !e.style.left) continue;
-			let t = h(e, S, u, x, [0, 0]);
-			R.some((e) => m(e, t)) && e.setAttribute("data-left-out", "");
+			let r = t(e, S, a, x, [0, 0]);
+			R.some((e) => n(e, r)) && e.setAttribute("data-left-out", "");
 		}
 	}
 }, x = [
@@ -96,13 +96,13 @@ var _ = `${l}-name`, v = [
 	axes: !0,
 	numbers: !1,
 	annotations: { quadrant: b },
-	text({ figure: e, plot: t, rows: n, series: r, config: a }) {
-		let { x: c, y: l, size: u, group: d } = C(r), f = t.querySelector(":scope > .tablechart-categories")?.children ?? [], p = /* @__PURE__ */ new Map();
-		n.forEach((e, t) => {
-			let n = T(e, c, l);
+	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();
+		r.forEach((e, t) => {
+			let n = T(e, s, c);
 			n && (p.get(n)?.push(t) ?? p.set(n, [t]));
 		});
-		let m = (e) => u === void 0 ? 0 : Math.abs(n[e].cells[u]?.value ?? 0);
+		let m = (e) => l === void 0 ? 0 : Math.abs(r[e].cells[l]?.value ?? 0);
 		for (let e of p.values()) {
 			if (e.length < 2) continue;
 			let t = e.reduce((e, t) => m(t) > m(e) ? t : e);
@@ -111,53 +111,53 @@ var _ = `${l}-name`, v = [
 				n === t ? r?.setAttribute("data-more", String(e.length - 1)) : r?.setAttribute("data-same", "");
 			}
 		}
-		let h = w(n, d);
-		if (h.length < 2 && u === void 0) return;
+		let h = w(r, d);
+		if (h.length < 2 && l === void 0) return;
 		let g = document.createElement("div");
-		g.className = s, g.setAttribute("aria-hidden", "true"), g.inert = !0;
-		let _ = Array.from(e.querySelectorAll(`tbody tr > td:nth-of-type(${d + 1})`)), v = (e, t) => {
-			let n = o(i, g);
-			return n.dataset.place = "legend", n.dataset.line = "none", n.textContent = e, t && a.langattribute && n.setAttribute(a.langattribute, t), n;
+		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;
 		};
 		h.length > 1 && h.forEach((e, t) => {
-			let n = a.langattribute ? _.find((t) => t.textContent?.trim() === e)?.getAttribute(a.langattribute) : null, r = v(e, n);
+			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})`);
-		}), u !== void 0 && (v(r[u].name, r[u].key).dataset.marker = "size"), t.after(g);
+		}), l !== void 0 && (v(a[l].name, a[l].key).dataset.marker = "size"), n.after(g);
 	},
-	draw(r) {
-		let { rows: i, series: a, x: o, y: s, frame: l, unit: f, svg: m, categories: h, height: _, config: v, plot: y } = r;
-		if (!o || !l) return;
-		let b = C(a), T = w(i, b.group), E = T.length > 1, D = (r.length("--tablechart-marker-size", "10px") ?? 10 * f) / 2, O = (r.length("--tablechart-bubble-max", "24px") ?? 24 * f) / 2, k = (r.length("--tablechart-bubble-min", "") ?? D * 1.2) / 2, A = (e) => b.size === void 0 ? void 0 : e.cells[b.size], j = n(i.map((e) => Math.abs(A(e)?.value ?? 0))), M = i.flatMap((e, t) => {
-			let n = e.cells[b.x], r = e.cells[b.y];
-			if (!n || !r || n.missing || r.missing) return [];
-			let i = A(e), a = i && !i.missing && j > 0 ? Math.max(k, Math.sqrt(Math.abs(i.value) / j) * O) : D, c = E ? T.indexOf(e.cells[b.group]?.raw ?? "") : -1;
+	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;
 			return [{
 				i: t,
-				px: o(n.value),
-				py: s(r.value),
-				r: a,
+				px: r(n.value),
+				py: i(a.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((t, n) => [t.i, N ? e(n * 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 ? s(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";
-			m.appendChild(d(t, e.px, e.py, e.r, {
-				class: g,
+			u.appendChild(d(t, e.px, e.py, e.r, {
+				class: m,
 				"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 * f, z = [
-			l[0] + 1.5 * R,
-			l[1],
-			l[2] - 1.5 * R,
-			l[3] - 1.5 * R
+		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
 		], [B, V, H, U] = z, W = F.map(({ i: e, px: t, py: n, r }) => {
-			if (h[e].hasAttribute("data-same")) return [];
-			let { width: i, height: a } = c(h[e]), o = i * f, s = a * f, l = s * .1, u = r * .7 + R / 2, d = (e, t) => [
+			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) => [
 				Math.max(B, Math.min(e, B + H - o)),
 				Math.max(V, Math.min(t, V + U - s)) + l,
 				o,
@@ -173,23 +173,23 @@ var _ = `${l}-name`, v = [
 				d(t + u, n + u),
 				d(t - u - o, n + u)
 			];
-		}), G = L ? t(W, M.map(({ px: e, py: t, r: n }) => [
+		}), G = L ? f(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 h) e.hidden = !0, e.dataset.missing = "";
+		for (let e of p) e.hidden = !0, e.dataset.missing = "";
 		F.forEach((e, t) => {
-			let n = h[e.i], r = G[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, a, , o] = W[t][r];
-			p(n, i, a - (c(n).height * f - o) / 2, u, _);
-		}), r.rowAt = (e, t) => {
-			let n = null, r = 6 * f;
+			let [i, o, , s] = W[t][r];
+			h(n, i, o - (g(n).height * c - s) / 2, a, _);
+		}), e.rowAt = (e, t) => {
+			let n = null, r = 6 * c;
 			for (let i of M) {
-				let a = Math.max(Math.hypot(i.px - e * f, i.py - t * f) - i.r, 0);
+				let a = Math.max(Math.hypot(i.px - e * c, i.py - t * c) - 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 SHOWN_CLASS, C as stepTo, D as PLOT_CLASS, E as PLACED_CLASS, O as PRINTING_CLASS, S as StepPlan, T as Config, b as Row, c as entranceOf, d as addType, f as build, g as unbuild, h as setShown, i as readMarkdownRows, j as defaultConfig, k as QUEUED_CLASS, m as relabel, n as adoptTables, p as layout, r as loadSources, t as assignKeys, u as prepare, v as ChartState, w as AT_ONCE_CLASS, x as Series, y 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, defaultConfig, entranceOf, layout, loadSources, prepare, readMarkdownRows, relabel, setShown, stepTo, unbuild };
+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";
+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 { M as AT_ONCE_CLASS, L as PLACED_CLASS, R as PLOT_CLASS, B as PRINTING_CLASS, H as QUEUED_CLASS, U as SHOWN_CLASS, c as addType, a as adoptTables, h as assignKeys, l as build, G as defaultConfig, n as entranceOf, u as layout, o as loadSources, i as prepare, s as readMarkdownRows, d as relabel, f as setShown, m as stepTo, p 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, 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";

package/dist/tablechart-shared.d.mts

@@ -420,4 +420,8 @@ declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
 declare const readMarkdownRows: (figures: HTMLElement[]) => void;
 /** Writes translation keys such as `harvest-row1` onto a figure with `data-chart-keys`; a duplicate prefix gets a number. */
 declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
-export { SHOWN_CLASS as A, stepTo as C, PLOT_CLASS as D, PLACED_CLASS as E, PRINTING_CLASS as O, StepPlan as S, Config as T, scatter as _, TablechartChart as a, Row as b, entranceOf as c, addType as d, build as f, unbuild as g, setShown as h, readMarkdownRows as i, defaultConfig as j, QUEUED_CLASS as k, init as l, relabel as m, adoptTables as n, TablechartInstance as o, layout as p, loadSources as r, create as s, assignKeys as t, prepare as u, ChartState as v, AT_ONCE_CLASS as w, Series as x, ChartType as y };
+/** Warns about each line, slice or bar that does not stand out enough from the background. Faint parts that are out of focus are left out. */
+declare const checkContrast: (figure: HTMLElement) => void;
+/** Warns about each number inside a bar whose colour does not stand out enough from that bar, 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 };