@martinomagnifico/tablechart 1.1.3 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # Changelog
 
+## [1.2.1] - 2026-10-30
+
+### Added
+
+- An animation playground in the docs, under Styling: sliders for the speed, the stagger and the time of a chart, with the CSS to copy. It shows how the settings work together before you set them.
+- `--tablechart-animation-min`, the shortest a chart takes to build: 0.5s by default. A chart with few columns no longer looks rushed.
+- `--tablechart-waterfall-stagger-factor`, how many times the stagger a waterfall has: 2.4 by default, so it still builds column by column.
+- `--tablechart-series-color-end` and `--tablechart-slice-color-end`, with `--tablechart-series-color-start` and `--tablechart-slice-color-start` as other names for the first colour: lines, parts and slices go from one colour to another in even steps. If both ends have enough contrast, every step in between has it too.
+- `--tablechart-animation-speed`, to make every chart faster or slower, such as `1.25` for a quarter faster. All times scale together.
+
+
+### 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).
+
+### Fixed
+
+- Every chart type has the same animation defaults: 0.4s per element, a stagger of 0.25, `ease-in-out`, and 0.5s to 2s for a whole chart. In 1.2.0, a column chart with 10 or more columns took up to 3s.
+
+
+
+## [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

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

package/dist/tablechart-core.mjs

@@ -1 +1 @@
-export { C as AT_ONCE_CLASS, E as PLACED_CLASS, D as PLOT_CLASS, k as PRINTING_CLASS, A as QUEUED_CLASS, j as SHOWN_CLASS, c as addType, a as adoptTables, h as assignKeys, l as build, N 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

@@ -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. */
@@ -108,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. */
@@ -126,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[];
@@ -144,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;
@@ -172,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;
@@ -179,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[];
@@ -190,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;
@@ -215,6 +249,10 @@ 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. */
@@ -235,6 +273,7 @@ interface ChartType {
     rows: number;
     series: number;
     stacked: boolean;
+    labels: Geometry["labels"];
   }) => number;
   /** Room under the baseline for numbers that hang below a mark near it. */
   footroom?: (geo: HeadroomInput) => number;
@@ -243,6 +282,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 {
@@ -299,6 +340,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;