@heycys/gallery 0.1.0 → 0.1.2

package/packs/gallery/card/component.json

@@ -0,0 +1,14 @@
+{
+  "id": "gallery/card",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "卡片", "en": "Card" },
+  "description": { "zh": "带标题的卡片，里面放任意内容", "en": "A card with a title, any blocks inside it" },
+  "words": "kapian card 卡片 框 frame box",
+  "parts": {
+    "title": { "at": ":scope > h3", "edit": "text" },
+    "body": { "edit": "flow" }
+  },
+  "places": ["document"],
+  "markdown": "parts"
+}

package/packs/gallery/card/example.html

@@ -0,0 +1,10 @@
+<div data-doc-component="gallery/card">
+  <h3>这一周的要点</h3>
+  <div data-doc-slot="body">
+    <p>卡片里写文档自己的块：段落、列表、表格、公式、图表卡片都可以。</p>
+    <ul>
+      <li>标题写这张卡片说的是什么</li>
+      <li>内容照常写，读者照常编辑</li>
+    </ul>
+  </div>
+</div>

package/packs/gallery/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="28" width="96" height="12" rx="4" fill="#667085"/><rect x="30" y="52" width="176" height="8" rx="4" fill="#d0d5dd"/><rect x="30" y="68" width="150" height="8" rx="4" fill="#d0d5dd"/><rect x="30" y="84" width="120" height="8" rx="4" fill="#d0d5dd"/></svg>

package/packs/gallery/card/style.css

@@ -0,0 +1,6 @@
+/* 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 blocks in the slot, which read as the page's. The look is a
+   card's of the kit (.doc-figure): its border, its radius and its title's size, in the kit's colors,
+   which follow the theme. */
+[data-doc-component="gallery/card"] { margin: var(--doc-component-gap) 0; padding: 20px 24px 8px; border: 1px solid var(--doc-border); border-radius: 10px; background: var(--doc-surface); }
+[data-doc-component="gallery/card"] > h3 { margin: 0 0 4px; font-size: var(--doc-card-title-font-size); line-height: var(--doc-card-title-line-height); font-weight: 600; letter-spacing: -.025em; }

package/packs/gallery/card/template.html

@@ -0,0 +1,6 @@
+<div data-doc-component="gallery/card">
+  <h3>标题</h3>
+  <div data-doc-slot="body">
+    <p></p>
+  </div>
+</div>

package/packs/gallery/card/writing.md

@@ -0,0 +1,14 @@
+# 卡片 (gallery/card)
+
+A card that frames a few blocks under a title: a summary beside the text, a set of points to keep together, a step of a guide. Use it where a framed group reads better than a heading; for a whole section, a heading is enough.
+
+## How to write it
+
+Write the element as example.html does (`gallery block show gallery/card` prints it):
+
+- the title, its `h3`: required, a few words.
+- the body, its `<div data-doc-slot="body">`: required, the document's own blocks, written as anywhere in the document (paragraphs, lists, tables, formulas, a chart card). The reader edits them as any.
+
+## How it looks
+
+A frame with rounded corners in the kit's border color, its title at the top. It draws nothing of its own and has no script: what the file says is what a reader sees.

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

@@ -0,0 +1,15 @@
+{
+  "id": "gallery/chart-card",
+  "apiVersion": 1,
+  "version": "1.0.0",
+  "name": { "zh": "表格图表卡片", "en": "Chart from a table" },
+  "description": { "zh": "一个标题、一张表格和它画出的条形图，改表格里的数，图跟着重画", "en": "A title, a table and the bar chart drawn from it: edit a number and the chart draws again" },
+  "words": "biaogetubiaokapian tubiao chart bar table 图表 条形图 表格 画图",
+  "parts": {
+    "title": { "at": ":scope > h3", "edit": "text" },
+    "table": { "edit": "flow" }
+  },
+  "runtime": { "generated": [":scope > .gallery-chart-card-bars"] },
+  "places": ["document"],
+  "markdown": "parts"
+}

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>