@canplot/react 0.2.0 → 0.4.0

package/dist/canplot.mjs

@@ -1,58 +1,72 @@
-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) => {
+var Oe = Object.defineProperty;
+var Ke = (e, t, n) => t in e ? Oe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var K = (e, t, n) => Ke(e, typeof t != "symbol" ? t + "" : t, n);
+import { jsxs as pe, jsx as R, Fragment as Fe } from "react/jsx-runtime";
+import D, { version as Ye, createContext as ye, forwardRef as ze, useRef as A, useState as z, useLayoutEffect as $, useMemo as oe, useCallback as Be, useContext as q, useId as Ne, useEffect as $e } from "react";
+const G = (e, t, n) => Math.min(Math.max(e, t), n), Mt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Et = (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);
+}, je = (e, t, n, s) => {
+  const { min: o, max: r, origin: c } = X(e, n), i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = (c === "x" ? i.width : i.height) / (r - o);
   return t / a;
-}, _ = (e, t) => {
+}, X = (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) => {
+}, U = (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);
+}, ge = (e, t, n, s) => {
+  const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, { min: r, max: c, origin: i } = X(e, n), a = (i === "x" ? o.width : o.height) / (c - r);
   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
-  ) : W(
-    r.y + r.height - c,
-    r.y - 10 * r.height,
-    r.y + 11 * r.height
+}, Z = (e, t, n, s) => {
+  const { min: o, origin: r } = X(e, n), c = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = ge(e, t - o, n, s);
+  return r === "x" ? G(
+    c.x + i,
+    c.x - 10 * c.width,
+    c.x + 11 * c.width
+  ) : G(
+    c.y + c.height - i,
+    c.y - 10 * c.height,
+    c.y + 11 * c.height
   );
-}, 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);
+}, kt = (e, t, n) => {
+  const { min: s, max: o } = X(e, n);
+  return G(t, s, o);
 }, 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 G(t, s.x, s.x + s.width);
+}, H = (e, t, n) => {
+  const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
+  return G(t, s.y, s.y + s.height);
+}, fe = (e, t, n) => {
+  const { min: s, max: o } = X(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);
+}, _ = (e, t, n, s) => {
+  const { min: o, max: r, origin: c } = X(e, n), i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = c === "x" ? (t - i.x) / i.width : (i.height - t + i.y) / i.height;
+  return o + a * (r - o);
+}, O = (e, t) => {
+  if (e === t) return !0;
+  if (e == null || t == null || typeof e != typeof t || typeof e != "object" || Array.isArray(e) !== Array.isArray(t)) return !1;
+  if (Array.isArray(e) && Array.isArray(t)) {
+    if (e.length !== t.length) return !1;
+    for (let o = 0; o < e.length; o++)
+      if (!O(e[o], t[o])) return !1;
+    return !0;
+  }
+  const n = Object.keys(e), s = Object.keys(t);
+  if (n.length !== s.length) return !1;
+  for (const o of n)
+    if (!Object.prototype.hasOwnProperty.call(t, o) || !O(e[o], t[o])) return !1;
+  return !0;
 }, Ve = (e) => {
   const { ctx: t, scales: n } = e;
   for (const s of n) {
     if (!s.axis) continue;
-    t.save(), L(t, {
+    t.save(), U(t, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -63,77 +77,70 @@ const W = (e, t, n) => Math.min(Math.max(e, t), n), wt = (e) => e.reduce((t, n)
       if (s.axis.position === "bottom")
         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;
-        t.beginPath(), t.moveTo(o.x, i), t.lineTo(o.x + o.width, i), t.stroke();
+        const r = o.y + o.height;
+        t.beginPath(), t.moveTo(o.x, r), t.lineTo(o.x + o.width, r), t.stroke();
       }
     } else if (s.axis.position === "left") {
-      const i = o.x + o.width;
-      t.beginPath(), t.moveTo(i, o.y), t.lineTo(i, o.y + o.height), t.stroke();
+      const r = o.x + o.width;
+      t.beginPath(), t.moveTo(r, o.y), t.lineTo(r, 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();
   }
 };
-function je(e) {
+function He(e) {
   return (t) => {
-    for (const n of e) fe(n, t);
+    for (const n of e) me(n, t);
   };
 }
-function He(e) {
+function We(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));
+      const o = me(s, t), r = typeof o == "function";
+      n.push(r ? o : () => me(s, null));
     }
     return () => {
       for (const s of n) s();
     };
   };
 }
-function fe(e, t) {
+function me(e, t) {
   if (typeof e == "function")
     return e(t);
   e && (e.current = t);
 }
-var We = parseInt(Oe.split(".")[0], 10) >= 19 ? He : je;
-const Ee = pe({
+var qe = parseInt(Ye.split(".")[0], 10) >= 19 ? We : He;
+const Ee = ye({
   listeners: [],
   subscribe: () => () => {
   },
   notifyListeners: () => {
   }
-}), qe = () => {
+}), Ge = () => {
   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);
+  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((r, c) => r[0] - c[0]), () => {
+    const r = e.findIndex(([, c]) => c === s);
+    r !== -1 && e.splice(r, 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 = {
+}, ve = ye(null), ke = ye(() => {
+}), Ae = {
   TOP: 400,
   MIDDLE: 300,
   BOTTOM: 200,
   BACKGROUND: 100
 };
-class Ae {
+class Re {
   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));
+    K(this, "_frame", null);
+    K(this, "clampXPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
+    K(this, "clampYPosToChartArea", (t, n = "canvas") => H(this.frame, t, n));
+    K(this, "valToPos", (t, n, s = "canvas") => Z(this.frame, t, n, s));
+    K(this, "valToPxDistance", (t, n, s = "canvas") => ge(this.frame, t, n, s));
+    K(this, "valFits", (t, n) => fe(this.frame, t, n));
+    K(this, "getScale", (t) => X(this.frame, t));
   }
   _updateFrame(t) {
     this._frame = t;
@@ -147,16 +154,16 @@ class Ae {
     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(
+const At = ze(({ configuration: e, children: t, style: n, className: s }, o) => {
+  const r = A(null), c = A(null), i = Je(c), [a, l] = z(() => null);
+  $(() => {
+    l(Qe(e, i, r.current));
+  }, [e, i, r]);
+  const m = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ pe(
     "div",
     {
-      ref: We([o, r]),
+      ref: qe([o, c]),
       className: s,
       style: {
         position: "relative",
@@ -165,67 +172,66 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ A(
+        /* @__PURE__ */ R(
           "canvas",
           {
-            ref: i,
-            width: c.width * d,
-            height: c.height * d,
+            ref: r,
+            width: i.width * m,
+            height: i.height * m,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${c.width}px`,
-              height: `${c.height}px`
+              width: `${i.width}px`,
+              height: `${i.height}px`
             }
           }
         ),
-        a && /* @__PURE__ */ A(Ze, { frame: a, children: t })
+        a && /* @__PURE__ */ R(Ze, { frame: a, children: t })
       ]
     }
   );
-}), Ze = ({ frame: e, children: t }) => {
-  const n = G(qe, []), [s, o] = O(0);
-  B(() => {
+}), Ze = ({
+  frame: e,
+  children: t
+}) => {
+  const n = oe(Ge, []), [s, o] = z(0);
+  $(() => {
     e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
   }, [e, s]);
-  const i = k(null);
-  return i.current = e, B(() => {
+  const r = A(null);
+  r.current = e, $(() => {
     n.subscribe(() => {
-      i.current && Ve(i.current);
-    }, ke.BOTTOM);
-  }, [n]), B(() => {
-    let r = null;
-    return r = window.requestAnimationFrame(() => {
-      r = null, n.notifyListeners();
+      r.current && Ve(r.current);
+    }, Ae.BOTTOM);
+  }, [n]), $(() => {
+    let i = null;
+    return i = window.requestAnimationFrame(() => {
+      i = null, n.notifyListeners();
     }), () => {
-      r && cancelAnimationFrame(r);
+      i && cancelAnimationFrame(i);
     };
-  }, [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
-    }
-  ) }) });
+  }, [s, e, n]);
+  const c = Be(() => {
+    o((i) => i + 1);
+  }, [o]);
+  return /* @__PURE__ */ R(Ee.Provider, { value: n, children: /* @__PURE__ */ R(ke.Provider, { value: c, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
 }, Je = (e) => {
-  const [t, n] = O({
+  const [t, n] = z({
     width: 0,
     height: 0
-  }), [s] = O(() => new ResizeObserver((o) => {
-    for (const i of o) {
-      const r = Math.round(i.contentRect.width), c = Math.round(i.contentRect.height);
+  }), [s] = z(() => new ResizeObserver((o) => {
+    for (const r of o) {
+      const c = Math.round(r.contentRect.width), i = Math.round(r.contentRect.height);
       n(
-        (a) => a.width !== r || a.height !== c ? { ...a, width: r, height: c } : a
+        (a) => a.width !== c || a.height !== i ? { ...a, width: c, height: i } : a
       );
     }
   }));
-  return B(() => {
+  return $(() => {
     if (!e.current) return;
-    const o = e.current.clientWidth, i = e.current.clientHeight;
+    const o = e.current.clientWidth, r = e.current.clientHeight;
     return n(
-      (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
+      (c) => c.width !== o || c.height !== r ? { ...c, width: o, height: r } : c
     ), s.observe(e.current, { box: "border-box" }), () => s.disconnect();
   }, [s, e]), t;
 }, Qe = (e, t, n) => {
@@ -234,45 +240,45 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   const o = window.devicePixelRatio || 1;
   if (t.width === 0 || t.height === 0)
     return null;
-  const i = {
+  const r = {
     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 u of e.scales)
-    u.axis && (u.origin === "x" ? (u.axis.position === "bottom" || u.axis.position === "top") && (i.height = Math.max(
+    u.axis && (u.origin === "x" ? (u.axis.position === "bottom" || u.axis.position === "top") && (r.height = Math.max(
       0,
-      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 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;
+      r.height - u.axis.size
+    ), u.axis.position === "top" && (r.y += u.axis.size)) : (u.axis.position === "left" || u.axis.position === "right") && (r.width = Math.max(0, r.width - u.axis.size), u.axis.position === "left" && (r.x += u.axis.size)));
+  const c = {
+    x: r.x * o,
+    y: r.y * o,
+    width: r.width * o,
+    height: r.height * o
+  }, i = [];
+  let a = e.padding.left * o, l = s.canvas.width - e.padding.right * o, m = s.canvas.height - e.padding.bottom * o, d = e.padding.top * o;
   for (const u of e.scales) {
     if (!u.axis) {
-      c.push({ ...u, axis: null });
+      i.push({ ...u, axis: null });
       continue;
     }
-    let f;
+    let h;
     if (u.origin === "x")
       switch (u.axis.position) {
         case "bottom":
-          d -= u.axis.size * o, f = {
-            x: i.x,
-            y: d / o,
-            width: i.width,
+          m -= u.axis.size * o, h = {
+            x: r.x,
+            y: m / o,
+            width: r.width,
             height: u.axis.size
           };
           break;
         case "top":
-          h += u.axis.size * o, f = {
-            x: i.x,
-            y: h / o - u.axis.size,
-            width: i.width,
+          d += u.axis.size * o, h = {
+            x: r.x,
+            y: d / o - u.axis.size,
+            width: r.width,
             height: u.axis.size
           };
           break;
@@ -283,37 +289,37 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
     else
       switch (u.axis.position) {
         case "left":
-          a += u.axis.size * o, f = {
+          a += u.axis.size * o, h = {
             x: a / o - u.axis.size,
-            y: i.y,
+            y: r.y,
             width: u.axis.size,
-            height: i.height
+            height: r.height
           };
           break;
         case "right":
-          l -= u.axis.size * o, f = {
+          l -= u.axis.size * o, h = {
             x: l / o,
-            y: i.y,
+            y: r.y,
             width: u.axis.size,
-            height: i.height
+            height: r.height
           };
           break;
         case "top":
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const v = {
-      x: f.x * o,
-      y: f.y * o,
-      width: f.width * o,
-      height: f.height * o
+    const y = {
+      x: h.x * o,
+      y: h.y * o,
+      width: h.width * o,
+      height: h.height * o
     };
-    c.push({
+    i.push({
       ...u,
       axis: {
         ...u.axis,
-        cssRect: f,
-        canvasRect: v
+        cssRect: h,
+        canvasRect: y
       }
     });
   }
@@ -321,215 +327,227 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
     ctx: s,
     dpr: o,
     padding: e.padding,
-    scales: c,
-    chartAreaCSS: i,
-    chartAreaCanvasPX: r
+    scales: i,
+    chartAreaCSS: r,
+    chartAreaCanvasPX: c
   };
-}, N = (e, t, n) => {
-  const s = H(ve), o = H(Re), i = H(Ee);
+}, j = (e, t, n) => {
+  const s = q(ve), o = q(ke), r = q(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(
+  const [c] = z(() => new Re());
+  c._updateFrame(s);
+  const i = A(c);
+  i.current = c;
+  const a = A(t);
+  a.current = t, $(() => r.subscribe(
     () => {
-      a.current(r);
+      a.current(c);
     },
-    typeof e == "number" ? e : ke[e]
-  ), [i, e, r]), B(() => {
+    typeof e == "number" ? e : Ae[e]
+  ), [r, e, c]), $(() => {
     o();
   }, [o, ...n]);
-}, ge = () => {
-  const e = H(ve);
+}, De = () => {
+  const e = q(ve);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
-  return G(() => {
-    const t = new Ae();
+  return oe(() => {
+    const t = new Re();
     return t._updateFrame(e), t;
   }, [e]);
-}, St = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (N(
+}, et = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
-  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: a }) => {
-    i.save(), i.beginPath(), L(i, o);
+  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: i, valToPos: a }) => {
+    r.save(), r.beginPath(), U(r, o);
     for (const l of t) {
-      const d = r(a(l.x, n)), h = c(a(l.y, s));
-      i.lineTo(d, h);
+      const m = c(a(l.x, n)), d = i(a(l.y, s));
+      r.lineTo(m, d);
     }
-    i.stroke(), i.restore();
+    r.stroke(), r.restore();
   },
   [t, n, s, o]
-), null), Ct = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (N(
+), null), Rt = D.memo(et, O), tt = ({
+  layer: e = "MIDDLE",
+  data: t,
+  xScaleId: n,
+  yScaleId: s,
+  xStrategy: o = "clip",
+  yStrategy: r = "clip",
+  radius: c = 5,
+  style: i,
+  globalAlpha: a
+}) => (j(
   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 m = a(h.x, n), u = a(h.y, s);
-      d.moveTo(m + o, u), d.arc(m, u, o, 0, Math.PI * 2);
+  ({
+    ctx: l,
+    valToPos: m,
+    valFits: d,
+    clampXPosToChartArea: p,
+    clampYPosToChartArea: u
+  }) => {
+    l.save(), l.beginPath();
+    const h = new Path2D();
+    U(l, i), a !== void 0 && (l.globalAlpha = a);
+    for (const y of t) {
+      let f, g;
+      switch (o) {
+        case "clip":
+          if (!d(y.x, n))
+            continue;
+          f = m(y.x, n);
+          break;
+        case "clamp":
+          f = p(m(y.x, n), "canvas");
+          break;
+      }
+      switch (r) {
+        case "clip":
+          if (!d(y.y, s))
+            continue;
+          g = m(y.y, s);
+          break;
+        case "clamp":
+          g = u(m(y.y, s), "canvas");
+          break;
+      }
+      h.moveTo(f + c, g), h.arc(f, g, c, 0, Math.PI * 2);
     }
-    c.fill(d), c.stroke(d), c.restore();
+    l.fill(h), l.stroke(h), l.restore();
   },
-  [t, n, s, o, i, r]
-), null), Pt = ({
+  [t, n, s, c, i, a]
+), null), Dt = D.memo(tt, O), nt = ({
   data: e,
   xScaleId: t,
   yScaleId: n,
   style: s,
   barWidth: o,
-  xPositionOffset: i,
-  radius: r,
-  layer: c = "MIDDLE"
-}) => (N(
-  c,
+  xPositionOffset: r,
+  radius: c,
+  layer: i = "MIDDLE"
+}) => (j(
+  i,
   ({
     ctx: a,
     valToPxDistance: l,
-    valToPos: d,
-    clampXPosToChartArea: h,
-    clampYPosToChartArea: m
+    valToPos: m,
+    clampXPosToChartArea: d,
+    clampYPosToChartArea: p
   }) => {
     if (e.length === 0) return;
-    a.save(), L(a, s);
+    a.save(), U(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,
+    for (const h of e) {
+      const f = m(h.x, t) - u / 2 + r * u, g = p(m(0, n)), w = p(m(h.y, n)), T = g - w, x = d(f), v = d(f + u) - x;
+      c ? a.roundRect(
+        x,
         w,
-        y,
+        v,
         T,
-        r
-      ) : a.rect(b, w, y, T);
+        c
+      ) : a.rect(x, w, v, T);
     }
     a.closePath(), a.fill(), s?.strokeStyle && a.stroke(), a.restore();
   },
-  [e, t, n, s, o, i, r]
-), null), Mt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (N(
+  [e, t, n, s, o, r, c]
+), null), It = D.memo(nt, O), st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
-  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: a }) => {
+  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: i, 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 p = c(a(d.x, n)), u = i(a(d.y[0], s)), h = i(a(d.y[1], s));
+      l.push({ x: p, y: u }), l.unshift({ x: p, y: h });
     }
-    if (l.length > 0) {
-      i.save(), i.beginPath(), L(i, o), i.moveTo(l[0].x, l[0].y);
+    const m = l[0];
+    if (m) {
+      r.save(), r.beginPath(), U(r, o), r.moveTo(m.x, m.y);
       for (const d of l)
-        i.lineTo(d.x, d.y);
-      i.closePath(), i.fill(), i.restore();
+        r.lineTo(d.x, d.y);
+      r.closePath(), r.fill(), r.restore();
     }
   },
   [t, n, s, o]
-), null), Et = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (N(
+), null), Lt = D.memo(st, O), ot = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: r }) => (j(
   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 });
+  ({ ctx: c, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: l }) => {
+    const m = [];
+    for (const h of t) {
+      const y = i(l(h.x, s)), f = a(l(h.y, o));
+      m.push({ x: y, y: f });
     }
-    const h = d.at(0), m = d.at(-1);
-    if (!h || !m)
+    const d = m.at(0), p = m.at(-1);
+    if (!d || !p)
       return;
     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();
+    c.save(), c.beginPath(), U(c, r), c.moveTo(d.x, u);
+    for (const h of m)
+      c.lineTo(h.x, h.y);
+    if (c.lineTo(p.x, u), c.closePath(), c.fill(), n) {
+      c.beginPath(), c.moveTo(d.x, d.y);
+      for (const h of m)
+        c.lineTo(h.x, h.y);
+      c.stroke();
     }
-    r.restore();
+    c.restore();
   },
-  [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 (o(d.value, d.scaleId)) {
-            const h = s(d.value, d.scaleId, t);
-            a[l] = h;
-          }
-          break;
-        }
-        case "clamp": {
-          const h = s(d.value, d.scaleId, t);
-          a[l] = i(d.scaleId)?.origin === "x" ? r(h, t) : c(h, t);
-          break;
-        }
-      }
-    }
-    return a;
-  }, [e, t, n]);
-}, kt = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (N(
+  [t, n, s, o, r]
+), null), Ut = D.memo(ot, O), rt = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: r, ticks: c }) => (j(
   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, {
+  ({ ctx: i, valToPos: a, getScale: l, frame: m }) => {
+    const d = l(t);
+    if (!d || !d.axis || d.origin !== "x") return;
+    const p = d.axis, u = p.position === "top" ? p.canvasRect.y + p.canvasRect.height : p.canvasRect.y, h = window.devicePixelRatio || 1, y = u, f = (r ?? 6) * h, g = p.position === "top" ? u - f : u + f, w = (o ?? 12) * h;
+    i.save(), i.fontKerning = "auto", U(i, {
       ...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);
+    }), i.beginPath();
+    const T = Array.isArray(c) ? c : c({ ...d, axis: p }, m);
+    for (const { value: x } of T) {
+      const v = a(x, t, "canvas");
+      i.moveTo(v, y), i.lineTo(v, g);
     }
-    c.stroke(), c.restore(), c.save(), L(c, {
-      textBaseline: m.position === "top" ? "bottom" : "top",
+    i.stroke(), i.restore(), i.save(), U(i, {
+      textBaseline: p.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...n,
       ...s
     });
-    for (const { value: b, label: y } of T) {
-      const x = a(b, t, "canvas"), S = y.split(`
+    for (const { value: x, label: v } of T) {
+      const b = a(x, t, "canvas"), S = v.split(`
 `);
       for (let E = 0; E < S.length; E++)
-        c.fillText(S[E], x, g + f * 2 + E * w);
+        i.fillText(S[E], b, g + h * 2 + E * w);
     }
-    c.restore();
+    i.restore();
   },
-  [r, t, n, s]
-), null), At = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (N(
+  [c, t, n, s]
+), null), _t = D.memo(rt, O), it = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: r, ticks: c }) => (j(
   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();
+  ({ ctx: i, valToPos: a, getScale: l, frame: m }) => {
+    const d = l(t);
+    if (!d || !d.axis || d.origin !== "y") return;
+    const p = d.axis, u = p.position === "left" ? p.canvasRect.x + p.canvasRect.width : p.canvasRect.x, h = u, y = r ?? 6, f = p.position === "left" ? u - y : u + y, g = o ?? 12, w = Array.isArray(c) ? c : c({ ...d, axis: p }, m);
+    i.save(), i.fontKerning = "auto", U(i, { ...n }), i.beginPath();
     for (const { value: T } of w) {
-      const b = a(T, t, "canvas");
-      c.moveTo(f, b), c.lineTo(p, b);
+      const x = a(T, t, "canvas");
+      i.moveTo(h, x), i.lineTo(f, x);
     }
-    c.stroke(), c.restore(), c.save(), L(c, {
+    i.stroke(), i.restore(), i.save(), U(i, {
       textBaseline: "middle",
-      textAlign: m.position === "left" ? "right" : "left",
+      textAlign: p.position === "left" ? "right" : "left",
       ...n,
       ...s
     });
-    for (const { value: T, label: b } of w) {
-      const y = a(T, t, "canvas"), x = b.split(`
+    for (const { value: T, label: x } of w) {
+      const v = a(T, t, "canvas"), b = x.split(`
 `);
-      for (let S = 0; S < x.length; S++)
-        c.fillText(` ${x[S]} `, p, y + S * g);
+      for (let S = 0; S < b.length; S++)
+        i.fillText(` ${b[S]} `, f, v + S * g);
     }
-    c.restore();
+    i.restore();
   },
-  [r, t, n, s]
-), null), D = () => {
+  [c, t, n, s]
+), null), Xt = D.memo(it, O), I = () => {
   const e = [];
   return {
     addEventListener: (t, n) => (e.push({
@@ -545,69 +563,69 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
     }
   };
 }, 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(
+  dblclick: I(),
+  click: I(),
+  contextmenu: I(),
+  move: I(),
+  mousedown: I(),
+  mouseup: I(),
+  spanselect: I(),
+  documentmouseup: I(),
+  pressandwheel: I(),
+  sync_move: I()
+}, L = (e, t, n) => {
+  const s = D.useRef(n);
+  s.current = n, D.useEffect(() => M[e].addEventListener(
     t,
-    (i, r) => {
-      s.current(r, i);
+    (r, c) => {
+      s.current(c, r);
     }
   ), [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) => {
+}, we = D.createContext(""), xe = (e, t) => {
+  const n = D.useContext(we);
+  return L(e, n, t);
+}, ct = (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: U(n, c, i, "css")
-  } : null, l = e.clientY - t.top, d = r ? {
+  const r = s ?? n.scales.find((d) => d.origin === "x")?.id, c = o ?? n.scales.find((d) => d.origin === "y")?.id, i = e.clientX - t.left, a = r ? {
     scaleId: r,
-    value: U(n, l, r, "css")
+    value: _(n, i, r, "css")
+  } : null, l = e.clientY - t.top, m = c ? {
+    scaleId: c,
+    value: _(n, l, c, "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 { pointerSyncPosition: { x: a, y: m }, cssX: i, cssY: l };
+}, N = (e, t) => {
+  const { x: n, y: s } = e, o = n && t.scales.some((c) => c.id === n.scaleId) ? Z(t, n.value, n.scaleId, "css") : null, r = s && t.scales.some((c) => c.id === s.scaleId) ? Z(t, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
-    cssY: i,
+    cssY: r,
     scaled: Object.fromEntries(
-      t.scales.flatMap((r) => {
-        const c = r.origin === "y" ? i : o;
-        return c === null ? [] : [[r.id, U(t, c, r.id, "css")]];
+      t.scales.flatMap((c) => {
+        const i = c.origin === "y" ? r : o;
+        return i === null ? [] : [[c.id, _(t, i, c.id, "css")]];
       })
     )
   };
 }, Pe = (e, t, n) => {
-  const s = q(
+  const s = Z(
     n,
     t.from,
     t.scaleId,
     "css"
-  ), o = q(
+  ), o = Z(
     n,
     t.to,
     t.scaleId,
     "css"
-  ), i = n.scales.flatMap(
-    (r) => {
-      if (r.origin !== e)
+  ), r = n.scales.flatMap(
+    (c) => {
+      if (c.origin !== e)
         return [];
-      const c = U(n, s, r.id, "css"), a = U(n, o, r.id, "css");
+      const i = _(n, s, c.id, "css"), a = _(n, o, c.id, "css");
       return [
         {
-          scaleId: r.id,
-          from: c,
+          scaleId: c.id,
+          from: i,
           to: a
         }
       ];
@@ -616,71 +634,71 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   return {
     fromCSS: s,
     toCSS: o,
-    scaled: i
+    scaled: r
   };
-}, Dt = ({
+}, Ot = ({
   id: e,
   onClick: t,
   onDblClick: n,
   onMouseMove: s,
   onMouseDown: o,
-  onMouseUp: i,
-  onDocumentMouseUp: r,
-  onSpanSelect: c,
+  onMouseUp: r,
+  onDocumentMouseUp: c,
+  onSpanSelect: i,
   onContextMenu: a,
   className: l,
-  style: d,
-  sync: h,
-  innerChildren: m,
+  style: m,
+  sync: d,
+  innerChildren: p,
   children: u
 }) => {
-  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,
+  const h = Ne();
+  return L("dblclick", h, (y) => {
+    n?.(y);
+  }), L("click", h, (y) => {
+    t?.(y);
+  }), L("move", h, (y) => {
+    s?.(y);
+  }), L("mousedown", h, (y) => {
+    o?.(y);
+  }), L("mouseup", h, (y) => {
+    r?.(y);
+  }), L("documentmouseup", h, (y) => {
+    c?.(y);
+  }), L("spanselect", h, (y) => {
+    i?.(y);
+  }), L("contextmenu", h, (y) => {
+    a?.(y);
+  }), /* @__PURE__ */ pe(we.Provider, { value: h, children: [
+    /* @__PURE__ */ R(
+      at,
       {
         id: e,
         className: l,
-        style: d,
-        sync: h,
-        children: m
+        style: m,
+        sync: d,
+        children: p
       }
     ),
     u
   ] });
-}, 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 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)
+}, at = ({ id: e, className: t, style: n, sync: s, children: o }) => {
+  const r = A(null), c = De().frame, i = A(c);
+  i.current = c;
+  const a = q(we), l = s?.key || a, m = A(null), d = A(null), p = A(null), u = () => {
+    const f = r.current?.parentElement;
+    if (f) {
+      if (f.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return p.getBoundingClientRect();
+      return f.getBoundingClientRect();
     }
-  }, f = (p, g) => {
-    const w = et(
-      p,
+  }, h = (f, g) => {
+    const w = ct(
+      f,
       u(),
-      c.current,
+      i.current,
       s?.xViaScaleId,
       s?.yViaScaleId
     );
@@ -688,189 +706,189 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       w.pointerSyncPosition,
       { cssX: w.cssX, cssY: w.cssY },
       {
-        ctrlKey: p.ctrlKey,
-        altKey: p.altKey,
-        shiftKey: p.shiftKey,
-        metaKey: p.metaKey
+        ctrlKey: f.ctrlKey,
+        altKey: f.altKey,
+        shiftKey: f.shiftKey,
+        metaKey: f.metaKey
       }
     );
-  }, v = k(f);
-  return v.current = f, Ne(() => {
-    const p = (y) => {
-      const x = h.current;
-      x && M.spanselect.dispatchEvent(a, {
-        ...x,
+  }, y = A(h);
+  return y.current = h, $e(() => {
+    const f = (v) => {
+      const b = d.current;
+      b && M.spanselect.dispatchEvent(a, {
+        ...b,
         completed: !0
       }), M.documentmouseup.dispatchEvent(a, {
-        frame: c.current,
+        frame: i.current,
         keys: {
-          ctrlKey: y.ctrlKey,
-          altKey: y.altKey,
-          shiftKey: y.shiftKey,
-          metaKey: y.metaKey
+          ctrlKey: v.ctrlKey,
+          altKey: v.altKey,
+          shiftKey: v.shiftKey,
+          metaKey: v.metaKey
         }
       });
-    }, g = (y) => {
-      const x = {
-        ctrlKey: y.ctrlKey,
-        altKey: y.altKey,
-        shiftKey: y.shiftKey,
-        metaKey: y.metaKey
-      }, S = m.current;
-      if (S && Object.entries(x).some(
+    }, g = (v) => {
+      const b = {
+        ctrlKey: v.ctrlKey,
+        altKey: v.altKey,
+        shiftKey: v.shiftKey,
+        metaKey: v.metaKey
+      }, S = p.current;
+      if (S && Object.entries(b).some(
         ([C, P]) => S.keys[C] !== P
       )) {
-        const C = { ...S, keys: x };
-        m.current = C, M.sync_move.dispatchEvent(l, C);
+        const C = { ...S, keys: b };
+        p.current = C, M.sync_move.dispatchEvent(l, C);
       }
-      const E = h.current;
-      if (E && Object.entries(x).some(
+      const E = d.current;
+      if (E && Object.entries(b).some(
         ([C, P]) => E.keys[C] !== P
       )) {
-        y.stopPropagation(), y.preventDefault();
-        const C = { ...E, keys: x };
-        h.current = C, M.spanselect.dispatchEvent(a, C);
+        v.stopPropagation(), v.preventDefault();
+        const C = { ...E, keys: b };
+        d.current = C, M.spanselect.dispatchEvent(a, C);
       }
-    }, w = (y) => {
-      v.current(
-        y,
-        (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 }
+    }, w = (v) => {
+      y.current(
+        v,
+        (b, { cssX: S, cssY: E }, C) => {
+          const P = m.current;
+          if (!P || !b.x || !b.y) return;
+          const k = i.current, B = P.xRangeCss.start, ie = S, ce = P.yRangeCss.start, ae = E, le = X(k, b.x.scaleId), ue = X(k, b.y.scaleId);
+          m.current = {
+            xRangeCss: { start: B, end: ie },
+            yRangeCss: { start: ce, end: ae }
           };
-          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";
+          let W = "below_threshold";
+          const he = Math.abs(ce - ae), de = Math.abs(B - ie);
+          he < 10 && de < 10 ? W = "below_threshold" : he > 30 && de > 30 ? W = "box" : he > de ? W = "y" : W = "x";
           const Te = {
-            scaleId: ae.id,
-            from: U(
-              R,
-              $(c.current, Y, "css"),
-              ae.id,
+            scaleId: le.id,
+            from: _(
+              k,
+              V(i.current, B, "css"),
+              le.id,
               "css"
             ),
-            to: U(
-              R,
-              $(c.current, ie, "css"),
-              ae.id,
+            to: _(
+              k,
+              V(i.current, ie, "css"),
+              le.id,
               "css"
             )
           }, Se = {
-            scaleId: le.id,
-            from: U(
-              R,
-              V(c.current, re, "css"),
-              le.id,
+            scaleId: ue.id,
+            from: _(
+              k,
+              H(i.current, ce, "css"),
+              ue.id,
               "css"
             ),
-            to: U(
-              R,
-              V(c.current, ce, "css"),
-              le.id,
+            to: _(
+              k,
+              H(i.current, ae, "css"),
+              ue.id,
               "css"
             )
-          }, 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,
+          }, J = Te && Pe("x", Te, i.current), Q = Se && Pe("y", Se, i.current), _e = J?.scaled, Xe = Q?.scaled, Ce = {
+            mode: W,
+            frame: i.current,
             completed: !1,
             x: {
-              css: Z && {
-                from: Z.fromCSS,
-                to: Z.toCSS
-              },
-              scaled: Ue ?? []
-            },
-            y: {
               css: J && {
                 from: J.fromCSS,
                 to: J.toCSS
               },
               scaled: _e ?? []
             },
+            y: {
+              css: Q && {
+                from: Q.fromCSS,
+                to: Q.toCSS
+              },
+              scaled: Xe ?? []
+            },
             keys: C
           };
-          h.current = Ce, M.spanselect.dispatchEvent(
+          d.current = Ce, M.spanselect.dispatchEvent(
             a,
             Ce
           );
         }
       );
-    }, T = (y) => {
-      v.current(y, (x, S, E) => {
-        const C = z(
-          x,
-          c.current
+    }, T = (v) => {
+      y.current(v, (b, S, E) => {
+        const C = N(
+          b,
+          i.current
         );
         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;
+        if (Object.values(E).some((k) => k)) {
+          v.preventDefault();
+          const k = Math.abs(v.deltaY) > Math.abs(v.deltaX) ? v.deltaY : v.deltaX;
           M.pressandwheel.dispatchEvent(a, {
             pointer: C,
-            frame: c.current,
+            frame: i.current,
             keys: E,
-            deltaX: y.deltaX,
-            deltaY: y.deltaY,
-            deltaAbs: R
+            deltaX: v.deltaX,
+            deltaY: v.deltaY,
+            deltaAbs: k
           });
         }
       });
     };
-    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, {
+    document.addEventListener("mouseup", f), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
+    const x = r.current;
+    return x?.addEventListener("wheel", T, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", p), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), b?.removeEventListener("wheel", T);
+      document.removeEventListener("mouseup", f), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), x?.removeEventListener("wheel", T);
     };
-  }, [c, a, l, v]), I("sync_move", l, (p) => {
-    const g = p.positions ? z(
-      p.positions,
-      c.current
+  }, [i, a, l, y]), L("sync_move", l, (f) => {
+    const g = f.positions ? N(
+      f.positions,
+      i.current
     ) : null;
-    m.current = p, M.move.dispatchEvent(a, {
-      frame: c.current,
+    p.current = f, M.move.dispatchEvent(a, {
+      frame: i.current,
       pointer: g ?? null,
-      keys: p.keys,
-      source: p.originInteractionsId === a ? "own" : "sync"
+      keys: f.keys,
+      source: f.originInteractionsId === a ? "own" : "sync"
     });
-  }), /* @__PURE__ */ A(
+  }), /* @__PURE__ */ R(
     "div",
     {
-      ref: i,
+      ref: r,
       id: e,
       className: t,
       style: {
         position: "absolute",
-        left: r.chartAreaCSS.x,
-        top: r.chartAreaCSS.y,
-        width: r.chartAreaCSS.width,
-        height: r.chartAreaCSS.height,
+        left: c.chartAreaCSS.x,
+        top: c.chartAreaCSS.y,
+        width: c.chartAreaCSS.width,
+        height: c.chartAreaCSS.height,
         zIndex: 25,
         ...n
       },
-      onDragStart: (p) => {
-        p.preventDefault();
+      onDragStart: (f) => {
+        f.preventDefault();
       },
-      onClick: (p) => {
-        f(p, (g, w, T) => {
-          const b = z(
+      onClick: (f) => {
+        h(f, (g, w, T) => {
+          const x = N(
             g,
-            c.current
+            i.current
           );
-          b && M.click.dispatchEvent(a, {
-            pointer: b,
-            frame: c.current,
+          x && M.click.dispatchEvent(a, {
+            pointer: x,
+            frame: i.current,
             keys: T
           });
         });
       },
-      onMouseLeave: (p) => {
-        f(p, (g, w, T) => {
+      onMouseLeave: (f) => {
+        h(f, (g, w, T) => {
           M.sync_move.dispatchEvent(l, {
             positions: null,
             keys: T,
@@ -878,8 +896,8 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onMouseMove: (p) => {
-        f(p, (g, w, T) => {
+      onMouseMove: (f) => {
+        h(f, (g, w, T) => {
           M.sync_move.dispatchEvent(l, {
             positions: g,
             keys: T,
@@ -887,72 +905,72 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
           });
         });
       },
-      onMouseDown: (p) => {
-        f(p, (g, { cssX: w, cssY: T }, b) => {
-          const y = z(
+      onMouseDown: (f) => {
+        h(f, (g, { cssX: w, cssY: T }, x) => {
+          const v = N(
             g,
-            c.current
+            i.current
           );
-          y && (M.mousedown.dispatchEvent(a, {
-            pointer: y,
-            frame: c.current,
-            keys: b
-          }), d.current = {
+          v && (M.mousedown.dispatchEvent(a, {
+            pointer: v,
+            frame: i.current,
+            keys: x
+          }), m.current = {
             xRangeCss: { start: w, end: w },
             yRangeCss: { start: T, end: T }
           });
         });
       },
-      onMouseUp: (p) => {
-        f(p, (g, w, T) => {
-          const b = z(
+      onMouseUp: (f) => {
+        h(f, (g, w, T) => {
+          const x = N(
             g,
-            c.current
+            i.current
           );
-          if (!b) return;
+          if (!x) return;
           M.mouseup.dispatchEvent(a, {
-            frame: c.current,
-            pointer: b,
+            frame: i.current,
+            pointer: x,
             keys: T
           });
-          const y = h.current;
-          h.current = null;
-          const x = d.current;
-          if (d.current = null, x && y) {
+          const v = d.current;
+          d.current = null;
+          const b = m.current;
+          if (m.current = null, b && v) {
             const S = {
-              ...y,
+              ...v,
               keys: T,
               completed: !0
             };
-            h.current = null, M.spanselect.dispatchEvent(
+            d.current = null, M.spanselect.dispatchEvent(
               a,
               S
             );
           }
         });
       },
-      onContextMenu: (p) => {
-        p.preventDefault(), f(p, (g, w, T) => {
-          const b = z(
+      onContextMenu: (f) => {
+        f.preventDefault(), h(f, (g, w, T) => {
+          const x = N(
             g,
-            c.current
+            i.current
           );
-          b && M.contextmenu.dispatchEvent(a, {
-            frame: c.current,
-            pointer: b,
+          x && M.contextmenu.dispatchEvent(a, {
+            frame: i.current,
+            pointer: x,
             keys: T
           });
         });
       },
-      onDoubleClick: (p) => {
-        f(p, (g, w, T) => {
-          const b = z(
+      onDoubleClick: (f) => {
+        h(f, (g, w, T) => {
+          const x = N(
             g,
-            c.current
+            i.current
           );
-          b && M.dblclick.dispatchEvent(a, {
-            frame: c.current,
-            pointer: b,
+          x && M.dblclick.dispatchEvent(a, {
+            frame: i.current,
+            pointer: x,
             keys: T
           });
         });
@@ -960,108 +978,108 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       children: o
     }
   );
-}, It = ({ data: e, renderTooltip: t, xScaleId: n }) => {
-  const [s, o] = O(null);
-  be("move", (r) => {
-    o(r);
+}, Kt = ({ data: e, renderTooltip: t, xScaleId: n }) => {
+  const [s, o] = z(null);
+  xe("move", (c) => {
+    o(c);
   });
-  const i = G(() => {
+  const r = oe(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: c } = s, a = c?.scaled[n];
+    const { frame: c, pointer: i } = s, a = i?.scaled[n];
     if (a === void 0)
       return null;
     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))
+    let m = a;
+    for (const d of e) {
+      let p = null, u = 1 / 0;
+      for (const [y, f] of d.points.entries()) {
+        if (!fe(c, f.x, n) || !fe(c, f.y, d.yScaleId))
           continue;
-        const g = Math.abs(p.x - a);
-        g < u && (u = g, m = v);
+        const g = Math.abs(f.x - a);
+        g < u && (u = g, p = y);
       }
-      const f = h.points[m ?? -1];
-      if (!f || ye(r, u, n, "css") > 30) {
-        l.push({ seriesId: h.seriesId, y: null });
+      const h = d.points[p ?? -1];
+      if (!h || ge(c, u, n, "css") > 30) {
+        l.push({ seriesId: d.seriesId, y: null });
         continue;
       }
-      d = f.x, l.push({
-        seriesId: h.seriesId,
-        y: f.y
+      m = h.x, l.push({
+        seriesId: d.seriesId,
+        y: h.y
       });
     }
     return {
-      frame: r,
-      x: d,
+      frame: c,
+      x: m,
       points: l
     };
   }, [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);
+  return t(r);
+}, Ft = ({ makeXStyle: e, makeXClassName: t, makeYStyle: n, makeYClassName: s }) => {
+  const [o, r] = z(null);
+  if (xe("move", (p) => {
+    r(p);
   }), !o)
     return null;
-  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(
+  const { frame: c, pointer: i } = o, a = i?.cssX ?? null, l = i?.cssY ?? null, m = a ? V(c, a, "css") : 0, d = l ? H(c, l, "css") : 0;
+  return /* @__PURE__ */ pe(Fe, { children: [
+    /* @__PURE__ */ R(
       "div",
       {
-        "data-show": !!c,
+        "data-show": !!i,
         className: t?.(o),
         style: {
           position: "absolute",
           left: 0,
           visibility: a === null ? "hidden" : "visible",
-          top: r.chartAreaCSS.y,
-          height: r.chartAreaCSS.height,
+          top: c.chartAreaCSS.y,
+          height: c.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: c ? 1 : 0,
-          transform: `translateX(${d}px)`,
+          opacity: i ? 1 : 0,
+          transform: `translateX(${m}px)`,
           ...e?.(o)
         }
       }
     ),
-    /* @__PURE__ */ A(
+    /* @__PURE__ */ R(
       "div",
       {
         className: s?.(o),
-        "data-show": !!c,
+        "data-show": !!i,
         style: {
           position: "absolute",
           visibility: l === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: r.chartAreaCSS.x,
-          width: r.chartAreaCSS.width,
+          left: c.chartAreaCSS.x,
+          width: c.chartAreaCSS.width,
           pointerEvents: "none",
-          opacity: c ? 1 : 0,
-          transform: `translateY(${h}px)`,
+          opacity: i ? 1 : 0,
+          transform: `translateY(${d}px)`,
           ...n?.(o)
         }
       }
     )
   ] });
-}, Ut = ({ makeClassName: e, makeStyle: t }) => {
-  const [n, s] = O(null);
-  be("spanselect", (i) => {
+}, Yt = ({ makeClassName: e, makeStyle: t }) => {
+  const [n, s] = z(null);
+  xe("spanselect", (r) => {
     s(
-      i.mode === "below_threshold" || i.completed ? null : i
+      r.mode === "below_threshold" || r.completed ? null : r
     );
   });
-  const o = G(() => {
+  const o = oe(() => {
     if (!n || n.mode === "below_threshold")
       return null;
-    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 };
+    const r = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, c = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, i = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, a = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = V(n.frame, r, "css"), m = V(n.frame, c, "css"), d = H(n.frame, i, "css"), p = H(n.frame, a, "css"), u = Math.min(l, m), h = Math.min(d, p), y = Math.abs(m - l), f = Math.abs(p - d);
+    return { leftPx: u, topPx: h, widthPx: y, heightPx: f };
   }, [n]);
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ R(
     "div",
     {
       className: n ? e?.(n) : void 0,
@@ -1077,9 +1095,9 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       }
     }
   );
-}, _t = ({ style: e, children: t, scaleId: n, ...s }) => {
-  const o = ge().getScale(n)?.axis;
-  return o ? /* @__PURE__ */ A(
+}, zt = ({ style: e, children: t, scaleId: n, ...s }) => {
+  const o = De().getScale(n)?.axis;
+  return o ? /* @__PURE__ */ R(
     "div",
     {
       style: {
@@ -1095,32 +1113,32 @@ const Tt = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       children: t
     }
   ) : null;
-}, De = 60, nt = 30, Ie = "UTC", st = "en-GB", Xt = ({
+}, Ie = 60, lt = 30, Le = "UTC", ut = "en-GB", Bt = ({
   space: e,
   formatter: t,
   acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, c = [], a = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? De : nt)) * a, d = $e(
+  const { min: r, max: c } = s, i = [], a = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? Ie : lt)) * a, m = je(
     o,
     l,
     s.id,
     "canvas"
-  ), 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;
+  ), d = n ?? ee, p = d.find((h) => h > m) ?? d.at(-1) ?? 1;
+  let u = r;
+  if (Math.abs(u % p) > Number.EPSILON) {
+    const h = (p - u % p) % p;
+    u += h;
   }
-  for (; u <= r && c.length < 1e3; )
-    c.push(u), u += m;
-  return (t ?? ot)(c);
-}, ot = (e) => {
+  for (; u <= c && i.length < 1e3; )
+    i.push(u), u += p;
+  return (t ?? ht)(i);
+}, ht = (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 = [];
+}, ee = [];
 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 = [
+  ee.push(1 * 10 ** e), ee.push(2 * 10 ** e), ee.push(5 * 10 ** e);
+const dt = 1, Ue = 1e3 * dt, be = 60 * Ue, se = 60 * be, re = 24 * se, ft = 30 * re, mt = 365 * re, pt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1172,93 +1190,93 @@ const it = 1, Le = 1e3 * it, xe = 60 * Le, se = 60 * xe, oe = 24 * se, rt = 30 *
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], ee = (e) => {
+], te = (e) => {
   const [t, n] = e;
   switch (n) {
     case "milliseconds":
       return t;
     case "seconds":
-      return t * Le;
+      return t * Ue;
     case "minutes":
-      return t * xe;
+      return t * be;
     case "hours":
       return t * se;
     case "days":
-      return t * oe;
+      return t * re;
     case "months":
-      return t * rt;
+      return t * ft;
     case "years":
-      return t * ct;
+      return t * mt;
   }
-}, lt = (e, t) => {
+}, yt = (e, t) => {
   const n = new Date(e);
   return n.setUTCMilliseconds(n.getUTCMilliseconds() + t), n.getTime();
-}, ut = (e, t) => {
+}, gt = (e, t) => {
   const n = new Date(e);
   return n.setUTCSeconds(n.getUTCSeconds() + t), n.getTime();
-}, dt = (e, t) => {
+}, vt = (e, t) => {
   const n = new Date(e);
   return n.setUTCMinutes(n.getUTCMinutes() + t), n.getTime();
-}, ht = (e, t) => {
+}, wt = (e, t) => {
   const n = new Date(e);
   return n.setUTCHours(n.getUTCHours() + t), n.getTime();
-}, ft = (e, t) => {
+}, xt = (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) => {
+}, Y = (e, t) => {
   const [n, s] = t;
   switch (s) {
     case "milliseconds":
-      return lt(e, n);
+      return yt(e, n);
     case "seconds":
-      return ut(e, n);
+      return gt(e, n);
     case "minutes":
-      return dt(e, n);
+      return vt(e, n);
     case "hours":
-      return ht(e, n);
+      return wt(e, n);
     case "days":
-      return ft(e, n);
+      return xt(e, n);
     case "months":
       return Me(e, n);
     case "years":
       return Me(e, n * 12);
   }
 };
-function te(e, t) {
+function ne(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 mt = (e, t, n = "UTC") => {
+const bt = (e, t, n = "UTC") => {
   const [s, o] = t;
-  let i = new Date(e);
-  const r = () => {
-    i.setUTCHours(-te(i, n), 0, 0, 0);
+  let r = new Date(e);
+  const c = () => {
+    r.setUTCHours(-ne(r, n), 0, 0, 0);
   };
   switch (o) {
     case "milliseconds":
-      i.setUTCMilliseconds(
-        Math.ceil(i.getUTCMilliseconds() / s) * s
+      r.setUTCMilliseconds(
+        Math.ceil(r.getUTCMilliseconds() / s) * s
       );
       break;
     case "seconds":
-      i.setUTCSeconds(
-        Math.ceil(i.getUTCSeconds() / s) * s,
+      r.setUTCSeconds(
+        Math.ceil(r.getUTCSeconds() / s) * s,
         0
       );
       break;
     case "minutes":
-      i.setUTCMinutes(
-        Math.ceil(i.getTime() % se / xe / s) * s,
+      r.setUTCMinutes(
+        Math.ceil(r.getTime() % se / be / s) * s,
         0,
         0
       );
       break;
     case "hours":
-      i.setUTCHours(
-        Math.ceil(i.getTime() % oe / se / s) * s,
+      r.setUTCHours(
+        Math.ceil(r.getTime() % re / se / s) * s,
         0,
         0,
         0
@@ -1267,20 +1285,20 @@ const mt = (e, t, n = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(K(i, [1, o])));
+      o === "months" ? r.setUTCDate(1) : o === "years" && r.setUTCMonth(0, 1), c(), r.getTime() < e && (r = new Date(Y(r, [1, o])));
       break;
   }
-  return i.getTime();
-}, Ft = ({
-  timeZone: e = Ie,
-  space: t = De,
+  return r.getTime();
+}, Nt = ({
+  timeZone: e = Le,
+  space: t = Ie,
   formatter: n,
   locale: s,
   showTimezone: o
-} = {}) => (i, r) => {
-  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];
+} = {}) => (r, c) => {
+  const { min: i, max: a } = r, l = Math.floor(c.chartAreaCanvasPX.width / t) + 1, d = (a - i) / l, [p, u] = pt.find(
+    (w) => te(w) >= d
+  ) ?? [1, "milliseconds"], h = bt(i, [p, u], e), y = ne(h, e), f = [h];
   let g;
   for (; ; ) {
     switch (u) {
@@ -1288,31 +1306,31 @@ const mt = (e, t, n = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        g = K(f, [p.length * m, u]);
+        g = Y(h, [f.length * p, u]);
         break;
       }
       case "days": {
-        const w = K(f, [
-          p.length * m,
+        const w = Y(h, [
+          f.length * p,
           u
         ]);
-        g = K(w, [
-          v - te(w, e),
+        g = Y(w, [
+          y - ne(w, e),
           "hours"
         ]);
         break;
       }
       case "months":
       case "years": {
-        const w = K(
-          K(K(f, [v, "hours"]), [
-            p.length * m,
+        const w = Y(
+          Y(Y(h, [y, "hours"]), [
+            f.length * p,
             u
           ]),
-          [-v, "hours"]
+          [-y, "hours"]
         );
-        g = K(w, [
-          v - te(w, e),
+        g = Y(w, [
+          y - ne(w, e),
           "hours"
         ]);
         break;
@@ -1320,16 +1338,16 @@ const mt = (e, t, n = "UTC") => {
     }
     if (g > a)
       break;
-    p.push(g);
+    f.push(g);
   }
-  return (n ?? pt({
+  return (n ?? Tt({
     locale: s,
     showTimezone: o,
     timeZone: e
-  }))(p);
-}, 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,
+  }))(f);
+}, F = (e, t, n) => e.find((s) => s.type === n)?.value !== t.find((s) => s.type === n)?.value, Tt = ({
+  timeZone: e = Le,
+  locale: t = ut,
   showTimezone: n = !0
 }) => {
   const s = new Intl.DateTimeFormat(t, {
@@ -1345,71 +1363,71 @@ const mt = (e, t, n = "UTC") => {
     timeZone: e
   });
   return (o) => {
-    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;
+    const r = o[1] - o[0], c = r < te([1, "days"]), i = r < te([1, "minutes"]), a = r < te([1, "seconds"]);
+    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, m, d) => {
+      const p = d[m - 1], u = m === 0 || F(l.label, p.label, "year"), h = m === 0 || F(l.label, p.label, "day"), y = m === 0 || F(l.label, p.label, "month"), f = m === 0 || F(l.label, p.label, "hour"), g = m === 0 || F(l.label, p.label, "timeZoneName"), w = m === 0 || F(l.label, p.label, "minute"), T = m === 0 || F(l.label, p.label, "second"), x = m === 0 || F(l.label, p.label, "fractionalSecond"), v = [];
+      if (c && (f || w || g || T || x)) {
+        const b = 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 P = l.label.find((Y) => Y.type === "second")?.value, R = l.label.find(
-            (Y) => Y.type === "fractionalSecond"
+        if (i) {
+          const P = l.label.find((B) => B.type === "second")?.value, k = l.label.find(
+            (B) => B.type === "fractionalSecond"
           )?.value;
-          C = `:${P}` + (a ? `.${R}` : "");
+          C = `:${P}` + (a ? `.${k}` : "");
         }
-        y.push(
-          `${x}:${S}${C}` + (n && g ? ` ${E}` : "")
+        v.push(
+          `${b}:${S}${C}` + (n && g ? ` ${E}` : "")
         );
       }
-      return (f || v) && y.push(
+      return (h || y) && v.push(
         [
-          l.label.find((x) => x.type === "month")?.value,
-          f && l.label.find((x) => x.type === "day")?.value
+          l.label.find((b) => b.type === "month")?.value,
+          h && l.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), u && y.push(l.label.find((x) => x.type === "year")?.value), {
+      ), u && v.push(l.label.find((b) => b.type === "year")?.value), {
         value: l.value,
-        label: y.filter((x) => x).join(`
+        label: v.filter((b) => b).join(`
 `)
       };
     });
   };
 };
 export {
-  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
+  Lt as AreaPlot,
+  zt as AxisOverlay,
+  It as BarPlot,
+  Ae as CANPLOT_LAYER,
+  At as CanPlot,
+  Ot as ChartAreaInteractions,
+  Ft as Crosshair,
+  Re as FrameDrawer,
+  Rt as LinePlot,
+  Dt as ScatterPlot,
+  Yt as SelectBox,
+  Ut as SparklinePlot,
+  Kt as TooltipsX,
+  _t as XTicks,
+  Xt as YTicks,
+  U as applyStyles,
+  G as clamp,
+  kt as clampUnfit,
+  V as clampXPosToChartArea,
+  H as clampYPosToChartArea,
+  O as deepEqual,
+  ht as defaultNumericalTicksFormatter,
+  Et as findClosestIndex,
+  X as getScale,
+  Bt as makeLinearTicks,
+  Tt as makeTimeTickFormat,
+  Nt as makeTimeTicks,
+  _ as posToVal,
+  je as pxToValDistance,
+  Mt as sum,
+  j as useDrawEffect,
+  De as useFrameState,
+  xe as useInteractionsEvent,
+  fe as valFits,
+  Z as valToPos,
+  ge as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map