chartforge 0.0.1 → 0.0.2

package/dist/index-BCodEFNd.js

@@ -0,0 +1,1060 @@
+function createSVGElement(tag, attrs = {}) {
+  const el = document.createElementNS("http://www.w3.org/2000/svg", tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key === "className") {
+      el.setAttribute("class", String(value));
+    } else if (key.startsWith("on") && typeof value === "function") {
+      el.addEventListener(key.slice(2).toLowerCase(), value);
+    } else {
+      el.setAttribute(key, String(value));
+    }
+  }
+  return el;
+}
+function removeChildren(el) {
+  while (el.firstChild) el.removeChild(el.firstChild);
+}
+function polarToCartesian(cx, cy, r, angleDeg) {
+  const rad = (angleDeg - 90) * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+function describeArc(x, y, r, startAngle, endAngle) {
+  const start = polarToCartesian(x, y, r, endAngle);
+  const end = polarToCartesian(x, y, r, startAngle);
+  const large = endAngle - startAngle <= 180 ? "0" : "1";
+  return `M ${start.x} ${start.y} A ${r} ${r} 0 ${large} 0 ${end.x} ${end.y}`;
+}
+function uid() {
+  return `cf-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function clamp(v, min, max) {
+  return Math.min(Math.max(v, min), max);
+}
+function debounce(fn, delay) {
+  let id;
+  return (...args) => {
+    clearTimeout(id);
+    id = setTimeout(() => fn(...args), delay);
+  };
+}
+function throttle(fn, limit) {
+  let busy = false;
+  return (...args) => {
+    if (!busy) {
+      fn(...args);
+      busy = true;
+      setTimeout(() => busy = false, limit);
+    }
+  };
+}
+function merge(target, ...sources) {
+  for (const src of sources) {
+    if (!src) continue;
+    for (const key of Object.keys(src)) {
+      const sv = src[key];
+      const tv = target[key];
+      if (sv && typeof sv === "object" && !Array.isArray(sv) && tv && typeof tv === "object" && !Array.isArray(tv)) {
+        merge(tv, sv);
+      } else if (sv !== void 0) {
+        target[key] = sv;
+      }
+    }
+  }
+  return target;
+}
+function flatMax(series) {
+  return Math.max(...series.flatMap((s) => s.data));
+}
+function flatMin(series) {
+  return Math.min(...series.flatMap((s) => s.data));
+}
+class BasePlugin {
+  constructor(_chart, _cfg) {
+    this._chart = _chart;
+    this._cfg = _cfg;
+    this._els = [];
+  }
+  destroy() {
+    this._els.forEach((el) => el.parentNode?.removeChild(el));
+    this._els.length = 0;
+  }
+}
+class TooltipPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    this._mx = 0;
+    this._my = 0;
+    this._visible = false;
+    const c = chart;
+    const { formatter, ...rest } = cfg;
+    this._opts = {
+      ...merge({
+        enabled: true,
+        backgroundColor: c.theme.tooltip.background,
+        textColor: c.theme.tooltip.text,
+        borderColor: c.theme.tooltip.border,
+        borderRadius: 6,
+        padding: 10,
+        fontSize: 13,
+        shadow: true,
+        followCursor: true,
+        offset: { x: 14, y: 14 }
+      }, rest),
+      formatter
+    };
+  }
+  init() {
+    if (!this._opts.enabled) return;
+    this._createTip();
+    this._attachEvents();
+  }
+  _createTip() {
+    this._tip = document.createElement("div");
+    this._tip.className = "cf-tooltip";
+    const o = this._opts;
+    const shadow = o.shadow ? "box-shadow:0 6px 20px rgba(0,0,0,.22)" : "";
+    this._tip.style.cssText = [
+      "position:fixed",
+      `padding:${o.padding}px ${o.padding + 4}px`,
+      `background:${o.backgroundColor}`,
+      `color:${o.textColor}`,
+      `border:1px solid ${o.borderColor}`,
+      `border-radius:${o.borderRadius}px`,
+      `font-size:${o.fontSize}px`,
+      "line-height:1.5",
+      "font-family:inherit",
+      "pointer-events:none",
+      "opacity:0",
+      "transform:scale(0.95)",
+      "transition:opacity .12s ease,transform .12s ease",
+      "z-index:99999",
+      "white-space:nowrap",
+      "max-width:260px",
+      shadow,
+      "top:0",
+      "left:0"
+    ].filter(Boolean).join(";");
+    document.body.appendChild(this._tip);
+    this._els.push(this._tip);
+  }
+  _attachEvents() {
+    const c = this._chart;
+    c.svg.addEventListener("mousemove", (e) => {
+      const me = e;
+      this._mx = me.clientX;
+      this._my = me.clientY;
+      if (this._visible) this._position();
+    });
+    c.on("hover", (raw) => {
+      const data = raw;
+      this._buildContent(data);
+      this._position();
+      this._show();
+    });
+    c.svg.addEventListener("mouseleave", () => this._hide());
+  }
+  _buildContent(d) {
+    const c = this._chart;
+    if (this._opts.formatter) {
+      this._tip.innerHTML = this._opts.formatter(d);
+      return;
+    }
+    const lbl = (i) => c.config.data.labels?.[i] ?? `Item ${i + 1}`;
+    const sName = (i) => c.config.data.series[i]?.name ?? `Series ${i + 1}`;
+    const fmt = (v) => typeof v === "number" ? v.toLocaleString() : String(v);
+    const row = (label, value) => `<div style="display:flex;justify-content:space-between;gap:12px"><span style="opacity:.7">${label}</span><span style="font-weight:600">${fmt(value)}</span></div>`;
+    let html = "";
+    const type = d["type"];
+    switch (type) {
+      case "pie":
+      case "donut": {
+        const idx = d["index"];
+        html = `<div style="font-weight:700;margin-bottom:4px">${lbl(idx)}</div>${row("Value", d["value"])}`;
+        break;
+      }
+      case "column":
+      case "bar": {
+        const idx = d["index"];
+        html = `<div style="font-weight:700;margin-bottom:4px">${lbl(idx)}</div>${row("Value", d["value"])}`;
+        break;
+      }
+      case "line": {
+        const si = d["seriesIndex"];
+        const idx = d["index"];
+        html = `<div style="font-weight:700;margin-bottom:4px">${sName(si)}</div>${row(lbl(idx), d["value"])}`;
+        break;
+      }
+      case "scatter": {
+        const pt = d["point"];
+        const si = d["seriesIndex"];
+        html = `<div style="font-weight:700;margin-bottom:4px">${sName(si)}</div>${row("X", pt.x)}${row("Y", pt.y)}${pt.r !== void 0 ? row("R", pt.r) : ""}`;
+        break;
+      }
+      case "heatmap": {
+        html = `<div style="font-weight:700;margin-bottom:4px">Cell [${d["row"]}, ${d["col"]}]</div>${row("Value", d["value"])}`;
+        break;
+      }
+      case "candlestick": {
+        const cc = d["candle"];
+        const idx = d["index"];
+        const chg = cc.close - cc.open;
+        const pct = (chg / cc.open * 100).toFixed(2);
+        const clr = chg >= 0 ? "#10b981" : "#ef4444";
+        html = `<div style="font-weight:700;margin-bottom:4px">${lbl(idx)}</div>` + row("Open", cc.open) + row("High", cc.high) + row("Low", cc.low) + row("Close", cc.close) + `<div style="color:${clr};font-weight:700;margin-top:4px">${chg >= 0 ? "▲" : "▼"} ${Math.abs(chg).toLocaleString()} (${pct}%)</div>`;
+        break;
+      }
+      case "stackedColumn":
+      case "stackedBar": {
+        const si = d["seriesIndex"];
+        const ci = d["catIndex"];
+        html = `<div style="font-weight:700;margin-bottom:4px">${sName(si)}</div>${row(lbl(ci), d["value"])}`;
+        break;
+      }
+      case "funnel": {
+        const idx = d["index"];
+        html = `<div style="font-weight:700;margin-bottom:4px">${lbl(idx)}</div>${row("Value", d["value"])}`;
+        break;
+      }
+      default:
+        html = `<div>${fmt(d["value"] ?? JSON.stringify(d))}</div>`;
+    }
+    this._tip.innerHTML = html;
+  }
+  _position() {
+    const rect = this._tip.getBoundingClientRect();
+    const ox = this._opts.offset.x;
+    const oy = this._opts.offset.y;
+    let left = this._mx + ox;
+    let top = this._my + oy;
+    if (left + rect.width > window.innerWidth - 8) left = this._mx - rect.width - ox;
+    if (top + rect.height > window.innerHeight - 8) top = this._my - rect.height - oy;
+    if (left < 8) left = 8;
+    if (top < 8) top = 8;
+    this._tip.style.left = `${left}px`;
+    this._tip.style.top = `${top}px`;
+  }
+  _show() {
+    this._visible = true;
+    this._tip.style.opacity = "1";
+    this._tip.style.transform = "scale(1)";
+  }
+  _hide() {
+    this._visible = false;
+    this._tip.style.opacity = "0";
+    this._tip.style.transform = "scale(0.95)";
+  }
+  destroy() {
+    this._tip?.parentNode?.removeChild(this._tip);
+    this._els.length = 0;
+  }
+}
+class LegendPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    this._hidden = /* @__PURE__ */ new Set();
+    this._origSeries = [];
+    const defaults = {
+      enabled: true,
+      position: "bottom",
+      align: "center",
+      layout: "horizontal",
+      fontSize: 12,
+      itemSpacing: 12,
+      markerSize: 12,
+      markerType: "square",
+      clickable: true
+    };
+    this._opts = merge(defaults, cfg);
+  }
+  init() {
+    if (!this._opts.enabled) return;
+    const c = this._chart;
+    this._origSeries = [...c.config.data.series];
+    this._group = createSVGElement("g", { className: "cf-legend" });
+    c.svg.appendChild(this._group);
+    this._els.push(this._group);
+    this._draw();
+    c.on("afterRender", () => {
+      this._origSeries = [...c.config.data.series];
+      this._draw();
+    });
+  }
+  _draw() {
+    const c = this._chart;
+    removeChildren(this._group);
+    const series = this._origSeries;
+    if (!series.length) return;
+    const vb = c.svg.getAttribute("viewBox").split(" ").map(Number);
+    const W = vb[2], H = vb[3];
+    const o = this._opts;
+    const step = 110;
+    let x = 0, y = 0;
+    if (o.position === "bottom") {
+      y = H - 28;
+      x = this._alignX(W, series.length, step);
+    } else if (o.position === "top") {
+      y = 8;
+      x = this._alignX(W, series.length, step);
+    } else if (o.position === "left") {
+      x = 8;
+      y = (H - series.length * (o.markerSize + o.itemSpacing)) / 2;
+    } else {
+      x = W - 110;
+      y = (H - series.length * (o.markerSize + o.itemSpacing)) / 2;
+    }
+    series.forEach((s, i) => {
+      const item = this._item(s, i, x, y);
+      this._group.appendChild(item);
+      o.layout === "horizontal" ? x += step : y += o.markerSize + o.itemSpacing;
+    });
+  }
+  _alignX(W, count, step) {
+    const total = count * step;
+    const o = this._opts;
+    if (o.align === "center") return (W - total) / 2;
+    if (o.align === "end") return W - total - 20;
+    return 20;
+  }
+  _item(s, i, x, y) {
+    const c = this._chart;
+    const o = this._opts;
+    const hidden = this._hidden.has(i);
+    const color = c.theme.colors[i % c.theme.colors.length];
+    const opacity = hidden ? 0.3 : 1;
+    const group = createSVGElement("g");
+    let marker;
+    if (o.markerType === "circle") {
+      marker = createSVGElement("circle", {
+        cx: x + o.markerSize / 2,
+        cy: y + o.markerSize / 2,
+        r: o.markerSize / 2,
+        fill: color,
+        opacity
+      });
+    } else if (o.markerType === "line") {
+      marker = createSVGElement("line", {
+        x1: x,
+        y1: y + o.markerSize / 2,
+        x2: x + o.markerSize,
+        y2: y + o.markerSize / 2,
+        stroke: color,
+        "stroke-width": 3,
+        opacity
+      });
+    } else {
+      marker = createSVGElement("rect", {
+        x,
+        y,
+        width: o.markerSize,
+        height: o.markerSize,
+        fill: color,
+        opacity
+      });
+    }
+    group.appendChild(marker);
+    const text = createSVGElement("text", {
+      x: x + o.markerSize + 6,
+      y: y + o.markerSize / 2,
+      fill: c.theme.legend.text,
+      "font-size": o.fontSize,
+      "dominant-baseline": "middle",
+      opacity
+    });
+    text.textContent = s.name ?? `Series ${i + 1}`;
+    group.appendChild(text);
+    if (o.clickable) {
+      group.style.cursor = "pointer";
+      group.addEventListener("click", () => this._toggle(i));
+      group.addEventListener("mouseenter", () => text.setAttribute("fill", c.theme.legend.hover));
+      group.addEventListener("mouseleave", () => text.setAttribute("fill", c.theme.legend.text));
+    }
+    return group;
+  }
+  _toggle(i) {
+    const c = this._chart;
+    this._hidden.has(i) ? this._hidden.delete(i) : this._hidden.add(i);
+    c.config.data.series = this._origSeries.filter((_, idx) => !this._hidden.has(idx));
+    c.render();
+    c.config.data.series = this._origSeries;
+    this._draw();
+  }
+}
+class AxisPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    this._opts = merge({
+      x: { enabled: true, label: "", fontSize: 11, tickLength: 5 },
+      y: { enabled: true, label: "", fontSize: 11, tickLength: 5, ticks: 5 }
+    }, cfg);
+  }
+  init() {
+    const c = this._chart;
+    this._group = createSVGElement("g", { className: "cf-axis" });
+    c.svg.appendChild(this._group);
+    this._els.push(this._group);
+    this._draw();
+    c.on("beforeRender", () => this._draw());
+  }
+  _draw() {
+    const c = this._chart;
+    removeChildren(this._group);
+    const vb = c.svg.getAttribute("viewBox").split(" ").map(Number);
+    const W = vb[2], H = vb[3];
+    const pad = c.config.padding ?? {};
+    const p = { top: pad.top ?? 40, right: pad.right ?? 40, bottom: pad.bottom ?? 60, left: pad.left ?? 60 };
+    if (this._opts.x?.enabled) this._drawX(W, H, p);
+    if (this._opts.y?.enabled) this._drawY(W, H, p);
+  }
+  _drawX(W, H, p) {
+    const c = this._chart;
+    const xo = this._opts.x;
+    const y = H - p.bottom;
+    const sx = p.left, ex = W - p.right;
+    this._group.appendChild(createSVGElement("line", {
+      x1: sx,
+      y1: y,
+      x2: ex,
+      y2: y,
+      stroke: c.theme.axis.line,
+      "stroke-width": 1
+    }));
+    const labels = c.config.data.labels ?? [];
+    const step = (ex - sx) / (labels.length || 1);
+    labels.forEach((lbl, i) => {
+      const x = sx + step * i + step / 2;
+      this._group.appendChild(createSVGElement("line", {
+        x1: x,
+        y1: y,
+        x2: x,
+        y2: y + (xo.tickLength ?? 5),
+        stroke: c.theme.axis.line,
+        "stroke-width": 1
+      }));
+      const t = createSVGElement("text", {
+        x,
+        y: y + (xo.tickLength ?? 5) + 13,
+        fill: c.theme.axis.text,
+        "font-size": xo.fontSize ?? 11,
+        "text-anchor": "middle"
+      });
+      t.textContent = lbl;
+      this._group.appendChild(t);
+    });
+    if (xo.label) {
+      const t = createSVGElement("text", {
+        x: (sx + ex) / 2,
+        y: H - 8,
+        fill: c.theme.text,
+        "font-size": (xo.fontSize ?? 11) + 2,
+        "text-anchor": "middle",
+        "font-weight": "bold"
+      });
+      t.textContent = xo.label;
+      this._group.appendChild(t);
+    }
+  }
+  // @ts-ignore
+  _drawY(W, H, p) {
+    const c = this._chart;
+    const yo = this._opts.y;
+    const x = p.left;
+    const sy = p.top, ey = H - p.bottom;
+    this._group.appendChild(createSVGElement("line", {
+      x1: x,
+      y1: sy,
+      x2: x,
+      y2: ey,
+      stroke: c.theme.axis.line,
+      "stroke-width": 1
+    }));
+    const nticks = yo.ticks ?? 5;
+    const step = (ey - sy) / nticks;
+    const allVals = (c.config.data.series ?? []).flatMap((s) => s.data);
+    const maxVal = allVals.length ? Math.max(...allVals) : 100;
+    for (let i = 0; i <= nticks; i++) {
+      const ty = ey - i * step;
+      const val = (maxVal / nticks * i).toFixed(0);
+      this._group.appendChild(createSVGElement("line", {
+        x1: x - (yo.tickLength ?? 5),
+        y1: ty,
+        x2: x,
+        y2: ty,
+        stroke: c.theme.axis.line,
+        "stroke-width": 1
+      }));
+      const t = createSVGElement("text", {
+        x: x - (yo.tickLength ?? 5) - 5,
+        y: ty,
+        fill: c.theme.axis.text,
+        "font-size": yo.fontSize ?? 11,
+        "text-anchor": "end",
+        "dominant-baseline": "middle"
+      });
+      t.textContent = val;
+      this._group.appendChild(t);
+    }
+    if (yo.label) {
+      const mid = (sy + ey) / 2;
+      const t = createSVGElement("text", {
+        x: 15,
+        y: mid,
+        fill: c.theme.text,
+        "font-size": (yo.fontSize ?? 11) + 2,
+        "text-anchor": "middle",
+        "font-weight": "bold",
+        transform: `rotate(-90,15,${mid})`
+      });
+      t.textContent = yo.label;
+      this._group.appendChild(t);
+    }
+  }
+}
+class GridPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    const c = chart;
+    this._opts = merge({
+      enabled: true,
+      x: { enabled: true, color: c.theme.axis.grid, strokeWidth: 1, dashArray: "2,2" },
+      y: { enabled: true, color: c.theme.axis.grid, strokeWidth: 1, dashArray: "2,2", ticks: 5 }
+    }, cfg);
+  }
+  init() {
+    if (!this._opts.enabled) return;
+    const c = this._chart;
+    this._group = createSVGElement("g", { className: "cf-grid" });
+    c.mainGroup.insertBefore(this._group, c.mainGroup.firstChild);
+    this._els.push(this._group);
+    this._draw();
+    c.on("beforeRender", () => this._draw());
+  }
+  _draw() {
+    const c = this._chart;
+    removeChildren(this._group);
+    const vb = c.svg.getAttribute("viewBox").split(" ").map(Number);
+    const W = vb[2], H = vb[3];
+    const pad = c.config.padding ?? {};
+    const p = { top: pad.top ?? 40, right: pad.right ?? 40, bottom: pad.bottom ?? 60, left: pad.left ?? 60 };
+    const sx = p.left, ex = W - p.right;
+    const sy = p.top, ey = H - p.bottom;
+    if (this._opts.y?.enabled) {
+      const nticks = this._opts.y.ticks ?? 5;
+      const step = (ey - sy) / nticks;
+      for (let i = 0; i <= nticks; i++) {
+        const y = ey - i * step;
+        this._group.appendChild(createSVGElement("line", {
+          x1: sx,
+          y1: y,
+          x2: ex,
+          y2: y,
+          stroke: this._opts.y.color ?? "#ccc",
+          "stroke-width": this._opts.y.strokeWidth ?? 1,
+          "stroke-dasharray": this._opts.y.dashArray ?? "2,2",
+          opacity: "0.5"
+        }));
+      }
+    }
+    if (this._opts.x?.enabled) {
+      const labels = c.config.data.labels ?? [];
+      const step = (ex - sx) / (labels.length || 1);
+      for (let i = 0; i <= labels.length; i++) {
+        const x = sx + step * i;
+        this._group.appendChild(createSVGElement("line", {
+          x1: x,
+          y1: sy,
+          x2: x,
+          y2: ey,
+          stroke: this._opts.x.color ?? "#ccc",
+          "stroke-width": this._opts.x.strokeWidth ?? 1,
+          "stroke-dasharray": this._opts.x.dashArray ?? "2,2",
+          opacity: "0.5"
+        }));
+      }
+    }
+  }
+}
+class CrosshairPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    const c = chart;
+    this._opts = {
+      enabled: true,
+      x: { enabled: true, color: c.theme.textSecondary, dashArray: "4,4", width: 1, ...cfg.x },
+      y: { enabled: true, color: c.theme.textSecondary, dashArray: "4,4", width: 1, ...cfg.y },
+      snap: cfg.snap ?? false
+    };
+  }
+  init() {
+    if (!this._opts.enabled) return;
+    const c = this._chart;
+    this._group = createSVGElement("g", { className: "cf-crosshair", style: "pointer-events:none" });
+    this._xLine = createSVGElement("line", {
+      stroke: this._opts.x.color ?? "#888",
+      "stroke-width": this._opts.x.width ?? 1,
+      "stroke-dasharray": this._opts.x.dashArray ?? "4,4",
+      opacity: 0
+    });
+    this._yLine = createSVGElement("line", {
+      stroke: this._opts.y.color ?? "#888",
+      "stroke-width": this._opts.y.width ?? 1,
+      "stroke-dasharray": this._opts.y.dashArray ?? "4,4",
+      opacity: 0
+    });
+    if (this._opts.x.enabled) this._group.appendChild(this._xLine);
+    if (this._opts.y.enabled) this._group.appendChild(this._yLine);
+    c.mainGroup.appendChild(this._group);
+    this._els.push(this._group);
+    c.svg.addEventListener("mousemove", (e) => this._onMove(e));
+    c.svg.addEventListener("mouseleave", () => this._hide());
+  }
+  _onMove(e) {
+    const c = this._chart;
+    const vb = c.svg.getAttribute("viewBox").split(" ").map(Number);
+    const W = vb[2], H = vb[3];
+    const pad = c.config.padding ?? {};
+    const pl = pad.left ?? 60;
+    const pb = pad.bottom ?? 60;
+    const pt = pad.top ?? 40;
+    const pr = pad.right ?? 40;
+    const rect = c.svg.getBoundingClientRect();
+    const scaleX = W / rect.width;
+    const scaleY = H / rect.height;
+    const mx = (e.clientX - rect.left) * scaleX;
+    const my = (e.clientY - rect.top) * scaleY;
+    if (mx < pl || mx > W - pr || my < pt || my > H - pb) {
+      this._hide();
+      return;
+    }
+    this._xLine.setAttribute("x1", String(mx));
+    this._xLine.setAttribute("y1", String(pt));
+    this._xLine.setAttribute("x2", String(mx));
+    this._xLine.setAttribute("y2", String(H - pb));
+    this._xLine.setAttribute("opacity", "1");
+    this._yLine.setAttribute("x1", String(pl));
+    this._yLine.setAttribute("y1", String(my));
+    this._yLine.setAttribute("x2", String(W - pr));
+    this._yLine.setAttribute("y2", String(my));
+    this._yLine.setAttribute("opacity", "1");
+  }
+  _hide() {
+    this._xLine.setAttribute("opacity", "0");
+    this._yLine.setAttribute("opacity", "0");
+  }
+  destroy() {
+    this._group?.parentNode?.removeChild(this._group);
+  }
+}
+class DataLabelsPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    const c = chart;
+    this._opts = {
+      enabled: true,
+      fontSize: 11,
+      color: c.theme.text,
+      anchor: "top",
+      offset: 5,
+      formatter: (v) => v.toLocaleString(),
+      rotation: 0,
+      ...cfg
+    };
+  }
+  init() {
+    if (!this._opts.enabled) return;
+    const c = this._chart;
+    this._group = createSVGElement("g", {
+      className: "cf-data-labels",
+      "pointer-events": "none"
+    });
+    c.mainGroup.appendChild(this._group);
+    this._els.push(this._group);
+    c.on("afterRender", () => this._draw());
+  }
+  _draw() {
+    const c = this._chart;
+    while (this._group.firstChild) this._group.removeChild(this._group.firstChild);
+    const type = c.config.type;
+    const data = c.config.data;
+    const vb = c.svg.getAttribute("viewBox").split(" ").map(Number);
+    const W = vb[2], H = vb[3];
+    const pad = c.config.padding ?? {};
+    const pl = pad.left ?? 60, pr = pad.right ?? 40;
+    const pt = pad.top ?? 40, pb = pad.bottom ?? 60;
+    const dw = W - pl - pr;
+    const dh = H - pt - pb;
+    if (type === "column") {
+      const values = data.series[0].data;
+      const maxVal = Math.max(...values);
+      const cw = dw / values.length * 0.8;
+      const gp = dw / values.length * 0.2;
+      const baseY = pt + dh;
+      values.forEach((v, i) => {
+        const barH = v / maxVal * dh;
+        const x = pl + i * (cw + gp) + cw / 2;
+        const y = baseY - barH - this._opts.offset;
+        this._addLabel(x, y, v, "middle");
+      });
+    } else if (type === "bar") {
+      const values = data.series[0].data;
+      const maxVal = Math.max(...values);
+      const bh = dh / values.length * 0.8;
+      const gp = dh / values.length * 0.2;
+      values.forEach((v, i) => {
+        const barW = v / maxVal * dw;
+        const x = pl + barW + this._opts.offset;
+        const y = pt + i * (bh + gp) + bh / 2;
+        this._addLabel(x, y, v, "start", "middle");
+      });
+    }
+  }
+  _addLabel(x, y, value, textAnchor = "middle", baseline = "auto") {
+    const label = createSVGElement("text", {
+      x,
+      y,
+      fill: this._opts.color,
+      "font-size": this._opts.fontSize,
+      "text-anchor": textAnchor,
+      "dominant-baseline": baseline
+    });
+    if (this._opts.rotation !== 0) {
+      label.setAttribute("transform", `rotate(${this._opts.rotation},${x},${y})`);
+    }
+    label.textContent = this._opts.formatter(value);
+    this._group.appendChild(label);
+  }
+}
+class ExportPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    this._opts = {
+      filename: cfg.filename ?? "chart",
+      svgButton: cfg.svgButton ?? true,
+      pngButton: cfg.pngButton ?? true,
+      csvButton: cfg.csvButton ?? true,
+      buttonStyle: cfg.buttonStyle ?? ""
+    };
+  }
+  init() {
+    const c = this._chart;
+    this._toolbar = document.createElement("div");
+    this._toolbar.className = "cf-export-toolbar";
+    this._toolbar.style.cssText = "display:flex;gap:6px;padding:4px 0;";
+    if (this._opts.svgButton) this._toolbar.appendChild(this._btn("SVG", () => this.exportSVG()));
+    if (this._opts.pngButton) this._toolbar.appendChild(this._btn("PNG", () => void this.exportPNG()));
+    if (this._opts.csvButton) this._toolbar.appendChild(this._btn("CSV", () => this.exportCSV()));
+    c.container.insertBefore(this._toolbar, c.container.firstChild);
+    this._els.push(this._toolbar);
+  }
+  _btn(label, onClick) {
+    const btn = document.createElement("button");
+    btn.textContent = `↓ ${label}`;
+    btn.style.cssText = [
+      "padding:3px 10px",
+      "font-size:11px",
+      "border-radius:4px",
+      "border:1px solid #888",
+      "background:transparent",
+      "cursor:pointer",
+      "opacity:.7",
+      "color: white",
+      this._opts.buttonStyle
+    ].join(";");
+    btn.addEventListener("mouseenter", () => btn.style.opacity = "1");
+    btn.addEventListener("mouseleave", () => btn.style.opacity = ".7");
+    btn.addEventListener("click", onClick);
+    return btn;
+  }
+  exportSVG() {
+    const c = this._chart;
+    const xml = new XMLSerializer().serializeToString(c.svg);
+    const blob = new Blob([xml], { type: "image/svg+xml" });
+    this._download(URL.createObjectURL(blob), `${this._opts.filename}.svg`);
+  }
+  async exportPNG(scale = 2) {
+    const c = this._chart;
+    const xml = new XMLSerializer().serializeToString(c.svg);
+    const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(svgBlob);
+    const img = new Image();
+    await new Promise((resolve, reject) => {
+      img.onload = () => resolve();
+      img.onerror = reject;
+      img.src = url;
+    });
+    const vb = c.svg.getAttribute("viewBox")?.split(" ").map(Number) ?? [0, 0, 800, 400];
+    const canvas = document.createElement("canvas");
+    canvas.width = vb[2] * scale;
+    canvas.height = vb[3] * scale;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    URL.revokeObjectURL(url);
+    canvas.toBlob((blob) => {
+      if (blob) this._download(URL.createObjectURL(blob), `${this._opts.filename}.png`);
+    }, "image/png");
+  }
+  exportCSV() {
+    const data = this._chart.config.data;
+    const rows = [];
+    const header = ["Label", ...data.series.map((s, i) => s.name ?? `Series ${i + 1}`)];
+    rows.push(header.join(","));
+    const len = data.labels?.length ?? (data.series[0]?.data).length ?? 0;
+    for (let i = 0; i < len; i++) {
+      const lbl = data.labels?.[i] ?? i;
+      const vals = data.series.map((s) => s.data[i] ?? "");
+      rows.push([lbl, ...vals].join(","));
+    }
+    const blob = new Blob([rows.join("\n")], { type: "text/csv" });
+    this._download(URL.createObjectURL(blob), `${this._opts.filename}.csv`);
+  }
+  _download(url, filename) {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(url), 1e3);
+  }
+}
+class ZoomPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    this._scale = 1;
+    this._tx = 0;
+    this._ty = 0;
+    this._dragging = false;
+    this._dragStart = { x: 0, y: 0 };
+    this._opts = {
+      enabled: true,
+      type: "xy",
+      minZoom: 0.5,
+      maxZoom: 10,
+      resetOnDblClick: true,
+      ...cfg
+    };
+  }
+  init() {
+    if (!this._opts.enabled) return;
+    const c = this._chart;
+    const svg = c.svg;
+    svg.style.userSelect = "none";
+    svg.style.touchAction = "none";
+    svg.addEventListener("wheel", (e) => this._onWheel(e), { passive: false });
+    svg.addEventListener("mousedown", (e) => this._onMouseDown(e));
+    svg.addEventListener("mousemove", (e) => this._onMouseMove(e));
+    svg.addEventListener("mouseup", () => {
+      this._dragging = false;
+    });
+    svg.addEventListener("mouseleave", () => {
+      this._dragging = false;
+    });
+    if (this._opts.resetOnDblClick) {
+      svg.addEventListener("dblclick", () => this.reset());
+    }
+  }
+  _onWheel(e) {
+    e.preventDefault();
+    const c = this._chart;
+    const rect = c.svg.getBoundingClientRect();
+    const mx = e.clientX - rect.left;
+    const my = e.clientY - rect.top;
+    const delta = e.deltaY > 0 ? 0.85 : 1.15;
+    const ns = Math.max(this._opts.minZoom, Math.min(this._opts.maxZoom, this._scale * delta));
+    const scaleRatio = ns / this._scale;
+    const t = this._opts.type;
+    if (t === "x" || t === "xy") this._tx = mx - scaleRatio * (mx - this._tx);
+    if (t === "y" || t === "xy") this._ty = my - scaleRatio * (my - this._ty);
+    this._scale = ns;
+    this._apply();
+  }
+  _onMouseDown(e) {
+    if (e.button !== 0) return;
+    this._dragging = true;
+    this._dragStart = { x: e.clientX - this._tx, y: e.clientY - this._ty };
+    this._chart.svg.style.cursor = "grabbing";
+  }
+  _onMouseMove(e) {
+    if (!this._dragging) return;
+    const t = this._opts.type;
+    if (t === "x" || t === "xy") this._tx = e.clientX - this._dragStart.x;
+    if (t === "y" || t === "xy") this._ty = e.clientY - this._dragStart.y;
+    this._apply();
+  }
+  _apply() {
+    const mg = this._chart.mainGroup;
+    mg.style.transform = `translate(${this._tx}px, ${this._ty}px) scale(${this._scale})`;
+    mg.style.transformOrigin = "0 0";
+    this._chart.svg.style.cursor = this._dragging ? "grabbing" : "grab";
+  }
+  reset() {
+    this._scale = 1;
+    this._tx = 0;
+    this._ty = 0;
+    this._apply();
+    this._chart.svg.style.cursor = "";
+  }
+}
+class AnnotationPlugin extends BasePlugin {
+  constructor(chart, cfg = {}) {
+    super(chart, cfg);
+    this._annCfg = cfg;
+  }
+  init() {
+    const c = this._chart;
+    this._group = createSVGElement("g", {
+      className: "cf-annotations",
+      style: "pointer-events:none"
+    });
+    c.mainGroup.appendChild(this._group);
+    this._els.push(this._group);
+    this._draw();
+    c.on("afterRender", () => this._draw());
+  }
+  addMarkLine(ml) {
+    this._annCfg.markLines = [...this._annCfg.markLines ?? [], ml];
+    this._draw();
+  }
+  addMarkArea(ma) {
+    this._annCfg.markAreas = [...this._annCfg.markAreas ?? [], ma];
+    this._draw();
+  }
+  addText(t) {
+    this._annCfg.texts = [...this._annCfg.texts ?? [], t];
+    this._draw();
+  }
+  _draw() {
+    while (this._group.firstChild) this._group.removeChild(this._group.firstChild);
+    const c = this._chart;
+    const vb = c.svg.getAttribute("viewBox").split(" ").map(Number);
+    const W = vb[2], H = vb[3];
+    const pad = c.config.padding ?? {};
+    const pl = pad.left ?? 60, pr = pad.right ?? 40;
+    const pt = pad.top ?? 40, pb = pad.bottom ?? 60;
+    const dw = W - pl - pr;
+    const dh = H - pt - pb;
+    const allVals = (c.config.data.series ?? []).flatMap((s) => s.data);
+    const maxVal = allVals.length ? Math.max(...allVals) : 100;
+    const minVal = allVals.length ? Math.min(...allVals) : 0;
+    const range = maxVal - minVal || 1;
+    const toX = (idx, total) => pl + idx / Math.max(total - 1, 1) * dw;
+    const toY = (v) => pt + dh - (v - minVal) / range * dh;
+    const nLabels = c.config.data.labels?.length ?? 1;
+    const defColor = c.theme.textSecondary;
+    for (const ml of this._annCfg.markLines ?? []) {
+      const color = ml.color ?? defColor;
+      let x1, y1, x2, y2;
+      if (ml.type === "horizontal") {
+        y1 = y2 = toY(ml.value);
+        x1 = pl;
+        x2 = W - pr;
+      } else {
+        x1 = x2 = toX(ml.value, nLabels);
+        y1 = pt;
+        y2 = H - pb;
+      }
+      this._group.appendChild(createSVGElement("line", {
+        x1,
+        y1,
+        x2,
+        y2,
+        stroke: color,
+        "stroke-width": ml.width ?? 1.5,
+        "stroke-dasharray": ml.dashArray ?? "5,3"
+      }));
+      if (ml.label) {
+        const tx = ml.type === "horizontal" ? x2 + 4 : x1 + 4;
+        const ty = ml.type === "horizontal" ? y1 - 4 : pt - 4;
+        const t = createSVGElement("text", {
+          x: tx,
+          y: ty,
+          fill: color,
+          "font-size": 11
+        });
+        t.textContent = ml.label;
+        this._group.appendChild(t);
+      }
+    }
+    for (const ma of this._annCfg.markAreas ?? []) {
+      const x1 = ma.xStart !== void 0 ? toX(ma.xStart, nLabels) : pl;
+      const x2 = ma.xEnd !== void 0 ? toX(ma.xEnd, nLabels) : W - pr;
+      const y1 = ma.yEnd !== void 0 ? toY(ma.yEnd) : pt;
+      const y2 = ma.yStart !== void 0 ? toY(ma.yStart) : H - pb;
+      this._group.appendChild(createSVGElement("rect", {
+        x: x1,
+        y: y1,
+        width: x2 - x1,
+        height: y2 - y1,
+        fill: ma.color ?? defColor,
+        opacity: ma.opacity ?? 0.12
+      }));
+      if (ma.label) {
+        const t = createSVGElement("text", {
+          x: x1 + 4,
+          y: y1 + 14,
+          fill: ma.color ?? defColor,
+          "font-size": 11
+        });
+        t.textContent = ma.label;
+        this._group.appendChild(t);
+      }
+    }
+    for (const ta of this._annCfg.texts ?? []) {
+      const x = toX(ta.x, nLabels);
+      const y = toY(ta.y);
+      const color = ta.color ?? c.theme.text;
+      if (ta.background) {
+        const bg = createSVGElement("rect", {
+          x: x - 3,
+          y: y - (ta.fontSize ?? 12),
+          width: ta.text.length * ((ta.fontSize ?? 12) * 0.6) + 6,
+          height: (ta.fontSize ?? 12) + 4,
+          fill: ta.background,
+          rx: 3
+        });
+        this._group.appendChild(bg);
+      }
+      const t = createSVGElement("text", {
+        x,
+        y,
+        fill: color,
+        "font-size": ta.fontSize ?? 12,
+        "font-weight": "bold"
+      });
+      t.textContent = ta.text;
+      this._group.appendChild(t);
+    }
+  }
+}
+const plugins = {
+  Tooltip: TooltipPlugin,
+  Legend: LegendPlugin,
+  Axis: AxisPlugin,
+  Grid: GridPlugin,
+  Crosshair: CrosshairPlugin,
+  DataLabels: DataLabelsPlugin,
+  Export: ExportPlugin,
+  Zoom: ZoomPlugin,
+  Annotation: AnnotationPlugin
+};
+export {
+  AnnotationPlugin as A,
+  BasePlugin as B,
+  CrosshairPlugin as C,
+  DataLabelsPlugin as D,
+  ExportPlugin as E,
+  GridPlugin as G,
+  LegendPlugin as L,
+  TooltipPlugin as T,
+  ZoomPlugin as Z,
+  clamp as a,
+  describeArc as b,
+  createSVGElement as c,
+  debounce as d,
+  flatMin as e,
+  flatMax as f,
+  plugins as g,
+  AxisPlugin as h,
+  merge as m,
+  polarToCartesian as p,
+  removeChildren as r,
+  throttle as t,
+  uid as u
+};