@canplot/react 0.1.23 → 0.1.24

package/dist/canplot.mjs

@@ -1,4 +1,4 @@
-import { jsxs as Ct, jsx as k, Fragment as Ut } from "react/jsx-runtime";
+import { jsxs as ft, jsx as A, Fragment as Ut } from "react/jsx-runtime";
 import Q, { createContext as Mt, useContext as tt, useRef as _, useLayoutEffect as z, useEffect as Et, version as Xt, forwardRef as Kt, useMemo as et, useState as V, useId as Ot } from "react";
 import { createStore as Pt, useStore as kt } from "zustand";
 const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t) => e + (t ?? 0), 0), pe = (n, e) => {
@@ -7,8 +7,8 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     Math.abs(n[s] - e) < Math.abs(n[t] - e) && (t = s);
   return t;
 }, Ft = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, h = (r === "x" ? l.width : l.height) / (i - o);
-  return e / h;
+  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = (r === "x" ? l.width : l.height) / (i - o);
+  return e / d;
 }, I = (n, e) => {
   const t = n.scales.find((s) => s.id === e);
   if (!t)
@@ -17,11 +17,11 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
 }, D = (n, e) => {
   const t = window.devicePixelRatio || 1;
   n.lineCap = e?.lineCap ?? "butt", n.lineDashOffset = t * (e?.lineDashOffset ?? 0), n.lineJoin = e?.lineJoin ?? "miter", n.lineWidth = t * (e?.lineWidth ?? 1), n.miterLimit = t * (e?.miterLimit ?? 10), n.strokeStyle = e?.strokeStyle ?? "black", n.fillStyle = e?.fillStyle ?? n.strokeStyle, n.font = e?.font ?? `${10 * t}px sans-serif`, n.textAlign = e?.textAlign ?? "start", n.direction = e?.direction ?? "inherit", n.textBaseline = e?.textBaseline ?? "alphabetic", n.fontKerning = e?.fontKerning ?? "auto";
-}, ft = (n, e, t, s) => {
-  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: l } = I(n, t), h = (l === "x" ? o.width : o.height) / (r - i);
-  return e * h;
+}, mt = (n, e, t, s) => {
+  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: l } = I(n, t), d = (l === "x" ? o.width : o.height) / (r - i);
+  return e * d;
 }, H = (n, e, t, s) => {
-  const { min: o, origin: i } = I(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, l = ft(n, e - o, t, s);
+  const { min: o, origin: i } = I(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, l = mt(n, e - o, t, s);
   return i === "x" ? j(
     r.x + l,
     r.x - 10 * r.width,
@@ -44,8 +44,8 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
   const { min: s, max: o } = I(n, t);
   return e >= s && e <= o;
 }, L = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, h = r === "x" ? (e - l.x) / l.width : (l.height - e + l.y) / l.height;
-  return o + h * (i - o);
+  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = r === "x" ? (e - l.x) / l.width : (l.height - e + l.y) / l.height;
+  return o + d * (i - o);
 }, zt = (n) => {
   const { ctx: e, scales: t } = n;
   for (const s of t) {
@@ -88,7 +88,7 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     clampXPosToChartArea: (s, o) => Y(t(), s, o ?? "canvas"),
     clampYPosToChartArea: (s, o) => B(t(), s, o ?? "canvas"),
     valToPos: (s, o, i) => H(t(), s, o, i ?? "canvas"),
-    valToPxDistance: (s, o, i) => ft(
+    valToPxDistance: (s, o, i) => mt(
       t(),
       s,
       o,
@@ -111,8 +111,8 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
     n((e) => ({ version: e.version + 1 }));
   },
   version: 0
-})), mt = Mt(null), Rt = Mt(null), F = (n, e, t) => {
-  const s = tt(mt), o = tt(Rt);
+})), pt = Mt(null), Rt = Mt(null), F = (n, e, t) => {
+  const s = tt(pt), o = tt(Rt);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
   const i = _(e);
@@ -126,8 +126,8 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t)
   )), [s, n]), Et(() => {
     o.getState().notify();
   }, [o, ...t]);
-}, pt = (n) => {
-  const e = tt(mt);
+}, xt = (n) => {
+  const e = tt(pt);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
   return kt(
@@ -159,32 +159,32 @@ function ht(n, e) {
 }
 var Vt = parseInt(Xt.split(".")[0], 10) >= 19 ? $t : Nt;
 const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) => {
-  const i = _(null), r = _(null), l = Ht(r), h = et(Yt, []), u = et(Bt, []);
+  const i = _(null), r = _(null), l = Ht(r), d = et(Yt, []), u = et(Bt, []);
   z(() => {
-    h.setState({
+    d.setState({
       _frame: Wt(n, l, i.current)
     });
-    const a = h.getState();
+    const a = d.getState();
     a._notifyListeners(a);
-  }, [n, l, i, h]), z(() => h.getState()._subscribe((a) => {
+  }, [n, l, i, d]), z(() => d.getState()._subscribe((a) => {
     const m = a._frame?.ctx;
     m && m.clearRect(0, 0, m.canvas.width, m.canvas.height);
-  }, dt.BACKGROUND), [h]), z(() => h.getState()._subscribe((a) => {
+  }, dt.BACKGROUND), [d]), z(() => d.getState()._subscribe((a) => {
     a._frame && zt(a._frame);
-  }, dt.BOTTOM), [h]), z(() => {
+  }, dt.BOTTOM), [d]), z(() => {
     let a = !1;
     return u.subscribe(() => {
       a || (a = !0, window.requestAnimationFrame(() => {
-        a = !1, h.setState((c) => ({
+        a = !1, d.setState((c) => ({
           _frame: c._frame ? { ...c._frame } : null
         }));
-        const m = h.getState();
+        const m = d.getState();
         m._notifyListeners(m);
       }));
     });
-  }, [u, h]);
-  const f = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ Ct(
+  }, [u, d]);
+  const h = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ ft(
     "div",
     {
       ref: Vt([o, r]),
@@ -196,12 +196,12 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ k(
+        /* @__PURE__ */ A(
           "canvas",
           {
             ref: i,
-            width: l.width * f,
-            height: l.height * f,
+            width: l.width * h,
+            height: l.height * h,
             style: {
               inset: 0,
               position: "absolute",
@@ -210,10 +210,10 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
             }
           }
         ),
-        /* @__PURE__ */ k(
+        /* @__PURE__ */ A(
           jt,
           {
-            frameStore: h,
+            frameStore: d,
             updateRequestStore: u,
             children: e
           }
@@ -221,7 +221,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       ]
     }
   );
-}), jt = ({ frameStore: n, updateRequestStore: e, children: t }) => kt(n, (o) => !!o._frame) ? /* @__PURE__ */ k(Rt.Provider, { value: e, children: /* @__PURE__ */ k(mt.Provider, { value: n, children: t }) }) : null, Ht = (n) => {
+}), jt = ({ frameStore: n, updateRequestStore: e, children: t }) => kt(n, (o) => !!o._frame) ? /* @__PURE__ */ A(Rt.Provider, { value: e, children: /* @__PURE__ */ A(pt.Provider, { value: n, children: t }) }) : null, Ht = (n) => {
   const [e, t] = V({
     width: 0,
     height: 0
@@ -229,7 +229,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     for (const i of o) {
       const r = Math.round(i.contentRect.width), l = Math.round(i.contentRect.height);
       t(
-        (h) => h.width !== r || h.height !== l ? { ...h, width: r, height: l } : h
+        (d) => d.width !== r || d.height !== l ? { ...d, width: r, height: l } : d
       );
     }
   }));
@@ -263,25 +263,25 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     width: i.width * o,
     height: i.height * o
   }, l = [];
-  let h = n.padding.left * o, u = s.canvas.width - n.padding.right * o, f = s.canvas.height - n.padding.bottom * o, a = n.padding.top * o;
+  let d = n.padding.left * o, u = s.canvas.width - n.padding.right * o, h = s.canvas.height - n.padding.bottom * o, a = n.padding.top * o;
   for (const c of n.scales) {
     if (!c.axis) {
       l.push({ ...c, axis: null });
       continue;
     }
-    let p;
+    let x;
     if (c.origin === "x")
       switch (c.axis.position) {
         case "bottom":
-          f -= c.axis.size * o, p = {
+          h -= c.axis.size * o, x = {
             x: i.x,
-            y: f / o,
+            y: h / o,
             width: i.width,
             height: c.axis.size
           };
           break;
         case "top":
-          a += c.axis.size * o, p = {
+          a += c.axis.size * o, x = {
             x: i.x,
             y: a / o - c.axis.size,
             width: i.width,
@@ -295,15 +295,15 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     else
       switch (c.axis.position) {
         case "left":
-          h += c.axis.size * o, p = {
-            x: h / o - c.axis.size,
+          d += c.axis.size * o, x = {
+            x: d / o - c.axis.size,
             y: i.y,
             width: c.axis.size,
             height: i.height
           };
           break;
         case "right":
-          u -= c.axis.size * o, p = {
+          u -= c.axis.size * o, x = {
             x: u / o,
             y: i.y,
             width: c.axis.size,
@@ -314,18 +314,18 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const d = {
-      x: p.x * o,
-      y: p.y * o,
-      width: p.width * o,
-      height: p.height * o
+    const f = {
+      x: x.x * o,
+      y: x.y * o,
+      width: x.width * o,
+      height: x.height * o
     };
     l.push({
       ...c,
       axis: {
         ...c.axis,
-        cssRect: p,
-        canvasRect: d
+        cssRect: x,
+        canvasRect: f
       }
     });
   }
@@ -339,11 +339,11 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   };
 }, ve = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
   n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: h }) => {
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: d }) => {
     const u = i();
     u.save(), u.beginPath(), D(u, o);
-    for (const f of e) {
-      const a = r(h(f.x, t)), m = l(h(f.y, s));
+    for (const h of e) {
+      const a = r(d(h.x, t)), m = l(d(h.y, s));
       u.lineTo(a, m);
     }
     u.stroke(), u.restore();
@@ -351,21 +351,21 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   [e, t, s, o]
 ), null), ge = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (F(
   n,
-  ({ getCtx: l, valToPos: h, valFits: u }) => {
-    const f = l();
-    f.save(), f.beginPath();
+  ({ getCtx: l, valToPos: d, valFits: u }) => {
+    const h = l();
+    h.save(), h.beginPath();
     const a = new Path2D();
-    D(f, i), r !== void 0 && (f.globalAlpha = r);
+    D(h, i), r !== void 0 && (h.globalAlpha = r);
     for (const m of e) {
       if (!u(m.x, t) || !u(m.y, s))
         continue;
-      const c = h(m.x, t), p = h(m.y, s);
-      a.moveTo(c + o, p), a.arc(c, p, o, 0, Math.PI * 2);
+      const c = d(m.x, t), x = d(m.y, s);
+      a.moveTo(c + o, x), a.arc(c, x, o, 0, Math.PI * 2);
     }
-    f.fill(a), f.stroke(a), f.restore();
+    h.fill(a), h.stroke(a), h.restore();
   },
   [e, t, s, o, i, r]
-), null), be = ({
+), null), we = ({
   data: n,
   xScaleId: e,
   yScaleId: t,
@@ -377,72 +377,72 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
 }) => (F(
   l,
   ({
-    getCtx: h,
+    getCtx: d,
     valToPxDistance: u,
-    valToPos: f,
+    valToPos: h,
     clampXPosToChartArea: a,
     clampYPosToChartArea: m
   }) => {
     if (n.length === 0) return;
-    const c = h();
+    const c = d();
     c.save(), D(c, s);
-    const p = u(o, e);
+    const x = u(o, e);
     c.beginPath();
-    for (const d of n) {
-      const v = f(d.x, e) - p / 2 + i * p, g = m(f(0, t)), S = m(f(d.y, t)), y = g - S, b = a(v), w = a(v + p) - b;
+    for (const f of n) {
+      const v = h(f.x, e) - x / 2 + i * x, g = m(h(0, t)), S = m(h(f.y, t)), y = g - S, w = a(v), b = a(v + x) - w;
       r ? c.roundRect(
-        b,
-        S,
         w,
+        S,
+        b,
         y,
         r
-      ) : c.rect(b, S, w, y);
+      ) : c.rect(w, S, b, y);
     }
     c.closePath(), c.fill(), s?.strokeStyle && c.stroke(), c.restore();
   },
   [n, e, t, s, o, i, r]
-), null), we = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
+), null), be = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
   n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: h }) => {
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: d }) => {
     const u = [];
     for (const a of e) {
-      const m = r(h(a.x, t)), c = l(h(a.y[0], s)), p = l(h(a.y[1], s));
-      u.push({ x: m, y: c }), u.unshift({ x: m, y: p });
+      const m = r(d(a.x, t)), c = l(d(a.y[0], s)), x = l(d(a.y[1], s));
+      u.push({ x: m, y: c }), u.unshift({ x: m, y: x });
     }
-    const f = i();
+    const h = i();
     if (u.length > 0) {
-      f.save(), f.beginPath(), D(f, o), f.moveTo(u[0].x, u[0].y);
+      h.save(), h.beginPath(), D(h, o), h.moveTo(u[0].x, u[0].y);
       for (const a of u)
-        f.lineTo(a.x, a.y);
-      f.closePath(), f.fill(), f.restore();
+        h.lineTo(a.x, a.y);
+      h.closePath(), h.fill(), h.restore();
     }
   },
   [e, t, s, o]
 ), null), Se = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (F(
   n,
-  ({ getCtx: r, clampXPosToChartArea: l, clampYPosToChartArea: h, valToPos: u }) => {
-    const f = [], a = r();
-    for (const d of e) {
-      const x = l(u(d.x, s)), v = h(u(d.y, o));
-      f.push({ x, y: v });
+  ({ getCtx: r, clampXPosToChartArea: l, clampYPosToChartArea: d, valToPos: u }) => {
+    const h = [], a = r();
+    for (const f of e) {
+      const p = l(u(f.x, s)), v = d(u(f.y, o));
+      h.push({ x: p, y: v });
     }
-    const m = f.at(0), c = f.at(-1);
+    const m = h.at(0), c = h.at(-1);
     if (!m || !c)
       return;
-    const p = h(u(0, o));
-    a.save(), a.beginPath(), D(a, i), a.moveTo(m.x, p);
-    for (const d of f)
-      a.lineTo(d.x, d.y);
-    if (a.lineTo(c.x, p), a.closePath(), a.fill(), t) {
+    const x = d(u(0, o));
+    a.save(), a.beginPath(), D(a, i), a.moveTo(m.x, x);
+    for (const f of h)
+      a.lineTo(f.x, f.y);
+    if (a.lineTo(c.x, x), a.closePath(), a.fill(), t) {
       a.beginPath(), a.moveTo(m.x, m.y);
-      for (const d of f)
-        a.lineTo(d.x, d.y);
+      for (const f of h)
+        a.lineTo(f.x, f.y);
       a.stroke();
     }
     a.restore();
   },
   [e, t, s, o, i]
-), null), Te = (n, e) => pt(
+), null), Te = (n, e) => xt(
   ({
     clampXPosToChartArea: t,
     clampYPosToChartArea: s,
@@ -451,19 +451,19 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     valFits: r
   }) => {
     const l = {};
-    for (const h in n) {
-      const u = n[h];
+    for (const d in n) {
+      const u = n[d];
       switch (u.exceeding) {
         case "discard": {
           if (r(u.value, u.scaleId)) {
-            const f = i(u.value, u.scaleId, e);
-            l[h] = f;
+            const h = i(u.value, u.scaleId, e);
+            l[d] = h;
           }
           break;
         }
         case "clamp": {
-          const f = i(u.value, u.scaleId, e);
-          l[h] = o(u.scaleId)?.origin === "x" ? t(f, e) : s(f, e);
+          const h = i(u.value, u.scaleId, e);
+          l[d] = o(u.scaleId)?.origin === "x" ? t(h, e) : s(h, e);
           break;
         }
       }
@@ -472,17 +472,17 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   }
 ), Ce = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
   n,
-  ({ getCtx: l, valToPos: h, getScale: u, getFrame: f }) => {
+  ({ getCtx: l, valToPos: d, getScale: u, getFrame: h }) => {
     const a = l(), m = u(e);
     if (!m || !m.axis || m.origin !== "x") return;
-    const c = m.axis, p = c.position === "top" ? c.canvasRect.y + c.canvasRect.height : c.canvasRect.y, d = window.devicePixelRatio || 1, x = p, v = (i ?? 6) * d, g = c.position === "top" ? p - v : p + v, S = (o ?? 12) * d;
+    const c = m.axis, x = c.position === "top" ? c.canvasRect.y + c.canvasRect.height : c.canvasRect.y, f = window.devicePixelRatio || 1, p = x, v = (i ?? 6) * f, g = c.position === "top" ? x - v : x + v, S = (o ?? 12) * f;
     a.save(), a.fontKerning = "auto", D(a, {
       ...t
     }), a.beginPath();
-    const y = Array.isArray(r) ? r : r({ ...m, axis: c }, f());
-    for (const { value: b } of y) {
-      const w = h(b, e, "canvas");
-      a.moveTo(w, x), a.lineTo(w, g);
+    const y = Array.isArray(r) ? r : r({ ...m, axis: c }, h());
+    for (const { value: w } of y) {
+      const b = d(w, e, "canvas");
+      a.moveTo(b, p), a.lineTo(b, g);
     }
     a.stroke(), a.restore(), a.save(), D(a, {
       textBaseline: c.position === "top" ? "bottom" : "top",
@@ -490,25 +490,25 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       ...t,
       ...s
     });
-    for (const { value: b, label: w } of y) {
-      const P = h(b, e, "canvas"), T = w.split(`
+    for (const { value: w, label: b } of y) {
+      const P = d(w, e, "canvas"), T = b.split(`
 `);
       for (let M = 0; M < T.length; M++)
-        a.fillText(T[M], P, g + d * 2 + M * S);
+        a.fillText(T[M], P, g + f * 2 + M * S);
     }
     a.restore();
   },
   [r, e, t, s]
 ), null), Me = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
   n,
-  ({ getCtx: l, valToPos: h, getScale: u, getFrame: f }) => {
+  ({ getCtx: l, valToPos: d, getScale: u, getFrame: h }) => {
     const a = l(), m = u(e);
     if (!m || !m.axis || m.origin !== "y") return;
-    const c = m.axis, p = c.position === "left" ? c.canvasRect.x + c.canvasRect.width : c.canvasRect.x, d = p, x = i ?? 6, v = c.position === "left" ? p - x : p + x, g = o ?? 12, S = Array.isArray(r) ? r : r({ ...m, axis: c }, f());
+    const c = m.axis, x = c.position === "left" ? c.canvasRect.x + c.canvasRect.width : c.canvasRect.x, f = x, p = i ?? 6, v = c.position === "left" ? x - p : x + p, g = o ?? 12, S = Array.isArray(r) ? r : r({ ...m, axis: c }, h());
     a.save(), a.fontKerning = "auto", D(a, { ...t }), a.beginPath();
     for (const { value: y } of S) {
-      const b = h(y, e, "canvas");
-      a.moveTo(d, b), a.lineTo(v, b);
+      const w = d(y, e, "canvas");
+      a.moveTo(f, w), a.lineTo(v, w);
     }
     a.stroke(), a.restore(), a.save(), D(a, {
       textBaseline: "middle",
@@ -516,16 +516,16 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       ...t,
       ...s
     });
-    for (const { value: y, label: b } of S) {
-      const w = h(y, e, "canvas"), P = b.split(`
+    for (const { value: y, label: w } of S) {
+      const b = d(y, e, "canvas"), P = w.split(`
 `);
       for (let T = 0; T < P.length; T++)
-        a.fillText(` ${P[T]} `, v, w + T * g);
+        a.fillText(` ${P[T]} `, v, b + T * g);
     }
     a.restore();
   },
   [r, e, t, s]
-), null), R = () => {
+), null), k = () => {
   const n = [];
   return {
     addEventListener: (e, t) => (n.push({
@@ -541,17 +541,17 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     }
   };
 }, E = {
-  dblclick: R(),
-  click: R(),
-  contextmenu: R(),
-  move: R(),
-  mousedown: R(),
-  mouseup: R(),
-  spanselect: R(),
-  documentmouseup: R(),
-  pressandwheel: R(),
-  sync_move: R()
-}, A = (n, e, t) => {
+  dblclick: k(),
+  click: k(),
+  contextmenu: k(),
+  move: k(),
+  mousedown: k(),
+  mouseup: k(),
+  spanselect: k(),
+  documentmouseup: k(),
+  pressandwheel: k(),
+  sync_move: k()
+}, R = (n, e, t) => {
   const s = Q.useRef(t);
   s.current = t, Q.useEffect(() => E[n].addEventListener(
     e,
@@ -559,22 +559,22 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       s.current(r, i);
     }
   ), [e, n, s]);
-}, xt = Q.createContext(""), yt = (n, e) => {
-  const t = Q.useContext(xt);
-  return A(n, t, e);
+}, yt = Q.createContext(""), vt = (n, e) => {
+  const t = Q.useContext(yt);
+  return R(n, t, e);
 }, qt = (n, e, t, s, o) => {
   if (!e) return;
   const i = s ?? t.scales.find((a) => a.origin === "x")?.id, r = o ?? t.scales.find((a) => a.origin === "y")?.id;
   if (!i || !r)
     return;
-  const l = n.clientX - e.left, h = {
+  const l = n.clientX - e.left, d = {
     scaleId: i,
     value: L(t, l, i, "css")
-  }, u = n.clientY - e.top, f = {
+  }, u = n.clientY - e.top, h = {
     scaleId: r,
     value: L(t, u, r, "css")
   };
-  return { pointerSyncPosition: { x: h, y: f }, cssX: l, cssY: u };
+  return { pointerSyncPosition: { x: d, y: h }, cssX: l, cssY: u };
 }, O = (n, e) => {
   const { x: t, y: s } = n, o = t && e.scales.some((r) => r.id === t.scaleId) ? H(e, t.value, t.scaleId, "css") : null, i = s && e.scales.some((r) => r.id === s.scaleId) ? H(e, s.value, s.scaleId, "css") : null;
   return {
@@ -587,7 +587,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
       })
     )
   };
-}, St = (n, e, t) => {
+}, Tt = (n, e, t) => {
   const s = H(
     t,
     e.from,
@@ -602,12 +602,12 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     (r) => {
       if (r.origin !== n)
         return [];
-      const l = L(t, s, r.id, "css"), h = L(t, o, r.id, "css");
+      const l = L(t, s, r.id, "css"), d = L(t, o, r.id, "css");
       return [
         {
           scaleId: r.id,
           from: l,
-          to: h
+          to: d
         }
       ];
     }
@@ -626,74 +626,78 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   onMouseUp: i,
   onDocumentMouseUp: r,
   onSpanSelect: l,
-  onContextMenu: h,
+  onContextMenu: d,
   className: u,
-  style: f,
+  style: h,
   sync: a,
-  children: m
+  innerChildren: m,
+  children: c
 }) => {
-  const c = Ot(), p = n || c;
-  return A("dblclick", p, (d) => {
-    t?.(d);
-  }), A("click", p, (d) => {
-    e?.(d);
-  }), A("move", p, (d) => {
-    s?.(d);
-  }), A("mousedown", p, (d) => {
-    o?.(d);
-  }), A("mouseup", p, (d) => {
-    i?.(d);
-  }), A("documentmouseup", p, (d) => {
-    r?.(d);
-  }), A("spanselect", p, (d) => {
-    l?.(d);
-  }), A("contextmenu", p, (d) => {
-    h?.(d);
-  }), /* @__PURE__ */ k(xt.Provider, { value: p, children: /* @__PURE__ */ k(
-    Gt,
-    {
-      className: u,
-      style: f,
-      sync: a,
-      children: m
-    }
-  ) });
+  const x = Ot(), f = n || x;
+  return R("dblclick", f, (p) => {
+    t?.(p);
+  }), R("click", f, (p) => {
+    e?.(p);
+  }), R("move", f, (p) => {
+    s?.(p);
+  }), R("mousedown", f, (p) => {
+    o?.(p);
+  }), R("mouseup", f, (p) => {
+    i?.(p);
+  }), R("documentmouseup", f, (p) => {
+    r?.(p);
+  }), R("spanselect", f, (p) => {
+    l?.(p);
+  }), R("contextmenu", f, (p) => {
+    d?.(p);
+  }), /* @__PURE__ */ ft(yt.Provider, { value: f, children: [
+    /* @__PURE__ */ A(
+      Gt,
+      {
+        className: u,
+        style: h,
+        sync: a,
+        children: m
+      }
+    ),
+    c
+  ] });
 }, Gt = ({ className: n, style: e, sync: t, children: s }) => {
-  const o = _(null), i = pt(), r = _(i);
+  const o = _(null), i = xt(), r = _(i);
   r.current = i;
-  const l = tt(xt), h = t?.key || l, u = _(null), f = _(null), a = _(null), m = () => {
-    const d = o.current?.parentElement;
-    if (d) {
-      if (d.dataset.canplotroot === void 0)
+  const l = tt(yt), d = t?.key || l, u = _(null), h = _(null), a = _(null), m = () => {
+    const f = o.current?.parentElement;
+    if (f) {
+      if (f.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return d.getBoundingClientRect();
+      return f.getBoundingClientRect();
     }
-  }, c = (d, x) => {
+  }, c = (f, p) => {
     const v = qt(
-      d,
+      f,
       m(),
       r.current,
       t?.xViaScaleId,
       t?.yViaScaleId
     );
-    v && x(
+    v && p(
       v.pointerSyncPosition,
       { cssX: v.cssX, cssY: v.cssY },
       {
-        ctrlKey: d.ctrlKey,
-        altKey: d.altKey,
-        shiftKey: d.shiftKey,
-        metaKey: d.metaKey
+        ctrlKey: f.ctrlKey,
+        altKey: f.altKey,
+        shiftKey: f.shiftKey,
+        metaKey: f.metaKey
       }
     );
-  }, p = _(c);
-  return p.current = c, Et(() => {
-    const d = (y) => {
-      const b = f.current;
-      b && E.spanselect.dispatchEvent(l, {
-        ...b,
+  }, x = _(c);
+  return x.current = c, Et(() => {
+    const f = (y) => {
+      const w = h.current;
+      w && E.spanselect.dispatchEvent(l, {
+        ...w,
         completed: !0
       }), E.documentmouseup.dispatchEvent(l, {
         frame: r.current,
@@ -704,34 +708,34 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           metaKey: y.metaKey
         }
       });
-    }, x = (y) => {
-      const b = {
+    }, p = (y) => {
+      const w = {
         ctrlKey: y.ctrlKey,
         altKey: y.altKey,
         shiftKey: y.shiftKey,
         metaKey: y.metaKey
-      }, w = a.current;
-      if (w && Object.entries(b).some(
-        ([T, M]) => w.keys[T] !== M
+      }, b = a.current;
+      if (b && Object.entries(w).some(
+        ([T, M]) => b.keys[T] !== M
       )) {
-        const T = { ...w, keys: b };
-        a.current = T, E.sync_move.dispatchEvent(h, T);
+        const T = { ...b, keys: w };
+        a.current = T, E.sync_move.dispatchEvent(d, T);
       }
-      const P = f.current;
-      if (P && Object.entries(b).some(
+      const P = h.current;
+      if (P && Object.entries(w).some(
         ([T, M]) => P.keys[T] !== M
       )) {
         y.stopPropagation(), y.preventDefault();
-        const T = { ...P, keys: b };
-        f.current = T, E.spanselect.dispatchEvent(l, T);
+        const T = { ...P, keys: w };
+        h.current = T, E.spanselect.dispatchEvent(l, T);
       }
     }, v = (y) => {
-      p.current(
+      x.current(
         y,
-        (b, { cssX: w, cssY: P }, T) => {
+        (w, { cssX: b, cssY: P }, T) => {
           const M = u.current;
-          if (!M || !b.x || !b.y) return;
-          const C = r.current, N = M.xRangeCss.start, K = w, ot = M.yRangeCss.start, it = P, rt = I(C, b.x.scaleId), ct = I(C, b.y.scaleId);
+          if (!M || !w.x || !w.y) return;
+          const C = r.current, N = M.xRangeCss.start, K = b, ot = M.yRangeCss.start, it = P, rt = I(C, w.x.scaleId), ct = I(C, w.y.scaleId);
           u.current = {
             xRangeCss: { start: N, end: K },
             yRangeCss: { start: ot, end: it }
@@ -739,7 +743,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           let $ = "below_threshold";
           const at = Math.abs(ot - it), lt = Math.abs(N - K);
           at < 10 && lt < 10 ? $ = "below_threshold" : at > 30 && lt > 30 ? $ = "box" : at > lt ? $ = "y" : $ = "x";
-          const gt = {
+          const wt = {
             scaleId: rt.id,
             from: L(
               C,
@@ -767,7 +771,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
               ct.id,
               "css"
             )
-          }, W = gt && St("x", gt, r.current), q = bt && St("y", bt, r.current), Lt = W?.scaled, It = q?.scaled, wt = {
+          }, W = wt && Tt("x", wt, r.current), q = bt && Tt("y", bt, r.current), Lt = W?.scaled, It = q?.scaled, St = {
             mode: $,
             frame: r.current,
             completed: !1,
@@ -787,16 +791,16 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
             },
             keys: T
           };
-          f.current = wt, E.spanselect.dispatchEvent(
+          h.current = St, E.spanselect.dispatchEvent(
             l,
-            wt
+            St
           );
         }
       );
     }, g = (y) => {
-      p.current(y, (b, w, P) => {
+      x.current(y, (w, b, P) => {
         const T = O(
-          b,
+          w,
           r.current
         );
         if (!T) return;
@@ -814,24 +818,24 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         }
       });
     };
-    document.addEventListener("mouseup", d), document.addEventListener("keydown", x), document.addEventListener("keyup", x), document.addEventListener("mousemove", v);
+    document.addEventListener("mouseup", f), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", v);
     const S = o.current;
     return S?.addEventListener("wheel", g, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", d), document.removeEventListener("keydown", x), document.removeEventListener("keyup", x), document.removeEventListener("mousemove", v), S?.removeEventListener("wheel", g);
+      document.removeEventListener("mouseup", f), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", v), S?.removeEventListener("wheel", g);
     };
-  }, [r, l, h, p]), A("sync_move", h, (d) => {
-    const x = d.positions ? O(
-      d.positions,
+  }, [r, l, d, x]), R("sync_move", d, (f) => {
+    const p = f.positions ? O(
+      f.positions,
       r.current
     ) : null;
-    a.current = d, E.move.dispatchEvent(l, {
+    a.current = f, E.move.dispatchEvent(l, {
       frame: r.current,
-      pointer: x ?? null,
-      keys: d.keys
+      pointer: p ?? null,
+      keys: f.keys
     });
-  }), /* @__PURE__ */ k(
+  }), /* @__PURE__ */ A(
     "div",
     {
       ref: o,
@@ -846,13 +850,13 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         zIndex: 25,
         ...e
       },
-      onDragStart: (d) => {
-        d.preventDefault();
+      onDragStart: (f) => {
+        f.preventDefault();
       },
-      onClick: (d) => {
-        c(d, (x, v, g) => {
+      onClick: (f) => {
+        c(f, (p, v, g) => {
           const S = O(
-            x,
+            p,
             r.current
           );
           S && E.click.dispatchEvent(l, {
@@ -862,26 +866,26 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           });
         });
       },
-      onMouseLeave: (d) => {
-        c(d, (x, v, g) => {
-          E.sync_move.dispatchEvent(h, {
+      onMouseLeave: (f) => {
+        c(f, (p, v, g) => {
+          E.sync_move.dispatchEvent(d, {
             positions: null,
             keys: g
           });
         });
       },
-      onMouseMove: (d) => {
-        c(d, (x, v, g) => {
-          E.sync_move.dispatchEvent(h, {
-            positions: x,
+      onMouseMove: (f) => {
+        c(f, (p, v, g) => {
+          E.sync_move.dispatchEvent(d, {
+            positions: p,
             keys: g
           });
         });
       },
-      onMouseDown: (d) => {
-        c(d, (x, { cssX: v, cssY: g }, S) => {
+      onMouseDown: (f) => {
+        c(f, (p, { cssX: v, cssY: g }, S) => {
           const y = O(
-            x,
+            p,
             r.current
           );
           y && (E.mousedown.dispatchEvent(l, {
@@ -894,10 +898,10 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           });
         });
       },
-      onMouseUp: (d) => {
-        c(d, (x, v, g) => {
+      onMouseUp: (f) => {
+        c(f, (p, v, g) => {
           const S = O(
-            x,
+            p,
             r.current
           );
           if (!S) return;
@@ -906,26 +910,26 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
             pointer: S,
             keys: g
           });
-          const y = f.current;
-          f.current = null;
-          const b = u.current;
-          if (u.current = null, b && y) {
-            const w = {
+          const y = h.current;
+          h.current = null;
+          const w = u.current;
+          if (u.current = null, w && y) {
+            const b = {
               ...y,
               keys: g,
               completed: !0
             };
-            f.current = null, E.spanselect.dispatchEvent(
+            h.current = null, E.spanselect.dispatchEvent(
               l,
-              w
+              b
             );
           }
         });
       },
-      onContextMenu: (d) => {
-        d.preventDefault(), c(d, (x, v, g) => {
+      onContextMenu: (f) => {
+        f.preventDefault(), c(f, (p, v, g) => {
           const S = O(
-            x,
+            p,
             r.current
           );
           S && E.contextmenu.dispatchEvent(l, {
@@ -935,10 +939,10 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           });
         });
       },
-      onDoubleClick: (d) => {
-        c(d, (x, v, g) => {
+      onDoubleClick: (f) => {
+        c(f, (p, v, g) => {
           const S = O(
-            x,
+            p,
             r.current
           );
           S && E.dblclick.dispatchEvent(l, {
@@ -953,51 +957,51 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   );
 }, Pe = ({ data: n, renderTooltip: e, xScaleId: t }) => {
   const [s, o] = V(null);
-  yt("move", (r) => {
+  vt("move", (r) => {
     o(r);
   });
   const i = et(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: l } = s, h = l?.scaled[t];
-    if (h === void 0)
+    const { frame: r, pointer: l } = s, d = l?.scaled[t];
+    if (d === void 0)
       return null;
     const u = [];
-    let f = h;
+    let h = d;
     for (const a of n) {
       let m = null, c = 1 / 0;
-      for (const [d, x] of a.points.entries()) {
-        if (!ut(r, x.x, t) || !ut(r, x.y, a.yScaleId))
+      for (const [f, p] of a.points.entries()) {
+        if (!ut(r, p.x, t) || !ut(r, p.y, a.yScaleId))
           continue;
-        const v = Math.abs(x.x - h);
-        v < c && (c = v, m = d);
+        const v = Math.abs(p.x - d);
+        v < c && (c = v, m = f);
       }
-      const p = a.points[m ?? -1];
-      if (!p || ft(r, c, t, "css") > 30) {
+      const x = a.points[m ?? -1];
+      if (!x || mt(r, c, t, "css") > 30) {
         u.push({ seriesId: a.seriesId, y: null });
         continue;
       }
-      f = p.x, u.push({
+      h = x.x, u.push({
         seriesId: a.seriesId,
-        y: p.y
+        y: x.y
       });
     }
     return {
       frame: r,
-      x: f,
+      x: h,
       points: u
     };
   }, [n, s, t]);
   return e(i);
 }, ke = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
   const [o, i] = V(null);
-  if (yt("move", (m) => {
+  if (vt("move", (m) => {
     i(m);
   }), !o)
     return null;
-  const { frame: r, pointer: l } = o, h = l?.cssX ?? null, u = l?.cssY ?? null, f = h ? Y(r, h, "css") - r.chartAreaCSS.x : 0, a = u ? B(r, u, "css") - r.chartAreaCSS.y : 0;
-  return /* @__PURE__ */ Ct(Ut, { children: [
-    /* @__PURE__ */ k(
+  const { frame: r, pointer: l } = o, d = l?.cssX ?? null, u = l?.cssY ?? null, h = d ? Y(r, d, "css") : 0, a = u ? B(r, u, "css") : 0;
+  return /* @__PURE__ */ ft(Ut, { children: [
+    /* @__PURE__ */ A(
       "div",
       {
         "data-show": !!l,
@@ -1005,20 +1009,20 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
         style: {
           position: "absolute",
           left: 0,
-          visibility: h === null ? "hidden" : "visible",
-          top: 0,
-          bottom: 0,
+          visibility: d === null ? "hidden" : "visible",
+          top: r.chartAreaCSS.y,
+          height: r.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
           opacity: l ? 1 : 0,
-          transform: `translateX(${f}px)`,
+          transform: `translateX(${h}px)`,
           ...n?.(o)
         }
       }
     ),
-    /* @__PURE__ */ k(
+    /* @__PURE__ */ A(
       "div",
       {
         className: s?.(o),
@@ -1029,8 +1033,8 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: 0,
-          right: 0,
+          left: r.chartAreaCSS.x,
+          width: r.chartAreaCSS.width,
           pointerEvents: "none",
           opacity: l ? 1 : 0,
           transform: `translateY(${a}px)`,
@@ -1041,7 +1045,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   ] });
 }, Re = ({ makeClassName: n, makeStyle: e }) => {
   const [t, s] = V(null);
-  yt("spanselect", (i) => {
+  vt("spanselect", (i) => {
     s(
       i.mode === "below_threshold" || i.completed ? null : i
     );
@@ -1049,10 +1053,10 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   const o = et(() => {
     if (!t || t.mode === "below_threshold")
       return null;
-    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, l = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, h = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, u = Y(t.frame, i, "css"), f = Y(t.frame, r, "css"), a = B(t.frame, l, "css"), m = B(t.frame, h, "css"), c = Math.min(u, f) - t.frame.chartAreaCSS.x, p = Math.min(a, m) - t.frame.chartAreaCSS.y, d = Math.abs(f - u), x = Math.abs(m - a);
-    return { leftPx: c, topPx: p, widthPx: d, heightPx: x };
+    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, l = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, d = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, u = Y(t.frame, i, "css"), h = Y(t.frame, r, "css"), a = B(t.frame, l, "css"), m = B(t.frame, d, "css"), c = Math.min(u, h), x = Math.min(a, m), f = Math.abs(h - u), p = Math.abs(m - a);
+    return { leftPx: c, topPx: x, widthPx: f, heightPx: p };
   }, [t]);
-  return /* @__PURE__ */ k(
+  return /* @__PURE__ */ A(
     "div",
     {
       className: t ? n?.(t) : void 0,
@@ -1069,8 +1073,8 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
     }
   );
 }, Ae = ({ style: n, children: e, scaleId: t, ...s }) => {
-  const o = pt((i) => i.getScale(t)?.axis);
-  return o ? /* @__PURE__ */ k(
+  const o = xt((i) => i.getScale(t)?.axis);
+  return o ? /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -1091,16 +1095,16 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
   formatter: e,
   acceptableIncrements: t
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, l = [], h = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? At : Zt)) * h, f = Ft(
+  const { min: i, max: r } = s, l = [], d = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? At : Zt)) * d, h = Ft(
     o,
     u,
     s.id,
     "canvas"
-  ), a = t ?? G, m = a.find((p) => p > f) ?? a.at(-1) ?? 1;
+  ), a = t ?? G, m = a.find((x) => x > h) ?? a.at(-1) ?? 1;
   let c = i;
   if (Math.abs(c % m) > Number.EPSILON) {
-    const p = (m - c % m) % m;
-    c += p;
+    const x = (m - c % m) % m;
+    c += x;
   }
   for (; c <= r && l.length < 1e3; )
     l.push(c), c += m;
@@ -1111,7 +1115,7 @@ const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) =>
 }, G = [];
 for (let n = -12; n <= 12; n++)
   G.push(1 * 10 ** n), G.push(2 * 10 ** n), G.push(5 * 10 ** n);
-const te = 1, _t = 1e3 * te, vt = 60 * _t, nt = 60 * vt, st = 24 * nt, ee = 30 * st, ne = 365 * st, se = [
+const te = 1, _t = 1e3 * te, gt = 60 * _t, nt = 60 * gt, st = 24 * nt, ee = 30 * st, ne = 365 * st, se = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1171,7 +1175,7 @@ const te = 1, _t = 1e3 * te, vt = 60 * _t, nt = 60 * vt, st = 24 * nt, ee = 30 *
     case "seconds":
       return e * _t;
     case "minutes":
-      return e * vt;
+      return e * gt;
     case "hours":
       return e * nt;
     case "days":
@@ -1196,7 +1200,7 @@ const te = 1, _t = 1e3 * te, vt = 60 * _t, nt = 60 * vt, st = 24 * nt, ee = 30 *
 }, ae = (n, e) => {
   const t = new Date(n);
   return t.setUTCDate(t.getUTCDate() + e), t.getTime();
-}, Tt = (n, e) => {
+}, Ct = (n, e) => {
   const t = new Date(n);
   return t.setUTCMonth(t.getUTCMonth() + e), t.getTime();
 }, X = (n, e) => {
@@ -1213,9 +1217,9 @@ const te = 1, _t = 1e3 * te, vt = 60 * _t, nt = 60 * vt, st = 24 * nt, ee = 30 *
     case "days":
       return ae(n, t);
     case "months":
-      return Tt(n, t);
+      return Ct(n, t);
     case "years":
-      return Tt(n, t * 12);
+      return Ct(n, t * 12);
   }
 };
 function J(n, e) {
@@ -1242,7 +1246,7 @@ const le = (n, e, t = "UTC") => {
       break;
     case "minutes":
       i.setUTCMinutes(
-        Math.ceil(i.getTime() % nt / vt / s) * s,
+        Math.ceil(i.getTime() % nt / gt / s) * s,
         0,
         0
       );
@@ -1269,9 +1273,9 @@ const le = (n, e, t = "UTC") => {
   locale: s,
   showTimezone: o
 } = {}) => (i, r) => {
-  const { min: l, max: h } = i, u = Math.floor(r.chartAreaCanvasPX.width / e) + 1, a = (h - l) / u, [m, c] = se.find(
+  const { min: l, max: d } = i, u = Math.floor(r.chartAreaCanvasPX.width / e) + 1, a = (d - l) / u, [m, c] = se.find(
     (g) => Z(g) >= a
-  ) ?? [1, "milliseconds"], p = le(l, [m, c], n), d = J(p, n), x = [p];
+  ) ?? [1, "milliseconds"], x = le(l, [m, c], n), f = J(x, n), p = [x];
   let v;
   for (; ; ) {
     switch (c) {
@@ -1279,16 +1283,16 @@ const le = (n, e, t = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        v = X(p, [x.length * m, c]);
+        v = X(x, [p.length * m, c]);
         break;
       }
       case "days": {
-        const g = X(p, [
-          x.length * m,
+        const g = X(x, [
+          p.length * m,
           c
         ]);
         v = X(g, [
-          d - J(g, n),
+          f - J(g, n),
           "hours"
         ]);
         break;
@@ -1296,28 +1300,28 @@ const le = (n, e, t = "UTC") => {
       case "months":
       case "years": {
         const g = X(
-          X(X(p, [d, "hours"]), [
-            x.length * m,
+          X(X(x, [f, "hours"]), [
+            p.length * m,
             c
           ]),
-          [-d, "hours"]
+          [-f, "hours"]
         );
         v = X(g, [
-          d - J(g, n),
+          f - J(g, n),
           "hours"
         ]);
         break;
       }
     }
-    if (v > h)
+    if (v > d)
       break;
-    x.push(v);
+    p.push(v);
   }
   return (t ?? ue({
     locale: s,
     showTimezone: o,
     timeZone: n
-  }))(x);
+  }))(p);
 }, U = (n, e, t) => n.find((s) => s.type === t)?.value !== e.find((s) => s.type === t)?.value, ue = ({
   timeZone: n = Dt,
   locale: e = Jt,
@@ -1336,39 +1340,39 @@ const le = (n, e, t = "UTC") => {
     timeZone: n
   });
   return (o) => {
-    const i = o[1] - o[0], r = i < Z([1, "days"]), l = i < Z([1, "minutes"]), h = i < Z([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, f, a) => {
-      const m = a[f - 1], c = f === 0 || U(u.label, m.label, "year"), p = f === 0 || U(u.label, m.label, "day"), d = f === 0 || U(u.label, m.label, "month"), x = f === 0 || U(u.label, m.label, "hour"), v = f === 0 || U(u.label, m.label, "timeZoneName"), g = f === 0 || U(u.label, m.label, "minute"), S = f === 0 || U(u.label, m.label, "second"), y = f === 0 || U(u.label, m.label, "fractionalSecond"), b = [];
-      if (r && (x || g || v || S || y)) {
-        const w = u.label.find((C) => C.type === "hour")?.value, P = u.label.find((C) => C.type === "minute")?.value, T = u.label.find((C) => C.type === "timeZoneName")?.value;
+    const i = o[1] - o[0], r = i < Z([1, "days"]), l = i < Z([1, "minutes"]), d = i < Z([1, "seconds"]);
+    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, h, a) => {
+      const m = a[h - 1], c = h === 0 || U(u.label, m.label, "year"), x = h === 0 || U(u.label, m.label, "day"), f = h === 0 || U(u.label, m.label, "month"), p = h === 0 || U(u.label, m.label, "hour"), v = h === 0 || U(u.label, m.label, "timeZoneName"), g = h === 0 || U(u.label, m.label, "minute"), S = h === 0 || U(u.label, m.label, "second"), y = h === 0 || U(u.label, m.label, "fractionalSecond"), w = [];
+      if (r && (p || g || v || S || y)) {
+        const b = u.label.find((C) => C.type === "hour")?.value, P = u.label.find((C) => C.type === "minute")?.value, T = u.label.find((C) => C.type === "timeZoneName")?.value;
         let M = "";
         if (l) {
           const C = u.label.find((K) => K.type === "second")?.value, N = u.label.find(
             (K) => K.type === "fractionalSecond"
           )?.value;
-          M = `:${C}` + (h ? `.${N}` : "");
+          M = `:${C}` + (d ? `.${N}` : "");
         }
-        b.push(
-          `${w}:${P}${M}` + (t && v ? ` ${T}` : "")
+        w.push(
+          `${b}:${P}${M}` + (t && v ? ` ${T}` : "")
         );
       }
-      return (p || d) && b.push(
+      return (x || f) && w.push(
         [
-          u.label.find((w) => w.type === "month")?.value,
-          p && u.label.find((w) => w.type === "day")?.value
+          u.label.find((b) => b.type === "month")?.value,
+          x && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), c && b.push(u.label.find((w) => w.type === "year")?.value), {
+      ), c && w.push(u.label.find((b) => b.type === "year")?.value), {
         value: u.value,
-        label: b.filter((w) => w).join(`
+        label: w.filter((b) => b).join(`
 `)
       };
     });
   };
 };
 export {
-  we as AreaPlot,
+  be as AreaPlot,
   Ae as AxisOverlay,
-  be as BarPlot,
+  we as BarPlot,
   dt as CANPLOT_LAYER,
   ye as CanPlot,
   Ee as ChartAreaInteractions,
@@ -1395,11 +1399,11 @@ export {
   Ft as pxToValDistance,
   me as sum,
   F as useDrawEffect,
-  pt as useFrameState,
-  yt as useInteractionsEvent,
+  xt as useFrameState,
+  vt as useInteractionsEvent,
   Te as useXPositioned,
   ut as valFits,
   H as valToPos,
-  ft as valToPxDistance
+  mt as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map