@canplot/react 0.5.6 → 0.5.8

package/dist/canplot.mjs

@@ -2,8 +2,8 @@ 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 O = (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 Z, useLayoutEffect as $, useCallback as Ve, useContext as q, useEffect as Ae, useId as He } 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 D, { version as $e, createContext as ye, forwardRef as je, useRef as k, useState as B, useMemo as Z, useLayoutEffect as $, useCallback as Ve, useContext as q, useEffect as ke, useId as He } from "react";
+const ie = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (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);
@@ -12,46 +12,46 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
   const o = X(e, n);
   if (!o)
     return null;
-  const r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = (o.origin === "x" ? r.width : r.height) / (o.max - o.min);
-  return t / i;
+  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = (o.origin === "x" ? i.width : i.height) / (o.max - o.min);
+  return t / r;
 }, X = (e, t) => e.scales.find((n) => n.id === t) ?? null, U = (e, t) => {
   const n = window.devicePixelRatio || 1;
   e.lineCap = t?.lineCap ?? "butt", e.lineDashOffset = n * (t?.lineDashOffset ?? 0), e.lineJoin = t?.lineJoin ?? "miter", e.lineWidth = n * (t?.lineWidth ?? 1), e.miterLimit = n * (t?.miterLimit ?? 10), e.strokeStyle = t?.strokeStyle ?? "black", e.fillStyle = t?.fillStyle ?? e.strokeStyle, e.font = t?.font ?? `${10 * n}px sans-serif`, e.textAlign = t?.textAlign ?? "start", e.direction = t?.direction ?? "inherit", e.textBaseline = t?.textBaseline ?? "alphabetic", e.fontKerning = t?.fontKerning ?? "auto";
 }, ge = (e, t, n, s) => {
-  const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = X(e, n);
-  if (!r)
+  const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = X(e, n);
+  if (!i)
     return null;
-  const i = (r.origin === "x" ? o.width : o.height) / (r.max - r.min);
-  return t * i;
+  const r = (i.origin === "x" ? o.width : o.height) / (i.max - i.min);
+  return t * r;
 }, G = (e, t, n, s) => {
   const o = X(e, n);
   if (!o)
     return null;
-  const r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = ge(
+  const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = ge(
     e,
     t - o.min,
     n,
     s
   );
-  return i === null ? null : o.origin === "x" ? re(
-    r.x + i,
-    r.x - 10 * r.width,
-    r.x + 11 * r.width
-  ) : re(
-    r.y + r.height - i,
-    r.y - 10 * r.height,
-    r.y + 11 * r.height
+  return r === null ? null : o.origin === "x" ? ie(
+    i.x + r,
+    i.x - 10 * i.width,
+    i.x + 11 * i.width
+  ) : ie(
+    i.y + i.height - r,
+    i.y - 10 * i.height,
+    i.y + 11 * i.height
   );
 }, V = (e, t, n) => {
   if (t === null)
     return null;
   const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
-  return re(t, s.x, s.x + s.width);
+  return ie(t, s.x, s.x + s.width);
 }, H = (e, t, n) => {
   if (t === null)
     return null;
   const s = n === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS;
-  return re(t, s.y, s.y + s.height);
+  return ie(t, s.y, s.y + s.height);
 }, fe = (e, t, n) => {
   if (t === null)
     return !1;
@@ -61,8 +61,8 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
   const o = X(e, n);
   if (!o)
     return null;
-  const r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = o.origin === "x" ? (t - r.x) / r.width : (r.height - t + r.y) / r.height;
-  return o.min + i * (o.max - o.min);
+  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);
 }, F = (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;
@@ -92,12 +92,12 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n)
       if (s.axis.position === "bottom")
         t.beginPath(), t.moveTo(o.x, o.y), t.lineTo(o.x + o.width, o.y), t.stroke();
       else if (s.axis.position === "top") {
-        const r = o.y + o.height;
-        t.beginPath(), t.moveTo(o.x, r), t.lineTo(o.x + o.width, r), t.stroke();
+        const i = o.y + o.height;
+        t.beginPath(), t.moveTo(o.x, i), t.lineTo(o.x + o.width, i), t.stroke();
       }
     } else if (s.axis.position === "left") {
-      const r = o.x + o.width;
-      t.beginPath(), t.moveTo(r, o.y), t.lineTo(r, o.y + o.height), t.stroke();
+      const i = o.x + o.width;
+      t.beginPath(), t.moveTo(i, o.y), t.lineTo(i, o.y + o.height), t.stroke();
     } else s.axis.position === "right" && (t.beginPath(), t.moveTo(o.x, o.y), t.lineTo(o.x, o.y + o.height), t.stroke());
     t.restore();
   }
@@ -111,8 +111,8 @@ function Ze(e) {
   return (t) => {
     const n = [];
     for (const s of e) {
-      const o = me(s, t), r = typeof o == "function";
-      n.push(r ? o : () => me(s, null));
+      const o = me(s, t), i = typeof o == "function";
+      n.push(i ? o : () => me(s, null));
     }
     return () => {
       for (const s of n) s();
@@ -133,9 +133,9 @@ const Re = ye({
   }
 }), Qe = () => {
   const e = [];
-  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((r, i) => r[0] - i[0]), () => {
-    const r = e.findIndex(([, i]) => i === s);
-    r !== -1 && e.splice(r, 1);
+  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((i, r) => i[0] - r[0]), () => {
+    const i = e.findIndex(([, r]) => r === s);
+    i !== -1 && e.splice(i, 1);
   }), notifyListeners: () => {
     for (const [, s] of e)
       s();
@@ -170,18 +170,18 @@ class Le {
   }
 }
 const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
-  const r = A(null), i = A(null), c = tt(i), [l, u] = B(null), f = Z(
-    () => nt(e, c, l),
-    [e, c, l]
+  const i = k(null), r = k(null), c = tt(r), [u, l] = B(null), p = Z(
+    () => nt(e, c, u),
+    [e, c, u]
   );
   $(() => {
-    u(r.current?.getContext("2d") || null);
-  }, [r]);
-  const m = window.devicePixelRatio || 1;
+    l(i.current?.getContext("2d") || null);
+  }, [i]);
+  const d = window.devicePixelRatio || 1;
   return /* @__PURE__ */ pe(
     "div",
     {
-      ref: Je([o, i]),
+      ref: Je([o, r]),
       style: {
         position: "relative",
         overflow: "hidden",
@@ -193,9 +193,9 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         /* @__PURE__ */ R(
           "canvas",
           {
-            ref: r,
-            width: c.width * m,
-            height: c.height * m,
+            ref: i,
+            width: c.width * d,
+            height: c.height * d,
             style: {
               inset: 0,
               position: "absolute",
@@ -204,7 +204,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
             }
           }
         ),
-        f && /* @__PURE__ */ R(et, { frame: f, children: t })
+        p && /* @__PURE__ */ R(et, { frame: p, children: t })
       ]
     }
   );
@@ -216,10 +216,10 @@ 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 r = A(null);
-  r.current = e, $(() => {
+  const i = k(null);
+  i.current = e, $(() => {
     n.subscribe(() => {
-      r.current && qe(r.current);
+      i.current && qe(i.current);
     }, Ie.BOTTOM);
   }, [n]), $(() => {
     let c = null;
@@ -229,27 +229,27 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       c && cancelAnimationFrame(c);
     };
   }, [s, e, n]);
-  const i = Ve(() => {
+  const r = Ve(() => {
     o((c) => c + 1);
   }, [o]);
-  return /* @__PURE__ */ R(Re.Provider, { value: n, children: /* @__PURE__ */ R(De.Provider, { value: i, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
+  return /* @__PURE__ */ R(Re.Provider, { value: n, children: /* @__PURE__ */ R(De.Provider, { value: r, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
 }, tt = (e) => {
   const [t, n] = B({
     width: 0,
     height: 0
   }), [s] = B(() => new ResizeObserver((o) => {
-    for (const r of o) {
-      const i = Math.round(r.contentRect.width), c = Math.round(r.contentRect.height);
+    for (const i of o) {
+      const r = Math.round(i.contentRect.width), c = Math.round(i.contentRect.height);
       n(
-        (l) => l.width !== i || l.height !== c ? { ...l, width: i, height: c } : l
+        (u) => u.width !== r || u.height !== c ? { ...u, width: r, height: c } : u
       );
     }
   }));
   return $(() => {
     if (!e.current) return;
-    const o = e.current.clientWidth, r = e.current.clientHeight;
+    const o = e.current.clientWidth, i = e.current.clientHeight;
     return n(
-      (i) => i.width !== o || i.height !== r ? { ...i, width: o, height: r } : i
+      (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
     ), s.observe(e.current, { box: "border-box" }), () => s.disconnect();
   }, [s, e]), t;
 }, nt = (e, t, n) => {
@@ -269,33 +269,33 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       0,
       o.height - a.axis.size
     ), a.axis.position === "top" && (o.y += a.axis.size)) : (a.axis.position === "left" || a.axis.position === "right") && (o.width = Math.max(0, o.width - a.axis.size), a.axis.position === "left" && (o.x += a.axis.size)));
-  const r = {
+  const i = {
     x: o.x * s,
     y: o.y * s,
     width: o.width * s,
     height: o.height * s
-  }, i = [];
-  let c = e.padding.left * s, l = t.width * s - e.padding.right * s, u = t.height * s - e.padding.bottom * s, f = e.padding.top * 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;
   for (const a of e.scales) {
     if (!a.axis) {
-      i.push({ ...a, axis: null });
+      r.push({ ...a, axis: null });
       continue;
     }
-    let p;
+    let g;
     if (a.origin === "x")
       switch (a.axis.position) {
         case "bottom":
-          u -= a.axis.size * s, p = {
+          l -= a.axis.size * s, g = {
             x: o.x,
-            y: u / s,
+            y: l / s,
             width: o.width,
             height: a.axis.size
           };
           break;
         case "top":
-          f += a.axis.size * s, p = {
+          p += a.axis.size * s, g = {
             x: o.x,
-            y: f / s - a.axis.size,
+            y: p / s - a.axis.size,
             width: o.width,
             height: a.axis.size
           };
@@ -307,7 +307,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     else
       switch (a.axis.position) {
         case "left":
-          c += a.axis.size * s, p = {
+          c += a.axis.size * s, g = {
             x: c / s - a.axis.size,
             y: o.y,
             width: a.axis.size,
@@ -315,8 +315,8 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           };
           break;
         case "right":
-          l -= a.axis.size * s, p = {
-            x: l / s,
+          u -= a.axis.size * s, g = {
+            x: u / s,
             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 = {
-      x: p.x * s,
-      y: p.y * s,
-      width: p.width * s,
-      height: p.height * s
+    const f = {
+      x: g.x * s,
+      y: g.y * s,
+      width: g.width * s,
+      height: g.height * s
     };
-    i.push({
+    r.push({
       ...a,
       axis: {
         ...a.axis,
-        cssRect: p,
-        canvasRect: d
+        cssRect: g,
+        canvasRect: f
       }
     });
   }
@@ -345,32 +345,32 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     ctx: n,
     dpr: s,
     padding: e.padding,
-    scales: i,
+    scales: r,
     chartAreaCSS: o,
-    chartAreaCanvasPX: r
+    chartAreaCanvasPX: i
   };
 }, j = (e, t, n) => {
-  const s = q(ve), o = q(De), r = q(Re);
+  const s = q(ve), o = q(De), i = q(Re);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const [i] = B(() => new Le());
-  i._updateFrame(s);
-  const c = A(i);
-  c.current = i;
-  const l = A(t);
-  l.current = t, $(() => {
-    const u = r.subscribe(
+  const [r] = B(() => new Le());
+  r._updateFrame(s);
+  const c = k(r);
+  c.current = r;
+  const u = k(t);
+  u.current = t, $(() => {
+    const l = i.subscribe(
       () => {
-        l.current(i);
+        u.current(r);
       },
       typeof e == "number" ? e : Ie[e]
     );
     return () => {
-      u();
+      l();
     };
-  }, [r, e, i]), $(() => {
+  }, [i, e, r]), $(() => {
     o();
-  }, [o, ...n]), Ae(() => () => {
+  }, [o, ...n]), ke(() => () => {
     o();
   }, [o]);
 }, Ue = () => {
@@ -381,189 +381,196 @@ 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 }) => (j(
+}, st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o, globalAlpha: i }) => (j(
   e,
-  ({ ctx: r, clampXPosToChartArea: i, clampYPosToChartArea: c, valToPos: l }) => {
-    r.save(), r.beginPath(), U(r, o);
-    for (const u of t) {
-      const f = i(l(u.x, n, "canvas")), m = c(l(u.y, s, "canvas"));
-      f === null || m === null || r.lineTo(f, m);
+  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: l }) => {
+    r.save(), r.beginPath(), U(r, o), i !== void 0 && (r.globalAlpha = i);
+    for (const p of t) {
+      const d = c(l(p.x, n, "canvas")), a = u(l(p.y, s, "canvas"));
+      d === null || a === null || r.lineTo(d, a);
     }
     r.stroke(), r.restore();
   },
-  [t, n, s, o]
+  [t, n, s, o, i]
 ), null), It = D.memo(st, F), ot = ({
   layer: e = "MIDDLE",
   data: t,
   xScaleId: n,
   yScaleId: s,
   xStrategy: o = "clip",
-  yStrategy: r = "clip",
-  radius: i = 5,
+  yStrategy: i = "clip",
+  radius: r = 5,
   style: c,
-  globalAlpha: l
+  globalAlpha: u
 }) => (j(
   e,
   ({
-    ctx: u,
-    valToPos: f,
-    valFits: m,
+    ctx: l,
+    valToPos: p,
+    valFits: d,
     clampXPosToChartArea: a,
-    clampYPosToChartArea: p
+    clampYPosToChartArea: g
   }) => {
-    u.save(), u.beginPath();
-    const d = new Path2D();
-    U(u, c), l !== void 0 && (u.globalAlpha = l);
+    l.save(), U(l, c), u !== void 0 && (l.globalAlpha = u);
+    const f = [];
     for (const y of t) {
-      let h, g;
-      switch (o) {
-        case "clip":
-          if (!m(y.x, n))
-            continue;
-          h = f(y.x, n);
-          break;
-        case "clamp": {
-          if (f(y.x, n) === null)
-            continue;
-          h = a(f(y.x, n), "canvas");
-          break;
-        }
+      let h = null, m = null;
+      const w = p(y.x, n);
+      if (w === null) continue;
+      if (o === "clip") {
+        if (!d(y.x, n)) continue;
+        h = w;
+      } else
+        h = a(w, "canvas");
+      const x = p(y.y, s);
+      if (x !== null) {
+        if (i === "clip") {
+          if (!d(y.y, s)) continue;
+          m = x;
+        } else
+          m = g(x, "canvas");
+        h === null || m === null || f.push({ x: h, y: m });
       }
-      switch (r) {
-        case "clip":
-          if (!m(y.y, s))
-            continue;
-          g = f(y.y, s);
-          break;
-        case "clamp":
-          g = p(f(y.y, s), "canvas");
-          break;
-      }
-      h === null || g === null || (d.moveTo(h + i, g), d.arc(h, g, i, 0, Math.PI * 2));
     }
-    u.fill(d), u.stroke(d), u.restore();
+    if (c?.fillStyle)
+      for (const y of f)
+        l.beginPath(), l.arc(y.x, y.y, r, 0, Math.PI * 2), l.fill();
+    if (c?.strokeStyle) {
+      l.beginPath();
+      for (const y of f)
+        l.moveTo(y.x + r, y.y), l.arc(y.x, y.y, r, 0, Math.PI * 2);
+      l.stroke();
+    }
+    l.restore();
   },
-  [t, n, s, i, c, l]
-), null), Lt = D.memo(ot, F), rt = ({
+  [t, n, s, r, c, u]
+), null), Lt = D.memo(ot, F), it = ({
   data: e,
   xScaleId: t,
   yScaleId: n,
   style: s,
   barWidth: o,
-  xPositionOffset: r,
-  radius: i,
-  layer: c = "MIDDLE"
+  xPositionOffset: i,
+  globalAlpha: r,
+  radius: c,
+  layer: u = "MIDDLE"
 }) => (j(
-  c,
+  u,
   ({
     ctx: l,
-    valToPxDistance: u,
-    valToPos: f,
-    clampXPosToChartArea: m,
-    clampYPosToChartArea: a
+    valToPxDistance: p,
+    valToPos: d,
+    clampXPosToChartArea: a,
+    clampYPosToChartArea: g
   }) => {
     if (e.length === 0) return;
-    l.save(), U(l, s);
-    const p = u(o, t) ?? 0;
-    l.beginPath();
-    for (const d of e) {
-      const y = f(d.x, t);
-      if (y === null)
-        continue;
-      const h = y - p / 2 + r * p, g = a(
-        f(0, n, "canvas"),
-        "canvas"
-      );
-      if (g === null)
+    const f = g(
+      d(0, n, "canvas"),
+      "canvas"
+    );
+    if (f === null)
+      return;
+    const y = p(o, t, "canvas") ?? 0, h = [];
+    for (const m of e) {
+      const w = d(m.x, t, "canvas");
+      if (w === null)
         continue;
-      const w = a(
-        f(d.y, n, "canvas"),
+      const x = w - y / 2 + i * y, T = g(
+        d(m.y, n, "canvas"),
         "canvas"
       );
-      if (w === null)
+      if (T === null)
         continue;
-      const x = g - w, b = m(h, "canvas"), v = m(h + p, "canvas") - b;
-      i ? l.roundRect(
-        b,
-        w,
-        v,
-        x,
-        i
-      ) : l.rect(b, w, v, x);
+      const v = f - T, b = a(x, "canvas"), S = a(x + y, "canvas") - b;
+      h.push({
+        x: b,
+        y: T,
+        width: S,
+        height: v
+      });
+    }
+    if (l.save(), U(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 (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);
+      l.stroke();
     }
-    l.closePath(), l.fill(), s?.strokeStyle && l.stroke(), l.restore();
+    l.restore();
   },
-  [e, t, n, s, o, r, i]
-), null), Ut = D.memo(rt, F), it = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
+  [e, t, n, s, o, i, c]
+), null), Ut = D.memo(it, F), rt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
-  ({ ctx: r, clampXPosToChartArea: i, clampYPosToChartArea: c, valToPos: l }) => {
-    const u = [];
-    for (const m of t) {
-      const a = i(l(m.x, n));
+  ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: u }) => {
+    const l = [];
+    for (const d of t) {
+      const a = r(u(d.x, n));
       if (a === null)
         continue;
-      const p = c(l(m.y[0], s));
-      if (p === null)
+      const g = c(u(d.y[0], s));
+      if (g === null)
         continue;
-      const d = c(l(m.y[1], s));
-      d !== null && (u.push({ x: a, y: p }), u.unshift({ x: a, y: d }));
+      const f = c(u(d.y[1], s));
+      f !== null && (l.push({ x: a, y: g }), l.unshift({ x: a, y: f }));
     }
-    const f = u[0];
-    if (f) {
-      r.save(), r.beginPath(), U(r, o), r.moveTo(f.x, f.y);
-      for (const m of u)
-        r.lineTo(m.x, m.y);
-      r.closePath(), r.fill(), r.restore();
+    const p = l[0];
+    if (p) {
+      i.save(), i.beginPath(), U(i, o), i.moveTo(p.x, p.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(it, F), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: r }) => (j(
+), null), _t = D.memo(rt, F), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (j(
   e,
-  ({ ctx: i, clampXPosToChartArea: c, clampYPosToChartArea: l, valToPos: u }) => {
-    const f = [];
-    for (const d of t) {
-      const y = c(u(d.x, s)), h = l(u(d.y, o));
-      y === null || h === null || f.push({ x: y, y: h });
+  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: l }) => {
+    const p = [];
+    for (const f of t) {
+      const y = c(l(f.x, s)), h = u(l(f.y, o));
+      y === null || h === null || p.push({ x: y, y: h });
     }
-    const m = f.at(0), a = f.at(-1);
-    if (!m || !a)
+    const d = p.at(0), a = p.at(-1);
+    if (!d || !a)
       return;
-    const p = l(u(0, o));
-    if (p !== null) {
-      i.save(), i.beginPath(), U(i, r), i.moveTo(m.x, p);
-      for (const d of f)
-        i.lineTo(d.x, d.y);
-      if (i.lineTo(a.x, p), i.closePath(), i.fill(), n) {
-        i.beginPath(), i.moveTo(m.x, m.y);
-        for (const d of f)
-          i.lineTo(d.x, d.y);
-        i.stroke();
+    const g = u(l(0, o));
+    if (g !== null) {
+      r.save(), r.beginPath(), U(r, i), r.moveTo(d.x, g);
+      for (const f of p)
+        r.lineTo(f.x, f.y);
+      if (r.lineTo(a.x, g), r.closePath(), r.fill(), n) {
+        r.beginPath(), r.moveTo(d.x, d.y);
+        for (const f of p)
+          r.lineTo(f.x, f.y);
+        r.stroke();
       }
-      i.restore();
+      r.restore();
     }
   },
-  [t, n, s, o, r]
+  [t, n, s, o, i]
 ), null), Xt = D.memo(ct, F), at = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
   labelStyle: s,
   labelGap: o,
-  tickSize: r,
-  ticks: i
+  tickSize: i,
+  ticks: r
 }) => (j(
   e,
-  ({ ctx: c, valToPos: l, getScale: u, frame: f }) => {
-    const m = u(t);
-    if (!m || !m.axis || m.origin !== "x") return;
-    const a = m.axis, p = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, d = window.devicePixelRatio || 1, y = p, h = (r ?? 6) * d, g = a.position === "top" ? p - h : p + h, w = (o ?? 12) * d;
+  ({ ctx: c, valToPos: u, getScale: l, frame: p }) => {
+    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, f = window.devicePixelRatio || 1, y = g, h = (i ?? 6) * f, m = a.position === "top" ? g - h : g + h, w = (o ?? 12) * f;
     c.save(), c.fontKerning = "auto", U(c, {
       ...n
     }), c.beginPath();
-    const x = Array.isArray(i) ? i : i({ ...m, axis: a }, f);
-    for (const { value: b } of x) {
-      const v = l(b, t, "canvas");
-      v !== null && (c.moveTo(v, y), c.lineTo(v, g));
+    const x = Array.isArray(r) ? r : r({ ...d, axis: a }, p);
+    for (const { value: T } of x) {
+      const v = u(T, t, "canvas");
+      v !== null && (c.moveTo(v, y), c.lineTo(v, m));
     }
     c.stroke(), c.restore(), c.save(), U(c, {
       textBaseline: a.position === "top" ? "bottom" : "top",
@@ -573,36 +580,36 @@ 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: b, label: v } of x) {
-      const T = l(b, t, "canvas");
-      if (T === null)
+    for (const { value: T, label: v } of x) {
+      const b = u(T, t, "canvas");
+      if (b === null)
         continue;
-      const C = v.split(`
+      const S = v.split(`
 `);
-      for (let E = 0; E < C.length; E++)
-        c.fillText(C[E], T, g + d * 2 + E * w);
+      for (let E = 0; E < S.length; E++)
+        c.fillText(S[E], b, m + f * 2 + E * w);
     }
     c.restore();
   },
-  [i, t, n, s]
+  [r, t, n, s]
 ), null), Ft = D.memo(at, F), lt = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
   labelStyle: s,
   labelGap: o,
-  tickSize: r,
-  ticks: i
+  tickSize: i,
+  ticks: r
 }) => (j(
   e,
-  ({ ctx: c, valToPos: l, getScale: u, frame: f }) => {
-    const m = u(t);
-    if (!m || !m.axis || m.origin !== "y") return;
-    const a = m.axis, p = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, d = p, y = r ?? 6, h = a.position === "left" ? p - y : p + y, g = o ?? 12, w = Array.isArray(i) ? i : i({ ...m, axis: a }, f);
+  ({ ctx: c, valToPos: u, getScale: l, frame: p }) => {
+    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, f = g, y = i ?? 6, h = a.position === "left" ? g - y : g + y, m = o ?? 12, w = Array.isArray(r) ? r : r({ ...d, axis: a }, p);
     c.save(), c.fontKerning = "auto", U(c, { ...n }), c.beginPath();
     for (const { value: x } of w) {
-      const b = l(x, t, "canvas");
-      b !== null && (c.moveTo(d, b), c.lineTo(h, b));
+      const T = u(x, t, "canvas");
+      T !== null && (c.moveTo(f, T), c.lineTo(h, T));
     }
     c.stroke(), c.restore(), c.save(), U(c, {
       textBaseline: "middle",
@@ -612,18 +619,18 @@ 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: b } of w) {
-      const v = l(x, t, "canvas");
+    for (const { value: x, label: T } of w) {
+      const v = u(x, t, "canvas");
       if (v === null)
         continue;
-      const T = b.split(`
+      const b = T.split(`
 `);
-      for (let C = 0; C < T.length; C++)
-        c.fillText(` ${T[C]} `, h, v + C * g);
+      for (let S = 0; S < b.length; S++)
+        c.fillText(` ${b[S]} `, h, v + S * m);
     }
     c.restore();
   },
-  [i, t, n, s]
+  [r, t, n, s]
 ), null), Ot = D.memo(lt, F), _e = (e) => {
   if (e)
     try {
@@ -661,8 +668,8 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   const s = D.useRef(n);
   s.current = n, D.useEffect(() => M[e].addEventListener(
     t,
-    (r, i) => {
-      s.current(i, r);
+    (i, r) => {
+      s.current(r, i);
     }
   ), [t, e, s]);
 }, we = D.createContext(""), xe = (e, t) => {
@@ -670,23 +677,23 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   return L(e, n, t);
 }, ut = (e, t, n, s, o) => {
   if (!t) return;
-  const r = s ?? n.scales.find((m) => m.origin === "x")?.id, i = o ?? n.scales.find((m) => m.origin === "y")?.id, c = e.clientX - t.left, l = r ? {
-    scaleId: r,
-    value: _(n, c, r, "css")
-  } : null, u = e.clientY - t.top, f = i ? {
+  const i = s ?? n.scales.find((d) => d.origin === "x")?.id, r = o ?? n.scales.find((d) => d.origin === "y")?.id, c = e.clientX - t.left, u = i ? {
     scaleId: i,
-    value: _(n, u, i, "css")
+    value: _(n, c, i, "css")
+  } : null, l = e.clientY - t.top, p = r ? {
+    scaleId: r,
+    value: _(n, l, r, "css")
   } : null;
-  return { pointerSyncPosition: { x: l, y: f }, cssX: c, cssY: u };
+  return { pointerSyncPosition: { x: u, y: p }, cssX: c, cssY: l };
 }, N = (e, t) => {
-  const { x: n, y: s } = e, o = n && t.scales.some((i) => i.id === n.scaleId) ? G(t, n.value, n.scaleId, "css") : null, r = s && t.scales.some((i) => i.id === s.scaleId) ? G(t, s.value, s.scaleId, "css") : null;
+  const { x: n, y: s } = e, o = n && t.scales.some((r) => r.id === n.scaleId) ? G(t, n.value, n.scaleId, "css") : null, i = s && t.scales.some((r) => r.id === s.scaleId) ? G(t, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
-    cssY: r,
+    cssY: i,
     scaled: Object.fromEntries(
-      t.scales.flatMap((i) => {
-        const c = i.origin === "y" ? r : o;
-        return c === null ? [] : [[i.id, _(t, c, i.id, "css")]];
+      t.scales.flatMap((r) => {
+        const c = r.origin === "y" ? i : o;
+        return c === null ? [] : [[r.id, _(t, c, r.id, "css")]];
       })
     )
   };
@@ -704,16 +711,16 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   );
   if (s === null || o === null)
     return null;
-  const r = n.scales.flatMap(
-    (i) => {
-      if (i.origin !== e)
+  const i = n.scales.flatMap(
+    (r) => {
+      if (r.origin !== e)
         return [];
-      const c = _(n, s, i.id, "css"), l = _(n, o, i.id, "css");
-      return c === null || l === null ? [] : [
+      const c = _(n, s, r.id, "css"), u = _(n, o, r.id, "css");
+      return c === null || u === null ? [] : [
         {
-          scaleId: i.id,
+          scaleId: r.id,
           from: c,
-          to: l
+          to: u
         }
       ];
     }
@@ -721,7 +728,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   return {
     fromCSS: s,
     toCSS: o,
-    scaled: r
+    scaled: i
   };
 }, Kt = ({
   id: e,
@@ -729,51 +736,51 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   onDblClick: n,
   onMouseMove: s,
   onMouseDown: o,
-  onMouseUp: r,
-  onDocumentMouseUp: i,
+  onMouseUp: i,
+  onDocumentMouseUp: r,
   onSpanSelect: c,
-  onContextMenu: l,
-  className: u,
-  style: f,
-  sync: m,
+  onContextMenu: u,
+  className: l,
+  style: p,
+  sync: d,
   innerChildren: a,
-  children: p
+  children: g
 }) => {
-  const d = He();
-  return L("dblclick", d, (y) => {
+  const f = He();
+  return L("dblclick", f, (y) => {
     n?.(y);
-  }), L("click", d, (y) => {
+  }), L("click", f, (y) => {
     t?.(y);
-  }), L("move", d, (y) => {
+  }), L("move", f, (y) => {
     s?.(y);
-  }), L("mousedown", d, (y) => {
+  }), L("mousedown", f, (y) => {
     o?.(y);
-  }), L("mouseup", d, (y) => {
-    r?.(y);
-  }), L("documentmouseup", d, (y) => {
+  }), L("mouseup", f, (y) => {
     i?.(y);
-  }), L("spanselect", d, (y) => {
+  }), L("documentmouseup", f, (y) => {
+    r?.(y);
+  }), L("spanselect", f, (y) => {
     c?.(y);
-  }), L("contextmenu", d, (y) => {
-    l?.(y);
-  }), /* @__PURE__ */ pe(we.Provider, { value: d, children: [
+  }), L("contextmenu", f, (y) => {
+    u?.(y);
+  }), /* @__PURE__ */ pe(we.Provider, { value: f, children: [
     /* @__PURE__ */ R(
       ht,
       {
         id: e,
-        className: u,
-        style: f,
-        sync: m,
+        className: l,
+        style: p,
+        sync: d,
         children: a
       }
     ),
-    p
+    g
   ] });
 }, ht = ({ id: e, className: t, style: n, sync: s, children: o }) => {
-  const r = A(null), i = Ue().frame, c = A(i);
-  c.current = i;
-  const l = q(we), u = s?.key || l, f = A(null), m = A(null), a = A(null), p = () => {
-    const h = r.current?.parentElement;
+  const i = k(null), r = Ue().frame, c = k(r);
+  c.current = r;
+  const u = q(we), l = s?.key || u, p = k(null), d = k(null), a = k(null), g = () => {
+    const h = i.current?.parentElement;
     if (h) {
       if (h.dataset.canplotroot === void 0)
         throw new Error(
@@ -781,15 +788,15 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         );
       return h.getBoundingClientRect();
     }
-  }, d = (h, g) => {
+  }, f = (h, m) => {
     const w = ut(
       h,
-      p(),
+      g(),
       c.current,
       s?.xViaScaleId,
       s?.yViaScaleId
     );
-    w && g(
+    w && m(
       w.pointerSyncPosition,
       { cssX: w.cssX, cssY: w.cssY },
       {
@@ -799,14 +806,14 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         metaKey: h.metaKey
       }
     );
-  }, y = A(d);
-  return y.current = d, Ae(() => {
+  }, y = k(f);
+  return y.current = f, ke(() => {
     const h = (v) => {
-      const T = m.current;
-      T && M.spanselect.dispatchEvent(l, {
-        ...T,
+      const b = d.current;
+      b && M.spanselect.dispatchEvent(u, {
+        ...b,
         completed: !0
-      }), M.documentmouseup.dispatchEvent(l, {
+      }), M.documentmouseup.dispatchEvent(u, {
         frame: c.current,
         keys: {
           ctrlKey: v.ctrlKey,
@@ -815,38 +822,38 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           metaKey: v.metaKey
         }
       });
-    }, g = (v) => {
-      const T = {
+    }, m = (v) => {
+      const b = {
         ctrlKey: v.ctrlKey,
         altKey: v.altKey,
         shiftKey: v.shiftKey,
         metaKey: v.metaKey
-      }, C = a.current;
-      if (C && Object.entries(T).some(
-        ([S, P]) => C.keys[S] !== P
+      }, S = a.current;
+      if (S && Object.entries(b).some(
+        ([C, P]) => S.keys[C] !== P
       )) {
-        const S = { ...C, keys: T };
-        a.current = S, M.sync_move.dispatchEvent(u, S);
+        const C = { ...S, keys: b };
+        a.current = C, M.sync_move.dispatchEvent(l, C);
       }
-      const E = m.current;
-      if (E && Object.entries(T).some(
-        ([S, P]) => E.keys[S] !== P
+      const E = d.current;
+      if (E && Object.entries(b).some(
+        ([C, P]) => E.keys[C] !== P
       )) {
         v.stopPropagation(), v.preventDefault();
-        const S = { ...E, keys: T };
-        m.current = S, M.spanselect.dispatchEvent(l, S);
+        const C = { ...E, keys: b };
+        d.current = C, M.spanselect.dispatchEvent(u, C);
       }
     }, w = (v) => {
       y.current(
         v,
-        (T, { cssX: C, cssY: E }, S) => {
-          const P = f.current;
-          if (!P || !T.x || !T.y) return;
-          const k = c.current, z = P.xRangeCss.start, ae = C, le = P.yRangeCss.start, ue = E, J = X(k, T.x.scaleId);
+        (b, { cssX: S, cssY: E }, C) => {
+          const P = p.current;
+          if (!P || !b.x || !b.y) return;
+          const A = c.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, J = X(A, b.x.scaleId);
           if (!J) return;
-          const Q = X(k, T.y.scaleId);
+          const Q = X(A, b.y.scaleId);
           if (!Q) return;
-          f.current = {
+          p.current = {
             xRangeCss: { start: z, end: ae },
             yRangeCss: { start: le, end: ue }
           };
@@ -854,28 +861,28 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           const he = Math.abs(le - ue), de = Math.abs(z - ae);
           he < 10 && de < 10 ? W = "below_threshold" : he > 30 && de > 30 ? W = "box" : he > de ? W = "y" : W = "x";
           const Te = _(
-            k,
+            A,
             V(c.current, z, "css"),
             J.id,
             "css"
           );
           if (Te === null) return;
-          const Ce = _(
-            k,
+          const Se = _(
+            A,
             V(c.current, ae, "css"),
             J.id,
             "css"
           );
-          if (Ce === null) return;
-          const Se = _(
-            k,
+          if (Se === null) return;
+          const Ce = _(
+            A,
             H(c.current, le, "css"),
             Q.id,
             "css"
           );
-          if (Se === null) return;
+          if (Ce === null) return;
           const Pe = _(
-            k,
+            A,
             H(c.current, ue, "css"),
             Q.id,
             "css"
@@ -883,11 +890,11 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           if (Pe === null) return;
           const ee = Ee(
             "x",
-            { scaleId: J.id, from: Te, to: Ce },
+            { scaleId: J.id, from: Te, to: Se },
             c.current
           ), te = Ee(
             "y",
-            { scaleId: Q.id, from: Se, to: Pe },
+            { scaleId: Q.id, from: Ce, to: Pe },
             c.current
           ), Ke = ee?.scaled, Ye = te?.scaled, Me = {
             mode: W,
@@ -907,65 +914,65 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
               } : void 0,
               scaled: Ye ?? []
             },
-            keys: S
+            keys: C
           };
-          m.current = Me, M.spanselect.dispatchEvent(
-            l,
+          d.current = Me, M.spanselect.dispatchEvent(
+            u,
             Me
           );
         }
       );
     }, x = (v) => {
-      y.current(v, (T, C, E) => {
-        const S = N(
-          T,
+      y.current(v, (b, S, E) => {
+        const C = N(
+          b,
           c.current
         );
-        if (!S) return;
-        if (Object.values(E).some((k) => k)) {
+        if (!C) return;
+        if (Object.values(E).some((A) => A)) {
           v.preventDefault();
-          const k = Math.abs(v.deltaY) > Math.abs(v.deltaX) ? v.deltaY : v.deltaX;
-          M.pressandwheel.dispatchEvent(l, {
-            pointer: S,
+          const A = Math.abs(v.deltaY) > Math.abs(v.deltaX) ? v.deltaY : v.deltaX;
+          M.pressandwheel.dispatchEvent(u, {
+            pointer: C,
             frame: c.current,
             keys: E,
             deltaX: v.deltaX,
             deltaY: v.deltaY,
-            deltaAbs: k
+            deltaAbs: A
           });
         }
       });
     };
-    document.addEventListener("mouseup", h), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
-    const b = r.current;
-    return b?.addEventListener("wheel", x, {
+    document.addEventListener("mouseup", h), document.addEventListener("keydown", m), document.addEventListener("keyup", m), document.addEventListener("mousemove", w);
+    const T = i.current;
+    return T?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", h), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), b?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", h), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", w), T?.removeEventListener("wheel", x);
     };
-  }, [c, l, u, y]), L("sync_move", u, (h) => {
-    const g = h.positions ? N(
+  }, [c, u, l, y]), L("sync_move", l, (h) => {
+    const m = h.positions ? N(
       h.positions,
       c.current
     ) : null;
-    a.current = h, M.move.dispatchEvent(l, {
+    a.current = h, M.move.dispatchEvent(u, {
       frame: c.current,
-      pointer: g ?? null,
+      pointer: m ?? null,
       keys: h.keys,
-      source: h.originInteractionsId === l ? "own" : "sync"
+      source: h.originInteractionsId === u ? "own" : "sync"
     });
   }), /* @__PURE__ */ R(
     "div",
     {
-      ref: r,
+      ref: i,
       id: e,
       className: t,
       style: {
         position: "absolute",
-        left: i.chartAreaCSS.x,
-        top: i.chartAreaCSS.y,
-        width: i.chartAreaCSS.width,
-        height: i.chartAreaCSS.height,
+        left: r.chartAreaCSS.x,
+        top: r.chartAreaCSS.y,
+        width: r.chartAreaCSS.width,
+        height: r.chartAreaCSS.height,
         zIndex: 25,
         ...n
       },
@@ -973,102 +980,102 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         h.preventDefault();
       },
       onClick: (h) => {
-        d(h, (g, w, x) => {
-          const b = N(
-            g,
+        f(h, (m, w, x) => {
+          const T = N(
+            m,
             c.current
           );
-          b && M.click.dispatchEvent(l, {
-            pointer: b,
+          T && M.click.dispatchEvent(u, {
+            pointer: T,
             frame: c.current,
             keys: x
           });
         });
       },
       onMouseLeave: (h) => {
-        d(h, (g, w, x) => {
-          M.sync_move.dispatchEvent(u, {
+        f(h, (m, w, x) => {
+          M.sync_move.dispatchEvent(l, {
             positions: null,
             keys: x,
-            originInteractionsId: l
+            originInteractionsId: u
           });
         });
       },
       onMouseMove: (h) => {
-        d(h, (g, w, x) => {
-          M.sync_move.dispatchEvent(u, {
-            positions: g,
+        f(h, (m, w, x) => {
+          M.sync_move.dispatchEvent(l, {
+            positions: m,
             keys: x,
-            originInteractionsId: l
+            originInteractionsId: u
           });
         });
       },
       onMouseDown: (h) => {
-        d(h, (g, { cssX: w, cssY: x }, b) => {
+        f(h, (m, { cssX: w, cssY: x }, T) => {
           const v = N(
-            g,
+            m,
             c.current
           );
-          v && (M.mousedown.dispatchEvent(l, {
+          v && (M.mousedown.dispatchEvent(u, {
             pointer: v,
             frame: c.current,
-            keys: b
-          }), f.current = {
+            keys: T
+          }), p.current = {
             xRangeCss: { start: w, end: w },
             yRangeCss: { start: x, end: x }
           });
         });
       },
       onMouseUp: (h) => {
-        d(h, (g, w, x) => {
-          const b = N(
-            g,
+        f(h, (m, w, x) => {
+          const T = N(
+            m,
             c.current
           );
-          if (!b) return;
-          M.mouseup.dispatchEvent(l, {
+          if (!T) return;
+          M.mouseup.dispatchEvent(u, {
             frame: c.current,
-            pointer: b,
+            pointer: T,
             keys: x
           });
-          const v = m.current;
-          m.current = null;
-          const T = f.current;
-          if (f.current = null, T && v) {
-            const C = {
+          const v = d.current;
+          d.current = null;
+          const b = p.current;
+          if (p.current = null, b && v) {
+            const S = {
               ...v,
               keys: x,
               completed: !0
             };
-            m.current = null, M.spanselect.dispatchEvent(
-              l,
-              C
+            d.current = null, M.spanselect.dispatchEvent(
+              u,
+              S
             );
           }
         });
       },
       onContextMenu: (h) => {
-        h.preventDefault(), d(h, (g, w, x) => {
-          const b = N(
-            g,
+        h.preventDefault(), f(h, (m, w, x) => {
+          const T = N(
+            m,
             c.current
           );
-          b && M.contextmenu.dispatchEvent(l, {
+          T && M.contextmenu.dispatchEvent(u, {
             frame: c.current,
-            pointer: b,
+            pointer: T,
             keys: x
           });
         });
       },
       onDoubleClick: (h) => {
-        d(h, (g, w, x) => {
-          const b = N(
-            g,
+        f(h, (m, w, x) => {
+          const T = N(
+            m,
             c.current
           );
-          b && M.dblclick.dispatchEvent(l, {
+          T && M.dblclick.dispatchEvent(u, {
             frame: c.current,
-            pointer: b,
+            pointer: T,
             keys: x
           });
         });
@@ -1078,49 +1085,49 @@ 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", (i) => {
-    o(i);
+  xe("move", (r) => {
+    o(r);
   });
-  const r = Z(() => {
+  const i = Z(() => {
     if (!s)
       return null;
-    const { frame: i, pointer: c } = s, l = c?.scaled[n];
-    if (l === void 0 || !X(i, n))
+    const { frame: r, pointer: c } = s, u = c?.scaled[n];
+    if (u === void 0 || !X(r, n))
       return null;
-    const f = [];
-    let m = l;
+    const p = [];
+    let d = u;
     for (const a of e) {
-      let p = null, d = 1 / 0;
-      for (const [g, w] of a.points.entries()) {
-        if (!fe(i, w.x, n) || !fe(i, w.y, a.yScaleId))
+      let g = null, f = 1 / 0;
+      for (const [m, w] of a.points.entries()) {
+        if (!fe(r, w.x, n) || !fe(r, w.y, a.yScaleId))
           continue;
-        const x = Math.abs(w.x - l);
-        x < d && (d = x, p = g);
+        const x = Math.abs(w.x - u);
+        x < f && (f = x, g = m);
       }
-      const y = a.points[p ?? -1], h = ge(i, d, n, "css");
+      const y = a.points[g ?? -1], h = ge(r, f, n, "css");
       if (!y || h === null || h > 30) {
-        f.push({ seriesId: a.seriesId, y: null });
+        p.push({ seriesId: a.seriesId, y: null });
         continue;
       }
-      m = y.x, f.push({
+      d = y.x, p.push({
         seriesId: a.seriesId,
         y: y.y
       });
     }
     return {
-      frame: i,
-      x: m,
-      points: f
+      frame: r,
+      x: d,
+      points: p
     };
   }, [e, s, n]);
-  return t(r);
+  return t(i);
 }, Bt = ({ makeXStyle: e, makeXClassName: t, makeYStyle: n, makeYClassName: s }) => {
-  const [o, r] = B(null);
+  const [o, i] = B(null);
   if (xe("move", (a) => {
-    r(a);
+    i(a);
   }), !o)
     return null;
-  const { frame: i, pointer: c } = o, l = c?.cssX ?? null, u = c?.cssY ?? null, f = l ? V(i, l, "css") : 0, m = u ? H(i, u, "css") : 0;
+  const { frame: r, pointer: c } = o, u = c?.cssX ?? null, l = c?.cssY ?? null, p = u ? V(r, u, "css") : 0, d = l ? H(r, l, "css") : 0;
   return /* @__PURE__ */ pe(Ne, { children: [
     /* @__PURE__ */ R(
       "div",
@@ -1130,15 +1137,15 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         style: {
           position: "absolute",
           left: 0,
-          visibility: l === null ? "hidden" : "visible",
-          top: i.chartAreaCSS.y,
-          height: i.chartAreaCSS.height,
+          visibility: u === null ? "hidden" : "visible",
+          top: r.chartAreaCSS.y,
+          height: r.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
           opacity: c ? 1 : 0,
-          transform: `translateX(${f}px)`,
+          transform: `translateX(${p}px)`,
           ...e?.(o)
         }
       }
@@ -1150,15 +1157,15 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         "data-show": !!c,
         style: {
           position: "absolute",
-          visibility: u === null ? "hidden" : "visible",
+          visibility: l === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: i.chartAreaCSS.x,
-          width: i.chartAreaCSS.width,
+          left: r.chartAreaCSS.x,
+          width: r.chartAreaCSS.width,
           pointerEvents: "none",
           opacity: c ? 1 : 0,
-          transform: `translateY(${m}px)`,
+          transform: `translateY(${d}px)`,
           ...n?.(o)
         }
       }
@@ -1166,16 +1173,16 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   ] });
 }, zt = ({ makeClassName: e, makeStyle: t }) => {
   const [n, s] = B(null);
-  xe("spanselect", (r) => {
+  xe("spanselect", (i) => {
     s(
-      r.mode === "below_threshold" || r.completed ? null : r
+      i.mode === "below_threshold" || i.completed ? null : i
     );
   });
   const o = Z(() => {
     if (!n || n.mode === "below_threshold")
       return null;
-    const r = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, i = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, l = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, u = V(n.frame, r, "css"), f = V(n.frame, i, "css"), m = H(n.frame, c, "css"), a = H(n.frame, l, "css"), p = Math.min(u, f), d = Math.min(m, a), y = Math.abs(f - u), h = Math.abs(a - m);
-    return { leftPx: p, topPx: d, widthPx: y, heightPx: h };
+    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"), d = H(n.frame, c, "css"), a = H(n.frame, u, "css"), g = Math.min(l, p), f = Math.min(d, a), y = Math.abs(p - l), h = Math.abs(a - d);
+    return { leftPx: g, topPx: f, widthPx: y, heightPx: h };
   }, [n]);
   return /* @__PURE__ */ R(
     "div",
@@ -1216,22 +1223,22 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   formatter: t,
   acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: r, max: i } = s, c = [], l = window.devicePixelRatio || 1, u = (e ?? (s.origin === "x" ? Xe : dt)) * l, f = We(
+  const { min: i, max: r } = s, c = [], u = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? Xe : dt)) * u, p = We(
     o,
-    u,
+    l,
     s.id,
     "canvas"
   );
-  if (f === null)
+  if (p === null)
     return [];
-  const m = n ?? ne, a = m.find((d) => d > f) ?? m.at(-1) ?? 1;
-  let p = r;
-  if (Math.abs(p % a) > Number.EPSILON) {
-    const d = (a - p % a) % a;
-    p += d;
+  const d = n ?? ne, a = d.find((f) => f > p) ?? d.at(-1) ?? 1;
+  let g = i;
+  if (Math.abs(g % a) > Number.EPSILON) {
+    const f = (a - g % a) % a;
+    g += f;
   }
-  for (; p <= i && c.length < 1e3; )
-    c.push(p), p += a;
+  for (; g <= r && c.length < 1e3; )
+    c.push(g), g += a;
   return (t ?? mt)(c);
 }, mt = (e) => {
   const t = Math.max(0, Math.ceil(-Math.log10(e[1] - e[0])));
@@ -1239,7 +1246,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
 }, ne = [];
 for (let e = -12; e <= 12; e++)
   ne.push(1 * 10 ** e), ne.push(2 * 10 ** e), ne.push(5 * 10 ** e);
-const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 * ce, gt = 365 * ce, vt = [
+const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, re = 60 * be, ce = 24 * re, yt = 30 * ce, gt = 365 * ce, vt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1301,7 +1308,7 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 *
     case "minutes":
       return t * be;
     case "hours":
-      return t * ie;
+      return t * re;
     case "days":
       return t * ce;
     case "months":
@@ -1321,10 +1328,10 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 *
 }, Tt = (e, t) => {
   const n = new Date(e);
   return n.setUTCHours(n.getUTCHours() + t), n.getTime();
-}, Ct = (e, t) => {
+}, St = (e, t) => {
   const n = new Date(e);
   return n.setUTCDate(n.getUTCDate() + t), n.getTime();
-}, ke = (e, t) => {
+}, Ae = (e, t) => {
   const n = new Date(e);
   return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
 }, Y = (e, t) => {
@@ -1339,45 +1346,45 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, ie = 60 * be, ce = 24 * ie, yt = 30 *
     case "hours":
       return Tt(e, n);
     case "days":
-      return Ct(e, n);
+      return St(e, n);
     case "months":
-      return ke(e, n);
+      return Ae(e, n);
     case "years":
-      return ke(e, n * 12);
+      return Ae(e, n * 12);
   }
 };
 function oe(e, t) {
   const n = new Date(e), s = new Date(n.toLocaleString("en-US", { timeZone: t })), o = new Date(n.toLocaleString("en-US", { timeZone: "UTC" }));
   return (s.getTime() - o.getTime()) / (3600 * 1e3);
 }
-const St = (e, t, n = "UTC") => {
+const Ct = (e, t, n = "UTC") => {
   const [s, o] = t;
-  let r = new Date(e);
-  const i = () => {
-    r.setUTCHours(-oe(r, n), 0, 0, 0);
+  let i = new Date(e);
+  const r = () => {
+    i.setUTCHours(-oe(i, n), 0, 0, 0);
   };
   switch (o) {
     case "milliseconds":
-      r.setUTCMilliseconds(
-        Math.ceil(r.getUTCMilliseconds() / s) * s
+      i.setUTCMilliseconds(
+        Math.ceil(i.getUTCMilliseconds() / s) * s
       );
       break;
     case "seconds":
-      r.setUTCSeconds(
-        Math.ceil(r.getUTCSeconds() / s) * s,
+      i.setUTCSeconds(
+        Math.ceil(i.getUTCSeconds() / s) * s,
         0
       );
       break;
     case "minutes":
-      r.setUTCMinutes(
-        Math.ceil(r.getTime() % ie / be / s) * s,
+      i.setUTCMinutes(
+        Math.ceil(i.getTime() % re / be / s) * s,
         0,
         0
       );
       break;
     case "hours":
-      r.setUTCHours(
-        Math.ceil(r.getTime() % ce / ie / s) * s,
+      i.setUTCHours(
+        Math.ceil(i.getTime() % ce / re / s) * s,
         0,
         0,
         0
@@ -1386,42 +1393,42 @@ const St = (e, t, n = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? r.setUTCDate(1) : o === "years" && r.setUTCMonth(0, 1), i(), r.getTime() < e && (r = new Date(Y(r, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(Y(i, [1, o])));
       break;
   }
-  return r.getTime();
+  return i.getTime();
 }, jt = ({
   timeZone: e = Fe,
   space: t = Xe,
   formatter: n,
   locale: s,
   showTimezone: o
-} = {}) => (r, i) => {
-  const { min: c, max: l } = r;
-  if (!Number.isFinite(c) || !Number.isFinite(l))
+} = {}) => (i, r) => {
+  const { min: c, max: u } = i;
+  if (!Number.isFinite(c) || !Number.isFinite(u))
     return [];
-  const u = Math.floor(i.chartAreaCanvasPX.width / t) + 1, m = (l - c) / u, [a, p] = vt.find(
-    (w) => se(w) >= m
+  const l = Math.floor(r.chartAreaCanvasPX.width / t) + 1, d = (u - c) / l, [a, g] = vt.find(
+    (w) => se(w) >= d
   ) ?? [1, "milliseconds"];
-  if (!a || !p)
+  if (!a || !g)
     return [];
-  const d = St(c, [a, p], e), y = oe(d, e), h = [d];
-  let g;
+  const f = Ct(c, [a, g], e), y = oe(f, e), h = [f];
+  let m;
   for (; !(h.length > 1e3); ) {
-    switch (p) {
+    switch (g) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        g = Y(d, [h.length * a, p]);
+        m = Y(f, [h.length * a, g]);
         break;
       }
       case "days": {
-        const w = Y(d, [
+        const w = Y(f, [
           h.length * a,
-          p
+          g
         ]);
-        g = Y(w, [
+        m = Y(w, [
           y - oe(w, e),
           "hours"
         ]);
@@ -1430,22 +1437,22 @@ const St = (e, t, n = "UTC") => {
       case "months":
       case "years": {
         const w = Y(
-          Y(Y(d, [y, "hours"]), [
+          Y(Y(f, [y, "hours"]), [
             h.length * a,
-            p
+            g
           ]),
           [-y, "hours"]
         );
-        g = Y(w, [
+        m = Y(w, [
           y - oe(w, e),
           "hours"
         ]);
         break;
       }
     }
-    if (g > l)
+    if (m > u)
       break;
-    h.push(g);
+    h.push(m);
   }
   return (n ?? Pt({
     locale: s,
@@ -1470,30 +1477,30 @@ const St = (e, t, n = "UTC") => {
     timeZone: e
   });
   return (o) => {
-    const r = o[1] - o[0], i = r < se([1, "days"]), c = r < se([1, "minutes"]), l = r < se([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, f, m) => {
-      const a = m[f - 1], p = f === 0 || K(u.label, a.label, "year"), d = f === 0 || K(u.label, a.label, "day"), y = f === 0 || K(u.label, a.label, "month"), h = f === 0 || K(u.label, a.label, "hour"), g = f === 0 || K(u.label, a.label, "timeZoneName"), w = f === 0 || K(u.label, a.label, "minute"), x = f === 0 || K(u.label, a.label, "second"), b = f === 0 || K(u.label, a.label, "fractionalSecond"), v = [];
-      if (i && (h || w || g || x || b)) {
-        const T = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, E = u.label.find((P) => P.type === "timeZoneName")?.value;
-        let S = "";
+    const i = o[1] - o[0], r = i < se([1, "days"]), c = i < se([1, "minutes"]), u = i < se([1, "seconds"]);
+    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, p, d) => {
+      const a = d[p - 1], g = p === 0 || K(l.label, a.label, "year"), f = p === 0 || K(l.label, a.label, "day"), y = p === 0 || K(l.label, a.label, "month"), h = p === 0 || K(l.label, a.label, "hour"), m = p === 0 || K(l.label, a.label, "timeZoneName"), w = p === 0 || K(l.label, a.label, "minute"), x = p === 0 || K(l.label, a.label, "second"), T = p === 0 || K(l.label, a.label, "fractionalSecond"), v = [];
+      if (r && (h || w || 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;
+        let C = "";
         if (c) {
-          const P = u.label.find((z) => z.type === "second")?.value, k = u.label.find(
+          const P = l.label.find((z) => z.type === "second")?.value, A = l.label.find(
             (z) => z.type === "fractionalSecond"
           )?.value;
-          S = `:${P}` + (l ? `.${k}` : "");
+          C = `:${P}` + (u ? `.${A}` : "");
         }
         v.push(
-          `${T}:${C}${S}` + (n && g ? ` ${E}` : "")
+          `${b}:${S}${C}` + (n && m ? ` ${E}` : "")
         );
       }
-      return (d || y) && v.push(
+      return (f || y) && v.push(
         [
-          u.label.find((T) => T.type === "month")?.value,
-          d && u.label.find((T) => T.type === "day")?.value
+          l.label.find((b) => b.type === "month")?.value,
+          f && l.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), p && v.push(u.label.find((T) => T.type === "year")?.value), {
-        value: u.value,
-        label: v.filter((T) => T).join(`
+      ), g && v.push(l.label.find((b) => b.type === "year")?.value), {
+        value: l.value,
+        label: v.filter((b) => b).join(`
 `)
       };
     });
@@ -1516,7 +1523,7 @@ export {
   Ft as XTicks,
   Ot as YTicks,
   U as applyStyles,
-  re as clamp,
+  ie as clamp,
   V as clampXPosToChartArea,
   H as clampYPosToChartArea,
   F as deepEqual,
@@ -1528,7 +1535,7 @@ export {
   jt as makeTimeTicks,
   _ as posToVal,
   We as pxToValDistance,
-  At as sum,
+  kt as sum,
   j as useDrawEffect,
   Ue as useFrameState,
   xe as useInteractionsEvent,