@pixerate/editor 0.163.0 → 0.165.0

package/dist/{chunk-SZA42R4N.js → chunk-FRBRLKNQ.js}

@@ -1,3 +1,7 @@
+import {
+  parseSankey,
+  parseTreemap
+} from "./chunk-KGRZMHZB.js";
 import {
   chartMovingAverage,
   chartSupportsTrendlines,
@@ -7,20 +11,23 @@ import {
   r2,
   sameChartSelection,
   summarizeChartSeries
-} from "./chunk-Z4P2RBMJ.js";
+} from "./chunk-V5GSY3NC.js";
 import {
   CHART_TYPE_LABELS,
   DEFAULT_CHART_PALETTE,
   DEFAULT_CHART_THEME,
   chartDataFromTable,
   chartFamily,
+  chartLinksFromTable,
   chartSeriesColor,
   chartSliceColor,
   chartSpecColorsByCategory,
   chartTreeDepth,
   chartTreeFromRows,
+  chartTreeFromSeries,
   chartTreeFromTable,
   chartTreeToRows,
+  chartTreeTotal,
   checkChartColors,
   cloneChartSeries,
   cloneChartSpec,
@@ -28,6 +35,7 @@ import {
   defaultChartAxis,
   describeChartErrorBars,
   findChartTreeNode,
+  normalizeChartLinks,
   normalizeChartReferenceBand,
   normalizeChartReferenceLine,
   normalizeChartSpec,
@@ -36,7 +44,7 @@ import {
   parseChartValue,
   shadeChartColor,
   uniqueChartSeriesId
-} from "./chunk-3NEZJCBY.js";
+} from "./chunk-2ZRN43IN.js";
 import {
   parseCsv,
   parseTsv
@@ -71,9 +79,14 @@ function splitOutside(text, sep) {
   out.push(cur);
   return out;
 }
+var csvField = (text) => /[",\n]|^\s|\s$/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+var treemapName = (name) => !name.includes('"') ? `"${name}"` : !name.includes("'") ? `'${name}'` : `"${name.replace(/"/g, "'")}"`;
+var yamlText = (text) => /^[\w][\w .,!?()/&+-]*$/.test(text) && !/:\s/.test(text) ? text : JSON.stringify(text);
 function chartMermaidFamily(spec) {
   const family = chartFamily(spec);
-  if (family === "pie" || family === "funnel" || family === "treemap" || family === "parliament" || family === "sunburst") return "pie";
+  if (family === "sankey" && spec.links?.length) return "sankey";
+  if (family === "treemap" || family === "sunburst") return "treemap";
+  if (family === "pie" || family === "funnel" || family === "parliament") return "pie";
   if (family === "radar") return "radar";
   return "xychart";
 }
@@ -114,7 +127,27 @@ function chartToMermaid(spec, options = {}) {
   const visible = spec.series.filter((s) => !s.hidden);
   const lines = [];
   const v = (x) => x === null || !Number.isFinite(x) ? "0" : num(x);
-  if (family === "pie") {
+  const front = [];
+  if (family === "sankey") {
+    if (spec.title) front.push("---", `title: ${yamlText(spec.title)}`, "---");
+    lines.push("sankey-beta");
+    for (const l of spec.links) lines.push(`${csvField(l.source)},${csvField(l.target)},${num(l.value)}`);
+  } else if (family === "treemap") {
+    lines.push("treemap-beta");
+    if (spec.title) lines.push(`title ${spec.title}`);
+    const first = visible[0] ?? spec.series[0];
+    const tree = spec.tree.length ? spec.tree : chartTreeFromSeries(spec.categories, first?.values ?? []);
+    const write = (nodes, depth) => {
+      for (const n of nodes) {
+        const pad = ind.repeat(depth);
+        if (n.children) {
+          lines.push(`${pad}${treemapName(n.name)}`);
+          write(n.children, depth + 1);
+        } else lines.push(`${pad}${treemapName(n.name)}: ${num(n.value ?? 0)}`);
+      }
+    };
+    write(tree, 1);
+  } else if (family === "pie") {
     const s = visible[0] ?? spec.series[0];
     lines.push(`pie${spec.dataLabels ? " showData" : ""}`);
     if (spec.title) lines.push(`${ind}title ${spec.title}`);
@@ -160,13 +193,13 @@ function chartToMermaid(spec, options = {}) {
       lines.push(`${ind}${kind} ${quote(s.name)} [${s.values.map(v).join(", ")}]`);
     }
   }
-  let text = `${lines.join("\n")}
+  let text = `${[...front, ...lines].join("\n")}
 `;
   if (options.meta !== false) {
     const meta = metaFor(spec, text);
     if (meta) {
       const [header, ...rest] = lines;
-      text = `${[header, `${CHART_MERMAID_META_PREFIX}${JSON.stringify({ v: 1, ...meta })}`, ...rest].join("\n")}
+      text = `${[...front, header, `${CHART_MERMAID_META_PREFIX}${JSON.stringify({ v: 1, ...meta })}`, ...rest].join("\n")}
 `;
     }
   }
@@ -229,7 +262,9 @@ function chartFromMermaid(text, options = {}) {
       showData = !!m[1];
       if (m[2]) frontTitle = m[2].trim();
     } else if (/^radar(?:-beta)?\s*$/i.test(t)) family = "radar";
-    else issues.push({ path: "header", line: i + 1, message: `Line ${i + 1}: expected a chart header (xychart-beta, pie or radar-beta), got "${t.slice(0, 40)}".` });
+    else if (/^sankey(?:-beta)?\s*$/i.test(t)) family = "sankey";
+    else if (/^treemap(?:-beta)?\s*$/i.test(t)) family = "treemap";
+    else issues.push({ path: "header", line: i + 1, message: `Line ${i + 1}: expected a chart header (xychart-beta, pie, radar-beta, sankey-beta or treemap-beta), got "${t.slice(0, 40)}".` });
     headerLine = i;
     break;
   }
@@ -245,6 +280,7 @@ function chartFromMermaid(text, options = {}) {
   let graticule = "circle";
   const counts = { bar: 0, line: 0 };
   const lineIssue = (i, message) => issues.push({ path: `line ${i + 1}`, line: i + 1, message: `Line ${i + 1}: ${message}` });
+  const whole = family === "sankey" || family === "treemap";
   for (let i = headerLine + 1; family && i < all.length; i++) {
     const raw = all[i];
     const t = raw.trim();
@@ -260,7 +296,7 @@ function chartFromMermaid(text, options = {}) {
       }
       continue;
     }
-    if (t.startsWith("%%")) continue;
+    if (t.startsWith("%%") || whole) continue;
     const isLast = i === all.length - 1 || all.slice(i + 1).every((l) => !l.trim());
     let m;
     if (m = /^title\s+(.+)$/i.exec(t)) {
@@ -362,7 +398,8 @@ function chartFromMermaid(text, options = {}) {
     if (!(partial && isLast)) lineIssue(i, `could not read "${t.slice(0, 60)}"; it was skipped.`);
   }
   let input;
-  if (family === "pie") {
+  if (whole) input = readWholeMermaid(family, all, headerLine, partial, title, issues);
+  else if (family === "pie") {
     input = {
       type: "pie",
       title,
@@ -398,18 +435,54 @@ function chartFromMermaid(text, options = {}) {
     }
   }
   const { spec, issues: specIssues } = normalizeChartSpec(input);
-  if (!family && !partial && !issues.length) issues.push({ path: "header", message: "The text is empty: expected a chart header (xychart-beta, pie or radar-beta)." });
+  if (!family && !partial && !issues.length) issues.push({ path: "header", message: "The text is empty: expected a chart header (xychart-beta, pie, radar-beta, sankey-beta or treemap-beta)." });
   return { spec, issues: [...issues, ...specIssues], family, hasMeta: !!meta };
 }
+function readWholeMermaid(family, all, headerLine, partial, title, issues) {
+  const body = all.slice(headerLine).map((l) => l.trim().startsWith(CHART_MERMAID_META_PREFIX.trim()) ? "%%" : l);
+  const parse = (lines) => family === "sankey" ? parseSankey(lines.join("\n")) : parseTreemap(lines.join("\n"));
+  let read = parse(body);
+  if ("error" in read && partial && body.length > 1) read = parse(body.slice(0, -1));
+  const lineOf = (n) => n === void 0 ? void 0 : n + headerLine;
+  if ("error" in read) {
+    const line = lineOf(read.line);
+    if (!(partial && body.length <= 2)) issues.push({ path: family, ...line ? { line } : {}, message: line ? `Line ${line}: ${read.error}` : read.error });
+    return { type: family === "sankey" ? "sankey" : "treemap", title };
+  }
+  if (family === "sankey") {
+    const data2 = read.data;
+    return { type: "sankey", title, links: data2.links, sankeyNodes: data2.nodes, series: [{ id: "series-1", name: "Values", values: [] }] };
+  }
+  const data = read.data;
+  let items = data.items;
+  let name = data.title ?? title;
+  if (items.length === 1 && items[0].children?.length) {
+    name ||= items[0].name;
+    items = items[0].children;
+  }
+  const toNode = (item) => item.children?.length ? { name: item.name, children: item.children.map(toNode) } : { name: item.name, value: item.value ?? 0 };
+  const tree = items.map(toNode);
+  const leaf = (n) => !n.children;
+  const flatOrOneLevel = tree.every(leaf) || tree.every((n) => n.children?.every(leaf));
+  return { type: flatOrOneLevel ? "treemap" : "sunburst", title: name, tree, categories: tree.map((n) => n.name), series: [{ id: "series-1", name: "Values", values: tree.map(chartTreeTotal) }] };
+}
 function findMermaidCharts(text) {
   const lines = text.replace(/^/, "").split(/\r?\n/);
   const found = [];
   const familyOf = (body) => {
-    const header = body.split(/\r?\n/).find((l) => l.trim() && !l.trim().startsWith("%%") && l.trim() !== "---");
+    let rows = body.split(/\r?\n/);
+    const firstRow = rows.findIndex((l) => l.trim());
+    if (rows[firstRow]?.trim() === "---") {
+      const end = rows.findIndex((l, i) => i > firstRow && l.trim() === "---");
+      if (end > 0) rows = rows.slice(end + 1);
+    }
+    const header = rows.find((l) => l.trim() && !l.trim().startsWith("%%"));
     if (!header) return null;
     if (/^\s*xychart(-beta)?\b/.test(header)) return "xychart";
     if (/^\s*pie\b/.test(header)) return "pie";
     if (/^\s*radar(-beta)?\b/.test(header)) return "radar";
+    if (/^\s*sankey(-beta)?\s*$/.test(header)) return "sankey";
+    if (/^\s*treemap(-beta)?\s*$/.test(header)) return "treemap";
     return null;
   };
   for (let i = 0; i < lines.length; i++) {
@@ -476,6 +549,14 @@ function describeChart(spec, series = spec.series.filter((s) => !s.hidden).map((
     }
     return parts.join(" ");
   }
+  if (family === "sankey") {
+    if (!spec.links.length) return `${head} with no flows yet.`;
+    const total = spec.links.reduce((t, l) => t + l.value, 0);
+    const largest = [...spec.links].sort((a, b) => b.value - a.value)[0];
+    const sources = spec.sankeyNodes.filter((n) => !spec.links.some((l) => l.target === n));
+    const sinks = spec.sankeyNodes.filter((n) => !spec.links.some((l) => l.source === n));
+    return `${head} of ${spec.links.length} flows between ${spec.sankeyNodes.length} nodes, from ${sources.join(", ")} to ${sinks.join(", ")}. The largest flow is ${largest.source} \u2192 ${largest.target} (${fmt(largest.value)}); all flows add up to ${fmt(total)}.`;
+  }
   if (family === "parliament") {
     const s = spec.series.find((x) => !x.hidden);
     const seats = spec.categories.map((c, i) => ({ c, n: Math.max(0, Math.round(s.values[i] ?? 0)) }));
@@ -910,7 +991,7 @@ var ChartController = class {
    * to the categories; all-or-nothing like `update`.
    */
   setData(data, options = {}) {
-    const clear = (data.categories || data.series) && this.spec.tree.length ? { tree: [] } : {};
+    const clear = (data.categories || data.series) && (this.spec.tree.length || this.spec.links.length) ? { tree: [], links: [] } : {};
     return this.update({ ...data.categories ? { categories: data.categories } : {}, ...data.series ? { series: data.series } : {}, ...clear }, { label: options.label ?? "Edit chart data" });
   }
   /**
@@ -1153,7 +1234,7 @@ var ChartController = class {
       const old = byName.get(s.name);
       return { ...s, ...old?.color ? { color: old.color } : {}, ...old?.type ? { type: old.type } : {}, ...old ? { id: old.id } : {} };
     });
-    const { spec } = normalizeChartSpec({ ...this.spec, categories: data.categories, series, tree: [] });
+    const { spec } = normalizeChartSpec({ ...this.spec, categories: data.categories, series, tree: [], links: [] });
     this.commit("Import data", spec);
     if (data.issues.length) {
       this.issues = data.issues;
@@ -1170,8 +1251,12 @@ var ChartController = class {
   // -------------------------------------------------------------------------
   // Grouped data (tree)
   // -------------------------------------------------------------------------
-  /** A refusal while the data is a tree (cell edits would be overwritten by its totals), else null. */
+  /** A refusal while the data is a tree or flows (cell edits would be overwritten by their totals), else null. */
   treeLocked() {
+    if (this.spec.links.length)
+      return this.reject(
+        "This chart's data is flows (links): its categories are the nodes and its values how much passes through each. Change it with setLinks / the flow edits (set_chart_links, add_chart_link, update_chart_link, remove_chart_link), or replace it with new data."
+      );
     if (!this.spec.tree.length) return null;
     return this.reject(
       "This chart's data is grouped (a tree): its categories and values are the top-level groups and their totals. Change it with setTree / the tree node edits (set_chart_tree, add_chart_tree_node, update_chart_tree_node, remove_chart_tree_node), or replace it with new data."
@@ -1182,7 +1267,7 @@ var ChartController = class {
     const issues = [];
     const next = normalizeChartTree(tree, issues);
     if (issues.length) return this.reject(issues.map((i) => i.message).join(" "), issues);
-    return this.update({ tree: next }, { label: options.label ?? (next.length ? "Replace grouped data" : "Ungroup data") });
+    return this.update({ tree: next, links: [] }, { label: options.label ?? (next.length ? "Replace grouped data" : "Ungroup data") });
   }
   /**
    * Replaces the grouped data from rows of names and a value (group, …, item, value), as the
@@ -1208,7 +1293,7 @@ var ChartController = class {
     const next = chartTreeFromTable(rows, options, issues);
     if (issues.length) return this.reject(issues.map((i) => i.message).join(" "), issues);
     if (!next.length) return this.reject('There is no grouped data to import: expected rows of names followed by a value, e.g. "Europe,France,40".');
-    return this.update({ tree: next }, { label: "Import grouped data" });
+    return this.update({ tree: next, links: [] }, { label: "Import grouped data" });
   }
   nodeAt(path) {
     const node = findChartTreeNode(this.spec.tree, path);
@@ -1281,6 +1366,56 @@ var ChartController = class {
     return this.update({ tree }, { label: `Delete "${node.name}"` });
   }
   // -------------------------------------------------------------------------
+  // Flows (links)
+  // -------------------------------------------------------------------------
+  /**
+   * Replaces the flows (and, when given, the node order). An empty list goes back to the
+   * table, keeping how much passed through each node as values. One undo step, all-or-nothing.
+   */
+  setLinks(links, options = {}) {
+    const issues = [];
+    const next = normalizeChartLinks(links, issues);
+    if (issues.length) return this.reject(issues.map((i) => i.message).join(" "), issues);
+    const used = new Set(next.flatMap((l) => [l.source, l.target]));
+    const sankeyNodes = options.nodes ? [...options.nodes] : this.spec.sankeyNodes.filter((n) => used.has(n));
+    return this.update({ links: next, tree: [], sankeyNodes }, { label: options.label ?? (next.length ? "Replace flows" : "Remove flows") });
+  }
+  /** Replaces the data with flows from a table of source, target and value columns. */
+  importLinksTable(rows, options = {}) {
+    const raw = chartLinksFromTable(rows, options);
+    if (!raw.length) return this.reject('There are no flows to import: expected rows of source, target and value, e.g. "Website,Signup,120".');
+    return this.setLinks(raw, { label: "Import flows" });
+  }
+  badLink(index) {
+    const n = this.spec.links.length;
+    return fail(`There is no flow ${index}; ${n ? `expected 0 to ${n - 1}` : "the chart has none yet"}.`);
+  }
+  /** Adds a flow and returns its index. */
+  addLink(link) {
+    const result = this.setLinks([...this.spec.links, link], { label: `Add flow ${String(link?.source ?? "")} \u2192 ${String(link?.target ?? "")}` });
+    if (!result.ok) return result;
+    return { ok: true, index: this.spec.links.length - 1 };
+  }
+  /** Changes a flow's source, target, value or colour (`color: null` goes back to the default). */
+  updateLink(index, patch) {
+    const current = this.spec.links[index];
+    if (!current) return this.badLink(index);
+    const merged = { ...current, ...patch };
+    if (patch.color === null) delete merged.color;
+    return this.setLinks(
+      this.spec.links.map((l, i) => i === index ? merged : l),
+      { label: "Change flow" }
+    );
+  }
+  removeLink(index) {
+    const current = this.spec.links[index];
+    if (!current) return this.badLink(index);
+    return this.setLinks(
+      this.spec.links.filter((_, i) => i !== index),
+      { label: `Delete flow ${current.source} \u2192 ${current.target}` }
+    );
+  }
+  // -------------------------------------------------------------------------
   // Annotations
   // -------------------------------------------------------------------------
   /** Sets the note written under the chart ("" removes it). */
@@ -1675,6 +1810,9 @@ function updateLabel(patch) {
     parliamentLabel: "Edit seat caption",
     sunburstLabel: "Edit centre caption",
     tree: "Replace grouped data",
+    links: "Replace flows",
+    sankeyNodes: "Reorder nodes",
+    sankeyLinkColor: "Change flow colours",
     radarTicks: "Change radar rings",
     radarGraticule: "Change radar grid",
     legend: "Change legend",