@heycys/gallery 0.0.0-stage → 0.1.0

package/kit/charts.js

@@ -0,0 +1,355 @@
+"use strict";
+(() => {
+  // src/render/kit/charts/core.js
+  var mounts = /* @__PURE__ */ new WeakMap();
+  function elementFor(target) {
+    const element = typeof target === "string" ? document.querySelector(target) : target;
+    if (!(element instanceof Element)) throw new Error("DocCharts target was not found.");
+    return element;
+  }
+  var isConfig = (node) => node.tagName === "SCRIPT" && node.type === "application/json";
+  function clear(host) {
+    host.replaceChildren(...[...host.children].filter(isConfig));
+    host.removeAttribute("data-doc-layout");
+  }
+  function writeLayoutNotes(host, notes) {
+    if (notes.length > 0) host.setAttribute("data-doc-layout", notes.join("\n"));
+    else host.removeAttribute("data-doc-layout");
+  }
+
+  // src/shared/inline-spacing.mjs
+  var UNITS = /* @__PURE__ */ new Set([..."\u4E2A\u4E07\u4EBF\u5343\u767E\u5341\u5143\u89D2\u5206\u5398\u6BDB\u500D\u5E74\u6708\u65E5\u53F7\u65F6\u70B9\u79D2\u5929\u5468\u5C81\u4EBA\u4F4D\u540D\u6B21\u5BB6\u6761\u9879\u79CD\u53F0\u53EA\u4EF6\u7BC7\u9875\u5F20\u5957\u4EFD\u7EC4\u6279\u671F\u5C4A\u4EE3\u7EA7\u5C42\u8F6E\u6B65\u7C73\u514B\u65A4\u5428\u5EA6\u91CC\u516C\u6BEB\u5FAE\u5BF8\u5C3A\u4E24\u5347\u6237\u6240\u5EA7\u680B\u8F86\u67B6\u8258\u672C\u90E8\u7AE0\u8282\u573A\u5C40\u9996\u53E5\u5B57\u884C\u5217\u904D\u56DE\u756A\u6210"]);
+  var ZWSP = String.fromCharCode(8203);
+
+  // src/shared/number-reading.mjs
+  var missingValues = /* @__PURE__ */ new Set(["", "-", "\u2014", "\u2013", "\u2212", "n/a", "na", "null"]);
+  function isMissingValue(raw) {
+    return missingValues.has(raw.toLowerCase());
+  }
+  var QUALIFIER = String.raw`(?:约|大约|近|超过|不足|≈|~|<=?|>=?|≤|≥|±)?`;
+  var AMOUNT = String.raw`[$¥€£₩₹]?\s*((?:\d{1,3}(?:[,\s\u00a0\u2009]\d{3})+|\d{1,4}(?:,\d{4})+|\d+)(?:\.\d*)?(?:e[+-]?\d+)?|\.\d+)`;
+  var UNIT = String.raw`((?:[%‰x×]|[A-Za-zµμ\u4e00-\u9fff°℃]+(?:\/[A-Za-zµμ\u4e00-\u9fff°℃·]+)?)?)`;
+  var UNIT_SCALES = { \u5343: 1e3, \u4E07: 1e4, \u4EBF: 1e8 };
+  var SCALE = UNIT_SCALES;
+  var SINGLE = new RegExp(`^${QUALIFIER}\\s*([+-]?)\\s*${AMOUNT}\\s*${UNIT}$`, "i");
+  var RANGE = new RegExp(`^([+-]?)\\s*${AMOUNT}\\s*${UNIT}\\s*(?:-|~|\u81F3|\u5230)\\s*[+-]?\\s*${AMOUNT}\\s*${UNIT}$`, "i");
+  function numberReading(raw) {
+    let text = raw.normalize("NFKC").trim().replace(/[−–—]/g, "-");
+    const accounting = /^\((.+)\)$/.exec(text);
+    if (accounting) text = accounting[1].trim();
+    const single = SINGLE.exec(text);
+    const match = single ?? RANGE.exec(text);
+    if (!match) return null;
+    const value = Number(`${match[1]}${match[2].replace(/[,\s\u00a0\u2009]/g, "")}`);
+    const written = accounting ? -value : value;
+    const unit = match[3] ?? "";
+    const scaled = written * (SCALE[unit[0]] ?? 1);
+    if (!Number.isFinite(scaled)) return null;
+    return single ? { value: scaled, written, unit } : { value: scaled, written, unit, range: true };
+  }
+
+  // src/shared/table-chart.mjs
+  var CHART_DATA = "data-doc-chart-data";
+  var CHART_SOURCE = "data-doc-chart-source";
+  var FORMULA = /\\\(([\s\S]*?)\\\)|\\\[([\s\S]*?)\\\]|\$\$([\s\S]*?)\$\$/g;
+  var cellWords = (text) => text.replace(FORMULA, (_, inline, display, dollars) => inline ?? display ?? dollars).replaceAll(ZWSP, "").replace(/\s+/g, " ").trim();
+  var WORD_TYPES = /* @__PURE__ */ new Set(["text", "date"]);
+  function cellValue(cell, type = null) {
+    if (!cell) return null;
+    const raw = cell.sort ?? cell.words;
+    if (isMissingValue(raw)) return null;
+    if (WORD_TYPES.has(type)) return cell.words;
+    const reading = numberReading(raw);
+    return reading && !reading.range ? reading.value : cell.words;
+  }
+  function tableRows(table) {
+    const fail = (error, ...message) => ({ error, message });
+    if (table.merged) return fail("has merged cells: write each value in its own cell, the category on every row", "merged-cells");
+    let { names, types, rows } = table;
+    if (!names) [names, types, rows] = rows.length > 0 ? [rows[0].map((cell) => cell?.words ?? ""), null, rows.slice(1)] : [[], null, []];
+    const data = rows.map((row) => {
+      const values = {};
+      names.forEach((name, column) => {
+        values[name] = cellValue(row[column], types?.[column] ?? null);
+      });
+      return values;
+    });
+    data.columns = [...names];
+    return { data };
+  }
+
+  // src/render/kit/words.js
+  var CHARTS = {
+    "table-gone": { zh: "\u8FD9\u5F20\u56FE\u7684\u6570\u636E\u8868\u683C\u4E0D\u5728\u9875\u9762\u4E0A\u4E86\u3002", en: "This chart's data table is no longer on the page." },
+    "merged-cells": { zh: "\u6570\u636E\u8868\u683C\u6709\u5408\u5E76\u7684\u5355\u5143\u683C\uFF0C\u753B\u4E0D\u51FA\u8FD9\u5F20\u56FE\u3002", en: "The data table has merged cells, so this chart can't be drawn." }
+  };
+  var UI_LANGUAGE = "data-ge-language";
+  function kitLanguage(root = globalThis.document?.documentElement) {
+    const ui = root?.getAttribute(UI_LANGUAGE) ?? null;
+    const english = ui !== null ? ui === "en" : /^en(?:-|$)/i.test(root?.getAttribute("lang") ?? "");
+    return english ? "en" : "zh";
+  }
+  function wordIn(table, language, key, ...values) {
+    const entry = table[key];
+    if (!entry) throw new Error(`The kit has no word "${key}" here (src/render/kit/words.js).`);
+    const text = entry[language] ?? entry.zh;
+    return values.length === 0 ? text : text.replace(/\{(\d+)\}/g, (whole, index) => index < values.length ? String(values[index]) : whole);
+  }
+  var sayer = (table) => (key, ...values) => wordIn(table, kitLanguage(), key, ...values);
+  var sayCharts = /* @__PURE__ */ sayer(CHARTS);
+  var ENGLISH_ROOT = `:root[${UI_LANGUAGE}="en"], :root:not([${UI_LANGUAGE}])[lang|="en" i]`;
+
+  // src/render/kit/charts/from-table.js
+  var SETTLE = 800;
+  var checks = /* @__PURE__ */ new Set();
+  var observer = null;
+  var SOURCES = `.doc-table-wrap[${CHART_SOURCE}]`;
+  var sourceOf = (key) => [...document.querySelectorAll(SOURCES)].find((wrap) => wrap.getAttribute(CHART_SOURCE) === key && !wrap.closest("[data-doc-dev]")) ?? null;
+  function touchesSource(record) {
+    if (record.type === "attributes" && (record.attributeName === CHART_SOURCE || record.attributeName === CHART_DATA)) return true;
+    const target = record.target.nodeType === 1 ? record.target : record.target.parentElement;
+    if (target?.closest(SOURCES)) return true;
+    return [...record.addedNodes, ...record.removedNodes].some((node) => node.nodeType === 1 && (node.matches(SOURCES) || node.querySelector(SOURCES)));
+  }
+  function watch() {
+    if (observer) return;
+    observer = new MutationObserver((records) => {
+      if (!globalThis.document?.defaultView) return;
+      if (records.some(touchesSource)) for (const check of checks) check();
+    });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: [CHART_SOURCE, CHART_DATA, "data-sort-value", "data-sort-type", "rowspan", "colspan", "aria-sort"]
+    });
+  }
+  function unwatch() {
+    if (checks.size > 0 || !observer) return;
+    observer.disconnect();
+    observer = null;
+  }
+  var fileOrder = /* @__PURE__ */ new WeakMap();
+  function inFileOrder(table, rows) {
+    const sorted = [...table.tHead?.rows[0]?.cells ?? []].some((cell) => /^(?:ascending|descending)$/.test(cell.getAttribute("aria-sort") ?? ""));
+    if (!sorted) {
+      rows.forEach((row, index) => fileOrder.set(row, index));
+      return rows;
+    }
+    const place = (row) => fileOrder.get(row) ?? rows.length + rows.indexOf(row);
+    return [...rows].sort((a, b) => place(a) - place(b));
+  }
+  var TEX = 'annotation[encoding="application/x-tex"]';
+  function sourceText(node) {
+    if (node.nodeType === 3) return node.data;
+    if (node.nodeType !== 1 || node.hasAttribute("data-ge-empty")) return "";
+    const tex = node.classList.contains("katex") ? node.querySelector(TEX) : null;
+    if (tex) return tex.textContent;
+    let text = "";
+    for (const child of node.childNodes) text += sourceText(child);
+    return text;
+  }
+  var wordsOf = (cell) => cellWords(sourceText(cell));
+  function tableCells(table) {
+    let header = table.tHead?.rows[0] ?? null;
+    let rows = [...table.tBodies].flatMap((body) => [...body.rows]);
+    if (!header && rows.length > 0 && rows[0].cells.length > 0 && [...rows[0].cells].every((cell) => cell.localName === "th")) [header, ...rows] = rows;
+    const merged = [header, ...rows].some((row) => row && [...row.cells].some((cell) => cell.rowSpan !== 1 || cell.colSpan !== 1));
+    return {
+      names: header ? [...header.cells].map(wordsOf) : null,
+      types: header ? [...header.cells].map((cell) => cell.getAttribute("data-sort-type")) : null,
+      rows: inFileOrder(table, rows).map((row) => [...row.cells].map((cell) => ({ words: wordsOf(cell), sort: cell.getAttribute("data-sort-value")?.trim() ?? null }))),
+      merged
+    };
+  }
+  function readSource(host) {
+    const key = host.getAttribute(CHART_DATA);
+    const table = sourceOf(key)?.querySelector("table");
+    if (!table) return { error: `no table carries ${CHART_SOURCE}="${key}": put the table back, or delete the card`, message: ["table-gone"] };
+    const found = tableRows(tableCells(table));
+    return found.error ? { error: `its table ${found.error}`, message: found.message } : found;
+  }
+  function createBound(host, make, context) {
+    host.classList.add("doc-chart");
+    let inner = null;
+    let shown = null;
+    let waiting = 0;
+    let destroyed = false;
+    const explain = ({ error, message }) => {
+      inner?.destroy();
+      inner = null;
+      context.frame(() => {
+        if (destroyed) return;
+        clear(host);
+        const line = document.createElement("div");
+        line.className = "doc-chart-message";
+        line.textContent = sayCharts(...message);
+        host.append(line);
+        writeLayoutNotes(host, [`data-missing: ${error}`]);
+      });
+    };
+    const check = () => {
+      clearTimeout(waiting);
+      waiting = 0;
+      const found = readSource(host);
+      const signature = JSON.stringify(found.error ? found : [found.data.columns, found.data]);
+      if (signature === shown) return;
+      if (found.error && inner) {
+        waiting = setTimeout(() => {
+          waiting = 0;
+          shown = signature;
+          explain(found);
+        }, SETTLE);
+        return;
+      }
+      shown = signature;
+      if (found.error) return explain(found);
+      if (inner) inner.setData(found.data);
+      else {
+        inner = make(found.data);
+        mounts.set(host, api);
+      }
+    };
+    const api = {
+      redraw(nextData) {
+        if (nextData !== void 0) throw new Error(`DocCharts: a chart drawn from a table (${CHART_DATA}) draws its table's rows; change the table`);
+        shown = null;
+        check();
+      },
+      destroy: () => globalThis.DocKit.destroy(host)
+    };
+    mounts.set(host, api);
+    checks.add(check);
+    watch();
+    check();
+    return {
+      api,
+      update: () => inner?.update(),
+      destroy() {
+        destroyed = true;
+        clearTimeout(waiting);
+        checks.delete(check);
+        unwatch();
+        inner?.destroy();
+        inner = null;
+        if (mounts.get(host) === api) mounts.delete(host);
+        clear(host);
+      }
+    };
+  }
+
+  // src/render/kit/charts/declared.js
+  var global = globalThis;
+  var drawers = /* @__PURE__ */ new Map();
+  function declaredData(host) {
+    try {
+      return JSON.parse([...host.children].find(isConfig).textContent);
+    } catch (error) {
+      throw new Error(`DocCharts: the data of data-doc-chart="${host.dataset.docChart}" is not valid JSON (${error.message}).`);
+    }
+  }
+  function startDeclared(host, context) {
+    const drawer = drawers.get(host.dataset.docChart);
+    if (!drawer) return null;
+    const make = (data) => typeof drawer === "function" ? createDrawn(host, data, drawer, context) : createPart(host, data, drawer, context);
+    if (host.hasAttribute(CHART_DATA)) return createBound(host, make, context);
+    if (![...host.children].some(isConfig)) return null;
+    return make(declaredData(host));
+  }
+  function createDrawn(host, data, draw, context) {
+    host.classList.add("doc-chart");
+    let destroyed = false;
+    const render = () => {
+      if (destroyed) return;
+      context.frame(() => {
+        if (destroyed) return;
+        clear(host);
+        draw(drawContext(host, data));
+      });
+    };
+    render();
+    const api = {
+      redraw(nextData) {
+        if (nextData !== void 0) data = nextData;
+        render();
+      },
+      destroy: () => global.DocKit.destroy(host)
+    };
+    mounts.set(host, api);
+    return {
+      api,
+      update: render,
+      setData(next) {
+        data = next;
+        render();
+      },
+      destroy() {
+        destroyed = true;
+        if (mounts.get(host) === api) mounts.delete(host);
+        clear(host);
+      }
+    };
+  }
+  function drawContext(host, data) {
+    const card = parseFloat(getComputedStyle(host).getPropertyValue("--doc-chart-height"));
+    return { host, data, tokens: global.DocTokens.read(host), width: host.clientWidth, height: card > 0 ? card : null };
+  }
+  function createPart(host, data, part, context) {
+    host.classList.add("doc-chart");
+    clear(host);
+    const made = part.mount({ ...drawContext(host, data), signal: context.signal }) ?? {};
+    const update = () => context.frame(() => made.update?.({ ...drawContext(host, data), signal: context.signal }));
+    const api = {
+      redraw(nextData) {
+        if (nextData !== void 0) data = nextData;
+        update();
+      },
+      destroy: () => global.DocKit.destroy(host)
+    };
+    mounts.set(host, api);
+    return {
+      api,
+      update,
+      setData(next) {
+        data = next;
+        update();
+      },
+      destroy() {
+        if (mounts.get(host) === api) mounts.delete(host);
+        try {
+          made.destroy?.();
+        } finally {
+          clear(host);
+        }
+      }
+    };
+  }
+  function define(type, draw) {
+    if (typeof type !== "string" || !/^[a-z][a-z0-9-]*$/.test(type)) throw new Error("DocCharts.define: a chart type is lowercase letters, digits and hyphens, starting with a letter.");
+    if (drawers.has(type)) throw new Error(`DocCharts.define: "${type}" is already defined.`);
+    if (typeof draw !== "function" && typeof draw?.mount !== "function") throw new Error("DocCharts.define requires a draw function, or a part with a mount function.");
+    drawers.set(type, draw);
+    document.querySelectorAll("[data-doc-chart]").forEach((host) => {
+      if (host.dataset.docChart === type) global.DocKit.mount(host);
+    });
+  }
+
+  // src/render/kit/charts/index.js
+  var global2 = globalThis;
+  if (!global2.DocTokens) throw new Error("DocCharts requires /kit/tokens.js to be loaded first.");
+  if (!global2.DocKit) throw new Error("DocCharts requires /kit/runtime.js to be loaded first.");
+  global2.DocCharts = Object.freeze({
+    define,
+    get: (target) => mounts.get(elementFor(target)) ?? null
+  });
+  global2.ReportCharts = global2.DocCharts;
+  global2.DocKit.component({
+    id: "chart",
+    when: "now",
+    owns: true,
+    on: ["resize", "theme", "layout"],
+    mount: (host, context) => startDeclared(host, context),
+    dehydrate: clear
+  });
+})();