@martinomagnifico/tablechart 1.1.2 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # Changelog
 
+## [1.2.0] - 2026-10-28
+
+### Added
+
+- Summaries! They need a separate import from `@martinomagnifico/tablechart/summary`. Summaries are important for screen readers and print.
+- A line over columns, with `data-chart="line"` on a column header.
+- `data-chart-values` and the `values` option: which values a line shows. A long line shows only its key values.
+- Notes: a column with `data-note`, shown as a line at its row and in the tooltip.
+- A `quadrant` annotation for scatter charts, and one step for a scatter with `data-fragment`.
+- `--tablechart-bubble-min`, so the smallest bubble stays visible.
+
+### Changed
+
+- Values on a line keep clear of the line, the points and each other, if possible.
+- Line and area charts have a tick above each name. `data-chart-ticks="false"` turns them off.
+- Scatter markers have an edge in the background colour, so they stand apart from lines and each other.
+- Bars put their numbers after the bar by default, as columns put them above. `data-chart-labels="inside"` puts them inside, as on columns.
+- Badges are rounded boxes instead of ellipses. They take less room.
+- A few columns or bars start one after the other again, and their numbers come when the column is nearly grown. Many columns still grow almost together.
+
+### Fixed
+
+- Holes in a line come with the line, not after the build.
+- A legend box is no longer shown empty before its names.
+- Triangle markers are centred on their point.
+- Names of a long line no longer wait seconds after the build.
+- Grouped columns and bars no longer grow after the first resize.
+
+
+
+## [1.1.3] - 2026-10-26
+
+### Changed
+
+- Fixes charts that should be shown directly. Labels and annotations now also show immediately.
+- Trend and bracket lines stop at their badge from the start. Before, they ran through it until the chart was built.
+- Gridlines leave a gap for a badge, as they do for text. The gap appears with the badge.
+- Badge backgrounds no longer fade in. A fading background showed as a grey box over the marks.
+- The mask under a badge goes on when the marks under it are done. Before, it waited for the whole chart.
+
+### Added
+
+- `atOnce` in `setShown(state, shown, atOnce)` from `@martinomagnifico/tablechart/core`. It shows or hides a chart without transitions, with `AT_ONCE_CLASS`.
+- `numbers: false` for a chart type without numbers on the chart, such as a scatter. Its numbers then stay out of the layout.
+
+### Fixed
+
+- Legend keys no longer fade in when printing or when a chart is shown at once.
+- Removed a layout for hidden scatter plot labels to increase performance. 
+
+
+
 ## [1.1.2] - 2026-10-24
 
 ### Changed

package/README.md

@@ -12,14 +12,15 @@
 Tablechart makes simple charts from a table: an HTML table, a Markdown table or a JSON file. You write the table, Tablechart shows it as a chart.
 
 * **Chart types:** column, bar, line, area, waterfall and donut, and scatter as an additional type
-* **The table stays:** it is hidden from sight, but screen readers, search engines and translation scripts still read it. Without JavaScript, the table is all there is.
-* **Real text:** names and numbers are HTML, so they use the font of the page and do not scale with the drawing.
-* **CSS for the looks:** colours, sizes and animation are CSS variables. Light and dark mode follow the page.
+* **The table:** the table is hidden from sight, but screen readers, search engines and translation scripts still read it.
+* **Real text:** names and numbers are HTML, so they use the font of the page. *No more Times New Roman labels.* Text does not scale, but just uses the font size of the page or a size you define.
+* **CSS styling:** colours, sizes and animation are CSS variables. Light and dark mode follow the page.
 * **Annotations:** badges, brackets, trend arrows, reference lines and a break in the scale
 * **Tooltips:** when a chart leaves numbers out, point at a row, or tap it, to see all its values
-* **Print and PDF:** every chart prints whole, and the table can be shown under a chart that leaves numbers out
+* **Summary:** sometimes a table is just too large, for example when a screen reader talks through it, You try to remember the number that was said 4 sentences ago. In print too. A summary deals with that. See [Summary](https://martinomagnifico.github.io/tablechart/features/summary.html).
+* **Print and PDF:** tablechart in a PDF flow builds the charts immediately
 * **Step by step:** show the rows one at a time, with Previous and Next buttons
-* **Animation:** a chart builds when it scrolls into view
+* **Animation:** a chart can build when it scrolls into view
 
 ----
 
@@ -139,4 +140,4 @@ Tablechart is free and open source. If it saves you time, consider [sponsoring m
 
 ## License
 
-MIT © [Martinomagnifico](https://github.com/martinomagnifico)
+MIT © [Martinomagnifico](https://github.com/martinomagnifico)**

package/dist/tablechart-additional-types.js

@@ -1 +1 @@
-!function(t){var e=["circle","triangle","square","diamond"],o=["right","left","above","below","right","left","right","left"],n=t=>{const e=t.flatMap((t,e)=>t.group?[]:[e]);return{x:e[0],y:e[1],size:e[2],group:t.findIndex(t=>t.group)}},r=(t,e)=>e<0?[]:[...new Set(t.map(t=>t.cells[e]?.raw??""))],a=(t,e,o)=>t.cells[e]?.missing||t.cells[o]?.missing?null:`${t.cells[e]?.value} ${t.cells[o]?.value}`,s={aspect:.62,categories:"beside",columns:!0,axes:!0,text({figure:o,plot:s,rows:c,series:i,config:l}){const{x:u,y:f,size:h,group:d}=n(i),g=s.querySelector(":scope > .tablechart-categories")?.children??[],p=new Map;c.forEach((t,e)=>{const o=a(t,u,f);o&&(p.get(o)?.push(e)??p.set(o,[e]))});const M=t=>void 0===h?0:Math.abs(c[t].cells[h]?.value??0);for(const t of p.values()){if(t.length<2)continue;const e=t.reduce((t,e)=>M(e)>M(t)?e:t);for(const o of t){const n=g[o];o===e?n?.setAttribute("data-more",String(t.length-1)):n?.setAttribute("data-same","")}}const b=r(c,d);if(b.length<2&&void 0===h)return;const m=document.createElement("div");m.className=t.LEGEND_CLASS,m.setAttribute("aria-hidden","true"),m.inert=!0;const v=Array.from(o.querySelectorAll(`tbody tr > td:nth-of-type(${d+1})`)),x=(e,o)=>{const n=(0,t.htmlEl)(t.NAME_CLASS,m);return n.dataset.place="legend",n.dataset.line="none",n.textContent=e,o&&l.langattribute&&n.setAttribute(l.langattribute,o),n};b.length>1&&b.forEach((t,o)=>{const n=l.langattribute?v.find(e=>e.textContent?.trim()===t)?.getAttribute(l.langattribute):null,r=x(t,n);r.dataset.marker=e[o%e.length],r.style.setProperty("--n",String(o)),r.style.setProperty("--palette",`var(--tablechart-color-${o+1})`)}),void 0!==h&&(x(i[h].name,i[h].key).dataset.marker="size"),o.appendChild(m)},draw(a){const{rows:s,series:c,x:i,y:l,frame:u,unit:f,svg:h,categories:d,seriesValues:g,height:p,config:M,plot:b}=a;if(!i||!u)return;const m=n(c),v=r(s,m.group),x=v.length>1;for(const t of g.flat())t.dataset.place="none";const w=(a.length("--tablechart-marker-size","10px")??10*f)/2,y=(a.length("--tablechart-bubble-max","24px")??24*f)/2,$=t=>void 0===m.size?void 0:t.cells[m.size],S=(0,t.largest)(s.map(t=>Math.abs($(t)?.value??0))),z=s.flatMap((t,e)=>{const o=t.cells[m.x],n=t.cells[m.y];if(!o||!n||o.missing||n.missing)return[];const r=$(t),a=r&&!r.missing&&S>0?Math.max(.6*w,Math.sqrt(Math.abs(r.value)/S)*y):w,s=x?v.indexOf(t.cells[m.group]?.raw??""):-1;return[{i:e,px:i(o.value),py:l(n.value),r:a,g:s}]}),k=Math.min(z.length-1,6);b.style.setProperty("--count",String(k+1));const q=new Map([...z].sort((t,e)=>t.px-e.px||t.i-e.i).map((e,o)=>[e.i,k?(0,t.short)(o*k/(z.length-1)):0])),A=[...z].sort((t,e)=>e.r-t.r||t.i-e.i);for(const o of A){const n=x?e[o.g%e.length]:"circle";h.appendChild((0,t.markerEl)(n,o.px,o.py,o.r,{class:t.POINT_CLASS,"data-row":o.i+1,"data-marker":n,style:`--i:${q.get(o.i)}; ${x?`--n:${o.g}; --palette:var(--tablechart-color-${o.g+1})`:""}`}))}const T=b.parentElement?.getAttribute("data-chart-names"),V=null==T?M.names:"false"!==T,j=4*f,B=[u[0]+1.5*j,u[1],u[2]-1.5*j,u[3]-1.5*j],[C,D,E,F]=B,G=A.map(({i:e,px:o,py:n,r:r})=>{if(d[e].hasAttribute("data-same"))return[];const{width:a,height:s}=(0,t.sizeOf)(d[e]),c=a*f,i=s*f,l=.1*i,u=.7*r+j/2,h=(t,e)=>[Math.max(C,Math.min(t,C+E-c)),Math.max(D,Math.min(e,D+F-i))+l,c,i-2*l];return[h(o+r+j,n-i/2),h(o-r-j-c,n-i/2),h(o-c/2,n-r-j-i),h(o-c/2,n+r+j),h(o+u,n-u-i),h(o-u-c,n-u-i),h(o+u,n+u),h(o-u-c,n+u)]}),H=V?(0,t.avoidCollisions)(G,z.map(({px:t,py:e,r:o})=>[t-o,e-o,2*o,2*o]),B):A.map(()=>null);for(const t of d)t.hidden=!0,t.dataset.missing="";A.forEach((e,n)=>{const r=d[e.i],a=H[n];if(r.hidden=!1,delete r.dataset.missing,r.style.setProperty("--i",String(q.get(e.i))),r.toggleAttribute("data-left-out",null===a),null===a)return;r.dataset.side=o[a];const[s,c,,i]=G[n][a];(0,t.placeAt)(r,s,c-((0,t.sizeOf)(r).height*f-i)/2,t.VIEWBOX_WIDTH,p)}),a.rowAt=(t,e)=>{let o=null,n=6*f;for(const r of z){const a=Math.max(Math.hypot(r.px-t*f,r.py-e*f)-r.r,0);(a<n||a===n&&o&&r.r<o.r)&&(n=a,o=r)}return o?o.i:null}},tooltip(t,e){const{x:o,y:r}=n(t.series),s=a(t.rows[e],o,r),c=t.rows.flatMap((t,n)=>n===e||null!==s&&a(t,o,r)===s?[n]:[]),i=c.filter(e=>t.categories[e]?.hasAttribute("data-more"));return[...i,...c.filter(t=>!i.includes(t))].map(e=>({name:t.categories[e]?.textContent??"",value:""}))}};window.Tablechart.addType("scatter",s)}(Tablechart.kit);
+!function(t){var o=`${t.QUADRANT_CLASS}-name`,n=["top left","top right","bottom left","bottom right"],r=(t,o)=>{if(!t)return null;if("mean"===t)return o.length?o.reduce((t,o)=>t+o,0)/o.length:null;if("median"===t){const t=[...o].sort((t,o)=>t-o),n=t.length/2;return t.length?t.length%2?t[Math.floor(n)]:(t[n-1]+t[n])/2:null}const n=Number.parseFloat(t);return Number.isFinite(n)?n:null},e=["circle","triangle","square","diamond"],a=["right","left","above","below","right","left","right","left"],s=t=>{const o=t.flatMap((t,o)=>t.group?[]:[o]);return{x:o[0],y:o[1],size:o[2],group:t.findIndex(t=>t.group)}},c=(t,o)=>o<0?[]:[...new Set(t.map(t=>t.cells[o]?.raw??""))],i=(t,o,n)=>t.cells[o]?.missing||t.cells[n]?.missing?null:`${t.cells[o]?.value} ${t.cells[n]?.value}`,l={aspect:.62,categories:"beside",columns:!0,axes:!0,numbers:!1,annotations:{quadrant:{create(r,e){for(const a of r.querySelectorAll("[data-corner]")){const r=(a.getAttribute("data-corner")??"").toLowerCase().split(/\s+/),s=`${r.find(t=>"top"===t||"bottom"===t)} ${r.find(t=>"left"===t||"right"===t)}`;if(!n.includes(s)){console.warn(`[${t.LIBRARY_NAME}] A quadrant has a corner "${a.getAttribute("data-corner")}". It takes ${n.join(", ")}.`);continue}const c=document.createElement("span");if(c.className=o,c.dataset.corner=s,c.inert=!0,a.childElementCount)for(const t of Array.from(a.children))c.append(t.cloneNode(!0));else c.textContent=(a.textContent??"").trim();for(const{name:t,value:o}of Array.from(a.attributes))"data-corner"!==t&&c.setAttribute(t,o);e.append(c)}return null},draw(n,e,a){const{frame:s,x:c,y:i,rows:l,series:u,height:f,unit:d,svg:h,plot:p,categories:g}=a;if(!s||!c)return void console.warn(`[${t.LIBRARY_NAME}] A quadrant works on a scatter chart, which has an axis across and an axis up.`);const[m,b,M,$]=s,x=u.flatMap((t,o)=>t.group?[]:[o]),v=t=>l.flatMap(o=>o.cells[x[t]]&&!o.cells[x[t]].missing?[o.cells[x[t]].value]:[]),w=r(n.getAttribute("data-x"),v(0)),y=r(n.getAttribute("data-y"),v(1)),A=null===w?m+M/2:Math.min(Math.max(c(w),m),m+M),S=null===y?b+$/2:Math.min(Math.max(i(y),b),b+$),k=h.querySelector(`:scope > .${t.GRID_CLASS}`);if(k){const t=(t,o)=>Math.abs(t-o)<d/2,o=(k.getAttribute("d")??"").match(/M[^M]+/g)??[];k.setAttribute("d",o.filter(o=>{const[,n,r,e]=o.match(/M(-?[\d.]+),(-?[\d.]+)([HV])/)??[];return!("V"===e&&t(Number(n),A)||"H"===e&&t(Number(r),S))}).join(""))}h.insertBefore((0,t.svgEl)("path",{class:t.QUADRANT_CLASS,d:`M${(0,t.short)(A)},${(0,t.short)(b)}V${(0,t.short)(b+$)}M${(0,t.short)(m)},${(0,t.short)(S)}H${(0,t.short)(m+M)}`}),h.querySelector(`:scope > .${t.POINT_CLASS}`));const q=6*d,z=[];for(const r of p.querySelectorAll(`:scope > .${o}`)){const o=r.dataset.corner??"",n=o.includes("right"),e=o.includes("bottom"),a=n?m+M-q:m+q,s=e?b+$-q:b+q;(0,t.placeAt)(r,a,s,t.VIEWBOX_WIDTH,f);const c=(0,t.sizeOf)(r).width*d,i=(0,t.sizeOf)(r).height*d;z.push([n?a-c:a,e?s-i:s,c,i])}a.taken.push(...z);for(const o of g){if(o.hidden||o.hasAttribute("data-left-out")||!o.style.left)continue;const n=(0,t.boxOf)(o,d,t.VIEWBOX_WIDTH,f,[0,0]);z.some(o=>(0,t.overlaps)(o,n))&&o.setAttribute("data-left-out","")}}}},text({figure:o,plot:n,rows:r,series:a,config:l}){const{x:u,y:f,size:d,group:h}=s(a),p=n.querySelector(":scope > .tablechart-categories")?.children??[],g=new Map;r.forEach((t,o)=>{const n=i(t,u,f);n&&(g.get(n)?.push(o)??g.set(n,[o]))});const m=t=>void 0===d?0:Math.abs(r[t].cells[d]?.value??0);for(const t of g.values()){if(t.length<2)continue;const o=t.reduce((t,o)=>m(o)>m(t)?o:t);for(const n of t){const r=p[n];n===o?r?.setAttribute("data-more",String(t.length-1)):r?.setAttribute("data-same","")}}const b=c(r,h);if(b.length<2&&void 0===d)return;const M=document.createElement("div");M.className=t.LEGEND_CLASS,M.setAttribute("aria-hidden","true"),M.inert=!0;const $=Array.from(o.querySelectorAll(`tbody tr > td:nth-of-type(${h+1})`)),x=(o,n)=>{const r=(0,t.htmlEl)(t.NAME_CLASS,M);return r.dataset.place="legend",r.dataset.line="none",r.textContent=o,n&&l.langattribute&&r.setAttribute(l.langattribute,n),r};b.length>1&&b.forEach((t,o)=>{const n=l.langattribute?$.find(o=>o.textContent?.trim()===t)?.getAttribute(l.langattribute):null,r=x(t,n);r.dataset.marker=e[o%e.length],r.style.setProperty("--n",String(o)),r.style.setProperty("--palette",`var(--tablechart-color-${o+1})`)}),void 0!==d&&(x(a[d].name,a[d].key).dataset.marker="size"),n.after(M)},draw(o){const{rows:n,series:r,x:i,y:l,frame:u,unit:f,svg:d,categories:h,height:p,config:g,plot:m}=o;if(!i||!u)return;const b=s(r),M=c(n,b.group),$=M.length>1,x=(o.length("--tablechart-marker-size","10px")??10*f)/2,v=(o.length("--tablechart-bubble-max","24px")??24*f)/2,w=(o.length("--tablechart-bubble-min","")??1.2*x)/2,y=t=>void 0===b.size?void 0:t.cells[b.size],A=(0,t.largest)(n.map(t=>Math.abs(y(t)?.value??0))),S=n.flatMap((t,o)=>{const n=t.cells[b.x],r=t.cells[b.y];if(!n||!r||n.missing||r.missing)return[];const e=y(t),a=e&&!e.missing&&A>0?Math.max(w,Math.sqrt(Math.abs(e.value)/A)*v):x,s=$?M.indexOf(t.cells[b.group]?.raw??""):-1;return[{i:o,px:i(n.value),py:l(r.value),r:a,g:s}]}),k=Math.min(S.length-1,6);m.style.setProperty("--count",String(k+1));const q=new Map([...S].sort((t,o)=>t.px-o.px||t.i-o.i).map((o,n)=>[o.i,k?(0,t.short)(n*k/(S.length-1)):0])),z=[...S].sort((t,o)=>o.r-t.r||t.i-o.i);for(const a of z){const o=$?e[a.g%e.length]:"circle";d.appendChild((0,t.markerEl)(o,a.px,a.py,a.r,{class:t.POINT_CLASS,"data-row":a.i+1,"data-marker":o,style:`--i:${q.get(a.i)}; ${$?`--n:${a.g}; --palette:var(--tablechart-color-${a.g+1})`:""}`}))}const N=m.parentElement?.getAttribute("data-chart-names"),H=null==N?g.names:"false"!==N,V=4*f,I=[u[0]+1.5*V,u[1],u[2]-1.5*V,u[3]-1.5*V],[T,j,B,C]=I,D=z.map(({i:o,px:n,py:r,r:e})=>{if(h[o].hasAttribute("data-same"))return[];const{width:a,height:s}=(0,t.sizeOf)(h[o]),c=a*f,i=s*f,l=.1*i,u=.7*e+V/2,d=(t,o)=>[Math.max(T,Math.min(t,T+B-c)),Math.max(j,Math.min(o,j+C-i))+l,c,i-2*l];return[d(n+e+V,r-i/2),d(n-e-V-c,r-i/2),d(n-c/2,r-e-V-i),d(n-c/2,r+e+V),d(n+u,r-u-i),d(n-u-c,r-u-i),d(n+u,r+u),d(n-u-c,r+u)]}),E=H?(0,t.avoidCollisions)(D,S.map(({px:t,py:o,r:n})=>[t-n,o-n,2*n,2*n]),I):z.map(()=>null);for(const t of h)t.hidden=!0,t.dataset.missing="";z.forEach((o,n)=>{const r=h[o.i],e=E[n];if(r.hidden=!1,delete r.dataset.missing,r.style.setProperty("--i",String(q.get(o.i))),r.toggleAttribute("data-left-out",null===e),null===e)return;r.dataset.side=a[e];const[s,c,,i]=D[n][e];(0,t.placeAt)(r,s,c-((0,t.sizeOf)(r).height*f-i)/2,t.VIEWBOX_WIDTH,p)}),o.rowAt=(t,o)=>{let n=null,r=6*f;for(const e of S){const a=Math.max(Math.hypot(e.px-t*f,e.py-o*f)-e.r,0);(a<r||a===r&&n&&e.r<n.r)&&(r=a,n=e)}return n?n.i:null}},tooltip(t,o){const{x:n,y:r}=s(t.series),e=i(t.rows[o],n,r),a=t.rows.flatMap((t,a)=>a===o||null!==e&&i(t,n,r)===e?[a]:[]),c=a.filter(o=>t.categories[o]?.hasAttribute("data-more"));return[...c,...a.filter(t=>!c.includes(t))].map(o=>({name:t.categories[o]?.textContent??"",value:""}))}};window.Tablechart.addType("scatter",l)}(Tablechart.kit);

package/dist/tablechart-additional-types.mjs

@@ -1,11 +1,78 @@
-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 = [
+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";
+// src/js/annotations/quadrant.ts
+var _ = `${l}-name`, v = [
+	"top left",
+	"top right",
+	"bottom left",
+	"bottom right"
+], y = (e, t) => {
+	if (!e) return null;
+	if (e === "mean") return t.length ? t.reduce((e, t) => e + t, 0) / t.length : null;
+	if (e === "median") {
+		let e = [...t].sort((e, t) => e - t), n = e.length / 2;
+		return e.length ? e.length % 2 ? e[Math.floor(n)] : (e[n - 1] + e[n]) / 2 : null;
+	}
+	let n = Number.parseFloat(e);
+	return Number.isFinite(n) ? n : null;
+}, 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(", ")}.`);
+				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);
+		}
+		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.`);
+			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}`);
+		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) => {
+				let [, n, r, i] = t.match(/M(-?[\d.]+),(-?[\d.]+)([HV])/) ?? [];
+				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}`));
+		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;
+			R.push([
+				n ? i - o : i,
+				r ? a - s : a,
+				o,
+				s
+			]);
+		}
+		i.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", "");
+		}
+	}
+}, x = [
 	"circle",
 	"triangle",
 	"square",
 	"diamond"
-], f = [
+], S = [
 	"right",
 	"left",
 	"above",
@@ -14,7 +81,7 @@ var d = [
 	"left",
 	"right",
 	"left"
-], p = (e) => {
+], C = (e) => {
 	let t = e.flatMap((e, t) => e.group ? [] : [t]);
 	return {
 		x: t[0],
@@ -22,119 +89,118 @@ var d = [
 		size: t[2],
 		group: e.findIndex((e) => e.group)
 	};
-}, m = (e, t) => t < 0 ? [] : [...new Set(e.map((e) => e.cells[t]?.raw ?? ""))], h = (e, t, n) => e.cells[t]?.missing || e.cells[n]?.missing ? null : `${e.cells[t]?.value} ${e.cells[n]?.value}`, g = {
+}, w = (e, t) => t < 0 ? [] : [...new Set(e.map((e) => e.cells[t]?.raw ?? ""))], T = (e, t, n) => e.cells[t]?.missing || e.cells[n]?.missing ? null : `${e.cells[t]?.value} ${e.cells[n]?.value}`, E = {
 	aspect: .62,
 	categories: "beside",
 	columns: !0,
 	axes: !0,
-	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]));
+	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);
+			n && (p.get(n)?.push(t) ?? p.set(n, [t]));
 		});
-		let v = (e) => u === void 0 ? 0 : Math.abs(r[e].cells[u]?.value ?? 0);
-		for (let e of _.values()) {
+		let m = (e) => u === void 0 ? 0 : Math.abs(n[e].cells[u]?.value ?? 0);
+		for (let e of p.values()) {
 			if (e.length < 2) continue;
-			let t = e.reduce((e, t) => v(t) > v(e) ? t : e);
+			let t = e.reduce((e, t) => m(t) > m(e) ? t : e);
 			for (let n of e) {
-				let r = g[n];
+				let r = f[n];
 				n === t ? r?.setAttribute("data-more", String(e.length - 1)) : r?.setAttribute("data-same", "");
 			}
 		}
-		let y = m(r, f);
-		if (y.length < 2 && u === void 0) return;
-		let b = document.createElement("div");
-		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;
+		let h = w(n, d);
+		if (h.length < 2 && u === 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;
 		};
-		y.length > 1 && y.forEach((e, t) => {
-			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(a[u].name, a[u].key).dataset.marker = "size"), t.appendChild(b);
+		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);
+			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);
 	},
-	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(c), E = m(i, T.group), D = E.length > 1;
-		for (let e of x.flat()) e.dataset.place = "none";
-		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];
+	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(O * .6, Math.sqrt(Math.abs(i.value) / j) * k) : O, o = D ? E.indexOf(e.cells[T.group]?.raw ?? "") : -1;
+			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;
 			return [{
 				i: t,
-				px: h(n.value),
-				py: g(r.value),
+				px: o(n.value),
+				py: s(r.value),
 				r: a,
-				g: o
+				g: c
 			}];
 		}), 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 ? n(t * N / (M.length - 1)) : 0])), F = [...M].sort((e, t) => t.r - e.r || e.i - t.i);
+		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);
 		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,
+			let t = E ? x[e.g % x.length] : "circle";
+			m.appendChild(d(t, e.px, e.py, e.r, {
+				class: g,
 				"data-row": e.i + 1,
-				"data-marker": n,
-				style: `--i:${P.get(e.i)}; ${D ? `--n:${e.g}; --palette:var(--tablechart-color-${e.g + 1})` : ""}`
+				"data-marker": t,
+				style: `--i:${P.get(e.i)}; ${E ? `--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 = [
-			_[0] + 1.5 * R,
-			_[1],
-			_[2] - 1.5 * R,
-			_[3] - 1.5 * 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: 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,
-				s,
-				c - 2 * l
+		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
+		], [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) => [
+				Math.max(B, Math.min(e, B + H - o)),
+				Math.max(V, Math.min(t, V + U - s)) + l,
+				o,
+				s - 2 * l
 			];
 			return [
-				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 - s, n - u - c),
+				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 - s, n + u)
+				d(t - u - o, n + u)
 			];
-		}), G = L ? s(W, M.map(({ px: e, py: t, r: n }) => [
+		}), G = L ? t(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 b) e.hidden = !0, e.dataset.missing = "";
+		for (let e of h) e.hidden = !0, e.dataset.missing = "";
 		F.forEach((e, t) => {
-			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, 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;
+			let n = h[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;
 			for (let i of M) {
-				let a = Math.max(Math.hypot(i.px - e * v, i.py - t * v) - i.r, 0);
+				let a = Math.max(Math.hypot(i.px - e * f, i.py - t * f) - i.r, 0);
 				(a < r || a === r && n && i.r < n.r) && (r = a, n = i);
 			}
 			return n ? n.i : null;
 		};
 	},
 	tooltip(e, t) {
-		let { x: n, y: r } = p(e.series), i = h(e.rows[t], n, r), a = e.rows.flatMap((e, a) => a === t || i !== null && h(e, n, r) === i ? [a] : []), o = a.filter((t) => e.categories[t]?.hasAttribute("data-more"));
+		let { x: n, y: r } = C(e.series), i = T(e.rows[t], n, r), a = e.rows.flatMap((e, a) => a === t || i !== null && T(e, n, r) === i ? [a] : []), o = a.filter((t) => e.categories[t]?.hasAttribute("data-more"));
 		return [...o, ...a.filter((e) => !o.includes(e))].map((t) => ({
 			name: e.categories[t]?.textContent ?? "",
 			value: ""
 		}));
 	}
 };
-//#endregion
-export { g as scatter };
+export { E as scatter };

package/dist/tablechart-core.d.mts

@@ -1,2 +1,2 @@
-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 };
+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 };

package/dist/tablechart-core.mjs

@@ -1 +1 @@
-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";
+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";

package/dist/tablechart-shared.d.mts

@@ -1,8 +1,8 @@
-//#region src/js/config.d.ts
 declare const PLOT_CLASS = "tablechart-plot";
 declare const PLACED_CLASS = "is-placed";
 declare const SHOWN_CLASS = "is-shown";
 declare const PRINTING_CLASS = "is-printing";
+declare const AT_ONCE_CLASS = "is-at-once";
 declare const QUEUED_CLASS = "tablechart-queued";
 interface Config {
   /** Which elements Tablechart turns into charts. */
@@ -21,6 +21,13 @@ interface Config {
   entrance: number;
   /** Where a column's number goes: on the bar, or inside it. A figure overrides it with `data-chart-labels`. */
   labels: "outside" | "inside";
+  /**
+   * Which values a line or area chart shows: `"auto"`, all if they fit and else the first, last, highest and lowest; `"all"`;
+   * `"none"`; or a set, such as `"first last"`. `"auto last"` shows all if they fit, and else the last. A figure overrides it with `data-chart-values`.
+   */
+  values: string;
+  /** A tick above each name under a line or area chart, at the place of its row. A figure overrides it with `data-chart-ticks`. */
+  ticks: boolean;
   /** How a line or area runs between points: `straight`, `step` or `smooth`. A figure overrides it with `data-chart-shape`. */
   shape: "straight" | "step" | "smooth";
   /** Names of several lines in a legend instead of at the end of each line. A figure overrides it with `data-chart-legend`. */
@@ -37,6 +44,10 @@ interface Config {
   tooltipparent: HTMLElement | string | null;
   /** The table under the chart: `"always"`, only in `"print"`, in print when numbers are left out (`"auto"`), or `"never"`. A figure overrides it with `data-chart-table`. */
   table: "never" | "auto" | "print" | "always";
+  /** With `auto`, the table is printed only up to this many values, rows times value columns; a longer one prints the summary instead. */
+  tablelimit: number;
+  /** The summary of a chart, in a `.chart-summary`: `"always"`, only in `"print"`, in print when the table is not (`"auto"`), or `"never"`, for screen readers only. A figure overrides it with `data-chart-summary`. */
+  summary: "never" | "auto" | "print" | "always";
   /** The name of the total that a donut without a total row works out, for screen readers. */
   totallabel: string;
   /** Previous and Next buttons under a chart that steps (`data-fragment`). `false` leaves them out, for buttons of your own. */
@@ -57,8 +68,6 @@ interface Config {
   debug?: boolean;
 }
 declare const defaultConfig: Config;
-//#endregion
-//#region src/js/functions/scale.d.ts
 /** A break in the scale: values from `lo` to `hi` get `share` of the length, and the cut is at `gap`. */
 interface Squeeze {
   lo: number;
@@ -66,8 +75,6 @@ interface Squeeze {
   gap: number;
   share: number;
 }
-//#endregion
-//#region src/js/steps.d.ts
 /** The steps of one chart: which step shows each row, column and annotation, and how many steps there are. */
 interface StepPlan {
   rows: {
@@ -95,8 +102,6 @@ interface StepPlan {
  * Says so with a `tablechart:step` event on the figure, unless `quietly`.
  */
 declare const stepTo: (state: ChartState, step: number, quietly?: boolean) => void;
-//#endregion
-//#region src/js/types.d.ts
 /** How a line or an area runs from one point to the next. */
 type Shape = "straight" | "step" | "smooth";
 /** How a chart builds: each element grows from zero, or the chart is revealed in one movement. */
@@ -114,6 +119,13 @@ interface Cell {
 }
 interface Row extends Cell {
   label: string;
+  /** `data-short` on the row's header: the name under the chart, where room is short. The table and the summary have `label`. */
+  short: string | null;
+  /** `data-value="show"` on the row: its value is always shown on a line. */
+  pinned: boolean;
+  /** The text of its cell in a column with `data-note`, such as "Share issue", and its translation key. */
+  note: string | null;
+  noteKey: string | null;
   key: string | null;
   cells: Cell[];
   /** Copied to everything drawn for the row, so one class styles all of it. */
@@ -132,12 +144,20 @@ interface Series {
   line: "dashed" | "dotted" | null;
   /** `data-group` on the header: the cells name a group, such as "Predefined". */
   group: boolean;
+  /** `data-chart="line"` on the header, in a chart that takes it: a line over the other marks. */
+  chart: "line" | null;
 }
 interface Segment extends Row {
   from: number;
   to: number;
   kind: "bar" | "up" | "down" | "total";
 }
+/** Which values a line shows, from `data-chart-values`: all, none, a set of rows, or all if they fit and else the set. */
+interface ValuePick {
+  mode: "auto" | "all" | "set";
+  /** `first`, `last`, `highest`, `lowest`, `outliers`. Rows with `data-value="show"` are always in the set. */
+  keys: string[];
+}
 /** Scales only, no pixel positions, so an annotation follows the data. */
 interface Geometry {
   rows: Row[];
@@ -150,6 +170,8 @@ interface Geometry {
   frame?: [number, number, number, number];
   /** A chart that knows better which row is pointed at sets this, in screen pixels from the plot's corner. */
   rowAt?: (x: number, y: number) => number | null;
+  /** Where the tooltip of a row points, in viewBox units, for a row whose mark may not be drawn, such as a point of a long line. */
+  pointOf?: (index: number) => [number, number] | null;
   /** A CSS length set on the figure, such as `--tablechart-marker-size`, in viewBox units. */
   length: (name: string, fallback: string) => number | null;
   barWidth: number;
@@ -178,6 +200,8 @@ interface Geometry {
   insideAlign: "start" | "center" | "end" | null;
   stacked: boolean;
   shape: Shape;
+  /** Which values a line or an area shows. */
+  pick: ValuePick;
   /** Empty when the chart is not stacked or its kind shows no totals. */
   totals: HTMLElement[];
   svg: SVGSVGElement;
@@ -185,6 +209,8 @@ interface Geometry {
   /** Made by `build`; a chart only places them. */
   values: HTMLElement[];
   series: Series[];
+  /** The series this drawing draws: all of them, or in a chart with columns and a line, those of its own kind. */
+  own: number[];
   seriesValues: HTMLElement[][];
   /** Empty with one series. */
   names: HTMLElement[];
@@ -196,6 +222,8 @@ interface Geometry {
   checks: Check[];
   /** The labels of annotations placed so far, as left, top, width and height, so the next one finds room. */
   taken: [number, number, number, number][];
+  /** Holes in the lines and areas, such as under an open marker: the core leaves them out with a clip, from the start. */
+  lineHoles: SVGElement[];
 }
 interface Check {
   label: string;
@@ -221,6 +249,12 @@ interface ChartType {
   columns?: boolean;
   /** An axis across and an axis up, from the first two value columns, with their headers as titles. */
   axes?: boolean;
+  /** A series with `data-chart="line"` on its header is a line over the marks, on the same scale. */
+  lines?: boolean;
+  /** Several series side by side, as groups of bars: their numbers are smaller, so the plot is marked `data-grouped` before anything is measured. */
+  groups?: boolean;
+  /** False: no numbers on the chart. They stay out of the layout, which costs a lot with many rows. */
+  numbers?: false;
   /** Text of its own, made with the rest of the text so a translation script finds it, such as a legend. */
   text?: (input: {
     figure: HTMLElement;
@@ -247,6 +281,8 @@ interface ChartType {
   draw: (geo: Geometry) => void;
   /** The lines of the tooltip of a row. Default: each value with the name of its series, and the total of a stack. */
   tooltip?: (state: ChartState, index: number, config: Config) => TooltipLine[];
+  /** Annotations that come with this type, such as `quadrant` with `scatter`; `addType` adds them. */
+  annotations?: Record<string, AnnotationType>;
 }
 /** One line of a tooltip, under the name of the row. */
 interface TooltipLine {
@@ -303,6 +339,8 @@ interface ChartState {
   rowAt: ((x: number, y: number) => number | null) | null;
   /** As percentages: left, top, width and height. */
   rowBox: ((index: number) => [number, number, number, number]) | null;
+  /** Where the tooltip of a row points, in viewBox units; set by a chart such as a line. */
+  pointOf: ((index: number) => [number, number] | null) | null;
   annotations: {
     spec: HTMLElement;
     type: AnnotationType;
@@ -319,12 +357,8 @@ interface ChartState {
   controls: HTMLElement | null;
   checks: Check[];
 }
-//#endregion
-//#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. */
@@ -335,10 +369,11 @@ declare const layout: (state: ChartState, config: Config) => boolean;
 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
+/**
+ * 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.
+ */
+declare const setShown: (state: ChartState, shown: boolean, atOnce?: boolean) => void;
 interface TablechartChart {
   figure: HTMLElement;
   /** Lays the chart out again, for example after a script has changed its text. */
@@ -376,17 +411,12 @@ declare const prepare: (found: HTMLElement[], config: Config) => Promise<HTMLEle
 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 };
+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 };