@heycys/gallery 0.1.0 → 0.1.2

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>

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

@@ -0,0 +1,94 @@
+/* Every selector starts at the instance and goes down a step at a time (>), so that nothing here
+   reaches the rest of the page. A framed card of the kit's (gallery/chart-card's look): its title, the
+   settings (⚙) at the right of its head while the page edits and the strip they open under it, then
+   horizontal bars from zero, each its name at its left and its value at its end, in the kit's first
+   series color, which follows the theme; laid out in percents of the card's width, so that a width
+   draws nothing again. A muted line where there is nothing to draw or more than it draws. */
+[data-doc-component="gallery/chart-view"] {
+  margin: var(--doc-component-gap) 0;
+  padding: 16px 20px 12px;
+  border: 1px solid var(--doc-border);
+  border-radius: 10px;
+  background: var(--doc-surface);
+  > .gallery-chart-view-face { color: var(--doc-text); }
+  > .gallery-chart-view-face > .gallery-chart-view-head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 26px;
+    margin: 0 0 10px;
+    > .gallery-chart-view-title { flex: 1 1 auto; min-width: 0; font-size: var(--doc-card-title-font-size); line-height: var(--doc-card-title-line-height); font-weight: 600; letter-spacing: -.025em; }
+    > .gallery-chart-view-gear {
+      display: none;
+      flex: none;
+      align-items: center;
+      justify-content: center;
+      width: 26px;
+      height: 26px;
+      margin: 0 -8px 0 0;
+      padding: 0;
+      border: 0;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--doc-muted);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity .12s;
+    }
+    > .gallery-chart-view-gear > svg { width: 16px; height: 16px; }
+    > .gallery-chart-view-gear:hover { background: var(--doc-hover); color: var(--doc-text); }
+    > .gallery-chart-view-gear[aria-expanded="true"] { background: var(--doc-press); color: var(--doc-text); opacity: 1; }
+  }
+  > .gallery-chart-view-face > .gallery-chart-view-head.gallery-chart-view-untitled { margin-bottom: 2px; }
+  > .gallery-chart-view-face > .gallery-chart-view-head[hidden] { display: none; }
+  > .gallery-chart-view-face[data-writes] > .gallery-chart-view-head > .gallery-chart-view-gear { display: inline-flex; }
+  > .gallery-chart-view-face[data-writes]:hover > .gallery-chart-view-head > .gallery-chart-view-gear,
+  > .gallery-chart-view-face[data-writes]:focus-within > .gallery-chart-view-head > .gallery-chart-view-gear { opacity: 1; }
+  > .gallery-chart-view-face > .gallery-chart-view-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px 14px;
+    margin: -4px 0 12px;
+    padding: 8px 10px;
+    border-radius: 8px;
+    background: var(--doc-hover);
+    font-size: 12px;
+    > .gallery-chart-view-setting { display: inline-flex; align-items: center; gap: 6px; color: var(--doc-muted); }
+    > .gallery-chart-view-setting[hidden] { display: none; }
+    > .gallery-chart-view-setting > select,
+    > .gallery-chart-view-setting > input {
+      box-sizing: border-box;
+      max-width: 180px;
+      height: 24px;
+      padding: 2px 6px;
+      border: 1px solid var(--doc-border);
+      border-radius: 6px;
+      background: var(--doc-surface);
+      color: var(--doc-text);
+      font: inherit;
+    }
+    /* A select is a button that opens the kit's menu (DocKit's choices): no line, as every button. */
+    > .gallery-chart-view-setting > select { border: 0; cursor: pointer; }
+    > .gallery-chart-view-setting > input { width: 160px; }
+  }
+  > .gallery-chart-view-face > .gallery-chart-view-strip[hidden] { display: none; }
+  > .gallery-chart-view-face > .gallery-chart-view-bars {
+    display: grid;
+    grid-template-columns: fit-content(40%) minmax(0, 1fr);
+    gap: 8px 12px;
+    align-items: center;
+    margin: 0 0 4px;
+    font-size: 13px;
+    line-height: 1.4;
+    > .gallery-chart-view-row { display: contents; }
+    > .gallery-chart-view-row > .gallery-chart-view-label { text-align: right; overflow-wrap: anywhere; color: var(--doc-text); }
+    > .gallery-chart-view-row > .gallery-chart-view-lane { position: relative; height: 18px; margin-right: 4.5em; }
+    > .gallery-chart-view-row > .gallery-chart-view-lane > .gallery-chart-view-bar { position: absolute; top: 0; bottom: 0; min-width: 1px; border-radius: 3px; background: var(--doc-series-1); }
+    > .gallery-chart-view-row > .gallery-chart-view-lane > .gallery-chart-view-bar[hidden] { display: none; }
+    > .gallery-chart-view-row > .gallery-chart-view-lane > .gallery-chart-view-value { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; color: var(--doc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
+    &.gallery-chart-view-below > .gallery-chart-view-row > .gallery-chart-view-lane { margin-left: 4.5em; background: linear-gradient(var(--doc-grid), var(--doc-grid)) var(--gallery-chart-view-zero) 0 / 1px 100% no-repeat; }
+  }
+  > .gallery-chart-view-face > .gallery-chart-view-bars[hidden] { display: none; }
+  > .gallery-chart-view-face > .gallery-chart-view-line { margin: 6px 0 2px; font-size: 13px; line-height: 1.5; color: var(--doc-muted); }
+  > .gallery-chart-view-face > .gallery-chart-view-line[hidden] { display: none; }
+}

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

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/chart-view">
+  <script type="application/json">{}</script>
+</div>

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

@@ -0,0 +1,22 @@
+# 图表 (gallery/chart-view)
+
+A bar chart of a table of the document: the rows counted, summed or averaged by a column (tasks by status, sales by region), or a bar for each row's number. It is a view of the table, drawn again as the table is typed in: the table holds the data, the chart never writes it. Use it beside a 看板 or a few 指标 over the same table. For a chart of numbers written for the chart alone, use 表格图表卡片 (gallery/chart-card), whose table is its own; for any other kind of chart, a chart of the document's (references/writing-html.md, "Figures and charts").
+
+## How to write it
+
+Write a table, then the chart, as example.html does (`gallery block show gallery/chart-view` prints it):
+
+- the table: an ordinary table of the document whose `<table>` carries `data-doc-chart-source="<key>"`, a key of the document's own (a letter, then letters, digits, `_` or `-`; 32 at most), its header row naming the columns, the first column naming each row. No merged cells.
+- the chart: `<div data-doc-component="gallery/chart-view" data-doc-from="<key>">`, the same key, holding its settings, one `<script type="application/json">` on one line, each optional:
+  - `by`: the column whose values are the bars, the rows grouped by it in the order they first say them. Left out, a column named like a status (状态, 阶段, status), else one whose words repeat; with none, a bar for each row (its first cell its name; at most 50);
+  - `op`: `"count"`, `"sum"` or `"average"` of each group's rows. Left out: `"sum"` where the table has a column of numbers, else `"count"`;
+  - `value`: the column of numbers summed, averaged, or drawn a bar a row. Left out: the first column of numbers;
+  - `title`: what it shows, with its unit. Left out, one is made (各状态的行数, 各区域的金额合计).
+
+  One table may have several views (a 看板, 指标, another chart), each with the same key.
+
+The reader adds a chart in Gallery from a table's menu, 视图 › 图表, which writes the key on both; it is not in "/", as a chart needs its table. Its ⚙ (where the page edits) changes its settings.
+
+## How it looks
+
+A framed card: its title, then horizontal bars from zero, each with its name and its value, in the kit's series color, which follows the theme. 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 table.

package/packs/gallery/countdown/component.json

@@ -0,0 +1,18 @@
+{
+  "id": "gallery/countdown",
+  "apiVersion": 1,
+  "version": "1.3.0",
+  "name": { "zh": "倒计时", "en": "Countdown" },
+  "description": { "zh": "离某一天还有几天，到了那天说今天，过了说已经几天", "en": "How many days until a date: today on the day, and the days since after it" },
+  "words": "daojishi daoshu countdown days until 倒计时 倒数日 纪念日 日子",
+  "parts": {
+    "settings": { "at": ":scope > script", "edit": "data" }
+  },
+  "runtime": { "generated": [":scope > .gallery-countdown-face"] },
+  "places": ["page"],
+  "card": { "sizes": [[2, 2], [4, 2]], "resize": true },
+  "settings": [
+    { "key": "title", "label": { "zh": "名称", "en": "Name" }, "type": "text", "default": "" },
+    { "key": "date", "label": { "zh": "日期", "en": "Date" }, "type": "date", "required": true }
+  ]
+}

package/packs/gallery/countdown/example.html

@@ -0,0 +1,3 @@
+<div data-doc-component="gallery/countdown">
+  <script type="application/json">{"title":"春节","date":"2027-02-06"}</script>
+</div>