@canplot/react 0.1.24 → 0.1.25

package/dist/canplot.mjs

@@ -1,56 +1,56 @@
-import { jsxs as ft, jsx as A, Fragment as Ut } from "react/jsx-runtime";
-import Q, { createContext as Mt, useContext as tt, useRef as _, useLayoutEffect as z, useEffect as Et, version as Xt, forwardRef as Kt, useMemo as et, useState as V, useId as Ot } from "react";
-import { createStore as Pt, useStore as kt } from "zustand";
-const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t) => e + (t ?? 0), 0), pe = (n, e) => {
+import { jsxs as mt, jsx as D, Fragment as Xt } from "react/jsx-runtime";
+import Q, { createContext as Et, useContext as tt, useRef as I, useLayoutEffect as Y, useEffect as Pt, version as Kt, forwardRef as Ot, useMemo as et, useState as V, useId as Ft } from "react";
+import { createStore as Rt, useStore as kt } from "zustand";
+const j = (n, e, t) => Math.min(Math.max(n, e), t), pe = (n) => n.reduce((e, t) => e + (t ?? 0), 0), xe = (n, e) => {
   let t = 0;
   for (let s = 0; s < n.length; s++)
     Math.abs(n[s] - e) < Math.abs(n[t] - e) && (t = s);
   return t;
-}, Ft = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = (r === "x" ? l.width : l.height) / (i - o);
-  return e / d;
-}, I = (n, e) => {
+}, zt = (n, e, t, s) => {
+  const { min: o, max: i, origin: r } = U(n, t), c = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, u = (r === "x" ? c.width : c.height) / (i - o);
+  return e / u;
+}, U = (n, e) => {
   const t = n.scales.find((s) => s.id === e);
   if (!t)
     throw new Error(`Scale ${e} not found`);
   return t;
-}, D = (n, e) => {
+}, _ = (n, e) => {
   const t = window.devicePixelRatio || 1;
   n.lineCap = e?.lineCap ?? "butt", n.lineDashOffset = t * (e?.lineDashOffset ?? 0), n.lineJoin = e?.lineJoin ?? "miter", n.lineWidth = t * (e?.lineWidth ?? 1), n.miterLimit = t * (e?.miterLimit ?? 10), n.strokeStyle = e?.strokeStyle ?? "black", n.fillStyle = e?.fillStyle ?? n.strokeStyle, n.font = e?.font ?? `${10 * t}px sans-serif`, n.textAlign = e?.textAlign ?? "start", n.direction = e?.direction ?? "inherit", n.textBaseline = e?.textBaseline ?? "alphabetic", n.fontKerning = e?.fontKerning ?? "auto";
-}, mt = (n, e, t, s) => {
-  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: l } = I(n, t), d = (l === "x" ? o.width : o.height) / (r - i);
-  return e * d;
+}, pt = (n, e, t, s) => {
+  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: c } = U(n, t), u = (c === "x" ? o.width : o.height) / (r - i);
+  return e * u;
 }, H = (n, e, t, s) => {
-  const { min: o, origin: i } = I(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, l = mt(n, e - o, t, s);
+  const { min: o, origin: i } = U(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, c = pt(n, e - o, t, s);
   return i === "x" ? j(
-    r.x + l,
+    r.x + c,
     r.x - 10 * r.width,
     r.x + 11 * r.width
   ) : j(
-    r.y + r.height - l,
+    r.y + r.height - c,
     r.y - 10 * r.height,
     r.y + 11 * r.height
   );
-}, xe = (n, e, t) => {
-  const { min: s, max: o } = I(n, t);
+}, ye = (n, e, t) => {
+  const { min: s, max: o } = U(n, t);
   return j(e, s, o);
-}, Y = (n, e, t) => {
+}, B = (n, e, t) => {
   const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
   return j(e, s.x, s.x + s.width);
-}, B = (n, e, t) => {
+}, N = (n, e, t) => {
   const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
   return j(e, s.y, s.y + s.height);
-}, ut = (n, e, t) => {
-  const { min: s, max: o } = I(n, t);
+}, dt = (n, e, t) => {
+  const { min: s, max: o } = U(n, t);
   return e >= s && e <= o;
 }, L = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = r === "x" ? (e - l.x) / l.width : (l.height - e + l.y) / l.height;
-  return o + d * (i - o);
-}, zt = (n) => {
+  const { min: o, max: i, origin: r } = U(n, t), c = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, u = r === "x" ? (e - c.x) / c.width : (c.height - e + c.y) / c.height;
+  return o + u * (i - o);
+}, Yt = (n) => {
   const { ctx: e, scales: t } = n;
   for (const s of t) {
     if (!s.axis) continue;
-    e.save(), D(e, {
+    e.save(), _(e, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -70,12 +70,12 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     } else s.axis.position === "right" && (e.beginPath(), e.moveTo(o.x, o.y), e.lineTo(o.x, o.y + o.height), e.stroke());
     e.restore();
   }
-}, dt = {
+}, ht = {
   TOP: 400,
   MIDDLE: 300,
   BOTTOM: 200,
   BACKGROUND: 100
-}, Yt = () => Pt((n, e) => {
+}, Bt = () => Rt((n, e) => {
   const t = () => {
     const s = e()._frame;
     if (!s) throw new Error("No frame set in frame store");
@@ -85,17 +85,17 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     _frame: null,
     getFrame: t,
     getCtx: () => t().ctx,
-    clampXPosToChartArea: (s, o) => Y(t(), s, o ?? "canvas"),
-    clampYPosToChartArea: (s, o) => B(t(), s, o ?? "canvas"),
+    clampXPosToChartArea: (s, o) => B(t(), s, o ?? "canvas"),
+    clampYPosToChartArea: (s, o) => N(t(), s, o ?? "canvas"),
     valToPos: (s, o, i) => H(t(), s, o, i ?? "canvas"),
-    valToPxDistance: (s, o, i) => mt(
+    valToPxDistance: (s, o, i) => pt(
       t(),
       s,
       o,
       i ?? "canvas"
     ),
-    valFits: (s, o) => ut(t(), s, o),
-    getScale: (s) => I(t(), s),
+    valFits: (s, o) => dt(t(), s, o),
+    getScale: (s) => U(t(), s),
     _listeners: [],
     _subscribe: (s, o) => (e()._listeners.push([o, s]), e()._listeners.sort((i, r) => i[0] - r[0]), () => {
       const i = e()._listeners.findIndex(([, r]) => r === s);
@@ -106,28 +106,28 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
         o(s);
     }
   };
-}), Bt = () => Pt((n) => ({
+}), Nt = () => Rt((n) => ({
   notify: () => {
     n((e) => ({ version: e.version + 1 }));
   },
   version: 0
-})), pt = Mt(null), Rt = Mt(null), F = (n, e, t) => {
-  const s = tt(pt), o = tt(Rt);
+})), xt = Et(null), At = Et(null), z = (n, e, t) => {
+  const s = tt(xt), o = tt(At);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const i = _(e);
-  i.current = e, z(() => (Promise.resolve().then(() => {
+  const i = I(e);
+  i.current = e, Y(() => (Promise.resolve().then(() => {
     i.current(s.getState());
   }), s.getState()._subscribe(
     (r) => {
       r._frame && i.current(r);
     },
-    typeof n == "number" ? n : dt[n]
-  )), [s, n]), Et(() => {
+    typeof n == "number" ? n : ht[n]
+  )), [s, n]), Pt(() => {
     o.getState().notify();
   }, [o, ...t]);
-}, xt = (n) => {
-  const e = tt(pt);
+}, yt = (n) => {
+  const e = tt(xt);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
   return kt(
@@ -135,59 +135,59 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     n ?? ((t) => t.getFrame())
   );
 };
-function Nt(n) {
+function $t(n) {
   return (e) => {
-    for (const t of n) ht(t, e);
+    for (const t of n) ft(t, e);
   };
 }
-function $t(n) {
+function Vt(n) {
   return (e) => {
     const t = [];
     for (const s of n) {
-      const o = ht(s, e), i = typeof o == "function";
-      t.push(i ? o : () => ht(s, null));
+      const o = ft(s, e), i = typeof o == "function";
+      t.push(i ? o : () => ft(s, null));
     }
     return () => {
       for (const s of t) s();
     };
   };
 }
-function ht(n, e) {
+function ft(n, e) {
   if (typeof n == "function")
     return n(e);
   n && (n.current = e);
 }
-var Vt = parseInt(Xt.split(".")[0], 10) >= 19 ? $t : Nt;
-const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) => {
-  const i = _(null), r = _(null), l = Ht(r), d = et(Yt, []), u = et(Bt, []);
-  z(() => {
-    d.setState({
-      _frame: Wt(n, l, i.current)
+var jt = parseInt(Kt.split(".")[0], 10) >= 19 ? Vt : $t;
+const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) => {
+  const i = I(null), r = I(null), c = Wt(r), u = et(Bt, []), d = et(Nt, []);
+  Y(() => {
+    u.setState({
+      _frame: qt(n, c, i.current)
     });
-    const a = d.getState();
+    const a = u.getState();
     a._notifyListeners(a);
-  }, [n, l, i, d]), z(() => d.getState()._subscribe((a) => {
-    const m = a._frame?.ctx;
-    m && m.clearRect(0, 0, m.canvas.width, m.canvas.height);
-  }, dt.BACKGROUND), [d]), z(() => d.getState()._subscribe((a) => {
-    a._frame && zt(a._frame);
-  }, dt.BOTTOM), [d]), z(() => {
+  }, [n, c, i, u]), Y(() => u.getState()._subscribe((a) => {
+    const f = a._frame?.ctx;
+    f && f.clearRect(0, 0, f.canvas.width, f.canvas.height);
+  }, ht.BACKGROUND), [u]), Y(() => u.getState()._subscribe((a) => {
+    a._frame && Yt(a._frame);
+  }, ht.BOTTOM), [u]), Y(() => {
     let a = !1;
-    return u.subscribe(() => {
+    return d.subscribe(() => {
       a || (a = !0, window.requestAnimationFrame(() => {
-        a = !1, d.setState((c) => ({
-          _frame: c._frame ? { ...c._frame } : null
+        a = !1, u.setState((l) => ({
+          _frame: l._frame ? { ...l._frame } : null
         }));
-        const m = d.getState();
-        m._notifyListeners(m);
+        const f = u.getState();
+        f._notifyListeners(f);
       }));
     });
-  }, [u, d]);
+  }, [d, u]);
   const h = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ ft(
+  return /* @__PURE__ */ mt(
     "div",
     {
-      ref: Vt([o, r]),
+      ref: jt([o, r]),
       className: s,
       style: {
         position: "relative",
@@ -196,51 +196,51 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ A(
+        /* @__PURE__ */ D(
           "canvas",
           {
             ref: i,
-            width: l.width * h,
-            height: l.height * h,
+            width: c.width * h,
+            height: c.height * h,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${l.width}px`,
-              height: `${l.height}px`
+              width: `${c.width}px`,
+              height: `${c.height}px`
             }
           }
         ),
-        /* @__PURE__ */ A(
-          jt,
+        /* @__PURE__ */ D(
+          Ht,
           {
-            frameStore: d,
-            updateRequestStore: u,
+            frameStore: u,
+            updateRequestStore: d,
             children: e
           }
         )
       ]
     }
   );
-}), jt = ({ frameStore: n, updateRequestStore: e, children: t }) => kt(n, (o) => !!o._frame) ? /* @__PURE__ */ A(Rt.Provider, { value: e, children: /* @__PURE__ */ A(pt.Provider, { value: n, children: t }) }) : null, Ht = (n) => {
+}), Ht = ({ frameStore: n, updateRequestStore: e, children: t }) => kt(n, (o) => !!o._frame) ? /* @__PURE__ */ D(At.Provider, { value: e, children: /* @__PURE__ */ D(xt.Provider, { value: n, children: t }) }) : null, Wt = (n) => {
   const [e, t] = V({
     width: 0,
     height: 0
   }), [s] = V(() => new ResizeObserver((o) => {
     for (const i of o) {
-      const r = Math.round(i.contentRect.width), l = Math.round(i.contentRect.height);
+      const r = Math.round(i.contentRect.width), c = Math.round(i.contentRect.height);
       t(
-        (d) => d.width !== r || d.height !== l ? { ...d, width: r, height: l } : d
+        (u) => u.width !== r || u.height !== c ? { ...u, width: r, height: c } : u
       );
     }
   }));
-  return z(() => {
+  return Y(() => {
     if (!n.current) return;
     const o = n.current.clientWidth, i = n.current.clientHeight;
     return t(
       (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
     ), s.observe(n.current, { box: "border-box" }), () => s.disconnect();
   }, [s, n]), e;
-}, Wt = (n, e, t) => {
+}, qt = (n, e, t) => {
   const s = t?.getContext("2d");
   if (!s) return null;
   const o = window.devicePixelRatio || 1;
@@ -252,40 +252,40 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     width: e.width - n.padding.left - n.padding.right,
     height: e.height - n.padding.top - n.padding.bottom
   };
-  for (const c of n.scales)
-    c.axis && (c.origin === "x" ? (c.axis.position === "bottom" || c.axis.position === "top") && (i.height = Math.max(
+  for (const l of n.scales)
+    l.axis && (l.origin === "x" ? (l.axis.position === "bottom" || l.axis.position === "top") && (i.height = Math.max(
       0,
-      i.height - c.axis.size
-    ), c.axis.position === "top" && (i.y += c.axis.size)) : (c.axis.position === "left" || c.axis.position === "right") && (i.width = Math.max(0, i.width - c.axis.size), c.axis.position === "left" && (i.x += c.axis.size)));
+      i.height - l.axis.size
+    ), l.axis.position === "top" && (i.y += l.axis.size)) : (l.axis.position === "left" || l.axis.position === "right") && (i.width = Math.max(0, i.width - l.axis.size), l.axis.position === "left" && (i.x += l.axis.size)));
   const r = {
     x: i.x * o,
     y: i.y * o,
     width: i.width * o,
     height: i.height * o
-  }, l = [];
-  let d = n.padding.left * o, u = s.canvas.width - n.padding.right * o, h = s.canvas.height - n.padding.bottom * o, a = n.padding.top * o;
-  for (const c of n.scales) {
-    if (!c.axis) {
-      l.push({ ...c, axis: null });
+  }, c = [];
+  let u = n.padding.left * o, d = s.canvas.width - n.padding.right * o, h = s.canvas.height - n.padding.bottom * o, a = n.padding.top * o;
+  for (const l of n.scales) {
+    if (!l.axis) {
+      c.push({ ...l, axis: null });
       continue;
     }
-    let x;
-    if (c.origin === "x")
-      switch (c.axis.position) {
+    let m;
+    if (l.origin === "x")
+      switch (l.axis.position) {
         case "bottom":
-          h -= c.axis.size * o, x = {
+          h -= l.axis.size * o, m = {
             x: i.x,
             y: h / o,
             width: i.width,
-            height: c.axis.size
+            height: l.axis.size
           };
           break;
         case "top":
-          a += c.axis.size * o, x = {
+          a += l.axis.size * o, m = {
             x: i.x,
-            y: a / o - c.axis.size,
+            y: a / o - l.axis.size,
             width: i.width,
-            height: c.axis.size
+            height: l.axis.size
           };
           break;
         case "left":
@@ -293,20 +293,20 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (c.axis.position) {
+      switch (l.axis.position) {
         case "left":
-          d += c.axis.size * o, x = {
-            x: d / o - c.axis.size,
+          u += l.axis.size * o, m = {
+            x: u / o - l.axis.size,
             y: i.y,
-            width: c.axis.size,
+            width: l.axis.size,
             height: i.height
           };
           break;
         case "right":
-          u -= c.axis.size * o, x = {
-            x: u / o,
+          d -= l.axis.size * o, m = {
+            x: d / o,
             y: i.y,
-            width: c.axis.size,
+            width: l.axis.size,
             height: i.height
           };
           break;
@@ -314,18 +314,18 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const f = {
-      x: x.x * o,
-      y: x.y * o,
-      width: x.width * o,
-      height: x.height * o
+    const x = {
+      x: m.x * o,
+      y: m.y * o,
+      width: m.width * o,
+      height: m.height * o
     };
-    l.push({
-      ...c,
+    c.push({
+      ...l,
       axis: {
-        ...c.axis,
-        cssRect: x,
-        canvasRect: f
+        ...l.axis,
+        cssRect: m,
+        canvasRect: x
       }
     });
   }
@@ -333,39 +333,39 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     ctx: s,
     dpr: o,
     padding: n.padding,
-    scales: l,
+    scales: c,
     chartAreaCSS: i,
     chartAreaCanvasPX: r
   };
-}, ve = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
+}, ge = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (z(
   n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: d }) => {
-    const u = i();
-    u.save(), u.beginPath(), D(u, o);
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: u }) => {
+    const d = i();
+    d.save(), d.beginPath(), _(d, o);
     for (const h of e) {
-      const a = r(d(h.x, t)), m = l(d(h.y, s));
-      u.lineTo(a, m);
+      const a = r(u(h.x, t)), f = c(u(h.y, s));
+      d.lineTo(a, f);
     }
-    u.stroke(), u.restore();
+    d.stroke(), d.restore();
   },
   [e, t, s, o]
-), null), ge = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (F(
+), null), we = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (z(
   n,
-  ({ getCtx: l, valToPos: d, valFits: u }) => {
-    const h = l();
+  ({ getCtx: c, valToPos: u, valFits: d }) => {
+    const h = c();
     h.save(), h.beginPath();
     const a = new Path2D();
-    D(h, i), r !== void 0 && (h.globalAlpha = r);
-    for (const m of e) {
-      if (!u(m.x, t) || !u(m.y, s))
+    _(h, i), r !== void 0 && (h.globalAlpha = r);
+    for (const f of e) {
+      if (!d(f.x, t) || !d(f.y, s))
         continue;
-      const c = d(m.x, t), x = d(m.y, s);
-      a.moveTo(c + o, x), a.arc(c, x, o, 0, Math.PI * 2);
+      const l = u(f.x, t), m = u(f.y, s);
+      a.moveTo(l + o, m), a.arc(l, m, o, 0, Math.PI * 2);
     }
     h.fill(a), h.stroke(a), h.restore();
   },
   [e, t, s, o, i, r]
-), null), we = ({
+), null), be = ({
   data: n,
   xScaleId: e,
   yScaleId: t,
@@ -373,76 +373,76 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   barWidth: o,
   xPositionOffset: i,
   radius: r,
-  layer: l = "MIDDLE"
-}) => (F(
-  l,
+  layer: c = "MIDDLE"
+}) => (z(
+  c,
   ({
-    getCtx: d,
-    valToPxDistance: u,
+    getCtx: u,
+    valToPxDistance: d,
     valToPos: h,
     clampXPosToChartArea: a,
-    clampYPosToChartArea: m
+    clampYPosToChartArea: f
   }) => {
     if (n.length === 0) return;
-    const c = d();
-    c.save(), D(c, s);
-    const x = u(o, e);
-    c.beginPath();
-    for (const f of n) {
-      const v = h(f.x, e) - x / 2 + i * x, g = m(h(0, t)), S = m(h(f.y, t)), y = g - S, w = a(v), b = a(v + x) - w;
-      r ? c.roundRect(
-        w,
-        S,
-        b,
+    const l = u();
+    l.save(), _(l, s);
+    const m = d(o, e);
+    l.beginPath();
+    for (const x of n) {
+      const v = h(x.x, e) - m / 2 + i * m, w = f(h(0, t)), b = f(h(x.y, t)), S = w - b, y = a(v), g = a(v + m) - y;
+      r ? l.roundRect(
         y,
+        b,
+        g,
+        S,
         r
-      ) : c.rect(w, S, b, y);
+      ) : l.rect(y, b, g, S);
     }
-    c.closePath(), c.fill(), s?.strokeStyle && c.stroke(), c.restore();
+    l.closePath(), l.fill(), s?.strokeStyle && l.stroke(), l.restore();
   },
   [n, e, t, s, o, i, r]
-), null), be = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
+), null), Se = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (z(
   n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: d }) => {
-    const u = [];
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: u }) => {
+    const d = [];
     for (const a of e) {
-      const m = r(d(a.x, t)), c = l(d(a.y[0], s)), x = l(d(a.y[1], s));
-      u.push({ x: m, y: c }), u.unshift({ x: m, y: x });
+      const f = r(u(a.x, t)), l = c(u(a.y[0], s)), m = c(u(a.y[1], s));
+      d.push({ x: f, y: l }), d.unshift({ x: f, y: m });
     }
     const h = i();
-    if (u.length > 0) {
-      h.save(), h.beginPath(), D(h, o), h.moveTo(u[0].x, u[0].y);
-      for (const a of u)
+    if (d.length > 0) {
+      h.save(), h.beginPath(), _(h, o), h.moveTo(d[0].x, d[0].y);
+      for (const a of d)
         h.lineTo(a.x, a.y);
       h.closePath(), h.fill(), h.restore();
     }
   },
   [e, t, s, o]
-), null), Se = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (F(
+), null), Te = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (z(
   n,
-  ({ getCtx: r, clampXPosToChartArea: l, clampYPosToChartArea: d, valToPos: u }) => {
+  ({ getCtx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: d }) => {
     const h = [], a = r();
-    for (const f of e) {
-      const p = l(u(f.x, s)), v = d(u(f.y, o));
+    for (const x of e) {
+      const p = c(d(x.x, s)), v = u(d(x.y, o));
       h.push({ x: p, y: v });
     }
-    const m = h.at(0), c = h.at(-1);
-    if (!m || !c)
+    const f = h.at(0), l = h.at(-1);
+    if (!f || !l)
       return;
-    const x = d(u(0, o));
-    a.save(), a.beginPath(), D(a, i), a.moveTo(m.x, x);
-    for (const f of h)
-      a.lineTo(f.x, f.y);
-    if (a.lineTo(c.x, x), a.closePath(), a.fill(), t) {
-      a.beginPath(), a.moveTo(m.x, m.y);
-      for (const f of h)
-        a.lineTo(f.x, f.y);
+    const m = u(d(0, o));
+    a.save(), a.beginPath(), _(a, i), a.moveTo(f.x, m);
+    for (const x of h)
+      a.lineTo(x.x, x.y);
+    if (a.lineTo(l.x, m), a.closePath(), a.fill(), t) {
+      a.beginPath(), a.moveTo(f.x, f.y);
+      for (const x of h)
+        a.lineTo(x.x, x.y);
       a.stroke();
     }
     a.restore();
   },
   [e, t, s, o, i]
-), null), Te = (n, e) => xt(
+), null), Ce = (n, e) => yt(
   ({
     clampXPosToChartArea: t,
     clampYPosToChartArea: s,
@@ -450,77 +450,77 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     valToPos: i,
     valFits: r
   }) => {
-    const l = {};
-    for (const d in n) {
-      const u = n[d];
-      switch (u.exceeding) {
+    const c = {};
+    for (const u in n) {
+      const d = n[u];
+      switch (d.exceeding) {
         case "discard": {
-          if (r(u.value, u.scaleId)) {
-            const h = i(u.value, u.scaleId, e);
-            l[d] = h;
+          if (r(d.value, d.scaleId)) {
+            const h = i(d.value, d.scaleId, e);
+            c[u] = h;
           }
           break;
         }
         case "clamp": {
-          const h = i(u.value, u.scaleId, e);
-          l[d] = o(u.scaleId)?.origin === "x" ? t(h, e) : s(h, e);
+          const h = i(d.value, d.scaleId, e);
+          c[u] = o(d.scaleId)?.origin === "x" ? t(h, e) : s(h, e);
           break;
         }
       }
     }
-    return l;
+    return c;
   }
-), Ce = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
+), Me = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (z(
   n,
-  ({ getCtx: l, valToPos: d, getScale: u, getFrame: h }) => {
-    const a = l(), m = u(e);
-    if (!m || !m.axis || m.origin !== "x") return;
-    const c = m.axis, x = c.position === "top" ? c.canvasRect.y + c.canvasRect.height : c.canvasRect.y, f = window.devicePixelRatio || 1, p = x, v = (i ?? 6) * f, g = c.position === "top" ? x - v : x + v, S = (o ?? 12) * f;
-    a.save(), a.fontKerning = "auto", D(a, {
+  ({ getCtx: c, valToPos: u, getScale: d, getFrame: h }) => {
+    const a = c(), f = d(e);
+    if (!f || !f.axis || f.origin !== "x") return;
+    const l = f.axis, m = l.position === "top" ? l.canvasRect.y + l.canvasRect.height : l.canvasRect.y, x = window.devicePixelRatio || 1, p = m, v = (i ?? 6) * x, w = l.position === "top" ? m - v : m + v, b = (o ?? 12) * x;
+    a.save(), a.fontKerning = "auto", _(a, {
       ...t
     }), a.beginPath();
-    const y = Array.isArray(r) ? r : r({ ...m, axis: c }, h());
-    for (const { value: w } of y) {
-      const b = d(w, e, "canvas");
-      a.moveTo(b, p), a.lineTo(b, g);
+    const S = Array.isArray(r) ? r : r({ ...f, axis: l }, h());
+    for (const { value: y } of S) {
+      const g = u(y, e, "canvas");
+      a.moveTo(g, p), a.lineTo(g, w);
     }
-    a.stroke(), a.restore(), a.save(), D(a, {
-      textBaseline: c.position === "top" ? "bottom" : "top",
+    a.stroke(), a.restore(), a.save(), _(a, {
+      textBaseline: l.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...t,
       ...s
     });
-    for (const { value: w, label: b } of y) {
-      const P = d(w, e, "canvas"), T = b.split(`
+    for (const { value: y, label: g } of S) {
+      const P = u(y, e, "canvas"), C = g.split(`
 `);
-      for (let M = 0; M < T.length; M++)
-        a.fillText(T[M], P, g + f * 2 + M * S);
+      for (let T = 0; T < C.length; T++)
+        a.fillText(C[T], P, w + x * 2 + T * b);
     }
     a.restore();
   },
   [r, e, t, s]
-), null), Me = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
+), null), Ee = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (z(
   n,
-  ({ getCtx: l, valToPos: d, getScale: u, getFrame: h }) => {
-    const a = l(), m = u(e);
-    if (!m || !m.axis || m.origin !== "y") return;
-    const c = m.axis, x = c.position === "left" ? c.canvasRect.x + c.canvasRect.width : c.canvasRect.x, f = x, p = i ?? 6, v = c.position === "left" ? x - p : x + p, g = o ?? 12, S = Array.isArray(r) ? r : r({ ...m, axis: c }, h());
-    a.save(), a.fontKerning = "auto", D(a, { ...t }), a.beginPath();
-    for (const { value: y } of S) {
-      const w = d(y, e, "canvas");
-      a.moveTo(f, w), a.lineTo(v, w);
+  ({ getCtx: c, valToPos: u, getScale: d, getFrame: h }) => {
+    const a = c(), f = d(e);
+    if (!f || !f.axis || f.origin !== "y") return;
+    const l = f.axis, m = l.position === "left" ? l.canvasRect.x + l.canvasRect.width : l.canvasRect.x, x = m, p = i ?? 6, v = l.position === "left" ? m - p : m + p, w = o ?? 12, b = Array.isArray(r) ? r : r({ ...f, axis: l }, h());
+    a.save(), a.fontKerning = "auto", _(a, { ...t }), a.beginPath();
+    for (const { value: S } of b) {
+      const y = u(S, e, "canvas");
+      a.moveTo(x, y), a.lineTo(v, y);
     }
-    a.stroke(), a.restore(), a.save(), D(a, {
+    a.stroke(), a.restore(), a.save(), _(a, {
       textBaseline: "middle",
-      textAlign: c.position === "left" ? "right" : "left",
+      textAlign: l.position === "left" ? "right" : "left",
       ...t,
       ...s
     });
-    for (const { value: y, label: w } of S) {
-      const b = d(y, e, "canvas"), P = w.split(`
+    for (const { value: S, label: y } of b) {
+      const g = u(S, e, "canvas"), P = y.split(`
 `);
-      for (let T = 0; T < P.length; T++)
-        a.fillText(` ${P[T]} `, v, b + T * g);
+      for (let C = 0; C < P.length; C++)
+        a.fillText(` ${P[C]} `, v, g + C * w);
     }
     a.restore();
   },
@@ -551,7 +551,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   documentmouseup: k(),
   pressandwheel: k(),
   sync_move: k()
-}, R = (n, e, t) => {
+}, A = (n, e, t) => {
   const s = Q.useRef(t);
   s.current = t, Q.useEffect(() => E[n].addEventListener(
     e,
@@ -559,35 +559,32 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       s.current(r, i);
     }
   ), [e, n, s]);
-}, yt = Q.createContext(""), vt = (n, e) => {
-  const t = Q.useContext(yt);
-  return R(n, t, e);
-}, qt = (n, e, t, s, o) => {
+}, vt = Q.createContext(""), gt = (n, e) => {
+  const t = Q.useContext(vt);
+  return A(n, t, e);
+}, Gt = (n, e, t, s, o) => {
   if (!e) return;
-  const i = s ?? t.scales.find((a) => a.origin === "x")?.id, r = o ?? t.scales.find((a) => a.origin === "y")?.id;
-  if (!i || !r)
-    return;
-  const l = n.clientX - e.left, d = {
+  const i = s ?? t.scales.find((a) => a.origin === "x")?.id, r = o ?? t.scales.find((a) => a.origin === "y")?.id, c = n.clientX - e.left, u = i ? {
     scaleId: i,
-    value: L(t, l, i, "css")
-  }, u = n.clientY - e.top, h = {
+    value: L(t, c, i, "css")
+  } : null, d = n.clientY - e.top, h = r ? {
     scaleId: r,
-    value: L(t, u, r, "css")
-  };
-  return { pointerSyncPosition: { x: d, y: h }, cssX: l, cssY: u };
-}, O = (n, e) => {
+    value: L(t, d, r, "css")
+  } : null;
+  return { pointerSyncPosition: { x: u, y: h }, cssX: c, cssY: d };
+}, F = (n, e) => {
   const { x: t, y: s } = n, o = t && e.scales.some((r) => r.id === t.scaleId) ? H(e, t.value, t.scaleId, "css") : null, i = s && e.scales.some((r) => r.id === s.scaleId) ? H(e, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
     cssY: i,
     scaled: Object.fromEntries(
       e.scales.flatMap((r) => {
-        const l = r.origin === "y" ? i : o;
-        return l === null ? [] : [[r.id, L(e, l, r.id, "css")]];
+        const c = r.origin === "y" ? i : o;
+        return c === null ? [] : [[r.id, L(e, c, r.id, "css")]];
       })
     )
   };
-}, Tt = (n, e, t) => {
+}, Ct = (n, e, t) => {
   const s = H(
     t,
     e.from,
@@ -602,12 +599,12 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     (r) => {
       if (r.origin !== n)
         return [];
-      const l = L(t, s, r.id, "css"), d = L(t, o, r.id, "css");
+      const c = L(t, s, r.id, "css"), u = L(t, o, r.id, "css");
       return [
         {
           scaleId: r.id,
-          from: l,
-          to: d
+          from: c,
+          to: u
         }
       ];
     }
@@ -617,7 +614,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     toCSS: o,
     scaled: i
   };
-}, Ee = ({
+}, Pe = ({
   id: n,
   onClick: e,
   onDblClick: t,
@@ -625,82 +622,83 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   onMouseDown: o,
   onMouseUp: i,
   onDocumentMouseUp: r,
-  onSpanSelect: l,
-  onContextMenu: d,
-  className: u,
+  onSpanSelect: c,
+  onContextMenu: u,
+  className: d,
   style: h,
   sync: a,
-  innerChildren: m,
-  children: c
+  innerChildren: f,
+  children: l
 }) => {
-  const x = Ot(), f = n || x;
-  return R("dblclick", f, (p) => {
-    t?.(p);
-  }), R("click", f, (p) => {
-    e?.(p);
-  }), R("move", f, (p) => {
-    s?.(p);
-  }), R("mousedown", f, (p) => {
-    o?.(p);
-  }), R("mouseup", f, (p) => {
-    i?.(p);
-  }), R("documentmouseup", f, (p) => {
-    r?.(p);
-  }), R("spanselect", f, (p) => {
-    l?.(p);
-  }), R("contextmenu", f, (p) => {
-    d?.(p);
-  }), /* @__PURE__ */ ft(yt.Provider, { value: f, children: [
-    /* @__PURE__ */ A(
-      Gt,
+  const m = Ft();
+  return A("dblclick", m, (x) => {
+    t?.(x);
+  }), A("click", m, (x) => {
+    e?.(x);
+  }), A("move", m, (x) => {
+    s?.(x);
+  }), A("mousedown", m, (x) => {
+    o?.(x);
+  }), A("mouseup", m, (x) => {
+    i?.(x);
+  }), A("documentmouseup", m, (x) => {
+    r?.(x);
+  }), A("spanselect", m, (x) => {
+    c?.(x);
+  }), A("contextmenu", m, (x) => {
+    u?.(x);
+  }), /* @__PURE__ */ mt(vt.Provider, { value: m, children: [
+    /* @__PURE__ */ D(
+      Zt,
       {
-        className: u,
+        id: n,
+        className: d,
         style: h,
         sync: a,
-        children: m
+        children: f
       }
     ),
-    c
+    l
   ] });
-}, Gt = ({ className: n, style: e, sync: t, children: s }) => {
-  const o = _(null), i = xt(), r = _(i);
-  r.current = i;
-  const l = tt(yt), d = t?.key || l, u = _(null), h = _(null), a = _(null), m = () => {
-    const f = o.current?.parentElement;
-    if (f) {
-      if (f.dataset.canplotroot === void 0)
+}, Zt = ({ id: n, className: e, style: t, sync: s, children: o }) => {
+  const i = I(null), r = yt(), c = I(r);
+  c.current = r;
+  const u = tt(vt), d = s?.key || u, h = I(null), a = I(null), f = I(null), l = () => {
+    const p = i.current?.parentElement;
+    if (p) {
+      if (p.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return f.getBoundingClientRect();
+      return p.getBoundingClientRect();
     }
-  }, c = (f, p) => {
-    const v = qt(
-      f,
-      m(),
-      r.current,
-      t?.xViaScaleId,
-      t?.yViaScaleId
+  }, m = (p, v) => {
+    const w = Gt(
+      p,
+      l(),
+      c.current,
+      s?.xViaScaleId,
+      s?.yViaScaleId
     );
-    v && p(
-      v.pointerSyncPosition,
-      { cssX: v.cssX, cssY: v.cssY },
+    w && v(
+      w.pointerSyncPosition,
+      { cssX: w.cssX, cssY: w.cssY },
       {
-        ctrlKey: f.ctrlKey,
-        altKey: f.altKey,
-        shiftKey: f.shiftKey,
-        metaKey: f.metaKey
+        ctrlKey: p.ctrlKey,
+        altKey: p.altKey,
+        shiftKey: p.shiftKey,
+        metaKey: p.metaKey
       }
     );
-  }, x = _(c);
-  return x.current = c, Et(() => {
-    const f = (y) => {
-      const w = h.current;
-      w && E.spanselect.dispatchEvent(l, {
-        ...w,
+  }, x = I(m);
+  return x.current = m, Pt(() => {
+    const p = (y) => {
+      const g = a.current;
+      g && E.spanselect.dispatchEvent(u, {
+        ...g,
         completed: !0
-      }), E.documentmouseup.dispatchEvent(l, {
-        frame: r.current,
+      }), E.documentmouseup.dispatchEvent(u, {
+        frame: c.current,
         keys: {
           ctrlKey: y.ctrlKey,
           altKey: y.altKey,
@@ -708,72 +706,72 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           metaKey: y.metaKey
         }
       });
-    }, p = (y) => {
-      const w = {
+    }, v = (y) => {
+      const g = {
         ctrlKey: y.ctrlKey,
         altKey: y.altKey,
         shiftKey: y.shiftKey,
         metaKey: y.metaKey
-      }, b = a.current;
-      if (b && Object.entries(w).some(
-        ([T, M]) => b.keys[T] !== M
+      }, P = f.current;
+      if (P && Object.entries(g).some(
+        ([T, M]) => P.keys[T] !== M
       )) {
-        const T = { ...b, keys: w };
-        a.current = T, E.sync_move.dispatchEvent(d, T);
+        const T = { ...P, keys: g };
+        f.current = T, E.sync_move.dispatchEvent(d, T);
       }
-      const P = h.current;
-      if (P && Object.entries(w).some(
-        ([T, M]) => P.keys[T] !== M
+      const C = a.current;
+      if (C && Object.entries(g).some(
+        ([T, M]) => C.keys[T] !== M
       )) {
         y.stopPropagation(), y.preventDefault();
-        const T = { ...P, keys: w };
-        h.current = T, E.spanselect.dispatchEvent(l, T);
+        const T = { ...C, keys: g };
+        a.current = T, E.spanselect.dispatchEvent(u, T);
       }
-    }, v = (y) => {
+    }, w = (y) => {
       x.current(
         y,
-        (w, { cssX: b, cssY: P }, T) => {
-          const M = u.current;
-          if (!M || !w.x || !w.y) return;
-          const C = r.current, N = M.xRangeCss.start, K = b, ot = M.yRangeCss.start, it = P, rt = I(C, w.x.scaleId), ct = I(C, w.y.scaleId);
-          u.current = {
-            xRangeCss: { start: N, end: K },
-            yRangeCss: { start: ot, end: it }
+        (g, { cssX: P, cssY: C }, T) => {
+          const M = h.current;
+          if (!M || !g.x || !g.y) return;
+          const R = c.current, O = M.xRangeCss.start, ot = P, it = M.yRangeCss.start, rt = C, ct = U(R, g.x.scaleId), at = U(R, g.y.scaleId);
+          h.current = {
+            xRangeCss: { start: O, end: ot },
+            yRangeCss: { start: it, end: rt }
           };
           let $ = "below_threshold";
-          const at = Math.abs(ot - it), lt = Math.abs(N - K);
-          at < 10 && lt < 10 ? $ = "below_threshold" : at > 30 && lt > 30 ? $ = "box" : at > lt ? $ = "y" : $ = "x";
-          const wt = {
-            scaleId: rt.id,
+          const lt = Math.abs(it - rt), ut = Math.abs(O - ot);
+          lt < 10 && ut < 10 ? $ = "below_threshold" : lt > 30 && ut > 30 ? $ = "box" : lt > ut ? $ = "y" : $ = "x";
+          const bt = {
+            scaleId: ct.id,
             from: L(
-              C,
-              Y(r.current, N, "css"),
-              rt.id,
+              R,
+              B(c.current, O, "css"),
+              ct.id,
               "css"
             ),
             to: L(
-              C,
-              Y(r.current, K, "css"),
-              rt.id,
+              R,
+              B(c.current, ot, "css"),
+              ct.id,
               "css"
             )
-          }, bt = {
-            scaleId: ct.id,
+          }, St = {
+            scaleId: at.id,
             from: L(
-              C,
-              B(r.current, ot, "css"),
-              ct.id,
+              R,
+              N(c.current, it, "css"),
+              at.id,
               "css"
             ),
             to: L(
-              C,
-              B(r.current, it, "css"),
-              ct.id,
+              R,
+              N(c.current, rt, "css"),
+              at.id,
               "css"
             )
-          }, W = wt && Tt("x", wt, r.current), q = bt && Tt("y", bt, r.current), Lt = W?.scaled, It = q?.scaled, St = {
+          }, W = bt && Ct("x", bt, c.current), q = St && Ct("y", St, c.current), Lt = W?.scaled, Ut = q?.scaled, Tt = {
             mode: $,
-            frame: r.current,
+            frame: c.current,
             completed: !1,
             x: {
               css: W && {
@@ -787,265 +785,268 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
                 from: q.fromCSS,
                 to: q.toCSS
               },
-              scaled: It ?? []
+              scaled: Ut ?? []
             },
             keys: T
           };
-          h.current = St, E.spanselect.dispatchEvent(
-            l,
-            St
+          a.current = Tt, E.spanselect.dispatchEvent(
+            u,
+            Tt
           );
         }
       );
-    }, g = (y) => {
-      x.current(y, (w, b, P) => {
-        const T = O(
-          w,
-          r.current
+    }, b = (y) => {
+      x.current(y, (g, P, C) => {
+        const T = F(
+          g,
+          c.current
         );
         if (!T) return;
-        if (Object.values(P).some((C) => C)) {
+        if (Object.values(C).some((R) => R)) {
           y.preventDefault();
-          const C = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
-          E.pressandwheel.dispatchEvent(l, {
+          const R = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
+          E.pressandwheel.dispatchEvent(u, {
             pointer: T,
-            frame: r.current,
-            keys: P,
+            frame: c.current,
+            keys: C,
             deltaX: y.deltaX,
             deltaY: y.deltaY,
-            deltaAbs: C
+            deltaAbs: R
           });
         }
       });
     };
-    document.addEventListener("mouseup", f), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", v);
-    const S = o.current;
-    return S?.addEventListener("wheel", g, {
+    document.addEventListener("mouseup", p), document.addEventListener("keydown", v), document.addEventListener("keyup", v), document.addEventListener("mousemove", w);
+    const S = i.current;
+    return S?.addEventListener("wheel", b, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", f), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", v), S?.removeEventListener("wheel", g);
+      document.removeEventListener("mouseup", p), document.removeEventListener("keydown", v), document.removeEventListener("keyup", v), document.removeEventListener("mousemove", w), S?.removeEventListener("wheel", b);
     };
-  }, [r, l, d, x]), R("sync_move", d, (f) => {
-    const p = f.positions ? O(
-      f.positions,
-      r.current
+  }, [c, u, d, x]), A("sync_move", d, (p) => {
+    const v = p.positions ? F(
+      p.positions,
+      c.current
     ) : null;
-    a.current = f, E.move.dispatchEvent(l, {
-      frame: r.current,
-      pointer: p ?? null,
-      keys: f.keys
+    f.current = p, E.move.dispatchEvent(u, {
+      frame: c.current,
+      pointer: v ?? null,
+      keys: p.keys,
+      source: p.originInteractionsId === u ? "own" : "sync"
     });
-  }), /* @__PURE__ */ A(
+  }), /* @__PURE__ */ D(
     "div",
     {
-      ref: o,
-      id: "interactions",
-      className: n,
+      ref: i,
+      id: n,
+      className: e,
       style: {
         position: "absolute",
-        left: i.chartAreaCSS.x,
-        top: i.chartAreaCSS.y,
-        width: i.chartAreaCSS.width,
-        height: i.chartAreaCSS.height,
+        left: r.chartAreaCSS.x,
+        top: r.chartAreaCSS.y,
+        width: r.chartAreaCSS.width,
+        height: r.chartAreaCSS.height,
         zIndex: 25,
-        ...e
+        ...t
       },
-      onDragStart: (f) => {
-        f.preventDefault();
+      onDragStart: (p) => {
+        p.preventDefault();
       },
-      onClick: (f) => {
-        c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onClick: (p) => {
+        m(p, (v, w, b) => {
+          const S = F(
+            v,
+            c.current
           );
-          S && E.click.dispatchEvent(l, {
+          S && E.click.dispatchEvent(u, {
             pointer: S,
-            frame: r.current,
-            keys: g
+            frame: c.current,
+            keys: b
           });
         });
       },
-      onMouseLeave: (f) => {
-        c(f, (p, v, g) => {
+      onMouseLeave: (p) => {
+        m(p, (v, w, b) => {
           E.sync_move.dispatchEvent(d, {
             positions: null,
-            keys: g
+            keys: b,
+            originInteractionsId: u
           });
         });
       },
-      onMouseMove: (f) => {
-        c(f, (p, v, g) => {
+      onMouseMove: (p) => {
+        m(p, (v, w, b) => {
           E.sync_move.dispatchEvent(d, {
-            positions: p,
-            keys: g
+            positions: v,
+            keys: b,
+            originInteractionsId: u
           });
         });
       },
-      onMouseDown: (f) => {
-        c(f, (p, { cssX: v, cssY: g }, S) => {
-          const y = O(
-            p,
-            r.current
+      onMouseDown: (p) => {
+        m(p, (v, { cssX: w, cssY: b }, S) => {
+          const y = F(
+            v,
+            c.current
           );
-          y && (E.mousedown.dispatchEvent(l, {
+          y && (E.mousedown.dispatchEvent(u, {
             pointer: y,
-            frame: r.current,
+            frame: c.current,
             keys: S
-          }), u.current = {
-            xRangeCss: { start: v, end: v },
-            yRangeCss: { start: g, end: g }
+          }), h.current = {
+            xRangeCss: { start: w, end: w },
+            yRangeCss: { start: b, end: b }
           });
         });
       },
-      onMouseUp: (f) => {
-        c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onMouseUp: (p) => {
+        m(p, (v, w, b) => {
+          const S = F(
+            v,
+            c.current
           );
           if (!S) return;
-          E.mouseup.dispatchEvent(l, {
-            frame: r.current,
+          E.mouseup.dispatchEvent(u, {
+            frame: c.current,
             pointer: S,
-            keys: g
+            keys: b
           });
-          const y = h.current;
-          h.current = null;
-          const w = u.current;
-          if (u.current = null, w && y) {
-            const b = {
+          const y = a.current;
+          a.current = null;
+          const g = h.current;
+          if (h.current = null, g && y) {
+            const P = {
               ...y,
-              keys: g,
+              keys: b,
               completed: !0
             };
-            h.current = null, E.spanselect.dispatchEvent(
-              l,
-              b
+            a.current = null, E.spanselect.dispatchEvent(
+              u,
+              P
             );
           }
         });
       },
-      onContextMenu: (f) => {
-        f.preventDefault(), c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onContextMenu: (p) => {
+        p.preventDefault(), m(p, (v, w, b) => {
+          const S = F(
+            v,
+            c.current
           );
-          S && E.contextmenu.dispatchEvent(l, {
-            frame: r.current,
+          S && E.contextmenu.dispatchEvent(u, {
+            frame: c.current,
             pointer: S,
-            keys: g
+            keys: b
           });
         });
       },
-      onDoubleClick: (f) => {
-        c(f, (p, v, g) => {
-          const S = O(
-            p,
-            r.current
+      onDoubleClick: (p) => {
+        m(p, (v, w, b) => {
+          const S = F(
+            v,
+            c.current
           );
-          S && E.dblclick.dispatchEvent(l, {
-            frame: r.current,
+          S && E.dblclick.dispatchEvent(u, {
+            frame: c.current,
             pointer: S,
-            keys: g
+            keys: b
           });
         });
       },
-      children: s
+      children: o
     }
   );
-}, Pe = ({ data: n, renderTooltip: e, xScaleId: t }) => {
+}, Re = ({ data: n, renderTooltip: e, xScaleId: t }) => {
   const [s, o] = V(null);
-  vt("move", (r) => {
+  gt("move", (r) => {
     o(r);
   });
   const i = et(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: l } = s, d = l?.scaled[t];
-    if (d === void 0)
+    const { frame: r, pointer: c } = s, u = c?.scaled[t];
+    if (u === void 0)
       return null;
-    const u = [];
-    let h = d;
+    const d = [];
+    let h = u;
     for (const a of n) {
-      let m = null, c = 1 / 0;
-      for (const [f, p] of a.points.entries()) {
-        if (!ut(r, p.x, t) || !ut(r, p.y, a.yScaleId))
+      let f = null, l = 1 / 0;
+      for (const [x, p] of a.points.entries()) {
+        if (!dt(r, p.x, t) || !dt(r, p.y, a.yScaleId))
           continue;
-        const v = Math.abs(p.x - d);
-        v < c && (c = v, m = f);
+        const v = Math.abs(p.x - u);
+        v < l && (l = v, f = x);
       }
-      const x = a.points[m ?? -1];
-      if (!x || mt(r, c, t, "css") > 30) {
-        u.push({ seriesId: a.seriesId, y: null });
+      const m = a.points[f ?? -1];
+      if (!m || pt(r, l, t, "css") > 30) {
+        d.push({ seriesId: a.seriesId, y: null });
         continue;
       }
-      h = x.x, u.push({
+      h = m.x, d.push({
         seriesId: a.seriesId,
-        y: x.y
+        y: m.y
       });
     }
     return {
       frame: r,
       x: h,
-      points: u
+      points: d
     };
   }, [n, s, t]);
   return e(i);
 }, ke = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
   const [o, i] = V(null);
-  if (vt("move", (m) => {
-    i(m);
+  if (gt("move", (f) => {
+    i(f);
   }), !o)
     return null;
-  const { frame: r, pointer: l } = o, d = l?.cssX ?? null, u = l?.cssY ?? null, h = d ? Y(r, d, "css") : 0, a = u ? B(r, u, "css") : 0;
-  return /* @__PURE__ */ ft(Ut, { children: [
-    /* @__PURE__ */ A(
+  const { frame: r, pointer: c } = o, u = c?.cssX ?? null, d = c?.cssY ?? null, h = u ? B(r, u, "css") : 0, a = d ? N(r, d, "css") : 0;
+  return /* @__PURE__ */ mt(Xt, { children: [
+    /* @__PURE__ */ D(
       "div",
       {
-        "data-show": !!l,
+        "data-show": !!c,
         className: e?.(o),
         style: {
           position: "absolute",
           left: 0,
-          visibility: d === null ? "hidden" : "visible",
+          visibility: u === null ? "hidden" : "visible",
           top: r.chartAreaCSS.y,
           height: r.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: l ? 1 : 0,
+          opacity: c ? 1 : 0,
           transform: `translateX(${h}px)`,
           ...n?.(o)
         }
       }
     ),
-    /* @__PURE__ */ A(
+    /* @__PURE__ */ D(
       "div",
       {
         className: s?.(o),
-        "data-show": !!l,
+        "data-show": !!c,
         style: {
           position: "absolute",
-          visibility: u === null ? "hidden" : "visible",
+          visibility: d === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
           left: r.chartAreaCSS.x,
           width: r.chartAreaCSS.width,
           pointerEvents: "none",
-          opacity: l ? 1 : 0,
+          opacity: c ? 1 : 0,
           transform: `translateY(${a}px)`,
           ...t?.(o)
         }
       }
     )
   ] });
-}, Re = ({ makeClassName: n, makeStyle: e }) => {
+}, Ae = ({ makeClassName: n, makeStyle: e }) => {
   const [t, s] = V(null);
-  vt("spanselect", (i) => {
+  gt("spanselect", (i) => {
     s(
       i.mode === "below_threshold" || i.completed ? null : i
     );
@@ -1053,10 +1054,10 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   const o = et(() => {
     if (!t || t.mode === "below_threshold")
       return null;
-    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, l = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, d = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, u = Y(t.frame, i, "css"), h = Y(t.frame, r, "css"), a = B(t.frame, l, "css"), m = B(t.frame, d, "css"), c = Math.min(u, h), x = Math.min(a, m), f = Math.abs(h - u), p = Math.abs(m - a);
-    return { leftPx: c, topPx: x, widthPx: f, heightPx: p };
+    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, c = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, u = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, d = B(t.frame, i, "css"), h = B(t.frame, r, "css"), a = N(t.frame, c, "css"), f = N(t.frame, u, "css"), l = Math.min(d, h), m = Math.min(a, f), x = Math.abs(h - d), p = Math.abs(f - a);
+    return { leftPx: l, topPx: m, widthPx: x, heightPx: p };
   }, [t]);
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ D(
     "div",
     {
       className: t ? n?.(t) : void 0,
@@ -1072,9 +1073,9 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       }
     }
   );
-}, Ae = ({ style: n, children: e, scaleId: t, ...s }) => {
-  const o = xt((i) => i.getScale(t)?.axis);
-  return o ? /* @__PURE__ */ A(
+}, De = ({ style: n, children: e, scaleId: t, ...s }) => {
+  const o = yt((i) => i.getScale(t)?.axis);
+  return o ? /* @__PURE__ */ D(
     "div",
     {
       style: {
@@ -1090,32 +1091,32 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       children: e
     }
   ) : null;
-}, At = 60, Zt = 30, Dt = "UTC", Jt = "en-GB", De = ({
+}, Dt = 60, Jt = 30, _t = "UTC", Qt = "en-GB", _e = ({
   space: n,
   formatter: e,
   acceptableIncrements: t
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, l = [], d = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? At : Zt)) * d, h = Ft(
+  const { min: i, max: r } = s, c = [], u = window.devicePixelRatio || 1, d = (n ?? (s.origin === "x" ? Dt : Jt)) * u, h = zt(
     o,
-    u,
+    d,
     s.id,
     "canvas"
-  ), a = t ?? G, m = a.find((x) => x > h) ?? a.at(-1) ?? 1;
-  let c = i;
-  if (Math.abs(c % m) > Number.EPSILON) {
-    const x = (m - c % m) % m;
-    c += x;
+  ), a = t ?? G, f = a.find((m) => m > h) ?? a.at(-1) ?? 1;
+  let l = i;
+  if (Math.abs(l % f) > Number.EPSILON) {
+    const m = (f - l % f) % f;
+    l += m;
   }
-  for (; c <= r && l.length < 1e3; )
-    l.push(c), c += m;
-  return (e ?? Qt)(l);
-}, Qt = (n) => {
+  for (; l <= r && c.length < 1e3; )
+    c.push(l), l += f;
+  return (e ?? te)(c);
+}, te = (n) => {
   const e = Math.max(0, Math.ceil(-Math.log10(n[1] - n[0])));
   return n.map((t) => ({ value: t, label: t.toFixed(e) }));
 }, G = [];
 for (let n = -12; n <= 12; n++)
   G.push(1 * 10 ** n), G.push(2 * 10 ** n), G.push(5 * 10 ** n);
-const te = 1, _t = 1e3 * te, gt = 60 * _t, nt = 60 * gt, st = 24 * nt, ee = 30 * st, ne = 365 * st, se = [
+const ee = 1, It = 1e3 * ee, wt = 60 * It, nt = 60 * wt, st = 24 * nt, ne = 30 * st, se = 365 * st, oe = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1173,60 +1174,60 @@ const te = 1, _t = 1e3 * te, gt = 60 * _t, nt = 60 * gt, st = 24 * nt, ee = 30 *
     case "milliseconds":
       return e;
     case "seconds":
-      return e * _t;
+      return e * It;
     case "minutes":
-      return e * gt;
+      return e * wt;
     case "hours":
       return e * nt;
     case "days":
       return e * st;
     case "months":
-      return e * ee;
-    case "years":
       return e * ne;
+    case "years":
+      return e * se;
   }
-}, oe = (n, e) => {
+}, ie = (n, e) => {
   const t = new Date(n);
   return t.setUTCMilliseconds(t.getUTCMilliseconds() + e), t.getTime();
-}, ie = (n, e) => {
+}, re = (n, e) => {
   const t = new Date(n);
   return t.setUTCSeconds(t.getUTCSeconds() + e), t.getTime();
-}, re = (n, e) => {
+}, ce = (n, e) => {
   const t = new Date(n);
   return t.setUTCMinutes(t.getUTCMinutes() + e), t.getTime();
-}, ce = (n, e) => {
+}, ae = (n, e) => {
   const t = new Date(n);
   return t.setUTCHours(t.getUTCHours() + e), t.getTime();
-}, ae = (n, e) => {
+}, le = (n, e) => {
   const t = new Date(n);
   return t.setUTCDate(t.getUTCDate() + e), t.getTime();
-}, Ct = (n, e) => {
+}, Mt = (n, e) => {
   const t = new Date(n);
   return t.setUTCMonth(t.getUTCMonth() + e), t.getTime();
-}, X = (n, e) => {
+}, K = (n, e) => {
   const [t, s] = e;
   switch (s) {
     case "milliseconds":
-      return oe(n, t);
-    case "seconds":
       return ie(n, t);
-    case "minutes":
+    case "seconds":
       return re(n, t);
-    case "hours":
+    case "minutes":
       return ce(n, t);
-    case "days":
+    case "hours":
       return ae(n, t);
+    case "days":
+      return le(n, t);
     case "months":
-      return Ct(n, t);
+      return Mt(n, t);
     case "years":
-      return Ct(n, t * 12);
+      return Mt(n, t * 12);
   }
 };
 function J(n, e) {
   const t = new Date(n), s = new Date(t.toLocaleString("en-US", { timeZone: e })), o = new Date(t.toLocaleString("en-US", { timeZone: "UTC" }));
   return (s.getTime() - o.getTime()) / (3600 * 1e3);
 }
-const le = (n, e, t = "UTC") => {
+const ue = (n, e, t = "UTC") => {
   const [s, o] = e;
   let i = new Date(n);
   const r = () => {
@@ -1246,7 +1247,7 @@ const le = (n, e, t = "UTC") => {
       break;
     case "minutes":
       i.setUTCMinutes(
-        Math.ceil(i.getTime() % nt / gt / s) * s,
+        Math.ceil(i.getTime() % nt / wt / s) * s,
         0,
         0
       );
@@ -1262,69 +1263,69 @@ const le = (n, e, t = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < n && (i = new Date(X(i, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < n && (i = new Date(K(i, [1, o])));
       break;
   }
   return i.getTime();
-}, _e = ({
-  timeZone: n = Dt,
-  space: e = At,
+}, Ie = ({
+  timeZone: n = _t,
+  space: e = Dt,
   formatter: t,
   locale: s,
   showTimezone: o
 } = {}) => (i, r) => {
-  const { min: l, max: d } = i, u = Math.floor(r.chartAreaCanvasPX.width / e) + 1, a = (d - l) / u, [m, c] = se.find(
-    (g) => Z(g) >= a
-  ) ?? [1, "milliseconds"], x = le(l, [m, c], n), f = J(x, n), p = [x];
+  const { min: c, max: u } = i, d = Math.floor(r.chartAreaCanvasPX.width / e) + 1, a = (u - c) / d, [f, l] = oe.find(
+    (w) => Z(w) >= a
+  ) ?? [1, "milliseconds"], m = ue(c, [f, l], n), x = J(m, n), p = [m];
   let v;
   for (; ; ) {
-    switch (c) {
+    switch (l) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        v = X(x, [p.length * m, c]);
+        v = K(m, [p.length * f, l]);
         break;
       }
       case "days": {
-        const g = X(x, [
-          p.length * m,
-          c
+        const w = K(m, [
+          p.length * f,
+          l
         ]);
-        v = X(g, [
-          f - J(g, n),
+        v = K(w, [
+          x - J(w, n),
           "hours"
         ]);
         break;
       }
       case "months":
       case "years": {
-        const g = X(
-          X(X(x, [f, "hours"]), [
-            p.length * m,
-            c
+        const w = K(
+          K(K(m, [x, "hours"]), [
+            p.length * f,
+            l
           ]),
-          [-f, "hours"]
+          [-x, "hours"]
         );
-        v = X(g, [
-          f - J(g, n),
+        v = K(w, [
+          x - J(w, n),
           "hours"
         ]);
         break;
       }
     }
-    if (v > d)
+    if (v > u)
       break;
     p.push(v);
   }
-  return (t ?? ue({
+  return (t ?? de({
     locale: s,
     showTimezone: o,
     timeZone: n
   }))(p);
-}, U = (n, e, t) => n.find((s) => s.type === t)?.value !== e.find((s) => s.type === t)?.value, ue = ({
-  timeZone: n = Dt,
-  locale: e = Jt,
+}, X = (n, e, t) => n.find((s) => s.type === t)?.value !== e.find((s) => s.type === t)?.value, de = ({
+  timeZone: n = _t,
+  locale: e = Qt,
   showTimezone: t = !0
 }) => {
   const s = new Intl.DateTimeFormat(e, {
@@ -1340,70 +1341,70 @@ const le = (n, e, t = "UTC") => {
     timeZone: n
   });
   return (o) => {
-    const i = o[1] - o[0], r = i < Z([1, "days"]), l = i < Z([1, "minutes"]), d = i < Z([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, h, a) => {
-      const m = a[h - 1], c = h === 0 || U(u.label, m.label, "year"), x = h === 0 || U(u.label, m.label, "day"), f = h === 0 || U(u.label, m.label, "month"), p = h === 0 || U(u.label, m.label, "hour"), v = h === 0 || U(u.label, m.label, "timeZoneName"), g = h === 0 || U(u.label, m.label, "minute"), S = h === 0 || U(u.label, m.label, "second"), y = h === 0 || U(u.label, m.label, "fractionalSecond"), w = [];
-      if (r && (p || g || v || S || y)) {
-        const b = u.label.find((C) => C.type === "hour")?.value, P = u.label.find((C) => C.type === "minute")?.value, T = u.label.find((C) => C.type === "timeZoneName")?.value;
-        let M = "";
-        if (l) {
-          const C = u.label.find((K) => K.type === "second")?.value, N = u.label.find(
-            (K) => K.type === "fractionalSecond"
+    const i = o[1] - o[0], r = i < Z([1, "days"]), c = i < Z([1, "minutes"]), u = i < Z([1, "seconds"]);
+    return o.map((d) => ({ value: d, label: s.formatToParts(new Date(d)) })).map((d, h, a) => {
+      const f = a[h - 1], l = h === 0 || X(d.label, f.label, "year"), m = h === 0 || X(d.label, f.label, "day"), x = h === 0 || X(d.label, f.label, "month"), p = h === 0 || X(d.label, f.label, "hour"), v = h === 0 || X(d.label, f.label, "timeZoneName"), w = h === 0 || X(d.label, f.label, "minute"), b = h === 0 || X(d.label, f.label, "second"), S = h === 0 || X(d.label, f.label, "fractionalSecond"), y = [];
+      if (r && (p || w || v || b || S)) {
+        const g = d.label.find((M) => M.type === "hour")?.value, P = d.label.find((M) => M.type === "minute")?.value, C = d.label.find((M) => M.type === "timeZoneName")?.value;
+        let T = "";
+        if (c) {
+          const M = d.label.find((O) => O.type === "second")?.value, R = d.label.find(
+            (O) => O.type === "fractionalSecond"
           )?.value;
-          M = `:${C}` + (d ? `.${N}` : "");
+          T = `:${M}` + (u ? `.${R}` : "");
         }
-        w.push(
-          `${b}:${P}${M}` + (t && v ? ` ${T}` : "")
+        y.push(
+          `${g}:${P}${T}` + (t && v ? ` ${C}` : "")
         );
       }
-      return (x || f) && w.push(
+      return (m || x) && y.push(
         [
-          u.label.find((b) => b.type === "month")?.value,
-          x && u.label.find((b) => b.type === "day")?.value
+          d.label.find((g) => g.type === "month")?.value,
+          m && d.label.find((g) => g.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), c && w.push(u.label.find((b) => b.type === "year")?.value), {
-        value: u.value,
-        label: w.filter((b) => b).join(`
+      ), l && y.push(d.label.find((g) => g.type === "year")?.value), {
+        value: d.value,
+        label: y.filter((g) => g).join(`
 `)
       };
     });
   };
 };
 export {
-  be as AreaPlot,
-  Ae as AxisOverlay,
-  we as BarPlot,
-  dt as CANPLOT_LAYER,
-  ye as CanPlot,
-  Ee as ChartAreaInteractions,
+  Se as AreaPlot,
+  De as AxisOverlay,
+  be as BarPlot,
+  ht as CANPLOT_LAYER,
+  ve as CanPlot,
+  Pe as ChartAreaInteractions,
   ke as Crosshair,
-  ve as LinePlot,
-  ge as ScatterPlot,
-  Re as SelectBox,
-  Se as SparklinePlot,
-  Pe as TooltipsX,
-  Ce as XTicks,
-  Me as YTicks,
-  D as applyStyles,
+  ge as LinePlot,
+  we as ScatterPlot,
+  Ae as SelectBox,
+  Te as SparklinePlot,
+  Re as TooltipsX,
+  Me as XTicks,
+  Ee as YTicks,
+  _ as applyStyles,
   j as clamp,
-  xe as clampUnfit,
-  Y as clampXPosToChartArea,
-  B as clampYPosToChartArea,
-  Qt as defaultNumericalTicksFormatter,
-  pe as findClosestIndex,
-  I as getScale,
-  De as makeLinearTicks,
-  ue as makeTimeTickFormat,
-  _e as makeTimeTicks,
+  ye as clampUnfit,
+  B as clampXPosToChartArea,
+  N as clampYPosToChartArea,
+  te as defaultNumericalTicksFormatter,
+  xe as findClosestIndex,
+  U as getScale,
+  _e as makeLinearTicks,
+  de as makeTimeTickFormat,
+  Ie as makeTimeTicks,
   L as posToVal,
-  Ft as pxToValDistance,
-  me as sum,
-  F as useDrawEffect,
-  xt as useFrameState,
-  vt as useInteractionsEvent,
-  Te as useXPositioned,
-  ut as valFits,
+  zt as pxToValDistance,
+  pe as sum,
+  z as useDrawEffect,
+  yt as useFrameState,
+  gt as useInteractionsEvent,
+  Ce as useXPositioned,
+  dt as valFits,
   H as valToPos,
-  mt as valToPxDistance
+  pt as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map