@heycys/gallery 0.1.1 → 0.1.2

package/packs/gallery/chart-card/example.html

@@ -0,0 +1,14 @@
+<div data-doc-component="gallery/chart-card">
+  <h3>各渠道的新增用户（千人）</h3>
+  <div data-doc-slot="table">
+    <table>
+      <thead><tr><th>渠道</th><th>上月</th><th>本月</th></tr></thead>
+      <tbody>
+        <tr><td>搜索</td><td>42</td><td>48</td></tr>
+        <tr><td>社交媒体</td><td>31</td><td>27</td></tr>
+        <tr><td>老用户推荐</td><td>18</td><td>24</td></tr>
+        <tr><td>线下活动</td><td>9</td><td>—</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/packs/gallery/chart-card/kit.js

@@ -0,0 +1,130 @@
+// gallery/chart-card: a card with a title, the bar chart this script draws from the table in its slot,
+// and that table. The table is the document's, a plain table in the slot: the reader edits it as any
+// table of the page, and each change of it (`source`) draws the bars again. Its first column names the
+// bars; each column after it that holds a number is a series, its header the legend's words (bars one
+// under another, a legend above them when there are two or more); a cell with no number has no bar.
+// The chart is no chart card of the kit's: "/" makes what a template's slot holds as a paste of it
+// makes blocks, and a paste makes a table and never a chart card, so the block draws the bars itself.
+// They are laid out in percents and colored by the kit's variables, so that a width or a theme draws
+// nothing again; the manifest's `runtime` names what is drawn, which the file never holds.
+
+DocKit.component({
+  id: "gallery/chart-card",
+  on: ["source"],
+  mount(host, context) {
+    const drawn = document.createElement("div");
+    drawn.className = "gallery-chart-card-bars";
+    const slot = context.part("table");
+    host.insertBefore(drawn, slot && slot.parentElement === host ? slot : null);
+    const draw = () => drawBars(drawn, tableOf(context.part("table")));
+    draw();
+    return { update: draw };
+  },
+});
+
+/**
+ * The first table in `slot` as words: the names of its columns (the last row of its <thead>, or its
+ * first row) and the rows after them, a <tfoot> left out. Null where the slot holds no table.
+ * @param {HTMLElement | null} slot
+ * @returns {{ columns: string[], rows: string[][] } | null}
+ */
+function tableOf(slot) {
+  const table = slot?.querySelector("table");
+  if (!(table instanceof HTMLTableElement)) return null;
+  /** @param {HTMLTableRowElement} row */
+  const words = (row) => [...row.cells].map((cell) => (cell.textContent ?? "").replace(/\s+/g, " ").trim());
+  const rows = [...table.rows].filter((row) => row.parentElement?.localName !== "tfoot");
+  const head = table.tHead?.rows[table.tHead.rows.length - 1] ?? rows[0];
+  if (!head) return null;
+  return { columns: words(head), rows: rows.filter((row) => row !== head && row.parentElement?.localName !== "thead").map(words) };
+}
+
+/**
+ * A cell's number as a reader writes one (1,234 · 12.5% · −3), or null.
+ * @param {string} text
+ */
+function numberOf(text) {
+  const plain = text.replace(/[\s,，]/g, "").replace(/^[−–]/, "-").replace(/%$/, "");
+  return /^[-+]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[-+]?\d+)?$/i.test(plain) ? Number(plain) : null;
+}
+
+/**
+ * An element of the drawing, of `kind` (its class) and with `words`.
+ * @param {string} kind
+ * @param {string} [words]
+ */
+function part(kind, words) {
+  const node = document.createElement("span");
+  node.className = `gallery-chart-card-${kind}`;
+  if (words !== undefined) node.textContent = words;
+  return node;
+}
+
+/**
+ * The bars of `table` in `drawn`, all it held before taken off.
+ * @param {HTMLElement} drawn
+ * @param {{ columns: string[], rows: string[][] } | null} table
+ */
+function drawBars(drawn, table) {
+  const chinese = /^zh/i.test(document.documentElement.lang || "zh");
+  const [name = "", ...rest] = table?.columns ?? [];
+  const rows = table?.rows ?? [];
+  const series = rest.map((label, index) => ({ label, column: index + 1 })).filter(({ column }) => rows.some((row) => numberOf(row[column] ?? "") !== null));
+  drawn.replaceChildren();
+  drawn.classList.remove("gallery-chart-card-below", "gallery-chart-card-many");
+  drawn.removeAttribute("role");
+  drawn.removeAttribute("aria-label");
+  if (series.length === 0) {
+    const empty = document.createElement("p");
+    empty.className = "gallery-chart-card-empty";
+    empty.textContent = chinese ? "表格里还没有数：第一列写名字，后面的列写数。" : "The table has no numbers yet: names in its first column, numbers in the columns after it.";
+    drawn.append(empty);
+    return;
+  }
+  const values = rows.flatMap((row) => series.map(({ column }) => numberOf(row[column] ?? ""))).filter((value) => value !== null);
+  const low = Math.min(0, ...values);
+  const span = Math.max(0, ...values) - low || 1;
+  /** @param {number} value */
+  const at = (value) => ((value - low) / span) * 100;
+  const zero = at(0);
+  drawn.classList.toggle("gallery-chart-card-below", low < 0);
+  drawn.classList.toggle("gallery-chart-card-many", series.length > 1);
+  drawn.style.setProperty("--gallery-chart-card-zero", `${zero}%`);
+  drawn.setAttribute("role", "img");
+  drawn.setAttribute("aria-label", chinese ? `${series.map(({ label }) => label).join("、")}，按${name}` : `${series.map(({ label }) => label).join(", ")} by ${name}`);
+  const color = (/** @type {number} */ index) => `var(--doc-series-${(index % 6) + 1})`;
+  if (series.length > 1) {
+    const legend = part("legend");
+    series.forEach(({ label }, index) => {
+      const key = part("key");
+      const swatch = part("swatch");
+      swatch.style.background = color(index);
+      key.append(swatch, label);
+      legend.append(key);
+    });
+    drawn.append(legend);
+  }
+  for (const row of rows) {
+    const line = part("row");
+    const lanes = part("lanes");
+    series.forEach(({ column }, index) => {
+      const lane = part("lane");
+      const value = numberOf(row[column] ?? "");
+      if (value !== null) {
+        const from = Math.min(zero, at(value));
+        const to = Math.max(zero, at(value));
+        const bar = part("bar");
+        bar.style.left = `${from}%`;
+        bar.style.width = `max(1px, ${to - from}%)`;
+        bar.style.background = color(index);
+        const said = part("value", row[column]);
+        if (value < 0) said.style.right = `calc(${100 - from}% + 4px)`;
+        else said.style.left = `calc(${to}% + 4px)`;
+        lane.append(bar, said);
+      }
+      lanes.append(lane);
+    });
+    line.append(part("label", row[0] ?? ""), lanes);
+    drawn.append(line);
+  }
+}

package/packs/gallery/chart-card/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f2f4f7"/><rect x="16" y="14" width="208" height="92" rx="8" fill="#ffffff" stroke="#d0d5dd"/><rect x="30" y="26" width="40" height="8" rx="3" fill="#98a2b3"/><rect x="78" y="26" width="120" height="8" rx="3" fill="#2678d8"/><rect x="30" y="48" width="40" height="8" rx="3" fill="#98a2b3"/><rect x="78" y="48" width="84" height="8" rx="3" fill="#2678d8"/><rect x="30" y="70" width="40" height="8" rx="3" fill="#98a2b3"/><rect x="78" y="70" width="136" height="8" rx="3" fill="#2678d8"/><rect x="78" y="90" width="136" height="2" fill="#d0d5dd"/></svg>

package/packs/gallery/chart-card/style.css

@@ -0,0 +1,42 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page or the table in the slot, which reads as the page's. The frame is
+   gallery/card's; the bars the script draws take the kit's series colors, which follow the theme, and
+   are laid out in percents of the card's width. */
+[data-doc-component="gallery/chart-card"] {
+  margin: var(--doc-component-gap) 0;
+  padding: 20px 24px 8px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-surface);
+  > h3 { margin: 0 0 12px; font-size: var(--doc-card-title-font-size); line-height: var(--doc-card-title-line-height); font-weight: 600; letter-spacing: -.025em; }
+  > .gallery-chart-card-bars {
+    display: grid;
+    grid-template-columns: fit-content(40%) minmax(0, 1fr);
+    gap: 8px 12px;
+    align-items: center;
+    margin: 0 0 12px;
+    font-size: 13px;
+    line-height: 1.4;
+    color: var(--doc-text);
+    > .gallery-chart-card-legend {
+      grid-column: 1 / -1;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px 16px;
+      font-size: 12px;
+      color: var(--doc-muted);
+      > .gallery-chart-card-key { display: inline-flex; align-items: center; gap: 6px; }
+      > .gallery-chart-card-key > .gallery-chart-card-swatch { width: 10px; height: 10px; border-radius: 2px; }
+    }
+    > .gallery-chart-card-row { display: contents; }
+    > .gallery-chart-card-row > .gallery-chart-card-label { text-align: right; overflow-wrap: anywhere; }
+    > .gallery-chart-card-row > .gallery-chart-card-lanes { display: flex; flex-direction: column; gap: 2px; margin-right: 4em; }
+    > .gallery-chart-card-row > .gallery-chart-card-lanes > .gallery-chart-card-lane { position: relative; height: 18px; }
+    &.gallery-chart-card-many > .gallery-chart-card-row > .gallery-chart-card-lanes > .gallery-chart-card-lane { height: 13px; }
+    &.gallery-chart-card-below > .gallery-chart-card-row > .gallery-chart-card-lanes { margin-left: 4em; }
+    &.gallery-chart-card-below > .gallery-chart-card-row > .gallery-chart-card-lanes > .gallery-chart-card-lane { background: linear-gradient(var(--doc-grid), var(--doc-grid)) var(--gallery-chart-card-zero) 0 / 1px 100% no-repeat; }
+    > .gallery-chart-card-row > .gallery-chart-card-lanes > .gallery-chart-card-lane > .gallery-chart-card-bar { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
+    > .gallery-chart-card-row > .gallery-chart-card-lanes > .gallery-chart-card-lane > .gallery-chart-card-value { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--doc-muted); white-space: nowrap; }
+    > .gallery-chart-card-empty { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--doc-muted); }
+  }
+}

package/packs/gallery/chart-card/template.html

@@ -0,0 +1,13 @@
+<div data-doc-component="gallery/chart-card">
+  <h3>图表的标题</h3>
+  <div data-doc-slot="table">
+    <table>
+      <thead><tr><th>项目</th><th>数值</th></tr></thead>
+      <tbody>
+        <tr><td>项目 A</td><td>12</td></tr>
+        <tr><td>项目 B</td><td>18</td></tr>
+        <tr><td>项目 C</td><td>9</td></tr>
+      </tbody>
+    </table>
+  </div>
+</div>

package/packs/gallery/chart-card/writing.md

@@ -0,0 +1,20 @@
+# 表格图表卡片 (gallery/chart-card)
+
+A card with a title, a table, and the bar chart the block draws from that table, with no script of the document's. Use it for a comparison of a few numbers by name (channels, teams, months) that the reader may change; for any other chart, write a chart of the document's own (references/writing-html.md, "Figures and charts").
+
+## How to write it
+
+Write the element as example.html does (`gallery block show gallery/chart-card` prints it):
+
+- the title, its `h3`: what the numbers are, with their unit.
+- the table, in its `<div data-doc-slot="table">`: a plain table of the document's, with no `data-doc-chart` and no `<caption>` (the card's title is its title):
+  - its header row: the names of the columns;
+  - the first column: the name of each bar;
+  - each column after it that holds numbers: a series, its header the legend's words (two or more draw their bars one under another, a legend above them);
+  - a cell with no number (empty, a dash, `n/a`): no bar. A number may have thousands separators and a `%`.
+
+The reader edits the table as any table of the document's, and the bars draw again.
+
+## How it looks
+
+A framed card: the title, horizontal bars from zero with each value at its end, in the kit's series colors, which follow the theme, then the table. The bars are drawn by the block's script and are not in the file: where the block is not, and in a Markdown export, a reader has the title and the table.

package/packs/gallery/chart-view/component.json

@@ -0,0 +1,20 @@
+{
+  "id": "gallery/chart-view",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "图表", "en": "Chart" },
+  "description": { "zh": "表格的视图：按一列分组的计数、合计或平均，或每一行的数，画成条形图，表格一改就重画", "en": "A view of a table: a count, sum or average by a column, or each row's number, drawn as bars that follow each edit of the table" },
+  "words": "tubiao tiaoxingtu chart bar bars graph 图表 条形图 柱状图 统计 视图 view",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-chart-view-face"] },
+  "places": ["document"],
+  "settings": [
+    { "key": "by", "label": { "zh": "分组依据", "en": "Group by" }, "type": "text", "default": "" },
+    { "key": "op", "label": { "zh": "计算", "en": "Calculate" }, "type": "select", "options": ["count", "sum", "average"], "default": "count" },
+    { "key": "value", "label": { "zh": "数值列", "en": "Numbers" }, "type": "text", "default": "" },
+    { "key": "title", "label": { "zh": "标题", "en": "Title" }, "type": "text", "default": "" }
+  ],
+  "needs": ["tables"]
+}

package/packs/gallery/chart-view/example.html

@@ -0,0 +1,13 @@
+<table data-doc-chart-source="sales">
+  <thead><tr><th>客户</th><th>区域</th><th>金额</th><th>状态</th></tr></thead>
+  <tbody>
+    <tr><td>华东物流</td><td>华东</td><td>12,800</td><td>已成交</td></tr>
+    <tr><td>北方食品</td><td>华北</td><td>8,600</td><td>洽谈中</td></tr>
+    <tr><td>南方家居</td><td>华南</td><td>15,200</td><td>已成交</td></tr>
+    <tr><td>东海电子</td><td>华东</td><td>9,300</td><td>洽谈中</td></tr>
+    <tr><td>西部能源</td><td>西部</td><td>6,400</td><td>已成交</td></tr>
+  </tbody>
+</table>
+<div data-doc-component="gallery/chart-view" data-doc-from="sales">
+  <script type="application/json">{"by":"区域","op":"sum","value":"金额","title":"各区域的金额（元）"}</script>
+</div>

package/packs/gallery/chart-view/kit.js

@@ -0,0 +1,355 @@
+// gallery/chart-view (图表): a view of a table of the document (its manifest's needs hold "tables"; the
+// table's frame carries the key its data-doc-from names, which the table's 视图 › puts on both), drawn as
+// horizontal bars from zero, each with its value at its end, under its title. Its settings (its data part
+// `settings`, JSON) say what: `by` a column whose values are the bars (the rows grouped by it, in the order
+// the rows first say them), each the `op` of its rows, "count" (how many), "sum" or "average" of the
+// numbers of the column `value`; with no `by` a bar for each row, its first cell its name and its number
+// in `value`. Left out: `by` the column that reads as a status or whose words repeat (none: a bar a row),
+// `value` the first column of numbers, `op` "sum" where there is one, else "count"; `title` one made of
+// the rest. At most MAX_BARS bars, a line saying how many more.
+//
+// It reads the table each time its rows change (the `data` signal), and draws only what changed: a bar
+// is kept by its group's value (or its row's element) and its label, its value and its length written
+// only where they changed, so that typing in a table of 500 rows moves one bar. Its ⚙, at its head while
+// the page edits, opens its settings, each change one undo step of the document's (context.editJSON); it
+// writes nothing else. The colors are the kit's series colors, which follow the theme. The words are the
+// page's language.
+
+const WORDS = {
+  zh: {
+    settings: "设置",
+    by: "分组依据",
+    each: "每行一条",
+    op: "计算",
+    ops: { count: "计数", sum: "合计", average: "平均" },
+    value: "数值列",
+    title: "标题",
+    none: "（空）",
+    rows: (/** @type {string} */ by) => `各${by}的行数`,
+    sum: (/** @type {string} */ by, /** @type {string} */ value) => `各${by}的${value}合计`,
+    average: (/** @type {string} */ by, /** @type {string} */ value) => `各${by}的${value}平均`,
+    each_: (/** @type {string} */ name, /** @type {string} */ value) => `各${name}的${value}`,
+    more: (/** @type {number} */ shown, /** @type {number} */ all) => `只画了前 ${shown} 条，共 ${all} 条：按一列分组可以都画出来。`,
+    unbound: "这张图还没有接到表格上：在表格的菜单里选“视图 › 图表”。",
+    unread: "读不到这张图的表格：它不在页面上了，或者有合并的单元格。",
+    missing: (/** @type {string} */ name) => `找不到列“${name}”：表格的列名改过了吗？`,
+    noNumbers: "表格里没有写数的列：每行一条、合计和平均要一列数。",
+    empty: "表格里还没有行。",
+  },
+  en: {
+    settings: "Settings",
+    by: "Group by",
+    each: "A bar a row",
+    op: "Calculate",
+    ops: { count: "Count", sum: "Sum", average: "Average" },
+    value: "Numbers",
+    title: "Title",
+    none: "(empty)",
+    rows: (/** @type {string} */ by) => `Rows by ${by}`,
+    sum: (/** @type {string} */ by, /** @type {string} */ value) => `Total ${value} by ${by}`,
+    average: (/** @type {string} */ by, /** @type {string} */ value) => `Average ${value} by ${by}`,
+    each_: (/** @type {string} */ name, /** @type {string} */ value) => `${value} by ${name}`,
+    more: (/** @type {number} */ shown, /** @type {number} */ all) => `The first ${shown} bars of ${all}: group by a column to draw them all.`,
+    unbound: "This chart reads no table yet: pick View › Chart in a table's menu.",
+    unread: "This chart's table cannot be read: it is not on the page, or it has merged cells.",
+    missing: (/** @type {string} */ name) => `No column “${name}”: was the table's column renamed?`,
+    noNumbers: "The table has no column of numbers: a bar a row, a sum and an average need one.",
+    empty: "The table has no rows yet.",
+  },
+};
+
+// The most bars it draws.
+const MAX_BARS = 50;
+
+// A column whose name says it is a status, the one it groups by when its settings name none.
+const STATUS = /状态|進度|进度|阶段|階段|状況|状况|status|stage|state|phase/i;
+
+const GEAR = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 4.5h6M12 4.5h1M3 11.5h1M7 11.5h6" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><circle cx="10.5" cy="4.5" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/><circle cx="5.5" cy="11.5" r="1.5" fill="none" stroke="currentColor" stroke-width="1.3"/></svg>';
+
+/** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
+function languageOf(/** @type {HTMLElement} */ root) {
+  const ui = root.getAttribute("data-ge-language");
+  return (ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root.lang)) ? "en" : "zh";
+}
+
+/** Words as a cell shows them, its white space one space. */
+const wordsOf = (/** @type {Node | null | undefined} */ node) => (node?.textContent ?? "").replace(/\s+/g, " ").trim();
+
+/** A row's value of a column as a group: its words ("" for none). */
+const keyOf = (/** @type {DocRow} */ row, /** @type {string} */ column) => {
+  const value = row.values[column];
+  return value === null || value === undefined ? "" : String(value).trim();
+};
+
+/**
+ * What its settings ask (context.readJSON's; {} where none is set): "" where a setting is left out.
+ * @param {any} settings
+ * @returns {{ by: string, op: "" | "count" | "sum" | "average", value: string, title: string }}
+ */
+function askedOf(settings) {
+  const table = settings !== null && typeof settings === "object" && !Array.isArray(settings) ? settings : {};
+  const text = (/** @type {string} */ key) => (typeof table[key] === "string" ? table[key].trim() : "");
+  const op = table.op === "count" || table.op === "sum" || table.op === "average" ? table.op : "";
+  return { by: text("by"), op, value: text("value"), title: text("title") };
+}
+
+/** The columns of `table` holding numbers: a number in a cell at least, and no words. */
+const numberColumns = (/** @type {DocTableView} */ table) => table.columns.filter((name) => table.rows.some((row) => typeof row.values[name] === "number") && table.rows.every((row) => row.values[name] === null || typeof row.values[name] === "number"));
+
+/**
+ * The column it groups by where its settings name none: one after the first whose name says it is a
+ * status, else the one after the first holding words whose values repeat most (fewer than its rows),
+ * else none: a bar a row.
+ * @param {DocTableView} table
+ */
+function groupColumnOf(table) {
+  const numbers = numberColumns(table);
+  const rest = table.columns.slice(1).filter((name) => !numbers.includes(name));
+  const named = rest.find((name) => STATUS.test(name));
+  if (named) return named;
+  /** @type {[string, number] | null} */
+  let best = null;
+  for (const name of rest) {
+    const kinds = new Set(table.rows.map((row) => keyOf(row, name))).size;
+    if (kinds < table.rows.length && (best === null || kinds < best[1])) best = [name, kinds];
+  }
+  return best ? best[0] : "";
+}
+
+/**
+ * The chart `asked` says of `table`: { title, bars: [{ key, label, value }], all } or { line }.
+ * @param {DocTableView} table
+ * @param {ReturnType<typeof askedOf>} asked
+ * @param {typeof WORDS.zh} words
+ */
+function chartOf(table, asked, words) {
+  if (table.rows.length === 0) return { line: words.empty };
+  const by = asked.by || groupColumnOf(table);
+  if (by && !table.columns.includes(by)) return { line: words.missing(by) };
+  const value = asked.value || numberColumns(table)[0] || "";
+  const op = asked.op || (value ? "sum" : "count");
+  if (value && !table.columns.includes(value)) return { line: words.missing(value) };
+  if (!value && (!by || op !== "count")) return { line: words.noNumbers };
+  /** @type {{ key: unknown, label: string, value: number | null }[]} */
+  let bars;
+  let title;
+  if (by) {
+    /** @type {Map<string, { count: number, sum: number, numbers: number }>} */
+    const groups = new Map();
+    for (const row of table.rows) {
+      const group = keyOf(row, by);
+      const kept = groups.get(group) ?? { count: 0, sum: 0, numbers: 0 };
+      kept.count += 1;
+      const number = value ? row.values[value] : null;
+      if (typeof number === "number") {
+        kept.sum += number;
+        kept.numbers += 1;
+      }
+      groups.set(group, kept);
+    }
+    bars = [...groups].map(([group, { count, sum, numbers }]) => ({ key: group, label: group || words.none, value: op === "count" ? count : op === "sum" ? sum : numbers > 0 ? sum / numbers : null }));
+    title = op === "count" ? words.rows(by) : op === "sum" ? words.sum(by, value) : words.average(by, value);
+  } else {
+    bars = table.rows.map((row) => {
+      const number = row.values[value];
+      return { key: row.el, label: wordsOf(row.el.cells[0]), value: typeof number === "number" ? number : null };
+    });
+    title = words.each_(table.columns[0] ?? "", value);
+  }
+  return { title: asked.title || title, bars: bars.slice(0, MAX_BARS), all: bars.length, by, op, value };
+}
+
+/**
+ * An element of the drawing, of `kind` (its class gallery-chart-view-<kind>).
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag
+ * @param {string} kind
+ * @param {string} [text]
+ */
+function made(tag, kind, text) {
+  const node = document.createElement(tag);
+  node.className = `gallery-chart-view-${kind}`;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+/**
+ * `parent`'s children made `nodes`, what is there already left in place: where only some are new, each
+ * standing where the one it replaces stood, those alone are put in; anything else is the list anew.
+ * @param {Element} parent
+ * @param {Element[]} nodes
+ */
+function put(parent, nodes) {
+  const now = [...parent.children];
+  if (now.length === nodes.length) {
+    const differs = nodes.map((node, at) => node !== now[at]);
+    if (!differs.includes(true)) return;
+    if (nodes.every((node, at) => !differs[at] || !node.isConnected)) {
+      nodes.forEach((node, at) => { if (differs[at]) parent.replaceChild(node, now[at]); });
+      return;
+    }
+  }
+  parent.replaceChildren(...nodes);
+}
+
+/**
+ * The settings strip: a field a setting, a select of its choices (`options()`, [value, words]) or a
+ * text, shown while `shown()` says so, each committed (DocKit.input: Enter, the field left, a choice
+ * made) as one write of the settings part, a key set or, for "", taken off.
+ * @param {DocComponentContext} context
+ * @param {{ key: string, label: string, options?: () => [string, string][], shown?: () => boolean, value: () => string }[]} fields
+ */
+function settingsStrip(context, fields) {
+  const strip = made("div", "strip");
+  strip.hidden = true;
+  const write = (/** @type {string} */ key, /** @type {string} */ value) => context.editJSON("settings", (draft) => {
+    const settings = draft !== null && typeof draft === "object" && !Array.isArray(draft) ? draft : {};
+    if (value.trim() === "") delete settings[key];
+    else settings[key] = value.trim();
+    return settings;
+  });
+  const controls = fields.map((field) => {
+    const label = made("label", "setting");
+    const control = field.options ? document.createElement("select") : document.createElement("input");
+    if (control instanceof HTMLInputElement) control.type = "text";
+    label.append(made("span", "setting-name", field.label), control);
+    strip.append(label);
+    const handle = DocKit.input(control, { commit: (value) => void write(field.key, value), signal: context.signal });
+    return { field, label, control, handle, signed: "" };
+  });
+  return {
+    strip,
+    /** The fields as the settings and the table say now: their choices, which show, their values. */
+    update() {
+      for (const each of controls) {
+        each.label.hidden = each.field.shown ? !each.field.shown() : false;
+        const { control, field } = each;
+        if (field.options && control instanceof HTMLSelectElement) {
+          const options = field.options();
+          const signed = JSON.stringify(options);
+          if (signed !== each.signed) {
+            each.signed = signed;
+            control.replaceChildren(...options.map(([value, words]) => new Option(words, value)));
+          }
+        }
+        each.handle.set(field.value());
+      }
+    },
+  };
+}
+
+DocKit.component({
+  id: "gallery/chart-view",
+  on: ["source", "data", "editable"],
+  mount(host, context) {
+    const language = languageOf(document.documentElement);
+    const words = WORDS[language];
+    const format = new Intl.NumberFormat(language === "en" ? "en-US" : "zh-CN", { maximumFractionDigits: 2 });
+    const face = made("div", "face");
+    const head = made("div", "head");
+    const title = made("span", "title");
+    const gear = made("button", "gear");
+    gear.type = "button";
+    gear.title = words.settings;
+    gear.setAttribute("aria-label", words.settings);
+    gear.setAttribute("aria-expanded", "false");
+    gear.innerHTML = GEAR;
+    head.append(title, gear);
+    const bars = made("div", "bars");
+    bars.setAttribute("role", "img");
+    const line = made("p", "line");
+
+    /** @type {DocTableView | null} */
+    let table = null;
+    let asked = askedOf({});
+    /** @type {{ by: string, op: string, value: string } | null} */
+    let drawn = null; // what it drew last: its column, its op, its numbers
+    const pairs = (/** @type {string[]} */ names) => names.map((name) => /** @type {[string, string]} */ ([name, name]));
+    const { strip, update: updateStrip } = settingsStrip(context, [
+      { key: "by", label: words.by, options: () => [["", words.each], ...pairs(table ? table.columns.slice(1) : [])], value: () => drawn ? drawn.by : asked.by },
+      { key: "op", label: words.op, options: () => [["count", words.ops.count], ["sum", words.ops.sum], ["average", words.ops.average]], shown: () => Boolean(drawn && drawn.by), value: () => drawn ? drawn.op : asked.op },
+      { key: "value", label: words.value, options: () => pairs(table ? numberColumns(table) : []), shown: () => !drawn || !drawn.by || drawn.op !== "count", value: () => drawn ? drawn.value : asked.value },
+      { key: "title", label: words.title, value: () => asked.title },
+    ]);
+    face.append(head, strip, bars, line);
+    host.append(face);
+    gear.addEventListener("click", () => {
+      strip.hidden = !strip.hidden;
+      gear.setAttribute("aria-expanded", String(!strip.hidden));
+    }, { signal: context.signal });
+
+    /** @type {Map<unknown, { line: HTMLElement, label: HTMLElement, bar: HTMLElement, value: HTMLElement, said: string, at: string }>} */
+    const lines = new Map(); // a bar's key (its group's value, or its row's element) -> what draws it
+    const say = (/** @type {string | null} */ text) => {
+      line.hidden = text === null;
+      if (line.textContent !== (text ?? "")) line.textContent = text ?? "";
+    };
+    const drawNow = () => {
+      table = context.table();
+      asked = askedOf(context.readJSON("settings"));
+      face.toggleAttribute("data-writes", context.canEdit());
+      head.hidden = !table;
+      const chart = table ? chartOf(table, asked, words) : { line: host.hasAttribute("data-doc-from") ? words.unread : words.unbound };
+      if (chart.line !== undefined) {
+        drawn = null;
+        updateStrip();
+        title.textContent = asked.title;
+        head.classList.toggle("gallery-chart-view-untitled", !asked.title);
+        lines.clear();
+        bars.replaceChildren();
+        bars.hidden = true;
+        return say(chart.line);
+      }
+      drawn = { by: chart.by, op: chart.by ? chart.op : "", value: chart.value };
+      updateStrip();
+      head.classList.remove("gallery-chart-view-untitled");
+      if (title.textContent !== chart.title) title.textContent = chart.title;
+      bars.setAttribute("aria-label", chart.title);
+      bars.hidden = false;
+      say(chart.all > chart.bars.length ? words.more(chart.bars.length, chart.all) : null);
+      const values = /** @type {number[]} */ (chart.bars.map(({ value }) => value).filter((value) => value !== null));
+      const low = Math.min(0, ...values);
+      const span = Math.max(0, ...values) - low || 1;
+      const at = (/** @type {number} */ value) => ((value - low) / span) * 100;
+      const zero = at(0);
+      bars.classList.toggle("gallery-chart-view-below", low < 0);
+      bars.style.setProperty("--gallery-chart-view-zero", `${zero}%`);
+      const keys = new Set(chart.bars.map(({ key }) => key));
+      for (const key of [...lines.keys()]) if (!keys.has(key)) lines.delete(key);
+      put(bars, chart.bars.map(({ key, label, value }) => {
+        let kept = lines.get(key);
+        if (!kept) {
+          const row = made("div", "row");
+          const name = made("span", "label");
+          const lane = made("span", "lane");
+          const bar = made("span", "bar");
+          const said = made("span", "value");
+          lane.append(bar, said);
+          row.append(name, lane);
+          kept = { line: row, label: name, bar, value: said, said: "", at: "" };
+          lines.set(key, kept);
+        }
+        if (kept.label.textContent !== label) kept.label.textContent = label;
+        const text = value === null ? "" : format.format(value);
+        const from = value === null ? zero : Math.min(zero, at(value));
+        const to = value === null ? zero : Math.max(zero, at(value));
+        const place = `${from} ${to} ${value !== null && value < 0}`;
+        if (kept.said !== text) {
+          kept.said = text;
+          kept.value.textContent = text;
+        }
+        if (kept.at !== place) {
+          kept.at = place;
+          kept.bar.hidden = value === null;
+          kept.bar.style.left = `${from}%`;
+          kept.bar.style.width = `${to - from}%`;
+          kept.value.style.left = value !== null && value < 0 ? "" : `calc(${to}% + 4px)`;
+          kept.value.style.right = value !== null && value < 0 ? `calc(${100 - from}% + 4px)` : "";
+        }
+        return kept.line;
+      }));
+    };
+    drawNow();
+    return { update: () => context.frame(drawNow) };
+  },
+});

package/packs/gallery/chart-view/preview.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f2f4f7"/><rect x="16" y="12" width="208" height="96" rx="8" fill="#ffffff" stroke="#d0d5dd"/><rect x="28" y="22" width="70" height="7" rx="3.5" fill="#475467"/><rect x="28" y="42" width="28" height="7" rx="3" fill="#98a2b3"/><rect x="64" y="40" width="110" height="11" rx="3" fill="#2678d8"/><rect x="28" y="60" width="28" height="7" rx="3" fill="#98a2b3"/><rect x="64" y="58" width="72" height="11" rx="3" fill="#2678d8"/><rect x="28" y="78" width="28" height="7" rx="3" fill="#98a2b3"/><rect x="64" y="76" width="140" height="11" rx="3" fill="#2678d8"/><rect x="180" y="43" width="16" height="5" rx="2" fill="#d0d5dd"/><rect x="142" y="61" width="16" height="5" rx="2" fill="#d0d5dd"/></svg>