@canplot/react 0.1.25 → 0.2.0

package/dist/canplot.mjs

@@ -1,56 +1,58 @@
-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;
-}, 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;
-}, _ = (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";
-}, 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 } = U(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, c = pt(n, e - o, t, s);
-  return i === "x" ? j(
+var Xe = Object.defineProperty;
+var Fe = (e, t, n) => t in e ? Xe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var X = (e, t, n) => Fe(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsx as A, jsxs as me, Fragment as Ke } from "react/jsx-runtime";
+import ne, { version as Oe, createContext as pe, useRef as k, useCallback as Ye, forwardRef as ze, useState as O, useLayoutEffect as B, useMemo as G, useContext as H, useId as Be, useEffect as Ne } from "react";
+const W = (e, t, n) => Math.min(Math.max(e, t), n), wt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), bt = (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);
+  return n;
+}, $e = (e, t, n, s) => {
+  const { min: o, max: i, origin: r } = _(e, n), c = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = (r === "x" ? c.width : c.height) / (i - o);
+  return t / a;
+}, _ = (e, t) => {
+  const n = e.scales.find((s) => s.id === t);
+  if (!n)
+    throw new Error(`Scale ${t} not found`);
+  return n;
+}, L = (e, t) => {
+  const n = window.devicePixelRatio || 1;
+  e.lineCap = t?.lineCap ?? "butt", e.lineDashOffset = n * (t?.lineDashOffset ?? 0), e.lineJoin = t?.lineJoin ?? "miter", e.lineWidth = n * (t?.lineWidth ?? 1), e.miterLimit = n * (t?.miterLimit ?? 10), e.strokeStyle = t?.strokeStyle ?? "black", e.fillStyle = t?.fillStyle ?? e.strokeStyle, e.font = t?.font ?? `${10 * n}px sans-serif`, e.textAlign = t?.textAlign ?? "start", e.direction = t?.direction ?? "inherit", e.textBaseline = t?.textBaseline ?? "alphabetic", e.fontKerning = t?.fontKerning ?? "auto";
+}, ye = (e, t, n, s) => {
+  const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, { min: i, max: r, origin: c } = _(e, n), a = (c === "x" ? o.width : o.height) / (r - i);
+  return t * a;
+}, q = (e, t, n, s) => {
+  const { min: o, origin: i } = _(e, n), r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, c = ye(e, t - o, n, s);
+  return i === "x" ? W(
     r.x + c,
     r.x - 10 * r.width,
     r.x + 11 * r.width
-  ) : j(
+  ) : W(
     r.y + r.height - c,
     r.y - 10 * r.height,
     r.y + 11 * r.height
   );
-}, ye = (n, e, t) => {
-  const { min: s, max: o } = U(n, t);
-  return j(e, s, o);
-}, B = (n, e, t) => {
-  const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
-  return j(e, s.x, s.x + s.width);
-}, N = (n, e, t) => {
-  const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
-  return j(e, s.y, s.y + s.height);
-}, 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 } = 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) {
+}, xt = (e, t, n) => {
+  const { min: s, max: o } = _(e, n);
+  return W(t, s, o);
+}, $ = (e, t, n) => {
+  const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
+  return W(t, s.x, s.x + s.width);
+}, V = (e, t, n) => {
+  const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
+  return W(t, s.y, s.y + s.height);
+}, he = (e, t, n) => {
+  const { min: s, max: o } = _(e, n);
+  return t >= s && t <= o;
+}, U = (e, t, n, s) => {
+  const { min: o, max: i, origin: r } = _(e, n), c = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = r === "x" ? (t - c.x) / c.width : (c.height - t + c.y) / c.height;
+  return o + a * (i - o);
+}, Ve = (e) => {
+  const { ctx: t, scales: n } = e;
+  for (const s of n) {
     if (!s.axis) continue;
-    e.save(), _(e, {
+    t.save(), L(t, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -59,149 +61,116 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), pe = (n) => n.reduce((e, t)
     const o = s.axis.canvasRect;
     if (s.origin === "x") {
       if (s.axis.position === "bottom")
-        e.beginPath(), e.moveTo(o.x, o.y), e.lineTo(o.x + o.width, o.y), e.stroke();
+        t.beginPath(), t.moveTo(o.x, o.y), t.lineTo(o.x + o.width, o.y), t.stroke();
       else if (s.axis.position === "top") {
         const i = o.y + o.height;
-        e.beginPath(), e.moveTo(o.x, i), e.lineTo(o.x + o.width, i), e.stroke();
+        t.beginPath(), t.moveTo(o.x, i), t.lineTo(o.x + o.width, i), t.stroke();
       }
     } else if (s.axis.position === "left") {
       const i = o.x + o.width;
-      e.beginPath(), e.moveTo(i, o.y), e.lineTo(i, o.y + o.height), e.stroke();
-    } 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();
+      t.beginPath(), t.moveTo(i, o.y), t.lineTo(i, o.y + o.height), t.stroke();
+    } else s.axis.position === "right" && (t.beginPath(), t.moveTo(o.x, o.y), t.lineTo(o.x, o.y + o.height), t.stroke());
+    t.restore();
   }
-}, ht = {
-  TOP: 400,
-  MIDDLE: 300,
-  BOTTOM: 200,
-  BACKGROUND: 100
-}, Bt = () => Rt((n, e) => {
-  const t = () => {
-    const s = e()._frame;
-    if (!s) throw new Error("No frame set in frame store");
-    return s;
-  };
-  return {
-    _frame: null,
-    getFrame: t,
-    getCtx: () => t().ctx,
-    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) => pt(
-      t(),
-      s,
-      o,
-      i ?? "canvas"
-    ),
-    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);
-      i !== -1 && e()._listeners.splice(i, 1);
-    }),
-    _notifyListeners: (s) => {
-      for (const [, o] of e()._listeners)
-        o(s);
-    }
-  };
-}), Nt = () => Rt((n) => ({
-  notify: () => {
-    n((e) => ({ version: e.version + 1 }));
-  },
-  version: 0
-})), 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 = 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 : ht[n]
-  )), [s, n]), Pt(() => {
-    o.getState().notify();
-  }, [o, ...t]);
-}, yt = (n) => {
-  const e = tt(xt);
-  if (!e)
-    throw new Error("useFrame must be used within a CanPlot component");
-  return kt(
-    e,
-    n ?? ((t) => t.getFrame())
-  );
 };
-function $t(n) {
-  return (e) => {
-    for (const t of n) ft(t, e);
+function je(e) {
+  return (t) => {
+    for (const n of e) fe(n, t);
   };
 }
-function Vt(n) {
-  return (e) => {
-    const t = [];
-    for (const s of n) {
-      const o = ft(s, e), i = typeof o == "function";
-      t.push(i ? o : () => ft(s, null));
+function He(e) {
+  return (t) => {
+    const n = [];
+    for (const s of e) {
+      const o = fe(s, t), i = typeof o == "function";
+      n.push(i ? o : () => fe(s, null));
     }
     return () => {
-      for (const s of t) s();
+      for (const s of n) s();
     };
   };
 }
-function ft(n, e) {
-  if (typeof n == "function")
-    return n(e);
-  n && (n.current = e);
+function fe(e, t) {
+  if (typeof e == "function")
+    return e(t);
+  e && (e.current = t);
 }
-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 = u.getState();
-    a._notifyListeners(a);
-  }, [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 d.subscribe(() => {
-      a || (a = !0, window.requestAnimationFrame(() => {
-        a = !1, u.setState((l) => ({
-          _frame: l._frame ? { ...l._frame } : null
-        }));
-        const f = u.getState();
-        f._notifyListeners(f);
-      }));
-    });
-  }, [d, u]);
-  const h = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ mt(
+var We = parseInt(Oe.split(".")[0], 10) >= 19 ? He : je;
+const Ee = pe({
+  listeners: [],
+  subscribe: () => () => {
+  },
+  notifyListeners: () => {
+  }
+}), qe = () => {
+  const e = [];
+  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((i, r) => i[0] - r[0]), () => {
+    const i = e.findIndex(([, r]) => r === s);
+    i !== -1 && e.splice(i, 1);
+  }), notifyListeners: () => {
+    for (const [, s] of e)
+      s();
+  } };
+}, ve = pe(null), Re = pe(() => {
+}), Ge = ({ onRequestUpdate: e, children: t }) => {
+  const n = k(e);
+  n.current = e;
+  const s = Ye(() => {
+    n.current();
+  }, [n]);
+  return /* @__PURE__ */ A(Re.Provider, { value: s, children: t });
+}, ke = {
+  TOP: 400,
+  MIDDLE: 300,
+  BOTTOM: 200,
+  BACKGROUND: 100
+};
+class Ae {
+  constructor() {
+    X(this, "_frame", null);
+    X(this, "clampXPosToChartArea", (t, n = "canvas") => $(this.frame, t, n));
+    X(this, "clampYPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
+    X(this, "valToPos", (t, n, s = "canvas") => q(this.frame, t, n, s));
+    X(this, "valToPxDistance", (t, n, s = "canvas") => ye(this.frame, t, n, s));
+    X(this, "valFits", (t, n) => he(this.frame, t, n));
+    X(this, "getScale", (t) => _(this.frame, t));
+  }
+  _updateFrame(t) {
+    this._frame = t;
+  }
+  get frame() {
+    if (!this._frame)
+      throw new Error("Frame not set in FrameDrawer");
+    return this._frame;
+  }
+  get ctx() {
+    return this.frame.ctx;
+  }
+}
+const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) => {
+  const i = k(null), r = k(null), c = Je(r), [a, l] = O(() => null);
+  B(() => {
+    l(Qe(e, c, i.current));
+  }, [e, c, i]);
+  const d = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ me(
     "div",
     {
-      ref: jt([o, r]),
+      ref: We([o, r]),
       className: s,
       style: {
         position: "relative",
         overflow: "hidden",
-        ...t
+        ...n
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ D(
+        /* @__PURE__ */ A(
           "canvas",
           {
             ref: i,
-            width: c.width * h,
-            height: c.height * h,
+            width: c.width * d,
+            height: c.height * d,
             style: {
               inset: 0,
               position: "absolute",
@@ -210,82 +179,101 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
             }
           }
         ),
-        /* @__PURE__ */ D(
-          Ht,
-          {
-            frameStore: u,
-            updateRequestStore: d,
-            children: e
-          }
-        )
+        a && /* @__PURE__ */ A(Ze, { frame: a, children: t })
       ]
     }
   );
-}), 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({
+}), Ze = ({ frame: e, children: t }) => {
+  const n = G(qe, []), [s, o] = O(0);
+  B(() => {
+    e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
+  }, [e, s]);
+  const i = k(null);
+  return i.current = e, B(() => {
+    n.subscribe(() => {
+      i.current && Ve(i.current);
+    }, ke.BOTTOM);
+  }, [n]), B(() => {
+    let r = null;
+    return r = window.requestAnimationFrame(() => {
+      r = null, n.notifyListeners();
+    }), () => {
+      r && cancelAnimationFrame(r);
+    };
+  }, [s, i, n]), /* @__PURE__ */ A(Ee.Provider, { value: n, children: /* @__PURE__ */ A(ve.Provider, { value: e, children: /* @__PURE__ */ A(
+    Ge,
+    {
+      onRequestUpdate: () => {
+        o((r) => r + 1);
+      },
+      children: t
+    }
+  ) }) });
+}, Je = (e) => {
+  const [t, n] = O({
     width: 0,
     height: 0
-  }), [s] = V(() => new ResizeObserver((o) => {
+  }), [s] = O(() => new ResizeObserver((o) => {
     for (const i of o) {
       const r = Math.round(i.contentRect.width), c = Math.round(i.contentRect.height);
-      t(
-        (u) => u.width !== r || u.height !== c ? { ...u, width: r, height: c } : u
+      n(
+        (a) => a.width !== r || a.height !== c ? { ...a, width: r, height: c } : a
       );
     }
   }));
-  return Y(() => {
-    if (!n.current) return;
-    const o = n.current.clientWidth, i = n.current.clientHeight;
-    return t(
+  return B(() => {
+    if (!e.current) return;
+    const o = e.current.clientWidth, i = e.current.clientHeight;
+    return n(
       (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;
-}, qt = (n, e, t) => {
-  const s = t?.getContext("2d");
+    ), s.observe(e.current, { box: "border-box" }), () => s.disconnect();
+  }, [s, e]), t;
+}, Qe = (e, t, n) => {
+  const s = n?.getContext("2d");
   if (!s) return null;
   const o = window.devicePixelRatio || 1;
-  if (e.width === 0 || e.height === 0)
+  if (t.width === 0 || t.height === 0)
     return null;
   const i = {
-    x: n.padding.left,
-    y: n.padding.top,
-    width: e.width - n.padding.left - n.padding.right,
-    height: e.height - n.padding.top - n.padding.bottom
+    x: e.padding.left,
+    y: e.padding.top,
+    width: t.width - e.padding.left - e.padding.right,
+    height: t.height - e.padding.top - e.padding.bottom
   };
-  for (const l of n.scales)
-    l.axis && (l.origin === "x" ? (l.axis.position === "bottom" || l.axis.position === "top") && (i.height = Math.max(
+  for (const u of e.scales)
+    u.axis && (u.origin === "x" ? (u.axis.position === "bottom" || u.axis.position === "top") && (i.height = Math.max(
       0,
-      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)));
+      i.height - u.axis.size
+    ), u.axis.position === "top" && (i.y += u.axis.size)) : (u.axis.position === "left" || u.axis.position === "right") && (i.width = Math.max(0, i.width - u.axis.size), u.axis.position === "left" && (i.x += u.axis.size)));
   const r = {
     x: i.x * o,
     y: i.y * o,
     width: i.width * o,
     height: i.height * o
   }, 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 });
+  let a = e.padding.left * o, l = s.canvas.width - e.padding.right * o, d = s.canvas.height - e.padding.bottom * o, h = e.padding.top * o;
+  for (const u of e.scales) {
+    if (!u.axis) {
+      c.push({ ...u, axis: null });
       continue;
     }
-    let m;
-    if (l.origin === "x")
-      switch (l.axis.position) {
+    let f;
+    if (u.origin === "x")
+      switch (u.axis.position) {
         case "bottom":
-          h -= l.axis.size * o, m = {
+          d -= u.axis.size * o, f = {
             x: i.x,
-            y: h / o,
+            y: d / o,
             width: i.width,
-            height: l.axis.size
+            height: u.axis.size
           };
           break;
         case "top":
-          a += l.axis.size * o, m = {
+          h += u.axis.size * o, f = {
             x: i.x,
-            y: a / o - l.axis.size,
+            y: h / o - u.axis.size,
             width: i.width,
-            height: l.axis.size
+            height: u.axis.size
           };
           break;
         case "left":
@@ -293,20 +281,20 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (l.axis.position) {
+      switch (u.axis.position) {
         case "left":
-          u += l.axis.size * o, m = {
-            x: u / o - l.axis.size,
+          a += u.axis.size * o, f = {
+            x: a / o - u.axis.size,
             y: i.y,
-            width: l.axis.size,
+            width: u.axis.size,
             height: i.height
           };
           break;
         case "right":
-          d -= l.axis.size * o, m = {
-            x: d / o,
+          l -= u.axis.size * o, f = {
+            x: l / o,
             y: i.y,
-            width: l.axis.size,
+            width: u.axis.size,
             height: i.height
           };
           break;
@@ -314,297 +302,313 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const x = {
-      x: m.x * o,
-      y: m.y * o,
-      width: m.width * o,
-      height: m.height * o
+    const v = {
+      x: f.x * o,
+      y: f.y * o,
+      width: f.width * o,
+      height: f.height * o
     };
     c.push({
-      ...l,
+      ...u,
       axis: {
-        ...l.axis,
-        cssRect: m,
-        canvasRect: x
+        ...u.axis,
+        cssRect: f,
+        canvasRect: v
       }
     });
   }
   return {
     ctx: s,
     dpr: o,
-    padding: n.padding,
+    padding: e.padding,
     scales: c,
     chartAreaCSS: i,
     chartAreaCanvasPX: r
   };
-}, ge = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (z(
-  n,
-  ({ 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(u(h.x, t)), f = c(u(h.y, s));
-      d.lineTo(a, f);
+}, N = (e, t, n) => {
+  const s = H(ve), o = H(Re), i = H(Ee);
+  if (!s || !o)
+    throw new Error("useFrame must be used within a CanPlot component");
+  const [r] = O(() => new Ae());
+  r._updateFrame(s);
+  const c = k(r);
+  c.current = r;
+  const a = k(t);
+  a.current = t, B(() => i.subscribe(
+    () => {
+      a.current(r);
+    },
+    typeof e == "number" ? e : ke[e]
+  ), [i, e, r]), B(() => {
+    o();
+  }, [o, ...n]);
+}, ge = () => {
+  const e = H(ve);
+  if (!e)
+    throw new Error("useFrame must be used within a CanPlot component");
+  return G(() => {
+    const t = new Ae();
+    return t._updateFrame(e), t;
+  }, [e]);
+}, St = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (N(
+  e,
+  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: a }) => {
+    i.save(), i.beginPath(), L(i, o);
+    for (const l of t) {
+      const d = r(a(l.x, n)), h = c(a(l.y, s));
+      i.lineTo(d, h);
     }
-    d.stroke(), d.restore();
+    i.stroke(), i.restore();
   },
-  [e, t, s, o]
-), null), we = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (z(
-  n,
-  ({ getCtx: c, valToPos: u, valFits: d }) => {
-    const h = c();
-    h.save(), h.beginPath();
-    const a = new Path2D();
-    _(h, i), r !== void 0 && (h.globalAlpha = r);
-    for (const f of e) {
-      if (!d(f.x, t) || !d(f.y, s))
+  [t, n, s, o]
+), null), Ct = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (N(
+  e,
+  ({ ctx: c, valToPos: a, valFits: l }) => {
+    c.save(), c.beginPath();
+    const d = new Path2D();
+    L(c, i), r !== void 0 && (c.globalAlpha = r);
+    for (const h of t) {
+      if (!l(h.x, n) || !l(h.y, s))
         continue;
-      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);
+      const m = a(h.x, n), u = a(h.y, s);
+      d.moveTo(m + o, u), d.arc(m, u, o, 0, Math.PI * 2);
     }
-    h.fill(a), h.stroke(a), h.restore();
+    c.fill(d), c.stroke(d), c.restore();
   },
-  [e, t, s, o, i, r]
-), null), be = ({
-  data: n,
-  xScaleId: e,
-  yScaleId: t,
+  [t, n, s, o, i, r]
+), null), Pt = ({
+  data: e,
+  xScaleId: t,
+  yScaleId: n,
   style: s,
   barWidth: o,
   xPositionOffset: i,
   radius: r,
   layer: c = "MIDDLE"
-}) => (z(
+}) => (N(
   c,
   ({
-    getCtx: u,
-    valToPxDistance: d,
-    valToPos: h,
-    clampXPosToChartArea: a,
-    clampYPosToChartArea: f
+    ctx: a,
+    valToPxDistance: l,
+    valToPos: d,
+    clampXPosToChartArea: h,
+    clampYPosToChartArea: m
   }) => {
-    if (n.length === 0) return;
-    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,
+    if (e.length === 0) return;
+    a.save(), L(a, s);
+    const u = l(o, t);
+    a.beginPath();
+    for (const f of e) {
+      const p = d(f.x, t) - u / 2 + i * u, g = m(d(0, n)), w = m(d(f.y, n)), T = g - w, b = h(p), y = h(p + u) - b;
+      r ? a.roundRect(
         b,
-        g,
-        S,
+        w,
+        y,
+        T,
         r
-      ) : l.rect(y, b, g, S);
+      ) : a.rect(b, w, y, T);
     }
-    l.closePath(), l.fill(), s?.strokeStyle && l.stroke(), l.restore();
+    a.closePath(), a.fill(), s?.strokeStyle && a.stroke(), a.restore();
   },
-  [n, e, t, s, o, i, r]
-), null), Se = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (z(
-  n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: u }) => {
-    const d = [];
-    for (const a of e) {
-      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 });
+  [e, t, n, s, o, i, r]
+), null), Mt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (N(
+  e,
+  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: a }) => {
+    const l = [];
+    for (const d of t) {
+      const h = r(a(d.x, n)), m = c(a(d.y[0], s)), u = c(a(d.y[1], s));
+      l.push({ x: h, y: m }), l.unshift({ x: h, y: u });
     }
-    const h = i();
-    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();
+    if (l.length > 0) {
+      i.save(), i.beginPath(), L(i, o), i.moveTo(l[0].x, l[0].y);
+      for (const d of l)
+        i.lineTo(d.x, d.y);
+      i.closePath(), i.fill(), i.restore();
     }
   },
-  [e, t, s, o]
-), null), Te = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (z(
-  n,
-  ({ getCtx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: d }) => {
-    const h = [], a = r();
-    for (const x of e) {
-      const p = c(d(x.x, s)), v = u(d(x.y, o));
-      h.push({ x: p, y: v });
+  [t, n, s, o]
+), null), Et = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (N(
+  e,
+  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: l }) => {
+    const d = [];
+    for (const f of t) {
+      const v = c(l(f.x, s)), p = a(l(f.y, o));
+      d.push({ x: v, y: p });
     }
-    const f = h.at(0), l = h.at(-1);
-    if (!f || !l)
+    const h = d.at(0), m = d.at(-1);
+    if (!h || !m)
       return;
-    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();
+    const u = a(l(0, o));
+    r.save(), r.beginPath(), L(r, i), r.moveTo(h.x, u);
+    for (const f of d)
+      r.lineTo(f.x, f.y);
+    if (r.lineTo(m.x, u), r.closePath(), r.fill(), n) {
+      r.beginPath(), r.moveTo(h.x, h.y);
+      for (const f of d)
+        r.lineTo(f.x, f.y);
+      r.stroke();
     }
-    a.restore();
+    r.restore();
   },
-  [e, t, s, o, i]
-), null), Ce = (n, e) => yt(
-  ({
-    clampXPosToChartArea: t,
-    clampYPosToChartArea: s,
-    getScale: o,
-    valToPos: i,
-    valFits: r
-  }) => {
-    const c = {};
-    for (const u in n) {
-      const d = n[u];
+  [t, n, s, o, i]
+), null), Rt = (e, t) => {
+  const n = ge();
+  return G(() => {
+    const { valToPos: s, valFits: o, getScale: i, clampXPosToChartArea: r, clampYPosToChartArea: c } = n, a = {};
+    for (const l in e) {
+      const d = e[l];
       switch (d.exceeding) {
         case "discard": {
-          if (r(d.value, d.scaleId)) {
-            const h = i(d.value, d.scaleId, e);
-            c[u] = h;
+          if (o(d.value, d.scaleId)) {
+            const h = s(d.value, d.scaleId, t);
+            a[l] = h;
           }
           break;
         }
         case "clamp": {
-          const h = i(d.value, d.scaleId, e);
-          c[u] = o(d.scaleId)?.origin === "x" ? t(h, e) : s(h, e);
+          const h = s(d.value, d.scaleId, t);
+          a[l] = i(d.scaleId)?.origin === "x" ? r(h, t) : c(h, t);
           break;
         }
       }
     }
-    return c;
-  }
-), Me = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (z(
-  n,
-  ({ 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 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);
+    return a;
+  }, [e, t, n]);
+}, kt = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (N(
+  e,
+  ({ ctx: c, valToPos: a, getScale: l, frame: d }) => {
+    const h = l(t);
+    if (!h || !h.axis || h.origin !== "x") return;
+    const m = h.axis, u = m.position === "top" ? m.canvasRect.y + m.canvasRect.height : m.canvasRect.y, f = window.devicePixelRatio || 1, v = u, p = (i ?? 6) * f, g = m.position === "top" ? u - p : u + p, w = (o ?? 12) * f;
+    c.save(), c.fontKerning = "auto", L(c, {
+      ...n
+    }), c.beginPath();
+    const T = Array.isArray(r) ? r : r({ ...h, axis: m }, d);
+    for (const { value: b } of T) {
+      const y = a(b, t, "canvas");
+      c.moveTo(y, v), c.lineTo(y, g);
     }
-    a.stroke(), a.restore(), a.save(), _(a, {
-      textBaseline: l.position === "top" ? "bottom" : "top",
+    c.stroke(), c.restore(), c.save(), L(c, {
+      textBaseline: m.position === "top" ? "bottom" : "top",
       textAlign: "center",
-      ...t,
+      ...n,
       ...s
     });
-    for (const { value: y, label: g } of S) {
-      const P = u(y, e, "canvas"), C = g.split(`
+    for (const { value: b, label: y } of T) {
+      const x = a(b, t, "canvas"), S = y.split(`
 `);
-      for (let T = 0; T < C.length; T++)
-        a.fillText(C[T], P, w + x * 2 + T * b);
+      for (let E = 0; E < S.length; E++)
+        c.fillText(S[E], x, g + f * 2 + E * w);
     }
-    a.restore();
+    c.restore();
   },
-  [r, e, t, s]
-), null), Ee = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (z(
-  n,
-  ({ 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);
+  [r, t, n, s]
+), null), At = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (N(
+  e,
+  ({ ctx: c, valToPos: a, getScale: l, frame: d }) => {
+    const h = l(t);
+    if (!h || !h.axis || h.origin !== "y") return;
+    const m = h.axis, u = m.position === "left" ? m.canvasRect.x + m.canvasRect.width : m.canvasRect.x, f = u, v = i ?? 6, p = m.position === "left" ? u - v : u + v, g = o ?? 12, w = Array.isArray(r) ? r : r({ ...h, axis: m }, d);
+    c.save(), c.fontKerning = "auto", L(c, { ...n }), c.beginPath();
+    for (const { value: T } of w) {
+      const b = a(T, t, "canvas");
+      c.moveTo(f, b), c.lineTo(p, b);
     }
-    a.stroke(), a.restore(), a.save(), _(a, {
+    c.stroke(), c.restore(), c.save(), L(c, {
       textBaseline: "middle",
-      textAlign: l.position === "left" ? "right" : "left",
-      ...t,
+      textAlign: m.position === "left" ? "right" : "left",
+      ...n,
       ...s
     });
-    for (const { value: S, label: y } of b) {
-      const g = u(S, e, "canvas"), P = y.split(`
+    for (const { value: T, label: b } of w) {
+      const y = a(T, t, "canvas"), x = b.split(`
 `);
-      for (let C = 0; C < P.length; C++)
-        a.fillText(` ${P[C]} `, v, g + C * w);
+      for (let S = 0; S < x.length; S++)
+        c.fillText(` ${x[S]} `, p, y + S * g);
     }
-    a.restore();
+    c.restore();
   },
-  [r, e, t, s]
-), null), k = () => {
-  const n = [];
+  [r, t, n, s]
+), null), D = () => {
+  const e = [];
   return {
-    addEventListener: (e, t) => (n.push({
-      syncKey: e,
-      callback: t
+    addEventListener: (t, n) => (e.push({
+      syncKey: t,
+      callback: n
     }), () => {
-      const s = n.findIndex((o) => o.callback === t);
-      s !== -1 && n.splice(s, 1);
+      const s = e.findIndex((o) => o.callback === n);
+      s !== -1 && e.splice(s, 1);
     }),
-    dispatchEvent: (e, t) => {
-      for (const s of n)
-        s.syncKey === e && s.callback(e, t);
+    dispatchEvent: (t, n) => {
+      for (const s of e)
+        s.syncKey === t && s.callback(t, n);
     }
   };
-}, E = {
-  dblclick: k(),
-  click: k(),
-  contextmenu: k(),
-  move: k(),
-  mousedown: k(),
-  mouseup: k(),
-  spanselect: k(),
-  documentmouseup: k(),
-  pressandwheel: k(),
-  sync_move: k()
-}, A = (n, e, t) => {
-  const s = Q.useRef(t);
-  s.current = t, Q.useEffect(() => E[n].addEventListener(
-    e,
+}, M = {
+  dblclick: D(),
+  click: D(),
+  contextmenu: D(),
+  move: D(),
+  mousedown: D(),
+  mouseup: D(),
+  spanselect: D(),
+  documentmouseup: D(),
+  pressandwheel: D(),
+  sync_move: D()
+}, I = (e, t, n) => {
+  const s = ne.useRef(n);
+  s.current = n, ne.useEffect(() => M[e].addEventListener(
+    t,
     (i, r) => {
       s.current(r, i);
     }
-  ), [e, n, s]);
-}, 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, c = n.clientX - e.left, u = i ? {
+  ), [t, e, s]);
+}, we = ne.createContext(""), be = (e, t) => {
+  const n = ne.useContext(we);
+  return I(e, n, t);
+}, et = (e, t, n, s, o) => {
+  if (!t) return;
+  const i = s ?? n.scales.find((h) => h.origin === "x")?.id, r = o ?? n.scales.find((h) => h.origin === "y")?.id, c = e.clientX - t.left, a = i ? {
     scaleId: i,
-    value: L(t, c, i, "css")
-  } : null, d = n.clientY - e.top, h = r ? {
+    value: U(n, c, i, "css")
+  } : null, l = e.clientY - t.top, d = r ? {
     scaleId: r,
-    value: L(t, d, r, "css")
+    value: U(n, l, 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 { pointerSyncPosition: { x: a, y: d }, cssX: c, cssY: l };
+}, z = (e, t) => {
+  const { x: n, y: s } = e, o = n && t.scales.some((r) => r.id === n.scaleId) ? q(t, n.value, n.scaleId, "css") : null, i = s && t.scales.some((r) => r.id === s.scaleId) ? q(t, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
     cssY: i,
     scaled: Object.fromEntries(
-      e.scales.flatMap((r) => {
+      t.scales.flatMap((r) => {
         const c = r.origin === "y" ? i : o;
-        return c === null ? [] : [[r.id, L(e, c, r.id, "css")]];
+        return c === null ? [] : [[r.id, U(t, c, r.id, "css")]];
       })
     )
   };
-}, Ct = (n, e, t) => {
-  const s = H(
-    t,
-    e.from,
-    e.scaleId,
+}, Pe = (e, t, n) => {
+  const s = q(
+    n,
+    t.from,
+    t.scaleId,
     "css"
-  ), o = H(
-    t,
-    e.to,
-    e.scaleId,
+  ), o = q(
+    n,
+    t.to,
+    t.scaleId,
     "css"
-  ), i = t.scales.flatMap(
+  ), i = n.scales.flatMap(
     (r) => {
-      if (r.origin !== n)
+      if (r.origin !== e)
         return [];
-      const c = L(t, s, r.id, "css"), u = L(t, o, r.id, "css");
+      const c = U(n, s, r.id, "css"), a = U(n, o, r.id, "css");
       return [
         {
           scaleId: r.id,
           from: c,
-          to: u
+          to: a
         }
       ];
     }
@@ -614,56 +618,56 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
     toCSS: o,
     scaled: i
   };
-}, Pe = ({
-  id: n,
-  onClick: e,
-  onDblClick: t,
+}, Dt = ({
+  id: e,
+  onClick: t,
+  onDblClick: n,
   onMouseMove: s,
   onMouseDown: o,
   onMouseUp: i,
   onDocumentMouseUp: r,
   onSpanSelect: c,
-  onContextMenu: u,
-  className: d,
-  style: h,
-  sync: a,
-  innerChildren: f,
-  children: l
+  onContextMenu: a,
+  className: l,
+  style: d,
+  sync: h,
+  innerChildren: m,
+  children: u
 }) => {
-  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,
+  const f = Be();
+  return I("dblclick", f, (v) => {
+    n?.(v);
+  }), I("click", f, (v) => {
+    t?.(v);
+  }), I("move", f, (v) => {
+    s?.(v);
+  }), I("mousedown", f, (v) => {
+    o?.(v);
+  }), I("mouseup", f, (v) => {
+    i?.(v);
+  }), I("documentmouseup", f, (v) => {
+    r?.(v);
+  }), I("spanselect", f, (v) => {
+    c?.(v);
+  }), I("contextmenu", f, (v) => {
+    a?.(v);
+  }), /* @__PURE__ */ me(we.Provider, { value: f, children: [
+    /* @__PURE__ */ A(
+      tt,
       {
-        id: n,
-        className: d,
-        style: h,
-        sync: a,
-        children: f
+        id: e,
+        className: l,
+        style: d,
+        sync: h,
+        children: m
       }
     ),
-    l
+    u
   ] });
-}, Zt = ({ id: n, className: e, style: t, sync: s, children: o }) => {
-  const i = I(null), r = yt(), c = I(r);
+}, tt = ({ id: e, className: t, style: n, sync: s, children: o }) => {
+  const i = k(null), r = ge().frame, c = k(r);
   c.current = r;
-  const u = tt(vt), d = s?.key || u, h = I(null), a = I(null), f = I(null), l = () => {
+  const a = H(we), l = s?.key || a, d = k(null), h = k(null), m = k(null), u = () => {
     const p = i.current?.parentElement;
     if (p) {
       if (p.dataset.canplotroot === void 0)
@@ -672,15 +676,15 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
         );
       return p.getBoundingClientRect();
     }
-  }, m = (p, v) => {
-    const w = Gt(
+  }, f = (p, g) => {
+    const w = et(
       p,
-      l(),
+      u(),
       c.current,
       s?.xViaScaleId,
       s?.yViaScaleId
     );
-    w && v(
+    w && g(
       w.pointerSyncPosition,
       { cssX: w.cssX, cssY: w.cssY },
       {
@@ -690,14 +694,14 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
         metaKey: p.metaKey
       }
     );
-  }, x = I(m);
-  return x.current = m, Pt(() => {
+  }, v = k(f);
+  return v.current = f, Ne(() => {
     const p = (y) => {
-      const g = a.current;
-      g && E.spanselect.dispatchEvent(u, {
-        ...g,
+      const x = h.current;
+      x && M.spanselect.dispatchEvent(a, {
+        ...x,
         completed: !0
-      }), E.documentmouseup.dispatchEvent(u, {
+      }), M.documentmouseup.dispatchEvent(a, {
         frame: c.current,
         keys: {
           ctrlKey: y.ctrlKey,
@@ -706,109 +710,109 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
           metaKey: y.metaKey
         }
       });
-    }, v = (y) => {
-      const g = {
+    }, g = (y) => {
+      const x = {
         ctrlKey: y.ctrlKey,
         altKey: y.altKey,
         shiftKey: y.shiftKey,
         metaKey: y.metaKey
-      }, P = f.current;
-      if (P && Object.entries(g).some(
-        ([T, M]) => P.keys[T] !== M
+      }, S = m.current;
+      if (S && Object.entries(x).some(
+        ([C, P]) => S.keys[C] !== P
       )) {
-        const T = { ...P, keys: g };
-        f.current = T, E.sync_move.dispatchEvent(d, T);
+        const C = { ...S, keys: x };
+        m.current = C, M.sync_move.dispatchEvent(l, C);
       }
-      const C = a.current;
-      if (C && Object.entries(g).some(
-        ([T, M]) => C.keys[T] !== M
+      const E = h.current;
+      if (E && Object.entries(x).some(
+        ([C, P]) => E.keys[C] !== P
       )) {
         y.stopPropagation(), y.preventDefault();
-        const T = { ...C, keys: g };
-        a.current = T, E.spanselect.dispatchEvent(u, T);
+        const C = { ...E, keys: x };
+        h.current = C, M.spanselect.dispatchEvent(a, C);
       }
     }, w = (y) => {
-      x.current(
+      v.current(
         y,
-        (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 }
+        (x, { cssX: S, cssY: E }, C) => {
+          const P = d.current;
+          if (!P || !x.x || !x.y) return;
+          const R = c.current, Y = P.xRangeCss.start, ie = S, re = P.yRangeCss.start, ce = E, ae = _(R, x.x.scaleId), le = _(R, x.y.scaleId);
+          d.current = {
+            xRangeCss: { start: Y, end: ie },
+            yRangeCss: { start: re, end: ce }
           };
-          let $ = "below_threshold";
-          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(
+          let j = "below_threshold";
+          const ue = Math.abs(re - ce), de = Math.abs(Y - ie);
+          ue < 10 && de < 10 ? j = "below_threshold" : ue > 30 && de > 30 ? j = "box" : ue > de ? j = "y" : j = "x";
+          const Te = {
+            scaleId: ae.id,
+            from: U(
               R,
-              B(c.current, O, "css"),
-              ct.id,
+              $(c.current, Y, "css"),
+              ae.id,
               "css"
             ),
-            to: L(
+            to: U(
               R,
-              B(c.current, ot, "css"),
-              ct.id,
+              $(c.current, ie, "css"),
+              ae.id,
               "css"
             )
-          }, St = {
-            scaleId: at.id,
-            from: L(
+          }, Se = {
+            scaleId: le.id,
+            from: U(
               R,
-              N(c.current, it, "css"),
-              at.id,
+              V(c.current, re, "css"),
+              le.id,
               "css"
             ),
-            to: L(
+            to: U(
               R,
-              N(c.current, rt, "css"),
-              at.id,
+              V(c.current, ce, "css"),
+              le.id,
               "css"
             )
-          }, W = bt && Ct("x", bt, c.current), q = St && Ct("y", St, c.current), Lt = W?.scaled, Ut = q?.scaled, Tt = {
-            mode: $,
+          }, Z = Te && Pe("x", Te, c.current), J = Se && Pe("y", Se, c.current), Ue = Z?.scaled, _e = J?.scaled, Ce = {
+            mode: j,
             frame: c.current,
             completed: !1,
             x: {
-              css: W && {
-                from: W.fromCSS,
-                to: W.toCSS
+              css: Z && {
+                from: Z.fromCSS,
+                to: Z.toCSS
               },
-              scaled: Lt ?? []
+              scaled: Ue ?? []
             },
             y: {
-              css: q && {
-                from: q.fromCSS,
-                to: q.toCSS
+              css: J && {
+                from: J.fromCSS,
+                to: J.toCSS
               },
-              scaled: Ut ?? []
+              scaled: _e ?? []
             },
-            keys: T
+            keys: C
           };
-          a.current = Tt, E.spanselect.dispatchEvent(
-            u,
-            Tt
+          h.current = Ce, M.spanselect.dispatchEvent(
+            a,
+            Ce
           );
         }
       );
-    }, b = (y) => {
-      x.current(y, (g, P, C) => {
-        const T = F(
-          g,
+    }, T = (y) => {
+      v.current(y, (x, S, E) => {
+        const C = z(
+          x,
           c.current
         );
-        if (!T) return;
-        if (Object.values(C).some((R) => R)) {
+        if (!C) return;
+        if (Object.values(E).some((R) => R)) {
           y.preventDefault();
           const R = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
-          E.pressandwheel.dispatchEvent(u, {
-            pointer: T,
+          M.pressandwheel.dispatchEvent(a, {
+            pointer: C,
             frame: c.current,
-            keys: C,
+            keys: E,
             deltaX: y.deltaX,
             deltaY: y.deltaY,
             deltaAbs: R
@@ -816,30 +820,30 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
         }
       });
     };
-    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, {
+    document.addEventListener("mouseup", p), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
+    const b = i.current;
+    return b?.addEventListener("wheel", T, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", p), document.removeEventListener("keydown", v), document.removeEventListener("keyup", v), document.removeEventListener("mousemove", w), S?.removeEventListener("wheel", b);
+      document.removeEventListener("mouseup", p), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), b?.removeEventListener("wheel", T);
     };
-  }, [c, u, d, x]), A("sync_move", d, (p) => {
-    const v = p.positions ? F(
+  }, [c, a, l, v]), I("sync_move", l, (p) => {
+    const g = p.positions ? z(
       p.positions,
       c.current
     ) : null;
-    f.current = p, E.move.dispatchEvent(u, {
+    m.current = p, M.move.dispatchEvent(a, {
       frame: c.current,
-      pointer: v ?? null,
+      pointer: g ?? null,
       keys: p.keys,
-      source: p.originInteractionsId === u ? "own" : "sync"
+      source: p.originInteractionsId === a ? "own" : "sync"
     });
-  }), /* @__PURE__ */ D(
+  }), /* @__PURE__ */ A(
     "div",
     {
       ref: i,
-      id: n,
-      className: e,
+      id: e,
+      className: t,
       style: {
         position: "absolute",
         left: r.chartAreaCSS.x,
@@ -847,170 +851,170 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
         width: r.chartAreaCSS.width,
         height: r.chartAreaCSS.height,
         zIndex: 25,
-        ...t
+        ...n
       },
       onDragStart: (p) => {
         p.preventDefault();
       },
       onClick: (p) => {
-        m(p, (v, w, b) => {
-          const S = F(
-            v,
+        f(p, (g, w, T) => {
+          const b = z(
+            g,
             c.current
           );
-          S && E.click.dispatchEvent(u, {
-            pointer: S,
+          b && M.click.dispatchEvent(a, {
+            pointer: b,
             frame: c.current,
-            keys: b
+            keys: T
           });
         });
       },
       onMouseLeave: (p) => {
-        m(p, (v, w, b) => {
-          E.sync_move.dispatchEvent(d, {
+        f(p, (g, w, T) => {
+          M.sync_move.dispatchEvent(l, {
             positions: null,
-            keys: b,
-            originInteractionsId: u
+            keys: T,
+            originInteractionsId: a
           });
         });
       },
       onMouseMove: (p) => {
-        m(p, (v, w, b) => {
-          E.sync_move.dispatchEvent(d, {
-            positions: v,
-            keys: b,
-            originInteractionsId: u
+        f(p, (g, w, T) => {
+          M.sync_move.dispatchEvent(l, {
+            positions: g,
+            keys: T,
+            originInteractionsId: a
           });
         });
       },
       onMouseDown: (p) => {
-        m(p, (v, { cssX: w, cssY: b }, S) => {
-          const y = F(
-            v,
+        f(p, (g, { cssX: w, cssY: T }, b) => {
+          const y = z(
+            g,
             c.current
           );
-          y && (E.mousedown.dispatchEvent(u, {
+          y && (M.mousedown.dispatchEvent(a, {
             pointer: y,
             frame: c.current,
-            keys: S
-          }), h.current = {
+            keys: b
+          }), d.current = {
             xRangeCss: { start: w, end: w },
-            yRangeCss: { start: b, end: b }
+            yRangeCss: { start: T, end: T }
           });
         });
       },
       onMouseUp: (p) => {
-        m(p, (v, w, b) => {
-          const S = F(
-            v,
+        f(p, (g, w, T) => {
+          const b = z(
+            g,
             c.current
           );
-          if (!S) return;
-          E.mouseup.dispatchEvent(u, {
+          if (!b) return;
+          M.mouseup.dispatchEvent(a, {
             frame: c.current,
-            pointer: S,
-            keys: b
+            pointer: b,
+            keys: T
           });
-          const y = a.current;
-          a.current = null;
-          const g = h.current;
-          if (h.current = null, g && y) {
-            const P = {
+          const y = h.current;
+          h.current = null;
+          const x = d.current;
+          if (d.current = null, x && y) {
+            const S = {
               ...y,
-              keys: b,
+              keys: T,
               completed: !0
             };
-            a.current = null, E.spanselect.dispatchEvent(
-              u,
-              P
+            h.current = null, M.spanselect.dispatchEvent(
+              a,
+              S
             );
           }
         });
       },
       onContextMenu: (p) => {
-        p.preventDefault(), m(p, (v, w, b) => {
-          const S = F(
-            v,
+        p.preventDefault(), f(p, (g, w, T) => {
+          const b = z(
+            g,
             c.current
           );
-          S && E.contextmenu.dispatchEvent(u, {
+          b && M.contextmenu.dispatchEvent(a, {
             frame: c.current,
-            pointer: S,
-            keys: b
+            pointer: b,
+            keys: T
           });
         });
       },
       onDoubleClick: (p) => {
-        m(p, (v, w, b) => {
-          const S = F(
-            v,
+        f(p, (g, w, T) => {
+          const b = z(
+            g,
             c.current
           );
-          S && E.dblclick.dispatchEvent(u, {
+          b && M.dblclick.dispatchEvent(a, {
             frame: c.current,
-            pointer: S,
-            keys: b
+            pointer: b,
+            keys: T
           });
         });
       },
       children: o
     }
   );
-}, Re = ({ data: n, renderTooltip: e, xScaleId: t }) => {
-  const [s, o] = V(null);
-  gt("move", (r) => {
+}, It = ({ data: e, renderTooltip: t, xScaleId: n }) => {
+  const [s, o] = O(null);
+  be("move", (r) => {
     o(r);
   });
-  const i = et(() => {
+  const i = G(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: c } = s, u = c?.scaled[t];
-    if (u === void 0)
+    const { frame: r, pointer: c } = s, a = c?.scaled[n];
+    if (a === void 0)
       return null;
-    const d = [];
-    let h = u;
-    for (const a of n) {
-      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))
+    const l = [];
+    let d = a;
+    for (const h of e) {
+      let m = null, u = 1 / 0;
+      for (const [v, p] of h.points.entries()) {
+        if (!he(r, p.x, n) || !he(r, p.y, h.yScaleId))
           continue;
-        const v = Math.abs(p.x - u);
-        v < l && (l = v, f = x);
+        const g = Math.abs(p.x - a);
+        g < u && (u = g, m = v);
       }
-      const m = a.points[f ?? -1];
-      if (!m || pt(r, l, t, "css") > 30) {
-        d.push({ seriesId: a.seriesId, y: null });
+      const f = h.points[m ?? -1];
+      if (!f || ye(r, u, n, "css") > 30) {
+        l.push({ seriesId: h.seriesId, y: null });
         continue;
       }
-      h = m.x, d.push({
-        seriesId: a.seriesId,
-        y: m.y
+      d = f.x, l.push({
+        seriesId: h.seriesId,
+        y: f.y
       });
     }
     return {
       frame: r,
-      x: h,
-      points: d
+      x: d,
+      points: l
     };
-  }, [n, s, t]);
-  return e(i);
-}, ke = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
-  const [o, i] = V(null);
-  if (gt("move", (f) => {
-    i(f);
+  }, [e, s, n]);
+  return t(i);
+}, Lt = ({ makeXStyle: e, makeXClassName: t, makeYStyle: n, makeYClassName: s }) => {
+  const [o, i] = O(null);
+  if (be("move", (m) => {
+    i(m);
   }), !o)
     return null;
-  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(
+  const { frame: r, pointer: c } = o, a = c?.cssX ?? null, l = c?.cssY ?? null, d = a ? $(r, a, "css") : 0, h = l ? V(r, l, "css") : 0;
+  return /* @__PURE__ */ me(Ke, { children: [
+    /* @__PURE__ */ A(
       "div",
       {
         "data-show": !!c,
-        className: e?.(o),
+        className: t?.(o),
         style: {
           position: "absolute",
           left: 0,
-          visibility: u === null ? "hidden" : "visible",
+          visibility: a === null ? "hidden" : "visible",
           top: r.chartAreaCSS.y,
           height: r.chartAreaCSS.height,
           borderColor: "red",
@@ -1018,19 +1022,19 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
           borderLeftStyle: "solid",
           pointerEvents: "none",
           opacity: c ? 1 : 0,
-          transform: `translateX(${h}px)`,
-          ...n?.(o)
+          transform: `translateX(${d}px)`,
+          ...e?.(o)
         }
       }
     ),
-    /* @__PURE__ */ D(
+    /* @__PURE__ */ A(
       "div",
       {
         className: s?.(o),
         "data-show": !!c,
         style: {
           position: "absolute",
-          visibility: d === null ? "hidden" : "visible",
+          visibility: l === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
@@ -1038,44 +1042,44 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
           width: r.chartAreaCSS.width,
           pointerEvents: "none",
           opacity: c ? 1 : 0,
-          transform: `translateY(${a}px)`,
-          ...t?.(o)
+          transform: `translateY(${h}px)`,
+          ...n?.(o)
         }
       }
     )
   ] });
-}, Ae = ({ makeClassName: n, makeStyle: e }) => {
-  const [t, s] = V(null);
-  gt("spanselect", (i) => {
+}, Ut = ({ makeClassName: e, makeStyle: t }) => {
+  const [n, s] = O(null);
+  be("spanselect", (i) => {
     s(
       i.mode === "below_threshold" || i.completed ? null : i
     );
   });
-  const o = et(() => {
-    if (!t || t.mode === "below_threshold")
+  const o = G(() => {
+    if (!n || n.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, 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__ */ D(
+    const i = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, r = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, a = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = $(n.frame, i, "css"), d = $(n.frame, r, "css"), h = V(n.frame, c, "css"), m = V(n.frame, a, "css"), u = Math.min(l, d), f = Math.min(h, m), v = Math.abs(d - l), p = Math.abs(m - h);
+    return { leftPx: u, topPx: f, widthPx: v, heightPx: p };
+  }, [n]);
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: t ? n?.(t) : void 0,
+      className: n ? e?.(n) : void 0,
       style: {
         position: "absolute",
-        visibility: t ? "visible" : "hidden",
+        visibility: n ? "visible" : "hidden",
         left: `${o?.leftPx ?? 0}px`,
         top: `${o?.topPx ?? 0}px`,
         width: `${o?.widthPx ?? 0}px`,
         height: `${o?.heightPx ?? 0}px`,
         pointerEvents: "none",
-        ...t ? e?.(t) : void 0
+        ...n ? t?.(n) : void 0
       }
     }
   );
-}, De = ({ style: n, children: e, scaleId: t, ...s }) => {
-  const o = yt((i) => i.getScale(t)?.axis);
-  return o ? /* @__PURE__ */ D(
+}, _t = ({ style: e, children: t, scaleId: n, ...s }) => {
+  const o = ge().getScale(n)?.axis;
+  return o ? /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -1085,38 +1089,38 @@ const ve = Ot(({ configuration: n, children: e, style: t, className: s }, o) =>
         top: o.cssRect.y,
         height: o.cssRect.height,
         width: o.cssRect.width,
-        ...n
+        ...e
       },
       ...s,
-      children: e
+      children: t
     }
   ) : null;
-}, Dt = 60, Jt = 30, _t = "UTC", Qt = "en-GB", _e = ({
-  space: n,
-  formatter: e,
-  acceptableIncrements: t
+}, De = 60, nt = 30, Ie = "UTC", st = "en-GB", Xt = ({
+  space: e,
+  formatter: t,
+  acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, c = [], u = window.devicePixelRatio || 1, d = (n ?? (s.origin === "x" ? Dt : Jt)) * u, h = zt(
+  const { min: i, max: r } = s, c = [], a = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? De : nt)) * a, d = $e(
     o,
-    d,
+    l,
     s.id,
     "canvas"
-  ), 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;
+  ), h = n ?? Q, m = h.find((f) => f > d) ?? h.at(-1) ?? 1;
+  let u = i;
+  if (Math.abs(u % m) > Number.EPSILON) {
+    const f = (m - u % m) % m;
+    u += f;
   }
-  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 ee = 1, It = 1e3 * ee, wt = 60 * It, nt = 60 * wt, st = 24 * nt, ne = 30 * st, se = 365 * st, oe = [
+  for (; u <= r && c.length < 1e3; )
+    c.push(u), u += m;
+  return (t ?? ot)(c);
+}, ot = (e) => {
+  const t = Math.max(0, Math.ceil(-Math.log10(e[1] - e[0])));
+  return e.map((n) => ({ value: n, label: n.toFixed(t) }));
+}, Q = [];
+for (let e = -12; e <= 12; e++)
+  Q.push(1 * 10 ** e), Q.push(2 * 10 ** e), Q.push(5 * 10 ** e);
+const it = 1, Le = 1e3 * it, xe = 60 * Le, se = 60 * xe, oe = 24 * se, rt = 30 * oe, ct = 365 * oe, at = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1168,70 +1172,70 @@ const ee = 1, It = 1e3 * ee, wt = 60 * It, nt = 60 * wt, st = 24 * nt, ne = 30 *
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], Z = (n) => {
-  const [e, t] = n;
-  switch (t) {
+], ee = (e) => {
+  const [t, n] = e;
+  switch (n) {
     case "milliseconds":
-      return e;
+      return t;
     case "seconds":
-      return e * It;
+      return t * Le;
     case "minutes":
-      return e * wt;
+      return t * xe;
     case "hours":
-      return e * nt;
+      return t * se;
     case "days":
-      return e * st;
+      return t * oe;
     case "months":
-      return e * ne;
+      return t * rt;
     case "years":
-      return e * se;
+      return t * ct;
   }
-}, ie = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCMilliseconds(t.getUTCMilliseconds() + e), t.getTime();
-}, re = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCSeconds(t.getUTCSeconds() + e), t.getTime();
-}, ce = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCMinutes(t.getUTCMinutes() + e), t.getTime();
-}, ae = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCHours(t.getUTCHours() + e), t.getTime();
-}, le = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCDate(t.getUTCDate() + e), t.getTime();
-}, Mt = (n, e) => {
-  const t = new Date(n);
-  return t.setUTCMonth(t.getUTCMonth() + e), t.getTime();
-}, K = (n, e) => {
-  const [t, s] = e;
+}, lt = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCMilliseconds(n.getUTCMilliseconds() + t), n.getTime();
+}, ut = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCSeconds(n.getUTCSeconds() + t), n.getTime();
+}, dt = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCMinutes(n.getUTCMinutes() + t), n.getTime();
+}, ht = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCHours(n.getUTCHours() + t), n.getTime();
+}, ft = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCDate(n.getUTCDate() + t), n.getTime();
+}, Me = (e, t) => {
+  const n = new Date(e);
+  return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
+}, K = (e, t) => {
+  const [n, s] = t;
   switch (s) {
     case "milliseconds":
-      return ie(n, t);
+      return lt(e, n);
     case "seconds":
-      return re(n, t);
+      return ut(e, n);
     case "minutes":
-      return ce(n, t);
+      return dt(e, n);
     case "hours":
-      return ae(n, t);
+      return ht(e, n);
     case "days":
-      return le(n, t);
+      return ft(e, n);
     case "months":
-      return Mt(n, t);
+      return Me(e, n);
     case "years":
-      return Mt(n, t * 12);
+      return Me(e, n * 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" }));
+function te(e, t) {
+  const n = new Date(e), s = new Date(n.toLocaleString("en-US", { timeZone: t })), o = new Date(n.toLocaleString("en-US", { timeZone: "UTC" }));
   return (s.getTime() - o.getTime()) / (3600 * 1e3);
 }
-const ue = (n, e, t = "UTC") => {
-  const [s, o] = e;
-  let i = new Date(n);
+const mt = (e, t, n = "UTC") => {
+  const [s, o] = t;
+  let i = new Date(e);
   const r = () => {
-    i.setUTCHours(-J(i, t), 0, 0, 0);
+    i.setUTCHours(-te(i, n), 0, 0, 0);
   };
   switch (o) {
     case "milliseconds":
@@ -1247,14 +1251,14 @@ const ue = (n, e, t = "UTC") => {
       break;
     case "minutes":
       i.setUTCMinutes(
-        Math.ceil(i.getTime() % nt / wt / s) * s,
+        Math.ceil(i.getTime() % se / xe / s) * s,
         0,
         0
       );
       break;
     case "hours":
       i.setUTCHours(
-        Math.ceil(i.getTime() % st / nt / s) * s,
+        Math.ceil(i.getTime() % oe / se / s) * s,
         0,
         0,
         0
@@ -1263,37 +1267,37 @@ const ue = (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(K(i, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(K(i, [1, o])));
       break;
   }
   return i.getTime();
-}, Ie = ({
-  timeZone: n = _t,
-  space: e = Dt,
-  formatter: t,
+}, Ft = ({
+  timeZone: e = Ie,
+  space: t = De,
+  formatter: n,
   locale: s,
   showTimezone: o
 } = {}) => (i, r) => {
-  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;
+  const { min: c, max: a } = i, l = Math.floor(r.chartAreaCanvasPX.width / t) + 1, h = (a - c) / l, [m, u] = at.find(
+    (w) => ee(w) >= h
+  ) ?? [1, "milliseconds"], f = mt(c, [m, u], e), v = te(f, e), p = [f];
+  let g;
   for (; ; ) {
-    switch (l) {
+    switch (u) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        v = K(m, [p.length * f, l]);
+        g = K(f, [p.length * m, u]);
         break;
       }
       case "days": {
-        const w = K(m, [
-          p.length * f,
-          l
+        const w = K(f, [
+          p.length * m,
+          u
         ]);
-        v = K(w, [
-          x - J(w, n),
+        g = K(w, [
+          v - te(w, e),
           "hours"
         ]);
         break;
@@ -1301,34 +1305,34 @@ const ue = (n, e, t = "UTC") => {
       case "months":
       case "years": {
         const w = K(
-          K(K(m, [x, "hours"]), [
-            p.length * f,
-            l
+          K(K(f, [v, "hours"]), [
+            p.length * m,
+            u
           ]),
-          [-x, "hours"]
+          [-v, "hours"]
         );
-        v = K(w, [
-          x - J(w, n),
+        g = K(w, [
+          v - te(w, e),
           "hours"
         ]);
         break;
       }
     }
-    if (v > u)
+    if (g > a)
       break;
-    p.push(v);
+    p.push(g);
   }
-  return (t ?? de({
+  return (n ?? pt({
     locale: s,
     showTimezone: o,
-    timeZone: n
+    timeZone: e
   }))(p);
-}, 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
+}, F = (e, t, n) => e.find((s) => s.type === n)?.value !== t.find((s) => s.type === n)?.value, pt = ({
+  timeZone: e = Ie,
+  locale: t = st,
+  showTimezone: n = !0
 }) => {
-  const s = new Intl.DateTimeFormat(e, {
+  const s = new Intl.DateTimeFormat(t, {
     year: "numeric",
     day: "numeric",
     month: "short",
@@ -1338,73 +1342,74 @@ const ue = (n, e, t = "UTC") => {
     second: "numeric",
     fractionalSecondDigits: 3,
     timeZoneName: "short",
-    timeZone: n
+    timeZone: e
   });
   return (o) => {
-    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 = "";
+    const i = o[1] - o[0], r = i < ee([1, "days"]), c = i < ee([1, "minutes"]), a = i < ee([1, "seconds"]);
+    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, d, h) => {
+      const m = h[d - 1], u = d === 0 || F(l.label, m.label, "year"), f = d === 0 || F(l.label, m.label, "day"), v = d === 0 || F(l.label, m.label, "month"), p = d === 0 || F(l.label, m.label, "hour"), g = d === 0 || F(l.label, m.label, "timeZoneName"), w = d === 0 || F(l.label, m.label, "minute"), T = d === 0 || F(l.label, m.label, "second"), b = d === 0 || F(l.label, m.label, "fractionalSecond"), y = [];
+      if (r && (p || w || g || T || b)) {
+        const x = l.label.find((P) => P.type === "hour")?.value, S = l.label.find((P) => P.type === "minute")?.value, E = l.label.find((P) => P.type === "timeZoneName")?.value;
+        let C = "";
         if (c) {
-          const M = d.label.find((O) => O.type === "second")?.value, R = d.label.find(
-            (O) => O.type === "fractionalSecond"
+          const P = l.label.find((Y) => Y.type === "second")?.value, R = l.label.find(
+            (Y) => Y.type === "fractionalSecond"
           )?.value;
-          T = `:${M}` + (u ? `.${R}` : "");
+          C = `:${P}` + (a ? `.${R}` : "");
         }
         y.push(
-          `${g}:${P}${T}` + (t && v ? ` ${C}` : "")
+          `${x}:${S}${C}` + (n && g ? ` ${E}` : "")
         );
       }
-      return (m || x) && y.push(
+      return (f || v) && y.push(
         [
-          d.label.find((g) => g.type === "month")?.value,
-          m && d.label.find((g) => g.type === "day")?.value
+          l.label.find((x) => x.type === "month")?.value,
+          f && l.label.find((x) => x.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), l && y.push(d.label.find((g) => g.type === "year")?.value), {
-        value: d.value,
-        label: y.filter((g) => g).join(`
+      ), u && y.push(l.label.find((x) => x.type === "year")?.value), {
+        value: l.value,
+        label: y.filter((x) => x).join(`
 `)
       };
     });
   };
 };
 export {
-  Se as AreaPlot,
-  De as AxisOverlay,
-  be as BarPlot,
-  ht as CANPLOT_LAYER,
-  ve as CanPlot,
-  Pe as ChartAreaInteractions,
-  ke as Crosshair,
-  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,
-  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,
-  zt as pxToValDistance,
-  pe as sum,
-  z as useDrawEffect,
-  yt as useFrameState,
-  gt as useInteractionsEvent,
-  Ce as useXPositioned,
-  dt as valFits,
-  H as valToPos,
-  pt as valToPxDistance
+  Mt as AreaPlot,
+  _t as AxisOverlay,
+  Pt as BarPlot,
+  ke as CANPLOT_LAYER,
+  Tt as CanPlot,
+  Dt as ChartAreaInteractions,
+  Lt as Crosshair,
+  Ae as FrameDrawer,
+  St as LinePlot,
+  Ct as ScatterPlot,
+  Ut as SelectBox,
+  Et as SparklinePlot,
+  It as TooltipsX,
+  kt as XTicks,
+  At as YTicks,
+  L as applyStyles,
+  W as clamp,
+  xt as clampUnfit,
+  $ as clampXPosToChartArea,
+  V as clampYPosToChartArea,
+  ot as defaultNumericalTicksFormatter,
+  bt as findClosestIndex,
+  _ as getScale,
+  Xt as makeLinearTicks,
+  pt as makeTimeTickFormat,
+  Ft as makeTimeTicks,
+  U as posToVal,
+  $e as pxToValDistance,
+  wt as sum,
+  N as useDrawEffect,
+  ge as useFrameState,
+  be as useInteractionsEvent,
+  Rt as useXPositioned,
+  he as valFits,
+  q as valToPos,
+  ye as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map