chartai 0.0.11 → 1.0.0

package/dist/plugins/labels.js

@@ -1,102 +1,14 @@
 import {
-  ChartManager
-} from "../chart-library.js";
-import"../chunk-bgfkgcmg.js";
-
-// src/plugins/labels.ts
-var niceTicks = (min, max, count) => {
-  const range = max - min;
-  if (range <= 0)
-    return [min];
-  const rough = range / count, mag = 10 ** Math.floor(Math.log10(rough)), res = rough / mag;
-  const step = mag * (res <= 1.5 ? 1 : res <= 3 ? 2 : res <= 7 ? 5 : 10);
-  const ticks = [];
-  for (let v = Math.ceil(min / step) * step;v <= max; v += step)
-    ticks.push(v);
-  return ticks;
-};
-var getViewState = (chart) => {
-  const mgr = ChartManager.getInstance(), w = chart.width, h = chart.height, m = ChartManager.MARGIN;
-  const { bounds: b, view: v } = chart, fullX = b.maxX - b.minX, fullY = b.maxY - b.minY;
-  const rx = fullX / v.zoomX, ry = fullY / v.zoomY;
-  const mx = b.minX + v.panX * fullX, my = b.minY + v.panY * fullY;
-  const bgc = chart.bgColor ?? (mgr.isDark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
-  return {
-    w,
-    h,
-    m,
-    rx,
-    ry,
-    mx,
-    my,
-    bg: `${Math.round(bgc[0] * 255)},${Math.round(bgc[1] * 255)},${Math.round(bgc[2] * 255)}`,
-    font: chart.fontFamily ?? ChartManager.DEFAULT_FONT,
-    text: chart.textColor ?? (mgr.isDark ? "#c0c0c0" : "#333333"),
-    grid: chart.gridColor ?? (mgr.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)")
-  };
-};
-var labelsPlugin = {
-  name: "labels",
-  beforeDraw(ctx, chart) {
-    const { w, h, m, rx, ry, mx, my, grid } = getViewState(chart);
-    ctx.strokeStyle = grid;
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    niceTicks(my, my + ry, 7).forEach((v) => {
-      const y = h * (1 - (v - my) / ry);
-      if (y > 5 && y < h - m.bottom - 5) {
-        ctx.moveTo(m.left, y);
-        ctx.lineTo(w, y);
-      }
-    });
-    niceTicks(mx, mx + rx, 8).forEach((v) => {
-      const x = w * ((v - mx) / rx);
-      if (x > m.left && x < w) {
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, h - m.bottom);
-      }
-    });
-    ctx.stroke();
-  },
-  afterDraw(ctx, chart) {
-    const { w, h, m, rx, ry, mx, my, bg, font, text } = getViewState(chart);
-    const {
-      formatX = String,
-      formatY = String,
-      labelSize = ChartManager.DEFAULT_LABEL_SIZE
-    } = chart.config;
-    const drawFade = (dir, x, y, fw, fh) => {
-      const g = dir === "left" ? ctx.createLinearGradient(x, 0, x + fw, 0) : ctx.createLinearGradient(0, y, 0, y + fh);
-      const alphas = dir === "left" ? [1, 0.7, 0.2, 0.05, 0] : [0, 0.05, 0.2, 0.7, 1];
-      [0, 0.35, 0.55, 0.7, 1].forEach((s, i) => g.addColorStop(s, `rgba(${bg},${alphas[i]})`));
-      ctx.fillStyle = g;
-      ctx.fillRect(x, y, fw, fh);
-    };
-    drawFade("left", 0, 0, m.left + 20, h);
-    drawFade("bottom", 0, h - m.bottom - 20, w, m.bottom + 20);
-    ctx.font = `${labelSize}px ${font}`;
-    ctx.fillStyle = text;
-    ctx.textAlign = "right";
-    ctx.textBaseline = "middle";
-    niceTicks(my, my + ry, 7).forEach((v) => {
-      const y = h * (1 - (v - my) / ry);
-      if (y > 5 && y < h - m.bottom - 5)
-        ctx.fillText(formatY(v), m.left - 5, y);
-    });
-    ctx.textAlign = "right";
-    ctx.textBaseline = "top";
-    niceTicks(mx, mx + rx, 8).forEach((v) => {
-      const x = w * ((v - mx) / rx);
-      if (x < m.left - 10 || x > w + 30)
-        return;
-      ctx.save();
-      ctx.translate(x, h - m.bottom + 5);
-      ctx.rotate(-Math.PI / 14);
-      ctx.fillText(formatX(v), 0, 0);
-      ctx.restore();
-    });
-  }
-};
-export {
+  DEFAULT_FONT,
+  DEFAULT_LABEL_SIZE,
   labelsPlugin
+} from "../chunk-a27be8p9.js";
+import"../chunk-831dem4f.js";
+import"../chunk-g6m56ptf.js";
+import"../chunk-93yrr7er.js";
+import"../chunk-m17t3vjq.js";
+export {
+  labelsPlugin,
+  DEFAULT_LABEL_SIZE,
+  DEFAULT_FONT
 };

package/dist/plugins/labels.min.js

@@ -1 +1 @@
-import{a as d}from"../chart-library.js";import"../chunk-cj3zanvs.js";var c=(t,m,s)=>{let r=m-t;if(r<=0)return[t];let o=r/s,e=10**Math.floor(Math.log10(o)),n=o/e,a=e*(n<=1.5?1:n<=3?2:n<=7?5:10),l=[];for(let b=Math.ceil(t/a)*a;b<=m;b+=a)l.push(b);return l},S=(t)=>{let m=d.getInstance(),s=t.width,r=t.height,o=d.MARGIN,{bounds:e,view:n}=t,a=e.maxX-e.minX,l=e.maxY-e.minY,b=a/n.zoomX,h=l/n.zoomY,i=e.minX+n.panX*a,p=e.minY+n.panY*l,u=t.bgColor??(m.isDark?[0.11,0.11,0.12]:[0.98,0.98,0.98]);return{w:s,h:r,m:o,rx:b,ry:h,mx:i,my:p,bg:`${Math.round(u[0]*255)},${Math.round(u[1]*255)},${Math.round(u[2]*255)}`,font:t.fontFamily??d.DEFAULT_FONT,text:t.textColor??(m.isDark?"#c0c0c0":"#333333"),grid:t.gridColor??(m.isDark?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.06)")}},$={name:"labels",beforeDraw(t,m){let{w:s,h:r,m:o,rx:e,ry:n,mx:a,my:l,grid:b}=S(m);t.strokeStyle=b,t.lineWidth=1,t.beginPath(),c(l,l+n,7).forEach((h)=>{let i=r*(1-(h-l)/n);if(i>5&&i<r-o.bottom-5)t.moveTo(o.left,i),t.lineTo(s,i)}),c(a,a+e,8).forEach((h)=>{let i=s*((h-a)/e);if(i>o.left&&i<s)t.moveTo(i,0),t.lineTo(i,r-o.bottom)}),t.stroke()},afterDraw(t,m){let{w:s,h:r,m:o,rx:e,ry:n,mx:a,my:l,bg:b,font:h,text:i}=S(m),{formatX:p=String,formatY:u=String,labelSize:w=d.DEFAULT_LABEL_SIZE}=m.config,T=(g,f,y,C,E)=>{let M=g==="left"?t.createLinearGradient(f,0,f+C,0):t.createLinearGradient(0,y,0,y+E),k=g==="left"?[1,0.7,0.2,0.05,0]:[0,0.05,0.2,0.7,1];[0,0.35,0.55,0.7,1].forEach((D,X)=>M.addColorStop(D,`rgba(${b},${k[X]})`)),t.fillStyle=M,t.fillRect(f,y,C,E)};T("left",0,0,o.left+20,r),T("bottom",0,r-o.bottom-20,s,o.bottom+20),t.font=`${w}px ${h}`,t.fillStyle=i,t.textAlign="right",t.textBaseline="middle",c(l,l+n,7).forEach((g)=>{let f=r*(1-(g-l)/n);if(f>5&&f<r-o.bottom-5)t.fillText(u(g),o.left-5,f)}),t.textAlign="right",t.textBaseline="top",c(a,a+e,8).forEach((g)=>{let f=s*((g-a)/e);if(f<o.left-10||f>s+30)return;t.save(),t.translate(f,r-o.bottom+5),t.rotate(-Math.PI/14),t.fillText(p(g),0,0),t.restore()})}};export{$ as labelsPlugin};
+import{g as a,h as b,i as c}from"../chunk-qr6mweck.js";import"../chunk-e7d3zgw5.js";import"../chunk-94kc81rr.js";import"../chunk-bfyv7z27.js";import"../chunk-me3qaz3m.js";export{c as labelsPlugin,b as DEFAULT_LABEL_SIZE,a as DEFAULT_FONT};

package/dist/plugins/legend.d.ts

@@ -0,0 +1,16 @@
+import type { ChartPlugin } from "../types.ts";
+export interface LegendConfig {
+    maxLabelChars?: number;
+    fontFamily?: string;
+    labelSize?: number;
+    textColor?: string;
+    defaultOpen?: boolean;
+    alwaysOpen?: boolean;
+}
+declare module "../types.ts" {
+    interface ChartPluginRegistry {
+        legend: LegendConfig;
+    }
+}
+export declare const legendPlugin: ChartPlugin<LegendConfig>;
+//# sourceMappingURL=legend.d.ts.map

package/dist/plugins/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/plugins/legend.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAA8B,MAAM,aAAa,CAAC;AAI3E,MAAM,WAAW,YAAY;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,OAAO,QAAQ,aAAa,CAAC;IAC3B,UAAU,mBAAmB;QAC3B,MAAM,EAAE,YAAY,CAAC;KACtB;CACF;AAwED,eAAO,MAAM,YAAY,EAAE,WAAW,CAAC,YAAY,CAmGlD,CAAC"}

package/dist/plugins/legend.js

@@ -0,0 +1,282 @@
+import {
+  DEFAULT_FONT,
+  DEFAULT_LABEL_SIZE
+} from "../chunk-a27be8p9.js";
+import"../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../chunk-g6m56ptf.js";
+import"../chunk-93yrr7er.js";
+import"../chunk-m17t3vjq.js";
+
+// src/plugins/legend.ts
+var ICON_SIZE = 28;
+var PANEL_MAX_WIDTH = 220;
+var PANEL_MIN_WIDTH = 100;
+var DEFAULT_MAX_LABEL_CHARS = 24;
+var states = new WeakMap;
+function getLegendConfig(chart) {
+  return chart.config.legend ?? {};
+}
+function getLegendStyles(chart) {
+  const dark = ChartManager.isDark;
+  const bgc = chart.config.bgColor ?? (dark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
+  const rgb = `${Math.round(bgc[0] * 255)},${Math.round(bgc[1] * 255)},${Math.round(bgc[2] * 255)}`;
+  const border = dark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.14)";
+  const panelBg = dark ? `rgba(${rgb},0.95)` : "rgba(255,255,255,0.98)";
+  const closeBg = dark ? "rgba(0,0,0,0.35)" : "rgba(255,255,255,0.98)";
+  return {
+    panelBg,
+    panelBorder: border,
+    closeBg,
+    closeBgSolid: dark ? "rgba(0.2,0.2,0.22,0.98)" : "rgba(255,255,255,0.98)",
+    text: getLegendConfig(chart).textColor ?? chart.config.textColor ?? (dark ? "#c0c0c0" : "#333333"),
+    textMuted: dark ? "#888" : "#999",
+    font: getLegendConfig(chart).fontFamily ?? chart.config.fontFamily ?? DEFAULT_FONT,
+    labelSize: getLegendConfig(chart).labelSize ?? chart.config.labelSize ?? DEFAULT_LABEL_SIZE
+  };
+}
+var CLOSE_BTN_SIZE = Math.round(ICON_SIZE * 0.8);
+var PANEL_MAX_HEIGHT = 180;
+var LEGEND_HTML = `
+<div class="chart-legend-overlay" style="position:absolute;inset:0;pointer-events:none;z-index:20">
+  <div class="chart-legend-container" style="position:absolute;top:4px;right:4px;width:${ICON_SIZE}px;height:${ICON_SIZE}px;overflow:hidden;border-radius:50%;pointer-events:auto;transition:width .2s ease,height .2s ease,border-radius .2s ease">
+    <button type="button" class="chart-legend-icon" title="Legend" style="position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:none;border-radius:inherit;cursor:pointer;flex-shrink:0;transition:transform .18s ease,opacity .2s ease"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg></button>
+    <div class="chart-legend-panel" style="position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;border-radius:inherit;padding:10px 12px">
+      <div class="chart-legend-scroll" style="flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch">
+        <div class="chart-legend-list" style="display:flex;flex-direction:column;gap:4px"></div>
+      </div>
+    </div>
+  </div>
+  <button type="button" class="chart-legend-close" title="Close" style="position:absolute;top:-${CLOSE_BTN_SIZE / 2}px;right:-${CLOSE_BTN_SIZE / 2}px;width:${CLOSE_BTN_SIZE}px;height:${CLOSE_BTN_SIZE}px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;cursor:pointer;padding:0;pointer-events:none;opacity:0;visibility:hidden;transition:transform .12s ease,opacity .18s ease .1s;z-index:21;transform:translate(-50%,50%);"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
+</div>`;
+var legendPlugin = {
+  name: "legend",
+  install(chart, el) {
+    const ac = new AbortController;
+    const wrap = document.createElement("div");
+    wrap.innerHTML = LEGEND_HTML.trim();
+    const overlay = wrap.firstElementChild;
+    const container = overlay.querySelector(".chart-legend-container");
+    const iconBtn = container.querySelector(".chart-legend-icon");
+    const panel = container.querySelector(".chart-legend-panel");
+    const scrollArea = container.querySelector(".chart-legend-scroll");
+    const list = scrollArea.querySelector(".chart-legend-list");
+    const closeBtn = overlay.querySelector(".chart-legend-close");
+    el.appendChild(overlay);
+    iconBtn.addEventListener("mouseenter", () => {
+      iconBtn.style.transform = "scale(1.08)";
+    });
+    iconBtn.addEventListener("mouseleave", () => {
+      iconBtn.style.transform = "scale(1)";
+    });
+    const closeBase = "translate(-50%, 50%)";
+    closeBtn.addEventListener("mouseenter", () => {
+      closeBtn.style.transform = `${closeBase} scale(1.1)`;
+    });
+    closeBtn.addEventListener("mouseleave", () => {
+      closeBtn.style.transform = closeBase;
+    });
+    scrollArea.addEventListener("wheel", (e) => e.stopPropagation(), {
+      passive: false,
+      signal: ac.signal
+    });
+    const cfg = getLegendConfig(chart);
+    const alwaysOpen = cfg.alwaysOpen ?? false;
+    const defaultOpen = cfg.defaultOpen ?? false;
+    const s = {
+      overlay,
+      container,
+      iconBtn,
+      panel,
+      closeBtn,
+      scrollArea,
+      list,
+      open: alwaysOpen || defaultOpen,
+      abort: ac,
+      lastSeriesKey: "",
+      computedWidth: PANEL_MAX_WIDTH
+    };
+    states.set(chart, s);
+    if (!alwaysOpen) {
+      const toggle = () => {
+        s.open = !s.open;
+        applyOpenState(chart);
+      };
+      iconBtn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        toggle();
+      }, { capture: true, signal: ac.signal });
+      closeBtn.addEventListener("pointerdown", (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        s.open = false;
+        applyOpenState(chart);
+      }, { capture: true, signal: ac.signal });
+    }
+    applyStyles(chart);
+    syncSeries(chart);
+    applyOpenState(chart);
+  },
+  afterDraw(_, chart) {
+    applyStyles(chart);
+    syncSeries(chart);
+  },
+  uninstall(chart) {
+    const s = states.get(chart);
+    if (s) {
+      s.abort.abort();
+      s.overlay.remove();
+      states.delete(chart);
+    }
+  }
+};
+function applyStyles(chart) {
+  const s = states.get(chart);
+  if (!s)
+    return;
+  const styles = getLegendStyles(chart);
+  const border = `1px solid ${styles.panelBorder}`;
+  s.container.style.background = styles.panelBg;
+  s.container.style.border = border;
+  s.container.style.fontFamily = styles.font;
+  s.container.style.fontSize = `${styles.labelSize}px`;
+  s.container.style.color = styles.text;
+  s.iconBtn.style.background = styles.closeBg;
+  s.iconBtn.style.border = "none";
+  s.iconBtn.style.boxShadow = "none";
+  s.iconBtn.style.color = styles.text;
+  s.panel.style.background = styles.panelBg;
+  s.panel.style.fontFamily = styles.font;
+  s.panel.style.fontSize = `${styles.labelSize}px`;
+  s.panel.style.color = styles.text;
+  s.closeBtn.style.background = styles.closeBgSolid;
+  s.closeBtn.style.border = border;
+  s.closeBtn.style.boxShadow = "none";
+  s.closeBtn.style.color = styles.text;
+}
+function seriesKey(chart) {
+  return chart.series.map((s, i) => `${i}:${s.label}`).join("|");
+}
+function measureTextWidth(text, font, fontSize) {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    return 0;
+  ctx.font = `${fontSize}px ${font}`;
+  return ctx.measureText(text).width;
+}
+function computePanelWidth(chart, labels) {
+  const styles = getLegendStyles(chart);
+  const font = styles.font;
+  const fontSize = styles.labelSize;
+  const maxChars = getLegendConfig(chart).maxLabelChars ?? DEFAULT_MAX_LABEL_CHARS;
+  let maxW = 0;
+  for (const label of labels) {
+    const truncated = label.length > maxChars ? label.slice(0, maxChars - 1) + "…" : label;
+    const w = measureTextWidth(truncated, font, fontSize);
+    if (w > maxW)
+      maxW = w;
+  }
+  const swatchGap = 18;
+  const padding = 44;
+  const target = Math.ceil(maxW) + swatchGap + padding;
+  return Math.min(Math.max(target, PANEL_MIN_WIDTH), PANEL_MAX_WIDTH);
+}
+function syncSeries(chart) {
+  const s = states.get(chart);
+  if (!s)
+    return;
+  const series = chart.series;
+  const key = seriesKey(chart);
+  if (key === s.lastSeriesKey)
+    return;
+  s.lastSeriesKey = key;
+  const maxChars = getLegendConfig(chart).maxLabelChars ?? DEFAULT_MAX_LABEL_CHARS;
+  const labels = series.map((ser, i) => ser.label || `Series ${i + 1}`);
+  s.computedWidth = computePanelWidth(chart, labels);
+  const rowBase = "display:flex;align-items:center;gap:8px;min-width:0;padding-right:8px";
+  const rowAnim = ";opacity:0;transform:translateY(6px);animation:chart-legend-row-in .25s cubic-bezier(.34,1.2,.64,1) forwards";
+  const swatchStyle = "width:10px;height:10px;border-radius:2px;flex-shrink:0";
+  const labelStyle = "min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
+  const rows = series.map((ser, i) => {
+    const r = Math.round(ser.color.r * 255);
+    const g = Math.round(ser.color.g * 255);
+    const b = Math.round(ser.color.b * 255);
+    let label = ser.label || `Series ${i + 1}`;
+    if (label.length > maxChars)
+      label = label.slice(0, maxChars - 1) + "…";
+    const animDelay = Math.min(0.02 + i * 0.02, 0.02 + 7 * 0.02);
+    return `<div class="chart-legend-row" style="${rowBase}${rowAnim};animation-delay:${animDelay}s"><span class="chart-legend-swatch" style="${swatchStyle};background:rgb(${r},${g},${b})"></span><span class="chart-legend-label" style="${labelStyle}">${escapeHtml(label)}</span></div>`;
+  }).join("");
+  s.list.innerHTML = rows;
+  if (s.open) {
+    const packedH = s.list.scrollHeight + 20;
+    s.container.style.width = `${s.computedWidth}px`;
+    s.container.style.height = `${Math.min(PANEL_MAX_HEIGHT, packedH)}px`;
+  }
+}
+function escapeHtml(s) {
+  const div = document.createElement("div");
+  div.textContent = s;
+  return div.innerHTML;
+}
+function applyOpenState(chart) {
+  const s = states.get(chart);
+  if (!s)
+    return;
+  const alwaysOpen = getLegendConfig(chart).alwaysOpen ?? false;
+  const open = alwaysOpen || s.open;
+  s.container.style.width = open ? `${s.computedWidth}px` : `${ICON_SIZE}px`;
+  s.container.style.height = `${ICON_SIZE}px`;
+  s.container.style.borderRadius = open ? "8px" : "50%";
+  s.container.style.overflow = "hidden";
+  s.iconBtn.style.opacity = alwaysOpen ? "0" : open ? "0" : "1";
+  s.iconBtn.style.pointerEvents = alwaysOpen ? "none" : open ? "none" : "auto";
+  s.iconBtn.style.visibility = alwaysOpen ? "hidden" : "visible";
+  s.panel.style.display = open ? "flex" : "none";
+  s.closeBtn.style.opacity = alwaysOpen ? "0" : open ? "0" : "0";
+  s.closeBtn.style.pointerEvents = alwaysOpen ? "none" : open ? "auto" : "none";
+  s.closeBtn.style.visibility = alwaysOpen ? "hidden" : open ? "visible" : "hidden";
+  s.scrollArea.style.overflowY = "hidden";
+  if (open) {
+    const packedH = s.list.scrollHeight + 20;
+    s.container.style.height = `${Math.min(PANEL_MAX_HEIGHT, packedH)}px`;
+    const onHeightDone = (e) => {
+      if (e.propertyName !== "height")
+        return;
+      s.container.removeEventListener("transitionend", onHeightDone);
+      s.scrollArea.style.overflowY = "auto";
+    };
+    s.container.addEventListener("transitionend", onHeightDone);
+    if (!alwaysOpen) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          s.closeBtn.style.opacity = "1";
+        });
+      });
+    }
+  }
+}
+function injectLegendKeyframes() {
+  if (document.getElementById("chart-legend-keyframes"))
+    return;
+  const style = document.createElement("style");
+  style.id = "chart-legend-keyframes";
+  style.textContent = `
+    @keyframes chart-legend-row-in {
+      from { opacity: 0; transform: translateY(6px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .chart-legend-scroll::-webkit-scrollbar { width: 6px; }
+    .chart-legend-scroll::-webkit-scrollbar-track { background: transparent; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
+  `;
+  document.head.appendChild(style);
+}
+injectLegendKeyframes();
+export {
+  legendPlugin
+};

package/dist/plugins/legend.min.js

@@ -0,0 +1,21 @@
+import{g as N,h as f}from"../chunk-qr6mweck.js";import"../chunk-e7d3zgw5.js";import{l as T}from"../chunk-94kc81rr.js";import"../chunk-bfyv7z27.js";import"../chunk-me3qaz3m.js";var M=28,w=220,C=100,I=24,X=new WeakMap;function F(J){return J.config.legend??{}}function b(J){let q=T.isDark,Q=J.config.bgColor??(q?[0.11,0.11,0.12]:[0.98,0.98,0.98]),V=`${Math.round(Q[0]*255)},${Math.round(Q[1]*255)},${Math.round(Q[2]*255)}`,Y=q?"rgba(255,255,255,0.18)":"rgba(0,0,0,0.14)";return{panelBg:q?`rgba(${V},0.95)`:"rgba(255,255,255,0.98)",panelBorder:Y,closeBg:q?"rgba(0,0,0,0.35)":"rgba(255,255,255,0.98)",closeBgSolid:q?"rgba(0.2,0.2,0.22,0.98)":"rgba(255,255,255,0.98)",text:F(J).textColor??J.config.textColor??(q?"#c0c0c0":"#333333"),textMuted:q?"#888":"#999",font:F(J).fontFamily??J.config.fontFamily??N,labelSize:F(J).labelSize??J.config.labelSize??f}}var k=Math.round(M*0.8),B=180,A=`
+<div class="chart-legend-overlay" style="position:absolute;inset:0;pointer-events:none;z-index:20">
+  <div class="chart-legend-container" style="position:absolute;top:4px;right:4px;width:${M}px;height:${M}px;overflow:hidden;border-radius:50%;pointer-events:auto;transition:width .2s ease,height .2s ease,border-radius .2s ease">
+    <button type="button" class="chart-legend-icon" title="Legend" style="position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border:none;border-radius:inherit;cursor:pointer;flex-shrink:0;transition:transform .18s ease,opacity .2s ease"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M3 15h18"/></svg></button>
+    <div class="chart-legend-panel" style="position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;border-radius:inherit;padding:10px 12px">
+      <div class="chart-legend-scroll" style="flex:1;min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch">
+        <div class="chart-legend-list" style="display:flex;flex-direction:column;gap:4px"></div>
+      </div>
+    </div>
+  </div>
+  <button type="button" class="chart-legend-close" title="Close" style="position:absolute;top:-${k/2}px;right:-${k/2}px;width:${k}px;height:${k}px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;cursor:pointer;padding:0;pointer-events:none;opacity:0;visibility:hidden;transition:transform .12s ease,opacity .18s ease .1s;z-index:21;transform:translate(-50%,50%);"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg></button>
+</div>`,p={name:"legend",install(J,q){let Q=new AbortController,V=document.createElement("div");V.innerHTML=A.trim();let Y=V.firstElementChild,j=Y.querySelector(".chart-legend-container"),$=j.querySelector(".chart-legend-icon"),v=j.querySelector(".chart-legend-panel"),U=j.querySelector(".chart-legend-scroll"),W=U.querySelector(".chart-legend-list"),R=Y.querySelector(".chart-legend-close");q.appendChild(Y),$.addEventListener("mouseenter",()=>{$.style.transform="scale(1.08)"}),$.addEventListener("mouseleave",()=>{$.style.transform="scale(1)"});let K="translate(-50%, 50%)";R.addEventListener("mouseenter",()=>{R.style.transform=`${K} scale(1.1)`}),R.addEventListener("mouseleave",()=>{R.style.transform=K}),U.addEventListener("wheel",(G)=>G.stopPropagation(),{passive:!1,signal:Q.signal});let z=F(J),Z=z.alwaysOpen??!1,D=z.defaultOpen??!1,P={overlay:Y,container:j,iconBtn:$,panel:v,closeBtn:R,scrollArea:U,list:W,open:Z||D,abort:Q,lastSeriesKey:"",computedWidth:w};if(X.set(J,P),!Z){let G=()=>{P.open=!P.open,x(J)};$.addEventListener("pointerdown",(u)=>{u.stopPropagation(),u.preventDefault(),G()},{capture:!0,signal:Q.signal}),R.addEventListener("pointerdown",(u)=>{u.stopPropagation(),u.preventDefault(),P.open=!1,x(J)},{capture:!0,signal:Q.signal})}m(J),H(J),x(J)},afterDraw(J,q){m(q),H(q)},uninstall(J){let q=X.get(J);if(q)q.abort.abort(),q.overlay.remove(),X.delete(J)}};function m(J){let q=X.get(J);if(!q)return;let Q=b(J),V=`1px solid ${Q.panelBorder}`;q.container.style.background=Q.panelBg,q.container.style.border=V,q.container.style.fontFamily=Q.font,q.container.style.fontSize=`${Q.labelSize}px`,q.container.style.color=Q.text,q.iconBtn.style.background=Q.closeBg,q.iconBtn.style.border="none",q.iconBtn.style.boxShadow="none",q.iconBtn.style.color=Q.text,q.panel.style.background=Q.panelBg,q.panel.style.fontFamily=Q.font,q.panel.style.fontSize=`${Q.labelSize}px`,q.panel.style.color=Q.text,q.closeBtn.style.background=Q.closeBgSolid,q.closeBtn.style.border=V,q.closeBtn.style.boxShadow="none",q.closeBtn.style.color=Q.text}function O(J){return J.series.map((q,Q)=>`${Q}:${q.label}`).join("|")}function E(J,q,Q){let Y=document.createElement("canvas").getContext("2d");if(!Y)return 0;return Y.font=`${Q}px ${q}`,Y.measureText(J).width}function S(J,q){let Q=b(J),V=Q.font,Y=Q.labelSize,j=F(J).maxLabelChars??I,$=0;for(let R of q){let K=R.length>j?R.slice(0,j-1)+"…":R,z=E(K,V,Y);if(z>$)$=z}let v=18,U=44,W=Math.ceil($)+v+U;return Math.min(Math.max(W,C),w)}function H(J){let q=X.get(J);if(!q)return;let Q=J.series,V=O(J);if(V===q.lastSeriesKey)return;q.lastSeriesKey=V;let Y=F(J).maxLabelChars??I,j=Q.map((K,z)=>K.label||`Series ${z+1}`);q.computedWidth=S(J,j);let $="display:flex;align-items:center;gap:8px;min-width:0;padding-right:8px",v=";opacity:0;transform:translateY(6px);animation:chart-legend-row-in .25s cubic-bezier(.34,1.2,.64,1) forwards",U="width:10px;height:10px;border-radius:2px;flex-shrink:0",W="min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap",R=Q.map((K,z)=>{let Z=Math.round(K.color.r*255),D=Math.round(K.color.g*255),P=Math.round(K.color.b*255),G=K.label||`Series ${z+1}`;if(G.length>Y)G=G.slice(0,Y-1)+"…";let u=Math.min(0.02+z*0.02,0.16);return`<div class="chart-legend-row" style="${$}${v};animation-delay:${u}s"><span class="chart-legend-swatch" style="${U};background:rgb(${Z},${D},${P})"></span><span class="chart-legend-label" style="${W}">${L(G)}</span></div>`}).join("");if(q.list.innerHTML=R,q.open){let K=q.list.scrollHeight+20;q.container.style.width=`${q.computedWidth}px`,q.container.style.height=`${Math.min(B,K)}px`}}function L(J){let q=document.createElement("div");return q.textContent=J,q.innerHTML}function x(J){let q=X.get(J);if(!q)return;let Q=F(J).alwaysOpen??!1,V=Q||q.open;if(q.container.style.width=V?`${q.computedWidth}px`:`${M}px`,q.container.style.height=`${M}px`,q.container.style.borderRadius=V?"8px":"50%",q.container.style.overflow="hidden",q.iconBtn.style.opacity=Q?"0":V?"0":"1",q.iconBtn.style.pointerEvents=Q?"none":V?"none":"auto",q.iconBtn.style.visibility=Q?"hidden":"visible",q.panel.style.display=V?"flex":"none",q.closeBtn.style.opacity=Q?"0":V?"0":"0",q.closeBtn.style.pointerEvents=Q?"none":V?"auto":"none",q.closeBtn.style.visibility=Q?"hidden":V?"visible":"hidden",q.scrollArea.style.overflowY="hidden",V){let Y=q.list.scrollHeight+20;q.container.style.height=`${Math.min(B,Y)}px`;let j=($)=>{if($.propertyName!=="height")return;q.container.removeEventListener("transitionend",j),q.scrollArea.style.overflowY="auto"};if(q.container.addEventListener("transitionend",j),!Q)requestAnimationFrame(()=>{requestAnimationFrame(()=>{q.closeBtn.style.opacity="1"})})}}function d(){if(document.getElementById("chart-legend-keyframes"))return;let J=document.createElement("style");J.id="chart-legend-keyframes",J.textContent=`
+    @keyframes chart-legend-row-in {
+      from { opacity: 0; transform: translateY(6px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+    .chart-legend-scroll::-webkit-scrollbar { width: 6px; }
+    .chart-legend-scroll::-webkit-scrollbar-track { background: transparent; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
+    .chart-legend-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
+  `,document.head.appendChild(J)}d();export{p as legendPlugin};

package/dist/plugins/shared.d.ts

@@ -0,0 +1,7 @@
+export declare const MARGIN: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+//# sourceMappingURL=shared.d.ts.map

package/dist/plugins/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/plugins/shared.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;CAA8C,CAAC"}

package/dist/plugins/zoom.d.ts

@@ -1,6 +1,14 @@
-import type { ChartPlugin } from "../chart-library.ts";
+import type { ChartPlugin, ZoomMode } from "../types.ts";
+export interface ZoomConfig {
+    zoomMode?: ZoomMode;
+}
+declare module "../types.ts" {
+    interface ChartPluginRegistry {
+        zoom: ZoomConfig;
+    }
+}
 export interface ZoomPluginOptions {
     momentumDecay?: number;
 }
-export declare function zoomPlugin(opts?: ZoomPluginOptions): ChartPlugin;
+export declare function zoomPlugin(opts?: ZoomPluginOptions): ChartPlugin<ZoomConfig>;
 //# sourceMappingURL=zoom.d.ts.map

package/dist/plugins/zoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../src/plugins/zoom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,qBAAqB,CAAC;AAGtE,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CAAC,IAAI,GAAE,iBAAsB,GAAG,WAAW,CAkSpE"}
+{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../src/plugins/zoom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAiB,QAAQ,EAAE,MAAM,aAAa,CAAC;AAOxE,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;CACrB;AAED,OAAO,QAAQ,aAAa,CAAC;IAC3B,UAAU,mBAAmB;QAC3B,IAAI,EAAE,UAAU,CAAC;KAClB;CACF;AAED,MAAM,WAAW,iBAAiB;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,UAAU,CACxB,IAAI,GAAE,iBAAsB,GAC3B,WAAW,CAAC,UAAU,CAAC,CAiczB"}