@diagrammo/dgmo 0.46.0 → 0.48.0

package/dist/chunk-OJR3MQYV.js

@@ -0,0 +1,1458 @@
+import {
+  EXPORT_HEIGHT,
+  EXPORT_WIDTH,
+  createExportContainer,
+  finalizeSvgExport,
+  initD3Chart,
+  renderChartTitle,
+  resolveExportPalette
+} from "./chunk-U6EQI3U6.js";
+import {
+  computeLegendLayout
+} from "./chunk-YAA6IID3.js";
+import {
+  FONT_FAMILY
+} from "./chunk-6KFWC4CO.js";
+import {
+  LEGEND_DOT_R,
+  LEGEND_ENTRY_FONT_SIZE,
+  LEGEND_HEIGHT,
+  LEGEND_PILL_FONT_SIZE
+} from "./chunk-QOOUC2J5.js";
+import {
+  measureText
+} from "./chunk-WCT3NYCV.js";
+import {
+  getExtendedChartLegendGroups,
+  getSimpleChartLegendGroups,
+  parseChart,
+  parseExtendedChart
+} from "./chunk-P235SVAH.js";
+import {
+  getSegmentColors,
+  getSeriesColors,
+  hexToHSL,
+  hslToHex,
+  mix,
+  shapeFill
+} from "./chunk-P6T66CCZ.js";
+import {
+  tagAttrKey
+} from "./chunk-QLCCJEJI.js";
+
+// src/utils/legend-svg.ts
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function emitCapsule(capsule, palette, groupBg, pillBorder) {
+  const inner = [];
+  const pill = capsule.pill;
+  inner.push(
+    `<rect width="${capsule.width}" height="${capsule.height}" rx="${LEGEND_HEIGHT / 2}" fill="${esc(groupBg)}"/>`
+  );
+  inner.push(
+    `<rect x="${pill.x}" y="${pill.y}" width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="${esc(palette.bg)}"/>`,
+    `<rect x="${pill.x}" y="${pill.y}" width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="none" stroke="${esc(pillBorder)}" stroke-width="0.75"/>`
+  );
+  inner.push(
+    `<text x="${pill.x + pill.width / 2}" y="${LEGEND_HEIGHT / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2}" font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(palette.text)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(capsule.groupName)}</text>`
+  );
+  for (const entry of capsule.entries) {
+    const label = entry.displayValue ?? entry.value;
+    const hit = entry.width != null ? `<rect x="${entry.x}" y="${entry.y}" width="${entry.width}" height="${LEGEND_HEIGHT}" fill="transparent"/>` : "";
+    inner.push(
+      `<g data-legend-entry="${esc(entry.value.toLowerCase())}" data-series-name="${esc(entry.value)}" style="cursor:pointer">` + hit + `<circle cx="${entry.dotCx}" cy="${entry.dotCy}" r="${LEGEND_DOT_R}" fill="${esc(entry.color)}"/><text x="${entry.textX}" y="${entry.dotCy + LEGEND_ENTRY_FONT_SIZE / 2 - 1}" font-size="${LEGEND_ENTRY_FONT_SIZE}" fill="${esc(palette.textMuted)}" font-family="${esc(FONT_FAMILY)}">${esc(label)}</text></g>`
+    );
+  }
+  return `<g transform="translate(${capsule.x},${capsule.y})" data-legend-group="${esc(tagAttrKey(capsule.groupName))}" style="cursor:pointer">${inner.join("")}</g>`;
+}
+function emitPill(pill, palette, groupBg) {
+  return `<g transform="translate(${pill.x},${pill.y})" data-legend-group="${esc(tagAttrKey(pill.groupName))}" style="cursor:pointer"><rect width="${pill.width}" height="${pill.height}" rx="${pill.height / 2}" fill="${esc(groupBg)}"/><text x="${pill.width / 2}" y="${pill.height / 2 + LEGEND_PILL_FONT_SIZE / 2 - 2}" font-size="${LEGEND_PILL_FONT_SIZE}" font-weight="500" fill="${esc(palette.textMuted)}" text-anchor="middle" font-family="${esc(FONT_FAMILY)}">${esc(pill.groupName)}</text></g>`;
+}
+function renderLegendSvg(groups, options) {
+  if (groups.length === 0) return { svg: "", height: 0, width: 0 };
+  const { palette, isDark, containerWidth, activeGroup, className } = options;
+  const wrapWidth = containerWidth > 0 ? containerWidth : 1200;
+  const config = {
+    groups,
+    position: { placement: "top-center", titleRelation: "below-title" },
+    mode: "preview"
+  };
+  const state = { activeGroup: activeGroup ?? null };
+  const layout = computeLegendLayout(config, state, wrapWidth);
+  if (!layout.activeCapsule && layout.pills.length === 0) {
+    return { svg: "", height: 0, width: 0 };
+  }
+  const groupBg = isDark ? mix(palette.surface, palette.bg, 50) : mix(palette.surface, palette.bg, 30);
+  const pillBorder = mix(palette.textMuted, palette.bg, 50);
+  const parts = [];
+  let bottom = 0;
+  let left = Infinity;
+  let right = 0;
+  const track = (x, y, w, h) => {
+    left = Math.min(left, x);
+    right = Math.max(right, x + w);
+    bottom = Math.max(bottom, y + h);
+  };
+  if (layout.activeCapsule) {
+    const c = layout.activeCapsule;
+    parts.push(emitCapsule(c, palette, groupBg, pillBorder));
+    track(c.x, c.y, c.width, c.height);
+  }
+  for (const pill of layout.pills) {
+    parts.push(emitPill(pill, palette, groupBg));
+    track(pill.x, pill.y, pill.width, pill.height);
+  }
+  const classAttr = className ? ` class="${esc(className)}"` : "";
+  const activeAttr = activeGroup ? ` data-legend-active="${esc(tagAttrKey(activeGroup))}"` : "";
+  const svg = `<g${classAttr}${activeAttr}>${parts.join("")}</g>`;
+  return {
+    svg,
+    height: bottom,
+    width: right - (left === Infinity ? 0 : left)
+  };
+}
+function renderLegendSvgFromConfig(config, state, palette, containerWidth) {
+  return renderLegendSvg(config.groups, {
+    palette: {
+      bg: palette.bg,
+      surface: palette.surface,
+      text: palette.text,
+      textMuted: palette.textMuted
+    },
+    isDark: palette.isDark,
+    containerWidth,
+    activeGroup: state.activeGroup
+  });
+}
+
+// src/charts-d3/shared.ts
+var AXIS_LABEL_FONT = 13;
+var TICK_FONT = 12;
+var VALUE_FONT = 12;
+function fmtNum(n) {
+  if (!isFinite(n)) return "";
+  if (Math.abs(n) >= 1e3) return n.toLocaleString("en-US");
+  return String(Math.round(n * 100) / 100);
+}
+function reserveHeader(svg, chart, colors, palette, isDark, hasTitle, width) {
+  return injectLegendGroups(
+    svg,
+    getSimpleChartLegendGroups(chart, colors),
+    palette,
+    isDark,
+    hasTitle,
+    width
+  );
+}
+function injectLegendGroups(svg, groups, palette, isDark, hasTitle, width) {
+  const titleH = hasTitle ? 40 : 0;
+  if (groups.length === 0) return hasTitle ? titleH + 12 : 24;
+  const legendY = 8 + titleH;
+  const { svg: legendSvg, height: legendH } = renderLegendSvg(groups, {
+    palette,
+    isDark,
+    containerWidth: width,
+    activeGroup: groups[0].name,
+    className: "chart-legend"
+  });
+  const node = svg.node();
+  if (node && legendSvg) {
+    node.insertAdjacentHTML(
+      "beforeend",
+      `<g transform="translate(0,${legendY})">${legendSvg}</g>`
+    );
+  }
+  return legendY + legendH + 14;
+}
+function computeLeftMargin(yLabel, leftLabels) {
+  const pad = 16;
+  const titleBand = yLabel ? 22 : 0;
+  const labelW = leftLabels.length ? Math.max(...leftLabels.map((t) => measureText(t, TICK_FONT))) : 0;
+  return Math.max(56, pad + titleBand + labelW + 14);
+}
+function drawXAxisTitle(svg, label, cx, y, textColor) {
+  if (!label) return;
+  svg.append("text").attr("x", cx).attr("y", y).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", AXIS_LABEL_FONT).attr("font-family", FONT_FAMILY).attr("font-weight", 600).text(label);
+}
+function drawYAxisTitle(svg, label, cy, x, textColor) {
+  if (!label) return;
+  svg.append("text").attr("transform", `translate(${x},${cy}) rotate(-90)`).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", AXIS_LABEL_FONT).attr("font-family", FONT_FAMILY).attr("font-weight", 600).text(label);
+}
+function tagDatum(sel, o) {
+  const cls = (sel.attr("class") ?? "").split(/\s+/).filter(Boolean);
+  if (!cls.includes("dgmo-datum")) cls.push("dgmo-datum");
+  sel.attr("class", cls.join(" "));
+  if (o.line != null) sel.attr("data-line-number", o.line);
+  if (o.key != null) sel.attr("data-emph-key", o.key);
+  if (o.name != null) sel.attr("data-name", o.name);
+  if (o.value != null) sel.attr("data-value", String(o.value));
+  if (o.color != null) sel.attr("data-color", o.color);
+  return sel;
+}
+function drawValueLabel(svg, text, x, y, color, anchor = "middle") {
+  svg.append("text").attr("x", x).attr("y", y).attr("text-anchor", anchor).attr("fill", color).attr("font-size", VALUE_FONT).attr("font-family", FONT_FAMILY).text(text);
+}
+
+// src/charts-d3/bar.ts
+import { scaleBand, scaleLinear } from "d3-scale";
+import { max as d3max } from "d3-array";
+function seriesValues(pt, seriesCount) {
+  const out = [pt.value];
+  for (let s = 1; s < seriesCount; s++) out.push(pt.extraValues?.[s - 1] ?? 0);
+  return out;
+}
+function renderBar(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, hasTitle) {
+  const data = chart.data;
+  const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
+  const stacked = chart.barLayout === "stack";
+  const grouped = chart.barLayout === "group";
+  const seriesCount = stacked || grouped ? Math.max(
+    1,
+    seriesNames.length,
+    1 + Math.max(0, ...data.map((d) => d.extraValues?.length ?? 0))
+  ) : 1;
+  const horizontal = chart.orientation === "horizontal";
+  const multiSeries = seriesCount > 1;
+  const solid = chart.solidFill === true;
+  const colorFor = (seriesIdx, catIdx, override) => {
+    if (override) return override;
+    return multiSeries ? colors[seriesIdx % colors.length] : colors[catIdx % colors.length];
+  };
+  const fillOf = (c) => solid ? c : shapeFill(palette, c, isDark);
+  const top = reserveHeader(
+    svg,
+    chart,
+    colors,
+    palette,
+    isDark,
+    hasTitle,
+    width
+  );
+  const perCat = data.map((d) => seriesValues(d, seriesCount));
+  const maxVal = stacked ? d3max(perCat, (vals) => vals.reduce((a, b) => a + b, 0)) ?? 0 : d3max(perCat, (vals) => d3max(vals) ?? 0) ?? 0;
+  const niceMax = maxVal === 0 ? 1 : maxVal;
+  const leftLabels = horizontal ? data.map((d) => d.label) : [fmtNum(niceMax), fmtNum(niceMax / 2)];
+  const m = {
+    top: top + 8,
+    right: 32,
+    bottom: 64,
+    left: computeLeftMargin(chart.ylabel, leftLabels)
+  };
+  const plotW = width - m.left - m.right;
+  const plotH = height - m.top - m.bottom;
+  const horiz = horizontal;
+  const catRange = horiz ? [m.top, m.top + plotH] : [m.left, m.left + plotW];
+  const cat = scaleBand().domain(data.map((d) => d.label)).range(catRange).padding(0.3);
+  const valRange = horiz ? [m.left, m.left + plotW] : [m.top + plotH, m.top];
+  const val = scaleLinear().domain([0, niceMax]).nice().range(valRange);
+  for (const t of val.ticks(6)) {
+    if (horiz) {
+      const x = val(t);
+      svg.append("line").attr("x1", x).attr("x2", x).attr("y1", m.top).attr("y2", m.top + plotH).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.25);
+      svg.append("text").attr("x", x).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+    } else {
+      const y = val(t);
+      svg.append("line").attr("x1", m.left).attr("x2", m.left + plotW).attr("y1", y).attr("y2", y).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.25);
+      svg.append("text").attr("x", m.left - 10).attr("y", y + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+    }
+  }
+  for (const d of data) {
+    const c = (cat(d.label) ?? 0) + cat.bandwidth() / 2;
+    if (horiz) {
+      svg.append("text").attr("x", m.left - 10).attr("y", c + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(d.label);
+    } else {
+      svg.append("text").attr("x", c).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(d.label);
+    }
+  }
+  const zero = val(0);
+  const inner = stacked ? null : scaleBand().domain(seriesNames.map((_, i) => i)).range([0, cat.bandwidth()]).padding(0.12);
+  data.forEach((d, ci) => {
+    const base = cat(d.label) ?? 0;
+    const vals = seriesValues(d, seriesCount);
+    let acc = 0;
+    vals.forEach((v, s) => {
+      const stroke = colorFor(s, ci, seriesCount === 1 ? d.color : void 0);
+      const fill = fillOf(stroke);
+      const sName = seriesNames[s] ?? "";
+      const tag = {
+        line: d.lineNumber,
+        key: multiSeries ? sName : d.label,
+        name: multiSeries ? `${d.label} \xB7 ${sName}` : d.label,
+        value: v,
+        color: stroke
+      };
+      if (stacked) {
+        if (horiz) {
+          const x0 = val(acc);
+          const x1 = val(acc + v);
+          rect(
+            svg,
+            Math.min(x0, x1),
+            base,
+            Math.abs(x1 - x0),
+            cat.bandwidth(),
+            fill,
+            stroke,
+            tag
+          );
+          if (Math.abs(x1 - x0) > 26)
+            drawValueLabel(
+              svg,
+              fmtNum(v),
+              (x0 + x1) / 2,
+              base + cat.bandwidth() / 2 + 4,
+              textColor
+            );
+        } else {
+          const y0 = val(acc);
+          const y1 = val(acc + v);
+          rect(
+            svg,
+            base,
+            Math.min(y0, y1),
+            cat.bandwidth(),
+            Math.abs(y1 - y0),
+            fill,
+            stroke,
+            tag
+          );
+          if (Math.abs(y1 - y0) > 18)
+            drawValueLabel(
+              svg,
+              fmtNum(v),
+              base + cat.bandwidth() / 2,
+              (y0 + y1) / 2 + 4,
+              textColor
+            );
+        }
+        acc += v;
+      } else {
+        const off = inner(s) ?? 0;
+        const bw = inner.bandwidth();
+        if (horiz) {
+          const x1 = val(v);
+          rect(
+            svg,
+            Math.min(zero, x1),
+            base + off,
+            Math.abs(x1 - zero),
+            bw,
+            fill,
+            stroke,
+            tag
+          );
+          drawValueLabel(
+            svg,
+            fmtNum(v),
+            x1 + 6,
+            base + off + bw / 2 + 4,
+            textColor,
+            "start"
+          );
+        } else {
+          const y1 = val(v);
+          rect(
+            svg,
+            base + off,
+            Math.min(zero, y1),
+            bw,
+            Math.abs(zero - y1),
+            fill,
+            stroke,
+            tag
+          );
+          drawValueLabel(
+            svg,
+            fmtNum(v),
+            base + off + bw / 2,
+            y1 - 6,
+            textColor
+          );
+        }
+      }
+    });
+  });
+  drawXAxisTitle(
+    svg,
+    chart.xlabel,
+    m.left + plotW / 2,
+    m.top + plotH + 46,
+    textColor
+  );
+  drawYAxisTitle(svg, chart.ylabel, m.top + plotH / 2, 20, textColor);
+}
+function rect(svg, x, y, w, h, fill, stroke, tag) {
+  const r = svg.append("rect").attr("x", x).attr("y", y).attr("width", w).attr("height", h).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.5);
+  tagDatum(r, tag);
+}
+
+// src/charts-d3/line.ts
+import { scalePoint, scaleLinear as scaleLinear2 } from "d3-scale";
+import { line as d3line, area as d3area } from "d3-shape";
+function seriesValue(pt, s) {
+  return s === 0 ? pt.value : pt.extraValues?.[s - 1] ?? 0;
+}
+function renderLine(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, bgColor, hasTitle) {
+  const data = chart.data;
+  const isArea = chart.fill === true;
+  const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
+  const seriesCount = Math.max(
+    1,
+    seriesNames.length,
+    1 + Math.max(0, ...data.map((d) => d.extraValues?.length ?? 0))
+  );
+  const seriesColor = (s) => chart.seriesNameColors?.[s] ?? colors[s % colors.length];
+  const axisOf = (s) => chart.seriesAxes?.[s] ?? "left";
+  const dual = (chart.seriesAxes ?? []).includes("right");
+  const soleAxisColor = (side) => {
+    const owners = [];
+    for (let s = 0; s < seriesCount; s++)
+      if (axisOf(s) === side) owners.push(s);
+    return owners.length === 1 ? seriesColor(owners[0]) : void 0;
+  };
+  const top = reserveHeader(
+    svg,
+    chart,
+    colors,
+    palette,
+    isDark,
+    hasTitle,
+    width
+  );
+  const extentFor = (side) => {
+    let lo = Infinity;
+    let hi = -Infinity;
+    for (const d of data)
+      for (let s = 0; s < seriesCount; s++)
+        if (axisOf(s) === side) {
+          const v = seriesValue(d, s);
+          lo = Math.min(lo, v);
+          hi = Math.max(hi, v);
+        }
+    if (!isFinite(lo)) return [0, 1];
+    if (lo > 0) lo = 0;
+    if (lo === hi) hi = lo + 1;
+    return [lo, hi];
+  };
+  const [loL, hiL] = extentFor("left");
+  const [loR, hiR] = dual ? extentFor("right") : [0, 1];
+  const m = {
+    top: top + 8,
+    right: dual ? computeLeftMargin(chart.yrlabel, [fmtNum(hiR), fmtNum(loR)]) : 32,
+    bottom: 64,
+    left: computeLeftMargin(chart.ylabel, [fmtNum(hiL), fmtNum(loL)])
+  };
+  const plotW = width - m.left - m.right;
+  const plotH = height - m.top - m.bottom;
+  const x = scalePoint().domain(data.map((d) => d.label)).range([m.left, m.left + plotW]).padding(0.5);
+  const yL = scaleLinear2().domain([loL, hiL]).nice().range([m.top + plotH, m.top]);
+  const yR = dual ? scaleLinear2().domain([loR, hiR]).nice().range([m.top + plotH, m.top]) : null;
+  const yFor = (s) => dual && axisOf(s) === "right" && yR ? yR : yL;
+  const leftTint = dual ? soleAxisColor("left") : void 0;
+  const rightTint = soleAxisColor("right");
+  if (chart.eras?.length) {
+    chart.eras.forEach((era, i) => {
+      const xs = x(era.start);
+      const xe = x(era.end);
+      if (xs == null || xe == null) return;
+      const fill = era.color ?? colors[i % colors.length];
+      svg.append("rect").attr("x", Math.min(xs, xe)).attr("y", m.top).attr("width", Math.abs(xe - xs)).attr("height", plotH).attr("fill", mix(fill, bgColor, 12));
+      svg.append("text").attr("x", (xs + xe) / 2).attr("y", m.top + 14).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).attr("opacity", 0.8).text(era.label);
+    });
+  }
+  for (const t of yL.ticks(6)) {
+    const yy = yL(t);
+    svg.append("line").attr("x1", m.left).attr("x2", m.left + plotW).attr("y1", yy).attr("y2", yy).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.25);
+    svg.append("text").attr("class", "dgmo-tick").attr("x", m.left - 10).attr("y", yy + 4).attr("text-anchor", "end").attr("fill", leftTint ?? textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+  }
+  if (dual && yR) {
+    for (const t of yR.ticks(6)) {
+      svg.append("text").attr("class", "dgmo-tick").attr("x", m.left + plotW + 10).attr("y", yR(t) + 4).attr("text-anchor", "start").attr("fill", rightTint ?? textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+    }
+  }
+  for (const d of data) {
+    svg.append("text").attr("class", "dgmo-tick").attr("x", x(d.label) ?? 0).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(d.label);
+  }
+  svg.append("rect").attr("class", "dgmo-plot-rect").attr("x", m.left).attr("y", m.top).attr("width", plotW).attr("height", plotH).attr("fill", "transparent");
+  for (let s = 0; s < seriesCount; s++) {
+    const color = seriesColor(s);
+    const yy = yFor(s);
+    const name = seriesNames[s] ?? `Series ${s + 1}`;
+    const pts = data.map((d, i) => ({
+      label: d.label,
+      v: seriesValue(d, s),
+      xIndex: i,
+      lineNumber: d.lineNumber
+    }));
+    const g = svg.append("g").attr("class", "dgmo-series").attr("data-series-index", s).attr("data-series-name", name).attr("data-axis", axisOf(s)).attr("data-color", color);
+    const seriesLine = chart.seriesNameLineNumbers?.[s];
+    if (seriesLine !== void 0) g.attr("data-line-number", seriesLine);
+    if (isArea) {
+      const areaGen = d3area().x((p) => x(p.label) ?? 0).y0(yy(Math.max(yy.domain()[0], 0))).y1((p) => yy(p.v));
+      g.append("path").attr("class", "dgmo-series-area").attr("d", areaGen(pts) ?? "").attr("fill", shapeFill(palette, color, isDark)).attr("stroke", "none");
+    }
+    const lineGen = d3line().x((p) => x(p.label) ?? 0).y((p) => yy(p.v));
+    g.append("path").attr("class", "dgmo-series-line").attr("d", lineGen(pts) ?? "").attr("fill", "none").attr("stroke", color).attr("stroke-width", 2.5).attr("stroke-linejoin", "round").attr("stroke-linecap", "round");
+    const labelColor = mix(color, textColor, 60);
+    for (const p of pts) {
+      g.append("circle").attr("class", "dgmo-pt").attr("data-series-index", s).attr("data-series-name", name).attr("data-color", color).attr("data-x-index", p.xIndex).attr("data-x-label", p.label).attr("data-value", p.v).attr("data-line-number", p.lineNumber).attr("cx", x(p.label) ?? 0).attr("cy", yy(p.v)).attr("r", 3.5).attr("fill", bgColor).attr("stroke", color).attr("stroke-width", 2);
+      if (!chart.noValue) {
+        drawValueLabel(
+          svg,
+          fmtNum(p.v),
+          x(p.label) ?? 0,
+          yy(p.v) - 10,
+          labelColor
+        );
+      }
+    }
+  }
+  drawXAxisTitle(
+    svg,
+    chart.xlabel,
+    m.left + plotW / 2,
+    m.top + plotH + 46,
+    textColor
+  );
+  drawYAxisTitle(
+    svg,
+    chart.ylabel,
+    m.top + plotH / 2,
+    20,
+    leftTint ?? textColor
+  );
+  if (dual) {
+    drawYAxisTitle(
+      svg,
+      chart.yrlabel,
+      m.top + plotH / 2,
+      width - 18,
+      rightTint ?? textColor
+    );
+    svg.append("rect").attr("class", "dgmo-axis-legend").attr("data-axis-legend", "left").attr("x", 0).attr("y", m.top).attr("width", m.left).attr("height", plotH).attr("fill", "transparent").attr("style", "cursor:pointer");
+    svg.append("rect").attr("class", "dgmo-axis-legend").attr("data-axis-legend", "right").attr("x", m.left + plotW).attr("y", m.top).attr("width", m.right).attr("height", plotH).attr("fill", "transparent").attr("style", "cursor:pointer");
+  }
+}
+
+// src/charts-d3/pie.ts
+import { pie as d3pie, arc as d3arc } from "d3-shape";
+var LABEL_FONT = 14;
+function renderPie(svg, chart, width, height, palette, isDark, textColor, topInset) {
+  const data = chart.data.filter((d) => d.value > 0);
+  if (data.length === 0) return;
+  const holeRatio = chart.hole;
+  const hasHole = holeRatio !== void 0;
+  const solid = chart.solidFill === true;
+  const total = data.reduce((a, d) => a + d.value, 0);
+  const cx = width / 2;
+  const top = topInset + 12;
+  const cy = top + (height - top) / 2;
+  const radius = Math.min(width / 2 - 220, (height - top) / 2 - 40);
+  const segColors = getSegmentColors(palette, data.length);
+  const strokeFor = (i, override) => override ?? segColors[i % segColors.length];
+  const arcs = d3pie().sort(null).value((d) => d.value)(data.map((d) => ({ value: d.value })));
+  const arcGen = d3arc().innerRadius(hasHole ? radius * holeRatio : 0).outerRadius(radius);
+  const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
+  arcs.forEach((a, i) => {
+    const stroke = strokeFor(i, data[i].color);
+    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
+    const pct = Math.round(data[i].value / total * 100);
+    const slice = g.append("path").attr("d", arcGen(a) ?? "").attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 1.5);
+    tagDatum(slice, {
+      line: data[i].lineNumber,
+      key: data[i].label,
+      name: data[i].label,
+      value: `${fmtNum(data[i].value)} (${pct}%)`,
+      color: stroke
+    });
+    const mid = (a.startAngle + a.endAngle) / 2 - Math.PI / 2;
+    const rightSide = Math.cos(mid) >= 0;
+    const x0 = Math.cos(mid) * radius;
+    const y0 = Math.sin(mid) * radius;
+    const x1 = Math.cos(mid) * (radius + 16);
+    const y1 = Math.sin(mid) * (radius + 16);
+    const x2 = x1 + (rightSide ? 28 : -28);
+    const nm = chart.noName ? "" : data[i].label;
+    const tail = [
+      chart.noValue ? "" : fmtNum(data[i].value),
+      chart.noPercent ? "" : `(${pct}%)`
+    ].filter(Boolean).join(" ");
+    const label = [nm, tail].filter(Boolean).join(" \u2014 ");
+    if (label) {
+      g.append("polyline").attr("points", `${x0},${y0} ${x1},${y1} ${x2},${y1}`).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", 1);
+      g.append("text").attr("x", x2 + (rightSide ? 4 : -4)).attr("y", y1 + 4).attr("text-anchor", rightSide ? "start" : "end").attr("fill", textColor).attr("font-size", LABEL_FONT).attr("font-family", FONT_FAMILY).text(label);
+    }
+  });
+  if (hasHole && !chart.noCenterTotal) {
+    g.append("text").attr("text-anchor", "middle").attr("y", 8).attr("fill", textColor).attr("font-size", 26).attr("font-weight", 700).attr("font-family", FONT_FAMILY).text(fmtNum(total));
+  }
+}
+
+// src/charts-d3/radar.ts
+var RINGS = 5;
+function seriesValue2(d, s) {
+  return s === 0 ? d.value : d.extraValues?.[s - 1] ?? 0;
+}
+function renderRadar(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, topInset) {
+  const data = chart.data;
+  const n = data.length;
+  if (n < 3) return;
+  const solid = chart.solidFill === true;
+  const seriesNames = chart.seriesNames?.length ? chart.seriesNames : [chart.series ?? ""];
+  const seriesCount = Math.max(
+    1,
+    seriesNames.length,
+    1 + Math.max(0, ...data.map((d) => d.extraValues?.length ?? 0))
+  );
+  const multi = seriesCount > 1;
+  const seriesColor = (s) => multi ? chart.seriesNameColors?.[s] ?? colors[s % colors.length] : chart.color ?? chart.seriesNameColors?.[0] ?? palette.primary;
+  const allValues = [];
+  for (const d of data)
+    for (let s = 0; s < seriesCount; s++) allValues.push(seriesValue2(d, s));
+  const maxValue = Math.max(...allValues) * 1.15 || 1;
+  const cx = width / 2;
+  const top = topInset + 8;
+  const cy = top + (height - top) / 2;
+  const radius = Math.min(width / 2 - 130, (height - top) / 2 - 50);
+  const angle = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
+  const pt = (i, r) => [
+    cx + Math.cos(angle(i)) * r,
+    cy + Math.sin(angle(i)) * r
+  ];
+  for (let l = 1; l <= RINGS; l++) {
+    const r = radius * l / RINGS;
+    const poly = data.map((_, i) => pt(i, r).join(",")).join(" ");
+    svg.append("polygon").attr("points", poly).attr("fill", "none").attr("stroke", mutedColor).attr("stroke-opacity", 0.4);
+  }
+  data.forEach((_, i) => {
+    const [x, y] = pt(i, radius);
+    svg.append("line").attr("x1", cx).attr("y1", cy).attr("x2", x).attr("y2", y).attr("stroke", mutedColor).attr("stroke-opacity", 0.4);
+    const [lx, ly] = pt(i, radius + 18);
+    const c = Math.cos(angle(i));
+    svg.append("text").attr("x", lx).attr("y", ly + 4).attr(
+      "text-anchor",
+      Math.abs(c) < 0.3 ? "middle" : c > 0 ? "start" : "end"
+    ).attr("fill", textColor).attr("font-size", 14).attr("font-family", FONT_FAMILY).text(data[i].label);
+  });
+  for (let s = 0; s < seriesCount; s++) {
+    const color = seriesColor(s);
+    const name = seriesNames[s] ?? `Series ${s + 1}`;
+    const g = svg.append("g").attr("class", "dgmo-series").attr("data-series-index", s).attr("data-series-name", name).attr("data-color", color);
+    const seriesLine = chart.seriesNameLineNumbers?.[s];
+    if (seriesLine !== void 0) g.attr("data-line-number", seriesLine);
+    const poly = data.map((d, i) => pt(i, seriesValue2(d, s) / maxValue * radius).join(",")).join(" ");
+    g.append("polygon").attr("points", poly).attr("fill", solid || multi ? color : shapeFill(palette, color, isDark)).attr("fill-opacity", solid ? 0.6 : multi ? 0.2 : 1).attr("stroke", color).attr("stroke-width", 2);
+    data.forEach((d, i) => {
+      const v = seriesValue2(d, s);
+      const [x, y] = pt(i, v / maxValue * radius);
+      const vtx = g.append("circle").attr("cx", x).attr("cy", y).attr("r", 4).attr("fill", color);
+      tagDatum(vtx, {
+        line: d.lineNumber,
+        key: multi ? `${name}\0${d.label}` : d.label,
+        name: multi ? `${name} \u2014 ${d.label}` : d.label,
+        value: fmtNum(v),
+        color
+      });
+      if (!chart.noValue) {
+        g.append("text").attr("x", x).attr("y", y - 8).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+      }
+    });
+  }
+}
+
+// src/charts-d3/polar.ts
+import { arc as d3arc2 } from "d3-shape";
+function renderPolarArea(svg, chart, width, height, palette, isDark, textColor, topInset) {
+  const data = chart.data.filter((d) => d.value > 0);
+  const n = data.length;
+  if (n === 0) return;
+  const solid = chart.solidFill === true;
+  const total = data.reduce((a, d) => a + d.value, 0);
+  const maxValue = Math.max(...data.map((d) => d.value)) || 1;
+  const cx = width / 2;
+  const top = topInset + 8;
+  const cy = top + (height - top) / 2;
+  const outerR = Math.min(width / 2 - 200, (height - top) / 2 - 40);
+  const innerR = outerR * 0.14;
+  const segColors = getSegmentColors(palette, n);
+  const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
+  const seg = 2 * Math.PI / n;
+  data.forEach((d, i) => {
+    const stroke = d.color ?? segColors[i % segColors.length];
+    const r = innerR + d.value / maxValue * (outerR - innerR);
+    const a0 = i * seg;
+    const a1 = a0 + seg;
+    const arcGen = d3arc2().innerRadius(innerR).outerRadius(r).startAngle(a0).endAngle(a1);
+    const pct = Math.round(d.value / total * 100);
+    const sector = g.append("path").attr("d", arcGen({}) ?? "").attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("stroke", stroke).attr("stroke-width", 2);
+    tagDatum(sector, {
+      line: d.lineNumber,
+      key: d.label,
+      name: d.label,
+      value: `${fmtNum(d.value)} (${pct}%)`,
+      color: stroke
+    });
+    const mid = a0 + seg / 2 - Math.PI / 2;
+    const rightSide = Math.cos(mid) >= 0;
+    const lx = Math.cos(mid) * (outerR + 14);
+    const ly = Math.sin(mid) * (outerR + 14);
+    const nm = chart.noName ? "" : d.label;
+    const tail = [
+      chart.noValue ? "" : fmtNum(d.value),
+      chart.noPercent ? "" : `(${pct}%)`
+    ].filter(Boolean).join(" ");
+    const label = [nm, tail].filter(Boolean).join(" \u2014 ");
+    if (label) {
+      g.append("text").attr("x", lx + (rightSide ? 4 : -4)).attr("y", ly + 4).attr("text-anchor", rightSide ? "start" : "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(label);
+    }
+  });
+}
+
+// src/charts-d3/funnel.ts
+function renderFunnel(svg, chart, width, height, colors, palette, isDark, textColor, topInset) {
+  const sorted = [...chart.data].sort((a, b) => b.value - a.value);
+  const n = sorted.length;
+  if (n === 0) return;
+  const solid = chart.solidFill === true;
+  const plotLeft = width * 0.2;
+  const plotW = width * 0.6;
+  const cx = width / 2;
+  const top = topInset + 8;
+  const bottom = height - 30;
+  const H = bottom - top;
+  const bandH = H / n;
+  const maxValue = sorted[0].value || 1;
+  const minW = plotW * 0.08;
+  const scaleW = (v) => Math.max(minW, v / maxValue * plotW);
+  sorted.forEach((d, i) => {
+    const stroke = d.color ?? colors[chart.data.indexOf(d) % colors.length];
+    const fill = solid ? stroke : shapeFill(palette, stroke, isDark);
+    const topW = scaleW(d.value);
+    const botW = i < n - 1 ? scaleW(sorted[i + 1].value) : minW;
+    const y0 = top + i * bandH;
+    const y1 = y0 + bandH;
+    const seg = svg.append("polygon").attr(
+      "points",
+      `${cx - topW / 2},${y0} ${cx + topW / 2},${y0} ${cx + botW / 2},${y1} ${cx - botW / 2},${y1}`
+    ).attr("fill", fill).attr("stroke", stroke).attr("stroke-width", 2);
+    tagDatum(seg, {
+      line: d.lineNumber,
+      key: d.label,
+      name: d.label,
+      value: fmtNum(d.value),
+      color: stroke
+    });
+    const yMid = (y0 + y1) / 2;
+    if (!chart.noName) {
+      svg.append("line").attr("x1", plotLeft - 8).attr("y1", yMid).attr("x2", cx - topW / 2).attr("y2", yMid).attr("stroke", textColor).attr("stroke-opacity", 0.3);
+      svg.append("text").attr("x", plotLeft - 12).attr("y", yMid + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(d.label);
+    }
+    if (!chart.noValue) {
+      svg.append("line").attr("x1", cx + topW / 2).attr("y1", yMid).attr("x2", plotLeft + plotW + 8).attr("y2", yMid).attr("stroke", textColor).attr("stroke-opacity", 0.3);
+      svg.append("text").attr("x", plotLeft + plotW + 12).attr("y", yMid + 4).attr("text-anchor", "start").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(fmtNum(d.value));
+    }
+  });
+}
+
+// src/charts-d3/heatmap.ts
+function renderHeatmap(svg, chart, width, height, palette, isDark, textColor, bgColor, topInset) {
+  const rows = chart.heatmapRows ?? [];
+  if (rows.length === 0) return;
+  const ncols = Math.max(
+    chart.columns?.length ?? 0,
+    ...rows.map((r) => r.values.length)
+  );
+  const nrows = rows.length;
+  const cols = chart.columns ?? [];
+  let minValue = Infinity;
+  let maxValue = -Infinity;
+  for (const r of rows)
+    for (const v of r.values) {
+      minValue = Math.min(minValue, v);
+      maxValue = Math.max(maxValue, v);
+    }
+  const solid = chart.solidFill === true;
+  const gradientStops = [
+    shapeFill(palette, palette.primary, isDark, { solid }),
+    shapeFill(palette, palette.colors.cyan, isDark, { solid }),
+    shapeFill(palette, palette.colors.yellow, isDark, { solid }),
+    shapeFill(palette, palette.colors.orange, isDark, { solid })
+  ];
+  const gradientAt = (t) => {
+    const tt = Math.max(0, Math.min(1, t));
+    const seg = 1 / (gradientStops.length - 1);
+    const idx = Math.min(gradientStops.length - 2, Math.floor(tt / seg));
+    const localT = (tt - idx * seg) / seg;
+    return mix(gradientStops[idx + 1], gradientStops[idx], localT * 100);
+  };
+  const labelTint = (cellColor) => {
+    const { h, s } = hexToHSL(cellColor);
+    const targetS = Math.min(75, Math.max(s + 25, 50));
+    const targetL = isDark ? 72 : 30;
+    return hslToHex(h, targetS, targetL);
+  };
+  const rowLabelW = Math.max(0, ...rows.map((r) => measureText(r.label, 13))) + 16;
+  const left = 20 + rowLabelW;
+  const top = topInset + 28;
+  const right = 24;
+  const bottom = 24;
+  const plotW = width - left - right;
+  const plotH = height - top - bottom;
+  const cw = plotW / ncols;
+  const ch = plotH / nrows;
+  const cellFont = Math.max(11, Math.min(18, Math.min(cw, ch) * 0.28));
+  const rotate = cols.some((c) => measureText(c, 12) > cw * 0.85);
+  cols.forEach((c, ci) => {
+    const x = left + ci * cw + cw / 2;
+    const t = svg.append("text").attr("fill", textColor).attr("font-size", 12).attr("font-family", FONT_FAMILY).text(c);
+    if (rotate) {
+      t.attr("transform", `translate(${x},${top - 8}) rotate(-40)`).attr(
+        "text-anchor",
+        "start"
+      );
+    } else {
+      t.attr("x", x).attr("y", top - 8).attr("text-anchor", "middle");
+    }
+  });
+  rows.forEach((row, ri) => {
+    svg.append("text").attr("x", left - 10).attr("y", top + ri * ch + ch / 2 + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(row.label);
+    row.values.forEach((v, ci) => {
+      const t = maxValue === minValue ? 0.5 : (v - minValue) / (maxValue - minValue);
+      const cell = gradientAt(t);
+      const colLabel = cols[ci] ?? `Col ${ci + 1}`;
+      const r = svg.append("rect").attr("x", left + ci * cw).attr("y", top + ri * ch).attr("width", cw).attr("height", ch).attr("fill", cell).attr("stroke", bgColor).attr("stroke-width", 2);
+      tagDatum(r, {
+        line: row.lineNumber,
+        key: row.label,
+        name: `${row.label} \xB7 ${colLabel}`,
+        value: fmtNum(v),
+        color: cell
+      });
+      if (!chart.noValue) {
+        svg.append("text").attr("x", left + ci * cw + cw / 2).attr("y", top + ri * ch + ch / 2 + cellFont / 3).attr("text-anchor", "middle").attr("fill", labelTint(cell)).attr("font-size", cellFont).attr("font-weight", 600).attr("font-family", FONT_FAMILY).text(fmtNum(v));
+      }
+    });
+  });
+}
+
+// src/charts-d3/scatter.ts
+import { scaleLinear as scaleLinear3 } from "d3-scale";
+var FILL_OPACITY = 0.65;
+var DEFAULT_SIZE = 15;
+function renderScatter(svg, chart, width, height, colors, palette, isDark, textColor, mutedColor, topInset) {
+  const points = chart.scatterPoints ?? [];
+  if (points.length === 0) return;
+  const solid = chart.solidFill === true;
+  const hasSize = points.some((p) => p.size !== void 0);
+  const categories = [
+    ...new Set(points.map((p) => p.category).filter(Boolean))
+  ];
+  const catColor = (cat, i) => chart.categoryColors?.[cat] ?? colors[i % colors.length];
+  const catIndex = new Map(categories.map((c, i) => [c, i]));
+  const xs = points.map((p) => p.x);
+  const ys = points.map((p) => p.y);
+  const xMin = Math.min(...xs);
+  const xMax = Math.max(...xs);
+  const yMin = Math.min(...ys);
+  const yMax = Math.max(...ys);
+  const xPad = (xMax - xMin) * 0.1 || 1;
+  const yPad = (yMax - yMin) * 0.1 || 1;
+  const m = {
+    top: topInset + 8,
+    right: 32,
+    bottom: 64,
+    left: computeLeftMargin(chart.ylabel, [
+      fmtNum(Math.ceil(yMax + yPad)),
+      fmtNum(Math.floor(yMin - yPad))
+    ])
+  };
+  const plotW = width - m.left - m.right;
+  const plotH = height - m.top - m.bottom;
+  const x = scaleLinear3().domain([Math.floor(xMin - xPad), Math.ceil(xMax + xPad)]).range([m.left, m.left + plotW]);
+  const y = scaleLinear3().domain([Math.floor(yMin - yPad), Math.ceil(yMax + yPad)]).range([m.top + plotH, m.top]);
+  svg.append("rect").attr("class", "dgmo-plot-rect").attr("x", m.left).attr("y", m.top).attr("width", plotW).attr("height", plotH).attr("fill", "transparent").attr("pointer-events", "none");
+  for (const t of y.ticks(6)) {
+    const yy = y(t);
+    svg.append("line").attr("x1", m.left).attr("x2", m.left + plotW).attr("y1", yy).attr("y2", yy).attr("stroke", mutedColor).attr("stroke-opacity", 0.25);
+    svg.append("text").attr("class", "dgmo-tick").attr("x", m.left - 10).attr("y", yy + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+  }
+  for (const t of x.ticks(6)) {
+    const xx = x(t);
+    svg.append("line").attr("x1", xx).attr("x2", xx).attr("y1", m.top).attr("y2", m.top + plotH).attr("stroke", mutedColor).attr("stroke-opacity", 0.25);
+    svg.append("text").attr("class", "dgmo-tick").attr("x", xx).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+  }
+  points.forEach((p, i) => {
+    const stroke = p.color ?? (p.category ? catColor(p.category, catIndex.get(p.category) ?? 0) : colors[i % colors.length]);
+    const r = (hasSize ? p.size ?? DEFAULT_SIZE : DEFAULT_SIZE) / 2;
+    const dot = svg.append("circle").attr("cx", x(p.x)).attr("cy", y(p.y)).attr("r", r).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("fill-opacity", FILL_OPACITY).attr("stroke", stroke).attr("stroke-width", 2);
+    tagDatum(dot, {
+      line: p.lineNumber,
+      key: p.name,
+      name: p.category ? `${p.name} \xB7 ${p.category}` : p.name,
+      value: `(${fmtNum(p.x)}, ${fmtNum(p.y)})`,
+      color: stroke
+    });
+    dot.attr("data-axval-x", fmtNum(p.x)).attr("data-axval-y", fmtNum(p.y));
+    if (p.category) dot.attr("data-category", p.category);
+    if (!chart.noName) {
+      svg.append("text").attr("x", x(p.x)).attr("y", y(p.y) - r - 5).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", 11).attr("font-family", FONT_FAMILY).text(p.name);
+    }
+  });
+  drawXAxisTitle(
+    svg,
+    chart.xlabel,
+    m.left + plotW / 2,
+    m.top + plotH + 46,
+    textColor
+  );
+  drawYAxisTitle(svg, chart.ylabel, m.top + plotH / 2, 20, textColor);
+}
+
+// src/charts-d3/sankey.ts
+var NODE_W = 20;
+var NODE_GAP = 14;
+function renderSankey(svg, chart, width, height, colors, bgColor, textColor, topInset) {
+  const links = chart.links ?? [];
+  if (links.length === 0) return;
+  const solid = chart.solidFill === true;
+  const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
+  const node = /* @__PURE__ */ new Map();
+  names.forEach(
+    (name, i) => node.set(name, {
+      name,
+      rank: 0,
+      value: 0,
+      order: i,
+      x: 0,
+      y: 0,
+      h: 0,
+      raw: chart.nodeColors?.[name] ?? colors[i % colors.length]
+    })
+  );
+  for (let pass = 0; pass < names.length; pass++) {
+    let changed = false;
+    for (const l of links) {
+      const s = node.get(l.source);
+      const t = node.get(l.target);
+      if (t.rank < s.rank + 1) {
+        t.rank = s.rank + 1;
+        changed = true;
+      }
+    }
+    if (!changed) break;
+  }
+  for (const n of node.values()) {
+    const out = links.filter((l) => l.source === n.name).reduce((a, l) => a + l.value, 0);
+    const inc = links.filter((l) => l.target === n.name).reduce((a, l) => a + l.value, 0);
+    n.value = Math.max(out, inc, 1);
+  }
+  const maxRank = Math.max(...[...node.values()].map((n) => n.rank));
+  const layers = Array.from({ length: maxRank + 1 }, () => []);
+  for (const n of node.values()) layers[n.rank].push(n);
+  const plotLeft = 16;
+  const top = topInset + 8;
+  const plotW = width - plotLeft - 16 - measureText("M", 14);
+  const plotH = height - top - 24;
+  let valueScale = Infinity;
+  for (const layer of layers) {
+    const tot = layer.reduce((a, n) => a + n.value, 0);
+    const avail = plotH - (layer.length - 1) * NODE_GAP;
+    if (tot > 0) valueScale = Math.min(valueScale, avail / tot);
+  }
+  if (!isFinite(valueScale)) valueScale = 1;
+  const layerX = (r) => plotLeft + (maxRank === 0 ? 0 : r * (plotW - NODE_W) / maxRank);
+  const placeLayer = (layer) => {
+    layer.sort((a, b) => a.order - b.order);
+    const totH = layer.reduce((a, n) => a + n.value * valueScale, 0) + (layer.length - 1) * NODE_GAP;
+    let y = top + (plotH - totH) / 2;
+    for (const n of layer) {
+      n.h = n.value * valueScale;
+      n.x = layerX(n.rank);
+      n.y = y;
+      y += n.h + NODE_GAP;
+    }
+  };
+  layers.forEach(placeLayer);
+  const center = (n) => n.y + n.h / 2;
+  for (let iter = 0; iter < 6; iter++) {
+    const forward = iter % 2 === 0;
+    const order = forward ? [...layers.keys()] : [...layers.keys()].reverse();
+    for (const r of order) {
+      for (const n of layers[r]) {
+        const neigh = forward ? links.filter((l) => l.target === n.name).map((l) => node.get(l.source)) : links.filter((l) => l.source === n.name).map((l) => node.get(l.target));
+        n.order = neigh.length ? neigh.reduce((a, m) => a + center(m), 0) / neigh.length : center(n);
+      }
+      placeLayer(layers[r]);
+    }
+  }
+  const outOff = /* @__PURE__ */ new Map();
+  const inOff = /* @__PURE__ */ new Map();
+  for (const n of node.values()) {
+    outOff.set(n.name, n.y);
+    inOff.set(n.name, n.y);
+  }
+  const ordered = [...links].sort((a, b) => {
+    const sa = node.get(a.source);
+    const sb = node.get(b.source);
+    if (sa.y !== sb.y) return sa.y - sb.y;
+    return node.get(a.target).y - node.get(b.target).y;
+  });
+  for (const l of ordered) {
+    const s = node.get(l.source);
+    const t = node.get(l.target);
+    const th = l.value * valueScale;
+    const sy = outOff.get(s.name);
+    const ty = inOff.get(t.name);
+    outOff.set(s.name, sy + th);
+    inOff.set(t.name, ty + th);
+    const sx = s.x + NODE_W;
+    const tx = t.x;
+    const cx0 = sx + (tx - sx) * 0.5;
+    const raw = l.color ?? s.raw;
+    const color = solid ? raw : mix(raw, bgColor, 45);
+    const ribbon = svg.append("path").attr(
+      "d",
+      `M${sx},${sy} C${cx0},${sy} ${cx0},${ty} ${tx},${ty} L${tx},${ty + th} C${cx0},${ty + th} ${cx0},${sy + th} ${sx},${sy + th} Z`
+    ).attr("fill", color).attr("fill-opacity", 0.6);
+    tagDatum(ribbon, {
+      line: l.lineNumber,
+      key: `link:${s.name}\0${t.name}`,
+      name: `${s.name} \u2192 ${t.name}`,
+      value: String(l.value),
+      color: s.raw
+    });
+  }
+  for (const n of node.values()) {
+    const nodeLine = links.find(
+      (l) => l.source === n.name || l.target === n.name
+    )?.lineNumber;
+    const nr = svg.append("rect").attr("x", n.x).attr("y", n.y).attr("width", NODE_W).attr("height", Math.max(1, n.h)).attr("fill", solid ? n.raw : mix(n.raw, bgColor, 75)).attr("stroke", n.raw).attr("stroke-width", 1);
+    tagDatum(nr, {
+      ...nodeLine !== void 0 && { line: nodeLine },
+      key: `node:${n.name}`,
+      name: n.name,
+      value: String(n.value),
+      color: n.raw
+    });
+    const lastLayer = n.rank === maxRank;
+    svg.append("text").attr("x", lastLayer ? n.x - 6 : n.x + NODE_W + 6).attr("y", n.y + n.h / 2 + 4).attr("text-anchor", lastLayer ? "end" : "start").attr("fill", textColor).attr("font-size", 13).attr("font-family", FONT_FAMILY).text(n.name);
+  }
+}
+
+// src/charts-d3/chord.ts
+function renderChord(svg, chart, width, height, colors, palette, isDark, textColor, topInset) {
+  const links = chart.links ?? [];
+  if (links.length === 0) return;
+  const solid = chart.solidFill === true;
+  const names = Array.from(new Set(links.flatMap((l) => [l.source, l.target])));
+  const n = names.length;
+  const idx = new Map(names.map((nm, i) => [nm, i]));
+  const colorOf = (i) => colors[i % colors.length];
+  const top = topInset + 8;
+  const cx = width / 2;
+  const cy = top + (height - top) / 2;
+  const maxLabel = Math.max(0, ...names.map((nm) => measureText(nm, 14)));
+  const radius = Math.min(width / 2 - maxLabel - 60, (height - top) / 2 - 50);
+  const angle = (i) => -Math.PI / 2 + i * 2 * Math.PI / n;
+  const pos = (i) => [
+    cx + Math.cos(angle(i)) * radius,
+    cy + Math.sin(angle(i)) * radius
+  ];
+  const pairKeys = /* @__PURE__ */ new Set();
+  for (const l of links) {
+    if (links.some(
+      (r) => r.source === l.target && r.target === l.source && r !== l
+    ))
+      pairKeys.add(`${l.source}\0${l.target}`);
+  }
+  for (const link of links) {
+    const si = idx.get(link.source);
+    const ti = idx.get(link.target);
+    const [x0, y0] = pos(si);
+    const [x1, y1] = pos(ti);
+    const hasOpp = pairKeys.has(`${link.source}\0${link.target}`);
+    const base = 0.3;
+    const curve = hasOpp ? link.source < link.target ? base + 0.15 : base - 0.15 : base;
+    const mx = (x0 + x1) / 2;
+    const my = (y0 + y1) / 2;
+    const ctrlX = mx + (cx - mx) * curve * 2;
+    const ctrlY = my + (cy - my) * curve * 2;
+    const w = Math.max(1, Math.min(link.value / 20, 10));
+    const stroke = colorOf(si);
+    const edge = svg.append("path").attr("d", `M${x0},${y0} Q${ctrlX},${ctrlY} ${x1},${y1}`).attr("fill", "none").attr("stroke", stroke).attr("stroke-width", w).attr("stroke-opacity", 0.6);
+    tagDatum(edge, {
+      line: link.lineNumber,
+      key: `edge:${link.source} ${link.target}`,
+      name: `${link.source} \u2192 ${link.target}`,
+      value: String(link.value),
+      color: stroke
+    });
+    if (link.directed) {
+      const ang = Math.atan2(y1 - ctrlY, x1 - ctrlX);
+      const ah = 11;
+      const tipX = x1 - Math.cos(ang) * 10;
+      const tipY = y1 - Math.sin(ang) * 10;
+      const a1 = ang + Math.PI - 0.4;
+      const a2 = ang + Math.PI + 0.4;
+      svg.append("polygon").attr(
+        "points",
+        `${tipX},${tipY} ${tipX + Math.cos(a1) * ah},${tipY + Math.sin(a1) * ah} ${tipX + Math.cos(a2) * ah},${tipY + Math.sin(a2) * ah}`
+      ).attr("fill", stroke).attr("fill-opacity", 0.7);
+    }
+  }
+  names.forEach((nm, i) => {
+    const [px, py] = pos(i);
+    const stroke = colorOf(i);
+    const dot = svg.append("circle").attr("cx", px).attr("cy", py).attr("r", 10).attr("fill", solid ? stroke : shapeFill(palette, stroke, isDark)).attr("stroke", stroke).attr("stroke-width", 2);
+    tagDatum(dot, { key: `node:${nm}`, name: nm, color: stroke });
+    const c = Math.cos(angle(i));
+    const lx = px + c * 16;
+    const ly = py + Math.sin(angle(i)) * 16;
+    svg.append("text").attr("x", lx).attr("y", ly + 4).attr(
+      "text-anchor",
+      Math.abs(c) < 0.3 ? "middle" : c > 0 ? "start" : "end"
+    ).attr("fill", textColor).attr("font-size", 14).attr("font-family", FONT_FAMILY).text(nm);
+  });
+}
+
+// src/charts-d3/function.ts
+import { scaleLinear as scaleLinear4 } from "d3-scale";
+import { line as d3line2 } from "d3-shape";
+
+// src/utils/expr-eval.ts
+function evaluateExpression(expr, x) {
+  try {
+    const processed = expr.replace(/\bpi\b/gi, String(Math.PI)).replace(/\be\b/g, String(Math.E)).replace(/\bsin\s*\(/gi, "Math.sin(").replace(/\bcos\s*\(/gi, "Math.cos(").replace(/\btan\s*\(/gi, "Math.tan(").replace(/\bln\s*\(/gi, "Math.log(").replace(/\blog\s*\(/gi, "Math.log10(").replace(/\bexp\s*\(/gi, "Math.exp(").replace(/\bsqrt\s*\(/gi, "Math.sqrt(").replace(/\babs\s*\(/gi, "Math.abs(").replace(/\bx\b/gi, `(${x})`).replace(/\^/g, "**");
+    const result = new Function(`return ${processed}`)();
+    return typeof result === "number" && isFinite(result) ? result : NaN;
+  } catch {
+    return NaN;
+  }
+}
+
+// src/charts-d3/function.ts
+var SAMPLES = 200;
+function renderFunction(svg, chart, width, height, colors, textColor, mutedColor, topInset) {
+  const fns = chart.functions ?? [];
+  if (fns.length === 0) return;
+  const xr = chart.xRange ?? { min: -10, max: 10 };
+  const step = (xr.max - xr.min) / SAMPLES;
+  const xs = [];
+  for (let i = 0; i <= SAMPLES; i++) xs.push(xr.min + i * step);
+  const curves = fns.map((fn, i) => ({
+    color: fn.color ?? colors[i % colors.length],
+    name: fn.name,
+    line: fn.lineNumber,
+    pts: xs.map(
+      (x2) => [x2, evaluateExpression(fn.expression, x2)]
+    )
+  }));
+  let yLo = Infinity;
+  let yHi = -Infinity;
+  for (const c of curves)
+    for (const [, y2] of c.pts)
+      if (isFinite(y2)) {
+        yLo = Math.min(yLo, y2);
+        yHi = Math.max(yHi, y2);
+      }
+  if (!isFinite(yLo)) {
+    yLo = -1;
+    yHi = 1;
+  }
+  if (yLo === yHi) yHi = yLo + 1;
+  const m = {
+    top: topInset + 8,
+    right: 32,
+    bottom: 64,
+    left: computeLeftMargin(chart.ylabel, [fmtNum(yHi), fmtNum(yLo)])
+  };
+  const plotW = width - m.left - m.right;
+  const plotH = height - m.top - m.bottom;
+  const x = scaleLinear4().domain([xr.min, xr.max]).range([m.left, m.left + plotW]);
+  const y = scaleLinear4().domain([yLo, yHi]).nice().range([m.top + plotH, m.top]);
+  for (const t of y.ticks(8)) {
+    const yy = y(t);
+    svg.append("line").attr("x1", m.left).attr("x2", m.left + plotW).attr("y1", yy).attr("y2", yy).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.2);
+    svg.append("text").attr("class", "dgmo-tick").attr("x", m.left - 10).attr("y", yy + 4).attr("text-anchor", "end").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+  }
+  for (const t of x.ticks(10)) {
+    const xx = x(t);
+    svg.append("line").attr("x1", xx).attr("x2", xx).attr("y1", m.top).attr("y2", m.top + plotH).attr("stroke", mutedColor).attr("stroke-opacity", t === 0 ? 0.6 : 0.2);
+    svg.append("text").attr("class", "dgmo-tick").attr("x", xx).attr("y", m.top + plotH + 18).attr("text-anchor", "middle").attr("fill", textColor).attr("font-size", TICK_FONT).attr("font-family", FONT_FAMILY).text(fmtNum(t));
+  }
+  const gen = d3line2().defined((p) => isFinite(p[1]) && p[1] >= yLo - 1 && p[1] <= yHi + 1).x((p) => x(p[0])).y((p) => y(p[1]));
+  for (const c of curves) {
+    const path = svg.append("path").attr("d", gen(c.pts) ?? "").attr("fill", "none").attr("stroke", c.color).attr("stroke-width", 2.5).attr("stroke-linejoin", "round");
+    tagDatum(path, { line: c.line, key: c.name, name: c.name, color: c.color });
+  }
+  drawXAxisTitle(
+    svg,
+    chart.xlabel,
+    m.left + plotW / 2,
+    m.top + plotH + 46,
+    textColor
+  );
+  drawYAxisTitle(svg, chart.ylabel, m.top + plotH / 2, 20, textColor);
+}
+
+// src/charts-d3/index.ts
+var STANDARD = /* @__PURE__ */ new Set(["bar", "line", "pie", "radar", "polar-area"]);
+var EXTENDED = /* @__PURE__ */ new Set([
+  "funnel",
+  "heatmap",
+  "scatter",
+  "sankey",
+  "chord",
+  "function"
+]);
+var D3_DATA_CHART_TYPES = /* @__PURE__ */ new Set([...STANDARD, ...EXTENDED]);
+function supportsD3DataChart(type) {
+  return D3_DATA_CHART_TYPES.has(type);
+}
+function firstNonCommentToken(content) {
+  for (const raw of content.split("\n")) {
+    const l = raw.trim();
+    if (!l || l.startsWith("//")) continue;
+    return l.split(/\s+/)[0].toLowerCase();
+  }
+  return "";
+}
+async function renderDataChartD3(content, theme, palette, dims) {
+  const effectivePalette = await resolveExportPalette(theme, palette);
+  const isDark = theme === "dark";
+  const w = dims?.width && dims.width > 0 ? Math.round(dims.width) : EXPORT_WIDTH;
+  const h = dims?.height && dims.height > 0 ? Math.round(dims.height) : EXPORT_HEIGHT;
+  const container = createExportContainer(w, h);
+  const init = initD3Chart(container, effectivePalette, {
+    width: w,
+    height: h
+  });
+  if (!init) {
+    document.body.removeChild(container);
+    return "";
+  }
+  const { svg, width, height, textColor, mutedColor, bgColor, colors } = init;
+  const ok = renderInto(
+    svg,
+    content,
+    effectivePalette,
+    isDark,
+    width,
+    height,
+    textColor,
+    mutedColor,
+    bgColor,
+    colors
+  );
+  if (!ok) {
+    document.body.removeChild(container);
+    return "";
+  }
+  return finalizeSvgExport(container, theme, effectivePalette);
+}
+function renderInto(s, content, palette, isDark, width, height, textColor, mutedColor, bgColor, colors) {
+  const firstTok = firstNonCommentToken(content);
+  const forceExtended = EXTENDED.has(firstTok);
+  const std = forceExtended ? null : parseChart(content, palette);
+  if (std && !std.error && std.data.length > 0 && STANDARD.has(std.type)) {
+    const hasTitle2 = !std.noTitle && !!std.title;
+    if (hasTitle2)
+      renderChartTitle(s, std.title, std.titleLineNumber, width, textColor);
+    switch (std.type) {
+      case "bar":
+        renderBar(
+          s,
+          std,
+          width,
+          height,
+          colors,
+          palette,
+          isDark,
+          textColor,
+          mutedColor,
+          hasTitle2
+        );
+        return true;
+      case "line":
+        renderLine(
+          s,
+          std,
+          width,
+          height,
+          colors,
+          palette,
+          isDark,
+          textColor,
+          mutedColor,
+          bgColor,
+          hasTitle2
+        );
+        return true;
+      case "pie":
+        renderPie(
+          s,
+          std,
+          width,
+          height,
+          palette,
+          isDark,
+          textColor,
+          hasTitle2 ? 52 : 24
+        );
+        return true;
+      case "radar": {
+        const groups = getSimpleChartLegendGroups(std, colors);
+        const top = injectLegendGroups(
+          s,
+          groups,
+          palette,
+          isDark,
+          hasTitle2,
+          width
+        );
+        renderRadar(
+          s,
+          std,
+          width,
+          height,
+          colors,
+          palette,
+          isDark,
+          textColor,
+          mutedColor,
+          top
+        );
+        return true;
+      }
+      case "polar-area":
+        renderPolarArea(
+          s,
+          std,
+          width,
+          height,
+          palette,
+          isDark,
+          textColor,
+          hasTitle2 ? 52 : 24
+        );
+        return true;
+    }
+  }
+  const ext = parseExtendedChart(content, palette);
+  if (ext.error || !EXTENDED.has(ext.type)) return false;
+  const seriesColors = getSeriesColors(palette);
+  const hasTitle = !ext.noTitle && !!ext.title;
+  if (hasTitle)
+    renderChartTitle(s, ext.title, ext.titleLineNumber, width, textColor);
+  switch (ext.type) {
+    case "funnel":
+      renderFunnel(
+        s,
+        ext,
+        width,
+        height,
+        seriesColors,
+        palette,
+        isDark,
+        textColor,
+        hasTitle ? 52 : 24
+      );
+      return true;
+    case "heatmap":
+      renderHeatmap(
+        s,
+        ext,
+        width,
+        height,
+        palette,
+        isDark,
+        textColor,
+        bgColor,
+        hasTitle ? 52 : 24
+      );
+      return true;
+    case "scatter": {
+      const groups = getExtendedChartLegendGroups(ext, seriesColors);
+      const top = injectLegendGroups(
+        s,
+        groups,
+        palette,
+        isDark,
+        hasTitle,
+        width
+      );
+      renderScatter(
+        s,
+        ext,
+        width,
+        height,
+        seriesColors,
+        palette,
+        isDark,
+        textColor,
+        mutedColor,
+        top
+      );
+      return true;
+    }
+    case "sankey":
+      renderSankey(
+        s,
+        ext,
+        width,
+        height,
+        seriesColors,
+        bgColor,
+        textColor,
+        hasTitle ? 52 : 24
+      );
+      return true;
+    case "chord":
+      renderChord(
+        s,
+        ext,
+        width,
+        height,
+        seriesColors,
+        palette,
+        isDark,
+        textColor,
+        hasTitle ? 52 : 24
+      );
+      return true;
+    case "function": {
+      const groups = getExtendedChartLegendGroups(ext, seriesColors);
+      const top = injectLegendGroups(
+        s,
+        groups,
+        palette,
+        isDark,
+        hasTitle,
+        width
+      );
+      renderFunction(
+        s,
+        ext,
+        width,
+        height,
+        seriesColors,
+        textColor,
+        mutedColor,
+        top
+      );
+      return true;
+    }
+    default:
+      return false;
+  }
+}
+
+export {
+  renderLegendSvg,
+  renderLegendSvgFromConfig,
+  D3_DATA_CHART_TYPES,
+  supportsD3DataChart,
+  renderDataChartD3
+};
+//# sourceMappingURL=chunk-OJR3MQYV.js.map