// stdlib/charts: line, bar and scatter charts of a table (ROADMAP 6.34, D-214). One view module for the three blocks (`api.block.id`). // It runs in a block-view frame (D-212): it is sent its declared values and the tables of the blocks the author named, and nothing else. // Colours come from the frame's theme tokens, so a theme change needs no code here. The chart is one control (a slider over the points, // arrow keys and pointer move its cursor) and the data is also there as a table the reader can open. const SVGNS = "http://www.w3.org/2000/svg"; const put = (n, a, kids) => { for (const k in a || {}) { const v = a[k]; if (v === false || v == null) continue; n.setAttribute(k, v === true ? "" : String(v)); } for (const c of kids) if (c != null) n.append(c); return n; }; const h = (t, a, ...k) => put(document.createElement(t), a, k); const sv = (t, a, ...k) => put(document.createElementNS(SVGNS, t), a, k); const tok = (n, fb) => `var(--wmn-color-${n}, ${fb})`; const num = (v) => (typeof v === "number" ? v : typeof v === "string" && v.trim() !== "" ? Number(v) : Number.NaN); const fmt = (v) => { if (typeof v !== "number" || !Number.isFinite(v)) return String(v ?? ""); const a = Math.abs(v); if (a !== 0 && (a >= 1e6 || a < 1e-3)) return v.toExponential(2).replace(/\.?0+e/, "e"); return String(+v.toPrecision(4)); }; const MAX_ROWS = 5000; function readTable(api) { for (const name of api.dataNames()) { const d = api.data(name); const t = d?.value; if (!t || !Array.isArray(t.columns) || !Array.isArray(t.rows)) continue; const cols = t.columns.map((c) => (typeof c === "string" ? c : c && typeof c.name === "string" ? c.name : "")); const rows = t.rows.slice(0, MAX_ROWS).map((r) => (Array.isArray(r) ? r : cols.map((c) => (r ? r[c] : null)))); return { name, cols, rows, total: t.rows.length }; } return null; } const isNumeric = (t, i) => { let seen = 0; for (const r of t.rows) { if (r[i] === null || r[i] === undefined || r[i] === "") continue; if (!Number.isFinite(num(r[i]))) return false; seen++; } return seen > 0; }; function niceTicks(lo, hi, n) { if (!Number.isFinite(lo) || !Number.isFinite(hi)) return [0, 1]; // a span too big for a float is worked out in halves if (!Number.isFinite(hi - lo)) return niceTicks(lo / 2, hi / 2, n).map((v) => v * 2); if (!(hi > lo)) { lo -= 1; hi += 1; } const raw = (hi - lo) / Math.max(1, n); // values so large that one unit is below their spacing have no ticks between them if (!(raw > 0)) return [lo, hi]; const mag = 10 ** Math.floor(Math.log10(raw)); const r = raw / mag; const step = (r < 1.5 ? 1 : r < 3 ? 2 : r < 7 ? 5 : 10) * mag; const out = []; const top = Math.ceil(hi / step) * step + step / 2; // ends when the step no longer moves the value (below float spacing), and never makes more than 60 ticks for (let v = Math.floor(lo / step) * step; v <= top && out.length < 60; ) { out.push(+v.toFixed(12)); const next = v + step; if (next === v) break; v = next; } return out.length >= 2 ? out : [lo, hi]; } // where v lies between a and b (0 to 1), without overflowing when b - a is beyond a float const frac = (v, a, b) => (v / 2 - a / 2) / (b / 2 - a / 2 || 1); const STYLE = ` .sl{font:14px/1.4 var(--wmn-font-text,system-ui,sans-serif);color:var(--wmn-color-on-surface,#1c1b1a);padding:8px 4px} .sl-title{font:500 16px/1.3 var(--wmn-font-display,serif);margin:0 0 4px;color:var(--wmn-color-chart-title,#1c1b1a)} .sl-note{color:var(--wmn-color-on-surface-variant,#57423c);margin:4px 0;font-size:13px} .sl-cursor{display:block;border-radius:4px;touch-action:pan-y} .sl-cursor:focus-visible,.sl button:focus-visible{outline:2px solid var(--wmn-color-primary,#a03a19);outline-offset:2px} .sl-legend{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;margin:0 0 4px;padding:0;font-size:13px;color:var(--wmn-color-chart-label,#57423c)} .sl-sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:baseline} .sl-read{min-height:20px;margin:4px 0;font-size:13px;color:var(--wmn-color-on-surface,#1c1b1a);font-variant-numeric:tabular-nums} .sl button{font:inherit;font-size:13px;min-height:28px;padding:2px 10px;border-radius:var(--wmn-radius,4px);border:1px solid var(--wmn-color-outline,#8b716a);background:var(--wmn-color-surface-container,#f2edeb);color:var(--wmn-color-on-surface,#1c1b1a);cursor:pointer} .sl table{margin-top:6px;width:100%;font-size:13px} .sl th,.sl td{text-align:left;font-variant-numeric:tabular-nums} `; export default function view(api) { const kind = api.block.id; const label = kind === "bar-chart" ? "Bar chart" : kind === "scatter-plot" ? "Scatter plot" : "Line chart"; const style = h("style", {}, STYLE); document.head.append(style); const root = api.root; const box = h("div", { class: "sl" }); root.append(box); let values = api.values(); let width = 0; let cursor = 0; let showData = false; let model = null; let timer = 0; /** Which columns to use: the declared ones when they exist in the table, else the first sensible ones. */ function plan(t) { const want = (s) => String(s || "") .split(",") .map((x) => x.trim()) .filter(Boolean); const xName = t.cols.includes(values.x) ? values.x : t.cols[0]; const xi = t.cols.indexOf(xName); let ys = want(values.y).filter((n) => t.cols.includes(n) && t.cols.indexOf(n) !== xi); if (ys.length === 0) { const first = t.cols.findIndex((_, i) => i !== xi && isNumeric(t, i)); if (first >= 0) ys = [t.cols[first]]; } ys = ys.slice(0, 6); return { xi, xName, ys, yi: ys.map((n) => t.cols.indexOf(n)) }; } function build(t) { const p = plan(t); const numericX = (kind === "scatter-plot" || kind === "line-chart") && isNumeric(t, p.xi); if (p.ys.length === 0 && kind !== "bar-chart") return { problem: "No numeric column to draw. Name one with y: in this block." }; if (kind === "scatter-plot" && !numericX) return { problem: `Column ${p.xName} is not numeric; a scatter plot needs numbers on x.` }; // points: one entry per row, with the label that names it let rows = t.rows; if (kind === "bar-chart" && p.ys.length === 0) { // no y: count the rows of each category, as the chart block does const counts = new Map(); for (const r of rows) counts.set(String(r[p.xi]), (counts.get(String(r[p.xi])) || 0) + 1); rows = [...counts].map(([k, c]) => [k, c]); p.xi = 0; p.ys = ["count"]; p.yi = [1]; } const pts = rows .map((r, i) => ({ i, label: String(r[p.xi] ?? ""), x: numericX ? num(r[p.xi]) : i, ys: p.yi.map((c) => num(r[c])), })) .filter((q) => (numericX ? Number.isFinite(q.x) : true)); if (pts.length === 0) return { problem: "The table has no rows." }; if (kind !== "scatter-plot" && numericX) pts.sort((a, b) => a.x - b.x); return { p, pts, numericX, rows, cols: t.cols, total: t.total }; } function draw() { const t = readTable(api); box.replaceChildren(); if (values.title) box.append(h("p", { class: "sl-title" }, String(values.title))); if (!t) { box.append( h( "p", { class: "sl-note" }, "No table yet. Add source: and the id of a block that prints a table, then run that block.", ), ); api.status(JSON.stringify({ kind, state: "empty" })); return; } model = build(t); if (model.problem) { box.append(h("p", { class: "sl-note", role: "status" }, model.problem)); api.status(JSON.stringify({ kind, state: "problem" })); return; } const { p, pts, numericX } = model; cursor = Math.min(cursor, pts.length - 1); if (p.ys.length > 1) box.append( h( "ul", { class: "sl-legend" }, ...p.ys.map((n, k) => h( "li", {}, h("span", { class: "sl-sw", style: `background:${tok(`chart-${(k % 8) + 1}`, "#a03a19")}` }), n, ), ), ), ); const W = Math.max(200, Math.floor(width || root.clientWidth || 600)); const H = 280; const m = { l: 56, r: 14, t: 10, b: 44 }; const iw = W - m.l - m.r; const ih = H - m.t - m.b; const all = pts.flatMap((q) => q.ys).filter(Number.isFinite); let lo = Math.min(...all, kind === "bar-chart" ? 0 : Number.POSITIVE_INFINITY); let hi = Math.max(...all, kind === "bar-chart" ? 0 : Number.NEGATIVE_INFINITY); if (!Number.isFinite(lo)) { lo = 0; hi = 1; } const yt = niceTicks(lo, hi, 5); const y0 = yt[0]; const y1 = yt[yt.length - 1]; const Y = (v) => m.t + ih - frac(v, y0, y1) * ih; let xlo = 0; let xhi = Math.max(1, pts.length - 1); if (numericX) { xlo = Math.min(...pts.map((q) => q.x)); xhi = Math.max(...pts.map((q) => q.x)); if (xhi === xlo) xhi = xlo + 1; } const bar = kind === "bar-chart"; const band = iw / pts.length; const X = (q) => bar ? m.l + band * (q.i + 0.5) : numericX ? m.l + frac(q.x, xlo, xhi) * iw : m.l + (pts.length > 1 ? (q.i / (pts.length - 1)) * iw : iw / 2); const axis = tok("chart-axis", "#8b716a"); const grid = tok("chart-grid", "#dec0b8"); const text = tok("chart-label", "#57423c"); const svg = sv("svg", { width: W, height: H, viewBox: `0 0 ${W} ${H}`, "aria-hidden": "true", focusable: "false" }); for (const v of yt) { svg.append( sv("line", { x1: m.l, x2: W - m.r, y1: Y(v), y2: Y(v), stroke: v === 0 ? axis : grid, "stroke-width": 1 }), ); svg.append(sv("text", { x: m.l - 6, y: Y(v) + 4, "text-anchor": "end", fill: text, "font-size": 12 }, fmt(v))); } svg.append(sv("line", { x1: m.l, x2: m.l, y1: m.t, y2: m.t + ih, stroke: axis })); // x labels: as many as fit without touching const xs = numericX ? niceTicks(xlo, xhi, Math.max(2, Math.floor(iw / 90))).filter((v) => v >= xlo && v <= xhi) : []; if (numericX) { for (const v of xs) svg.append( sv( "text", { x: m.l + frac(v, xlo, xhi) * iw, y: H - m.b + 18, "text-anchor": "middle", fill: text, "font-size": 12, }, fmt(v), ), ); } else { const every = Math.max(1, Math.ceil(pts.length / Math.max(1, Math.floor(iw / 70)))); for (const q of pts) if (q.i % every === 0) svg.append( sv( "text", { x: X(q), y: H - m.b + 18, "text-anchor": "middle", fill: text, "font-size": 12 }, q.label.length > 10 ? `${q.label.slice(0, 9)}…` : q.label, ), ); } svg.append( sv("text", { x: m.l + iw / 2, y: H - 6, "text-anchor": "middle", fill: text, "font-size": 12 }, p.xName), ); // the data p.ys.forEach((_name, k) => { const color = tok(`chart-${(k % 8) + 1}`, "#a03a19"); const per = bar ? Math.max(2, (band * 0.7) / p.ys.length) : 0; if (kind === "line-chart") { let d = ""; let pen = false; for (const q of pts) { const v = q.ys[k]; if (!Number.isFinite(v)) { pen = false; continue; } d += `${pen ? "L" : "M"}${X(q).toFixed(1)} ${Y(v).toFixed(1)}`; pen = true; } svg.append(sv("path", { d, fill: "none", stroke: color, "stroke-width": 2, "stroke-linejoin": "round" })); if (values.points !== false && pts.length <= 120) for (const q of pts) if (Number.isFinite(q.ys[k])) svg.append(sv("circle", { cx: X(q), cy: Y(q.ys[k]), r: 3, fill: color })); } else if (bar) { for (const q of pts) { const v = q.ys[k]; if (!Number.isFinite(v)) continue; const x = X(q) - (per * p.ys.length) / 2 + per * k; svg.append( sv("rect", { x, y: Math.min(Y(v), Y(0)), width: per - 1, height: Math.abs(Y(v) - Y(0)), fill: color }), ); } } else { for (const q of pts) if (Number.isFinite(q.ys[k])) svg.append( sv("circle", { cx: X(q), cy: Y(q.ys[k]), r: pts.length > 400 ? 2 : 3.5, fill: color, "fill-opacity": 0.8, }), ); } }); // cursor layer const cur = sv("g", {}); svg.append(cur); const readout = h("div", { class: "sl-read" }); const textOf = (q) => `${q.label || fmt(q.x)}: ${p.ys.map((n, k) => `${n} ${fmt(q.ys[k])}`).join(", ")}`; const place = () => { const q = pts[cursor]; cur.replaceChildren(); if (!q) return; cur.append( sv("line", { x1: X(q), x2: X(q), y1: m.t, y2: m.t + ih, stroke: tok("on-surface", "#1c1b1a"), "stroke-width": 1, "stroke-dasharray": "3 3", }), ); for (let k = 0; k < q.ys.length; k++) { if (!Number.isFinite(q.ys[k])) continue; cur.append( sv("circle", { cx: X(q), cy: Y(q.ys[k]), r: 5, fill: tok("output-bg", "#fff"), stroke: tok(`chart-${(k % 8) + 1}`, "#a03a19"), "stroke-width": 2, }), ); } readout.textContent = textOf(q); slider.setAttribute("aria-valuenow", String(cursor + 1)); slider.setAttribute("aria-valuetext", textOf(q)); }; const slider = h( "div", { class: "sl-cursor", role: "slider", tabindex: 0, "aria-label": `${values.title ? `${values.title}, ` : ""}${label} of ${p.ys.join(", ")} by ${p.xName}. Arrow keys move between points`, "aria-valuemin": 1, "aria-valuemax": pts.length, "aria-valuenow": 1, }, svg, ); slider.addEventListener("keydown", (e) => { const step = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : e.key === "Home" ? -1e9 : e.key === "End" ? 1e9 : e.key === "PageUp" ? 10 : e.key === "PageDown" ? -10 : 0; if (!step) return; e.preventDefault(); cursor = Math.max(0, Math.min(pts.length - 1, cursor + step)); place(); }); slider.addEventListener("pointermove", (e) => { const r = svg.getBoundingClientRect(); const px = e.clientX - r.left; let best = cursor; let d = Number.POSITIVE_INFINITY; for (const q of pts) { const dd = Math.abs(X(q) - px); if (dd < d) { d = dd; best = q.i; } } const idx = pts.findIndex((q) => q.i === best); if (idx !== cursor) { cursor = idx; place(); } }); box.append(slider, readout); place(); if (t.total > MAX_ROWS) box.append(h("p", { class: "sl-note" }, `Showing the first ${MAX_ROWS} of ${t.total} rows.`)); const toggle = h( "button", { type: "button", "aria-expanded": showData ? "true" : "false" }, showData ? "Hide the data" : "Show the data", ); toggle.addEventListener("click", () => { showData = !showData; draw(); }); box.append(toggle); if (showData) { const body = pts.slice(0, 20); box.append( h( "table", {}, h( "caption", { class: "sl-note" }, `${p.xName} and ${p.ys.join(", ")}${pts.length > 20 ? ` (first 20 of ${pts.length} rows)` : ""}`, ), h( "thead", {}, h("tr", {}, h("th", { scope: "col" }, p.xName), ...p.ys.map((n) => h("th", { scope: "col" }, n))), ), h( "tbody", {}, ...body.map((q) => h("tr", {}, h("td", {}, q.label || fmt(q.x)), ...q.ys.map((v) => h("td", {}, fmt(v))))), ), ), ); } api.status(JSON.stringify({ kind, state: "drawn", points: pts.length, x: p.xName, y: p.ys, width: W })); } const redraw = () => { if (timer) return; timer = setTimeout(() => { timer = 0; draw(); }, 16); }; api.onValues((v) => { values = v; redraw(); }); api.onData(redraw); if (typeof ResizeObserver !== "undefined") new ResizeObserver(() => { const w = Math.floor(root.clientWidth); if (Math.abs(w - width) > 1) { width = w; redraw(); } }).observe(root); width = Math.floor(root.clientWidth); draw(); api.done({ lib: "stdlib/charts", block: kind }); }