chartai 1.0.0 → 1.1.0

package/dist/plugins/experimental/stats.js

@@ -0,0 +1,229 @@
+import {
+  DEFAULT_FONT
+} from "../../chunk-1ngxm8t2.js";
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/stats.ts
+var states = new WeakMap;
+function computeStats(values) {
+  if (values.length === 0)
+    return null;
+  let min = Infinity, max = -Infinity, sum = 0;
+  for (const v of values) {
+    if (v < min)
+      min = v;
+    if (v > max)
+      max = v;
+    sum += v;
+  }
+  const mean = sum / values.length;
+  let variance = 0;
+  for (const v of values) {
+    const d = v - mean;
+    variance += d * d;
+  }
+  const stddev = Math.sqrt(variance / values.length);
+  return { min, max, mean, stddev, count: values.length };
+}
+function updateOverlay(chart, state) {
+  const { overlay, header, body } = state;
+  const dark = ChartManager.isDark;
+  const cfg = chart.config;
+  const bgColor = cfg.bgColor ?? (dark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
+  const rgb = bgColor.map((c) => Math.round(c * 255)).join(",");
+  const panelBg = dark ? `rgba(${rgb},0.92)` : "rgba(255,255,255,0.95)";
+  const border = dark ? "rgba(255,255,255,0.14)" : "rgba(0,0,0,0.10)";
+  const text = cfg.textColor ?? (dark ? "#c0c0c0" : "#333333");
+  const muted = dark ? "#777" : "#aaa";
+  const font = cfg.fontFamily ?? DEFAULT_FONT;
+  const precision = cfg.statsPrecision ?? 2;
+  const fmt = cfg.formatValue ?? ((n) => n.toFixed(precision));
+  const pos = cfg.statsPosition ?? "top-left";
+  overlay.style.display = "block";
+  overlay.style.position = "absolute";
+  overlay.style.pointerEvents = "auto";
+  overlay.style.zIndex = "15";
+  overlay.style.background = panelBg;
+  overlay.style.border = `1px solid ${border}`;
+  overlay.style.borderRadius = "6px";
+  overlay.style.padding = "7px 10px";
+  overlay.style.fontFamily = font;
+  overlay.style.fontSize = "11px";
+  overlay.style.color = text;
+  overlay.style.minWidth = "100px";
+  overlay.style.userSelect = "none";
+  if (!state.dragOffset) {
+    const m = MARGIN;
+    const pad = 6;
+    if (state.customPos) {
+      overlay.style.top = `${state.customPos.y}px`;
+      overlay.style.left = `${state.customPos.x}px`;
+      overlay.style.right = "auto";
+      overlay.style.bottom = "auto";
+    } else {
+      overlay.style.right = "auto";
+      overlay.style.bottom = "auto";
+      overlay.style.top = "auto";
+      overlay.style.left = "auto";
+      if (pos === "top-left") {
+        overlay.style.top = `${m.top + pad}px`;
+        overlay.style.left = `${m.left + pad}px`;
+      }
+      if (pos === "top-right") {
+        overlay.style.top = `${m.top + pad}px`;
+        overlay.style.right = `${m.right + pad}px`;
+        overlay.style.left = "auto";
+      }
+      if (pos === "bottom-left") {
+        overlay.style.bottom = `${m.bottom + pad}px`;
+        overlay.style.left = `${m.left + pad}px`;
+        overlay.style.top = "auto";
+      }
+      if (pos === "bottom-right") {
+        overlay.style.bottom = `${m.bottom + pad}px`;
+        overlay.style.right = `${m.right + pad}px`;
+        overlay.style.top = "auto";
+        overlay.style.left = "auto";
+      }
+    }
+  }
+  if (state.collapsed) {
+    header.innerHTML = `<span style="color:${muted};font-size:10px;font-weight:600;letter-spacing:.04em;cursor:grab">STATS &#9660;</span>`;
+    body.innerHTML = "";
+    return;
+  }
+  const { bounds: b, view: v } = chart;
+  const fullX = b.maxX - b.minX;
+  const visMinX = b.minX + v.panX * fullX;
+  const visMaxX = visMinX + fullX / v.zoomX;
+  const allValues = [];
+  for (const s of chart.series) {
+    let lo = 0, hi = s.rawX.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (s.rawX[mid] < visMinX)
+        lo = mid + 1;
+      else
+        hi = mid;
+    }
+    const start = lo;
+    lo = 0;
+    hi = s.rawX.length;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (s.rawX[mid] <= visMaxX)
+        lo = mid + 1;
+      else
+        hi = mid;
+    }
+    const end = lo;
+    for (let i = start;i < end; i++)
+      allValues.push(s.rawY[i]);
+  }
+  const stats = computeStats(allValues);
+  if (!stats) {
+    overlay.style.display = "none";
+    return;
+  }
+  header.innerHTML = `<div style="margin-bottom:4px"><span style="color:${muted};font-size:10px;font-weight:600;letter-spacing:.04em;cursor:grab">STATS &#9650;</span></div>`;
+  body.innerHTML = `
+    <div style="display:grid;grid-template-columns:auto auto;gap:1px 10px">
+      <span style="color:${muted}">min</span><span>${fmt(stats.min)}</span>
+      <span style="color:${muted}">max</span><span>${fmt(stats.max)}</span>
+      <span style="color:${muted}">avg</span><span>${fmt(stats.mean)}</span>
+      <span style="color:${muted}">&#963;</span><span>${fmt(stats.stddev)}</span>
+      <span style="color:${muted}">n</span><span>${stats.count.toLocaleString()}</span>
+    </div>`;
+}
+var statsPlugin = {
+  name: "stats",
+  install(chart, el) {
+    const ac = new AbortController;
+    const overlay = document.createElement("div");
+    overlay.style.cssText = "position:absolute;pointer-events:auto;z-index:15;";
+    const header = document.createElement("div");
+    const body = document.createElement("div");
+    overlay.appendChild(header);
+    overlay.appendChild(body);
+    el.appendChild(overlay);
+    const state = { overlay, header, body, collapsed: false, abort: ac, dragOffset: null, customPos: null, tiltAngle: 0, tiltVelocity: 0, tiltRafId: null };
+    states.set(chart, state);
+    header.addEventListener("click", () => {
+      state.collapsed = !state.collapsed;
+      updateOverlay(chart, state);
+    }, { signal: ac.signal });
+    overlay.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      if (!state.customPos) {
+        state.customPos = { x: overlay.offsetLeft, y: overlay.offsetTop };
+        overlay.style.left = state.customPos.x + "px";
+        overlay.style.top = state.customPos.y + "px";
+        overlay.style.right = "auto";
+        overlay.style.bottom = "auto";
+      }
+      state.dragOffset = { x: 0, y: 0 };
+      if (state.tiltRafId !== null) {
+        cancelAnimationFrame(state.tiltRafId);
+        state.tiltRafId = null;
+      }
+      overlay.setPointerCapture(e.pointerId);
+      overlay.style.cursor = "grabbing";
+    }, { signal: ac.signal });
+    overlay.addEventListener("pointermove", (e) => {
+      if (!state.dragOffset || !state.customPos)
+        return;
+      const x = Math.max(0, Math.min(state.customPos.x + e.movementX, el.clientWidth - overlay.offsetWidth));
+      const y = Math.max(0, Math.min(state.customPos.y + e.movementY, el.clientHeight - overlay.offsetHeight));
+      state.customPos = { x, y };
+      overlay.style.left = x + "px";
+      overlay.style.top = y + "px";
+      state.tiltVelocity = state.tiltVelocity * 0.6 + e.movementX * 0.4;
+      state.tiltAngle = Math.max(-15, Math.min(15, state.tiltVelocity * 1.5));
+      overlay.style.transform = `rotate(${state.tiltAngle}deg)`;
+    }, { signal: ac.signal });
+    overlay.addEventListener("pointerup", () => {
+      state.dragOffset = null;
+      overlay.style.cursor = "";
+      const decayTilt = () => {
+        state.tiltAngle *= 0.78;
+        state.tiltVelocity *= 0.78;
+        if (Math.abs(state.tiltAngle) > 0.05) {
+          overlay.style.transform = `rotate(${state.tiltAngle}deg)`;
+          state.tiltRafId = requestAnimationFrame(decayTilt);
+        } else {
+          state.tiltAngle = 0;
+          state.tiltVelocity = 0;
+          overlay.style.transform = "";
+          state.tiltRafId = null;
+        }
+      };
+      state.tiltRafId = requestAnimationFrame(decayTilt);
+    }, { signal: ac.signal });
+  },
+  afterDraw(_, chart) {
+    const state = states.get(chart);
+    if (!state)
+      return;
+    updateOverlay(chart, state);
+  },
+  uninstall(chart) {
+    const state = states.get(chart);
+    if (state) {
+      if (state.tiltRafId !== null)
+        cancelAnimationFrame(state.tiltRafId);
+      state.abort.abort();
+      state.overlay.remove();
+      states.delete(chart);
+    }
+  }
+};
+export {
+  statsPlugin
+};

package/dist/plugins/experimental/stats.min.js

@@ -0,0 +1,8 @@
+import{l as V}from"../../chunk-cvtt04m6.js";import{o as N}from"../../chunk-0eh4rzy9.js";import{q as F}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var I=new WeakMap;function p(P){if(P.length===0)return null;let H=1/0,j=-1/0,z=0;for(let J of P){if(J<H)H=J;if(J>j)j=J;z+=J}let Z=z/P.length,Q=0;for(let J of P){let $=J-Z;Q+=$*$}let q=Math.sqrt(Q/P.length);return{min:H,max:j,mean:Z,stddev:q,count:P.length}}function A(P,H){let{overlay:j,header:z,body:Z}=H,Q=F.isDark,q=P.config,$=(q.bgColor??(Q?[0.11,0.11,0.12]:[0.98,0.98,0.98])).map((K)=>Math.round(K*255)).join(","),D=Q?`rgba(${$},0.92)`:"rgba(255,255,255,0.95)",O=Q?"rgba(255,255,255,0.14)":"rgba(0,0,0,0.10)",T=q.textColor??(Q?"#c0c0c0":"#333333"),w=Q?"#777":"#aaa",k=q.fontFamily??V,M=q.statsPrecision??2,E=q.formatValue??((K)=>K.toFixed(M)),G=q.statsPosition??"top-left";if(j.style.display="block",j.style.position="absolute",j.style.pointerEvents="auto",j.style.zIndex="15",j.style.background=D,j.style.border=`1px solid ${O}`,j.style.borderRadius="6px",j.style.padding="7px 10px",j.style.fontFamily=k,j.style.fontSize="11px",j.style.color=T,j.style.minWidth="100px",j.style.userSelect="none",!H.dragOffset){let K=N,Y=6;if(H.customPos)j.style.top=`${H.customPos.y}px`,j.style.left=`${H.customPos.x}px`,j.style.right="auto",j.style.bottom="auto";else{if(j.style.right="auto",j.style.bottom="auto",j.style.top="auto",j.style.left="auto",G==="top-left")j.style.top=`${K.top+6}px`,j.style.left=`${K.left+6}px`;if(G==="top-right")j.style.top=`${K.top+6}px`,j.style.right=`${K.right+6}px`,j.style.left="auto";if(G==="bottom-left")j.style.bottom=`${K.bottom+6}px`,j.style.left=`${K.left+6}px`,j.style.top="auto";if(G==="bottom-right")j.style.bottom=`${K.bottom+6}px`,j.style.right=`${K.right+6}px`,j.style.top="auto",j.style.left="auto"}}if(H.collapsed){z.innerHTML=`<span style="color:${w};font-size:10px;font-weight:600;letter-spacing:.04em;cursor:grab">STATS &#9660;</span>`,Z.innerHTML="";return}let{bounds:L,view:R}=P,S=L.maxX-L.minX,U=L.minX+R.panX*S,X=U+S/R.zoomX,_=[];for(let K of P.series){let Y=0,B=K.rawX.length;while(Y<B){let W=Y+B>>1;if(K.rawX[W]<U)Y=W+1;else B=W}let x=Y;Y=0,B=K.rawX.length;while(Y<B){let W=Y+B>>1;if(K.rawX[W]<=X)Y=W+1;else B=W}let b=Y;for(let W=x;W<b;W++)_.push(K.rawY[W])}let C=p(_);if(!C){j.style.display="none";return}z.innerHTML=`<div style="margin-bottom:4px"><span style="color:${w};font-size:10px;font-weight:600;letter-spacing:.04em;cursor:grab">STATS &#9650;</span></div>`,Z.innerHTML=`
+    <div style="display:grid;grid-template-columns:auto auto;gap:1px 10px">
+      <span style="color:${w}">min</span><span>${E(C.min)}</span>
+      <span style="color:${w}">max</span><span>${E(C.max)}</span>
+      <span style="color:${w}">avg</span><span>${E(C.mean)}</span>
+      <span style="color:${w}">&#963;</span><span>${E(C.stddev)}</span>
+      <span style="color:${w}">n</span><span>${C.count.toLocaleString()}</span>
+    </div>`}var u={name:"stats",install(P,H){let j=new AbortController,z=document.createElement("div");z.style.cssText="position:absolute;pointer-events:auto;z-index:15;";let Z=document.createElement("div"),Q=document.createElement("div");z.appendChild(Z),z.appendChild(Q),H.appendChild(z);let q={overlay:z,header:Z,body:Q,collapsed:!1,abort:j,dragOffset:null,customPos:null,tiltAngle:0,tiltVelocity:0,tiltRafId:null};I.set(P,q),Z.addEventListener("click",()=>{q.collapsed=!q.collapsed,A(P,q)},{signal:j.signal}),z.addEventListener("pointerdown",(J)=>{if(J.stopPropagation(),!q.customPos)q.customPos={x:z.offsetLeft,y:z.offsetTop},z.style.left=q.customPos.x+"px",z.style.top=q.customPos.y+"px",z.style.right="auto",z.style.bottom="auto";if(q.dragOffset={x:0,y:0},q.tiltRafId!==null)cancelAnimationFrame(q.tiltRafId),q.tiltRafId=null;z.setPointerCapture(J.pointerId),z.style.cursor="grabbing"},{signal:j.signal}),z.addEventListener("pointermove",(J)=>{if(!q.dragOffset||!q.customPos)return;let $=Math.max(0,Math.min(q.customPos.x+J.movementX,H.clientWidth-z.offsetWidth)),D=Math.max(0,Math.min(q.customPos.y+J.movementY,H.clientHeight-z.offsetHeight));q.customPos={x:$,y:D},z.style.left=$+"px",z.style.top=D+"px",q.tiltVelocity=q.tiltVelocity*0.6+J.movementX*0.4,q.tiltAngle=Math.max(-15,Math.min(15,q.tiltVelocity*1.5)),z.style.transform=`rotate(${q.tiltAngle}deg)`},{signal:j.signal}),z.addEventListener("pointerup",()=>{q.dragOffset=null,z.style.cursor="";let J=()=>{if(q.tiltAngle*=0.78,q.tiltVelocity*=0.78,Math.abs(q.tiltAngle)>0.05)z.style.transform=`rotate(${q.tiltAngle}deg)`,q.tiltRafId=requestAnimationFrame(J);else q.tiltAngle=0,q.tiltVelocity=0,z.style.transform="",q.tiltRafId=null};q.tiltRafId=requestAnimationFrame(J)},{signal:j.signal})},afterDraw(P,H){let j=I.get(H);if(!j)return;A(H,j)},uninstall(P){let H=I.get(P);if(H){if(H.tiltRafId!==null)cancelAnimationFrame(H.tiltRafId);H.abort.abort(),H.overlay.remove(),I.delete(P)}}};export{u as statsPlugin};

package/dist/plugins/experimental/threshold.js

@@ -0,0 +1,96 @@
+import {
+  dataToScreen
+} from "../../chunk-mmsy3yqt.js";
+import {
+  DEFAULT_FONT
+} from "../../chunk-1ngxm8t2.js";
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/threshold.ts
+var thresholdPlugin = {
+  name: "threshold",
+  beforeDraw(ctx, chart) {
+    const cfg = chart.config;
+    const thresholds = cfg.thresholds;
+    if (!thresholds?.length)
+      return;
+    const w = chart.width;
+    const h = chart.height;
+    const m = MARGIN;
+    for (const threshold of thresholds) {
+      if (!threshold.fillAbove && !threshold.fillBelow)
+        continue;
+      const sy = dataToScreen(0, threshold.y, chart, w, h).y;
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(m.left, m.top, w - m.left - m.right, h - m.top - m.bottom);
+      ctx.clip();
+      if (threshold.fillAbove) {
+        ctx.fillStyle = threshold.fillAbove;
+        ctx.fillRect(m.left, m.top, w - m.left - m.right, sy - m.top);
+      }
+      if (threshold.fillBelow) {
+        ctx.fillStyle = threshold.fillBelow;
+        ctx.fillRect(m.left, sy, w - m.left - m.right, h - m.bottom - sy);
+      }
+      ctx.restore();
+    }
+  },
+  afterDraw(ctx, chart) {
+    const cfg = chart.config;
+    const thresholds = cfg.thresholds;
+    if (!thresholds?.length)
+      return;
+    const w = chart.width;
+    const h = chart.height;
+    const m = MARGIN;
+    const dark = ChartManager.isDark;
+    const fontFamily = cfg.fontFamily ?? DEFAULT_FONT;
+    for (const threshold of thresholds) {
+      const sy = dataToScreen(0, threshold.y, chart, w, h).y;
+      if (sy < m.top || sy > h - m.bottom)
+        continue;
+      ctx.save();
+      ctx.strokeStyle = threshold.color;
+      ctx.lineWidth = threshold.lineWidth ?? 1.5;
+      ctx.setLineDash(threshold.dash ?? [5, 3]);
+      ctx.beginPath();
+      ctx.moveTo(m.left, sy);
+      ctx.lineTo(w - m.right, sy);
+      ctx.stroke();
+      ctx.restore();
+      if (threshold.label) {
+        ctx.save();
+        ctx.font = `600 10px ${fontFamily}`;
+        const tw = ctx.measureText(threshold.label).width;
+        const pw = tw + 10;
+        const ph = 17;
+        const px = w - m.right - pw - 4;
+        const py = sy - ph / 2;
+        ctx.beginPath();
+        ctx.roundRect(px, py, pw, ph, 3);
+        ctx.fillStyle = dark ? "rgba(20,20,22,0.88)" : "rgba(255,255,255,0.92)";
+        ctx.fill();
+        ctx.strokeStyle = threshold.color;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([]);
+        ctx.stroke();
+        ctx.fillStyle = threshold.color;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        ctx.fillText(threshold.label, px + 5, sy);
+        ctx.restore();
+      }
+    }
+  }
+};
+export {
+  thresholdPlugin
+};

package/dist/plugins/experimental/threshold.min.js

@@ -0,0 +1 @@
+import{j as d}from"../../chunk-cbydth3q.js";import{l as C}from"../../chunk-cvtt04m6.js";import{o as g}from"../../chunk-0eh4rzy9.js";import{q as y}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var S={name:"threshold",beforeDraw(e,l){let h=l.config.thresholds;if(!h?.length)return;let{width:r,height:n}=l,o=g;for(let t of h){if(!t.fillAbove&&!t.fillBelow)continue;let f=d(0,t.y,l,r,n).y;if(e.save(),e.beginPath(),e.rect(o.left,o.top,r-o.left-o.right,n-o.top-o.bottom),e.clip(),t.fillAbove)e.fillStyle=t.fillAbove,e.fillRect(o.left,o.top,r-o.left-o.right,f-o.top);if(t.fillBelow)e.fillStyle=t.fillBelow,e.fillRect(o.left,f,r-o.left-o.right,n-o.bottom-f);e.restore()}},afterDraw(e,l){let a=l.config,h=a.thresholds;if(!h?.length)return;let{width:r,height:n}=l,o=g,t=y.isDark,f=a.fontFamily??C;for(let i of h){let s=d(0,i.y,l,r,n).y;if(s<o.top||s>n-o.bottom)continue;if(e.save(),e.strokeStyle=i.color,e.lineWidth=i.lineWidth??1.5,e.setLineDash(i.dash??[5,3]),e.beginPath(),e.moveTo(o.left,s),e.lineTo(r-o.right,s),e.stroke(),e.restore(),i.label){e.save(),e.font=`600 10px ${f}`;let m=e.measureText(i.label).width+10,p=17,b=r-o.right-m-4,u=s-p/2;e.beginPath(),e.roundRect(b,u,m,p,3),e.fillStyle=t?"rgba(20,20,22,0.88)":"rgba(255,255,255,0.92)",e.fill(),e.strokeStyle=i.color,e.lineWidth=1,e.setLineDash([]),e.stroke(),e.fillStyle=i.color,e.textAlign="left",e.textBaseline="middle",e.fillText(i.label,b+5,s),e.restore()}}}};export{S as thresholdPlugin};

package/dist/plugins/experimental/tooltip-pin.js

@@ -0,0 +1,177 @@
+import {
+  dataToScreen,
+  screenToData
+} from "../../chunk-mmsy3yqt.js";
+import {
+  DEFAULT_FONT
+} from "../../chunk-1ngxm8t2.js";
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/tooltip-pin.ts
+var states = new WeakMap;
+var MAX_PIN_PX = 30;
+function findNearestPin(chart, screenX, screenY, width, height) {
+  if (chart.series.length === 0)
+    return null;
+  const { x: dataX, y: dataY } = screenToData(screenX, screenY, chart, width, height);
+  let bestSi = -1;
+  let bestIdx = -1;
+  let bestDx = Infinity;
+  let bestDy = Infinity;
+  for (let s = 0;s < chart.series.length; s++) {
+    const sr2 = chart.series[s];
+    const n = sr2.rawX.length;
+    if (n === 0)
+      continue;
+    let lo = 0, hi = n - 1;
+    while (lo < hi) {
+      const mid = lo + hi >> 1;
+      if (sr2.rawX[mid] < dataX)
+        lo = mid + 1;
+      else
+        hi = mid;
+    }
+    let idx = lo;
+    if (lo > 0 && Math.abs(sr2.rawX[lo - 1] - dataX) < Math.abs(sr2.rawX[lo] - dataX)) {
+      idx = lo - 1;
+    }
+    const dx = Math.abs(sr2.rawX[idx] - dataX);
+    const dy = Math.abs(sr2.rawY[idx] - dataY);
+    if (dx < bestDx || dx === bestDx && dy < bestDy) {
+      bestDx = dx;
+      bestDy = dy;
+      bestSi = s;
+      bestIdx = idx;
+    }
+  }
+  if (bestSi === -1)
+    return null;
+  const sr = chart.series[bestSi];
+  const { x: candidateSx, y: candidateSy } = dataToScreen(sr.rawX[bestIdx], sr.rawY[bestIdx], chart, width, height);
+  if (Math.hypot(candidateSx - screenX, candidateSy - screenY) > MAX_PIN_PX)
+    return null;
+  return {
+    dataX: sr.rawX[bestIdx],
+    dataY: sr.rawY[bestIdx],
+    seriesIndex: bestSi,
+    seriesLabel: sr.label,
+    color: sr.color
+  };
+}
+var tooltipPinPlugin = {
+  name: "tooltip-pin",
+  install(chart, el) {
+    const ac = new AbortController;
+    const state = { pins: [], abort: ac };
+    states.set(chart, state);
+    el.addEventListener("click", (e) => {
+      if (chart.dragging)
+        return;
+      const r = el.getBoundingClientRect();
+      const sx = e.clientX - r.left;
+      const sy = e.clientY - r.top;
+      for (let i = state.pins.length - 1;i >= 0; i--) {
+        const pin = state.pins[i];
+        const { x: pinSx, y: pinSy } = dataToScreen(pin.dataX, pin.dataY, chart, r.width, r.height);
+        if (Math.hypot(pinSx - sx, pinSy - sy) < 20) {
+          state.pins.splice(i, 1);
+          e.preventDefault();
+          ChartManager.drawChart(chart);
+          return;
+        }
+      }
+      const nearest = findNearestPin(chart, sx, sy, r.width, r.height);
+      if (!nearest)
+        return;
+      e.preventDefault();
+      const cfg = chart.config;
+      const maxPins = cfg.pinMax ?? 5;
+      if (state.pins.length >= maxPins)
+        state.pins.shift();
+      state.pins.push(nearest);
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+  },
+  afterDraw(ctx, chart) {
+    const state = states.get(chart);
+    if (!state || state.pins.length === 0)
+      return;
+    const w = chart.width;
+    const h = chart.height;
+    const m = MARGIN;
+    const dark = ChartManager.isDark;
+    const cfg = chart.config;
+    const formatX = cfg.formatX ?? String;
+    const formatY = cfg.formatY ?? String;
+    const fontFamily = cfg.fontFamily ?? DEFAULT_FONT;
+    ctx.save();
+    ctx.font = `500 10px ${fontFamily}`;
+    for (const pin of state.pins) {
+      const { x: pinSx, y: pinSy } = dataToScreen(pin.dataX, pin.dataY, chart, w, h);
+      const colRgb = `${Math.round(pin.color.r * 255)},${Math.round(pin.color.g * 255)},${Math.round(pin.color.b * 255)}`;
+      const col = `rgb(${colRgb})`;
+      ctx.save();
+      ctx.setLineDash([4, 3]);
+      ctx.strokeStyle = `rgba(${colRgb},0.4)`;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(pinSx, m.top);
+      ctx.lineTo(pinSx, h - m.bottom);
+      ctx.stroke();
+      ctx.restore();
+      ctx.beginPath();
+      ctx.arc(pinSx, pinSy, 5, 0, Math.PI * 2);
+      ctx.fillStyle = col;
+      ctx.fill();
+      ctx.strokeStyle = dark ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.8)";
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      const xLabel = formatX(pin.dataX);
+      const yLabel = `${pin.seriesLabel}: ${formatY(pin.dataY)}`;
+      ctx.font = `500 10px ${fontFamily}`;
+      const cardW = Math.max(ctx.measureText(xLabel).width, ctx.measureText(yLabel).width) + 20;
+      const cardH = 14 + 2 * 17;
+      let bx = pinSx + 10;
+      let by = pinSy - cardH - 8;
+      if (bx + cardW > w)
+        bx = pinSx - cardW - 10;
+      by = Math.max(m.top + 4, Math.min(h - m.bottom - cardH - 4, by));
+      ctx.beginPath();
+      ctx.roundRect(bx, by, cardW, cardH, 5);
+      ctx.fillStyle = dark ? "rgba(28,28,30,0.94)" : "rgba(255,255,255,0.96)";
+      ctx.fill();
+      ctx.strokeStyle = `rgba(${colRgb},0.4)`;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      ctx.fillStyle = col;
+      ctx.beginPath();
+      ctx.roundRect(bx, by, cardW, 3, [5, 5, 0, 0]);
+      ctx.fill();
+      ctx.font = `500 10px ${fontFamily}`;
+      ctx.textAlign = "left";
+      ctx.textBaseline = "middle";
+      ctx.fillStyle = dark ? "#888" : "#999";
+      ctx.fillText(xLabel, bx + 10, by + 10);
+      ctx.fillStyle = dark ? "#eee" : "#1a1a1a";
+      ctx.fillText(yLabel, bx + 10, by + 27);
+    }
+    ctx.restore();
+  },
+  uninstall(chart) {
+    const state = states.get(chart);
+    if (state) {
+      state.abort.abort();
+      states.delete(chart);
+    }
+  }
+};
+export {
+  tooltipPinPlugin
+};

package/dist/plugins/experimental/tooltip-pin.min.js

@@ -0,0 +1 @@
+import{j as X,k as $}from"../../chunk-cbydth3q.js";import{l as I}from"../../chunk-cvtt04m6.js";import{o as Y}from"../../chunk-0eh4rzy9.js";import{q as c}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var M=new WeakMap,k=30;function D(t,i,d,o,r){if(t.series.length===0)return null;let{x:e,y:p}=$(i,d,t,o,r),a=-1,l=-1,C=1/0,h=1/0;for(let g=0;g<t.series.length;g++){let m=t.series[g],S=m.rawX.length;if(S===0)continue;let s=0,y=S-1;while(s<y){let T=s+y>>1;if(m.rawX[T]<e)s=T+1;else y=T}let P=s;if(s>0&&Math.abs(m.rawX[s-1]-e)<Math.abs(m.rawX[s]-e))P=s-1;let b=Math.abs(m.rawX[P]-e),u=Math.abs(m.rawY[P]-p);if(b<C||b===C&&u<h)C=b,h=u,a=g,l=P}if(a===-1)return null;let n=t.series[a],{x:f,y:w}=X(n.rawX[l],n.rawY[l],t,o,r);if(Math.hypot(f-i,w-d)>k)return null;return{dataX:n.rawX[l],dataY:n.rawY[l],seriesIndex:a,seriesLabel:n.label,color:n.color}}var F={name:"tooltip-pin",install(t,i){let d=new AbortController,o={pins:[],abort:d};M.set(t,o),i.addEventListener("click",(r)=>{if(t.dragging)return;let e=i.getBoundingClientRect(),p=r.clientX-e.left,a=r.clientY-e.top;for(let n=o.pins.length-1;n>=0;n--){let f=o.pins[n],{x:w,y:g}=X(f.dataX,f.dataY,t,e.width,e.height);if(Math.hypot(w-p,g-a)<20){o.pins.splice(n,1),r.preventDefault(),c.drawChart(t);return}}let l=D(t,p,a,e.width,e.height);if(!l)return;r.preventDefault();let h=t.config.pinMax??5;if(o.pins.length>=h)o.pins.shift();o.pins.push(l),c.drawChart(t)},{signal:d.signal})},afterDraw(t,i){let d=M.get(i);if(!d||d.pins.length===0)return;let{width:o,height:r}=i,e=Y,p=c.isDark,a=i.config,l=a.formatX??String,C=a.formatY??String,h=a.fontFamily??I;t.save(),t.font=`500 10px ${h}`;for(let n of d.pins){let{x:f,y:w}=X(n.dataX,n.dataY,i,o,r),g=`${Math.round(n.color.r*255)},${Math.round(n.color.g*255)},${Math.round(n.color.b*255)}`,m=`rgb(${g})`;t.save(),t.setLineDash([4,3]),t.strokeStyle=`rgba(${g},0.4)`,t.lineWidth=1,t.beginPath(),t.moveTo(f,e.top),t.lineTo(f,r-e.bottom),t.stroke(),t.restore(),t.beginPath(),t.arc(f,w,5,0,Math.PI*2),t.fillStyle=m,t.fill(),t.strokeStyle=p?"rgba(0,0,0,0.5)":"rgba(255,255,255,0.8)",t.lineWidth=1.5,t.stroke();let S=l(n.dataX),s=`${n.seriesLabel}: ${C(n.dataY)}`;t.font=`500 10px ${h}`;let y=Math.max(t.measureText(S).width,t.measureText(s).width)+20,P=48,b=f+10,u=w-P-8;if(b+y>o)b=f-y-10;u=Math.max(e.top+4,Math.min(r-e.bottom-P-4,u)),t.beginPath(),t.roundRect(b,u,y,P,5),t.fillStyle=p?"rgba(28,28,30,0.94)":"rgba(255,255,255,0.96)",t.fill(),t.strokeStyle=`rgba(${g},0.4)`,t.lineWidth=1.5,t.stroke(),t.fillStyle=m,t.beginPath(),t.roundRect(b,u,y,3,[5,5,0,0]),t.fill(),t.font=`500 10px ${h}`,t.textAlign="left",t.textBaseline="middle",t.fillStyle=p?"#888":"#999",t.fillText(S,b+10,u+10),t.fillStyle=p?"#eee":"#1a1a1a",t.fillText(s,b+10,u+27)}t.restore()},uninstall(t){let i=M.get(t);if(i)i.abort.abort(),M.delete(t)}};export{F as tooltipPinPlugin};

package/dist/plugins/experimental/watermark.js

@@ -0,0 +1,76 @@
+import {
+  DEFAULT_FONT
+} from "../../chunk-1ngxm8t2.js";
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/watermark.ts
+var watermarkPlugin = {
+  name: "watermark",
+  beforeDraw(ctx, chart) {
+    const cfg = chart.config;
+    const text = cfg.watermarkText;
+    if (!text)
+      return;
+    const { width: w, height: h } = chart;
+    const m = MARGIN;
+    const chartW = w - m.left - m.right;
+    const chartH = h - m.top - m.bottom;
+    const position = cfg.watermarkPosition ?? "center";
+    const opacity = cfg.watermarkOpacity ?? 0.07;
+    const fontSize = cfg.watermarkFontSize ?? Math.max(12, Math.round(Math.min(chartW, chartH) * 0.06));
+    const dark = ChartManager.isDark;
+    const color = cfg.watermarkColor ?? (dark ? "#ffffff" : "#000000");
+    const fontFamily = cfg.fontFamily ?? DEFAULT_FONT;
+    const rotation = cfg.watermarkRotation ?? (position === "center" ? -30 : 0);
+    const pad = 16;
+    let x;
+    let y;
+    ctx.save();
+    ctx.globalAlpha = opacity;
+    ctx.font = `bold ${fontSize}px ${fontFamily}`;
+    ctx.fillStyle = color;
+    ctx.textBaseline = "middle";
+    switch (position) {
+      case "center":
+        x = m.left + chartW / 2;
+        y = m.top + chartH / 2;
+        ctx.textAlign = "center";
+        break;
+      case "top-left":
+        x = m.left + pad;
+        y = m.top + pad + fontSize / 2;
+        ctx.textAlign = "left";
+        break;
+      case "top-right":
+        x = w - m.right - pad;
+        y = m.top + pad + fontSize / 2;
+        ctx.textAlign = "right";
+        break;
+      case "bottom-left":
+        x = m.left + pad;
+        y = h - m.bottom - pad - fontSize / 2;
+        ctx.textAlign = "left";
+        break;
+      case "bottom-right":
+        x = w - m.right - pad;
+        y = h - m.bottom - pad - fontSize / 2;
+        ctx.textAlign = "right";
+        break;
+    }
+    ctx.translate(x, y);
+    if (rotation !== 0)
+      ctx.rotate(rotation * Math.PI / 180);
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+  }
+};
+export {
+  watermarkPlugin
+};

package/dist/plugins/experimental/watermark.min.js

@@ -0,0 +1 @@
+import{l as w}from"../../chunk-cvtt04m6.js";import{o as c}from"../../chunk-0eh4rzy9.js";import{q as b}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var W={name:"watermark",beforeDraw(t,l){let o=l.config,f=o.watermarkText;if(!f)return;let{width:m,height:s}=l,r=c,g=m-r.left-r.right,k=s-r.top-r.bottom,p=o.watermarkPosition??"center",u=o.watermarkOpacity??0.07,i=o.watermarkFontSize??Math.max(12,Math.round(Math.min(g,k)*0.06)),y=b.isDark,d=o.watermarkColor??(y?"#ffffff":"#000000"),P=o.fontFamily??w,h=o.watermarkRotation??(p==="center"?-30:0),e=16,a,n;switch(t.save(),t.globalAlpha=u,t.font=`bold ${i}px ${P}`,t.fillStyle=d,t.textBaseline="middle",p){case"center":a=r.left+g/2,n=r.top+k/2,t.textAlign="center";break;case"top-left":a=r.left+e,n=r.top+e+i/2,t.textAlign="left";break;case"top-right":a=m-r.right-e,n=r.top+e+i/2,t.textAlign="right";break;case"bottom-left":a=r.left+e,n=s-r.bottom-e-i/2,t.textAlign="left";break;case"bottom-right":a=m-r.right-e,n=s-r.bottom-e-i/2,t.textAlign="right";break}if(t.translate(a,n),h!==0)t.rotate(h*Math.PI/180);t.fillText(f,0,0),t.restore()}};export{W as watermarkPlugin};

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

@@ -1 +1 @@
-{"version":3,"file":"hover.d.ts","sourceRoot":"","sources":["../../src/plugins/hover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAiB,SAAS,EAAE,MAAM,aAAa,CAAC;AAkEzE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,OAAO,QAAQ,aAAa,CAAC;IAC3B,UAAU,mBAAmB;QAC3B,KAAK,EAAE,WAAW,CAAC;KACpB;CACF;AAiCD,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,WAAW,CAiPhD,CAAC"}
+{"version":3,"file":"hover.d.ts","sourceRoot":"","sources":["../../src/plugins/hover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAiB,SAAS,EAAE,MAAM,aAAa,CAAC;AAyEzE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACrC;AAED,OAAO,QAAQ,aAAa,CAAC;IAC3B,UAAU,mBAAmB;QAC3B,KAAK,EAAE,WAAW,CAAC;KACpB;CACF;AAiCD,eAAO,MAAM,WAAW,EAAE,WAAW,CAAC,WAAW,CAkPhD,CAAC"}