@canplot/react 0.5.11 → 0.5.13

package/dist/canplot.mjs

@@ -1,19 +1,19 @@
 var Be = Object.defineProperty;
 var ze = (e, t, n) => t in e ? Be(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var K = (e, t, n) => ze(e, typeof t != "symbol" ? t + "" : t, n);
-import { jsxs as pe, jsx as R, Fragment as Ne } from "react/jsx-runtime";
-import D, { version as $e, createContext as ye, forwardRef as je, useRef as A, useState as B, useMemo as Q, useLayoutEffect as $, useCallback as He, useContext as G, useEffect as Ae, useId as Ve } from "react";
-const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (e, t) => {
+import { jsxs as pe, jsx as A, Fragment as Ne } from "react/jsx-runtime";
+import R, { version as $e, createContext as ye, forwardRef as je, useRef as k, useState as B, useMemo as Q, useLayoutEffect as $, useCallback as He, useContext as G, useEffect as ke, useId as Ve } from "react";
+const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), At = (e, t) => {
   let n = 0;
   for (let s = 0; s < e.length; s++)
     Math.abs(e[s] - t) < Math.abs(e[n] - t) && (n = s);
   return n;
-}, We = (e, t, n, s) => {
+}, qe = (e, t, n, s) => {
   const o = F(e, n);
   if (!o)
     return null;
-  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = (o.origin === "x" ? i.width : i.height) / (o.max - o.min);
-  return t / r;
+  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, c = (o.origin === "x" ? i.width : i.height) / (o.max - o.min);
+  return t / c;
 }, F = (e, t) => e.scales.find((n) => n.id === t) ?? null, _ = (e, t) => {
   const n = window.devicePixelRatio || 1;
   e.lineCap = t?.lineCap ?? "butt", e.lineDashOffset = n * (t?.lineDashOffset ?? 0), e.lineJoin = t?.lineJoin ?? "miter", e.lineWidth = n * (t?.lineWidth ?? 1), e.miterLimit = n * (t?.miterLimit ?? 10), e.strokeStyle = t?.strokeStyle ?? "black", e.fillStyle = t?.fillStyle ?? e.strokeStyle, e.font = t?.font ?? `${10 * n}px sans-serif`, e.textAlign = t?.textAlign ?? "start", e.direction = t?.direction ?? "inherit", e.textBaseline = t?.textBaseline ?? "alphabetic", e.fontKerning = t?.fontKerning ?? "auto";
@@ -21,24 +21,24 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
   const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = F(e, n);
   if (!i)
     return null;
-  const r = (i.origin === "x" ? o.width : o.height) / (i.max - i.min);
-  return t * r;
+  const c = (i.origin === "x" ? o.width : o.height) / (i.max - i.min);
+  return t * c;
 }, Z = (e, t, n, s) => {
   const o = F(e, n);
   if (!o)
     return null;
-  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = ge(
+  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, c = ge(
     e,
     t - o.min,
     n,
     s
   );
-  return r === null ? null : o.origin === "x" ? re(
-    i.x + r,
+  return c === null ? null : o.origin === "x" ? re(
+    i.x + c,
     i.x - 10 * i.width,
     i.x + 11 * i.width
   ) : re(
-    i.y + i.height - r,
+    i.y + i.height - c,
     i.y - 10 * i.height,
     i.y + 11 * i.height
   );
@@ -47,7 +47,7 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
     return null;
   const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
   return re(t, s.x, s.x + s.width);
-}, W = (e, t, n) => {
+}, q = (e, t, n) => {
   if (t === null)
     return null;
   const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
@@ -61,8 +61,8 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
   const o = F(e, n);
   if (!o)
     return null;
-  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = o.origin === "x" ? (t - i.x) / i.width : (i.height - t + i.y) / i.height;
-  return o.min + r * (o.max - o.min);
+  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, c = o.origin === "x" ? (t - i.x) / i.width : (i.height - t + i.y) / i.height;
+  return o.min + c * (o.max - o.min);
 }, O = (e, t) => {
   if (e === t) return !0;
   if (e == null || t == null || typeof e != typeof t || typeof e != "object" || Array.isArray(e) !== Array.isArray(t)) return !1;
@@ -77,7 +77,7 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
   for (const o of n)
     if (!Object.prototype.hasOwnProperty.call(t, o) || !O(e[o], t[o])) return !1;
   return !0;
-}, qe = (e) => {
+}, We = (e) => {
   const { ctx: t, scales: n } = e;
   for (const s of n) {
     if (!s.axis) continue;
@@ -125,7 +125,7 @@ function me(e, t) {
   e && (e.current = t);
 }
 var Ze = parseInt($e.split(".")[0], 10) >= 19 ? Je : Ge;
-const Re = ye({
+const Ae = ye({
   listeners: [],
   subscribe: () => () => {
   },
@@ -133,14 +133,14 @@ const Re = ye({
   }
 }), Qe = () => {
   const e = [];
-  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((i, r) => i[0] - r[0]), () => {
-    const i = e.findIndex(([, r]) => r === s);
+  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((i, c) => i[0] - c[0]), () => {
+    const i = e.findIndex(([, c]) => c === s);
     i !== -1 && e.splice(i, 1);
   }), notifyListeners: () => {
     for (const [, s] of e)
       s();
   } };
-}, ve = ye(null), De = ye(() => {
+}, ve = ye(null), Re = ye(() => {
 }), Ie = {
   TOP: 400,
   MIDDLE: 300,
@@ -151,7 +151,7 @@ class Le {
   constructor() {
     K(this, "_frame", null);
     K(this, "clampXPosToChartArea", (t, n = "canvas") => V(this.frame, t, n));
-    K(this, "clampYPosToChartArea", (t, n = "canvas") => W(this.frame, t, n));
+    K(this, "clampYPosToChartArea", (t, n = "canvas") => q(this.frame, t, n));
     K(this, "valToPos", (t, n, s = "canvas") => Z(this.frame, t, n, s));
     K(this, "valToPxDistance", (t, n, s = "canvas") => ge(this.frame, t, n, s));
     K(this, "valFits", (t, n) => de(this.frame, t, n));
@@ -169,19 +169,19 @@ class Le {
     return this.frame.ctx;
   }
 }
-const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
-  const i = A(null), r = A(null), c = tt(r), [u, l] = B(null), p = Q(
-    () => nt(e, c, u),
-    [e, c, u]
+const Rt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
+  const i = k(null), c = k(null), r = tt(c), [u, l] = B(null), y = Q(
+    () => nt(e, r, u),
+    [e, r, u]
   );
   $(() => {
     l(i.current?.getContext("2d") || null);
   }, [i]);
-  const f = window.devicePixelRatio || 1;
+  const d = window.devicePixelRatio || 1;
   return /* @__PURE__ */ pe(
     "div",
     {
-      ref: Ze([o, r]),
+      ref: Ze([o, c]),
       style: {
         position: "relative",
         overflow: "hidden",
@@ -190,21 +190,21 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       "data-canplotroot": !0,
       ...s,
       children: [
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ A(
           "canvas",
           {
             ref: i,
-            width: c.width * f,
-            height: c.height * f,
+            width: r.width * d,
+            height: r.height * d,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${c.width}px`,
-              height: `${c.height}px`
+              width: `${r.width}px`,
+              height: `${r.height}px`
             }
           }
         ),
-        p && /* @__PURE__ */ R(et, { frame: p, children: t })
+        y && /* @__PURE__ */ A(et, { frame: y, children: t })
       ]
     }
   );
@@ -216,32 +216,32 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   $(() => {
     e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
   }, [e, s]);
-  const i = A(null);
+  const i = k(null);
   i.current = e, $(() => {
     n.subscribe(() => {
-      i.current && qe(i.current);
+      i.current && We(i.current);
     }, Ie.BOTTOM);
   }, [n]), $(() => {
-    let c = null;
-    return c = window.requestAnimationFrame(() => {
-      c = null, n.notifyListeners();
+    let r = null;
+    return r = window.requestAnimationFrame(() => {
+      r = null, n.notifyListeners();
     }), () => {
-      c && cancelAnimationFrame(c);
+      r && cancelAnimationFrame(r);
     };
   }, [s, e, n]);
-  const r = He(() => {
-    o((c) => c + 1);
+  const c = He(() => {
+    o((r) => r + 1);
   }, [o]);
-  return /* @__PURE__ */ R(Re.Provider, { value: n, children: /* @__PURE__ */ R(De.Provider, { value: r, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
+  return /* @__PURE__ */ A(Ae.Provider, { value: n, children: /* @__PURE__ */ A(Re.Provider, { value: c, children: /* @__PURE__ */ A(ve.Provider, { value: e, children: t }) }) });
 }, tt = (e) => {
   const [t, n] = B({
     width: 0,
     height: 0
   }), [s] = B(() => new ResizeObserver((o) => {
     for (const i of o) {
-      const r = Math.round(i.contentRect.width), c = Math.round(i.contentRect.height);
+      const c = Math.round(i.contentRect.width), r = Math.round(i.contentRect.height);
       n(
-        (u) => u.width !== r || u.height !== c ? { ...u, width: r, height: c } : u
+        (u) => u.width !== c || u.height !== r ? { ...u, width: c, height: r } : u
       );
     }
   }));
@@ -249,7 +249,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     if (!e.current) return;
     const o = e.current.clientWidth, i = e.current.clientHeight;
     return n(
-      (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
+      (c) => c.width !== o || c.height !== i ? { ...c, width: o, height: i } : c
     ), s.observe(e.current, { box: "border-box" }), () => s.disconnect();
   }, [s, e]), t;
 }, nt = (e, t, n) => {
@@ -274,11 +274,11 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     y: o.y * s,
     width: o.width * s,
     height: o.height * s
-  }, r = [];
-  let c = e.padding.left * s, u = t.width * s - e.padding.right * s, l = t.height * s - e.padding.bottom * s, p = e.padding.top * s;
+  }, c = [];
+  let r = e.padding.left * s, u = t.width * s - e.padding.right * s, l = t.height * s - e.padding.bottom * s, y = e.padding.top * s;
   for (const a of e.scales) {
     if (!a.axis) {
-      r.push({ ...a, axis: null });
+      c.push({ ...a, axis: null });
       continue;
     }
     let g;
@@ -293,9 +293,9 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           };
           break;
         case "top":
-          p += a.axis.size * s, g = {
+          y += a.axis.size * s, g = {
             x: o.x,
-            y: p / s - a.axis.size,
+            y: y / s - a.axis.size,
             width: o.width,
             height: a.axis.size
           };
@@ -307,8 +307,8 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     else
       switch (a.axis.position) {
         case "left":
-          c += a.axis.size * s, g = {
-            x: c / s - a.axis.size,
+          r += a.axis.size * s, g = {
+            x: r / s - a.axis.size,
             y: o.y,
             width: a.axis.size,
             height: o.height
@@ -326,18 +326,18 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const d = {
+    const h = {
       x: g.x * s,
       y: g.y * s,
       width: g.width * s,
       height: g.height * s
     };
-    r.push({
+    c.push({
       ...a,
       axis: {
         ...a.axis,
         cssRect: g,
-        canvasRect: d
+        canvasRect: h
       }
     });
   }
@@ -345,32 +345,32 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     ctx: n,
     dpr: s,
     padding: e.padding,
-    scales: r,
+    scales: c,
     chartAreaCSS: o,
     chartAreaCanvasPX: i
   };
 }, j = (e, t, n) => {
-  const s = G(ve), o = G(De), i = G(Re);
+  const s = G(ve), o = G(Re), i = G(Ae);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const [r] = B(() => new Le());
-  r._updateFrame(s);
-  const c = A(r);
-  c.current = r;
-  const u = A(t);
+  const [c] = B(() => new Le());
+  c._updateFrame(s);
+  const r = k(c);
+  r.current = c;
+  const u = k(t);
   u.current = t, $(() => {
     const l = i.subscribe(
       () => {
-        u.current(r);
+        u.current(c);
       },
       typeof e == "number" ? e : Ie[e]
     );
     return () => {
       l();
     };
-  }, [i, e, r]), $(() => {
+  }, [i, e, c]), $(() => {
     o();
-  }, [o, ...n]), Ae(() => () => {
+  }, [o, ...n]), ke(() => () => {
     o();
   }, [o]);
 }, Ue = () => {
@@ -381,198 +381,201 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     const t = new Le();
     return t._updateFrame(e), t;
   }, [e]);
-}, st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o, globalAlpha: i }) => (j(
+}, st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o, globalAlpha: i, xGapWidth: c }) => (j(
   e,
-  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: l }) => {
-    r.save(), r.beginPath(), _(r, o), i !== void 0 && (r.globalAlpha = i);
-    for (const p of t) {
-      const f = c(l(p.x, n, "canvas")), a = u(l(p.y, s, "canvas"));
-      f === null || a === null || r.lineTo(f, a);
+  ({ ctx: r, clampXPosToChartArea: u, clampYPosToChartArea: l, valToPos: y }) => {
+    r.save(), r.beginPath(), _(r, o);
+    const d = r.getLineDash();
+    o?.lineDash && r.setLineDash(o.lineDash), i !== void 0 && (r.globalAlpha = i);
+    let a = null;
+    for (const g of t) {
+      const h = u(y(g.x, n, "canvas")), p = l(y(g.y, s, "canvas"));
+      h === null || p === null || (a !== null && c !== void 0 && h - a > c ? r.moveTo(h, p) : r.lineTo(h, p), a = h);
     }
-    r.stroke(), r.restore();
+    r.stroke(), d && r.setLineDash(d), r.restore();
   },
-  [t, n, s, o, i]
-), null), It = D.memo(st, O), ot = ({
+  [t, n, s, o, i, c]
+), null), It = R.memo(st, O), ot = ({
   layer: e = "MIDDLE",
   data: t,
   xScaleId: n,
   yScaleId: s,
   xStrategy: o = "clip",
   yStrategy: i = "clip",
-  radius: r = 5,
-  style: c,
+  radius: c = 5,
+  style: r,
   globalAlpha: u
 }) => (j(
   e,
   ({
     ctx: l,
-    valToPos: p,
-    valFits: f,
+    valToPos: y,
+    valFits: d,
     clampXPosToChartArea: a,
     clampYPosToChartArea: g
   }) => {
-    l.save(), _(l, c), u !== void 0 && (l.globalAlpha = u);
-    const d = [];
-    for (const y of t) {
-      let h = null, m = null;
-      const v = p(y.x, n);
+    l.save(), _(l, r), u !== void 0 && (l.globalAlpha = u);
+    const h = [];
+    for (const p of t) {
+      let f = null, m = null;
+      const v = y(p.x, n);
       if (v === null) continue;
       if (o === "clip") {
-        if (!f(y.x, n)) continue;
-        h = v;
+        if (!d(p.x, n)) continue;
+        f = v;
       } else
-        h = a(v, "canvas");
-      const x = p(y.y, s);
-      if (x !== null) {
+        f = a(v, "canvas");
+      const b = y(p.y, s);
+      if (b !== null) {
         if (i === "clip") {
-          if (!f(y.y, s)) continue;
-          m = x;
+          if (!d(p.y, s)) continue;
+          m = b;
         } else
-          m = g(x, "canvas");
-        h === null || m === null || d.push({ x: h, y: m });
+          m = g(b, "canvas");
+        f === null || m === null || h.push({ x: f, y: m });
       }
     }
-    if (c?.fillStyle)
-      for (const y of d)
-        l.beginPath(), l.arc(y.x, y.y, r, 0, Math.PI * 2), l.fill();
-    if (c?.strokeStyle) {
+    if (r?.fillStyle)
+      for (const p of h)
+        l.beginPath(), l.arc(p.x, p.y, c, 0, Math.PI * 2), l.fill();
+    if (r?.strokeStyle) {
       l.beginPath();
-      for (const y of d)
-        l.moveTo(y.x + r, y.y), l.arc(y.x, y.y, r, 0, Math.PI * 2);
+      for (const p of h)
+        l.moveTo(p.x + c, p.y), l.arc(p.x, p.y, c, 0, Math.PI * 2);
       l.stroke();
     }
     l.restore();
   },
-  [t, n, s, r, c, u]
-), null), Lt = D.memo(ot, O), it = ({
+  [t, n, s, c, r, u]
+), null), Lt = R.memo(ot, O), it = ({
   data: e,
   xScaleId: t,
   yScaleId: n,
   style: s,
   barWidth: o,
   xPositionOffset: i,
-  globalAlpha: r,
-  radius: c,
+  globalAlpha: c,
+  radius: r,
   layer: u = "MIDDLE"
 }) => (j(
   u,
   ({
     ctx: l,
-    valToPxDistance: p,
-    valToPos: f,
+    valToPxDistance: y,
+    valToPos: d,
     clampXPosToChartArea: a,
     clampYPosToChartArea: g
   }) => {
     if (e.length === 0) return;
-    const d = g(
-      f(0, n, "canvas"),
+    const h = g(
+      d(0, n, "canvas"),
       "canvas"
     );
-    if (d === null)
+    if (h === null)
       return;
-    const y = p(o, t, "canvas") ?? 0, h = [];
+    const p = y(o, t, "canvas") ?? 0, f = [];
     for (const m of e) {
-      const v = f(m.x, t, "canvas");
+      const v = d(m.x, t, "canvas");
       if (v === null)
         continue;
-      const x = v - y / 2 + i * y, T = g(
-        f(m.y, n, "canvas"),
+      const b = v - p / 2 + i * p, T = g(
+        d(m.y, n, "canvas"),
         "canvas"
       );
       if (T === null)
         continue;
-      const w = d - T, b = a(x, "canvas"), S = a(x + y, "canvas") - b;
-      h.push({
-        x: b,
+      const w = h - T, x = a(b, "canvas"), S = a(b + p, "canvas") - x;
+      f.push({
+        x,
         y: T,
         width: S,
         height: w
       });
     }
-    if (l.save(), _(l, s), r !== void 0 && (l.globalAlpha = r), s?.fillStyle)
-      for (const m of h)
-        l.beginPath(), c ? l.roundRect(m.x, m.y, m.width, m.height, c) : l.rect(m.x, m.y, m.width, m.height), l.fill();
+    if (l.save(), _(l, s), c !== void 0 && (l.globalAlpha = c), s?.fillStyle)
+      for (const m of f)
+        l.beginPath(), r ? l.roundRect(m.x, m.y, m.width, m.height, r) : l.rect(m.x, m.y, m.width, m.height), l.fill();
     if (s?.strokeStyle) {
       l.beginPath();
-      for (const m of h)
-        c ? l.roundRect(m.x, m.y, m.width, m.height, c) : l.rect(m.x, m.y, m.width, m.height);
+      for (const m of f)
+        r ? l.roundRect(m.x, m.y, m.width, m.height, r) : l.rect(m.x, m.y, m.width, m.height);
       l.stroke();
     }
     l.restore();
   },
-  [e, t, n, s, o, i, c, r]
-), null), Ut = D.memo(it, O), rt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
+  [e, t, n, s, o, i, r, c]
+), null), Ut = R.memo(it, O), rt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
-  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: u }) => {
+  ({ ctx: i, clampXPosToChartArea: c, clampYPosToChartArea: r, valToPos: u }) => {
     const l = [];
-    for (const f of t) {
-      const a = r(u(f.x, n));
+    for (const d of t) {
+      const a = c(u(d.x, n));
       if (a === null)
         continue;
-      const g = c(u(f.y[0], s));
+      const g = r(u(d.y[0], s));
       if (g === null)
         continue;
-      const d = c(u(f.y[1], s));
-      d !== null && (l.push({ x: a, y: g }), l.unshift({ x: a, y: d }));
+      const h = r(u(d.y[1], s));
+      h !== null && (l.push({ x: a, y: g }), l.unshift({ x: a, y: h }));
     }
-    const p = l[0];
-    if (p) {
-      i.save(), i.beginPath(), _(i, o), i.moveTo(p.x, p.y);
-      for (const f of l)
-        i.lineTo(f.x, f.y);
+    const y = l[0];
+    if (y) {
+      i.save(), i.beginPath(), _(i, o), i.moveTo(y.x, y.y);
+      for (const d of l)
+        i.lineTo(d.x, d.y);
       i.closePath(), i.fill(), i.restore();
     }
   },
   [t, n, s, o]
-), null), _t = D.memo(rt, O), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (j(
+), null), _t = R.memo(rt, O), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (j(
   e,
-  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: l }) => {
-    const p = [];
-    for (const d of t) {
-      const y = c(l(d.x, s)), h = u(l(d.y, o));
-      y === null || h === null || p.push({ x: y, y: h });
+  ({ ctx: c, clampXPosToChartArea: r, clampYPosToChartArea: u, valToPos: l }) => {
+    const y = [];
+    for (const h of t) {
+      const p = r(l(h.x, s)), f = u(l(h.y, o));
+      p === null || f === null || y.push({ x: p, y: f });
     }
-    const f = p.at(0), a = p.at(-1);
-    if (!f || !a)
+    const d = y.at(0), a = y.at(-1);
+    if (!d || !a)
       return;
     const g = u(l(0, o));
     if (g !== null) {
-      r.save(), r.beginPath(), _(r, i), r.moveTo(f.x, g);
-      for (const d of p)
-        r.lineTo(d.x, d.y);
-      if (r.lineTo(a.x, g), r.closePath(), r.fill(), n) {
-        r.beginPath(), r.moveTo(f.x, f.y);
-        for (const d of p)
-          r.lineTo(d.x, d.y);
-        r.stroke();
+      c.save(), c.beginPath(), _(c, i), c.moveTo(d.x, g);
+      for (const h of y)
+        c.lineTo(h.x, h.y);
+      if (c.lineTo(a.x, g), c.closePath(), c.fill(), n) {
+        c.beginPath(), c.moveTo(d.x, d.y);
+        for (const h of y)
+          c.lineTo(h.x, h.y);
+        c.stroke();
       }
-      r.restore();
+      c.restore();
     }
   },
   [t, n, s, o, i]
-), null), Xt = D.memo(ct, O), at = ({
+), null), Xt = R.memo(ct, O), at = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
   labelStyle: s,
   labelGap: o,
   tickSize: i,
-  ticks: r
+  ticks: c
 }) => (j(
   e,
-  ({ ctx: c, valToPos: u, getScale: l, frame: p }) => {
-    const f = l(t);
-    if (!f || !f.axis || f.origin !== "x") return;
-    const a = f.axis, g = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, d = window.devicePixelRatio || 1, y = g, h = (i ?? 6) * d, m = a.position === "top" ? g - h : g + h, v = (o ?? 12) * d;
-    c.save(), c.fontKerning = "auto", _(c, {
+  ({ ctx: r, valToPos: u, getScale: l, frame: y }) => {
+    const d = l(t);
+    if (!d || !d.axis || d.origin !== "x") return;
+    const a = d.axis, g = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, h = window.devicePixelRatio || 1, p = g, f = (i ?? 6) * h, m = a.position === "top" ? g - f : g + f, v = (o ?? 12) * h;
+    r.save(), r.fontKerning = "auto", _(r, {
       ...n
-    }), c.beginPath();
-    const x = Array.isArray(r) ? r : r({ ...f, axis: a }, p);
-    for (const { value: T } of x) {
+    }), r.beginPath();
+    const b = Array.isArray(c) ? c : c({ ...d, axis: a }, y);
+    for (const { value: T } of b) {
       const w = u(T, t, "canvas");
-      w !== null && (c.moveTo(w, y), c.lineTo(w, m));
+      w !== null && (r.moveTo(w, p), r.lineTo(w, m));
     }
-    c.stroke(), c.restore(), c.save(), _(c, {
+    r.stroke(), r.restore(), r.save(), _(r, {
       textBaseline: a.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...n,
@@ -580,38 +583,38 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       // alter font size for DPR
       font: _e(s?.font ?? n?.font)
     });
-    for (const { value: T, label: w } of x) {
-      const b = u(T, t, "canvas");
-      if (b === null)
+    for (const { value: T, label: w } of b) {
+      const x = u(T, t, "canvas");
+      if (x === null)
         continue;
       const S = w.split(`
 `);
       for (let E = 0; E < S.length; E++)
-        c.fillText(S[E], b, m + d * 2 + E * v);
+        r.fillText(S[E], x, m + h * 2 + E * v);
     }
-    c.restore();
+    r.restore();
   },
-  [r, t, n, s]
-), null), Ft = D.memo(at, O), lt = ({
+  [c, t, n, s]
+), null), Ft = R.memo(at, O), lt = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
   labelStyle: s,
   labelGap: o,
   tickSize: i,
-  ticks: r
+  ticks: c
 }) => (j(
   e,
-  ({ ctx: c, valToPos: u, getScale: l, frame: p }) => {
-    const f = l(t);
-    if (!f || !f.axis || f.origin !== "y") return;
-    const a = f.axis, g = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, d = g, y = i ?? 6, h = a.position === "left" ? g - y : g + y, m = o ?? 12, v = Array.isArray(r) ? r : r({ ...f, axis: a }, p);
-    c.save(), c.fontKerning = "auto", _(c, { ...n }), c.beginPath();
-    for (const { value: x } of v) {
-      const T = u(x, t, "canvas");
-      T !== null && (c.moveTo(d, T), c.lineTo(h, T));
+  ({ ctx: r, valToPos: u, getScale: l, frame: y }) => {
+    const d = l(t);
+    if (!d || !d.axis || d.origin !== "y") return;
+    const a = d.axis, g = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, h = g, p = i ?? 6, f = a.position === "left" ? g - p : g + p, m = o ?? 12, v = Array.isArray(c) ? c : c({ ...d, axis: a }, y);
+    r.save(), r.fontKerning = "auto", _(r, { ...n }), r.beginPath();
+    for (const { value: b } of v) {
+      const T = u(b, t, "canvas");
+      T !== null && (r.moveTo(h, T), r.lineTo(f, T));
     }
-    c.stroke(), c.restore(), c.save(), _(c, {
+    r.stroke(), r.restore(), r.save(), _(r, {
       textBaseline: "middle",
       textAlign: a.position === "left" ? "right" : "left",
       ...n,
@@ -619,19 +622,19 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       // alter font size for DPR
       font: _e(s?.font ?? n?.font)
     });
-    for (const { value: x, label: T } of v) {
-      const w = u(x, t, "canvas");
+    for (const { value: b, label: T } of v) {
+      const w = u(b, t, "canvas");
       if (w === null)
         continue;
-      const b = T.split(`
+      const x = T.split(`
 `);
-      for (let S = 0; S < b.length; S++)
-        c.fillText(` ${b[S]} `, h, w + S * m);
+      for (let S = 0; S < x.length; S++)
+        r.fillText(` ${x[S]} `, f, w + S * m);
     }
-    c.restore();
+    r.restore();
   },
-  [r, t, n, s]
-), null), Ot = D.memo(lt, O), _e = (e) => {
+  [c, t, n, s]
+), null), Ot = R.memo(lt, O), _e = (e) => {
   if (e)
     try {
       return e.replace(/(\d+)px/, (t, n) => `${parseInt(n) * window.devicePixelRatio || 1}px`);
@@ -665,35 +668,35 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   pressandwheel: I(),
   sync_move: I()
 }, L = (e, t, n) => {
-  const s = D.useRef(n);
-  s.current = n, D.useEffect(() => M[e].addEventListener(
+  const s = R.useRef(n);
+  s.current = n, R.useEffect(() => M[e].addEventListener(
     t,
-    (i, r) => {
-      s.current(r, i);
+    (i, c) => {
+      s.current(c, i);
     }
   ), [t, e, s]);
-}, we = D.createContext(""), xe = (e, t) => {
-  const n = D.useContext(we);
+}, we = R.createContext(""), be = (e, t) => {
+  const n = R.useContext(we);
   return L(e, n, t);
 }, ut = (e, t, n, s, o) => {
   if (!t) return;
-  const i = s ?? n.scales.find((f) => f.origin === "x")?.id, r = o ?? n.scales.find((f) => f.origin === "y")?.id, c = e.clientX - t.left, u = i ? {
+  const i = s ?? n.scales.find((d) => d.origin === "x")?.id, c = o ?? n.scales.find((d) => d.origin === "y")?.id, r = e.clientX - t.left, u = i ? {
     scaleId: i,
-    value: X(n, c, i, "css")
-  } : null, l = e.clientY - t.top, p = r ? {
-    scaleId: r,
-    value: X(n, l, r, "css")
+    value: X(n, r, i, "css")
+  } : null, l = e.clientY - t.top, y = c ? {
+    scaleId: c,
+    value: X(n, l, c, "css")
   } : null;
-  return { pointerSyncPosition: { x: u, y: p }, cssX: c, cssY: l };
+  return { pointerSyncPosition: { x: u, y }, cssX: r, cssY: l };
 }, N = (e, t) => {
-  const { x: n, y: s } = e, o = n && t.scales.some((r) => r.id === n.scaleId) ? Z(t, n.value, n.scaleId, "css") : null, i = s && t.scales.some((r) => r.id === s.scaleId) ? Z(t, s.value, s.scaleId, "css") : null;
+  const { x: n, y: s } = e, o = n && t.scales.some((c) => c.id === n.scaleId) ? Z(t, n.value, n.scaleId, "css") : null, i = s && t.scales.some((c) => c.id === s.scaleId) ? Z(t, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
     cssY: i,
     scaled: Object.fromEntries(
-      t.scales.flatMap((r) => {
-        const c = r.origin === "y" ? i : o;
-        return c === null ? [] : [[r.id, X(t, c, r.id, "css")]];
+      t.scales.flatMap((c) => {
+        const r = c.origin === "y" ? i : o;
+        return r === null ? [] : [[c.id, X(t, r, c.id, "css")]];
       })
     )
   };
@@ -712,14 +715,14 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   if (s === null || o === null)
     return null;
   const i = n.scales.flatMap(
-    (r) => {
-      if (r.origin !== e)
+    (c) => {
+      if (c.origin !== e)
         return [];
-      const c = X(n, s, r.id, "css"), u = X(n, o, r.id, "css");
-      return c === null || u === null ? [] : [
+      const r = X(n, s, c.id, "css"), u = X(n, o, c.id, "css");
+      return r === null || u === null ? [] : [
         {
-          scaleId: r.id,
-          from: c,
+          scaleId: c.id,
+          from: r,
           to: u
         }
       ];
@@ -737,62 +740,62 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   onMouseMove: s,
   onMouseDown: o,
   onMouseUp: i,
-  onDocumentMouseUp: r,
-  onSpanSelect: c,
+  onDocumentMouseUp: c,
+  onSpanSelect: r,
   onContextMenu: u,
   className: l,
-  style: p,
-  sync: f,
+  style: y,
+  sync: d,
   innerChildren: a,
   children: g
 }) => {
-  const d = Ve();
-  return L("dblclick", d, (y) => {
-    n?.(y);
-  }), L("click", d, (y) => {
-    t?.(y);
-  }), L("move", d, (y) => {
-    s?.(y);
-  }), L("mousedown", d, (y) => {
-    o?.(y);
-  }), L("mouseup", d, (y) => {
-    i?.(y);
-  }), L("documentmouseup", d, (y) => {
-    r?.(y);
-  }), L("spanselect", d, (y) => {
-    c?.(y);
-  }), L("contextmenu", d, (y) => {
-    u?.(y);
-  }), /* @__PURE__ */ pe(we.Provider, { value: d, children: [
-    /* @__PURE__ */ R(
+  const h = Ve();
+  return L("dblclick", h, (p) => {
+    n?.(p);
+  }), L("click", h, (p) => {
+    t?.(p);
+  }), L("move", h, (p) => {
+    s?.(p);
+  }), L("mousedown", h, (p) => {
+    o?.(p);
+  }), L("mouseup", h, (p) => {
+    i?.(p);
+  }), L("documentmouseup", h, (p) => {
+    c?.(p);
+  }), L("spanselect", h, (p) => {
+    r?.(p);
+  }), L("contextmenu", h, (p) => {
+    u?.(p);
+  }), /* @__PURE__ */ pe(we.Provider, { value: h, children: [
+    /* @__PURE__ */ A(
       ht,
       {
         id: e,
         className: l,
-        style: p,
-        sync: f,
+        style: y,
+        sync: d,
         children: a
       }
     ),
     g
   ] });
 }, ht = ({ id: e, className: t, style: n, sync: s, children: o }) => {
-  const i = A(null), r = Ue().frame, c = A(r);
-  c.current = r;
-  const u = G(we), l = s?.key || u, p = A(null), f = A(null), a = A(null), g = () => {
-    const h = i.current?.parentElement;
-    if (h) {
-      if (h.dataset.canplotroot === void 0)
+  const i = k(null), c = Ue().frame, r = k(c);
+  r.current = c;
+  const u = G(we), l = s?.key || u, y = k(null), d = k(null), a = k(null), g = () => {
+    const f = i.current?.parentElement;
+    if (f) {
+      if (f.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return h.getBoundingClientRect();
+      return f.getBoundingClientRect();
     }
-  }, d = (h, m) => {
+  }, h = (f, m) => {
     const v = ut(
-      h,
+      f,
       g(),
-      c.current,
+      r.current,
       s?.xViaScaleId,
       s?.yViaScaleId
     );
@@ -800,21 +803,21 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       v.pointerSyncPosition,
       { cssX: v.cssX, cssY: v.cssY },
       {
-        ctrlKey: h.ctrlKey,
-        altKey: h.altKey,
-        shiftKey: h.shiftKey,
-        metaKey: h.metaKey
+        ctrlKey: f.ctrlKey,
+        altKey: f.altKey,
+        shiftKey: f.shiftKey,
+        metaKey: f.metaKey
       }
     );
-  }, y = A(d);
-  return y.current = d, Ae(() => {
-    const h = (w) => {
-      const b = f.current;
-      b && M.spanselect.dispatchEvent(u, {
-        ...b,
+  }, p = k(h);
+  return p.current = h, ke(() => {
+    const f = (w) => {
+      const x = d.current;
+      x && M.spanselect.dispatchEvent(u, {
+        ...x,
         completed: !0
       }), M.documentmouseup.dispatchEvent(u, {
-        frame: c.current,
+        frame: r.current,
         keys: {
           ctrlKey: w.ctrlKey,
           altKey: w.altKey,
@@ -823,67 +826,67 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         }
       });
     }, m = (w) => {
-      const b = {
+      const x = {
         ctrlKey: w.ctrlKey,
         altKey: w.altKey,
         shiftKey: w.shiftKey,
         metaKey: w.metaKey
       }, S = a.current;
-      if (S && Object.entries(b).some(
+      if (S && Object.entries(x).some(
         ([C, P]) => S.keys[C] !== P
       )) {
-        const C = { ...S, keys: b };
+        const C = { ...S, keys: x };
         a.current = C, M.sync_move.dispatchEvent(l, C);
       }
-      const E = f.current;
-      if (E && Object.entries(b).some(
+      const E = d.current;
+      if (E && Object.entries(x).some(
         ([C, P]) => E.keys[C] !== P
       )) {
         w.stopPropagation(), w.preventDefault();
-        const C = { ...E, keys: b };
-        f.current = C, M.spanselect.dispatchEvent(u, C);
+        const C = { ...E, keys: x };
+        d.current = C, M.spanselect.dispatchEvent(u, C);
       }
     }, v = (w) => {
-      y.current(
+      p.current(
         w,
-        (b, { cssX: S, cssY: E }, C) => {
-          const P = p.current;
-          if (!P || !b.x || !b.y) return;
-          const k = c.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, ee = F(k, b.x.scaleId);
+        (x, { cssX: S, cssY: E }, C) => {
+          const P = y.current;
+          if (!P || !x.x || !x.y) return;
+          const D = r.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, ee = F(D, x.x.scaleId);
           if (!ee) return;
-          const te = F(k, b.y.scaleId);
+          const te = F(D, x.y.scaleId);
           if (!te) return;
-          p.current = {
+          y.current = {
             xRangeCss: { start: z, end: ae },
             yRangeCss: { start: le, end: ue }
           };
-          let q = "below_threshold";
+          let W = "below_threshold";
           const he = Math.abs(le - ue), fe = Math.abs(z - ae);
-          he < 10 && fe < 10 ? q = "below_threshold" : he > 30 && fe > 30 ? q = "box" : he > fe ? q = "y" : q = "x";
+          he < 10 && fe < 10 ? W = "below_threshold" : he > 30 && fe > 30 ? W = "box" : he > fe ? W = "y" : W = "x";
           const Te = X(
-            k,
-            V(c.current, z, "css"),
+            D,
+            V(r.current, z, "css"),
             ee.id,
             "css"
           );
           if (Te === null) return;
           const Se = X(
-            k,
-            V(c.current, ae, "css"),
+            D,
+            V(r.current, ae, "css"),
             ee.id,
             "css"
           );
           if (Se === null) return;
           const Ce = X(
-            k,
-            W(c.current, le, "css"),
+            D,
+            q(r.current, le, "css"),
             te.id,
             "css"
           );
           if (Ce === null) return;
           const Pe = X(
-            k,
-            W(c.current, ue, "css"),
+            D,
+            q(r.current, ue, "css"),
             te.id,
             "css"
           );
@@ -891,14 +894,14 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           const ne = Ee(
             "x",
             { scaleId: ee.id, from: Te, to: Se },
-            c.current
+            r.current
           ), se = Ee(
             "y",
             { scaleId: te.id, from: Ce, to: Pe },
-            c.current
+            r.current
           ), Ke = ne?.scaled, Ye = se?.scaled, Me = {
-            mode: q,
-            frame: c.current,
+            mode: W,
+            frame: r.current,
             completed: !1,
             x: {
               css: ne ? {
@@ -916,52 +919,52 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
             },
             keys: C
           };
-          f.current = Me, M.spanselect.dispatchEvent(
+          d.current = Me, M.spanselect.dispatchEvent(
             u,
             Me
           );
         }
       );
-    }, x = (w) => {
-      y.current(w, (b, S, E) => {
+    }, b = (w) => {
+      p.current(w, (x, S, E) => {
         const C = N(
-          b,
-          c.current
+          x,
+          r.current
         );
         if (!C) return;
-        if (Object.values(E).some((k) => k)) {
+        if (Object.values(E).some((D) => D)) {
           w.preventDefault();
-          const k = Math.abs(w.deltaY) > Math.abs(w.deltaX) ? w.deltaY : w.deltaX;
+          const D = Math.abs(w.deltaY) > Math.abs(w.deltaX) ? w.deltaY : w.deltaX;
           M.pressandwheel.dispatchEvent(u, {
             pointer: C,
-            frame: c.current,
+            frame: r.current,
             keys: E,
             deltaX: w.deltaX,
             deltaY: w.deltaY,
-            deltaAbs: k
+            deltaAbs: D
           });
         }
       });
     };
-    document.addEventListener("mouseup", h), document.addEventListener("keydown", m), document.addEventListener("keyup", m), document.addEventListener("mousemove", v);
+    document.addEventListener("mouseup", f), document.addEventListener("keydown", m), document.addEventListener("keyup", m), document.addEventListener("mousemove", v);
     const T = i.current;
-    return T?.addEventListener("wheel", x, {
+    return T?.addEventListener("wheel", b, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", h), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", v), T?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", f), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", v), T?.removeEventListener("wheel", b);
     };
-  }, [c, u, l, y]), L("sync_move", l, (h) => {
-    const m = h.positions ? N(
-      h.positions,
-      c.current
+  }, [r, u, l, p]), L("sync_move", l, (f) => {
+    const m = f.positions ? N(
+      f.positions,
+      r.current
     ) : null;
-    a.current = h, M.move.dispatchEvent(u, {
-      frame: c.current,
+    a.current = f, M.move.dispatchEvent(u, {
+      frame: r.current,
       pointer: m ?? null,
-      keys: h.keys,
-      source: h.originInteractionsId === u ? "own" : "sync"
+      keys: f.keys,
+      source: f.originInteractionsId === u ? "own" : "sync"
     });
-  }), /* @__PURE__ */ R(
+  }), /* @__PURE__ */ A(
     "div",
     {
       ref: i,
@@ -969,114 +972,114 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       className: t,
       style: {
         position: "absolute",
-        left: r.chartAreaCSS.x,
-        top: r.chartAreaCSS.y,
-        width: r.chartAreaCSS.width,
-        height: r.chartAreaCSS.height,
+        left: c.chartAreaCSS.x,
+        top: c.chartAreaCSS.y,
+        width: c.chartAreaCSS.width,
+        height: c.chartAreaCSS.height,
         zIndex: 25,
         ...n
       },
-      onDragStart: (h) => {
-        h.preventDefault();
+      onDragStart: (f) => {
+        f.preventDefault();
       },
-      onClick: (h) => {
-        d(h, (m, v, x) => {
+      onClick: (f) => {
+        h(f, (m, v, b) => {
           const T = N(
             m,
-            c.current
+            r.current
           );
           T && M.click.dispatchEvent(u, {
             pointer: T,
-            frame: c.current,
-            keys: x
+            frame: r.current,
+            keys: b
           });
         });
       },
-      onMouseLeave: (h) => {
-        d(h, (m, v, x) => {
+      onMouseLeave: (f) => {
+        h(f, (m, v, b) => {
           M.sync_move.dispatchEvent(l, {
             positions: null,
-            keys: x,
+            keys: b,
             originInteractionsId: u
           });
         });
       },
-      onMouseMove: (h) => {
-        d(h, (m, v, x) => {
+      onMouseMove: (f) => {
+        h(f, (m, v, b) => {
           M.sync_move.dispatchEvent(l, {
             positions: m,
-            keys: x,
+            keys: b,
             originInteractionsId: u
           });
         });
       },
-      onMouseDown: (h) => {
-        d(h, (m, { cssX: v, cssY: x }, T) => {
+      onMouseDown: (f) => {
+        h(f, (m, { cssX: v, cssY: b }, T) => {
           const w = N(
             m,
-            c.current
+            r.current
           );
           w && (M.mousedown.dispatchEvent(u, {
             pointer: w,
-            frame: c.current,
+            frame: r.current,
             keys: T
-          }), p.current = {
+          }), y.current = {
             xRangeCss: { start: v, end: v },
-            yRangeCss: { start: x, end: x }
+            yRangeCss: { start: b, end: b }
           });
         });
       },
-      onMouseUp: (h) => {
-        d(h, (m, v, x) => {
+      onMouseUp: (f) => {
+        h(f, (m, v, b) => {
           const T = N(
             m,
-            c.current
+            r.current
           );
           if (!T) return;
           M.mouseup.dispatchEvent(u, {
-            frame: c.current,
+            frame: r.current,
             pointer: T,
-            keys: x
+            keys: b
           });
-          const w = f.current;
-          f.current = null;
-          const b = p.current;
-          if (p.current = null, b && w) {
+          const w = d.current;
+          d.current = null;
+          const x = y.current;
+          if (y.current = null, x && w) {
             const S = {
               ...w,
-              keys: x,
+              keys: b,
               completed: !0
             };
-            f.current = null, M.spanselect.dispatchEvent(
+            d.current = null, M.spanselect.dispatchEvent(
               u,
               S
             );
           }
         });
       },
-      onContextMenu: (h) => {
-        h.preventDefault(), d(h, (m, v, x) => {
+      onContextMenu: (f) => {
+        f.preventDefault(), h(f, (m, v, b) => {
           const T = N(
             m,
-            c.current
+            r.current
           );
           T && M.contextmenu.dispatchEvent(u, {
-            frame: c.current,
+            frame: r.current,
             pointer: T,
-            keys: x
+            keys: b
           });
         });
       },
-      onDoubleClick: (h) => {
-        d(h, (m, v, x) => {
+      onDoubleClick: (f) => {
+        h(f, (m, v, b) => {
           const T = N(
             m,
-            c.current
+            r.current
           );
           T && M.dblclick.dispatchEvent(u, {
-            frame: c.current,
+            frame: r.current,
             pointer: T,
-            keys: x
+            keys: b
           });
         });
       },
@@ -1085,87 +1088,87 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   );
 }, Yt = ({ data: e, renderTooltip: t, xScaleId: n }) => {
   const [s, o] = B(null);
-  xe("move", (r) => {
-    o(r);
+  be("move", (c) => {
+    o(c);
   });
   const i = Q(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: c } = s, u = c?.scaled[n];
-    if (u === void 0 || !F(r, n))
+    const { frame: c, pointer: r } = s, u = r?.scaled[n];
+    if (u === void 0 || !F(c, n))
       return null;
-    const p = [];
-    let f = u;
+    const y = [];
+    let d = u;
     for (const a of e) {
-      let g = null, d = 1 / 0;
+      let g = null, h = 1 / 0;
       for (const [m, v] of a.points.entries()) {
-        if (!de(r, v.x, n) || !de(r, v.y, a.yScaleId))
+        if (!de(c, v.x, n) || !de(c, v.y, a.yScaleId))
           continue;
-        const x = Math.abs(v.x - u);
-        x < d && (d = x, g = m);
+        const b = Math.abs(v.x - u);
+        b < h && (h = b, g = m);
       }
-      const y = a.points[g ?? -1], h = ge(r, d, n, "css");
-      if (!y || h === null || h > 30) {
-        p.push({ seriesId: a.seriesId, y: null });
+      const p = a.points[g ?? -1], f = ge(c, h, n, "css");
+      if (!p || f === null || f > 30) {
+        y.push({ seriesId: a.seriesId, y: null });
         continue;
       }
-      f = y.x, p.push({
+      d = p.x, y.push({
         seriesId: a.seriesId,
-        y: y.y
+        y: p.y
       });
     }
     return {
-      frame: r,
-      x: f,
-      points: p
+      frame: c,
+      x: d,
+      points: y
     };
   }, [e, s, n]);
   return t(i);
 }, Bt = ({ makeXStyle: e, makeXClassName: t, makeYStyle: n, makeYClassName: s }) => {
   const [o, i] = B(null);
-  if (xe("move", (a) => {
+  if (be("move", (a) => {
     i(a);
   }), !o)
     return null;
-  const { frame: r, pointer: c } = o, u = c?.cssX ?? null, l = c?.cssY ?? null, p = u ? V(r, u, "css") : 0, f = l ? W(r, l, "css") : 0;
+  const { frame: c, pointer: r } = o, u = r?.cssX ?? null, l = r?.cssY ?? null, y = u ? V(c, u, "css") : 0, d = l ? q(c, l, "css") : 0;
   return /* @__PURE__ */ pe(Ne, { children: [
-    /* @__PURE__ */ R(
+    /* @__PURE__ */ A(
       "div",
       {
-        "data-show": !!c,
+        "data-show": !!r,
         className: t?.(o),
         style: {
           position: "absolute",
           left: 0,
           visibility: u === null ? "hidden" : "visible",
-          top: r.chartAreaCSS.y,
-          height: r.chartAreaCSS.height,
+          top: c.chartAreaCSS.y,
+          height: c.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: c ? 1 : 0,
-          transform: `translateX(${p}px)`,
+          opacity: r ? 1 : 0,
+          transform: `translateX(${y}px)`,
           ...e?.(o)
         }
       }
     ),
-    /* @__PURE__ */ R(
+    /* @__PURE__ */ A(
       "div",
       {
         className: s?.(o),
-        "data-show": !!c,
+        "data-show": !!r,
         style: {
           position: "absolute",
           visibility: l === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: r.chartAreaCSS.x,
-          width: r.chartAreaCSS.width,
+          left: c.chartAreaCSS.x,
+          width: c.chartAreaCSS.width,
           pointerEvents: "none",
-          opacity: c ? 1 : 0,
-          transform: `translateY(${f}px)`,
+          opacity: r ? 1 : 0,
+          transform: `translateY(${d}px)`,
           ...n?.(o)
         }
       }
@@ -1173,7 +1176,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   ] });
 }, zt = ({ makeClassName: e, makeStyle: t }) => {
   const [n, s] = B(null);
-  xe("spanselect", (i) => {
+  be("spanselect", (i) => {
     s(
       i.mode === "below_threshold" || i.completed ? null : i
     );
@@ -1181,10 +1184,10 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   const o = Q(() => {
     if (!n || n.mode === "below_threshold")
       return null;
-    const i = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, r = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, u = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = V(n.frame, i, "css"), p = V(n.frame, r, "css"), f = W(n.frame, c, "css"), a = W(n.frame, u, "css"), g = Math.min(l, p), d = Math.min(f, a), y = Math.abs(p - l), h = Math.abs(a - f);
-    return { leftPx: g, topPx: d, widthPx: y, heightPx: h };
+    const i = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, c = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, r = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, u = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = V(n.frame, i, "css"), y = V(n.frame, c, "css"), d = q(n.frame, r, "css"), a = q(n.frame, u, "css"), g = Math.min(l, y), h = Math.min(d, a), p = Math.abs(y - l), f = Math.abs(a - d);
+    return { leftPx: g, topPx: h, widthPx: p, heightPx: f };
   }, [n]);
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ A(
     "div",
     {
       className: n ? e?.(n) : void 0,
@@ -1202,7 +1205,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   );
 }, Nt = ({ style: e, children: t, scaleId: n, ...s }) => {
   const o = Ue().getScale(n)?.axis;
-  return o ? /* @__PURE__ */ R(
+  return o ? /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -1223,30 +1226,30 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   formatter: t,
   acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, c = [], u = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? Xe : ft)) * u, p = We(
+  const { min: i, max: c } = s, r = [], u = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? Xe : ft)) * u, y = qe(
     o,
     l,
     s.id,
     "canvas"
   );
-  if (p === null)
+  if (y === null)
     return [];
-  const f = n ?? oe, a = f.find((d) => d > p) ?? f.at(-1) ?? 1;
+  const d = n ?? oe, a = d.find((h) => h > y) ?? d.at(-1) ?? 1;
   let g = i;
   if (Math.abs(g % a) > Number.EPSILON) {
-    const d = (a - g % a) % a;
-    g += d;
+    const h = (a - g % a) % a;
+    g += h;
   }
-  for (; g <= r && c.length < 1e3; )
-    c.push(g), g += a;
-  return (t ?? mt)(c);
+  for (; g <= c && r.length < 1e3; )
+    r.push(g), g += a;
+  return (t ?? mt)(r);
 }, mt = (e) => {
   const t = Math.max(0, Math.ceil(-Math.log10(e[1] - e[0])));
   return e.map((n) => ({ value: n, label: n.toFixed(t) }));
 }, oe = [];
 for (let e = -12; e <= 12; e++)
   oe.push(1 * 10 ** e), oe.push(2 * 10 ** e), oe.push(5 * 10 ** e);
-const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * ce, gt = 365 * ce, vt = [
+const pt = 1, Oe = 1e3 * pt, xe = 60 * Oe, J = 60 * xe, ce = 24 * J, yt = 30 * ce, gt = 365 * ce, vt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1306,7 +1309,7 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * c
     case "seconds":
       return t * Oe;
     case "minutes":
-      return t * be;
+      return t * xe;
     case "hours":
       return t * J;
     case "days":
@@ -1319,10 +1322,10 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * c
 }, wt = (e, t) => {
   const n = new Date(e);
   return n.setUTCMilliseconds(n.getUTCMilliseconds() + t), n.getTime();
-}, xt = (e, t) => {
+}, bt = (e, t) => {
   const n = new Date(e);
   return n.setUTCSeconds(n.getUTCSeconds() + t), n.getTime();
-}, bt = (e, t) => {
+}, xt = (e, t) => {
   const n = new Date(e);
   return n.setUTCMinutes(n.getUTCMinutes() + t), n.getTime();
 }, Tt = (e, t) => {
@@ -1331,7 +1334,7 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * c
 }, St = (e, t) => {
   const n = new Date(e);
   return n.setUTCDate(n.getUTCDate() + t), n.getTime();
-}, ke = (e, t) => {
+}, De = (e, t) => {
   const n = new Date(e);
   return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
 }, U = (e, t) => {
@@ -1340,17 +1343,17 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * c
     case "milliseconds":
       return wt(e, n);
     case "seconds":
-      return xt(e, n);
-    case "minutes":
       return bt(e, n);
+    case "minutes":
+      return xt(e, n);
     case "hours":
       return Tt(e, n);
     case "days":
       return St(e, n);
     case "months":
-      return ke(e, n);
+      return De(e, n);
     case "years":
-      return ke(e, n * 12);
+      return De(e, n * 12);
   }
 };
 function H(e, t) {
@@ -1360,7 +1363,7 @@ function H(e, t) {
 const Ct = (e, t, n = "UTC") => {
   const [s, o] = t;
   let i = new Date(e);
-  const r = () => {
+  const c = () => {
     i.setUTCHours(-H(i, n), 0, 0, 0);
   };
   switch (o) {
@@ -1377,17 +1380,17 @@ const Ct = (e, t, n = "UTC") => {
       break;
     case "minutes":
       i.setUTCMinutes(
-        Math.ceil(i.getTime() % J / be / s) * s,
+        Math.ceil(i.getTime() % J / xe / s) * s,
         0,
         0
       );
       break;
     case "hours": {
-      const c = H(i, n);
+      const r = H(i, n);
       i.setUTCHours(
         Math.ceil(
-          (i.getTime() + c * J) % ce / J / s
-        ) * s - c,
+          (i.getTime() + r * J) % ce / J / s
+        ) * s - r,
         0,
         0,
         0
@@ -1395,7 +1398,7 @@ const Ct = (e, t, n = "UTC") => {
       break;
     }
     case "days": {
-      for (r(), i.setUTCDate(
+      for (c(), i.setUTCDate(
         1
       ); i.getTime() < e; )
         i = new Date(U(i, [s, o]));
@@ -1403,7 +1406,7 @@ const Ct = (e, t, n = "UTC") => {
     }
     case "months":
     case "years":
-      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(U(i, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), c(), i.getTime() < e && (i = new Date(U(i, [1, o])));
       break;
   }
   return i.getTime();
@@ -1413,42 +1416,42 @@ const Ct = (e, t, n = "UTC") => {
   formatter: n,
   locale: s,
   showTimezone: o
-} = {}) => (i, r) => {
-  const { min: c, max: u } = i;
-  if (!Number.isFinite(c) || !Number.isFinite(u))
+} = {}) => (i, c) => {
+  const { min: r, max: u } = i;
+  if (!Number.isFinite(r) || !Number.isFinite(u))
     return [];
-  const l = Math.floor(r.chartAreaCanvasPX.width / t) + 1, f = (u - c) / l, [a, g] = vt.find(
-    (v) => ie(v) >= f
+  const l = Math.floor(c.chartAreaCanvasPX.width / t) + 1, d = (u - r) / l, [a, g] = vt.find(
+    (v) => ie(v) >= d
   ) ?? [1, "milliseconds"];
   if (!a || !g)
     return [];
-  const d = Ct(c, [a, g], e), y = H(d, e), h = [d];
+  const h = Ct(r, [a, g], e), p = H(h, e), f = [h];
   let m;
   for (; ; ) {
-    if (h.length > 100)
+    if (f.length > 100)
       return [];
     switch (g) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        const v = U(d, [
-          h.length * a,
+        const v = U(h, [
+          f.length * a,
           g
         ]);
         m = U(v, [
-          y - H(v, e),
+          p - H(v, e),
           "hours"
         ]);
         break;
       }
       case "days": {
-        const v = U(d, [
-          h.length * a,
+        const v = U(h, [
+          f.length * a,
           g
         ]);
         m = U(v, [
-          y - H(v, e),
+          p - H(v, e),
           "hours"
         ]);
         break;
@@ -1456,14 +1459,14 @@ const Ct = (e, t, n = "UTC") => {
       case "months":
       case "years": {
         const v = U(
-          U(U(d, [y, "hours"]), [
-            h.length * a,
+          U(U(h, [p, "hours"]), [
+            f.length * a,
             g
           ]),
-          [-y, "hours"]
+          [-p, "hours"]
         );
         m = U(v, [
-          y - H(v, e),
+          p - H(v, e),
           "hours"
         ]);
         break;
@@ -1471,13 +1474,13 @@ const Ct = (e, t, n = "UTC") => {
     }
     if (m > u)
       break;
-    h[h.length - 1] !== m && h.push(m);
+    f[f.length - 1] !== m && f.push(m);
   }
   return (n ?? Pt({
     locale: s,
     showTimezone: o,
     timeZone: e
-  }))(h);
+  }))(f);
 }, Y = (e, t, n) => e.find((s) => s.type === n)?.value !== t.find((s) => s.type === n)?.value, Pt = ({
   timeZone: e = Fe,
   locale: t = dt,
@@ -1496,30 +1499,30 @@ const Ct = (e, t, n = "UTC") => {
     timeZone: e
   });
   return (o) => {
-    const i = o[1] - o[0], r = i < ie([1, "days"]), c = i < ie([1, "minutes"]), u = i < ie([1, "seconds"]);
-    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, p, f) => {
-      const a = f[p - 1], g = p === 0 || Y(l.label, a.label, "year"), d = p === 0 || Y(l.label, a.label, "day"), y = p === 0 || Y(l.label, a.label, "month"), h = p === 0 || Y(l.label, a.label, "hour"), m = p === 0 || Y(l.label, a.label, "timeZoneName"), v = p === 0 || Y(l.label, a.label, "minute"), x = p === 0 || Y(l.label, a.label, "second"), T = p === 0 || Y(l.label, a.label, "fractionalSecond"), w = [];
-      if (r && (h || v || m || x || T)) {
-        const b = l.label.find((P) => P.type === "hour")?.value, S = l.label.find((P) => P.type === "minute")?.value, E = l.label.find((P) => P.type === "timeZoneName")?.value;
+    const i = o[1] - o[0], c = i < ie([1, "days"]), r = i < ie([1, "minutes"]), u = i < ie([1, "seconds"]);
+    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, y, d) => {
+      const a = d[y - 1], g = y === 0 || Y(l.label, a.label, "year"), h = y === 0 || Y(l.label, a.label, "day"), p = y === 0 || Y(l.label, a.label, "month"), f = y === 0 || Y(l.label, a.label, "hour"), m = y === 0 || Y(l.label, a.label, "timeZoneName"), v = y === 0 || Y(l.label, a.label, "minute"), b = y === 0 || Y(l.label, a.label, "second"), T = y === 0 || Y(l.label, a.label, "fractionalSecond"), w = [];
+      if (c && (f || v || m || b || T)) {
+        const x = l.label.find((P) => P.type === "hour")?.value, S = l.label.find((P) => P.type === "minute")?.value, E = l.label.find((P) => P.type === "timeZoneName")?.value;
         let C = "";
-        if (c) {
-          const P = l.label.find((z) => z.type === "second")?.value, k = l.label.find(
+        if (r) {
+          const P = l.label.find((z) => z.type === "second")?.value, D = l.label.find(
             (z) => z.type === "fractionalSecond"
           )?.value;
-          C = `:${P}` + (u ? `.${k}` : "");
+          C = `:${P}` + (u ? `.${D}` : "");
         }
         w.push(
-          `${b}:${S}${C}` + (n && m ? ` ${E}` : "")
+          `${x}:${S}${C}` + (n && m ? ` ${E}` : "")
         );
       }
-      return (d || y) && w.push(
+      return (h || p) && w.push(
         [
-          l.label.find((b) => b.type === "month")?.value,
-          d && l.label.find((b) => b.type === "day")?.value
+          l.label.find((x) => x.type === "month")?.value,
+          h && l.label.find((x) => x.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), g && w.push(l.label.find((b) => b.type === "year")?.value), {
+      ), g && w.push(l.label.find((x) => x.type === "year")?.value), {
         value: l.value,
-        label: w.filter((b) => b).join(`
+        label: w.filter((x) => x).join(`
 `)
       };
     });
@@ -1530,7 +1533,7 @@ export {
   Nt as AxisOverlay,
   Ut as BarPlot,
   Ie as CANPLOT_LAYER,
-  Dt as CanPlot,
+  Rt as CanPlot,
   Kt as ChartAreaInteractions,
   Bt as Crosshair,
   Le as FrameDrawer,
@@ -1544,20 +1547,20 @@ export {
   _ as applyStyles,
   re as clamp,
   V as clampXPosToChartArea,
-  W as clampYPosToChartArea,
+  q as clampYPosToChartArea,
   O as deepEqual,
   mt as defaultNumericalTicksFormatter,
-  Rt as findClosestIndex,
+  At as findClosestIndex,
   F as getScale,
   $t as makeLinearTicks,
   Pt as makeTimeTickFormat,
   jt as makeTimeTicks,
   X as posToVal,
-  We as pxToValDistance,
-  At as sum,
+  qe as pxToValDistance,
+  kt as sum,
   j as useDrawEffect,
   Ue as useFrameState,
-  xe as useInteractionsEvent,
+  be as useInteractionsEvent,
   de as valFits,
   Z as valToPos,
   ge as valToPxDistance