@martinomagnifico/tablechart 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,24 +1,40 @@
 # Changelog
 
+## [1.1.1] - 2026-10-23
+
+### Changed
+
+- Columns and bars now grow in 0.8s with an ease-in-out, and overlap more to avoid stutter.
+- Numbers now fade in as one group to avoid Safari issues.
+- Gaps in lines and gridlines now switch on instead of fading.
+- The mask under an annotation label is now set when the chart has built, not during the build.
+
+### Fixed
+
+- A value of zero no longer shows a sliver of a column or bar under the axis.
+
+
+
 ## [1.1.0] - 2026-10-23
 
 ### Added
 
-- A scatter and bubble chart, `data-chart="scatter"`, in the new additional types: `@martinomagnifico/tablechart/additional-types` or `tablechart-additional-types.js`.
-- `addType()`, to add one of the additional types.
-- Axes with numbers on the scatter chart, with a scale of your own (`data-chart-scale`).
-- A value axis (`data-chart-axis`) and gridlines (`data-chart-grid`) on the other types, off by default. With either, the scale ends on a number of the axis, or where `data-chart-scale` says.
-- A reference line annotation, at a value, the mean or the median.
-- `data-chart-animate="false"`, to show one chart from the start, without animation.
+- Scatter and bubble charts: `data-chart="scatter"`. The first additional type, in `@martinomagnifico/tablechart/additional-types` or `tablechart-additional-types.js`. It is in a script of its own, so a page without a scatter chart does not load it.
+- `addType()`, to add an additional type.
+- A value axis with `data-chart-axis`, and gridlines with `data-chart-grid`. Off by default, because the numbers on the bars already show the values. A scatter chart always has its axes.
+- `data-chart-scale` for a scale of your own, such as 0 to 100%. On a scatter chart also `-x` and `-y`.
+- Reference lines: `data-annotation="reference"`, at a value, the mean or the median. For a target, or the mean and median of a histogram.
+- `data-chart-animate="false"`, for a chart that should just be there, without waiting to scroll into view.
+- `--tablechart-axis-text-color` and `--tablechart-name-color`, so the numbers on an axis can be lighter or darker than the names.
 
 ### Changed
 
-- A line chart with three lines or more shows a number above or below each point where there is room. Before, it left all numbers out.
+- A line chart with three lines or more now shows its numbers where there is room, above or below the point. Before, they were all left out, so you only saw them in the tooltip.
 
 ### Removed
 
-- The old CSS variable names from 1.0.4, and the animate values `up` and `across`.
-- The `hover` option and `data-chart-hover`. Use `tooltip` and `data-chart-tooltip`.
+- The old CSS variable names from 1.0.4, and `up` and `across` for `animate`. Deprecated since 1.0.4.
+- `hover` and `data-chart-hover`. Use `tooltip` and `data-chart-tooltip`. Deprecated since 1.0.5, when tooltips replaced the numbers that appeared on hover.
 
 
 

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

@@ -1,5 +1,2 @@
-import { n as ChartType } from "./tablechart-shared.mjs";
-//#region src/js/charts/scatter.d.ts
-/** One marker per row, across by its first value and up by its second; a third value makes it a bubble. */
-export declare const scatter: ChartType;
-//#endregion
+import { _ as scatter } from "./tablechart-shared.mjs";
+export { scatter };

package/dist/tablechart-additional-types.mjs

@@ -1,4 +1,4 @@
-import { B as e, I as t, M as n, Z as r, a as i, d as a, f as o, i as s, p as c, s as l, t as u } from "./tablechart-shared2.mjs";
+import { C as e, D as t, S as n, _ as r, b as i, g as a, j as o, v as s, w as c, x as l, y as u } from "./tablechart-shared.mjs";
 //#region src/js/charts/scatter.ts
 var d = [
 	"circle",
@@ -27,13 +27,13 @@ var d = [
 	categories: "beside",
 	columns: !0,
 	axes: !0,
-	text({ figure: e, plot: r, rows: i, series: o, config: s }) {
-		let { x: c, y: l, size: u, group: f } = p(o), g = r.querySelector(":scope > .tablechart-categories")?.children ?? [], _ = /* @__PURE__ */ new Map();
-		i.forEach((e, t) => {
-			let n = h(e, c, l);
+	text({ figure: t, plot: n, rows: r, series: a, config: o }) {
+		let { x: s, y: l, size: u, group: f } = p(a), g = n.querySelector(":scope > .tablechart-categories")?.children ?? [], _ = /* @__PURE__ */ new Map();
+		r.forEach((e, t) => {
+			let n = h(e, s, l);
 			n && (_.get(n)?.push(t) ?? _.set(n, [t]));
 		});
-		let v = (e) => u === void 0 ? 0 : Math.abs(i[e].cells[u]?.value ?? 0);
+		let v = (e) => u === void 0 ? 0 : Math.abs(r[e].cells[u]?.value ?? 0);
 		for (let e of _.values()) {
 			if (e.length < 2) continue;
 			let t = e.reduce((e, t) => v(t) > v(e) ? t : e);
@@ -42,25 +42,25 @@ var d = [
 				n === t ? r?.setAttribute("data-more", String(e.length - 1)) : r?.setAttribute("data-same", "");
 			}
 		}
-		let y = m(i, f);
+		let y = m(r, f);
 		if (y.length < 2 && u === void 0) return;
 		let b = document.createElement("div");
-		b.className = n, b.setAttribute("aria-hidden", "true"), b.inert = !0;
-		let x = Array.from(e.querySelectorAll(`tbody tr > td:nth-of-type(${f + 1})`)), S = (e, n) => {
-			let r = a(t, b);
-			return r.dataset.place = "legend", r.dataset.line = "none", r.textContent = e, n && s.langattribute && r.setAttribute(s.langattribute, n), r;
+		b.className = e, b.setAttribute("aria-hidden", "true"), b.inert = !0;
+		let x = Array.from(t.querySelectorAll(`tbody tr > td:nth-of-type(${f + 1})`)), S = (e, t) => {
+			let n = i(c, b);
+			return n.dataset.place = "legend", n.dataset.line = "none", n.textContent = e, t && o.langattribute && n.setAttribute(o.langattribute, t), n;
 		};
 		y.length > 1 && y.forEach((e, t) => {
-			let n = s.langattribute ? x.find((t) => t.textContent?.trim() === e)?.getAttribute(s.langattribute) : null, r = S(e, n);
+			let n = o.langattribute ? x.find((t) => t.textContent?.trim() === e)?.getAttribute(o.langattribute) : null, r = S(e, n);
 			r.dataset.marker = d[t % d.length], r.style.setProperty("--n", String(t)), r.style.setProperty("--palette", `var(--tablechart-color-${t + 1})`);
-		}), u !== void 0 && (S(o[u].name, o[u].key).dataset.marker = "size"), e.appendChild(b);
+		}), u !== void 0 && (S(a[u].name, a[u].key).dataset.marker = "size"), t.appendChild(b);
 	},
-	draw(t) {
-		let { rows: n, series: a, x: h, y: g, frame: _, unit: v, svg: y, categories: b, seriesValues: x, height: S, config: C, plot: w } = t;
+	draw(e) {
+		let { rows: i, series: c, x: h, y: g, frame: _, unit: v, svg: y, categories: b, seriesValues: x, height: S, config: C, plot: w } = e;
 		if (!h || !_) return;
-		let T = p(a), E = m(n, T.group), D = E.length > 1;
+		let T = p(c), E = m(i, T.group), D = E.length > 1;
 		for (let e of x.flat()) e.dataset.place = "none";
-		let O = (t.length("--tablechart-marker-size", "10px") ?? 10 * v) / 2, k = (t.length("--tablechart-bubble-max", "24px") ?? 24 * v) / 2, A = (e) => T.size === void 0 ? void 0 : e.cells[T.size], j = l(n.map((e) => Math.abs(A(e)?.value ?? 0))), M = n.flatMap((e, t) => {
+		let O = (e.length("--tablechart-marker-size", "10px") ?? 10 * v) / 2, k = (e.length("--tablechart-bubble-max", "24px") ?? 24 * v) / 2, A = (e) => T.size === void 0 ? void 0 : e.cells[T.size], j = u(i.map((e) => Math.abs(A(e)?.value ?? 0))), M = i.flatMap((e, t) => {
 			let n = e.cells[T.x], r = e.cells[T.y];
 			if (!n || !r || n.missing || r.missing) return [];
 			let i = A(e), a = i && !i.missing && j > 0 ? Math.max(O * .6, Math.sqrt(Math.abs(i.value) / j) * k) : O, o = D ? E.indexOf(e.cells[T.group]?.raw ?? "") : -1;
@@ -73,14 +73,14 @@ var d = [
 			}];
 		}), N = Math.min(M.length - 1, 6);
 		w.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 ? c(t * N / (M.length - 1)) : 0])), F = [...M].sort((e, t) => t.r - e.r || e.i - t.i);
-		for (let t of F) {
-			let n = D ? d[t.g % d.length] : "circle";
-			y.appendChild(u(n, t.px, t.py, t.r, {
-				class: e,
-				"data-row": t.i + 1,
+		let P = new Map([...M].sort((e, t) => e.px - t.px || e.i - t.i).map((e, t) => [e.i, N ? n(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 n = D ? d[e.g % d.length] : "circle";
+			y.appendChild(a(n, e.px, e.py, e.r, {
+				class: t,
+				"data-row": e.i + 1,
 				"data-marker": n,
-				style: `--i:${P.get(t.i)}; ${D ? `--n:${t.g}; --palette:var(--tablechart-color-${t.g + 1})` : ""}`
+				style: `--i:${P.get(e.i)}; ${D ? `--n:${e.g}; --palette:var(--tablechart-color-${e.g + 1})` : ""}`
 			}));
 		}
 		let I = w.parentElement?.getAttribute("data-chart-names"), L = I == null ? C.names : I !== "false", R = 4 * v, z = [
@@ -88,25 +88,25 @@ var d = [
 			_[1],
 			_[2] - 1.5 * R,
 			_[3] - 1.5 * R
-		], [B, V, H, U] = z, W = F.map(({ i: e, px: t, py: n, r }) => {
+		], [B, V, H, U] = z, W = F.map(({ i: e, px: t, py: n, r: i }) => {
 			if (b[e].hasAttribute("data-same")) return [];
-			let { width: i, height: a } = s(b[e]), o = i * v, c = a * v, l = c * .1, u = r * .7 + R / 2, d = (e, t) => [
-				Math.max(B, Math.min(e, B + H - o)),
+			let { width: a, height: o } = r(b[e]), s = a * v, c = o * v, l = c * .1, u = i * .7 + R / 2, d = (e, t) => [
+				Math.max(B, Math.min(e, B + H - s)),
 				Math.max(V, Math.min(t, V + U - c)) + l,
-				o,
+				s,
 				c - 2 * l
 			];
 			return [
-				d(t + r + R, n - c / 2),
-				d(t - r - R - o, n - c / 2),
-				d(t - o / 2, n - r - R - c),
-				d(t - o / 2, n + r + R),
+				d(t + i + R, n - c / 2),
+				d(t - i - R - s, n - c / 2),
+				d(t - s / 2, n - i - R - c),
+				d(t - s / 2, n + i + R),
 				d(t + u, n - u - c),
-				d(t - u - o, n - u - c),
+				d(t - u - s, n - u - c),
 				d(t + u, n + u),
-				d(t - u - o, n + u)
+				d(t - u - s, n + u)
 			];
-		}), G = L ? i(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,
@@ -117,9 +117,9 @@ var d = [
 			let n = b[e.i], i = G[t];
 			if (n.hidden = !1, delete n.dataset.missing, n.style.setProperty("--i", String(P.get(e.i))), n.toggleAttribute("data-left-out", i === null), i === null) return;
 			n.dataset.side = f[i];
-			let [a, c, , l] = W[t][i];
-			o(n, a, c - (s(n).height * v - l) / 2, r, S);
-		}), t.rowAt = (e, t) => {
+			let [a, s, , c] = W[t][i];
+			l(n, a, s - (r(n).height * v - c) / 2, o, S);
+		}), e.rowAt = (e, t) => {
 			let n = null, r = 6 * v;
 			for (let i of M) {
 				let a = Math.max(Math.hypot(i.px - e * v, i.py - t * v) - i.r, 0);

package/dist/tablechart-core.d.mts

@@ -1,15 +1,2 @@
-import { a as StepPlan, c as PLACED_CLASS, d as QUEUED_CLASS, f as SHOWN_CLASS, i as Series, l as PLOT_CLASS, n as ChartType, o as stepTo, p as defaultConfig, r as Row, s as Config, t as ChartState, u as PRINTING_CLASS } from "./tablechart-shared.mjs";
-import { c as build, d as setShown, f as unbuild, i as entranceOf, l as layout, o as prepare, s as addType, u as relabel } from "./tablechart-shared2.mjs";
-//#region src/js/functions/sources.d.ts
-/** A Markdown table, or a caption with chart attributes, is wrapped in a figure with the caption and annotations beside it. */
-export declare const adoptTables: (figures: HTMLElement[]) => HTMLElement[];
-/** `data-chart-src` fills the figure's table with the rows of a JSON file, keeping a header row the author wrote; a file that fails is reported. */
-export declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
-/** In a Markdown table, a bold label makes the row a total, and a bold header puts that series in focus. */
-export declare const readMarkdownRows: (figures: HTMLElement[]) => void;
-//#endregion
-//#region src/js/functions/read-table.d.ts
-/** Writes translation keys such as `harvest-row1` onto a figure with `data-chart-keys`; a duplicate prefix gets a number. */
-export declare const assignKeys: (figures: HTMLElement[], langattribute: string | false) => void;
-//#endregion
-export { type ChartState, type ChartType, type Config, PLACED_CLASS, PLOT_CLASS, PRINTING_CLASS, QUEUED_CLASS, type Row, SHOWN_CLASS, type Series, type StepPlan, addType, build, defaultConfig, entranceOf, layout, prepare, relabel, setShown, stepTo, unbuild };
+import { A as defaultConfig, C as stepTo, D as PRINTING_CLASS, E as PLOT_CLASS, O as QUEUED_CLASS, S as StepPlan, T as PLACED_CLASS, b as Row, c as entranceOf, d as addType, f as build, g as unbuild, h as setShown, i as readMarkdownRows, k as SHOWN_CLASS, m as relabel, n as adoptTables, p as layout, r as loadSources, t as assignKeys, u as prepare, v as ChartState, w as Config, x as Series, y as ChartType } from "./tablechart-shared.mjs";
+export { 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 };

package/dist/tablechart-core.mjs

@@ -1,3 +1 @@
-import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, s as d, u as f } from "./tablechart-shared.mjs";
-import { H as p, K as m, Q as h, R as g, V as _, z as v } from "./tablechart-shared2.mjs";
-export { g as PLACED_CLASS, v as PLOT_CLASS, _ as PRINTING_CLASS, p as QUEUED_CLASS, m as SHOWN_CLASS, t as addType, e as adoptTables, i as assignKeys, o as build, h as defaultConfig, c as entranceOf, f as layout, l as loadSources, a as prepare, d as readMarkdownRows, n as relabel, r as setShown, s as stepTo, u as unbuild };
+export { T as PLACED_CLASS, E as PLOT_CLASS, O as PRINTING_CLASS, k as QUEUED_CLASS, A as SHOWN_CLASS, c as addType, a as adoptTables, h as assignKeys, l as build, M 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";

package/dist/tablechart-shared.d.mts

@@ -320,4 +320,73 @@ interface ChartState {
   checks: Check[];
 }
 //#endregion
-export { StepPlan as a, PLACED_CLASS as c, QUEUED_CLASS as d, SHOWN_CLASS as f, Series as i, PLOT_CLASS as l, ChartType as n, stepTo as o, defaultConfig as p, Row as r, Config as s, ChartState as t, PRINTING_CLASS as u };
+//#region src/js/charts/scatter.d.ts
+/** One marker per row, across by its first value and up by its second; a third value makes it a bubble. */
+declare const scatter: ChartType;
+//#endregion
+//#region src/js/core.d.ts
+/** Adds a chart type for `data-chart="name"`, such as one from `@martinomagnifico/tablechart/additional-types`, before `init()`. */
+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;
+/** One class, `is-shown`, starts the whole build. */
+declare const setShown: (state: ChartState, shown: boolean) => void;
+//#endregion
+//#region src/js/init.d.ts
+interface TablechartChart {
+  figure: HTMLElement;
+  /** Lays the chart out again, for example after a script has changed its text. */
+  refresh(): void;
+  /** Stops watching scroll, size and language. The chart stays as it is. */
+  destroy(): void;
+  /** On a chart that steps (`data-fragment`): shows one step more. */
+  next(): void;
+  /** On a chart that steps: shows one step less. */
+  previous(): void;
+  /** On a chart that steps: shows the chart up to `step`, from 0 to `steps`. */
+  stepTo(step: number): void;
+  /** How many steps are shown. */
+  readonly step: number;
+  /** How many steps the chart has; 0 for a chart that does not step. */
+  readonly steps: number;
+}
+interface TablechartInstance {
+  charts: TablechartChart[];
+  /** Lays out every chart again, for example after a script has changed its text. */
+  refresh(): void;
+  /** Stops watching scroll, size and language. The charts stay as they are. */
+  destroy(): void;
+}
+declare global {
+  interface HTMLElement {
+    tablechart?: TablechartChart;
+  }
+}
+/** How far an animated parent is in before the chart builds: the figure's `data-chart-entrance`, or else the option. */
+declare const entranceOf: (figure: HTMLElement, config: Config) => number;
+/** Turns elements into figures with a table and translation keys, all at once, so duplicate keys are found. */
+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>;
+//#endregion
+//#region src/js/functions/sources.d.ts
+/** 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[];
+/** `data-chart-src` fills the figure's table with the rows of a JSON file, keeping a header row the author wrote; a file that fails is reported. */
+declare const loadSources: (figures: HTMLElement[]) => Promise<void>;
+/** In a Markdown table, a bold label makes the row a total, and a bold header puts that series in focus. */
+declare const readMarkdownRows: (figures: HTMLElement[]) => void;
+//#endregion
+//#region src/js/functions/read-table.d.ts
+/** 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;
+//#endregion
+export { defaultConfig as A, stepTo as C, PRINTING_CLASS as D, PLOT_CLASS as E, QUEUED_CLASS as O, StepPlan as S, PLACED_CLASS 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, SHOWN_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, Config as w, Series as x, ChartType as y };