@canplot/react 0.1.7 → 0.1.9

package/dist/canplot.mjs

@@ -1,149 +1,170 @@
-import { jsxs as at, jsx as X, Fragment as Et } from "react/jsx-runtime";
-import Z, { createContext as Pt, useContext as lt, useRef as L, useLayoutEffect as J, version as Mt, forwardRef as At, useMemo as ut, useState as N, useId as Rt, useEffect as _t } from "react";
-import { createStore as Ut, useStore as vt } from "zustand";
-const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
-  const { min: o, max: n } = A(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = (Q(t, e) ? a.width : a.height) / (n - o);
+import { jsxs as ut, jsx as A, Fragment as Rt } from "react/jsx-runtime";
+import Z, { createContext as vt, useContext as J, useRef as D, useLayoutEffect as N, useEffect as wt, version as _t, forwardRef as Ut, useMemo as Q, useState as V, useId as Lt } from "react";
+import { createStore as bt, useStore as Ct } from "zustand";
+const j = (t, s, e) => Math.min(Math.max(t, s), e), ue = (t) => t.reduce((s, e) => s + (e ?? 0), 0), de = (t, s) => {
+  let e = 0;
+  for (let i = 0; i < t.length; i++)
+    Math.abs(t[i] - s) < Math.abs(t[e] - s) && (e = i);
+  return e;
+}, Dt = (t, s, e, i) => {
+  const { min: o, max: n } = R(t, e), a = i === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = (et(t, e) ? a.width : a.height) / (n - o);
   return s / l;
-}, A = (t, s) => {
-  const e = t.scales.find((c) => c.id === s);
+}, R = (t, s) => {
+  const e = t.scales.find((i) => i.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
   return e;
-}, Q = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", ae = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", R = (t, s) => {
+}, et = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", he = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", _ = (t, s) => {
   const e = window.devicePixelRatio || 1;
   t.lineCap = s?.lineCap ?? "butt", t.lineDashOffset = e * (s?.lineDashOffset ?? 0), t.lineJoin = s?.lineJoin ?? "miter", t.lineWidth = e * (s?.lineWidth ?? 1), t.miterLimit = e * (s?.miterLimit ?? 10), t.strokeStyle = s?.strokeStyle ?? "black", t.fillStyle = s?.fillStyle ?? t.strokeStyle, t.font = s?.font ?? `${10 * e}px sans-serif`, t.textAlign = s?.textAlign ?? "start", t.direction = s?.direction ?? "inherit", t.textBaseline = s?.textBaseline ?? "alphabetic", t.fontKerning = s?.fontKerning ?? "auto";
-}, dt = (t, s, e, c) => {
-  const o = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: n, max: a } = A(t, e), l = (Q(t, e) ? o.width : o.height) / (a - n);
+}, dt = (t, s, e, i) => {
+  const o = i === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: n, max: a } = R(t, e), l = (et(t, e) ? o.width : o.height) / (a - n);
   return s * l;
-}, j = (t, s, e, c) => {
-  const { min: o } = A(t, e), n = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = dt(t, s - o, e, c);
-  return Q(t, e) ? V(
+}, H = (t, s, e, i) => {
+  const { min: o } = R(t, e), n = i === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = dt(t, s - o, e, i);
+  return et(t, e) ? j(
     n.x + a,
     n.x - 10 * n.width,
     n.x + 11 * n.width
-  ) : V(
+  ) : j(
     n.y + n.height - a,
     n.y - 10 * n.height,
     n.y + 11 * n.height
   );
-}, le = (t, s, e) => {
-  const { min: c, max: o } = A(t, e);
-  return V(s, c, o);
+}, fe = (t, s, e) => {
+  const { min: i, max: o } = R(t, e);
+  return j(s, i, o);
 }, O = (t, s, e) => {
-  const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return V(s, c.x, c.x + c.width);
+  const i = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return j(s, i.x, i.x + i.width);
 }, $ = (t, s, e) => {
-  const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return V(s, c.y, c.y + c.height);
-}, it = (t, s, e) => {
-  const { min: c, max: o } = A(t, e);
-  return s >= c && s <= o;
-}, D = (t, s, e, c) => {
-  const { min: o, max: n } = A(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = Q(t, e) ? (s - a.x) / a.width : (a.height - s + a.y) / a.height;
+  const i = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return j(s, i.y, i.y + i.height);
+}, at = (t, s, e) => {
+  const { min: i, max: o } = R(t, e);
+  return s >= i && s <= o;
+}, X = (t, s, e, i) => {
+  const { min: o, max: n } = R(t, e), a = i === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = et(t, e) ? (s - a.x) / a.width : (a.height - s + a.y) / a.height;
   return o + l * (n - o);
-}, Dt = (t) => {
+}, Xt = (t) => {
   const { ctx: s, scales: e } = t;
-  for (const c of e) {
-    if (!c.axis) continue;
-    s.save(), R(s, {
+  for (const i of e) {
+    if (!i.axis) continue;
+    s.save(), _(s, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
-      ...c.axis.style
+      ...i.axis.style
     });
-    const o = c.axis.canvasRect;
-    if (c.origin === "x") {
-      if (c.axis.position === "bottom")
+    const o = i.axis.canvasRect;
+    if (i.origin === "x") {
+      if (i.axis.position === "bottom")
         s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x + o.width, o.y), s.stroke();
-      else if (c.axis.position === "top") {
+      else if (i.axis.position === "top") {
         const n = o.y + o.height;
         s.beginPath(), s.moveTo(o.x, n), s.lineTo(o.x + o.width, n), s.stroke();
       }
-    } else if (c.axis.position === "left") {
+    } else if (i.axis.position === "left") {
       const n = o.x + o.width;
       s.beginPath(), s.moveTo(n, o.y), s.lineTo(n, o.y + o.height), s.stroke();
-    } else c.axis.position === "right" && (s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x, o.y + o.height), s.stroke());
+    } else i.axis.position === "right" && (s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x, o.y + o.height), s.stroke());
     s.restore();
   }
-}, Xt = () => Ut((t, s) => {
+}, It = () => bt((t, s) => {
   const e = () => {
-    const c = s()._frame;
-    if (!c) throw new Error("No frame set in frame store");
-    return c;
+    const i = s()._frame;
+    if (!i) throw new Error("No frame set in frame store");
+    return i;
   };
   return {
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (c, o) => O(e(), c, o ?? "canvas"),
-    clampYPosToChartArea: (c, o) => $(e(), c, o ?? "canvas"),
-    valToPos: (c, o, n) => j(e(), c, o, n ?? "canvas"),
-    valToPxDistance: (c, o, n) => dt(
+    clampXPosToChartArea: (i, o) => O(e(), i, o ?? "canvas"),
+    clampYPosToChartArea: (i, o) => $(e(), i, o ?? "canvas"),
+    valToPos: (i, o, n) => H(e(), i, o, n ?? "canvas"),
+    valToPxDistance: (i, o, n) => dt(
       e(),
-      c,
+      i,
       o,
       n ?? "canvas"
     ),
-    valFits: (c, o) => it(e(), c, o),
-    getScale: (c) => A(e(), c)
+    valFits: (i, o) => at(e(), i, o),
+    getScale: (i) => R(e(), i)
   };
-}), ht = Pt(null), z = (t, s) => {
-  const e = lt(ht);
-  if (!e)
+}), Kt = () => bt((t) => ({
+  notify: () => {
+    t((s) => ({ version: s.version + 1 }));
+  },
+  version: 0
+})), ht = vt(null), Tt = vt(null), z = (t, s) => {
+  const e = J(ht), i = J(Tt);
+  if (!e || !i)
     throw new Error("useFrame must be used within a CanPlot component");
-  const c = L(t);
-  c.current = t, J(() => {
-    c.current(e.getState()), e.subscribe((o) => {
-      o._frame && c.current(o);
+  const o = D(t);
+  o.current = t, N(() => {
+    o.current(e.getState()), e.subscribe((n) => {
+      n._frame && o.current(n);
     });
-  }, [e, ...s]);
+  }, [e]), wt(() => {
+    i.getState().notify();
+  }, [i, ...s]);
 }, ft = (t) => {
-  const s = lt(ht);
+  const s = J(ht);
   if (!s)
     throw new Error("useFrame must be used within a CanPlot component");
-  return vt(
+  return Ct(
     s,
     t ?? ((e) => e.getFrame())
   );
 };
-function Kt(t) {
+function Ft(t) {
   return (s) => {
-    for (const e of t) rt(e, s);
+    for (const e of t) lt(e, s);
   };
 }
-function It(t) {
+function zt(t) {
   return (s) => {
     const e = [];
-    for (const c of t) {
-      const o = rt(c, s), n = typeof o == "function";
-      e.push(n ? o : () => rt(c, null));
+    for (const i of t) {
+      const o = lt(i, s), n = typeof o == "function";
+      e.push(n ? o : () => lt(i, null));
     }
     return () => {
-      for (const c of e) c();
+      for (const i of e) i();
     };
   };
 }
-function rt(t, s) {
+function lt(t, s) {
   if (typeof t == "function")
     return t(s);
   t && (t.current = s);
 }
-var Ft = parseInt(Mt.split(".")[0], 10) >= 19 ? It : Kt;
-const ue = At(({ configuration: t, children: s, style: e, className: c }, o) => {
-  const n = L(null), a = L(null), l = Yt(a), d = ut(Xt, []);
-  J(() => {
+var Yt = parseInt(_t.split(".")[0], 10) >= 19 ? zt : Ft;
+const me = Ut(({ configuration: t, children: s, style: e, className: i }, o) => {
+  const n = D(null), a = D(null), l = $t(a), d = Q(It, []), u = Q(Kt, []);
+  N(() => {
     d.setState({
-      _frame: Ot(t, l, n.current)
+      _frame: Bt(t, l, n.current)
+    });
+  }, [t, l, n, d]), N(() => d.subscribe((m) => {
+    m._frame && Nt(m._frame);
+  }), [d]), N(() => {
+    let m = !1;
+    return u.subscribe(() => {
+      m || (m = !0, window.requestAnimationFrame(() => {
+        m = !1, d.setState((f) => ({
+          _frame: f._frame ? { ...f._frame } : null
+        }));
+      }));
     });
-  }, [t, l, n, d]), J(() => d.subscribe((r) => {
-    r._frame && $t(r._frame);
-  }), [d]);
-  const u = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ at(
+  }, [u, d]);
+  const r = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ ut(
     "div",
     {
-      ref: Ft([o, a]),
-      className: c,
+      ref: Yt([o, a]),
+      className: i,
       style: {
         position: "relative",
         overflow: "hidden",
@@ -151,12 +172,12 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ X(
+        /* @__PURE__ */ A(
           "canvas",
           {
             ref: n,
-            width: l.width * u,
-            height: l.height * u,
+            width: l.width * r,
+            height: l.height * r,
             style: {
               inset: 0,
               position: "absolute",
@@ -165,15 +186,22 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
             }
           }
         ),
-        /* @__PURE__ */ X(zt, { frameStore: d, children: s })
+        /* @__PURE__ */ A(
+          Ot,
+          {
+            frameStore: d,
+            updateRequestStore: u,
+            children: s
+          }
+        )
       ]
     }
   );
-}), zt = ({ frameStore: t, children: s }) => vt(t, (c) => !!c._frame) ? /* @__PURE__ */ X(ht.Provider, { value: t, children: s }) : null, Yt = (t) => {
-  const [s, e] = N({
+}), Ot = ({ frameStore: t, updateRequestStore: s, children: e }) => Ct(t, (o) => !!o._frame) ? /* @__PURE__ */ A(Tt.Provider, { value: s, children: /* @__PURE__ */ A(ht.Provider, { value: t, children: e }) }) : null, $t = (t) => {
+  const [s, e] = V({
     width: 0,
     height: 0
-  }), [c] = N(() => new ResizeObserver((o) => {
+  }), [i] = V(() => new ResizeObserver((o) => {
     for (const n of o) {
       const a = Math.round(n.contentRect.width), l = Math.round(n.contentRect.height);
       e(
@@ -181,16 +209,16 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       );
     }
   }));
-  return J(() => {
+  return N(() => {
     if (!t.current) return;
     const o = t.current.clientWidth, n = t.current.clientHeight;
     return e(
       (a) => a.width !== o || a.height !== n ? { ...a, width: o, height: n } : a
-    ), c.observe(t.current, { box: "border-box" }), () => c.disconnect();
-  }, [c, t]), s;
-}, Ot = (t, s, e) => {
-  const c = e?.getContext("2d");
-  if (!c) return null;
+    ), i.observe(t.current, { box: "border-box" }), () => i.disconnect();
+  }, [i, t]), s;
+}, Bt = (t, s, e) => {
+  const i = e?.getContext("2d");
+  if (!i) return null;
   const o = window.devicePixelRatio || 1;
   if (s.width === 0 || s.height === 0)
     return null;
@@ -211,17 +239,17 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
     width: n.width * o,
     height: n.height * o
   }, l = [];
-  let d = t.padding.left * o, u = c.canvas.width - t.padding.right * o, r = c.canvas.height - t.padding.bottom * o, p = t.padding.top * o;
+  let d = t.padding.left * o, u = i.canvas.width - t.padding.right * o, r = i.canvas.height - t.padding.bottom * o, m = t.padding.top * o;
   for (const h of t.scales) {
     if (!h.axis) {
       l.push({ ...h, axis: null });
       continue;
     }
-    let i;
+    let c;
     if (h.origin === "x")
       switch (h.axis.position) {
         case "bottom":
-          r -= h.axis.size * o, i = {
+          r -= h.axis.size * o, c = {
             x: n.x,
             y: r / o,
             width: n.width,
@@ -229,9 +257,9 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
           };
           break;
         case "top":
-          p += h.axis.size * o, i = {
+          m += h.axis.size * o, c = {
             x: n.x,
-            y: p / o - h.axis.size,
+            y: m / o - h.axis.size,
             width: n.width,
             height: h.axis.size
           };
@@ -243,7 +271,7 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
     else
       switch (h.axis.position) {
         case "left":
-          d += h.axis.size * o, i = {
+          d += h.axis.size * o, c = {
             x: d / o - h.axis.size,
             y: n.y,
             width: h.axis.size,
@@ -251,7 +279,7 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
           };
           break;
         case "right":
-          u -= h.axis.size * o, i = {
+          u -= h.axis.size * o, c = {
             x: u / o,
             y: n.y,
             width: h.axis.size,
@@ -262,57 +290,57 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const m = {
-      x: i.x * o,
-      y: i.y * o,
-      width: i.width * o,
-      height: i.height * o
+    const p = {
+      x: c.x * o,
+      y: c.y * o,
+      width: c.width * o,
+      height: c.height * o
     };
     l.push({
       ...h,
       axis: {
         ...h.axis,
-        cssRect: i,
-        canvasRect: m
+        cssRect: c,
+        canvasRect: p
       }
     });
   }
   return {
-    ctx: c,
+    ctx: i,
     dpr: o,
     padding: t.padding,
     scales: l,
     chartAreaCSS: n,
     chartAreaCanvasPX: a
   };
-}, $t = (t) => {
-  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Dt(t);
-}, de = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(
+}, Nt = (t) => {
+  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Xt(t);
+}, pe = ({ data: t, xScaleId: s, yScaleId: e, style: i }) => (z(
   ({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: a, valToPos: l }) => {
     const d = o();
-    d.save(), d.beginPath(), R(d, c);
+    d.save(), d.beginPath(), _(d, i);
     for (const u of t) {
-      const r = n(l(u.x, s)), p = a(l(u.y, e));
-      d.lineTo(r, p);
+      const r = n(l(u.x, s)), m = a(l(u.y, e));
+      d.lineTo(r, m);
     }
     d.stroke(), d.restore();
   },
-  [t, s, e, c]
-), null), he = ({ data: t, xScaleId: s, yScaleId: e, radius: c = 5, style: o }) => (z(({ getCtx: n, valToPos: a, valFits: l }) => {
+  [t, s, e, i]
+), null), ye = ({ data: t, xScaleId: s, yScaleId: e, radius: i = 5, style: o }) => (z(({ getCtx: n, valToPos: a, valFits: l }) => {
   const d = n();
-  d.save(), d.beginPath(), R(d, o);
+  d.save(), d.beginPath(), _(d, o);
   for (const u of t) {
     if (!l(u.x, s) || !l(u.y, e))
       continue;
-    const r = a(u.x, s), p = a(u.y, e);
-    d.moveTo(r + c, p), d.arc(r, p, c, 0, Math.PI * 2);
+    const r = a(u.x, s), m = a(u.y, e);
+    d.moveTo(r + i, m), d.arc(r, m, i, 0, Math.PI * 2);
   }
   d.stroke(), d.fill(), d.restore();
-}, [t, s, e, c, o]), null), fe = ({
+}, [t, s, e, i, o]), null), xe = ({
   data: t,
   xScaleId: s,
   yScaleId: e,
-  style: c,
+  style: i,
   barWidth: o,
   xPositionOffset: n,
   radius: a
@@ -322,66 +350,66 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
     valToPxDistance: d,
     valToPos: u,
     clampXPosToChartArea: r,
-    clampYPosToChartArea: p
+    clampYPosToChartArea: m
   }) => {
     if (t.length === 0) return;
     const f = l();
-    f.save(), R(f, c);
+    f.save(), _(f, i);
     const h = d(o, s);
     f.beginPath();
-    for (const i of t) {
-      const y = u(i.x, s) - h / 2 + n * h, x = p(u(0, e)), v = p(u(i.y, e)), g = x - v, S = r(y), C = r(y + h) - S;
+    for (const c of t) {
+      const y = u(c.x, s) - h / 2 + n * h, x = m(u(0, e)), v = m(u(c.y, e)), S = x - v, g = r(y), C = r(y + h) - g;
       a ? f.roundRect(
-        S,
+        g,
         v,
         C,
-        g,
+        S,
         a
-      ) : f.rect(S, v, C, g);
+      ) : f.rect(g, v, C, S);
     }
-    f.closePath(), f.fill(), c?.strokeStyle && f.stroke(), f.restore();
+    f.closePath(), f.fill(), i?.strokeStyle && f.stroke(), f.restore();
   },
-  [t, s, e, c, o, n, a]
-), null), me = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: a, valToPos: l }) => {
+  [t, s, e, i, o, n, a]
+), null), Se = ({ data: t, xScaleId: s, yScaleId: e, style: i }) => (z(({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: a, valToPos: l }) => {
   const d = [];
   for (const r of t) {
-    const p = n(l(r.x, s)), f = a(l(r.y[0], e)), h = a(l(r.y[1], e));
-    d.push({ x: p, y: f }), d.unshift({ x: p, y: h });
+    const m = n(l(r.x, s)), f = a(l(r.y[0], e)), h = a(l(r.y[1], e));
+    d.push({ x: m, y: f }), d.unshift({ x: m, y: h });
   }
   const u = o();
   if (d.length > 0) {
-    u.save(), u.beginPath(), R(u, c), u.moveTo(d[0].x, d[0].y);
+    u.save(), u.beginPath(), _(u, i), u.moveTo(d[0].x, d[0].y);
     for (const r of d)
       u.lineTo(r.x, r.y);
     u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, c]), null), pe = ({ data: t, stroked: s, xScaleId: e, yScaleId: c, style: o }) => (z(
+}, [t, s, e, i]), null), ge = ({ data: t, stroked: s, xScaleId: e, yScaleId: i, style: o }) => (z(
   ({ getCtx: n, clampXPosToChartArea: a, clampYPosToChartArea: l, valToPos: d }) => {
     const u = [], r = n();
-    for (const i of t) {
-      const m = a(d(i.x, e)), y = l(d(i.y, c));
-      u.push({ x: m, y });
+    for (const c of t) {
+      const p = a(d(c.x, e)), y = l(d(c.y, i));
+      u.push({ x: p, y });
     }
-    const p = u.at(0), f = u.at(-1);
-    if (!p || !f)
+    const m = u.at(0), f = u.at(-1);
+    if (!m || !f)
       return;
-    const h = l(d(0, c));
-    r.save(), r.beginPath(), R(r, o), r.moveTo(p.x, h);
-    for (const i of u)
-      r.lineTo(i.x, i.y);
+    const h = l(d(0, i));
+    r.save(), r.beginPath(), _(r, o), r.moveTo(m.x, h);
+    for (const c of u)
+      r.lineTo(c.x, c.y);
     if (r.lineTo(f.x, h), r.closePath(), r.fill(), s) {
-      r.beginPath(), r.moveTo(p.x, p.y);
-      for (const i of u)
-        r.lineTo(i.x, i.y);
+      r.beginPath(), r.moveTo(m.x, m.y);
+      for (const c of u)
+        r.lineTo(c.x, c.y);
       r.stroke();
     }
     r.restore();
   },
-  [t, s, e, c, o]
-), null), ye = (t, s) => ft(
+  [t, s, e, i, o]
+), null), ve = (t, s) => ft(
   ({
     clampXPosToChartArea: e,
-    clampYPosToChartArea: c,
+    clampYPosToChartArea: i,
     getScale: o,
     valToPos: n,
     valFits: a
@@ -399,59 +427,59 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
         }
         case "clamp": {
           const r = n(u.value, u.scaleId, s);
-          l[d] = o(u.scaleId)?.origin === "x" ? e(r, s) : c(r, s);
+          l[d] = o(u.scaleId)?.origin === "x" ? e(r, s) : i(r, s);
           break;
         }
       }
     }
     return l;
   }
-), xe = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: o, ticks: n }) => (z(
+), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: i, tickSize: o, ticks: n }) => (z(
   ({ getCtx: a, valToPos: l, getScale: d, getFrame: u }) => {
-    const r = a(), p = d(t);
-    if (!p || !p.axis || p.origin !== "x") return;
-    const f = p.axis, h = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, i = window.devicePixelRatio || 1, m = h, y = (o ?? 6) * i, x = f.position === "top" ? h - y : h + y, v = (c ?? 12) * i;
-    r.save(), r.fontKerning = "auto", R(r, {
+    const r = a(), m = d(t);
+    if (!m || !m.axis || m.origin !== "x") return;
+    const f = m.axis, h = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, c = window.devicePixelRatio || 1, p = h, y = (o ?? 6) * c, x = f.position === "top" ? h - y : h + y, v = (i ?? 12) * c;
+    r.save(), r.fontKerning = "auto", _(r, {
       ...s
     }), r.beginPath();
-    const g = Array.isArray(n) ? n : n({ ...p, axis: f }, u());
-    for (const { value: S } of g) {
-      const C = l(S, t, "canvas");
-      r.moveTo(C, m), r.lineTo(C, x);
+    const S = Array.isArray(n) ? n : n({ ...m, axis: f }, u());
+    for (const { value: g } of S) {
+      const C = l(g, t, "canvas");
+      r.moveTo(C, p), r.lineTo(C, x);
     }
-    r.stroke(), r.restore(), r.save(), R(r, {
+    r.stroke(), r.restore(), r.save(), _(r, {
       textBaseline: f.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...s,
       ...e
     });
-    for (const { value: S, label: C } of g) {
-      const w = l(S, t, "canvas"), b = C.split(`
+    for (const { value: g, label: C } of S) {
+      const w = l(g, t, "canvas"), b = C.split(`
 `);
       for (let k = 0; k < b.length; k++)
-        r.fillText(b[k], w, x + i * 2 + k * v);
+        r.fillText(b[k], w, x + c * 2 + k * v);
     }
     r.restore();
   },
   [n, t, s, e]
-), null), ge = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: o, ticks: n }) => (z(
+), null), be = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: i, tickSize: o, ticks: n }) => (z(
   ({ getCtx: a, valToPos: l, getScale: d, getFrame: u }) => {
-    const r = a(), p = d(t);
-    if (!p || !p.axis || p.origin !== "y") return;
-    const f = p.axis, h = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, i = h, m = o ?? 6, y = f.position === "left" ? h - m : h + m, x = c ?? 12, v = Array.isArray(n) ? n : n({ ...p, axis: f }, u());
-    r.save(), r.fontKerning = "auto", R(r, { ...s }), r.beginPath();
-    for (const { value: g } of v) {
-      const S = l(g, t, "canvas");
-      r.moveTo(i, S), r.lineTo(y, S);
+    const r = a(), m = d(t);
+    if (!m || !m.axis || m.origin !== "y") return;
+    const f = m.axis, h = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, c = h, p = o ?? 6, y = f.position === "left" ? h - p : h + p, x = i ?? 12, v = Array.isArray(n) ? n : n({ ...m, axis: f }, u());
+    r.save(), r.fontKerning = "auto", _(r, { ...s }), r.beginPath();
+    for (const { value: S } of v) {
+      const g = l(S, t, "canvas");
+      r.moveTo(c, g), r.lineTo(y, g);
     }
-    r.stroke(), r.restore(), r.save(), R(r, {
+    r.stroke(), r.restore(), r.save(), _(r, {
       textBaseline: "middle",
       textAlign: f.position === "left" ? "right" : "left",
       ...s,
       ...e
     });
-    for (const { value: g, label: S } of v) {
-      const C = l(g, t, "canvas"), w = S.split(`
+    for (const { value: S, label: g } of v) {
+      const C = l(S, t, "canvas"), w = g.split(`
 `);
       for (let b = 0; b < w.length; b++)
         r.fillText(` ${w[b]} `, y, C + b * x);
@@ -466,12 +494,12 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       syncKey: s,
       callback: e
     }), () => {
-      const c = t.findIndex((o) => o.callback === e);
-      c !== -1 && t.splice(c, 1);
+      const i = t.findIndex((o) => o.callback === e);
+      i !== -1 && t.splice(i, 1);
     }),
     dispatchEvent: (s, e) => {
-      for (const c of t)
-        c.syncKey === s && c.callback(s, e);
+      for (const i of t)
+        i.syncKey === s && i.callback(s, e);
     }
   };
 }, T = {
@@ -490,37 +518,37 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
   sync_mouseup: E(),
   sync_spanselect: E(),
   sync_pressandwheel: E()
-}, P = (t, s, e) => {
-  const c = Z.useRef(e);
-  c.current = e, Z.useEffect(() => T[t].addEventListener(
+}, M = (t, s, e) => {
+  const i = Z.useRef(e);
+  i.current = e, Z.useEffect(() => T[t].addEventListener(
     s,
     (n, a) => {
-      c.current(a, n);
+      i.current(a, n);
     }
-  ), [s, t, c]);
+  ), [s, t, i]);
 }, mt = Z.createContext(""), pt = (t, s) => {
   const e = Z.useContext(mt);
-  return P(t, e, s);
-}, Bt = (t, s, e, c, o) => {
+  return M(t, e, s);
+}, Vt = (t, s, e, i, o) => {
   if (!s) return;
-  const n = c ?? e.scales.find((p) => p.origin === "x")?.id, a = o ?? e.scales.find((p) => p.origin === "y")?.id;
+  const n = i ?? e.scales.find((m) => m.origin === "x")?.id, a = o ?? e.scales.find((m) => m.origin === "y")?.id;
   if (!n || !a)
     return;
   const l = t.clientX - s.left, d = {
     scaleId: n,
-    value: D(e, l, n, "css")
+    value: X(e, l, n, "css")
   }, u = t.clientY - s.top, r = {
     scaleId: a,
-    value: D(e, u, a, "css")
+    value: X(e, u, a, "css")
   };
   return { pointerSyncPosition: { x: d, y: r }, cssX: l, cssY: u };
 }, Y = (t, s) => {
-  const e = t.x ? j(
+  const e = t.x ? H(
     s,
     t.x.value,
     t.x.scaleId,
     "css"
-  ) : 0, c = t.y ? j(
+  ) : 0, i = t.y ? H(
     s,
     t.y.value,
     t.y.scaleId,
@@ -528,15 +556,15 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
   ) : 0;
   return {
     cssX: e,
-    cssY: c,
+    cssY: i,
     scaled: Object.fromEntries(
       s.scales.map((o) => {
-        const n = o.origin === "y" ? c : e;
-        return [o.id, D(s, n, o.id, "css")];
+        const n = o.origin === "y" ? i : e;
+        return [o.id, X(s, n, o.id, "css")];
       })
     )
   };
-}, gt = (t, s, e) => {
+}, St = (t, s, e) => {
   if (!s) {
     const a = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, l = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
     return {
@@ -545,17 +573,17 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       scaled: e.scales.flatMap((d) => {
         if (d.origin !== t)
           return [];
-        const { min: u, max: r } = A(e, d.id);
+        const { min: u, max: r } = R(e, d.id);
         return [{ scaleId: d.id, from: u, to: r }];
       })
     };
   }
-  const c = j(
+  const i = H(
     e,
     s.from,
     s.scaleId,
     "css"
-  ), o = j(
+  ), o = H(
     e,
     s.to,
     s.scaleId,
@@ -564,7 +592,7 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
     (a) => {
       if (a.origin !== t)
         return [];
-      const l = D(e, c, a.id, "css"), d = D(e, o, a.id, "css");
+      const l = X(e, i, a.id, "css"), d = X(e, o, a.id, "css");
       return [
         {
           scaleId: a.id,
@@ -575,15 +603,15 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
     }
   );
   return {
-    fromCSS: c,
+    fromCSS: i,
     toCSS: o,
     scaled: n
   };
-}, Se = ({
+}, Ce = ({
   id: t,
   onClick: s,
   onDblClick: e,
-  onMouseMove: c,
+  onMouseMove: i,
   onMouseDown: o,
   onMouseUp: n,
   onDocumentMouseUp: a,
@@ -591,150 +619,150 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
   className: d,
   style: u,
   sync: r,
-  children: p
+  children: m
 }) => {
-  const f = Rt(), h = t || f;
-  return P("dblclick", h, (i) => {
-    e?.(i);
-  }), P("click", h, (i) => {
-    s?.(i);
-  }), P("move", h, (i) => {
-    c?.(i);
-  }), P("mousedown", h, (i) => {
-    o?.(i);
-  }), P("mouseup", h, (i) => {
-    n?.(i);
-  }), P("documentmouseup", h, (i) => {
-    a?.(i);
-  }), P("spanselect", h, (i) => {
-    l?.(i);
-  }), /* @__PURE__ */ at(mt.Provider, { value: h, children: [
-    /* @__PURE__ */ X(
-      Nt,
+  const f = Lt(), h = t || f;
+  return M("dblclick", h, (c) => {
+    e?.(c);
+  }), M("click", h, (c) => {
+    s?.(c);
+  }), M("move", h, (c) => {
+    i?.(c);
+  }), M("mousedown", h, (c) => {
+    o?.(c);
+  }), M("mouseup", h, (c) => {
+    n?.(c);
+  }), M("documentmouseup", h, (c) => {
+    a?.(c);
+  }), M("spanselect", h, (c) => {
+    l?.(c);
+  }), /* @__PURE__ */ ut(mt.Provider, { value: h, children: [
+    /* @__PURE__ */ A(
+      jt,
       {
         className: d,
         style: u,
         sync: r
       }
     ),
-    p
+    m
   ] });
-}, Nt = ({ className: t, style: s, sync: e }) => {
-  const c = L(null), o = ft(), n = L(o);
+}, jt = ({ className: t, style: s, sync: e }) => {
+  const i = D(null), o = ft(), n = D(o);
   n.current = o;
-  const a = lt(mt), l = e?.key || a, d = L(null), u = L(null), r = L(null), p = () => {
-    const i = c.current?.parentElement;
-    if (i) {
-      if (i.dataset.canplotroot === void 0)
+  const a = J(mt), l = e?.key || a, d = D(null), u = D(null), r = D(null), m = () => {
+    const c = i.current?.parentElement;
+    if (c) {
+      if (c.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return i.getBoundingClientRect();
+      return c.getBoundingClientRect();
     }
-  }, f = (i, m) => {
-    const y = Bt(
-      i,
-      p(),
+  }, f = (c, p) => {
+    const y = Vt(
+      c,
+      m(),
       n.current,
       e?.xViaScaleId,
       e?.yViaScaleId
     );
-    y && m(
+    y && p(
       y.pointerSyncPosition,
       { cssX: y.cssX, cssY: y.cssY },
       {
-        ctrlKey: i.ctrlKey,
-        altKey: i.altKey,
-        shiftKey: i.shiftKey,
-        metaKey: i.metaKey
+        ctrlKey: c.ctrlKey,
+        altKey: c.altKey,
+        shiftKey: c.shiftKey,
+        metaKey: c.metaKey
       }
     );
-  }, h = L(f);
-  return h.current = f, _t(() => {
-    const i = (g) => {
-      const S = u.current;
-      S && T.sync_spanselect.dispatchEvent(l, {
-        ...S,
+  }, h = D(f);
+  return h.current = f, wt(() => {
+    const c = (S) => {
+      const g = u.current;
+      g && T.sync_spanselect.dispatchEvent(l, {
+        ...g,
         completed: !0
       }), T.documentmouseup.dispatchEvent(l, {
         frame: n.current,
         keys: {
-          ctrlKey: g.ctrlKey,
-          altKey: g.altKey,
-          shiftKey: g.shiftKey,
-          metaKey: g.metaKey
+          ctrlKey: S.ctrlKey,
+          altKey: S.altKey,
+          shiftKey: S.shiftKey,
+          metaKey: S.metaKey
         }
       });
-    }, m = (g) => {
-      const S = {
-        ctrlKey: g.ctrlKey,
-        altKey: g.altKey,
-        shiftKey: g.shiftKey,
-        metaKey: g.metaKey
+    }, p = (S) => {
+      const g = {
+        ctrlKey: S.ctrlKey,
+        altKey: S.altKey,
+        shiftKey: S.shiftKey,
+        metaKey: S.metaKey
       }, C = r.current;
-      if (C && Object.entries(S).some(
+      if (C && Object.entries(g).some(
         ([b, k]) => C.keys[b] !== k
       )) {
-        const b = { ...C, keys: S };
+        const b = { ...C, keys: g };
         r.current = b, T.sync_move.dispatchEvent(l, b);
       }
       const w = u.current;
-      if (w && Object.entries(S).some(
+      if (w && Object.entries(g).some(
         ([b, k]) => w.keys[b] !== k
       )) {
-        g.stopPropagation(), g.preventDefault();
-        const b = { ...w, keys: S };
+        S.stopPropagation(), S.preventDefault();
+        const b = { ...w, keys: g };
         u.current = b, T.sync_spanselect.dispatchEvent(
           l,
           b
         );
       }
-    }, y = (g) => {
+    }, y = (S) => {
       h.current(
-        g,
-        (S, { cssX: C, cssY: w }, b) => {
+        S,
+        (g, { cssX: C, cssY: w }, b) => {
           const k = d.current;
-          if (!k || !S.x || !S.y) return;
-          const _ = n.current, M = k.xRangeCss.start, B = C, F = k.yRangeCss.start, et = w, st = A(_, S.x.scaleId), nt = A(_, S.y.scaleId);
+          if (!k || !g.x || !g.y) return;
+          const U = n.current, P = k.xRangeCss.start, B = C, F = k.yRangeCss.start, nt = w, ot = R(U, g.x.scaleId), it = R(U, g.y.scaleId);
           d.current = {
-            xRangeCss: { start: M, end: B },
-            yRangeCss: { start: F, end: et }
+            xRangeCss: { start: P, end: B },
+            yRangeCss: { start: F, end: nt }
           };
-          let U = "none";
-          const ot = Math.abs(F - et), ct = Math.abs(M - B);
-          ot < 10 && ct < 10 ? U = "none" : ot > 30 && ct > 30 ? U = "box" : ot > ct ? U = "y" : U = "x";
-          const Tt = U === "x" || U === "box" ? {
-            scaleId: st.id,
-            from: D(
-              _,
-              O(n.current, M, "css"),
-              st.id,
+          let L = "none";
+          const ct = Math.abs(F - nt), rt = Math.abs(P - B);
+          ct < 10 && rt < 10 ? L = "none" : ct > 30 && rt > 30 ? L = "box" : ct > rt ? L = "y" : L = "x";
+          const Pt = L === "x" || L === "box" ? {
+            scaleId: ot.id,
+            from: X(
+              U,
+              O(n.current, P, "css"),
+              ot.id,
               "css"
             ),
-            to: D(
-              _,
+            to: X(
+              U,
               O(n.current, B, "css"),
-              st.id,
+              ot.id,
               "css"
             )
-          } : void 0, kt = U === "y" || U === "box" ? {
-            scaleId: nt.id,
-            from: D(
-              _,
+          } : void 0, At = L === "y" || L === "box" ? {
+            scaleId: it.id,
+            from: X(
+              U,
               $(n.current, F, "css"),
-              nt.id,
+              it.id,
               "css"
             ),
-            to: D(
-              _,
-              $(n.current, et, "css"),
-              nt.id,
+            to: X(
+              U,
+              $(n.current, nt, "css"),
+              it.id,
               "css"
             )
           } : void 0, xt = {
-            mode: U,
-            xRange: Tt,
-            yRange: kt,
+            mode: L,
+            xRange: Pt,
+            yRange: At,
             completed: !1,
             keys: b
           };
@@ -744,119 +772,119 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
           );
         }
       );
-    }, x = (g) => {
-      h.current(g, (S, C, w) => {
+    }, x = (S) => {
+      h.current(S, (g, C, w) => {
         if (Object.values(w).some((k) => k)) {
-          g.preventDefault();
-          const k = Math.abs(g.deltaY) > Math.abs(g.deltaX) ? g.deltaY : g.deltaX;
+          S.preventDefault();
+          const k = Math.abs(S.deltaY) > Math.abs(S.deltaX) ? S.deltaY : S.deltaX;
           T.sync_pressandwheel.dispatchEvent(l, {
-            positions: S,
+            positions: g,
             keys: w,
-            deltaX: g.deltaX,
-            deltaY: g.deltaY,
+            deltaX: S.deltaX,
+            deltaY: S.deltaY,
             deltaAbs: k
           });
         }
       });
     };
-    document.addEventListener("mouseup", i), document.addEventListener("keydown", m), document.addEventListener("keyup", m), document.addEventListener("mousemove", y);
-    const v = c.current;
+    document.addEventListener("mouseup", c), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", y);
+    const v = i.current;
     return v?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", i), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", y), v?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", c), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", y), v?.removeEventListener("wheel", x);
     };
-  }, [n, l, h]), P("sync_dblclick", l, (i) => {
-    const m = Y(
-      i.positions,
+  }, [n, l, h]), M("sync_dblclick", l, (c) => {
+    const p = Y(
+      c.positions,
       n.current
     );
-    m && T.dblclick.dispatchEvent(a, {
+    p && T.dblclick.dispatchEvent(a, {
       frame: n.current,
-      pointer: m,
-      keys: i.keys
+      pointer: p,
+      keys: c.keys
     });
-  }), P("sync_click", l, (i) => {
-    const m = Y(
-      i.positions,
+  }), M("sync_click", l, (c) => {
+    const p = Y(
+      c.positions,
       n.current
     );
-    m && T.click.dispatchEvent(a, {
+    p && T.click.dispatchEvent(a, {
       frame: n.current,
-      pointer: m,
-      keys: i.keys
+      pointer: p,
+      keys: c.keys
     });
-  }), P("sync_move", l, (i) => {
-    const m = i.positions ? Y(
-      i.positions,
+  }), M("sync_move", l, (c) => {
+    const p = c.positions ? Y(
+      c.positions,
       n.current
     ) : null;
-    r.current = i, T.move.dispatchEvent(a, {
+    r.current = c, T.move.dispatchEvent(a, {
       frame: n.current,
-      pointer: m ?? null,
-      keys: i.keys
+      pointer: p ?? null,
+      keys: c.keys
     });
-  }), P("sync_mousedown", l, (i) => {
-    const m = Y(
-      i.positions,
+  }), M("sync_mousedown", l, (c) => {
+    const p = Y(
+      c.positions,
       n.current
     );
-    m && T.mousedown.dispatchEvent(a, {
+    p && T.mousedown.dispatchEvent(a, {
       frame: n.current,
-      pointer: m,
-      keys: i.keys
+      pointer: p,
+      keys: c.keys
     });
-  }), P("sync_mouseup", l, (i) => {
-    const m = Y(
-      i.positions,
+  }), M("sync_mouseup", l, (c) => {
+    const p = Y(
+      c.positions,
       n.current
     );
-    m && T.mouseup.dispatchEvent(a, {
+    p && T.mouseup.dispatchEvent(a, {
       frame: n.current,
-      pointer: m,
-      keys: i.keys
+      pointer: p,
+      keys: c.keys
     });
-  }), P(
+  }), M(
     "sync_pressandwheel",
     l,
-    (i) => {
-      const m = Y(
-        i.positions,
+    (c) => {
+      const p = Y(
+        c.positions,
         n.current
       );
-      m && T.pressandwheel.dispatchEvent(a, {
+      p && T.pressandwheel.dispatchEvent(a, {
         frame: n.current,
-        pointer: m,
-        keys: i.keys,
-        deltaX: i.deltaX,
-        deltaY: i.deltaY,
-        deltaAbs: i.deltaAbs
+        pointer: p,
+        keys: c.keys,
+        deltaX: c.deltaX,
+        deltaY: c.deltaY,
+        deltaAbs: c.deltaAbs
       });
     }
-  ), P("sync_spanselect", l, (i) => {
-    const m = gt(
+  ), M("sync_spanselect", l, (c) => {
+    const p = St(
       "x",
-      i.xRange,
+      c.xRange,
       n.current
-    ), y = gt(
+    ), y = St(
       "y",
-      i.yRange,
+      c.yRange,
       n.current
-    ), x = m.scaled, v = y.scaled;
-    i.completed && (d.current = null), T.spanselect.dispatchEvent(a, {
-      mode: i.mode,
+    ), x = p.scaled, v = y.scaled;
+    c.completed && (d.current = null), T.spanselect.dispatchEvent(a, {
+      mode: c.mode,
       frame: n.current,
       xRanges: x,
       yRanges: v,
-      completed: i.completed,
-      x: { fromCSS: m.fromCSS, toCSS: m.toCSS },
+      completed: c.completed,
+      x: { fromCSS: p.fromCSS, toCSS: p.toCSS },
       y: { fromCSS: y.fromCSS, toCSS: y.toCSS },
-      keys: i.keys
+      keys: c.keys
     });
-  }), /* @__PURE__ */ X(
+  }), /* @__PURE__ */ A(
     "div",
     {
-      ref: c,
+      ref: i,
       id: "interactions",
       className: t,
       style: {
@@ -868,34 +896,37 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
         zIndex: 25,
         ...s
       },
-      onClick: (i) => {
-        f(i, (m, y, x) => {
+      onDragStart: (c) => {
+        c.preventDefault();
+      },
+      onClick: (c) => {
+        f(c, (p, y, x) => {
           T.sync_click.dispatchEvent(l, {
-            positions: m,
+            positions: p,
             keys: x
           });
         });
       },
-      onMouseLeave: (i) => {
-        f(i, (m, y, x) => {
+      onMouseLeave: (c) => {
+        f(c, (p, y, x) => {
           T.sync_move.dispatchEvent(l, {
             positions: null,
             keys: x
           });
         });
       },
-      onMouseMove: (i) => {
-        f(i, (m, y, x) => {
+      onMouseMove: (c) => {
+        f(c, (p, y, x) => {
           T.sync_move.dispatchEvent(l, {
-            positions: m,
+            positions: p,
             keys: x
           });
         });
       },
-      onMouseDown: (i) => {
-        f(i, (m, { cssX: y, cssY: x }, v) => {
+      onMouseDown: (c) => {
+        f(c, (p, { cssX: y, cssY: x }, v) => {
           T.sync_mousedown.dispatchEvent(l, {
-            positions: m,
+            positions: p,
             keys: v
           }), u.current = null, d.current = {
             xRangeCss: { start: y, end: y },
@@ -903,67 +934,67 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
           };
         });
       },
-      onMouseUp: (i) => {
-        f(i, (m, y, x) => {
+      onMouseUp: (c) => {
+        f(c, (p, y, x) => {
           T.sync_mouseup.dispatchEvent(l, {
-            positions: m,
+            positions: p,
             keys: x
           });
           const v = u.current;
           u.current = null;
-          const g = d.current;
-          if (d.current = null, g && v) {
-            const S = {
+          const S = d.current;
+          if (d.current = null, S && v) {
+            const g = {
               ...v,
               keys: x,
               completed: !0
             };
             T.sync_spanselect.dispatchEvent(
               l,
-              S
+              g
             );
           }
         });
       },
-      onDoubleClick: (i) => {
-        f(i, (m, y, x) => {
+      onDoubleClick: (c) => {
+        f(c, (p, y, x) => {
           T.sync_dblclick.dispatchEvent(l, {
-            positions: m,
+            positions: p,
             keys: x
           });
         });
       }
     }
   );
-}, ve = ({ data: t, renderTooltip: s, xScaleId: e }) => {
-  const [c, o] = N(null);
+}, Te = ({ data: t, renderTooltip: s, xScaleId: e }) => {
+  const [i, o] = V(null);
   pt("move", (a) => {
     o(a);
   });
-  const n = ut(() => {
-    if (!c)
+  const n = Q(() => {
+    if (!i)
       return null;
-    const { frame: a, pointer: l } = c, d = l?.scaled[e];
+    const { frame: a, pointer: l } = i, d = l?.scaled[e];
     if (d === void 0)
       return null;
     const u = [];
     let r = d;
-    for (const p of t) {
+    for (const m of t) {
       let f = null, h = 1 / 0;
-      for (const [m, y] of p.points.entries()) {
-        if (!it(a, y.x, e) || !it(a, y.y, p.yScaleId))
+      for (const [p, y] of m.points.entries()) {
+        if (!at(a, y.x, e) || !at(a, y.y, m.yScaleId))
           continue;
         const x = Math.abs(y.x - d);
-        x < h && (h = x, f = m);
+        x < h && (h = x, f = p);
       }
-      const i = p.points[f ?? -1];
-      if (!i || dt(a, h, e, "css") > 30) {
-        u.push({ seriesId: p.seriesId, y: null });
+      const c = m.points[f ?? -1];
+      if (!c || dt(a, h, e, "css") > 30) {
+        u.push({ seriesId: m.seriesId, y: null });
         continue;
       }
-      r = i.x, u.push({
-        seriesId: p.seriesId,
-        y: i.y
+      r = c.x, u.push({
+        seriesId: m.seriesId,
+        y: c.y
       });
     }
     return {
@@ -971,17 +1002,17 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       x: r,
       points: u
     };
-  }, [t, c, e]);
+  }, [t, i, e]);
   return s(n);
-}, we = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: c }) => {
-  const [o, n] = N(null);
+}, ke = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: i }) => {
+  const [o, n] = V(null);
   if (pt("move", (r) => {
     n(r);
   }), !o)
     return null;
   const { frame: a, pointer: l } = o, d = O(a, l?.cssX ?? 0, "css"), u = $(a, l?.cssY ?? 0, "css");
-  return /* @__PURE__ */ at(Et, { children: [
-    /* @__PURE__ */ X(
+  return /* @__PURE__ */ ut(Rt, { children: [
+    /* @__PURE__ */ A(
       "div",
       {
         "data-show": !!l,
@@ -1001,10 +1032,10 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
         }
       }
     ),
-    /* @__PURE__ */ X(
+    /* @__PURE__ */ A(
       "div",
       {
-        className: c?.(o),
+        className: i?.(o),
         "data-show": !!l,
         style: {
           position: "absolute",
@@ -1021,12 +1052,12 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       }
     )
   ] });
-}, be = ({ makeClassName: t, makeStyle: s }) => {
-  const [e, c] = N(null);
+}, Ee = ({ makeClassName: t, makeStyle: s }) => {
+  const [e, i] = V(null);
   pt("spanselect", (n) => {
-    c(n.mode === "none" || n.completed ? null : n);
+    i(n.mode === "none" || n.completed ? null : n);
   });
-  const o = ut(() => {
+  const o = Q(() => {
     if (!e)
       return null;
     const n = O(
@@ -1045,10 +1076,10 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       e.frame,
       e.y.toCSS,
       "css"
-    ), u = Math.min(n, a), r = Math.min(l, d), p = Math.abs(a - n), f = Math.abs(d - l);
-    return { leftPx: u, topPx: r, widthPx: p, heightPx: f };
+    ), u = Math.min(n, a), r = Math.min(l, d), m = Math.abs(a - n), f = Math.abs(d - l);
+    return { leftPx: u, topPx: r, widthPx: m, heightPx: f };
   }, [e]);
-  return /* @__PURE__ */ X(
+  return /* @__PURE__ */ A(
     "div",
     {
       className: e ? t?.(e) : void 0,
@@ -1064,9 +1095,9 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
       }
     }
   );
-}, Ce = ({ style: t, children: s, scaleId: e, ...c }) => {
+}, Me = ({ style: t, children: s, scaleId: e, ...i }) => {
   const o = ft((n) => n.getScale(e)?.axis);
-  return o ? /* @__PURE__ */ X(
+  return o ? /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -1078,31 +1109,31 @@ const ue = At(({ configuration: t, children: s, style: e, className: c }, o) =>
         width: o.cssRect.width,
         ...t
       },
-      ...c,
+      ...i,
       children: s
     }
   ) : null;
-}, wt = 60, Vt = 30, bt = "UTC", jt = "en-GB", Te = ({
+}, kt = 60, Ht = 30, Et = "UTC", Wt = "en-GB", Pe = ({
   space: t,
   formatter: s
-} = {}) => (e, c) => {
-  const { min: o, max: n } = e, a = [], l = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? wt : Vt)) * l, u = Lt(
-    c,
+} = {}) => (e, i) => {
+  const { min: o, max: n } = e, a = [], l = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? kt : Ht)) * l, u = Dt(
+    i,
     d,
     e.id,
     "canvas"
-  ), r = H.find((f) => f > u) ?? 1;
-  let p = o % r < Number.EPSILON ? o : o + r - o % r;
-  for (; p <= n; )
-    a.push(p), p += r;
-  return (s ?? Ht)(a);
-}, Ht = (t) => {
+  ), r = W.find((f) => f > u) ?? 1;
+  let m = o % r < Number.EPSILON ? o : o + r - o % r;
+  for (; m <= n; )
+    a.push(m), m += r;
+  return (s ?? qt)(a);
+}, qt = (t) => {
   const s = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
   return t.map((e) => ({ value: e, label: e.toFixed(s) }));
-}, H = [];
+}, W = [];
 for (let t = -12; t <= 12; t++)
-  H.push(1 * 10 ** t), H.push(2 * 10 ** t), H.push(5 * 10 ** t);
-const Wt = 1, Ct = 1e3 * Wt, yt = 60 * Ct, q = 60 * yt, tt = 24 * q, Gt = 30 * tt, Zt = 365 * tt, Jt = [
+  W.push(1 * 10 ** t), W.push(2 * 10 ** t), W.push(5 * 10 ** t);
+const Gt = 1, Mt = 1e3 * Gt, yt = 60 * Mt, tt = 60 * yt, st = 24 * tt, Zt = 30 * st, Jt = 365 * st, Qt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1154,67 +1185,67 @@ const Wt = 1, Ct = 1e3 * Wt, yt = 60 * Ct, q = 60 * yt, tt = 24 * q, Gt = 30 * t
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], W = (t) => {
+], q = (t) => {
   const [s, e] = t;
   switch (e) {
     case "milliseconds":
       return s;
     case "seconds":
-      return s * Ct;
+      return s * Mt;
     case "minutes":
       return s * yt;
     case "hours":
-      return s * q;
-    case "days":
       return s * tt;
+    case "days":
+      return s * st;
     case "months":
-      return s * Gt;
-    case "years":
       return s * Zt;
+    case "years":
+      return s * Jt;
   }
-}, qt = (t, s) => {
+}, te = (t, s) => {
   const e = new Date(t);
   return e.setUTCMilliseconds(e.getUTCMilliseconds() + s), e.getTime();
-}, Qt = (t, s) => {
+}, ee = (t, s) => {
   const e = new Date(t);
   return e.setUTCSeconds(e.getUTCSeconds() + s), e.getTime();
-}, te = (t, s) => {
+}, se = (t, s) => {
   const e = new Date(t);
   return e.setUTCMinutes(e.getUTCMinutes() + s), e.getTime();
-}, ee = (t, s) => {
+}, ne = (t, s) => {
   const e = new Date(t);
   return e.setUTCHours(e.getUTCHours() + s), e.getTime();
-}, se = (t, s) => {
+}, oe = (t, s) => {
   const e = new Date(t);
   return e.setUTCDate(e.getUTCDate() + s), e.getTime();
-}, St = (t, s) => {
+}, gt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
-}, I = (t, s) => {
-  const [e, c] = s;
-  switch (c) {
+}, K = (t, s) => {
+  const [e, i] = s;
+  switch (i) {
     case "milliseconds":
-      return qt(t, e);
+      return te(t, e);
     case "seconds":
-      return Qt(t, e);
+      return ee(t, e);
     case "minutes":
-      return te(t, e);
+      return se(t, e);
     case "hours":
-      return ee(t, e);
+      return ne(t, e);
     case "days":
-      return se(t, e);
+      return oe(t, e);
     case "months":
-      return St(t, e);
+      return gt(t, e);
     case "years":
-      return St(t, e * 12);
+      return gt(t, e * 12);
   }
 };
 function G(t, s) {
-  const e = new Date(t), c = new Date(e.toLocaleString("en-US", { timeZone: s })), o = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
-  return (c.getTime() - o.getTime()) / (3600 * 1e3);
+  const e = new Date(t), i = new Date(e.toLocaleString("en-US", { timeZone: s })), o = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
+  return (i.getTime() - o.getTime()) / (3600 * 1e3);
 }
-const ne = (t, s, e = "UTC") => {
-  const [c, o] = s;
+const ie = (t, s, e = "UTC") => {
+  const [i, o] = s;
   let n = new Date(t);
   const a = () => {
     n.setUTCHours(-G(n, e), 0, 0, 0);
@@ -1222,25 +1253,25 @@ const ne = (t, s, e = "UTC") => {
   switch (o) {
     case "milliseconds":
       n.setUTCMilliseconds(
-        Math.ceil(n.getUTCMilliseconds() / c) * c
+        Math.ceil(n.getUTCMilliseconds() / i) * i
       );
       break;
     case "seconds":
       n.setUTCSeconds(
-        Math.ceil(n.getUTCSeconds() / c) * c,
+        Math.ceil(n.getUTCSeconds() / i) * i,
         0
       );
       break;
     case "minutes":
       n.setUTCMinutes(
-        Math.ceil(n.getTime() % q / yt / c) * c,
+        Math.ceil(n.getTime() % tt / yt / i) * i,
         0,
         0
       );
       break;
     case "hours":
       n.setUTCHours(
-        Math.ceil(n.getTime() % tt / q / c) * c,
+        Math.ceil(n.getTime() % st / tt / i) * i,
         0,
         0,
         0
@@ -1249,20 +1280,20 @@ const ne = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? n.setUTCDate(1) : o === "years" && n.setUTCMonth(0, 1), a(), n.getTime() < t && (n = new Date(I(n, [1, o])));
+      o === "months" ? n.setUTCDate(1) : o === "years" && n.setUTCMonth(0, 1), a(), n.getTime() < t && (n = new Date(K(n, [1, o])));
       break;
   }
   return n.getTime();
-}, ke = ({
-  timeZone: t = bt,
-  space: s = wt,
+}, Ae = ({
+  timeZone: t = Et,
+  space: s = kt,
   formatter: e,
-  locale: c,
+  locale: i,
   showTimezone: o
 } = {}) => (n, a) => {
-  const { min: l, max: d } = n, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - l) / u, [f, h] = Jt.find(
-    (v) => W(v) >= p
-  ) ?? [1, "milliseconds"], i = ne(l, [f, h], t), m = G(i, t), y = [i];
+  const { min: l, max: d } = n, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, m = (d - l) / u, [f, h] = Qt.find(
+    (v) => q(v) >= m
+  ) ?? [1, "milliseconds"], c = ie(l, [f, h], t), p = G(c, t), y = [c];
   let x;
   for (; ; ) {
     switch (h) {
@@ -1270,31 +1301,31 @@ const ne = (t, s, e = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        x = I(i, [y.length * f, h]);
+        x = K(c, [y.length * f, h]);
         break;
       }
       case "days": {
-        const v = I(i, [
+        const v = K(c, [
           y.length * f,
           h
         ]);
-        x = I(v, [
-          m - G(v, t),
+        x = K(v, [
+          p - G(v, t),
           "hours"
         ]);
         break;
       }
       case "months":
       case "years": {
-        const v = I(
-          I(I(i, [m, "hours"]), [
+        const v = K(
+          K(K(c, [p, "hours"]), [
             y.length * f,
             h
           ]),
-          [-m, "hours"]
+          [-p, "hours"]
         );
-        x = I(v, [
-          m - G(v, t),
+        x = K(v, [
+          p - G(v, t),
           "hours"
         ]);
         break;
@@ -1304,17 +1335,17 @@ const ne = (t, s, e = "UTC") => {
       break;
     y.push(x);
   }
-  return (e ?? oe({
-    locale: c,
+  return (e ?? ce({
+    locale: i,
     showTimezone: o,
     timeZone: t
   }))(y);
-}, K = (t, s, e) => t.find((c) => c.type === e)?.value !== s.find((c) => c.type === e)?.value, oe = ({
-  timeZone: t = bt,
-  locale: s = jt,
+}, I = (t, s, e) => t.find((i) => i.type === e)?.value !== s.find((i) => i.type === e)?.value, ce = ({
+  timeZone: t = Et,
+  locale: s = Wt,
   showTimezone: e = !0
 }) => {
-  const c = new Intl.DateTimeFormat(s, {
+  const i = new Intl.DateTimeFormat(s, {
     year: "numeric",
     day: "numeric",
     month: "short",
@@ -1327,26 +1358,26 @@ const ne = (t, s, e = "UTC") => {
     timeZone: t
   });
   return (o) => {
-    const n = o[1] - o[0], a = n < W([1, "days"]), l = n < W([1, "minutes"]), d = n < W([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: c.formatToParts(new Date(u)) })).map((u, r, p) => {
-      const f = p[r - 1], h = r === 0 || K(u.label, f.label, "year"), i = r === 0 || K(u.label, f.label, "day"), m = r === 0 || K(u.label, f.label, "month"), y = r === 0 || K(u.label, f.label, "hour"), x = r === 0 || K(u.label, f.label, "timeZoneName"), v = r === 0 || K(u.label, f.label, "minute"), g = r === 0 || K(u.label, f.label, "second"), S = r === 0 || K(u.label, f.label, "fractionalSecond"), C = [];
-      if (a && (y || v || x || g || S)) {
-        const w = u.label.find((M) => M.type === "hour")?.value, b = u.label.find((M) => M.type === "minute")?.value, k = u.label.find((M) => M.type === "timeZoneName")?.value;
-        let _ = "";
+    const n = o[1] - o[0], a = n < q([1, "days"]), l = n < q([1, "minutes"]), d = n < q([1, "seconds"]);
+    return o.map((u) => ({ value: u, label: i.formatToParts(new Date(u)) })).map((u, r, m) => {
+      const f = m[r - 1], h = r === 0 || I(u.label, f.label, "year"), c = r === 0 || I(u.label, f.label, "day"), p = r === 0 || I(u.label, f.label, "month"), y = r === 0 || I(u.label, f.label, "hour"), x = r === 0 || I(u.label, f.label, "timeZoneName"), v = r === 0 || I(u.label, f.label, "minute"), S = r === 0 || I(u.label, f.label, "second"), g = r === 0 || I(u.label, f.label, "fractionalSecond"), C = [];
+      if (a && (y || v || x || S || g)) {
+        const w = u.label.find((P) => P.type === "hour")?.value, b = u.label.find((P) => P.type === "minute")?.value, k = u.label.find((P) => P.type === "timeZoneName")?.value;
+        let U = "";
         if (l) {
-          const M = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
+          const P = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
             (F) => F.type === "fractionalSecond"
           )?.value;
-          _ = `:${M}` + (d ? `.${B}` : "");
+          U = `:${P}` + (d ? `.${B}` : "");
         }
         C.push(
-          `${w}:${b}${_}` + (e && x ? ` ${k}` : "")
+          `${w}:${b}${U}` + (e && x ? ` ${k}` : "")
         );
       }
-      return (i || m) && C.push(
+      return (c || p) && C.push(
         [
           u.label.find((w) => w.type === "month")?.value,
-          i && u.label.find((w) => w.type === "day")?.value
+          c && u.label.find((w) => w.type === "day")?.value
         ].filter(Boolean).join(" ")
       ), h && C.push(u.label.find((w) => w.type === "year")?.value), {
         value: u.value,
@@ -1357,38 +1388,41 @@ const ne = (t, s, e = "UTC") => {
   };
 };
 export {
-  me as AreaPlot,
-  Ce as AxisOverlay,
-  fe as BarPlot,
-  ue as CanPlot,
-  Se as ChartAreaInteractions,
-  we as Crosshair,
-  de as LinePlot,
-  he as ScatterPlot,
-  be as SelectBox,
-  pe as SparklinePlot,
-  ve as TooltipsX,
-  xe as XTicks,
-  ge as YTicks,
-  R as applyStyles,
-  le as clampUnfit,
+  Se as AreaPlot,
+  Me as AxisOverlay,
+  xe as BarPlot,
+  me as CanPlot,
+  Ce as ChartAreaInteractions,
+  ke as Crosshair,
+  pe as LinePlot,
+  ye as ScatterPlot,
+  Ee as SelectBox,
+  ge as SparklinePlot,
+  Te as TooltipsX,
+  we as XTicks,
+  be as YTicks,
+  _ as applyStyles,
+  j as clamp,
+  fe as clampUnfit,
   O as clampXPosToChartArea,
   $ as clampYPosToChartArea,
-  Ht as defaultNumericalTicksFormatter,
-  A as getScale,
-  Q as isXScale,
-  ae as isYScale,
-  Te as makeLinearTicks,
-  oe as makeTimeTickFormat,
-  ke as makeTimeTicks,
-  D as posToVal,
-  Lt as pxToValDistance,
+  qt as defaultNumericalTicksFormatter,
+  de as findClosestIndex,
+  R as getScale,
+  et as isXScale,
+  he as isYScale,
+  Pe as makeLinearTicks,
+  ce as makeTimeTickFormat,
+  Ae as makeTimeTicks,
+  X as posToVal,
+  Dt as pxToValDistance,
+  ue as sum,
   z as useDrawEffect,
   ft as useFrameState,
   pt as useInteractionsEvent,
-  ye as useXPositioned,
-  it as valFits,
-  j as valToPos,
+  ve as useXPositioned,
+  at as valFits,
+  H as valToPos,
   dt as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map