@canplot/react 0.5.2 → 0.5.4

package/dist/canplot.mjs

@@ -1,9 +1,9 @@
-var Ye = Object.defineProperty;
-var Be = (e, t, n) => t in e ? Ye(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var F = (e, t, n) => Be(e, typeof t != "symbol" ? t + "" : t, n);
-import { jsxs as pe, jsx as R, Fragment as ze } from "react/jsx-runtime";
-import D, { version as Ne, createContext as ye, forwardRef as $e, useRef as k, useState as B, useMemo as Z, useLayoutEffect as $, useCallback as je, useContext as q, useId as Ve, useEffect as He } from "react";
-const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (e, t) => {
+var Be = Object.defineProperty;
+var ze = (e, t, n) => t in e ? Be(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var O = (e, t, n) => ze(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsxs as pe, jsx as R, Fragment as Ne } from "react/jsx-runtime";
+import D, { version as $e, createContext as ye, forwardRef as je, useRef as A, useState as B, useMemo as Z, useLayoutEffect as $, useCallback as Ve, useContext as q, useEffect as Ae, useId as He } from "react";
+const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (e, t) => {
   let n = 0;
   for (let s = 0; s < e.length; s++)
     Math.abs(e[s] - t) < Math.abs(e[n] - t) && (n = s);
@@ -63,19 +63,19 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n)
     return null;
   const r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = o.origin === "x" ? (t - r.x) / r.width : (r.height - t + r.y) / r.height;
   return o.min + i * (o.max - o.min);
-}, O = (e, t) => {
+}, F = (e, t) => {
   if (e === t) return !0;
   if (e == null || t == null || typeof e != typeof t || typeof e != "object" || Array.isArray(e) !== Array.isArray(t)) return !1;
   if (Array.isArray(e) && Array.isArray(t)) {
     if (e.length !== t.length) return !1;
     for (let o = 0; o < e.length; o++)
-      if (!O(e[o], t[o])) return !1;
+      if (!F(e[o], t[o])) return !1;
     return !0;
   }
   const n = Object.keys(e), s = Object.keys(t);
   if (n.length !== s.length) return !1;
   for (const o of n)
-    if (!Object.prototype.hasOwnProperty.call(t, o) || !O(e[o], t[o])) return !1;
+    if (!Object.prototype.hasOwnProperty.call(t, o) || !F(e[o], t[o])) return !1;
   return !0;
 }, qe = (e) => {
   const { ctx: t, scales: n } = e;
@@ -124,8 +124,8 @@ function me(e, t) {
     return e(t);
   e && (e.current = t);
 }
-var Je = parseInt(Ne.split(".")[0], 10) >= 19 ? Ze : Ge;
-const ke = ye({
+var Je = parseInt($e.split(".")[0], 10) >= 19 ? Ze : Ge;
+const Re = ye({
   listeners: [],
   subscribe: () => () => {
   },
@@ -140,22 +140,22 @@ const ke = ye({
     for (const [, s] of e)
       s();
   } };
-}, ve = ye(null), Re = ye(() => {
-}), De = {
+}, ve = ye(null), De = ye(() => {
+}), Ie = {
   TOP: 400,
   MIDDLE: 300,
   BOTTOM: 200,
   BACKGROUND: 100
 };
-class Ie {
+class Le {
   constructor() {
-    F(this, "_frame", null);
-    F(this, "clampXPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
-    F(this, "clampYPosToChartArea", (t, n = "canvas") => H(this.frame, t, n));
-    F(this, "valToPos", (t, n, s = "canvas") => G(this.frame, t, n, s));
-    F(this, "valToPxDistance", (t, n, s = "canvas") => ge(this.frame, t, n, s));
-    F(this, "valFits", (t, n) => fe(this.frame, t, n));
-    F(this, "getScale", (t) => X(this.frame, t));
+    O(this, "_frame", null);
+    O(this, "clampXPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
+    O(this, "clampYPosToChartArea", (t, n = "canvas") => H(this.frame, t, n));
+    O(this, "valToPos", (t, n, s = "canvas") => G(this.frame, t, n, s));
+    O(this, "valToPxDistance", (t, n, s = "canvas") => ge(this.frame, t, n, s));
+    O(this, "valFits", (t, n) => fe(this.frame, t, n));
+    O(this, "getScale", (t) => X(this.frame, t));
   }
   _updateFrame(t) {
     this._frame = t;
@@ -169,8 +169,8 @@ class Ie {
     return this.frame.ctx;
   }
 }
-const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) => {
-  const r = k(null), i = k(null), c = tt(i), [l, u] = B(null), f = Z(
+const Dt = je(({ configuration: e, children: t, style: n, className: s }, o) => {
+  const r = A(null), i = A(null), c = tt(i), [l, u] = B(null), f = Z(
     () => nt(e, c, l),
     [e, c, l]
   );
@@ -216,11 +216,11 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   $(() => {
     e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
   }, [e, s]);
-  const r = k(null);
+  const r = A(null);
   r.current = e, $(() => {
     n.subscribe(() => {
       r.current && qe(r.current);
-    }, De.BOTTOM);
+    }, Ie.BOTTOM);
   }, [n]), $(() => {
     let c = null;
     return c = window.requestAnimationFrame(() => {
@@ -229,10 +229,10 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       c && cancelAnimationFrame(c);
     };
   }, [s, e, n]);
-  const i = je(() => {
+  const i = Ve(() => {
     o((c) => c + 1);
   }, [o]);
-  return /* @__PURE__ */ R(ke.Provider, { value: n, children: /* @__PURE__ */ R(Re.Provider, { value: i, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
+  return /* @__PURE__ */ R(Re.Provider, { value: n, children: /* @__PURE__ */ R(De.Provider, { value: i, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
 }, tt = (e) => {
   const [t, n] = B({
     width: 0,
@@ -326,7 +326,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const h = {
+    const d = {
       x: p.x * s,
       y: p.y * s,
       width: p.width * s,
@@ -337,7 +337,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       axis: {
         ...a.axis,
         cssRect: p,
-        canvasRect: h
+        canvasRect: d
       }
     });
   }
@@ -350,28 +350,35 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     chartAreaCanvasPX: r
   };
 }, j = (e, t, n) => {
-  const s = q(ve), o = q(Re), r = q(ke);
+  const s = q(ve), o = q(De), r = q(Re);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const [i] = B(() => new Ie());
+  const [i] = B(() => new Le());
   i._updateFrame(s);
-  const c = k(i);
+  const c = A(i);
   c.current = i;
-  const l = k(t);
-  l.current = t, $(() => r.subscribe(
-    () => {
-      l.current(i);
-    },
-    typeof e == "number" ? e : De[e]
-  ), [r, e, i]), $(() => {
+  const l = A(t);
+  l.current = t, $(() => {
+    const u = r.subscribe(
+      () => {
+        l.current(i);
+      },
+      typeof e == "number" ? e : Ie[e]
+    );
+    return () => {
+      u();
+    };
+  }, [r, e, i]), $(() => {
+    o();
+  }, [o, ...n]), Ae(() => () => {
     o();
-  }, [o, ...n]);
-}, Le = () => {
+  }, [o]);
+}, Ue = () => {
   const e = q(ve);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
   return Z(() => {
-    const t = new Ie();
+    const t = new Le();
     return t._updateFrame(e), t;
   }, [e]);
 }, st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
@@ -385,7 +392,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     r.stroke(), r.restore();
   },
   [t, n, s, o]
-), null), It = D.memo(st, O), ot = ({
+), null), It = D.memo(st, F), ot = ({
   layer: e = "MIDDLE",
   data: t,
   xScaleId: n,
@@ -405,20 +412,20 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     clampYPosToChartArea: p
   }) => {
     u.save(), u.beginPath();
-    const h = new Path2D();
+    const d = new Path2D();
     U(u, c), l !== void 0 && (u.globalAlpha = l);
     for (const y of t) {
-      let d, g;
+      let h, g;
       switch (o) {
         case "clip":
           if (!m(y.x, n))
             continue;
-          d = f(y.x, n);
+          h = f(y.x, n);
           break;
         case "clamp": {
           if (f(y.x, n) === null)
             continue;
-          d = a(f(y.x, n), "canvas");
+          h = a(f(y.x, n), "canvas");
           break;
         }
       }
@@ -432,12 +439,12 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           g = p(f(y.y, s), "canvas");
           break;
       }
-      d === null || g === null || (h.moveTo(d + i, g), h.arc(d, g, i, 0, Math.PI * 2));
+      h === null || g === null || (d.moveTo(h + i, g), d.arc(h, g, i, 0, Math.PI * 2));
     }
-    u.fill(h), u.stroke(h), u.restore();
+    u.fill(d), u.stroke(d), u.restore();
   },
   [t, n, s, i, c, l]
-), null), Lt = D.memo(ot, O), rt = ({
+), null), Lt = D.memo(ot, F), rt = ({
   data: e,
   xScaleId: t,
   yScaleId: n,
@@ -459,23 +466,23 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     l.save(), U(l, s);
     const p = u(o, t) ?? 0;
     l.beginPath();
-    for (const h of e) {
-      const y = f(h.x, t);
+    for (const d of e) {
+      const y = f(d.x, t);
       if (y === null)
         continue;
-      const d = y - p / 2 + r * p, g = a(
+      const h = y - p / 2 + r * p, g = a(
         f(0, n, "canvas"),
         "canvas"
       );
       if (g === null)
         continue;
       const w = a(
-        f(h.y, n, "canvas"),
+        f(d.y, n, "canvas"),
         "canvas"
       );
       if (w === null)
         continue;
-      const x = g - w, b = m(d, "canvas"), v = m(d + p, "canvas") - b;
+      const x = g - w, b = m(h, "canvas"), v = m(h + p, "canvas") - b;
       i ? l.roundRect(
         b,
         w,
@@ -487,7 +494,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     l.closePath(), l.fill(), s?.strokeStyle && l.stroke(), l.restore();
   },
   [e, t, n, s, o, r, i]
-), null), Ut = D.memo(rt, O), it = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
+), null), Ut = D.memo(rt, F), it = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
   ({ ctx: r, clampXPosToChartArea: i, clampYPosToChartArea: c, valToPos: l }) => {
     const u = [];
@@ -498,8 +505,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       const p = c(l(m.y[0], s));
       if (p === null)
         continue;
-      const h = c(l(m.y[1], s));
-      h !== null && (u.push({ x: a, y: p }), u.unshift({ x: a, y: h }));
+      const d = c(l(m.y[1], s));
+      d !== null && (u.push({ x: a, y: p }), u.unshift({ x: a, y: d }));
     }
     const f = u[0];
     if (f) {
@@ -510,13 +517,13 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     }
   },
   [t, n, s, o]
-), null), _t = D.memo(it, O), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: r }) => (j(
+), null), _t = D.memo(it, F), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: r }) => (j(
   e,
   ({ ctx: i, clampXPosToChartArea: c, clampYPosToChartArea: l, valToPos: u }) => {
     const f = [];
-    for (const h of t) {
-      const y = c(u(h.x, s)), d = l(u(h.y, o));
-      y === null || d === null || f.push({ x: y, y: d });
+    for (const d of t) {
+      const y = c(u(d.x, s)), h = l(u(d.y, o));
+      y === null || h === null || f.push({ x: y, y: h });
     }
     const m = f.at(0), a = f.at(-1);
     if (!m || !a)
@@ -524,19 +531,19 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     const p = l(u(0, o));
     if (p !== null) {
       i.save(), i.beginPath(), U(i, r), i.moveTo(m.x, p);
-      for (const h of f)
-        i.lineTo(h.x, h.y);
+      for (const d of f)
+        i.lineTo(d.x, d.y);
       if (i.lineTo(a.x, p), i.closePath(), i.fill(), n) {
         i.beginPath(), i.moveTo(m.x, m.y);
-        for (const h of f)
-          i.lineTo(h.x, h.y);
+        for (const d of f)
+          i.lineTo(d.x, d.y);
         i.stroke();
       }
       i.restore();
     }
   },
   [t, n, s, o, r]
-), null), Xt = D.memo(ct, O), at = ({
+), null), Xt = D.memo(ct, F), at = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
@@ -549,7 +556,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   ({ ctx: c, valToPos: l, getScale: u, frame: f }) => {
     const m = u(t);
     if (!m || !m.axis || m.origin !== "x") return;
-    const a = m.axis, p = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, h = window.devicePixelRatio || 1, y = p, d = (r ?? 6) * h, g = a.position === "top" ? p - d : p + d, w = (o ?? 12) * h;
+    const a = m.axis, p = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, d = window.devicePixelRatio || 1, y = p, h = (r ?? 6) * d, g = a.position === "top" ? p - h : p + h, w = (o ?? 12) * d;
     c.save(), c.fontKerning = "auto", U(c, {
       ...n
     }), c.beginPath();
@@ -564,7 +571,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       ...n,
       ...s,
       // alter font size for DPR
-      font: Ue(s?.font ?? n?.font)
+      font: _e(s?.font ?? n?.font)
     });
     for (const { value: b, label: v } of x) {
       const T = l(b, t, "canvas");
@@ -573,12 +580,12 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       const C = v.split(`
 `);
       for (let E = 0; E < C.length; E++)
-        c.fillText(C[E], T, g + h * 2 + E * w);
+        c.fillText(C[E], T, g + d * 2 + E * w);
     }
     c.restore();
   },
   [i, t, n, s]
-), null), Ot = D.memo(at, O), lt = ({
+), null), Ft = D.memo(at, F), lt = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
@@ -591,11 +598,11 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   ({ ctx: c, valToPos: l, getScale: u, frame: f }) => {
     const m = u(t);
     if (!m || !m.axis || m.origin !== "y") return;
-    const a = m.axis, p = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, h = p, y = r ?? 6, d = a.position === "left" ? p - y : p + y, g = o ?? 12, w = Array.isArray(i) ? i : i({ ...m, axis: a }, f);
+    const a = m.axis, p = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, d = p, y = r ?? 6, h = a.position === "left" ? p - y : p + y, g = o ?? 12, w = Array.isArray(i) ? i : i({ ...m, axis: a }, f);
     c.save(), c.fontKerning = "auto", U(c, { ...n }), c.beginPath();
     for (const { value: x } of w) {
       const b = l(x, t, "canvas");
-      b !== null && (c.moveTo(h, b), c.lineTo(d, b));
+      b !== null && (c.moveTo(d, b), c.lineTo(h, b));
     }
     c.stroke(), c.restore(), c.save(), U(c, {
       textBaseline: "middle",
@@ -603,7 +610,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       ...n,
       ...s,
       // alter font size for DPR
-      font: Ue(s?.font ?? n?.font)
+      font: _e(s?.font ?? n?.font)
     });
     for (const { value: x, label: b } of w) {
       const v = l(x, t, "canvas");
@@ -612,12 +619,12 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       const T = b.split(`
 `);
       for (let C = 0; C < T.length; C++)
-        c.fillText(` ${T[C]} `, d, v + C * g);
+        c.fillText(` ${T[C]} `, h, v + C * g);
     }
     c.restore();
   },
   [i, t, n, s]
-), null), Ft = D.memo(lt, O), Ue = (e) => {
+), null), Ot = D.memo(lt, F), _e = (e) => {
   if (e)
     try {
       return e.replace(/(\d+)px/, (t, n) => `${parseInt(n) * window.devicePixelRatio || 1}px`);
@@ -732,24 +739,24 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   innerChildren: a,
   children: p
 }) => {
-  const h = Ve();
-  return L("dblclick", h, (y) => {
+  const d = He();
+  return L("dblclick", d, (y) => {
     n?.(y);
-  }), L("click", h, (y) => {
+  }), L("click", d, (y) => {
     t?.(y);
-  }), L("move", h, (y) => {
+  }), L("move", d, (y) => {
     s?.(y);
-  }), L("mousedown", h, (y) => {
+  }), L("mousedown", d, (y) => {
     o?.(y);
-  }), L("mouseup", h, (y) => {
+  }), L("mouseup", d, (y) => {
     r?.(y);
-  }), L("documentmouseup", h, (y) => {
+  }), L("documentmouseup", d, (y) => {
     i?.(y);
-  }), L("spanselect", h, (y) => {
+  }), L("spanselect", d, (y) => {
     c?.(y);
-  }), L("contextmenu", h, (y) => {
+  }), L("contextmenu", d, (y) => {
     l?.(y);
-  }), /* @__PURE__ */ pe(we.Provider, { value: h, children: [
+  }), /* @__PURE__ */ pe(we.Provider, { value: d, children: [
     /* @__PURE__ */ R(
       ht,
       {
@@ -763,20 +770,20 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     p
   ] });
 }, ht = ({ id: e, className: t, style: n, sync: s, children: o }) => {
-  const r = k(null), i = Le().frame, c = k(i);
+  const r = A(null), i = Ue().frame, c = A(i);
   c.current = i;
-  const l = q(we), u = s?.key || l, f = k(null), m = k(null), a = k(null), p = () => {
-    const d = r.current?.parentElement;
-    if (d) {
-      if (d.dataset.canplotroot === void 0)
+  const l = q(we), u = s?.key || l, f = A(null), m = A(null), a = A(null), p = () => {
+    const h = r.current?.parentElement;
+    if (h) {
+      if (h.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return d.getBoundingClientRect();
+      return h.getBoundingClientRect();
     }
-  }, h = (d, g) => {
+  }, d = (h, g) => {
     const w = ut(
-      d,
+      h,
       p(),
       c.current,
       s?.xViaScaleId,
@@ -786,15 +793,15 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       w.pointerSyncPosition,
       { cssX: w.cssX, cssY: w.cssY },
       {
-        ctrlKey: d.ctrlKey,
-        altKey: d.altKey,
-        shiftKey: d.shiftKey,
-        metaKey: d.metaKey
+        ctrlKey: h.ctrlKey,
+        altKey: h.altKey,
+        shiftKey: h.shiftKey,
+        metaKey: h.metaKey
       }
     );
-  }, y = k(h);
-  return y.current = h, He(() => {
-    const d = (v) => {
+  }, y = A(d);
+  return y.current = d, Ae(() => {
+    const h = (v) => {
       const T = m.current;
       T && M.spanselect.dispatchEvent(l, {
         ...T,
@@ -835,9 +842,9 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
         (T, { cssX: C, cssY: E }, S) => {
           const P = f.current;
           if (!P || !T.x || !T.y) return;
-          const A = c.current, z = P.xRangeCss.start, ae = C, le = P.yRangeCss.start, ue = E, J = X(A, T.x.scaleId);
+          const k = c.current, z = P.xRangeCss.start, ae = C, le = P.yRangeCss.start, ue = E, J = X(k, T.x.scaleId);
           if (!J) return;
-          const Q = X(A, T.y.scaleId);
+          const Q = X(k, T.y.scaleId);
           if (!Q) return;
           f.current = {
             xRangeCss: { start: z, end: ae },
@@ -847,28 +854,28 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           const he = Math.abs(le - ue), de = Math.abs(z - ae);
           he < 10 && de < 10 ? W = "below_threshold" : he > 30 && de > 30 ? W = "box" : he > de ? W = "y" : W = "x";
           const Te = _(
-            A,
+            k,
             V(c.current, z, "css"),
             J.id,
             "css"
           );
           if (Te === null) return;
           const Ce = _(
-            A,
+            k,
             V(c.current, ae, "css"),
             J.id,
             "css"
           );
           if (Ce === null) return;
           const Se = _(
-            A,
+            k,
             H(c.current, le, "css"),
             Q.id,
             "css"
           );
           if (Se === null) return;
           const Pe = _(
-            A,
+            k,
             H(c.current, ue, "css"),
             Q.id,
             "css"
@@ -882,7 +889,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
             "y",
             { scaleId: Q.id, from: Se, to: Pe },
             c.current
-          ), Fe = ee?.scaled, Ke = te?.scaled, Me = {
+          ), Ke = ee?.scaled, Ye = te?.scaled, Me = {
             mode: W,
             frame: c.current,
             completed: !1,
@@ -891,14 +898,14 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
                 from: ee.fromCSS,
                 to: ee.toCSS
               } : void 0,
-              scaled: Fe ?? []
+              scaled: Ke ?? []
             },
             y: {
               css: te ? {
                 from: te.fromCSS,
                 to: te.toCSS
               } : void 0,
-              scaled: Ke ?? []
+              scaled: Ye ?? []
             },
             keys: S
           };
@@ -915,37 +922,37 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           c.current
         );
         if (!S) return;
-        if (Object.values(E).some((A) => A)) {
+        if (Object.values(E).some((k) => k)) {
           v.preventDefault();
-          const A = Math.abs(v.deltaY) > Math.abs(v.deltaX) ? v.deltaY : v.deltaX;
+          const k = Math.abs(v.deltaY) > Math.abs(v.deltaX) ? v.deltaY : v.deltaX;
           M.pressandwheel.dispatchEvent(l, {
             pointer: S,
             frame: c.current,
             keys: E,
             deltaX: v.deltaX,
             deltaY: v.deltaY,
-            deltaAbs: A
+            deltaAbs: k
           });
         }
       });
     };
-    document.addEventListener("mouseup", d), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
+    document.addEventListener("mouseup", h), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
     const b = r.current;
     return b?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", d), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), b?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", h), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), b?.removeEventListener("wheel", x);
     };
-  }, [c, l, u, y]), L("sync_move", u, (d) => {
-    const g = d.positions ? N(
-      d.positions,
+  }, [c, l, u, y]), L("sync_move", u, (h) => {
+    const g = h.positions ? N(
+      h.positions,
       c.current
     ) : null;
-    a.current = d, M.move.dispatchEvent(l, {
+    a.current = h, M.move.dispatchEvent(l, {
       frame: c.current,
       pointer: g ?? null,
-      keys: d.keys,
-      source: d.originInteractionsId === l ? "own" : "sync"
+      keys: h.keys,
+      source: h.originInteractionsId === l ? "own" : "sync"
     });
   }), /* @__PURE__ */ R(
     "div",
@@ -962,11 +969,11 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
         zIndex: 25,
         ...n
       },
-      onDragStart: (d) => {
-        d.preventDefault();
+      onDragStart: (h) => {
+        h.preventDefault();
       },
-      onClick: (d) => {
-        h(d, (g, w, x) => {
+      onClick: (h) => {
+        d(h, (g, w, x) => {
           const b = N(
             g,
             c.current
@@ -978,8 +985,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onMouseLeave: (d) => {
-        h(d, (g, w, x) => {
+      onMouseLeave: (h) => {
+        d(h, (g, w, x) => {
           M.sync_move.dispatchEvent(u, {
             positions: null,
             keys: x,
@@ -987,8 +994,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onMouseMove: (d) => {
-        h(d, (g, w, x) => {
+      onMouseMove: (h) => {
+        d(h, (g, w, x) => {
           M.sync_move.dispatchEvent(u, {
             positions: g,
             keys: x,
@@ -996,8 +1003,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onMouseDown: (d) => {
-        h(d, (g, { cssX: w, cssY: x }, b) => {
+      onMouseDown: (h) => {
+        d(h, (g, { cssX: w, cssY: x }, b) => {
           const v = N(
             g,
             c.current
@@ -1012,8 +1019,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onMouseUp: (d) => {
-        h(d, (g, w, x) => {
+      onMouseUp: (h) => {
+        d(h, (g, w, x) => {
           const b = N(
             g,
             c.current
@@ -1040,8 +1047,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           }
         });
       },
-      onContextMenu: (d) => {
-        d.preventDefault(), h(d, (g, w, x) => {
+      onContextMenu: (h) => {
+        h.preventDefault(), d(h, (g, w, x) => {
           const b = N(
             g,
             c.current
@@ -1053,8 +1060,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onDoubleClick: (d) => {
-        h(d, (g, w, x) => {
+      onDoubleClick: (h) => {
+        d(h, (g, w, x) => {
           const b = N(
             g,
             c.current
@@ -1083,15 +1090,15 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     const f = [];
     let m = l;
     for (const a of e) {
-      let p = null, h = 1 / 0;
+      let p = null, d = 1 / 0;
       for (const [g, w] of a.points.entries()) {
         if (!fe(i, w.x, n) || !fe(i, w.y, a.yScaleId))
           continue;
         const x = Math.abs(w.x - l);
-        x < h && (h = x, p = g);
+        x < d && (d = x, p = g);
       }
-      const y = a.points[p ?? -1], d = ge(i, h, n, "css");
-      if (!y || d === null || d > 30) {
+      const y = a.points[p ?? -1], h = ge(i, d, n, "css");
+      if (!y || h === null || h > 30) {
         f.push({ seriesId: a.seriesId, y: null });
         continue;
       }
@@ -1114,7 +1121,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   }), !o)
     return null;
   const { frame: i, pointer: c } = o, l = c?.cssX ?? null, u = c?.cssY ?? null, f = l ? V(i, l, "css") : 0, m = u ? H(i, u, "css") : 0;
-  return /* @__PURE__ */ pe(ze, { children: [
+  return /* @__PURE__ */ pe(Ne, { children: [
     /* @__PURE__ */ R(
       "div",
       {
@@ -1167,8 +1174,8 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   const o = Z(() => {
     if (!n || n.mode === "below_threshold")
       return null;
-    const r = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, i = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, l = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, u = V(n.frame, r, "css"), f = V(n.frame, i, "css"), m = H(n.frame, c, "css"), a = H(n.frame, l, "css"), p = Math.min(u, f), h = Math.min(m, a), y = Math.abs(f - u), d = Math.abs(a - m);
-    return { leftPx: p, topPx: h, widthPx: y, heightPx: d };
+    const r = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, i = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, l = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, u = V(n.frame, r, "css"), f = V(n.frame, i, "css"), m = H(n.frame, c, "css"), a = H(n.frame, l, "css"), p = Math.min(u, f), d = Math.min(m, a), y = Math.abs(f - u), h = Math.abs(a - m);
+    return { leftPx: p, topPx: d, widthPx: y, heightPx: h };
   }, [n]);
   return /* @__PURE__ */ R(
     "div",
@@ -1187,7 +1194,7 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
     }
   );
 }, Nt = ({ style: e, children: t, scaleId: n, ...s }) => {
-  const o = Le().getScale(n)?.axis;
+  const o = Ue().getScale(n)?.axis;
   return o ? /* @__PURE__ */ R(
     "div",
     {
@@ -1204,12 +1211,12 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
       children: t
     }
   ) : null;
-}, _e = 60, dt = 30, Xe = "UTC", ft = "en-GB", $t = ({
+}, Xe = 60, dt = 30, Fe = "UTC", ft = "en-GB", $t = ({
   space: e,
   formatter: t,
   acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: r, max: i } = s, c = [], l = window.devicePixelRatio || 1, u = (e ?? (s.origin === "x" ? _e : dt)) * l, f = We(
+  const { min: r, max: i } = s, c = [], l = window.devicePixelRatio || 1, u = (e ?? (s.origin === "x" ? Xe : dt)) * l, f = We(
     o,
     u,
     s.id,
@@ -1217,11 +1224,11 @@ const Dt = $e(({ configuration: e, children: t, style: n, className: s }, o) =>
   );
   if (f === null)
     return [];
-  const m = n ?? ne, a = m.find((h) => h > f) ?? m.at(-1) ?? 1;
+  const m = n ?? ne, a = m.find((d) => d > f) ?? m.at(-1) ?? 1;
   let p = r;
   if (Math.abs(p % a) > Number.EPSILON) {
-    const h = (a - p % a) % a;
-    p += h;
+    const d = (a - p % a) % a;
+    p += d;
   }
   for (; p <= i && c.length < 1e3; )
     c.push(p), p += a;
@@ -1317,7 +1324,7 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 *
 }, Ct = (e, t) => {
   const n = new Date(e);
   return n.setUTCDate(n.getUTCDate() + t), n.getTime();
-}, Ae = (e, t) => {
+}, ke = (e, t) => {
   const n = new Date(e);
   return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
 }, Y = (e, t) => {
@@ -1334,9 +1341,9 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 *
     case "days":
       return Ct(e, n);
     case "months":
-      return Ae(e, n);
+      return ke(e, n);
     case "years":
-      return Ae(e, n * 12);
+      return ke(e, n * 12);
   }
 };
 function oe(e, t) {
@@ -1384,28 +1391,34 @@ const St = (e, t, n = "UTC") => {
   }
   return r.getTime();
 }, jt = ({
-  timeZone: e = Xe,
-  space: t = _e,
+  timeZone: e = Fe,
+  space: t = Xe,
   formatter: n,
   locale: s,
   showTimezone: o
 } = {}) => (r, i) => {
-  const { min: c, max: l } = r, u = Math.floor(i.chartAreaCanvasPX.width / t) + 1, m = (l - c) / u, [a, p] = vt.find(
+  const { min: c, max: l } = r;
+  if (!Number.isFinite(c) || !Number.isFinite(l))
+    return [];
+  const u = Math.floor(i.chartAreaCanvasPX.width / t) + 1, m = (l - c) / u, [a, p] = vt.find(
     (w) => se(w) >= m
-  ) ?? [1, "milliseconds"], h = St(c, [a, p], e), y = oe(h, e), d = [h];
+  ) ?? [1, "milliseconds"];
+  if (!a || !p)
+    return [];
+  const d = St(c, [a, p], e), y = oe(d, e), h = [d];
   let g;
-  for (; ; ) {
+  for (; !(h.length > 1e3); ) {
     switch (p) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        g = Y(h, [d.length * a, p]);
+        g = Y(d, [h.length * a, p]);
         break;
       }
       case "days": {
-        const w = Y(h, [
-          d.length * a,
+        const w = Y(d, [
+          h.length * a,
           p
         ]);
         g = Y(w, [
@@ -1417,8 +1430,8 @@ const St = (e, t, n = "UTC") => {
       case "months":
       case "years": {
         const w = Y(
-          Y(Y(h, [y, "hours"]), [
-            d.length * a,
+          Y(Y(d, [y, "hours"]), [
+            h.length * a,
             p
           ]),
           [-y, "hours"]
@@ -1432,15 +1445,15 @@ const St = (e, t, n = "UTC") => {
     }
     if (g > l)
       break;
-    d.push(g);
+    h.push(g);
   }
   return (n ?? Pt({
     locale: s,
     showTimezone: o,
     timeZone: e
-  }))(d);
+  }))(h);
 }, K = (e, t, n) => e.find((s) => s.type === n)?.value !== t.find((s) => s.type === n)?.value, Pt = ({
-  timeZone: e = Xe,
+  timeZone: e = Fe,
   locale: t = ft,
   showTimezone: n = !0
 }) => {
@@ -1459,24 +1472,24 @@ const St = (e, t, n = "UTC") => {
   return (o) => {
     const r = o[1] - o[0], i = r < se([1, "days"]), c = r < se([1, "minutes"]), l = r < se([1, "seconds"]);
     return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, f, m) => {
-      const a = m[f - 1], p = f === 0 || K(u.label, a.label, "year"), h = f === 0 || K(u.label, a.label, "day"), y = f === 0 || K(u.label, a.label, "month"), d = f === 0 || K(u.label, a.label, "hour"), g = f === 0 || K(u.label, a.label, "timeZoneName"), w = f === 0 || K(u.label, a.label, "minute"), x = f === 0 || K(u.label, a.label, "second"), b = f === 0 || K(u.label, a.label, "fractionalSecond"), v = [];
-      if (i && (d || w || g || x || b)) {
+      const a = m[f - 1], p = f === 0 || K(u.label, a.label, "year"), d = f === 0 || K(u.label, a.label, "day"), y = f === 0 || K(u.label, a.label, "month"), h = f === 0 || K(u.label, a.label, "hour"), g = f === 0 || K(u.label, a.label, "timeZoneName"), w = f === 0 || K(u.label, a.label, "minute"), x = f === 0 || K(u.label, a.label, "second"), b = f === 0 || K(u.label, a.label, "fractionalSecond"), v = [];
+      if (i && (h || w || g || x || b)) {
         const T = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, E = u.label.find((P) => P.type === "timeZoneName")?.value;
         let S = "";
         if (c) {
-          const P = u.label.find((z) => z.type === "second")?.value, A = u.label.find(
+          const P = u.label.find((z) => z.type === "second")?.value, k = u.label.find(
             (z) => z.type === "fractionalSecond"
           )?.value;
-          S = `:${P}` + (l ? `.${A}` : "");
+          S = `:${P}` + (l ? `.${k}` : "");
         }
         v.push(
           `${T}:${C}${S}` + (n && g ? ` ${E}` : "")
         );
       }
-      return (h || y) && v.push(
+      return (d || y) && v.push(
         [
           u.label.find((T) => T.type === "month")?.value,
-          h && u.label.find((T) => T.type === "day")?.value
+          d && u.label.find((T) => T.type === "day")?.value
         ].filter(Boolean).join(" ")
       ), p && v.push(u.label.find((T) => T.type === "year")?.value), {
         value: u.value,
@@ -1490,23 +1503,23 @@ export {
   _t as AreaPlot,
   Nt as AxisOverlay,
   Ut as BarPlot,
-  De as CANPLOT_LAYER,
+  Ie as CANPLOT_LAYER,
   Dt as CanPlot,
   Kt as ChartAreaInteractions,
   Bt as Crosshair,
-  Ie as FrameDrawer,
+  Le as FrameDrawer,
   It as LinePlot,
   Lt as ScatterPlot,
   zt as SelectBox,
   Xt as SparklinePlot,
   Yt as TooltipsX,
-  Ot as XTicks,
-  Ft as YTicks,
+  Ft as XTicks,
+  Ot as YTicks,
   U as applyStyles,
   re as clamp,
   V as clampXPosToChartArea,
   H as clampYPosToChartArea,
-  O as deepEqual,
+  F as deepEqual,
   mt as defaultNumericalTicksFormatter,
   Rt as findClosestIndex,
   X as getScale,
@@ -1515,9 +1528,9 @@ export {
   jt as makeTimeTicks,
   _ as posToVal,
   We as pxToValDistance,
-  kt as sum,
+  At as sum,
   j as useDrawEffect,
-  Le as useFrameState,
+  Ue as useFrameState,
   xe as useInteractionsEvent,
   fe as valFits,
   G as valToPos,