@canplot/react 0.1.5 → 0.1.6

package/dist/canplot.mjs

@@ -1,10 +1,10 @@
 import { jsxs as at, jsx as X, Fragment as Et } from "react/jsx-runtime";
-import Z, { createContext as Mt, useContext as lt, useRef as L, useLayoutEffect as J, version as At, forwardRef as Pt, useMemo as St, useState as N, useId as Rt, useEffect as _t } from "react";
+import Z, { createContext as Pt, useContext as lt, useRef as L, useLayoutEffect as J, version as Mt, forwardRef as At, useMemo as ut, useState as N, useId as Rt, useEffect as _t } from "react";
 import { createStore as Ut, useStore as vt } from "zustand";
 const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
-  const { min: n, max: o } = P(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = (Q(t, e) ? a.width : a.height) / (o - n);
+  const { min: o, max: n } = A(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = (Q(t, e) ? a.width : a.height) / (n - o);
   return s / l;
-}, P = (t, s) => {
+}, A = (t, s) => {
   const e = t.scales.find((c) => c.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
@@ -12,23 +12,23 @@ const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
 }, Q = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", ae = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", R = (t, s) => {
   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, c) => {
-  const n = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: o, max: a } = P(t, e), l = (Q(t, e) ? n.width : n.height) / (a - o);
+}, dt = (t, s, e, c) => {
+  const o = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: n, max: a } = A(t, e), l = (Q(t, e) ? o.width : o.height) / (a - n);
   return s * l;
 }, j = (t, s, e, c) => {
-  const { min: n } = P(t, e), o = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = ut(t, s - n, e, c);
+  const { min: o } = A(t, e), n = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = dt(t, s - o, e, c);
   return Q(t, e) ? V(
-    o.x + a,
-    o.x - 10 * o.width,
-    o.x + 11 * o.width
+    n.x + a,
+    n.x - 10 * n.width,
+    n.x + 11 * n.width
   ) : V(
-    o.y + o.height - a,
-    o.y - 10 * o.height,
-    o.y + 11 * o.height
+    n.y + n.height - a,
+    n.y - 10 * n.height,
+    n.y + 11 * n.height
   );
 }, le = (t, s, e) => {
-  const { min: c, max: n } = P(t, e);
-  return V(s, c, n);
+  const { min: c, max: o } = A(t, e);
+  return V(s, c, o);
 }, O = (t, s, e) => {
   const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return V(s, c.x, c.x + c.width);
@@ -36,11 +36,11 @@ const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
   const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return V(s, c.y, c.y + c.height);
 }, it = (t, s, e) => {
-  const { min: c, max: n } = P(t, e);
-  return s >= c && s <= n;
+  const { min: c, max: o } = A(t, e);
+  return s >= c && s <= o;
 }, D = (t, s, e, c) => {
-  const { min: n, max: o } = P(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = Q(t, e) ? (s - a.x) / a.width : (a.height - s + a.y) / a.height;
-  return n + l * (o - n);
+  const { min: o, max: n } = A(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = Q(t, e) ? (s - a.x) / a.width : (a.height - s + a.y) / a.height;
+  return o + l * (n - o);
 }, Dt = (t) => {
   const { ctx: s, scales: e } = t;
   for (const c of e) {
@@ -51,18 +51,18 @@ const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
       lineWidth: 1,
       ...c.axis.style
     });
-    const n = c.axis.canvasRect;
+    const o = c.axis.canvasRect;
     if (c.origin === "x") {
       if (c.axis.position === "bottom")
-        s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x + n.width, n.y), s.stroke();
+        s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x + o.width, o.y), s.stroke();
       else if (c.axis.position === "top") {
-        const o = n.y + n.height;
-        s.beginPath(), s.moveTo(n.x, o), s.lineTo(n.x + n.width, o), s.stroke();
+        const n = o.y + o.height;
+        s.beginPath(), s.moveTo(o.x, n), s.lineTo(o.x + o.width, n), s.stroke();
       }
     } else if (c.axis.position === "left") {
-      const o = n.x + n.width;
-      s.beginPath(), s.moveTo(o, n.y), s.lineTo(o, n.y + n.height), s.stroke();
-    } else c.axis.position === "right" && (s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x, n.y + n.height), s.stroke());
+      const n = o.x + o.width;
+      s.beginPath(), s.moveTo(n, o.y), s.lineTo(n, o.y + o.height), s.stroke();
+    } else c.axis.position === "right" && (s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x, o.y + o.height), s.stroke());
     s.restore();
   }
 }, Xt = () => Ut((t, s) => {
@@ -75,30 +75,30 @@ const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (c, n) => O(e(), c, n ?? "canvas"),
-    clampYPosToChartArea: (c, n) => $(e(), c, n ?? "canvas"),
-    valToPos: (c, n, o) => j(e(), c, n, o ?? "canvas"),
-    valToPxDistance: (c, n, o) => ut(
+    clampXPosToChartArea: (c, o) => O(e(), c, o ?? "canvas"),
+    clampYPosToChartArea: (c, o) => $(e(), c, o ?? "canvas"),
+    valToPos: (c, o, n) => j(e(), c, o, n ?? "canvas"),
+    valToPxDistance: (c, o, n) => dt(
       e(),
       c,
-      n,
-      o ?? "canvas"
+      o,
+      n ?? "canvas"
     ),
-    valFits: (c, n) => it(e(), c, n),
-    getScale: (c) => P(e(), c)
+    valFits: (c, o) => it(e(), c, o),
+    getScale: (c) => A(e(), c)
   };
-}), dt = Mt(null), z = (t, s) => {
-  const e = lt(dt);
+}), ht = Pt(null), z = (t, s) => {
+  const e = lt(ht);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
   const c = L(t);
   c.current = t, J(() => {
-    c.current(e.getState()), e.subscribe((n) => {
-      n._frame && c.current(n);
+    c.current(e.getState()), e.subscribe((o) => {
+      o._frame && c.current(o);
     });
   }, [e, ...s]);
-}, ht = (t) => {
-  const s = lt(dt);
+}, ft = (t) => {
+  const s = lt(ht);
   if (!s)
     throw new Error("useFrame must be used within a CanPlot component");
   return vt(
@@ -115,8 +115,8 @@ function It(t) {
   return (s) => {
     const e = [];
     for (const c of t) {
-      const n = rt(c, s), o = typeof n == "function";
-      e.push(o ? n : () => rt(c, null));
+      const o = rt(c, s), n = typeof o == "function";
+      e.push(n ? o : () => rt(c, null));
     }
     return () => {
       for (const c of e) c();
@@ -128,21 +128,21 @@ function rt(t, s) {
     return t(s);
   t && (t.current = s);
 }
-var Ft = parseInt(At.split(".")[0], 10) >= 19 ? It : Kt;
-const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) => {
-  const o = L(null), a = L(null), l = Yt(a), d = St(Xt, []);
+var Ft = parseInt(Mt.split(".")[0], 10) >= 19 ? It : Kt;
+const ue = At(({ configuration: t, children: s, style: e, className: c }, o) => {
+  const n = L(null), a = L(null), l = Yt(a), d = ut(Xt, []);
   J(() => {
     d.setState({
-      _frame: Ot(t, l, o.current)
+      _frame: Ot(t, l, n.current)
     });
-  }, [t, l, o, d]), J(() => d.subscribe((r) => {
+  }, [t, l, n, d]), J(() => d.subscribe((r) => {
     r._frame && $t(r._frame);
   }), [d]);
   const u = window.devicePixelRatio || 1;
   return /* @__PURE__ */ at(
     "div",
     {
-      ref: Ft([n, a]),
+      ref: Ft([o, a]),
       className: c,
       style: {
         position: "relative",
@@ -154,7 +154,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
         /* @__PURE__ */ X(
           "canvas",
           {
-            ref: o,
+            ref: n,
             width: l.width * u,
             height: l.height * u,
             style: {
@@ -169,13 +169,13 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       ]
     }
   );
-}), zt = ({ frameStore: t, children: s }) => vt(t, (c) => !!c._frame) ? /* @__PURE__ */ X(dt.Provider, { value: t, children: s }) : null, Yt = (t) => {
+}), zt = ({ frameStore: t, children: s }) => vt(t, (c) => !!c._frame) ? /* @__PURE__ */ X(ht.Provider, { value: t, children: s }) : null, Yt = (t) => {
   const [s, e] = N({
     width: 0,
     height: 0
-  }), [c] = N(() => new ResizeObserver((n) => {
-    for (const o of n) {
-      const a = Math.round(o.contentRect.width), l = Math.round(o.contentRect.height);
+  }), [c] = N(() => new ResizeObserver((o) => {
+    for (const n of o) {
+      const a = Math.round(n.contentRect.width), l = Math.round(n.contentRect.height);
       e(
         (d) => d.width !== a || d.height !== l ? { ...d, width: a, height: l } : d
       );
@@ -183,35 +183,35 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
   }));
   return J(() => {
     if (!t.current) return;
-    const n = t.current.clientWidth, o = t.current.clientHeight;
+    const o = t.current.clientWidth, n = t.current.clientHeight;
     return e(
-      (a) => a.width !== n || a.height !== o ? { ...a, width: n, height: o } : a
+      (a) => a.width !== o || a.height !== n ? { ...a, width: o, height: n } : a
     ), c.observe(t.current, { box: "border-box" }), () => c.disconnect();
   }, [c, t]), s;
 }, Ot = (t, s, e) => {
   const c = e?.getContext("2d");
   if (!c) return null;
-  const n = window.devicePixelRatio || 1;
+  const o = window.devicePixelRatio || 1;
   if (s.width === 0 || s.height === 0)
     return null;
-  const o = {
+  const n = {
     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
   };
   for (const h of t.scales)
-    h.axis && (h.origin === "x" ? (h.axis.position === "bottom" || h.axis.position === "top") && (o.height = Math.max(
+    h.axis && (h.origin === "x" ? (h.axis.position === "bottom" || h.axis.position === "top") && (n.height = Math.max(
       0,
-      o.height - h.axis.size
-    ), h.axis.position === "top" && (o.y += h.axis.size)) : (h.axis.position === "left" || h.axis.position === "right") && (o.width = Math.max(0, o.width - h.axis.size), h.axis.position === "left" && (o.x += h.axis.size)));
+      n.height - h.axis.size
+    ), h.axis.position === "top" && (n.y += h.axis.size)) : (h.axis.position === "left" || h.axis.position === "right") && (n.width = Math.max(0, n.width - h.axis.size), h.axis.position === "left" && (n.x += h.axis.size)));
   const a = {
-    x: o.x * n,
-    y: o.y * n,
-    width: o.width * n,
-    height: o.height * n
+    x: n.x * o,
+    y: n.y * o,
+    width: n.width * o,
+    height: n.height * o
   }, l = [];
-  let d = t.padding.left * n, u = c.canvas.width - t.padding.right * n, r = c.canvas.height - t.padding.bottom * n, p = t.padding.top * n;
+  let d = t.padding.left * o, u = c.canvas.width - t.padding.right * o, r = c.canvas.height - t.padding.bottom * o, p = t.padding.top * o;
   for (const h of t.scales) {
     if (!h.axis) {
       l.push({ ...h, axis: null });
@@ -221,18 +221,18 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     if (h.origin === "x")
       switch (h.axis.position) {
         case "bottom":
-          r -= h.axis.size * n, i = {
-            x: o.x,
-            y: r / n,
-            width: o.width,
+          r -= h.axis.size * o, i = {
+            x: n.x,
+            y: r / o,
+            width: n.width,
             height: h.axis.size
           };
           break;
         case "top":
-          p += h.axis.size * n, i = {
-            x: o.x,
-            y: p / n - h.axis.size,
-            width: o.width,
+          p += h.axis.size * o, i = {
+            x: n.x,
+            y: p / o - h.axis.size,
+            width: n.width,
             height: h.axis.size
           };
           break;
@@ -243,19 +243,19 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     else
       switch (h.axis.position) {
         case "left":
-          d += h.axis.size * n, i = {
-            x: d / n - h.axis.size,
-            y: o.y,
+          d += h.axis.size * o, i = {
+            x: d / o - h.axis.size,
+            y: n.y,
             width: h.axis.size,
-            height: o.height
+            height: n.height
           };
           break;
         case "right":
-          u -= h.axis.size * n, i = {
-            x: u / n,
-            y: o.y,
+          u -= h.axis.size * o, i = {
+            x: u / o,
+            y: n.y,
             width: h.axis.size,
-            height: o.height
+            height: n.height
           };
           break;
         case "top":
@@ -263,10 +263,10 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
           throw new Error("Invalid axis position for y origin");
       }
     const m = {
-      x: i.x * n,
-      y: i.y * n,
-      width: i.width * n,
-      height: i.height * n
+      x: i.x * o,
+      y: i.y * o,
+      width: i.width * o,
+      height: i.height * o
     };
     l.push({
       ...h,
@@ -279,28 +279,28 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
   }
   return {
     ctx: c,
-    dpr: n,
+    dpr: o,
     padding: t.padding,
     scales: l,
-    chartAreaCSS: o,
+    chartAreaCSS: n,
     chartAreaCanvasPX: a
   };
 }, $t = (t) => {
   t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Dt(t);
 }, de = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(
-  ({ getCtx: n, clampXPosToChartArea: o, clampYPosToChartArea: a, valToPos: l }) => {
-    const d = n();
+  ({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: a, valToPos: l }) => {
+    const d = o();
     d.save(), d.beginPath(), R(d, c);
     for (const u of t) {
-      const r = o(l(u.x, s)), p = a(l(u.y, e));
+      const r = n(l(u.x, s)), p = a(l(u.y, e));
       d.lineTo(r, p);
     }
     d.stroke(), d.restore();
   },
   [t, s, e, c]
-), null), he = ({ data: t, xScaleId: s, yScaleId: e, radius: c = 5, style: n }) => (z(({ getCtx: o, valToPos: a, valFits: l }) => {
-  const d = o();
-  d.save(), d.beginPath(), R(d, n);
+), null), he = ({ data: t, xScaleId: s, yScaleId: e, radius: c = 5, style: o }) => (z(({ getCtx: n, valToPos: a, valFits: l }) => {
+  const d = n();
+  d.save(), d.beginPath(), R(d, o);
   for (const u of t) {
     if (!l(u.x, s) || !l(u.y, e))
       continue;
@@ -308,13 +308,13 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     d.moveTo(r + c, p), d.arc(r, p, c, 0, Math.PI * 2);
   }
   d.stroke(), d.fill(), d.restore();
-}, [t, s, e, c, n]), null), fe = ({
+}, [t, s, e, c, o]), null), fe = ({
   data: t,
   xScaleId: s,
   yScaleId: e,
   style: c,
-  barWidth: n,
-  xPositionOffset: o,
+  barWidth: o,
+  xPositionOffset: n,
   radius: a
 }) => (z(
   ({
@@ -327,37 +327,37 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     if (t.length === 0) return;
     const f = l();
     f.save(), R(f, c);
-    const h = d(n, s);
+    const h = d(o, s);
     f.beginPath();
     for (const i of t) {
-      const y = u(i.x, s) - h / 2 + o * h, x = p(u(0, e)), v = p(u(i.y, e)), g = x - v, S = r(y), w = r(y + h) - S;
+      const y = u(i.x, s) - h / 2 + n * h, x = p(u(0, e)), v = p(u(i.y, e)), g = x - v, S = r(y), C = r(y + h) - S;
       a ? f.roundRect(
         S,
         v,
-        w,
+        C,
         g,
         a
-      ) : f.rect(S, v, w, g);
+      ) : f.rect(S, v, C, g);
     }
     f.closePath(), f.fill(), c?.strokeStyle && f.stroke(), f.restore();
   },
-  [t, s, e, c, n, o, a]
-), null), me = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(({ getCtx: n, clampXPosToChartArea: o, clampYPosToChartArea: a, valToPos: l }) => {
+  [t, s, e, c, o, n, a]
+), null), me = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: a, valToPos: l }) => {
   const d = [];
   for (const r of t) {
-    const p = o(l(r.x, s)), f = a(l(r.y[0], e)), h = a(l(r.y[1], e));
+    const p = n(l(r.x, s)), f = a(l(r.y[0], e)), h = a(l(r.y[1], e));
     d.push({ x: p, y: f }), d.unshift({ x: p, y: h });
   }
-  const u = n();
+  const u = o();
   if (d.length > 0) {
     u.save(), u.beginPath(), R(u, c), u.moveTo(d[0].x, d[0].y);
     for (const r of d)
       u.lineTo(r.x, r.y);
     u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, c]), null), pe = ({ data: t, stroked: s, xScaleId: e, yScaleId: c, style: n }) => (z(
-  ({ getCtx: o, clampXPosToChartArea: a, clampYPosToChartArea: l, valToPos: d }) => {
-    const u = [], r = o();
+}, [t, s, e, c]), null), pe = ({ data: t, stroked: s, xScaleId: e, yScaleId: c, style: o }) => (z(
+  ({ getCtx: n, clampXPosToChartArea: a, clampYPosToChartArea: l, valToPos: d }) => {
+    const u = [], r = n();
     for (const i of t) {
       const m = a(d(i.x, e)), y = l(d(i.y, c));
       u.push({ x: m, y });
@@ -366,7 +366,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     if (!p || !f)
       return;
     const h = l(d(0, c));
-    r.save(), r.beginPath(), R(r, n), r.moveTo(p.x, h);
+    r.save(), r.beginPath(), R(r, o), r.moveTo(p.x, h);
     for (const i of u)
       r.lineTo(i.x, i.y);
     if (r.lineTo(f.x, h), r.closePath(), r.fill(), s) {
@@ -377,13 +377,13 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     }
     r.restore();
   },
-  [t, s, e, c, n]
-), null), ye = (t, s) => ht(
+  [t, s, e, c, o]
+), null), ye = (t, s) => ft(
   ({
     clampXPosToChartArea: e,
     clampYPosToChartArea: c,
-    getScale: n,
-    valToPos: o,
+    getScale: o,
+    valToPos: n,
     valFits: a
   }) => {
     const l = {};
@@ -392,32 +392,32 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       switch (u.exceeding) {
         case "discard": {
           if (a(u.value, u.scaleId)) {
-            const r = o(u.value, u.scaleId, s);
+            const r = n(u.value, u.scaleId, s);
             l[d] = r;
           }
           break;
         }
         case "clamp": {
-          const r = o(u.value, u.scaleId, s);
-          l[d] = n(u.scaleId)?.origin === "x" ? e(r, s) : c(r, s);
+          const r = n(u.value, u.scaleId, s);
+          l[d] = o(u.scaleId)?.origin === "x" ? e(r, s) : c(r, s);
           break;
         }
       }
     }
     return l;
   }
-), xe = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: n, ticks: o }) => (z(
+), xe = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: o, ticks: n }) => (z(
   ({ getCtx: a, valToPos: l, getScale: d, getFrame: u }) => {
     const r = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "x") return;
-    const f = p.axis, h = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, i = window.devicePixelRatio || 1, m = h, y = (n ?? 6) * i, x = f.position === "top" ? h - y : h + y, v = (c ?? 12) * i;
+    const f = p.axis, h = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, i = window.devicePixelRatio || 1, m = h, y = (o ?? 6) * i, x = f.position === "top" ? h - y : h + y, v = (c ?? 12) * i;
     r.save(), r.fontKerning = "auto", R(r, {
       ...s
     }), r.beginPath();
-    const g = Array.isArray(o) ? o : o({ ...p, axis: f }, u());
+    const g = Array.isArray(n) ? n : n({ ...p, axis: f }, u());
     for (const { value: S } of g) {
-      const w = l(S, t, "canvas");
-      r.moveTo(w, m), r.lineTo(w, x);
+      const C = l(S, t, "canvas");
+      r.moveTo(C, m), r.lineTo(C, x);
     }
     r.stroke(), r.restore(), r.save(), R(r, {
       textBaseline: f.position === "top" ? "bottom" : "top",
@@ -425,24 +425,24 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       ...s,
       ...e
     });
-    for (const { value: S, label: w } of g) {
-      const b = l(S, t, "canvas"), k = w.split(`
+    for (const { value: S, label: C } of g) {
+      const w = l(S, t, "canvas"), b = C.split(`
 `);
-      for (let C = 0; C < k.length; C++)
-        r.fillText(k[C], b, x + i * 2 + C * v);
+      for (let k = 0; k < b.length; k++)
+        r.fillText(b[k], w, x + i * 2 + k * v);
     }
     r.restore();
   },
-  [o, t, s, e]
-), null), ge = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: n, ticks: o }) => (z(
+  [n, t, s, e]
+), null), ge = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: o, ticks: n }) => (z(
   ({ getCtx: a, valToPos: l, getScale: d, getFrame: u }) => {
     const r = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "y") return;
-    const f = p.axis, h = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, i = window.devicePixelRatio || 1, m = h, y = (n ?? 6) * i, x = f.position === "left" ? h - y : h + y, v = (c ?? 12) * i, g = Array.isArray(o) ? o : o({ ...p, axis: f }, u());
+    const f = p.axis, h = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, i = h, m = o ?? 6, y = f.position === "left" ? h - m : h + m, x = c ?? 12, v = Array.isArray(n) ? n : n({ ...p, axis: f }, u());
     r.save(), r.fontKerning = "auto", R(r, { ...s }), r.beginPath();
-    for (const { value: S } of g) {
-      const w = l(S, t, "canvas");
-      r.moveTo(m, w), r.lineTo(x, w);
+    for (const { value: g } of v) {
+      const S = l(g, t, "canvas");
+      r.moveTo(i, S), r.lineTo(y, S);
     }
     r.stroke(), r.restore(), r.save(), R(r, {
       textBaseline: "middle",
@@ -450,15 +450,15 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       ...s,
       ...e
     });
-    for (const { value: S, label: w } of g) {
-      const b = l(S, t, "canvas"), k = w.split(`
+    for (const { value: g, label: S } of v) {
+      const C = l(g, t, "canvas"), w = S.split(`
 `);
-      for (let C = 0; C < k.length; C++)
-        r.fillText(` ${k[C]} `, x, b + C * v);
+      for (let b = 0; b < w.length; b++)
+        r.fillText(` ${w[b]} `, y, C + b * x);
     }
     r.restore();
   },
-  [o, t, s, e]
+  [n, t, s, e]
 ), null), E = () => {
   const t = [];
   return {
@@ -466,7 +466,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       syncKey: s,
       callback: e
     }), () => {
-      const c = t.findIndex((n) => n.callback === e);
+      const c = t.findIndex((o) => o.callback === e);
       c !== -1 && t.splice(c, 1);
     }),
     dispatchEvent: (s, e) => {
@@ -490,25 +490,25 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
   sync_mouseup: E(),
   sync_spanselect: E(),
   sync_pressandwheel: E()
-}, M = (t, s, e) => {
+}, P = (t, s, e) => {
   const c = Z.useRef(e);
   c.current = e, Z.useEffect(() => T[t].addEventListener(
     s,
-    (o, a) => {
-      c.current(a, o);
+    (n, a) => {
+      c.current(a, n);
     }
   ), [s, t, c]);
-}, ft = Z.createContext(""), mt = (t, s) => {
-  const e = Z.useContext(ft);
-  return M(t, e, s);
-}, Bt = (t, s, e, c, n) => {
+}, mt = Z.createContext(""), pt = (t, s) => {
+  const e = Z.useContext(mt);
+  return P(t, e, s);
+}, Bt = (t, s, e, c, o) => {
   if (!s) return;
-  const o = c ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
-  if (!o || !a)
+  const n = c ?? e.scales.find((p) => p.origin === "x")?.id, a = o ?? e.scales.find((p) => p.origin === "y")?.id;
+  if (!n || !a)
     return;
   const l = t.clientX - s.left, d = {
-    scaleId: o,
-    value: D(e, l, o, "css")
+    scaleId: n,
+    value: D(e, l, n, "css")
   }, u = t.clientY - s.top, r = {
     scaleId: a,
     value: D(e, u, a, "css")
@@ -530,13 +530,13 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     cssX: e,
     cssY: c,
     scaled: Object.fromEntries(
-      s.scales.map((n) => {
-        const o = n.origin === "y" ? c : e;
-        return [n.id, D(s, o, n.id, "css")];
+      s.scales.map((o) => {
+        const n = o.origin === "y" ? c : e;
+        return [o.id, D(s, n, o.id, "css")];
       })
     )
   };
-}, xt = (t, s, e) => {
+}, gt = (t, s, e) => {
   if (!s) {
     const a = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, l = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
     return {
@@ -545,7 +545,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       scaled: e.scales.flatMap((d) => {
         if (d.origin !== t)
           return [];
-        const { min: u, max: r } = P(e, d.id);
+        const { min: u, max: r } = A(e, d.id);
         return [{ scaleId: d.id, from: u, to: r }];
       })
     };
@@ -555,16 +555,16 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     s.from,
     s.scaleId,
     "css"
-  ), n = j(
+  ), o = j(
     e,
     s.to,
     s.scaleId,
     "css"
-  ), o = e.scales.flatMap(
+  ), n = e.scales.flatMap(
     (a) => {
       if (a.origin !== t)
         return [];
-      const l = D(e, c, a.id, "css"), d = D(e, n, a.id, "css");
+      const l = D(e, c, a.id, "css"), d = D(e, o, a.id, "css");
       return [
         {
           scaleId: a.id,
@@ -576,16 +576,16 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
   );
   return {
     fromCSS: c,
-    toCSS: n,
-    scaled: o
+    toCSS: o,
+    scaled: n
   };
 }, Se = ({
   id: t,
   onClick: s,
   onDblClick: e,
   onMouseMove: c,
-  onMouseDown: n,
-  onMouseUp: o,
+  onMouseDown: o,
+  onMouseUp: n,
   onDocumentMouseUp: a,
   onSpanSelect: l,
   className: d,
@@ -594,21 +594,21 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
   children: p
 }) => {
   const f = Rt(), h = t || f;
-  return M("dblclick", h, (i) => {
+  return P("dblclick", h, (i) => {
     e?.(i);
-  }), M("click", h, (i) => {
+  }), P("click", h, (i) => {
     s?.(i);
-  }), M("move", h, (i) => {
+  }), P("move", h, (i) => {
     c?.(i);
-  }), M("mousedown", h, (i) => {
-    n?.(i);
-  }), M("mouseup", h, (i) => {
+  }), P("mousedown", h, (i) => {
     o?.(i);
-  }), M("documentmouseup", h, (i) => {
+  }), P("mouseup", h, (i) => {
+    n?.(i);
+  }), P("documentmouseup", h, (i) => {
     a?.(i);
-  }), M("spanselect", h, (i) => {
+  }), P("spanselect", h, (i) => {
     l?.(i);
-  }), /* @__PURE__ */ at(ft.Provider, { value: h, children: [
+  }), /* @__PURE__ */ at(mt.Provider, { value: h, children: [
     /* @__PURE__ */ X(
       Nt,
       {
@@ -620,9 +620,9 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     p
   ] });
 }, Nt = ({ className: t, style: s, sync: e }) => {
-  const c = L(null), n = ht(), o = L(n);
-  o.current = n;
-  const a = lt(ft), l = e?.key || a, d = L(null), u = L(null), r = L(null), p = () => {
+  const c = L(null), o = ft(), n = L(o);
+  n.current = o;
+  const a = lt(mt), l = e?.key || a, d = L(null), u = L(null), r = L(null), p = () => {
     const i = c.current?.parentElement;
     if (i) {
       if (i.dataset.canplotroot === void 0)
@@ -635,7 +635,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     const y = Bt(
       i,
       p(),
-      o.current,
+      n.current,
       e?.xViaScaleId,
       e?.yViaScaleId
     );
@@ -657,7 +657,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
         ...S,
         completed: !0
       }), T.documentmouseup.dispatchEvent(l, {
-        frame: o.current,
+        frame: n.current,
         keys: {
           ctrlKey: g.ctrlKey,
           altKey: g.altKey,
@@ -671,49 +671,49 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
         altKey: g.altKey,
         shiftKey: g.shiftKey,
         metaKey: g.metaKey
-      }, w = r.current;
-      if (w && Object.entries(S).some(
-        ([k, C]) => w.keys[k] !== C
+      }, C = r.current;
+      if (C && Object.entries(S).some(
+        ([b, k]) => C.keys[b] !== k
       )) {
-        const k = { ...w, keys: S };
-        r.current = k, T.sync_move.dispatchEvent(l, k);
+        const b = { ...C, keys: S };
+        r.current = b, T.sync_move.dispatchEvent(l, b);
       }
-      const b = u.current;
-      if (b && Object.entries(S).some(
-        ([k, C]) => b.keys[k] !== C
+      const w = u.current;
+      if (w && Object.entries(S).some(
+        ([b, k]) => w.keys[b] !== k
       )) {
         g.stopPropagation(), g.preventDefault();
-        const k = { ...b, keys: S };
-        u.current = k, T.sync_spanselect.dispatchEvent(
+        const b = { ...w, keys: S };
+        u.current = b, T.sync_spanselect.dispatchEvent(
           l,
-          k
+          b
         );
       }
     }, y = (g) => {
       h.current(
         g,
-        (S, { cssX: w, cssY: b }, k) => {
-          const C = d.current;
-          if (!C || !S.x || !S.y) return;
-          const _ = o.current, A = C.xRangeCss.start, B = w, F = C.yRangeCss.start, et = b, st = P(_, S.x.scaleId), nt = P(_, S.y.scaleId);
+        (S, { cssX: C, cssY: w }, b) => {
+          const k = d.current;
+          if (!k || !S.x || !S.y) return;
+          const _ = n.current, M = k.xRangeCss.start, B = C, F = k.yRangeCss.start, et = w, st = A(_, S.x.scaleId), nt = A(_, S.y.scaleId);
           d.current = {
-            xRangeCss: { start: A, end: B },
+            xRangeCss: { start: M, end: B },
             yRangeCss: { start: F, end: et }
           };
           let U = "none";
-          const ot = Math.abs(F - et), ct = Math.abs(A - B);
+          const ot = Math.abs(F - et), ct = Math.abs(M - B);
           ot < 10 && ct < 10 ? U = "none" : ot > 30 && ct > 30 ? U = "box" : ot > ct ? U = "y" : U = "x";
           const Tt = U === "x" || U === "box" ? {
             scaleId: st.id,
             from: D(
               _,
-              O(o.current, A, "css"),
+              O(n.current, M, "css"),
               st.id,
               "css"
             ),
             to: D(
               _,
-              O(o.current, B, "css"),
+              O(n.current, B, "css"),
               st.id,
               "css"
             )
@@ -721,40 +721,40 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
             scaleId: nt.id,
             from: D(
               _,
-              $(o.current, F, "css"),
+              $(n.current, F, "css"),
               nt.id,
               "css"
             ),
             to: D(
               _,
-              $(o.current, et, "css"),
+              $(n.current, et, "css"),
               nt.id,
               "css"
             )
-          } : void 0, yt = {
+          } : void 0, xt = {
             mode: U,
             xRange: Tt,
             yRange: kt,
             completed: !1,
-            keys: k
+            keys: b
           };
-          u.current = yt, T.sync_spanselect.dispatchEvent(
+          u.current = xt, T.sync_spanselect.dispatchEvent(
             l,
-            yt
+            xt
           );
         }
       );
     }, x = (g) => {
-      h.current(g, (S, w, b) => {
-        if (Object.values(b).some((C) => C)) {
+      h.current(g, (S, C, w) => {
+        if (Object.values(w).some((k) => k)) {
           g.preventDefault();
-          const C = Math.abs(g.deltaY) > Math.abs(g.deltaX) ? g.deltaY : g.deltaX;
+          const k = Math.abs(g.deltaY) > Math.abs(g.deltaX) ? g.deltaY : g.deltaX;
           T.sync_pressandwheel.dispatchEvent(l, {
             positions: S,
-            keys: b,
+            keys: w,
             deltaX: g.deltaX,
             deltaY: g.deltaY,
-            deltaAbs: C
+            deltaAbs: k
           });
         }
       });
@@ -766,66 +766,66 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     }), () => {
       document.removeEventListener("mouseup", i), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", y), v?.removeEventListener("wheel", x);
     };
-  }, [o, l, h]), M("sync_dblclick", l, (i) => {
+  }, [n, l, h]), P("sync_dblclick", l, (i) => {
     const m = Y(
       i.positions,
-      o.current
+      n.current
     );
     m && T.dblclick.dispatchEvent(a, {
-      frame: o.current,
+      frame: n.current,
       pointer: m,
       keys: i.keys
     });
-  }), M("sync_click", l, (i) => {
+  }), P("sync_click", l, (i) => {
     const m = Y(
       i.positions,
-      o.current
+      n.current
     );
     m && T.click.dispatchEvent(a, {
-      frame: o.current,
+      frame: n.current,
       pointer: m,
       keys: i.keys
     });
-  }), M("sync_move", l, (i) => {
+  }), P("sync_move", l, (i) => {
     const m = i.positions ? Y(
       i.positions,
-      o.current
+      n.current
     ) : null;
     r.current = i, T.move.dispatchEvent(a, {
-      frame: o.current,
+      frame: n.current,
       pointer: m ?? null,
       keys: i.keys
     });
-  }), M("sync_mousedown", l, (i) => {
+  }), P("sync_mousedown", l, (i) => {
     const m = Y(
       i.positions,
-      o.current
+      n.current
     );
     m && T.mousedown.dispatchEvent(a, {
-      frame: o.current,
+      frame: n.current,
       pointer: m,
       keys: i.keys
     });
-  }), M("sync_mouseup", l, (i) => {
+  }), P("sync_mouseup", l, (i) => {
     const m = Y(
       i.positions,
-      o.current
+      n.current
     );
     m && T.mouseup.dispatchEvent(a, {
-      frame: o.current,
+      frame: n.current,
       pointer: m,
       keys: i.keys
     });
-  }), M(
+  }), P(
     "sync_pressandwheel",
     l,
     (i) => {
       const m = Y(
         i.positions,
-        o.current
+        n.current
       );
       m && T.pressandwheel.dispatchEvent(a, {
-        frame: o.current,
+        frame: n.current,
         pointer: m,
         keys: i.keys,
         deltaX: i.deltaX,
@@ -833,19 +833,19 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
         deltaAbs: i.deltaAbs
       });
     }
-  ), M("sync_spanselect", l, (i) => {
-    const m = xt(
+  ), P("sync_spanselect", l, (i) => {
+    const m = gt(
       "x",
       i.xRange,
-      o.current
-    ), y = xt(
+      n.current
+    ), y = gt(
       "y",
       i.yRange,
-      o.current
+      n.current
     ), x = m.scaled, v = y.scaled;
     i.completed && (d.current = null), T.spanselect.dispatchEvent(a, {
       mode: i.mode,
-      frame: o.current,
+      frame: n.current,
       xRanges: x,
       yRanges: v,
       completed: i.completed,
@@ -861,10 +861,10 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       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
       },
@@ -936,11 +936,11 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
     }
   );
 }, ve = ({ data: t, renderTooltip: s, xScaleId: e }) => {
-  const [c, n] = N(null);
-  mt("move", (a) => {
-    n(a);
+  const [c, o] = N(null);
+  pt("move", (a) => {
+    o(a);
   });
-  const o = St(() => {
+  const n = ut(() => {
     if (!c)
       return null;
     const { frame: a, pointer: l } = c, d = l?.scaled[e];
@@ -957,7 +957,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
         x < h && (h = x, f = m);
       }
       const i = p.points[f ?? -1];
-      if (!i || ut(a, h, e, "css") > 30) {
+      if (!i || dt(a, h, e, "css") > 30) {
         u.push({ seriesId: p.seriesId, y: null });
         continue;
       }
@@ -972,20 +972,20 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
       points: u
     };
   }, [t, c, e]);
-  return s(o);
+  return s(n);
 }, we = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: c }) => {
-  const [n, o] = N(null);
-  if (mt("move", (r) => {
-    o(r);
-  }), !n)
+  const [o, n] = N(null);
+  if (pt("move", (r) => {
+    n(r);
+  }), !o)
     return null;
-  const { frame: a, pointer: l } = n, d = O(a, l?.cssX ?? 0, "css"), u = $(a, l?.cssY ?? 0, "css");
+  const { frame: a, pointer: l } = o, d = O(a, l?.cssX ?? 0, "css"), u = $(a, l?.cssY ?? 0, "css");
   return /* @__PURE__ */ at(Et, { children: [
     /* @__PURE__ */ X(
       "div",
       {
         "data-show": !!l,
-        className: s?.(n),
+        className: s?.(o),
         style: {
           position: "absolute",
           left: 0,
@@ -997,14 +997,14 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
           pointerEvents: "none",
           opacity: l ? 1 : 0,
           transform: `translateX(${d}px)`,
-          ...t?.(n)
+          ...t?.(o)
         }
       }
     ),
     /* @__PURE__ */ X(
       "div",
       {
-        className: c?.(n),
+        className: c?.(o),
         "data-show": !!l,
         style: {
           position: "absolute",
@@ -1016,80 +1016,84 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
           pointerEvents: "none",
           opacity: l ? 1 : 0,
           transform: `translateY(${u}px)`,
-          ...e?.(n)
+          ...e?.(o)
         }
       }
     )
   ] });
-}, Ce = ({ makeClassName: t, makeStyle: s }) => {
+}, be = ({ makeClassName: t, makeStyle: s }) => {
   const [e, c] = N(null);
-  if (mt("spanselect", (f) => {
-    c(f.mode === "none" || f.completed ? null : f);
-  }), !e)
-    return null;
-  const n = O(
-    e.frame,
-    e.x.fromCSS,
-    "css"
-  ), o = O(
-    e.frame,
-    e.x.toCSS,
-    "css"
-  ), a = $(
-    e.frame,
-    e.y.fromCSS,
-    "css"
-  ), l = $(
-    e.frame,
-    e.y.toCSS,
-    "css"
-  ), d = Math.min(n, o), u = Math.min(a, l), r = Math.abs(o - n), p = Math.abs(l - a);
+  pt("spanselect", (n) => {
+    c(n.mode === "none" || n.completed ? null : n);
+  });
+  const o = ut(() => {
+    if (!e)
+      return null;
+    const n = O(
+      e.frame,
+      e.x.fromCSS,
+      "css"
+    ), a = O(
+      e.frame,
+      e.x.toCSS,
+      "css"
+    ), l = $(
+      e.frame,
+      e.y.fromCSS,
+      "css"
+    ), d = $(
+      e.frame,
+      e.y.toCSS,
+      "css"
+    ), u = Math.min(n, a), r = Math.min(l, d), p = Math.abs(a - n), f = Math.abs(d - l);
+    return { leftPx: u, topPx: r, widthPx: p, heightPx: f };
+  }, [e]);
   return /* @__PURE__ */ X(
     "div",
     {
-      className: t?.(e),
+      className: e ? t?.(e) : void 0,
       style: {
         position: "absolute",
-        backgroundColor: "#0000ff22",
-        left: `${d}px`,
-        top: `${u}px`,
-        width: `${r}px`,
-        height: `${p}px`,
+        visibility: e ? "visible" : "hidden",
+        left: `${o?.leftPx ?? 0}px`,
+        top: `${o?.topPx ?? 0}px`,
+        width: `${o?.widthPx ?? 0}px`,
+        height: `${o?.heightPx ?? 0}px`,
         pointerEvents: "none",
-        ...s?.(e)
+        ...e ? s?.(e) : void 0
       }
     }
   );
-}, be = ({ style: t, children: s, scaleId: e, ...c }) => {
-  const n = ht((o) => o.getScale(e)?.axis);
-  return n ? /* @__PURE__ */ X(
+}, Ce = ({ style: t, children: s, scaleId: e, ...c }) => {
+  const o = ft((n) => n.getScale(e)?.axis);
+  return o ? /* @__PURE__ */ X(
     "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
       },
       ...c,
       children: s
     }
   ) : null;
-}, wt = 60, Vt = 30, Ct = "UTC", jt = "en-GB", Te = ({
+}, wt = 60, Vt = 30, bt = "UTC", jt = "en-GB", Te = ({
   space: t,
   formatter: s
 } = {}) => (e, c) => {
-  const { min: n, max: o } = e, a = [], l = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? wt : Vt)) * l, u = Lt(
+  const { min: o, max: n } = e, a = [], l = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? wt : Vt)) * l, u = Lt(
     c,
     d,
     e.id,
     "canvas"
   ), r = H.find((f) => f > u) ?? 1;
-  let p = n % r < Number.EPSILON ? n : n + r - n % r;
-  for (; p <= o; )
+  let p = o % r < Number.EPSILON ? o : o + r - o % r;
+  for (; p <= n; )
     a.push(p), p += r;
   return (s ?? Ht)(a);
 }, Ht = (t) => {
@@ -1098,7 +1102,7 @@ const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) =>
 }, H = [];
 for (let t = -12; t <= 12; t++)
   H.push(1 * 10 ** t), H.push(2 * 10 ** t), H.push(5 * 10 ** t);
-const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Gt = 30 * tt, Zt = 365 * tt, Jt = [
+const Wt = 1, Ct = 1e3 * Wt, yt = 60 * Ct, q = 60 * yt, tt = 24 * q, Gt = 30 * tt, Zt = 365 * tt, Jt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1156,9 +1160,9 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Gt = 30 * t
     case "milliseconds":
       return s;
     case "seconds":
-      return s * bt;
+      return s * Ct;
     case "minutes":
-      return s * pt;
+      return s * yt;
     case "hours":
       return s * q;
     case "days":
@@ -1183,7 +1187,7 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Gt = 30 * t
 }, se = (t, s) => {
   const e = new Date(t);
   return e.setUTCDate(e.getUTCDate() + s), e.getTime();
-}, gt = (t, s) => {
+}, St = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
 }, I = (t, s) => {
@@ -1200,43 +1204,43 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Gt = 30 * t
     case "days":
       return se(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), c = new Date(e.toLocaleString("en-US", { timeZone: s })), n = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
-  return (c.getTime() - n.getTime()) / (3600 * 1e3);
+  const e = new Date(t), c = new Date(e.toLocaleString("en-US", { timeZone: s })), o = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
+  return (c.getTime() - o.getTime()) / (3600 * 1e3);
 }
 const ne = (t, s, e = "UTC") => {
-  const [c, n] = s;
-  let o = new Date(t);
+  const [c, o] = s;
+  let n = new Date(t);
   const a = () => {
-    o.setUTCHours(-G(o, e), 0, 0, 0);
+    n.setUTCHours(-G(n, e), 0, 0, 0);
   };
-  switch (n) {
+  switch (o) {
     case "milliseconds":
-      o.setUTCMilliseconds(
-        Math.ceil(o.getUTCMilliseconds() / c) * c
+      n.setUTCMilliseconds(
+        Math.ceil(n.getUTCMilliseconds() / c) * c
       );
       break;
     case "seconds":
-      o.setUTCSeconds(
-        Math.ceil(o.getUTCSeconds() / c) * c,
+      n.setUTCSeconds(
+        Math.ceil(n.getUTCSeconds() / c) * c,
         0
       );
       break;
     case "minutes":
-      o.setUTCMinutes(
-        Math.ceil(o.getTime() % q / pt / c) * c,
+      n.setUTCMinutes(
+        Math.ceil(n.getTime() % q / yt / c) * c,
         0,
         0
       );
       break;
     case "hours":
-      o.setUTCHours(
-        Math.ceil(o.getTime() % tt / q / c) * c,
+      n.setUTCHours(
+        Math.ceil(n.getTime() % tt / q / c) * c,
         0,
         0,
         0
@@ -1245,18 +1249,18 @@ const ne = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      n === "months" ? o.setUTCDate(1) : n === "years" && o.setUTCMonth(0, 1), a(), o.getTime() < t && (o = new Date(I(o, [1, n])));
+      o === "months" ? n.setUTCDate(1) : o === "years" && n.setUTCMonth(0, 1), a(), n.getTime() < t && (n = new Date(I(n, [1, o])));
       break;
   }
-  return o.getTime();
+  return n.getTime();
 }, ke = ({
-  timeZone: t = Ct,
+  timeZone: t = bt,
   space: s = wt,
   formatter: e,
   locale: c,
-  showTimezone: n
-} = {}) => (o, a) => {
-  const { min: l, max: d } = o, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - l) / u, [f, h] = Jt.find(
+  showTimezone: o
+} = {}) => (n, a) => {
+  const { min: l, max: d } = n, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - l) / u, [f, h] = Jt.find(
     (v) => W(v) >= p
   ) ?? [1, "milliseconds"], i = ne(l, [f, h], t), m = G(i, t), y = [i];
   let x;
@@ -1302,11 +1306,11 @@ const ne = (t, s, e = "UTC") => {
   }
   return (e ?? oe({
     locale: c,
-    showTimezone: n,
+    showTimezone: o,
     timeZone: t
   }))(y);
 }, K = (t, s, e) => t.find((c) => c.type === e)?.value !== s.find((c) => c.type === e)?.value, oe = ({
-  timeZone: t = Ct,
+  timeZone: t = bt,
   locale: s = jt,
   showTimezone: e = !0
 }) => {
@@ -1322,31 +1326,31 @@ const ne = (t, s, e = "UTC") => {
     timeZoneName: "short",
     timeZone: t
   });
-  return (n) => {
-    const o = n[1] - n[0], a = o < W([1, "days"]), l = o < W([1, "minutes"]), d = o < W([1, "seconds"]);
-    return n.map((u) => ({ value: u, label: c.formatToParts(new Date(u)) })).map((u, r, p) => {
-      const f = p[r - 1], h = r === 0 || K(u.label, f.label, "year"), i = r === 0 || K(u.label, f.label, "day"), m = r === 0 || K(u.label, f.label, "month"), y = r === 0 || K(u.label, f.label, "hour"), x = r === 0 || K(u.label, f.label, "timeZoneName"), v = r === 0 || K(u.label, f.label, "minute"), g = r === 0 || K(u.label, f.label, "second"), S = r === 0 || K(u.label, f.label, "fractionalSecond"), w = [];
+  return (o) => {
+    const n = o[1] - o[0], a = n < W([1, "days"]), l = n < W([1, "minutes"]), d = n < W([1, "seconds"]);
+    return o.map((u) => ({ value: u, label: c.formatToParts(new Date(u)) })).map((u, r, p) => {
+      const f = p[r - 1], h = r === 0 || K(u.label, f.label, "year"), i = r === 0 || K(u.label, f.label, "day"), m = r === 0 || K(u.label, f.label, "month"), y = r === 0 || K(u.label, f.label, "hour"), x = r === 0 || K(u.label, f.label, "timeZoneName"), v = r === 0 || K(u.label, f.label, "minute"), g = r === 0 || K(u.label, f.label, "second"), S = r === 0 || K(u.label, f.label, "fractionalSecond"), C = [];
       if (a && (y || v || x || g || S)) {
-        const b = u.label.find((A) => A.type === "hour")?.value, k = u.label.find((A) => A.type === "minute")?.value, C = u.label.find((A) => A.type === "timeZoneName")?.value;
+        const w = u.label.find((M) => M.type === "hour")?.value, b = u.label.find((M) => M.type === "minute")?.value, k = u.label.find((M) => M.type === "timeZoneName")?.value;
         let _ = "";
         if (l) {
-          const A = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
+          const M = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
             (F) => F.type === "fractionalSecond"
           )?.value;
-          _ = `:${A}` + (d ? `.${B}` : "");
+          _ = `:${M}` + (d ? `.${B}` : "");
         }
-        w.push(
-          `${b}:${k}${_}` + (e && x ? ` ${C}` : "")
+        C.push(
+          `${w}:${b}${_}` + (e && x ? ` ${k}` : "")
         );
       }
-      return (i || m) && w.push(
+      return (i || m) && C.push(
         [
-          u.label.find((b) => b.type === "month")?.value,
-          i && u.label.find((b) => b.type === "day")?.value
+          u.label.find((w) => w.type === "month")?.value,
+          i && u.label.find((w) => w.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), h && w.push(u.label.find((b) => b.type === "year")?.value), {
+      ), h && C.push(u.label.find((w) => w.type === "year")?.value), {
         value: u.value,
-        label: w.filter((b) => b).join(`
+        label: C.filter((w) => w).join(`
 `)
       };
     });
@@ -1354,14 +1358,14 @@ const ne = (t, s, e = "UTC") => {
 };
 export {
   me as AreaPlot,
-  be as AxisOverlay,
+  Ce as AxisOverlay,
   fe as BarPlot,
   ue as CanPlot,
   Se as ChartAreaInteractions,
   we as Crosshair,
   de as LinePlot,
   he as ScatterPlot,
-  Ce as SelectBox,
+  be as SelectBox,
   pe as SparklinePlot,
   ve as TooltipsX,
   xe as XTicks,
@@ -1371,7 +1375,7 @@ export {
   O as clampXPosToChartArea,
   $ as clampYPosToChartArea,
   Ht as defaultNumericalTicksFormatter,
-  P as getScale,
+  A as getScale,
   Q as isXScale,
   ae as isYScale,
   Te as makeLinearTicks,
@@ -1380,10 +1384,10 @@ export {
   D as posToVal,
   Lt as pxToValDistance,
   z as useDrawEffect,
-  ht as useFrameState,
+  ft as useFrameState,
   ye as useXPositioned,
   it as valFits,
   j as valToPos,
-  ut as valToPxDistance
+  dt as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map