@canplot/react 0.1.15 → 0.1.16

package/dist/canplot.mjs

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