chartai 1.0.0 → 1.1.0

package/dist/plugins/experimental/annotations.js

@@ -0,0 +1,164 @@
+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/annotations.ts
+var DEFAULT_COLOR = "rgba(100,100,200,0.8)";
+function drawPill(ctx, txt, cx, cy, color, dark, fontFamily) {
+  ctx.font = `600 10px ${fontFamily}`;
+  const tw = ctx.measureText(txt).width;
+  const pw = tw + 12;
+  const ph = 18;
+  const px = cx - pw / 2;
+  const py = cy - ph / 2;
+  ctx.beginPath();
+  ctx.roundRect(px, py, pw, ph, 4);
+  ctx.fillStyle = dark ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.9)";
+  ctx.fill();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.setLineDash([]);
+  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(txt, cx, cy);
+}
+var annotationsPlugin = {
+  name: "annotations",
+  beforeDraw(ctx, chart) {
+    const annotations = chart.config.annotations ?? [];
+    const { width: w, height: h } = chart;
+    const m = MARGIN;
+    const dark = ChartManager.isDark;
+    const fontFamily = chart.config.fontFamily ?? DEFAULT_FONT;
+    const regions = annotations.filter((a) => a.type === "hregion" || a.type === "vregion");
+    if (regions.length === 0)
+      return;
+    ctx.save();
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(m.left, m.top, w - m.left - m.right, h - m.top - m.bottom);
+    ctx.clip();
+    for (const ann of regions) {
+      const color = ann.color ?? (dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)");
+      const { y: sy1 } = dataToScreen(0, ann.value, chart, w, h);
+      const { x: sx1 } = dataToScreen(ann.value, 0, chart, w, h);
+      const v2 = ann.value2 ?? ann.value;
+      const { y: sy2 } = dataToScreen(0, v2, chart, w, h);
+      const { x: sx2 } = dataToScreen(v2, 0, chart, w, h);
+      ctx.fillStyle = color;
+      if (ann.type === "hregion") {
+        const top = Math.min(sy1, sy2);
+        const bottom = Math.max(sy1, sy2);
+        ctx.fillRect(m.left, top, w - m.left - m.right, bottom - top);
+      } else {
+        const left = Math.min(sx1, sx2);
+        const right = Math.max(sx1, sx2);
+        ctx.fillRect(left, m.top, right - left, h - m.top - m.bottom);
+      }
+    }
+    ctx.restore();
+    for (const ann of regions) {
+      if (!ann.label)
+        continue;
+      const color = ann.color ?? (dark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.08)");
+      const { y: sy1 } = dataToScreen(0, ann.value, chart, w, h);
+      const { x: sx1 } = dataToScreen(ann.value, 0, chart, w, h);
+      const v2 = ann.value2 ?? ann.value;
+      const { y: sy2 } = dataToScreen(0, v2, chart, w, h);
+      const { x: sx2 } = dataToScreen(v2, 0, chart, w, h);
+      if (ann.type === "hregion") {
+        const cy = (sy1 + sy2) / 2;
+        if (cy < m.top - 9 || cy > h - m.bottom + 9)
+          continue;
+        ctx.font = `600 10px ${fontFamily}`;
+        const pw = ctx.measureText(ann.label).width + 12;
+        const cx = w - m.right - pw / 2 - 4;
+        drawPill(ctx, ann.label, cx, cy, color, dark, fontFamily);
+      } else {
+        ctx.font = `600 10px ${fontFamily}`;
+        const tw = ctx.measureText(ann.label).width;
+        const pw = tw + 12;
+        const cx = (sx1 + sx2) / 2;
+        if (cx < m.left - (pw / 2 + 2) || cx > w - m.right + (pw / 2 + 2))
+          continue;
+        const cy = h - m.bottom / 2;
+        drawPill(ctx, ann.label, cx, cy, color, dark, fontFamily);
+      }
+    }
+    ctx.restore();
+  },
+  afterDraw(ctx, chart) {
+    const annotations = chart.config.annotations ?? [];
+    const { width: w, height: h } = chart;
+    const m = MARGIN;
+    const dark = ChartManager.isDark;
+    const fontFamily = chart.config.fontFamily ?? DEFAULT_FONT;
+    const lines = annotations.filter((a) => a.type === "hline" || a.type === "vline");
+    if (lines.length === 0)
+      return;
+    ctx.save();
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(m.left, m.top, w - m.left - m.right, h - m.top - m.bottom);
+    ctx.clip();
+    for (const ann of lines) {
+      const color = ann.color ?? DEFAULT_COLOR;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = ann.lineWidth ?? 1.5;
+      ctx.setLineDash(ann.dash ?? []);
+      ctx.beginPath();
+      if (ann.type === "hline") {
+        const { y: sy } = dataToScreen(0, ann.value, chart, w, h);
+        ctx.moveTo(m.left, sy);
+        ctx.lineTo(w - m.right, sy);
+      } else {
+        const { x: sx } = dataToScreen(ann.value, 0, chart, w, h);
+        ctx.moveTo(sx, m.top);
+        ctx.lineTo(sx, h - m.bottom);
+      }
+      ctx.stroke();
+    }
+    ctx.restore();
+    for (const ann of lines) {
+      if (!ann.label)
+        continue;
+      const color = ann.color ?? DEFAULT_COLOR;
+      if (ann.type === "hline") {
+        const { y: sy } = dataToScreen(0, ann.value, chart, w, h);
+        if (sy < m.top - 9 || sy > h - m.bottom + 9)
+          continue;
+        ctx.font = `600 10px ${fontFamily}`;
+        const tw = ctx.measureText(ann.label).width;
+        const pw = tw + 12;
+        const cx = w - m.right - pw / 2 - 4;
+        drawPill(ctx, ann.label, cx, sy, color, dark, fontFamily);
+      } else {
+        const { x: sx } = dataToScreen(ann.value, 0, chart, w, h);
+        ctx.font = `600 10px ${fontFamily}`;
+        const tw = ctx.measureText(ann.label).width;
+        const pw = tw + 12;
+        if (sx < m.left - (pw / 2 + 2) || sx > w - m.right + (pw / 2 + 2))
+          continue;
+        const cy = h - m.bottom / 2;
+        drawPill(ctx, ann.label, sx, cy, color, dark, fontFamily);
+      }
+    }
+    ctx.restore();
+  }
+};
+export {
+  annotationsPlugin
+};

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

@@ -0,0 +1 @@
+import{j as K}from"../../chunk-cbydth3q.js";import{l as N}from"../../chunk-cvtt04m6.js";import{o as M}from"../../chunk-0eh4rzy9.js";import{q as E}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var R="rgba(100,100,200,0.8)";function D(j,H,I,z,B,u,Z){j.font=`600 10px ${Z}`;let W=j.measureText(H).width+12,q=18,Q=I-W/2,J=z-q/2;j.beginPath(),j.roundRect(Q,J,W,q,4),j.fillStyle=u?"rgba(0,0,0,0.7)":"rgba(255,255,255,0.9)",j.fill(),j.strokeStyle=B,j.lineWidth=1.5,j.setLineDash([]),j.stroke(),j.fillStyle=B,j.textAlign="center",j.textBaseline="middle",j.fillText(H,I,z)}var O={name:"annotations",beforeDraw(j,H){let I=H.config.annotations??[],{width:z,height:B}=H,u=M,Z=E.isDark,V=H.config.fontFamily??N,W=I.filter((q)=>q.type==="hregion"||q.type==="vregion");if(W.length===0)return;j.save(),j.save(),j.beginPath(),j.rect(u.left,u.top,z-u.left-u.right,B-u.top-u.bottom),j.clip();for(let q of W){let Q=q.color??(Z?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.08)"),{y:J}=K(0,q.value,H,z,B),{x:b}=K(q.value,0,H,z,B),X=q.value2??q.value,{y:$}=K(0,X,H,z,B),{x:C}=K(X,0,H,z,B);if(j.fillStyle=Q,q.type==="hregion"){let Y=Math.min(J,$),G=Math.max(J,$);j.fillRect(u.left,Y,z-u.left-u.right,G-Y)}else{let Y=Math.min(b,C),G=Math.max(b,C);j.fillRect(Y,u.top,G-Y,B-u.top-u.bottom)}}j.restore();for(let q of W){if(!q.label)continue;let Q=q.color??(Z?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.08)"),{y:J}=K(0,q.value,H,z,B),{x:b}=K(q.value,0,H,z,B),X=q.value2??q.value,{y:$}=K(0,X,H,z,B),{x:C}=K(X,0,H,z,B);if(q.type==="hregion"){let Y=(J+$)/2;if(Y<u.top-9||Y>B-u.bottom+9)continue;j.font=`600 10px ${V}`;let G=j.measureText(q.label).width+12,v=z-u.right-G/2-4;D(j,q.label,v,Y,Q,Z,V)}else{j.font=`600 10px ${V}`;let G=j.measureText(q.label).width+12,v=(b+C)/2;if(v<u.left-(G/2+2)||v>z-u.right+(G/2+2))continue;let U=B-u.bottom/2;D(j,q.label,v,U,Q,Z,V)}}j.restore()},afterDraw(j,H){let I=H.config.annotations??[],{width:z,height:B}=H,u=M,Z=E.isDark,V=H.config.fontFamily??N,W=I.filter((q)=>q.type==="hline"||q.type==="vline");if(W.length===0)return;j.save(),j.save(),j.beginPath(),j.rect(u.left,u.top,z-u.left-u.right,B-u.top-u.bottom),j.clip();for(let q of W){let Q=q.color??R;if(j.strokeStyle=Q,j.lineWidth=q.lineWidth??1.5,j.setLineDash(q.dash??[]),j.beginPath(),q.type==="hline"){let{y:J}=K(0,q.value,H,z,B);j.moveTo(u.left,J),j.lineTo(z-u.right,J)}else{let{x:J}=K(q.value,0,H,z,B);j.moveTo(J,u.top),j.lineTo(J,B-u.bottom)}j.stroke()}j.restore();for(let q of W){if(!q.label)continue;let Q=q.color??R;if(q.type==="hline"){let{y:J}=K(0,q.value,H,z,B);if(J<u.top-9||J>B-u.bottom+9)continue;j.font=`600 10px ${V}`;let X=j.measureText(q.label).width+12,$=z-u.right-X/2-4;D(j,q.label,$,J,Q,Z,V)}else{let{x:J}=K(q.value,0,H,z,B);j.font=`600 10px ${V}`;let X=j.measureText(q.label).width+12;if(J<u.left-(X/2+2)||J>z-u.right+(X/2+2))continue;let $=B-u.bottom/2;D(j,q.label,J,$,Q,Z,V)}}j.restore()}};export{O as annotationsPlugin};

package/dist/plugins/experimental/crosshair.js

@@ -0,0 +1,82 @@
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/crosshair.ts
+var states = new WeakMap;
+var crosshairPlugin = {
+  name: "crosshair",
+  install(chart, el) {
+    const ac = new AbortController;
+    const state = {
+      mouseX: 0,
+      mouseY: 0,
+      visible: false,
+      abort: ac
+    };
+    states.set(chart, state);
+    el.addEventListener("mousemove", (e) => {
+      e.preventDefault();
+      if (chart.dragging)
+        return;
+      const r = el.getBoundingClientRect();
+      state.mouseX = e.clientX - r.left;
+      state.mouseY = e.clientY - r.top;
+      state.visible = true;
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    ["mouseleave", "pointerdown"].forEach((ev) => el.addEventListener(ev, () => {
+      state.visible = false;
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal }));
+  },
+  afterDraw(ctx, chart) {
+    const state = states.get(chart);
+    if (!state?.visible)
+      return;
+    const cfg = chart.config;
+    const showX = cfg.crosshairX ?? true;
+    const showY = cfg.crosshairY ?? true;
+    if (!showX && !showY)
+      return;
+    const { width: w, height: h } = chart;
+    const m = MARGIN;
+    const dark = ChartManager.isDark;
+    const color = cfg.crosshairColor ?? (dark ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.3)");
+    const dash = cfg.crosshairDash ?? [4, 3];
+    const lineWidth = cfg.crosshairWidth ?? 1;
+    const { mouseX: mx, mouseY: my } = state;
+    if (mx < m.left || mx > w - m.right || my < m.top || my > h - m.bottom) {
+      state.visible = false;
+      return;
+    }
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.setLineDash(dash);
+    ctx.beginPath();
+    if (showX) {
+      ctx.moveTo(mx, m.top);
+      ctx.lineTo(mx, h - m.bottom);
+    }
+    if (showY) {
+      ctx.moveTo(m.left, my);
+      ctx.lineTo(w - m.right, my);
+    }
+    ctx.stroke();
+    ctx.restore();
+  },
+  uninstall(chart) {
+    const state = states.get(chart);
+    state?.abort.abort();
+    states.delete(chart);
+  }
+};
+export {
+  crosshairPlugin
+};

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

@@ -0,0 +1 @@
+import{o as g}from"../../chunk-0eh4rzy9.js";import{q as m}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var h=new WeakMap,w={name:"crosshair",install(e,s){let n=new AbortController,r={mouseX:0,mouseY:0,visible:!1,abort:n};h.set(e,r),s.addEventListener("mousemove",(o)=>{if(o.preventDefault(),e.dragging)return;let i=s.getBoundingClientRect();r.mouseX=o.clientX-i.left,r.mouseY=o.clientY-i.top,r.visible=!0,m.drawChart(e)},{signal:n.signal}),["mouseleave","pointerdown"].forEach((o)=>s.addEventListener(o,()=>{r.visible=!1,m.drawChart(e)},{signal:n.signal}))},afterDraw(e,s){let n=h.get(s);if(!n?.visible)return;let r=s.config,o=r.crosshairX??!0,i=r.crosshairY??!0;if(!o&&!i)return;let{width:u,height:b}=s,t=g,c=m.isDark,f=r.crosshairColor??(c?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.3)"),C=r.crosshairDash??[4,3],d=r.crosshairWidth??1,{mouseX:a,mouseY:l}=n;if(a<t.left||a>u-t.right||l<t.top||l>b-t.bottom){n.visible=!1;return}if(e.save(),e.strokeStyle=f,e.lineWidth=d,e.setLineDash(C),e.beginPath(),o)e.moveTo(a,t.top),e.lineTo(a,b-t.bottom);if(i)e.moveTo(t.left,l),e.lineTo(u-t.right,l);e.stroke(),e.restore()},uninstall(e){h.get(e)?.abort.abort(),h.delete(e)}};export{w as crosshairPlugin};

package/dist/plugins/experimental/minimap.js

@@ -0,0 +1,190 @@
+import {
+  MARGIN
+} from "../../chunk-831dem4f.js";
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/minimap.ts
+var states = new WeakMap;
+function getMinimapOrigin(pos, mSize, cw, ch) {
+  const pad = 8;
+  const m = MARGIN;
+  switch (pos) {
+    case "top-left":
+      return { mx: m.left + pad, my: m.top + pad };
+    case "top-right":
+      return { mx: cw - m.right - mSize - pad, my: m.top + pad };
+    case "bottom-left":
+      return { mx: m.left + pad, my: ch - m.bottom - mSize - pad };
+    case "bottom-right":
+      return { mx: cw - m.right - mSize - pad, my: ch - m.bottom - mSize - pad };
+  }
+}
+var minimapPlugin = {
+  name: "minimap",
+  install(chart, el) {
+    const ac = new AbortController;
+    states.set(chart, { abort: ac, drag: null, didDrag: false });
+    const getMinimapCoords = (e) => {
+      const cfg = chart.config;
+      const mSize = cfg.minimapSize ?? 120;
+      const pos = cfg.minimapPosition ?? "bottom-right";
+      const { width: cw, height: ch } = chart;
+      const r = el.getBoundingClientRect();
+      const scaleX = cw / r.width;
+      const scaleY = ch / r.height;
+      const cx = (e.clientX - r.left) * scaleX;
+      const cy = (e.clientY - r.top) * scaleY;
+      const { mx, my } = getMinimapOrigin(pos, mSize, cw, ch);
+      return { cx, cy, mx, my, mSize };
+    };
+    el.addEventListener("pointerdown", (e) => {
+      const { cx, cy, mx, my, mSize } = getMinimapCoords(e);
+      if (cx < mx || cx > mx + mSize || cy < my || cy > my + mSize)
+        return;
+      e.preventDefault();
+      e.stopPropagation();
+      el.setPointerCapture(e.pointerId);
+      const state = states.get(chart);
+      if (!state)
+        return;
+      const fx = (cx - mx) / mSize;
+      const fy = (cy - my) / mSize;
+      state.drag = {
+        startFx: fx,
+        startFy: fy,
+        startPanX: chart.view.panX,
+        startPanY: chart.view.panY
+      };
+    }, { signal: ac.signal });
+    window.addEventListener("pointermove", (e) => {
+      const state = states.get(chart);
+      if (!state?.drag)
+        return;
+      if (e.buttons === 0) {
+        state.drag = null;
+        return;
+      }
+      const { cx, cy, mx, my, mSize } = getMinimapCoords(e);
+      const fx = (cx - mx) / mSize;
+      const fy = (cy - my) / mSize;
+      const dfx = fx - state.drag.startFx;
+      const dfy = fy - state.drag.startFy;
+      const hv = chart.homeView;
+      chart.view.panX = Math.max(hv.panX, Math.min(hv.panX + 1 / hv.zoomX - 1 / chart.view.zoomX, state.drag.startPanX + dfx / hv.zoomX));
+      chart.view.panY = Math.max(hv.panY, Math.min(hv.panY + 1 / hv.zoomY - 1 / chart.view.zoomY, state.drag.startPanY - dfy / hv.zoomY));
+      if (Math.abs(dfx) > 0.005 || Math.abs(dfy) > 0.005)
+        state.didDrag = true;
+      ChartManager.requestRender(chart.id);
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    window.addEventListener("pointerup", () => {
+      const state = states.get(chart);
+      if (state) {
+        if (state.drag) {
+          setTimeout(() => {
+            if (state)
+              state.didDrag = false;
+          }, 50);
+        }
+        state.drag = null;
+      }
+    }, { signal: ac.signal });
+    el.addEventListener("click", (e) => {
+      const state = states.get(chart);
+      if (!state)
+        return;
+      if (state.didDrag) {
+        state.didDrag = false;
+        return;
+      }
+      const { cx, cy, mx, my, mSize } = getMinimapCoords(e);
+      if (cx < mx || cx > mx + mSize || cy < my || cy > my + mSize)
+        return;
+      e.preventDefault();
+      e.stopPropagation();
+      const fx = (cx - mx) / mSize;
+      const fy = (cy - my) / mSize;
+      const fyData = 1 - fy;
+      const hv = chart.homeView;
+      chart.view.panX = Math.max(hv.panX, Math.min(hv.panX + 1 / hv.zoomX - 1 / chart.view.zoomX, hv.panX + fx / hv.zoomX - 0.5 / chart.view.zoomX));
+      chart.view.panY = Math.max(hv.panY, Math.min(hv.panY + 1 / hv.zoomY - 1 / chart.view.zoomY, hv.panY + fyData / hv.zoomY - 0.5 / chart.view.zoomY));
+      ChartManager.requestRender(chart.id);
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+  },
+  afterDraw(ctx, chart) {
+    const cfg = chart.config;
+    const mSize = cfg.minimapSize ?? 120;
+    const opacity = cfg.minimapOpacity ?? 0.85;
+    const pos = cfg.minimapPosition ?? "bottom-right";
+    const { width: cw, height: ch } = chart;
+    const dark = ChartManager.isDark;
+    const { mx, my } = getMinimapOrigin(pos, mSize, cw, ch);
+    const mw = mSize;
+    const mh = mSize;
+    const borderR = 6;
+    const innerPad = 4;
+    ctx.save();
+    ctx.globalAlpha = opacity;
+    const bgColor = cfg.bgColor ?? (dark ? [0.11, 0.11, 0.12] : [0.98, 0.98, 0.98]);
+    ctx.fillStyle = `rgb(${bgColor.map((c) => Math.round(c * 255)).join(",")})`;
+    ctx.beginPath();
+    ctx.roundRect(mx, my, mw, mh, borderR);
+    ctx.fill();
+    ctx.strokeStyle = dark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.14)";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.roundRect(mx + 1, my + 1, mw - 2, mh - 2, borderR - 1);
+    ctx.clip();
+    const { bounds: b } = chart;
+    const rangeX = b.maxX - b.minX || 1;
+    const rangeY = b.maxY - b.minY || 1;
+    for (const series of chart.series) {
+      if (series.rawX.length === 0)
+        continue;
+      const { r, g, b: bv } = series.color;
+      ctx.strokeStyle = `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(bv * 255)},0.7)`;
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      const step = Math.max(1, Math.floor(series.rawX.length / mw));
+      for (let i = 0;i < series.rawX.length; i += step) {
+        const px = mx + innerPad + (series.rawX[i] - b.minX) / rangeX * (mw - innerPad * 2);
+        const py = my + innerPad + (1 - (series.rawY[i] - b.minY) / rangeY) * (mh - innerPad * 2);
+        if (i === 0)
+          ctx.moveTo(px, py);
+        else
+          ctx.lineTo(px, py);
+      }
+      ctx.stroke();
+    }
+    const { view: v } = chart;
+    const hv = chart.homeView;
+    const homeRangeX = 1 / hv.zoomX;
+    const homeRangeY = 1 / hv.zoomY;
+    const vx = mx + innerPad + (v.panX - hv.panX) * hv.zoomX * (mw - innerPad * 2);
+    const vy = my + innerPad + (1 - (v.panY - hv.panY) * hv.zoomY - 1 / v.zoomY / homeRangeY) * (mh - innerPad * 2);
+    const vw = 1 / v.zoomX / homeRangeX * (mw - innerPad * 2);
+    const vh = 1 / v.zoomY / homeRangeY * (mh - innerPad * 2);
+    ctx.fillStyle = dark ? "rgba(255,255,255,0.12)" : "rgba(0,100,255,0.1)";
+    ctx.fillRect(vx, vy, vw, vh);
+    ctx.strokeStyle = dark ? "rgba(255,255,255,0.5)" : "rgba(0,100,255,0.6)";
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(vx, vy, vw, vh);
+    ctx.restore();
+  },
+  uninstall(chart) {
+    const s = states.get(chart);
+    if (s) {
+      s.abort.abort();
+      states.delete(chart);
+    }
+  }
+};
+export {
+  minimapPlugin
+};

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

@@ -0,0 +1 @@
+import{o as M}from"../../chunk-0eh4rzy9.js";import{q as G}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var A=new WeakMap;function b(j,F,Q,W){let q=M;switch(j){case"top-left":return{mx:q.left+8,my:q.top+8};case"top-right":return{mx:Q-q.right-F-8,my:q.top+8};case"bottom-left":return{mx:q.left+8,my:W-q.bottom-F-8};case"bottom-right":return{mx:Q-q.right-F-8,my:W-q.bottom-F-8}}}var g={name:"minimap",install(j,F){let Q=new AbortController;A.set(j,{abort:Q,drag:null,didDrag:!1});let W=(B)=>{let q=j.config,L=q.minimapSize??120,T=q.minimapPosition??"bottom-right",{width:J,height:H}=j,E=F.getBoundingClientRect(),P=J/E.width,U=H/E.height,$=(B.clientX-E.left)*P,K=(B.clientY-E.top)*U,{mx:V,my:Z}=b(T,L,J,H);return{cx:$,cy:K,mx:V,my:Z,mSize:L}};F.addEventListener("pointerdown",(B)=>{let{cx:q,cy:L,mx:T,my:J,mSize:H}=W(B);if(q<T||q>T+H||L<J||L>J+H)return;B.preventDefault(),B.stopPropagation(),F.setPointerCapture(B.pointerId);let E=A.get(j);if(!E)return;let P=(q-T)/H,U=(L-J)/H;E.drag={startFx:P,startFy:U,startPanX:j.view.panX,startPanY:j.view.panY}},{signal:Q.signal}),window.addEventListener("pointermove",(B)=>{let q=A.get(j);if(!q?.drag)return;if(B.buttons===0){q.drag=null;return}let{cx:L,cy:T,mx:J,my:H,mSize:E}=W(B),P=(L-J)/E,U=(T-H)/E,$=P-q.drag.startFx,K=U-q.drag.startFy,V=j.homeView;if(j.view.panX=Math.max(V.panX,Math.min(V.panX+1/V.zoomX-1/j.view.zoomX,q.drag.startPanX+$/V.zoomX)),j.view.panY=Math.max(V.panY,Math.min(V.panY+1/V.zoomY-1/j.view.zoomY,q.drag.startPanY-K/V.zoomY)),Math.abs($)>0.005||Math.abs(K)>0.005)q.didDrag=!0;G.requestRender(j.id),G.drawChart(j)},{signal:Q.signal}),window.addEventListener("pointerup",()=>{let B=A.get(j);if(B){if(B.drag)setTimeout(()=>{if(B)B.didDrag=!1},50);B.drag=null}},{signal:Q.signal}),F.addEventListener("click",(B)=>{let q=A.get(j);if(!q)return;if(q.didDrag){q.didDrag=!1;return}let{cx:L,cy:T,mx:J,my:H,mSize:E}=W(B);if(L<J||L>J+E||T<H||T>H+E)return;B.preventDefault(),B.stopPropagation();let P=(L-J)/E,$=1-(T-H)/E,K=j.homeView;j.view.panX=Math.max(K.panX,Math.min(K.panX+1/K.zoomX-1/j.view.zoomX,K.panX+P/K.zoomX-0.5/j.view.zoomX)),j.view.panY=Math.max(K.panY,Math.min(K.panY+1/K.zoomY-1/j.view.zoomY,K.panY+$/K.zoomY-0.5/j.view.zoomY)),G.requestRender(j.id),G.drawChart(j)},{signal:Q.signal})},afterDraw(j,F){let Q=F.config,W=Q.minimapSize??120,B=Q.minimapOpacity??0.85,q=Q.minimapPosition??"bottom-right",{width:L,height:T}=F,J=G.isDark,{mx:H,my:E}=b(q,W,L,T),P=W,U=W,$=6,K=4;j.save(),j.globalAlpha=B;let V=Q.bgColor??(J?[0.11,0.11,0.12]:[0.98,0.98,0.98]);j.fillStyle=`rgb(${V.map((_)=>Math.round(_*255)).join(",")})`,j.beginPath(),j.roundRect(H,E,P,U,6),j.fill(),j.strokeStyle=J?"rgba(255,255,255,0.18)":"rgba(0,0,0,0.14)",j.lineWidth=1,j.stroke(),j.beginPath(),j.roundRect(H+1,E+1,P-2,U-2,5),j.clip();let{bounds:Z}=F,l=Z.maxX-Z.minX||1,d=Z.maxY-Z.minY||1;for(let _ of F.series){if(_.rawX.length===0)continue;let{r:p,g:o,b:w}=_.color;j.strokeStyle=`rgba(${Math.round(p*255)},${Math.round(o*255)},${Math.round(w*255)},0.7)`,j.lineWidth=1,j.beginPath();let n=Math.max(1,Math.floor(_.rawX.length/P));for(let N=0;N<_.rawX.length;N+=n){let Y=H+4+(_.rawX[N]-Z.minX)/l*(P-8),C=E+4+(1-(_.rawY[N]-Z.minY)/d)*(U-8);if(N===0)j.moveTo(Y,C);else j.lineTo(Y,C)}j.stroke()}let{view:I}=F,D=F.homeView,f=1/D.zoomX,u=1/D.zoomY,O=H+4+(I.panX-D.panX)*D.zoomX*(P-8),X=E+4+(1-(I.panY-D.panY)*D.zoomY-1/I.zoomY/u)*(U-8),k=1/I.zoomX/f*(P-8),R=1/I.zoomY/u*(U-8);j.fillStyle=J?"rgba(255,255,255,0.12)":"rgba(0,100,255,0.1)",j.fillRect(O,X,k,R),j.strokeStyle=J?"rgba(255,255,255,0.5)":"rgba(0,100,255,0.6)",j.lineWidth=1.5,j.strokeRect(O,X,k,R),j.restore()},uninstall(j){let F=A.get(j);if(F)F.abort.abort(),A.delete(j)}};export{g as minimapPlugin};

package/dist/plugins/experimental/range-selector.js

@@ -0,0 +1,220 @@
+import {
+  ChartManager
+} from "../../chunk-n8ew0z0e.js";
+import"../../chunk-93yrr7er.js";
+import"../../chunk-5gtx3pza.js";
+
+// src/plugins/experimental/range-selector.ts
+var states = new WeakMap;
+function drawMiniCanvas(chart, state) {
+  const { canvas, ctx } = state;
+  const w = canvas.width;
+  const h = canvas.height;
+  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]);
+  ctx.fillStyle = `rgb(${bgColor.map((c) => Math.round(c * 255)).join(",")})`;
+  ctx.fillRect(0, 0, w, h);
+  const { bounds: b } = chart;
+  const rangeX = b.maxX - b.minX || 1;
+  const rangeY = b.maxY - b.minY || 1;
+  for (const series of chart.series) {
+    if (series.rawX.length === 0)
+      continue;
+    const { r, g, b: bv } = series.color;
+    ctx.strokeStyle = `rgba(${Math.round(r * 255)},${Math.round(g * 255)},${Math.round(bv * 255)},0.7)`;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    const step = Math.max(1, Math.floor(series.rawX.length / w));
+    for (let i = 0;i < series.rawX.length; i += step) {
+      const sx = (series.rawX[i] - b.minX) / rangeX * w;
+      const sy = h - (series.rawY[i] - b.minY) / rangeY * h;
+      if (i === 0)
+        ctx.moveTo(sx, sy);
+      else
+        ctx.lineTo(sx, sy);
+    }
+    ctx.stroke();
+  }
+  const { view: v } = chart;
+  const hv = chart.homeView;
+  const homeRange = 1 / hv.zoomX;
+  const brushL = (v.panX - hv.panX) / homeRange * w;
+  const brushR = (v.panX - hv.panX + 1 / v.zoomX) / homeRange * w;
+  const brushColor = cfg.brushColor ?? (dark ? "rgba(255,255,255,0.12)" : "rgba(0,100,255,0.1)");
+  const brushBorder = dark ? "rgba(255,255,255,0.35)" : "rgba(0,100,255,0.5)";
+  ctx.fillStyle = dark ? "rgba(0,0,0,0.35)" : "rgba(255,255,255,0.5)";
+  ctx.fillRect(0, 0, brushL, h);
+  ctx.fillRect(brushR, 0, w - brushR, h);
+  ctx.fillStyle = brushColor;
+  ctx.fillRect(brushL, 0, brushR - brushL, h);
+  ctx.strokeStyle = brushBorder;
+  ctx.lineWidth = 1.5;
+  ctx.strokeRect(brushL, 0.75, brushR - brushL, h - 1.5);
+}
+var rangeSelectorPlugin = {
+  name: "range-selector",
+  install(chart, el) {
+    const cfg = chart.config;
+    const height = cfg.rangeSelectorHeight ?? 60;
+    const margin = cfg.rangeSelectorMargin ?? 4;
+    const ac = new AbortController;
+    const canvas = document.createElement("canvas");
+    canvas.style.cssText = `display:block;margin-top:${margin}px;`;
+    canvas.height = height;
+    canvas.width = el.offsetWidth || 400;
+    if (el.parentElement) {
+      el.parentElement.insertBefore(canvas, el.nextSibling);
+    }
+    const ctx2d = canvas.getContext("2d");
+    const state = {
+      canvas,
+      ctx: ctx2d,
+      abort: ac,
+      resizeObserver: null,
+      brushDrag: null
+    };
+    states.set(chart, state);
+    const getRelX = (e) => {
+      const rect = canvas.getBoundingClientRect();
+      return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    };
+    canvas.addEventListener("mousemove", (e) => {
+      if (state.brushDrag)
+        return;
+      const rx = getRelX(e);
+      const { view: v } = chart;
+      const hv = chart.homeView;
+      const homeRange = 1 / hv.zoomX;
+      const brushL = (v.panX - hv.panX) / homeRange;
+      const brushR = brushL + hv.zoomX / v.zoomX;
+      const edgeTol = 5 / canvas.getBoundingClientRect().width;
+      if (Math.abs(rx - brushL) < edgeTol || Math.abs(rx - brushR) < edgeTol) {
+        canvas.style.cursor = "ew-resize";
+      } else if (rx > brushL && rx < brushR) {
+        canvas.style.cursor = "grab";
+      } else {
+        canvas.style.cursor = "default";
+      }
+    }, { signal: ac.signal });
+    canvas.addEventListener("mousedown", (e) => {
+      const rx = getRelX(e);
+      const { view: v } = chart;
+      const hv = chart.homeView;
+      const homeRange = 1 / hv.zoomX;
+      const brushL = (v.panX - hv.panX) / homeRange;
+      const brushR = brushL + hv.zoomX / v.zoomX;
+      const edgeTol = 5 / canvas.getBoundingClientRect().width;
+      if (Math.abs(rx - brushL) < edgeTol) {
+        state.brushDrag = {
+          type: "left",
+          startX: rx,
+          startPanX: v.panX,
+          startZoomX: v.zoomX
+        };
+      } else if (Math.abs(rx - brushR) < edgeTol) {
+        state.brushDrag = {
+          type: "right",
+          startX: rx,
+          startPanX: v.panX,
+          startZoomX: v.zoomX
+        };
+      } else if (rx > brushL && rx < brushR) {
+        state.brushDrag = {
+          type: "move",
+          startX: rx,
+          startPanX: v.panX,
+          startZoomX: v.zoomX
+        };
+        canvas.style.cursor = "grabbing";
+      } else {
+        const hv2 = chart.homeView;
+        const homeRange2 = 1 / hv2.zoomX;
+        const brushWidth = 1 / v.zoomX;
+        const newPanX = Math.max(hv2.panX, Math.min(hv2.panX + homeRange2 - brushWidth, hv2.panX + rx * homeRange2 - brushWidth / 2));
+        chart.view.panX = newPanX;
+        ChartManager.requestRender(chart.id);
+        ChartManager.drawChart(chart);
+        drawMiniCanvas(chart, state);
+      }
+      e.preventDefault();
+    }, { signal: ac.signal });
+    window.addEventListener("mousemove", (e) => {
+      if (!state.brushDrag)
+        return;
+      const rect = canvas.getBoundingClientRect();
+      const rx = (e.clientX - rect.left) / rect.width;
+      const dx = rx - state.brushDrag.startX;
+      const { startPanX, startZoomX } = state.brushDrag;
+      const hv = chart.homeView;
+      const homeRange = 1 / hv.zoomX;
+      if (state.brushDrag.type === "move") {
+        chart.view.panX = Math.max(hv.panX, Math.min(hv.panX + homeRange - 1 / startZoomX, startPanX + dx * homeRange));
+      } else if (state.brushDrag.type === "left") {
+        const newLeft = Math.max(hv.panX, startPanX + dx * homeRange);
+        const newRight = startPanX + 1 / startZoomX;
+        if (newLeft < newRight - 0.01) {
+          chart.view.panX = newLeft;
+          chart.view.zoomX = Math.max(hv.zoomX, 1 / (newRight - newLeft));
+        }
+      } else if (state.brushDrag.type === "right") {
+        const newRight = Math.min(hv.panX + homeRange, startPanX + 1 / startZoomX + dx * homeRange);
+        if (newRight > startPanX + 0.01) {
+          chart.view.zoomX = Math.max(hv.zoomX, 1 / (newRight - startPanX));
+        }
+      }
+      ChartManager.requestRender(chart.id);
+      ChartManager.drawChart(chart);
+      drawMiniCanvas(chart, state);
+    }, { signal: ac.signal });
+    window.addEventListener("mouseup", (e) => {
+      state.brushDrag = null;
+      const rect = canvas.getBoundingClientRect();
+      const rx = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+      const { view: v } = chart;
+      const hv = chart.homeView;
+      const homeRange = 1 / hv.zoomX;
+      const brushL = (v.panX - hv.panX) / homeRange;
+      const brushR = brushL + hv.zoomX / v.zoomX;
+      const edgeTol = 5 / canvas.getBoundingClientRect().width;
+      if (Math.abs(rx - brushL) < edgeTol || Math.abs(rx - brushR) < edgeTol) {
+        canvas.style.cursor = "ew-resize";
+      } else if (rx > brushL && rx < brushR) {
+        canvas.style.cursor = "grab";
+      } else {
+        canvas.style.cursor = "default";
+      }
+    }, { signal: ac.signal });
+    const ro = new ResizeObserver(() => {
+      const w = el.offsetWidth;
+      if (w > 0)
+        canvas.width = w;
+      drawMiniCanvas(chart, state);
+    });
+    ro.observe(el);
+    state.resizeObserver = ro;
+    drawMiniCanvas(chart, state);
+  },
+  afterDraw(_, chart) {
+    const state = states.get(chart);
+    if (!state)
+      return;
+    const elW = chart.el.offsetWidth;
+    if (elW > 0 && state.canvas.width !== elW) {
+      state.canvas.width = elW;
+    }
+    drawMiniCanvas(chart, state);
+  },
+  uninstall(chart) {
+    const state = states.get(chart);
+    if (state) {
+      state.abort.abort();
+      state.resizeObserver.disconnect();
+      state.canvas.remove();
+      states.delete(chart);
+    }
+  }
+};
+export {
+  rangeSelectorPlugin
+};