chartai 0.1.0 → 1.1.0

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
+};

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

@@ -0,0 +1 @@
+import{q as w}from"../../chunk-50bcv2hw.js";import"../../chunk-wdfq2fpx.js";import"../../chunk-bbyt23tw.js";var x=new WeakMap;function R(e,c){let{canvas:X,ctx:s}=c,d=X.width,b=X.height,t=w.isDark,C=e.config,i=C.bgColor??(t?[0.11,0.11,0.12]:[0.98,0.98,0.98]);s.fillStyle=`rgb(${i.map((o)=>Math.round(o*255)).join(",")})`,s.fillRect(0,0,d,b);let{bounds:f}=e,M=f.maxX-f.minX||1,u=f.maxY-f.minY||1;for(let o of e.series){if(o.rawX.length===0)continue;let{r:v,g:z,b:y}=o.color;s.strokeStyle=`rgba(${Math.round(v*255)},${Math.round(z*255)},${Math.round(y*255)},0.7)`,s.lineWidth=1,s.beginPath();let P=Math.max(1,Math.floor(o.rawX.length/d));for(let p=0;p<o.rawX.length;p+=P){let S=(o.rawX[p]-f.minX)/M*d,D=b-(o.rawY[p]-f.minY)/u*b;if(p===0)s.moveTo(S,D);else s.lineTo(S,D)}s.stroke()}let{view:n}=e,r=e.homeView,m=1/r.zoomX,a=(n.panX-r.panX)/m*d,g=(n.panX-r.panX+1/n.zoomX)/m*d,l=C.brushColor??(t?"rgba(255,255,255,0.12)":"rgba(0,100,255,0.1)"),h=t?"rgba(255,255,255,0.35)":"rgba(0,100,255,0.5)";s.fillStyle=t?"rgba(0,0,0,0.35)":"rgba(255,255,255,0.5)",s.fillRect(0,0,a,b),s.fillRect(g,0,d-g,b),s.fillStyle=l,s.fillRect(a,0,g-a,b),s.strokeStyle=h,s.lineWidth=1.5,s.strokeRect(a,0.75,g-a,b-1.5)}var L={name:"range-selector",install(e,c){let X=e.config,s=X.rangeSelectorHeight??60,d=X.rangeSelectorMargin??4,b=new AbortController,t=document.createElement("canvas");if(t.style.cssText=`display:block;margin-top:${d}px;`,t.height=s,t.width=c.offsetWidth||400,c.parentElement)c.parentElement.insertBefore(t,c.nextSibling);let C=t.getContext("2d"),i={canvas:t,ctx:C,abort:b,resizeObserver:null,brushDrag:null};x.set(e,i);let f=(u)=>{let n=t.getBoundingClientRect();return Math.max(0,Math.min(1,(u.clientX-n.left)/n.width))};t.addEventListener("mousemove",(u)=>{if(i.brushDrag)return;let n=f(u),{view:r}=e,m=e.homeView,a=1/m.zoomX,g=(r.panX-m.panX)/a,l=g+m.zoomX/r.zoomX,h=5/t.getBoundingClientRect().width;if(Math.abs(n-g)<h||Math.abs(n-l)<h)t.style.cursor="ew-resize";else if(n>g&&n<l)t.style.cursor="grab";else t.style.cursor="default"},{signal:b.signal}),t.addEventListener("mousedown",(u)=>{let n=f(u),{view:r}=e,m=e.homeView,a=1/m.zoomX,g=(r.panX-m.panX)/a,l=g+m.zoomX/r.zoomX,h=5/t.getBoundingClientRect().width;if(Math.abs(n-g)<h)i.brushDrag={type:"left",startX:n,startPanX:r.panX,startZoomX:r.zoomX};else if(Math.abs(n-l)<h)i.brushDrag={type:"right",startX:n,startPanX:r.panX,startZoomX:r.zoomX};else if(n>g&&n<l)i.brushDrag={type:"move",startX:n,startPanX:r.panX,startZoomX:r.zoomX},t.style.cursor="grabbing";else{let o=e.homeView,v=1/o.zoomX,z=1/r.zoomX,y=Math.max(o.panX,Math.min(o.panX+v-z,o.panX+n*v-z/2));e.view.panX=y,w.requestRender(e.id),w.drawChart(e),R(e,i)}u.preventDefault()},{signal:b.signal}),window.addEventListener("mousemove",(u)=>{if(!i.brushDrag)return;let n=t.getBoundingClientRect(),m=(u.clientX-n.left)/n.width-i.brushDrag.startX,{startPanX:a,startZoomX:g}=i.brushDrag,l=e.homeView,h=1/l.zoomX;if(i.brushDrag.type==="move")e.view.panX=Math.max(l.panX,Math.min(l.panX+h-1/g,a+m*h));else if(i.brushDrag.type==="left"){let o=Math.max(l.panX,a+m*h),v=a+1/g;if(o<v-0.01)e.view.panX=o,e.view.zoomX=Math.max(l.zoomX,1/(v-o))}else if(i.brushDrag.type==="right"){let o=Math.min(l.panX+h,a+1/g+m*h);if(o>a+0.01)e.view.zoomX=Math.max(l.zoomX,1/(o-a))}w.requestRender(e.id),w.drawChart(e),R(e,i)},{signal:b.signal}),window.addEventListener("mouseup",(u)=>{i.brushDrag=null;let n=t.getBoundingClientRect(),r=Math.max(0,Math.min(1,(u.clientX-n.left)/n.width)),{view:m}=e,a=e.homeView,g=1/a.zoomX,l=(m.panX-a.panX)/g,h=l+a.zoomX/m.zoomX,o=5/t.getBoundingClientRect().width;if(Math.abs(r-l)<o||Math.abs(r-h)<o)t.style.cursor="ew-resize";else if(r>l&&r<h)t.style.cursor="grab";else t.style.cursor="default"},{signal:b.signal});let M=new ResizeObserver(()=>{let u=c.offsetWidth;if(u>0)t.width=u;R(e,i)});M.observe(c),i.resizeObserver=M,R(e,i)},afterDraw(e,c){let X=x.get(c);if(!X)return;let s=c.el.offsetWidth;if(s>0&&X.canvas.width!==s)X.canvas.width=s;R(c,X)},uninstall(e){let c=x.get(e);if(c)c.abort.abort(),c.resizeObserver.disconnect(),c.canvas.remove(),x.delete(e)}};export{L as rangeSelectorPlugin};

package/dist/plugins/experimental/ruler.js

@@ -0,0 +1,434 @@
+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/ruler.ts
+var states = new WeakMap;
+var ENDPOINT_HIT_PX = 12;
+function showClearBtn(btn, visible) {
+  const isVisible = btn.hasAttribute("data-visible");
+  if (visible === isVisible)
+    return;
+  btn.style.transform = "";
+  if (visible) {
+    btn.setAttribute("data-visible", "");
+  } else {
+    btn.removeAttribute("data-visible");
+  }
+}
+function injectRulerStyles() {
+  if (document.getElementById("chart-ruler-styles"))
+    return;
+  const style = document.createElement("style");
+  style.id = "chart-ruler-styles";
+  style.textContent = `
+@layer chartai.ruler {
+  .chart-ruler-wrapper {
+    position: absolute;
+    z-index: 1000;
+    pointer-events: none;
+    display: inline-block;
+  }
+  .chart-ruler-btn {
+    position: relative;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1.5px solid var(--ruler-btn-border);
+    background: var(--ruler-btn-bg);
+    color: var(--ruler-btn-color);
+    z-index: 100;
+    cursor: pointer;
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
+  }
+  .chart-ruler-btn[data-active] {
+    --ruler-btn-border: var(--ruler-active-border);
+    --ruler-btn-bg: var(--ruler-active-bg);
+    --ruler-btn-color: var(--ruler-active-color);
+  }
+  .chart-ruler-clear {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid oklch(from var(--ruler-active-color) calc(l * 0.7) c h / 1);
+    background: oklch(from var(--ruler-active-color) calc(l * 0.22) c h / 1);
+    color: var(--ruler-active-color);
+    z-index: 101;
+    cursor: pointer;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
+    opacity: 0;
+    transform: scale(0.5);
+    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.4, 0, 1, 1);
+  }
+  .chart-ruler-clear[data-visible] {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+    transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}`;
+  document.head.appendChild(style);
+}
+function applyTheme(el, dark) {
+  const s = el.style;
+  if (dark) {
+    s.setProperty("--ruler-btn-border", "rgba(255,255,255,0.2)");
+    s.setProperty("--ruler-btn-bg", "rgba(30,30,32,0.88)");
+    s.setProperty("--ruler-btn-color", "rgba(200,200,200,0.9)");
+    s.setProperty("--ruler-active-border", "rgba(255,200,50,0.8)");
+    s.setProperty("--ruler-active-bg", "rgba(255,200,50,0.2)");
+    s.setProperty("--ruler-active-color", "rgba(255,200,50,0.95)");
+    s.setProperty("--ruler-clear-border", "rgba(255,255,255,0.18)");
+    s.setProperty("--ruler-clear-bg", "rgba(30,30,32,0.95)");
+    s.setProperty("--ruler-clear-color", "rgba(200,200,200,0.9)");
+  } else {
+    s.setProperty("--ruler-btn-border", "rgba(0,0,0,0.15)");
+    s.setProperty("--ruler-btn-bg", "rgba(255,255,255,0.92)");
+    s.setProperty("--ruler-btn-color", "rgba(80,80,80,0.9)");
+    s.setProperty("--ruler-active-border", "rgba(180,100,0,0.8)");
+    s.setProperty("--ruler-active-bg", "rgba(180,100,0,0.12)");
+    s.setProperty("--ruler-active-color", "rgba(180,100,0,0.95)");
+    s.setProperty("--ruler-clear-border", "rgba(0,0,0,0.13)");
+    s.setProperty("--ruler-clear-bg", "rgba(255,255,255,0.97)");
+    s.setProperty("--ruler-clear-color", "rgba(80,80,80,0.9)");
+  }
+}
+function setWrapperPosition(el, pos = "bottom-right") {
+  const m = MARGIN;
+  const pad = 8;
+  el.style.removeProperty("top");
+  el.style.removeProperty("bottom");
+  el.style.removeProperty("left");
+  el.style.removeProperty("right");
+  switch (pos) {
+    case "top-left":
+      el.style.top = `${m.top + pad}px`;
+      el.style.left = `${m.left + pad}px`;
+      break;
+    case "top-right":
+      el.style.top = `${m.top + pad}px`;
+      el.style.right = `${m.right + pad}px`;
+      break;
+    case "bottom-right":
+      el.style.bottom = `${m.bottom + pad}px`;
+      el.style.right = `${m.right + pad}px`;
+      break;
+    default:
+      el.style.bottom = `${m.bottom + pad}px`;
+      el.style.left = `${m.left + pad}px`;
+  }
+}
+function drawPill(ctx, text, cx, cy, color, fontFamily, dark) {
+  ctx.font = `500 11px ${fontFamily}`;
+  const tw = ctx.measureText(text).width;
+  const pw = tw + 16;
+  const ph = 20;
+  const px = cx - pw / 2;
+  const py = cy - ph / 2;
+  ctx.beginPath();
+  ctx.roundRect(px, py, pw, ph, 5);
+  ctx.fillStyle = dark ? "rgba(20,20,22,0.90)" : "rgba(255,255,255,0.95)";
+  ctx.fill();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, cx, cy);
+}
+function drawEndpoint(ctx, x, y, color, dark) {
+  ctx.beginPath();
+  ctx.arc(x, y, 5, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.strokeStyle = dark ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.8)";
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+}
+function drawRulerShape(ctx, a, b, axis, chart, w, h, color, formatX, formatY, fontFamily, dark) {
+  const sa = dataToScreen(a.dataX, a.dataY, chart, w, h);
+  const sb = dataToScreen(b.dataX, b.dataY, chart, w, h);
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 1.5;
+  ctx.setLineDash([5, 4]);
+  const TICK = 6;
+  if (axis === "x") {
+    const midY = (sa.y + sb.y) / 2;
+    ctx.beginPath();
+    ctx.moveTo(sa.x, midY);
+    ctx.lineTo(sb.x, midY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.moveTo(sa.x, midY - TICK);
+    ctx.lineTo(sa.x, midY + TICK);
+    ctx.moveTo(sb.x, midY - TICK);
+    ctx.lineTo(sb.x, midY + TICK);
+    ctx.stroke();
+    drawEndpoint(ctx, sa.x, sa.y, color, dark);
+    drawEndpoint(ctx, sb.x, sb.y, color, dark);
+    const labelX = (sa.x + sb.x) / 2;
+    const labelY = midY - 16;
+    const dx = Math.abs(b.dataX - a.dataX);
+    drawPill(ctx, `ΔX: ${formatX(dx)}`, labelX, labelY, color, fontFamily, dark);
+  } else if (axis === "y") {
+    const midX = (sa.x + sb.x) / 2;
+    ctx.beginPath();
+    ctx.moveTo(midX, sa.y);
+    ctx.lineTo(midX, sb.y);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.moveTo(midX - TICK, sa.y);
+    ctx.lineTo(midX + TICK, sa.y);
+    ctx.moveTo(midX - TICK, sb.y);
+    ctx.lineTo(midX + TICK, sb.y);
+    ctx.stroke();
+    drawEndpoint(ctx, sa.x, sa.y, color, dark);
+    drawEndpoint(ctx, sb.x, sb.y, color, dark);
+    const labelX = midX + 20;
+    const labelY = (sa.y + sb.y) / 2;
+    const dy = Math.abs(b.dataY - a.dataY);
+    drawPill(ctx, `ΔY: ${formatY(dy)}`, labelX, labelY, color, fontFamily, dark);
+  } else {
+    ctx.beginPath();
+    ctx.moveTo(sa.x, sa.y);
+    ctx.lineTo(sb.x, sb.y);
+    ctx.stroke();
+    drawEndpoint(ctx, sa.x, sa.y, color, dark);
+    drawEndpoint(ctx, sb.x, sb.y, color, dark);
+    const labelX = (sa.x + sb.x) / 2;
+    const labelY = (sa.y + sb.y) / 2 - 18;
+    const dx = Math.abs(b.dataX - a.dataX);
+    const dy = Math.abs(b.dataY - a.dataY);
+    drawPill(ctx, `ΔX: ${formatX(dx)}  ΔY: ${formatY(dy)}`, labelX, labelY, color, fontFamily, dark);
+  }
+  ctx.restore();
+}
+var rulerPlugin = {
+  name: "ruler",
+  install(chart, el) {
+    injectRulerStyles();
+    const ac = new AbortController;
+    const cfg = chart.config;
+    const dark = ChartManager.isDark;
+    const wrapper = document.createElement("div");
+    wrapper.className = "chart-ruler-wrapper";
+    setWrapperPosition(wrapper, cfg.rulerPosition);
+    applyTheme(wrapper, dark);
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "chart-ruler-btn";
+    button.title = "Toggle ruler tool";
+    button.innerHTML = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="4.5" width="12" height="5" rx="1" stroke="currentColor" stroke-width="1.3"/><line x1="3.5" y1="4.5" x2="3.5" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="5.5" y1="4.5" x2="5.5" y2="6" stroke="currentColor" stroke-width="1.2"/><line x1="7" y1="4.5" x2="7" y2="7" stroke="currentColor" stroke-width="1.2"/><line x1="8.5" y1="4.5" x2="8.5" y2="6" stroke="currentColor" stroke-width="1.2"/><line x1="10.5" y1="4.5" x2="10.5" y2="7" stroke="currentColor" stroke-width="1.2"/></svg>`;
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "chart-ruler-clear";
+    clearBtn.title = "Clear all rulers";
+    clearBtn.innerHTML = `<svg width="5" height="5" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="5" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><line x1="5" y1="1" x2="1" y2="5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>`;
+    wrapper.appendChild(button);
+    wrapper.appendChild(clearBtn);
+    el.appendChild(wrapper);
+    const state = {
+      rulers: [],
+      pending: null,
+      cursorDataX: 0,
+      cursorDataY: 0,
+      active: false,
+      justToggledButton: false,
+      abort: ac,
+      button,
+      clearBtn,
+      wrapper
+    };
+    states.set(chart, state);
+    button.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      state.active = !state.active;
+      if (!state.active)
+        state.pending = null;
+      state.justToggledButton = true;
+      if (state.active)
+        button.dataset.active = "";
+      else
+        delete button.dataset.active;
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    clearBtn.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+      clearBtn.style.transform = "scale(0.78)";
+      state.rulers = [];
+      state.pending = null;
+      state.justToggledButton = true;
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    clearBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      e.preventDefault();
+    }, { signal: ac.signal });
+    el.addEventListener("mousemove", (e) => {
+      const r = el.getBoundingClientRect();
+      const { x, y } = screenToData(e.clientX - r.left, e.clientY - r.top, chart, r.width, r.height);
+      state.cursorDataX = x;
+      state.cursorDataY = y;
+      if (state.active || state.pending !== null) {
+        ChartManager.drawChart(chart);
+      }
+      e.preventDefault();
+    }, { signal: ac.signal });
+    el.addEventListener("click", (e) => {
+      if (!state.active)
+        return;
+      if (state.justToggledButton) {
+        state.justToggledButton = false;
+        return;
+      }
+      if (chart.dragging)
+        return;
+      e.preventDefault();
+      const r = el.getBoundingClientRect();
+      const sx = e.clientX - r.left;
+      const sy = e.clientY - r.top;
+      const { x: dataX, y: dataY } = screenToData(sx, sy, chart, r.width, r.height);
+      for (let i = state.rulers.length - 1;i >= 0; i--) {
+        const ruler = state.rulers[i];
+        const sa = dataToScreen(ruler.a.dataX, ruler.a.dataY, chart, r.width, r.height);
+        const sb = dataToScreen(ruler.b.dataX, ruler.b.dataY, chart, r.width, r.height);
+        const dA = Math.hypot(sa.x - sx, sa.y - sy);
+        const dB = Math.hypot(sb.x - sx, sb.y - sy);
+        if (dA <= ENDPOINT_HIT_PX || dB <= ENDPOINT_HIT_PX) {
+          state.rulers.splice(i, 1);
+          ChartManager.drawChart(chart);
+          return;
+        }
+      }
+      if (state.pending === null) {
+        state.pending = { dataX, dataY };
+      } else {
+        const rulerMax = chart.config.rulerMax ?? 10;
+        if (state.rulers.length >= rulerMax)
+          state.rulers.shift();
+        state.rulers.push({ a: state.pending, b: { dataX, dataY } });
+        state.pending = null;
+        ChartManager.drawChart(chart);
+      }
+    }, { signal: ac.signal });
+    el.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      if (state.pending !== null) {
+        state.pending = null;
+      } else {
+        const r = el.getBoundingClientRect();
+        const sx = e.clientX - r.left;
+        const sy = e.clientY - r.top;
+        let bestIdx = -1;
+        let bestDist = Infinity;
+        for (let i = 0;i < state.rulers.length; i++) {
+          const ruler = state.rulers[i];
+          const sa = dataToScreen(ruler.a.dataX, ruler.a.dataY, chart, r.width, r.height);
+          const sb = dataToScreen(ruler.b.dataX, ruler.b.dataY, chart, r.width, r.height);
+          const dA = Math.hypot(sa.x - sx, sa.y - sy);
+          const dB = Math.hypot(sb.x - sx, sb.y - sy);
+          const d = Math.min(dA, dB);
+          if (d < bestDist) {
+            bestDist = d;
+            bestIdx = i;
+          }
+        }
+        if (bestIdx !== -1)
+          state.rulers.splice(bestIdx, 1);
+      }
+      ChartManager.drawChart(chart);
+    }, { signal: ac.signal });
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && state.active) {
+        state.pending = null;
+        ChartManager.drawChart(chart);
+      }
+    }, { signal: ac.signal });
+  },
+  afterDraw(ctx, chart) {
+    const state = states.get(chart);
+    if (!state)
+      return;
+    const w = chart.width;
+    const h = chart.height;
+    const dark = ChartManager.isDark;
+    const cfg = chart.config;
+    const axis = cfg.rulerAxis ?? "x";
+    const color = cfg.rulerColor ?? (dark ? "rgba(255,200,50,0.9)" : "rgba(180,100,0,0.9)");
+    const formatX = cfg.formatX ?? String;
+    const formatY = cfg.formatY ?? String;
+    const fontFamily = cfg.fontFamily ?? DEFAULT_FONT;
+    setWrapperPosition(state.wrapper, cfg.rulerPosition);
+    applyTheme(state.wrapper, dark);
+    if (state.active)
+      state.button.dataset.active = "";
+    else
+      delete state.button.dataset.active;
+    showClearBtn(state.clearBtn, state.rulers.length > 0);
+    ctx.save();
+    for (const ruler of state.rulers) {
+      drawRulerShape(ctx, ruler.a, ruler.b, axis, chart, w, h, color, formatX, formatY, fontFamily, dark);
+    }
+    if (state.pending !== null) {
+      const cursor = {
+        dataX: state.cursorDataX,
+        dataY: state.cursorDataY
+      };
+      drawRulerShape(ctx, state.pending, cursor, axis, chart, w, h, color, formatX, formatY, fontFamily, dark);
+      const sc = dataToScreen(state.cursorDataX, state.cursorDataY, chart, w, h);
+      ctx.save();
+      ctx.beginPath();
+      ctx.arc(sc.x, sc.y, 5, 0, Math.PI * 2);
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1.5;
+      ctx.stroke();
+      ctx.restore();
+    }
+    ctx.restore();
+  },
+  uninstall(chart) {
+    const state = states.get(chart);
+    if (!state)
+      return;
+    state.abort.abort();
+    state.wrapper.remove();
+    states.delete(chart);
+  }
+};
+export {
+  rulerPlugin
+};