@canplot/react 0.4.0 → 0.4.1

package/dist/canplot.mjs

@@ -2,14 +2,14 @@ var Oe = Object.defineProperty;
 var Ke = (e, t, n) => t in e ? Oe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var K = (e, t, n) => Ke(e, typeof t != "symbol" ? t + "" : t, n);
 import { jsxs as pe, jsx as R, Fragment as Fe } from "react/jsx-runtime";
-import D, { version as Ye, createContext as ye, forwardRef as ze, useRef as A, useState as z, useLayoutEffect as $, useMemo as oe, useCallback as Be, useContext as q, useId as Ne, useEffect as $e } from "react";
+import D, { version as Ye, createContext as ye, forwardRef as Be, useRef as A, useState as B, useMemo as J, useLayoutEffect as $, useCallback as ze, useContext as q, useId as Ne, useEffect as $e } from "react";
 const G = (e, t, n) => Math.min(Math.max(e, t), n), Mt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Et = (e, t) => {
   let n = 0;
   for (let s = 0; s < e.length; s++)
     Math.abs(e[s] - t) < Math.abs(e[n] - t) && (n = s);
   return n;
 }, je = (e, t, n, s) => {
-  const { min: o, max: r, origin: c } = X(e, n), i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = (c === "x" ? i.width : i.height) / (r - o);
+  const { min: o, max: c, origin: r } = X(e, n), i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = (r === "x" ? i.width : i.height) / (c - o);
   return t / a;
 }, X = (e, t) => {
   const n = e.scales.find((s) => s.id === t);
@@ -20,18 +20,18 @@ const G = (e, t, n) => Math.min(Math.max(e, t), n), Mt = (e) => e.reduce((t, n)
   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, { min: r, max: c, origin: i } = X(e, n), a = (i === "x" ? o.width : o.height) / (c - r);
+  const o = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, { min: c, max: r, origin: i } = X(e, n), a = (i === "x" ? o.width : o.height) / (r - c);
   return t * a;
 }, Z = (e, t, n, s) => {
-  const { min: o, origin: r } = X(e, n), c = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = ge(e, t - o, n, s);
-  return r === "x" ? G(
-    c.x + i,
-    c.x - 10 * c.width,
-    c.x + 11 * c.width
+  const { min: o, origin: c } = X(e, n), r = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, i = ge(e, t - o, n, s);
+  return c === "x" ? G(
+    r.x + i,
+    r.x - 10 * r.width,
+    r.x + 11 * r.width
   ) : G(
-    c.y + c.height - i,
-    c.y - 10 * c.height,
-    c.y + 11 * c.height
+    r.y + r.height - i,
+    r.y - 10 * r.height,
+    r.y + 11 * r.height
   );
 }, kt = (e, t, n) => {
   const { min: s, max: o } = X(e, n);
@@ -46,8 +46,8 @@ const G = (e, t, n) => Math.min(Math.max(e, t), n), Mt = (e) => e.reduce((t, n)
   const { min: s, max: o } = X(e, n);
   return t >= s && t <= o;
 }, _ = (e, t, n, s) => {
-  const { min: o, max: r, origin: c } = X(e, n), i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = c === "x" ? (t - i.x) / i.width : (i.height - t + i.y) / i.height;
-  return o + a * (r - o);
+  const { min: o, max: c, origin: r } = X(e, n), i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, a = r === "x" ? (t - i.x) / i.width : (i.height - t + i.y) / i.height;
+  return o + a * (c - o);
 }, O = (e, t) => {
   if (e === t) return !0;
   if (e == null || t == null || typeof e != typeof t || typeof e != "object" || Array.isArray(e) !== Array.isArray(t)) return !1;
@@ -77,12 +77,12 @@ const G = (e, t, n) => Math.min(Math.max(e, t), n), Mt = (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 c = o.y + o.height;
+        t.beginPath(), t.moveTo(o.x, c), t.lineTo(o.x + o.width, c), 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 c = o.x + o.width;
+      t.beginPath(), t.moveTo(c, o.y), t.lineTo(c, 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();
   }
@@ -96,8 +96,8 @@ function We(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), c = typeof o == "function";
+      n.push(c ? o : () => me(s, null));
     }
     return () => {
       for (const s of n) s();
@@ -118,9 +118,9 @@ const Ee = ye({
   }
 }), Ge = () => {
   const e = [];
-  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((r, c) => r[0] - c[0]), () => {
-    const r = e.findIndex(([, c]) => c === s);
-    r !== -1 && e.splice(r, 1);
+  return { listeners: e, subscribe: (s, o) => (e.push([o, s]), e.sort((c, r) => c[0] - r[0]), () => {
+    const c = e.findIndex(([, r]) => r === s);
+    c !== -1 && e.splice(c, 1);
   }), notifyListeners: () => {
     for (const [, s] of e)
       s();
@@ -154,16 +154,19 @@ class Re {
     return this.frame.ctx;
   }
 }
-const At = ze(({ configuration: e, children: t, style: n, className: s }, o) => {
-  const r = A(null), c = A(null), i = Je(c), [a, l] = z(() => null);
+const At = Be(({ configuration: e, children: t, style: n, className: s }, o) => {
+  const c = A(null), r = A(null), i = Je(r), [a, u] = B(null), m = J(
+    () => Qe(e, i, a),
+    [e, i, a]
+  );
   $(() => {
-    l(Qe(e, i, r.current));
-  }, [e, i, r]);
-  const m = window.devicePixelRatio || 1;
+    u(c.current?.getContext("2d") || null);
+  }, [c]);
+  const h = window.devicePixelRatio || 1;
   return /* @__PURE__ */ pe(
     "div",
     {
-      ref: qe([o, c]),
+      ref: qe([o, r]),
       className: s,
       style: {
         position: "relative",
@@ -175,9 +178,9 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         /* @__PURE__ */ R(
           "canvas",
           {
-            ref: r,
-            width: i.width * m,
-            height: i.height * m,
+            ref: c,
+            width: i.width * h,
+            height: i.height * h,
             style: {
               inset: 0,
               position: "absolute",
@@ -186,7 +189,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
             }
           }
         ),
-        a && /* @__PURE__ */ R(Ze, { frame: a, children: t })
+        m && /* @__PURE__ */ R(Ze, { frame: m, children: t })
       ]
     }
   );
@@ -194,14 +197,14 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   frame: e,
   children: t
 }) => {
-  const n = oe(Ge, []), [s, o] = z(0);
+  const n = J(Ge, []), [s, o] = B(0);
   $(() => {
     e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
   }, [e, s]);
-  const r = A(null);
-  r.current = e, $(() => {
+  const c = A(null);
+  c.current = e, $(() => {
     n.subscribe(() => {
-      r.current && Ve(r.current);
+      c.current && Ve(c.current);
     }, Ae.BOTTOM);
   }, [n]), $(() => {
     let i = null;
@@ -211,75 +214,75 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       i && cancelAnimationFrame(i);
     };
   }, [s, e, n]);
-  const c = Be(() => {
+  const r = ze(() => {
     o((i) => i + 1);
   }, [o]);
-  return /* @__PURE__ */ R(Ee.Provider, { value: n, children: /* @__PURE__ */ R(ke.Provider, { value: c, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
+  return /* @__PURE__ */ R(Ee.Provider, { value: n, children: /* @__PURE__ */ R(ke.Provider, { value: r, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
 }, Je = (e) => {
-  const [t, n] = z({
+  const [t, n] = B({
     width: 0,
     height: 0
-  }), [s] = z(() => new ResizeObserver((o) => {
-    for (const r of o) {
-      const c = Math.round(r.contentRect.width), i = Math.round(r.contentRect.height);
+  }), [s] = B(() => new ResizeObserver((o) => {
+    for (const c of o) {
+      const r = Math.round(c.contentRect.width), i = Math.round(c.contentRect.height);
       n(
-        (a) => a.width !== c || a.height !== i ? { ...a, width: c, height: i } : a
+        (a) => a.width !== r || a.height !== i ? { ...a, width: r, height: i } : a
       );
     }
   }));
   return $(() => {
     if (!e.current) return;
-    const o = e.current.clientWidth, r = e.current.clientHeight;
+    const o = e.current.clientWidth, c = e.current.clientHeight;
     return n(
-      (c) => c.width !== o || c.height !== r ? { ...c, width: o, height: r } : c
+      (r) => r.width !== o || r.height !== c ? { ...r, width: o, height: c } : r
     ), s.observe(e.current, { box: "border-box" }), () => s.disconnect();
   }, [s, e]), t;
 }, Qe = (e, t, n) => {
-  const s = n?.getContext("2d");
-  if (!s) return null;
-  const o = window.devicePixelRatio || 1;
+  if (!n)
+    return null;
+  const s = window.devicePixelRatio || 1;
   if (t.width === 0 || t.height === 0)
     return null;
-  const r = {
+  const o = {
     x: e.padding.left,
     y: e.padding.top,
     width: t.width - e.padding.left - e.padding.right,
     height: t.height - e.padding.top - e.padding.bottom
   };
-  for (const u of e.scales)
-    u.axis && (u.origin === "x" ? (u.axis.position === "bottom" || u.axis.position === "top") && (r.height = Math.max(
+  for (const l of e.scales)
+    l.axis && (l.origin === "x" ? (l.axis.position === "bottom" || l.axis.position === "top") && (o.height = Math.max(
       0,
-      r.height - u.axis.size
-    ), u.axis.position === "top" && (r.y += u.axis.size)) : (u.axis.position === "left" || u.axis.position === "right") && (r.width = Math.max(0, r.width - u.axis.size), u.axis.position === "left" && (r.x += u.axis.size)));
+      o.height - l.axis.size
+    ), l.axis.position === "top" && (o.y += l.axis.size)) : (l.axis.position === "left" || l.axis.position === "right") && (o.width = Math.max(0, o.width - l.axis.size), l.axis.position === "left" && (o.x += l.axis.size)));
   const c = {
-    x: r.x * o,
-    y: r.y * o,
-    width: r.width * o,
-    height: r.height * o
-  }, i = [];
-  let a = e.padding.left * o, l = s.canvas.width - e.padding.right * o, m = s.canvas.height - e.padding.bottom * o, d = e.padding.top * o;
-  for (const u of e.scales) {
-    if (!u.axis) {
-      i.push({ ...u, axis: null });
+    x: o.x * s,
+    y: o.y * s,
+    width: o.width * s,
+    height: o.height * s
+  }, r = [];
+  let i = e.padding.left * s, a = t.width * s - e.padding.right * s, u = t.height * s - e.padding.bottom * s, m = e.padding.top * s;
+  for (const l of e.scales) {
+    if (!l.axis) {
+      r.push({ ...l, axis: null });
       continue;
     }
-    let h;
-    if (u.origin === "x")
-      switch (u.axis.position) {
+    let p;
+    if (l.origin === "x")
+      switch (l.axis.position) {
         case "bottom":
-          m -= u.axis.size * o, h = {
-            x: r.x,
-            y: m / o,
-            width: r.width,
-            height: u.axis.size
+          u -= l.axis.size * s, p = {
+            x: o.x,
+            y: u / s,
+            width: o.width,
+            height: l.axis.size
           };
           break;
         case "top":
-          d += u.axis.size * o, h = {
-            x: r.x,
-            y: d / o - u.axis.size,
-            width: r.width,
-            height: u.axis.size
+          m += l.axis.size * s, p = {
+            x: o.x,
+            y: m / s - l.axis.size,
+            width: o.width,
+            height: l.axis.size
           };
           break;
         case "left":
@@ -287,84 +290,84 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (u.axis.position) {
+      switch (l.axis.position) {
         case "left":
-          a += u.axis.size * o, h = {
-            x: a / o - u.axis.size,
-            y: r.y,
-            width: u.axis.size,
-            height: r.height
+          i += l.axis.size * s, p = {
+            x: i / s - l.axis.size,
+            y: o.y,
+            width: l.axis.size,
+            height: o.height
           };
           break;
         case "right":
-          l -= u.axis.size * o, h = {
-            x: l / o,
-            y: r.y,
-            width: u.axis.size,
-            height: r.height
+          a -= l.axis.size * s, p = {
+            x: a / s,
+            y: o.y,
+            width: l.axis.size,
+            height: o.height
           };
           break;
         case "top":
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const y = {
-      x: h.x * o,
-      y: h.y * o,
-      width: h.width * o,
-      height: h.height * o
+    const d = {
+      x: p.x * s,
+      y: p.y * s,
+      width: p.width * s,
+      height: p.height * s
     };
-    i.push({
-      ...u,
+    r.push({
+      ...l,
       axis: {
-        ...u.axis,
-        cssRect: h,
-        canvasRect: y
+        ...l.axis,
+        cssRect: p,
+        canvasRect: d
       }
     });
   }
   return {
-    ctx: s,
-    dpr: o,
+    ctx: n,
+    dpr: s,
     padding: e.padding,
-    scales: i,
-    chartAreaCSS: r,
+    scales: r,
+    chartAreaCSS: o,
     chartAreaCanvasPX: c
   };
 }, j = (e, t, n) => {
-  const s = q(ve), o = q(ke), r = q(Ee);
+  const s = q(ve), o = q(ke), c = q(Ee);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const [c] = z(() => new Re());
-  c._updateFrame(s);
-  const i = A(c);
-  i.current = c;
+  const [r] = B(() => new Re());
+  r._updateFrame(s);
+  const i = A(r);
+  i.current = r;
   const a = A(t);
-  a.current = t, $(() => r.subscribe(
+  a.current = t, $(() => c.subscribe(
     () => {
-      a.current(c);
+      a.current(r);
     },
     typeof e == "number" ? e : Ae[e]
-  ), [r, e, c]), $(() => {
+  ), [c, e, r]), $(() => {
     o();
   }, [o, ...n]);
 }, De = () => {
   const e = q(ve);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
-  return oe(() => {
+  return J(() => {
     const t = new Re();
     return t._updateFrame(e), t;
   }, [e]);
 }, et = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
-  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: i, valToPos: a }) => {
-    r.save(), r.beginPath(), U(r, o);
-    for (const l of t) {
-      const m = c(a(l.x, n)), d = i(a(l.y, s));
-      r.lineTo(m, d);
+  ({ ctx: c, clampXPosToChartArea: r, clampYPosToChartArea: i, valToPos: a }) => {
+    c.save(), c.beginPath(), U(c, o);
+    for (const u of t) {
+      const m = r(a(u.x, n)), h = i(a(u.y, s));
+      c.lineTo(m, h);
     }
-    r.stroke(), r.restore();
+    c.stroke(), c.restore();
   },
   [t, n, s, o]
 ), null), Rt = D.memo(et, O), tt = ({
@@ -373,141 +376,141 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   xScaleId: n,
   yScaleId: s,
   xStrategy: o = "clip",
-  yStrategy: r = "clip",
-  radius: c = 5,
+  yStrategy: c = "clip",
+  radius: r = 5,
   style: i,
   globalAlpha: a
 }) => (j(
   e,
   ({
-    ctx: l,
+    ctx: u,
     valToPos: m,
-    valFits: d,
-    clampXPosToChartArea: p,
-    clampYPosToChartArea: u
+    valFits: h,
+    clampXPosToChartArea: l,
+    clampYPosToChartArea: p
   }) => {
-    l.save(), l.beginPath();
-    const h = new Path2D();
-    U(l, i), a !== void 0 && (l.globalAlpha = a);
+    u.save(), u.beginPath();
+    const d = new Path2D();
+    U(u, i), a !== void 0 && (u.globalAlpha = a);
     for (const y of t) {
       let f, g;
       switch (o) {
         case "clip":
-          if (!d(y.x, n))
+          if (!h(y.x, n))
             continue;
           f = m(y.x, n);
           break;
         case "clamp":
-          f = p(m(y.x, n), "canvas");
+          f = l(m(y.x, n), "canvas");
           break;
       }
-      switch (r) {
+      switch (c) {
         case "clip":
-          if (!d(y.y, s))
+          if (!h(y.y, s))
             continue;
           g = m(y.y, s);
           break;
         case "clamp":
-          g = u(m(y.y, s), "canvas");
+          g = p(m(y.y, s), "canvas");
           break;
       }
-      h.moveTo(f + c, g), h.arc(f, g, c, 0, Math.PI * 2);
+      d.moveTo(f + r, g), d.arc(f, g, r, 0, Math.PI * 2);
     }
-    l.fill(h), l.stroke(h), l.restore();
+    u.fill(d), u.stroke(d), u.restore();
   },
-  [t, n, s, c, i, a]
+  [t, n, s, r, i, a]
 ), null), Dt = D.memo(tt, O), nt = ({
   data: e,
   xScaleId: t,
   yScaleId: n,
   style: s,
   barWidth: o,
-  xPositionOffset: r,
-  radius: c,
+  xPositionOffset: c,
+  radius: r,
   layer: i = "MIDDLE"
 }) => (j(
   i,
   ({
     ctx: a,
-    valToPxDistance: l,
+    valToPxDistance: u,
     valToPos: m,
-    clampXPosToChartArea: d,
-    clampYPosToChartArea: p
+    clampXPosToChartArea: h,
+    clampYPosToChartArea: l
   }) => {
     if (e.length === 0) return;
     a.save(), U(a, s);
-    const u = l(o, t);
+    const p = u(o, t);
     a.beginPath();
-    for (const h of e) {
-      const f = m(h.x, t) - u / 2 + r * u, g = p(m(0, n)), w = p(m(h.y, n)), T = g - w, x = d(f), v = d(f + u) - x;
-      c ? a.roundRect(
+    for (const d of e) {
+      const f = m(d.x, t) - p / 2 + c * p, g = l(m(0, n)), w = l(m(d.y, n)), T = g - w, x = h(f), v = h(f + p) - x;
+      r ? a.roundRect(
         x,
         w,
         v,
         T,
-        c
+        r
       ) : a.rect(x, w, v, T);
     }
     a.closePath(), a.fill(), s?.strokeStyle && a.stroke(), a.restore();
   },
-  [e, t, n, s, o, r, c]
+  [e, t, n, s, o, c, r]
 ), null), It = D.memo(nt, O), st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
-  ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: i, valToPos: a }) => {
-    const l = [];
-    for (const d of t) {
-      const p = c(a(d.x, n)), u = i(a(d.y[0], s)), h = i(a(d.y[1], s));
-      l.push({ x: p, y: u }), l.unshift({ x: p, y: h });
+  ({ ctx: c, clampXPosToChartArea: r, clampYPosToChartArea: i, valToPos: a }) => {
+    const u = [];
+    for (const h of t) {
+      const l = r(a(h.x, n)), p = i(a(h.y[0], s)), d = i(a(h.y[1], s));
+      u.push({ x: l, y: p }), u.unshift({ x: l, y: d });
     }
-    const m = l[0];
+    const m = u[0];
     if (m) {
-      r.save(), r.beginPath(), U(r, o), r.moveTo(m.x, m.y);
-      for (const d of l)
-        r.lineTo(d.x, d.y);
-      r.closePath(), r.fill(), r.restore();
+      c.save(), c.beginPath(), U(c, o), c.moveTo(m.x, m.y);
+      for (const h of u)
+        c.lineTo(h.x, h.y);
+      c.closePath(), c.fill(), c.restore();
     }
   },
   [t, n, s, o]
-), null), Lt = D.memo(st, O), ot = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: r }) => (j(
+), null), Lt = D.memo(st, O), ot = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: c }) => (j(
   e,
-  ({ ctx: c, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: l }) => {
+  ({ ctx: r, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: u }) => {
     const m = [];
-    for (const h of t) {
-      const y = i(l(h.x, s)), f = a(l(h.y, o));
+    for (const d of t) {
+      const y = i(u(d.x, s)), f = a(u(d.y, o));
       m.push({ x: y, y: f });
     }
-    const d = m.at(0), p = m.at(-1);
-    if (!d || !p)
+    const h = m.at(0), l = m.at(-1);
+    if (!h || !l)
       return;
-    const u = a(l(0, o));
-    c.save(), c.beginPath(), U(c, r), c.moveTo(d.x, u);
-    for (const h of m)
-      c.lineTo(h.x, h.y);
-    if (c.lineTo(p.x, u), c.closePath(), c.fill(), n) {
-      c.beginPath(), c.moveTo(d.x, d.y);
-      for (const h of m)
-        c.lineTo(h.x, h.y);
-      c.stroke();
+    const p = a(u(0, o));
+    r.save(), r.beginPath(), U(r, c), r.moveTo(h.x, p);
+    for (const d of m)
+      r.lineTo(d.x, d.y);
+    if (r.lineTo(l.x, p), r.closePath(), r.fill(), n) {
+      r.beginPath(), r.moveTo(h.x, h.y);
+      for (const d of m)
+        r.lineTo(d.x, d.y);
+      r.stroke();
     }
-    c.restore();
+    r.restore();
   },
-  [t, n, s, o, r]
-), null), Ut = D.memo(ot, O), rt = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: r, ticks: c }) => (j(
+  [t, n, s, o, c]
+), null), Ut = D.memo(ot, O), rt = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: c, ticks: r }) => (j(
   e,
-  ({ ctx: i, valToPos: a, getScale: l, frame: m }) => {
-    const d = l(t);
-    if (!d || !d.axis || d.origin !== "x") return;
-    const p = d.axis, u = p.position === "top" ? p.canvasRect.y + p.canvasRect.height : p.canvasRect.y, h = window.devicePixelRatio || 1, y = u, f = (r ?? 6) * h, g = p.position === "top" ? u - f : u + f, w = (o ?? 12) * h;
+  ({ ctx: i, valToPos: a, getScale: u, frame: m }) => {
+    const h = u(t);
+    if (!h || !h.axis || h.origin !== "x") return;
+    const l = h.axis, p = l.position === "top" ? l.canvasRect.y + l.canvasRect.height : l.canvasRect.y, d = window.devicePixelRatio || 1, y = p, f = (c ?? 6) * d, g = l.position === "top" ? p - f : p + f, w = (o ?? 12) * d;
     i.save(), i.fontKerning = "auto", U(i, {
       ...n
     }), i.beginPath();
-    const T = Array.isArray(c) ? c : c({ ...d, axis: p }, m);
+    const T = Array.isArray(r) ? r : r({ ...h, axis: l }, m);
     for (const { value: x } of T) {
       const v = a(x, t, "canvas");
       i.moveTo(v, y), i.lineTo(v, g);
     }
     i.stroke(), i.restore(), i.save(), U(i, {
-      textBaseline: p.position === "top" ? "bottom" : "top",
+      textBaseline: l.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...n,
       ...s
@@ -516,25 +519,25 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       const b = a(x, t, "canvas"), S = v.split(`
 `);
       for (let E = 0; E < S.length; E++)
-        i.fillText(S[E], b, g + h * 2 + E * w);
+        i.fillText(S[E], b, g + d * 2 + E * w);
     }
     i.restore();
   },
-  [c, t, n, s]
-), null), _t = D.memo(rt, O), it = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: r, ticks: c }) => (j(
+  [r, t, n, s]
+), null), _t = D.memo(rt, O), it = ({ layer: e = "BOTTOM", scaleId: t, tickStyle: n, labelStyle: s, labelGap: o, tickSize: c, ticks: r }) => (j(
   e,
-  ({ ctx: i, valToPos: a, getScale: l, frame: m }) => {
-    const d = l(t);
-    if (!d || !d.axis || d.origin !== "y") return;
-    const p = d.axis, u = p.position === "left" ? p.canvasRect.x + p.canvasRect.width : p.canvasRect.x, h = u, y = r ?? 6, f = p.position === "left" ? u - y : u + y, g = o ?? 12, w = Array.isArray(c) ? c : c({ ...d, axis: p }, m);
+  ({ ctx: i, valToPos: a, getScale: u, frame: m }) => {
+    const h = u(t);
+    if (!h || !h.axis || h.origin !== "y") return;
+    const l = h.axis, p = l.position === "left" ? l.canvasRect.x + l.canvasRect.width : l.canvasRect.x, d = p, y = c ?? 6, f = l.position === "left" ? p - y : p + y, g = o ?? 12, w = Array.isArray(r) ? r : r({ ...h, axis: l }, m);
     i.save(), i.fontKerning = "auto", U(i, { ...n }), i.beginPath();
     for (const { value: T } of w) {
       const x = a(T, t, "canvas");
-      i.moveTo(h, x), i.lineTo(f, x);
+      i.moveTo(d, x), i.lineTo(f, x);
     }
     i.stroke(), i.restore(), i.save(), U(i, {
       textBaseline: "middle",
-      textAlign: p.position === "left" ? "right" : "left",
+      textAlign: l.position === "left" ? "right" : "left",
       ...n,
       ...s
     });
@@ -546,7 +549,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
     }
     i.restore();
   },
-  [c, t, n, s]
+  [r, t, n, s]
 ), null), Xt = D.memo(it, O), I = () => {
   const e = [];
   return {
@@ -577,8 +580,8 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   const s = D.useRef(n);
   s.current = n, D.useEffect(() => M[e].addEventListener(
     t,
-    (r, c) => {
-      s.current(c, r);
+    (c, r) => {
+      s.current(r, c);
     }
   ), [t, e, s]);
 }, we = D.createContext(""), xe = (e, t) => {
@@ -586,23 +589,23 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   return L(e, n, t);
 }, ct = (e, t, n, s, o) => {
   if (!t) return;
-  const r = s ?? n.scales.find((d) => d.origin === "x")?.id, c = o ?? n.scales.find((d) => d.origin === "y")?.id, i = e.clientX - t.left, a = r ? {
-    scaleId: r,
-    value: _(n, i, r, "css")
-  } : null, l = e.clientY - t.top, m = c ? {
+  const c = s ?? n.scales.find((h) => h.origin === "x")?.id, r = o ?? n.scales.find((h) => h.origin === "y")?.id, i = e.clientX - t.left, a = c ? {
     scaleId: c,
-    value: _(n, l, c, "css")
+    value: _(n, i, c, "css")
+  } : null, u = e.clientY - t.top, m = r ? {
+    scaleId: r,
+    value: _(n, u, r, "css")
   } : null;
-  return { pointerSyncPosition: { x: a, y: m }, cssX: i, cssY: l };
+  return { pointerSyncPosition: { x: a, y: m }, cssX: i, cssY: u };
 }, N = (e, t) => {
-  const { x: n, y: s } = e, o = n && t.scales.some((c) => c.id === n.scaleId) ? Z(t, n.value, n.scaleId, "css") : null, r = s && t.scales.some((c) => c.id === s.scaleId) ? Z(t, s.value, s.scaleId, "css") : null;
+  const { x: n, y: s } = e, o = n && t.scales.some((r) => r.id === n.scaleId) ? Z(t, n.value, n.scaleId, "css") : null, c = s && t.scales.some((r) => r.id === s.scaleId) ? Z(t, s.value, s.scaleId, "css") : null;
   return {
     cssX: o,
-    cssY: r,
+    cssY: c,
     scaled: Object.fromEntries(
-      t.scales.flatMap((c) => {
-        const i = c.origin === "y" ? r : o;
-        return i === null ? [] : [[c.id, _(t, i, c.id, "css")]];
+      t.scales.flatMap((r) => {
+        const i = r.origin === "y" ? c : o;
+        return i === null ? [] : [[r.id, _(t, i, r.id, "css")]];
       })
     )
   };
@@ -617,14 +620,14 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
     t.to,
     t.scaleId,
     "css"
-  ), r = n.scales.flatMap(
-    (c) => {
-      if (c.origin !== e)
+  ), c = n.scales.flatMap(
+    (r) => {
+      if (r.origin !== e)
         return [];
-      const i = _(n, s, c.id, "css"), a = _(n, o, c.id, "css");
+      const i = _(n, s, r.id, "css"), a = _(n, o, r.id, "css");
       return [
         {
-          scaleId: c.id,
+          scaleId: r.id,
           from: i,
           to: a
         }
@@ -634,7 +637,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   return {
     fromCSS: s,
     toCSS: o,
-    scaled: r
+    scaled: c
   };
 }, Ot = ({
   id: e,
@@ -642,51 +645,51 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   onDblClick: n,
   onMouseMove: s,
   onMouseDown: o,
-  onMouseUp: r,
-  onDocumentMouseUp: c,
+  onMouseUp: c,
+  onDocumentMouseUp: r,
   onSpanSelect: i,
   onContextMenu: a,
-  className: l,
+  className: u,
   style: m,
-  sync: d,
-  innerChildren: p,
-  children: u
+  sync: h,
+  innerChildren: l,
+  children: p
 }) => {
-  const h = Ne();
-  return L("dblclick", h, (y) => {
+  const d = Ne();
+  return L("dblclick", d, (y) => {
     n?.(y);
-  }), L("click", h, (y) => {
+  }), L("click", d, (y) => {
     t?.(y);
-  }), L("move", h, (y) => {
+  }), L("move", d, (y) => {
     s?.(y);
-  }), L("mousedown", h, (y) => {
+  }), L("mousedown", d, (y) => {
     o?.(y);
-  }), L("mouseup", h, (y) => {
-    r?.(y);
-  }), L("documentmouseup", h, (y) => {
+  }), L("mouseup", d, (y) => {
     c?.(y);
-  }), L("spanselect", h, (y) => {
+  }), L("documentmouseup", d, (y) => {
+    r?.(y);
+  }), L("spanselect", d, (y) => {
     i?.(y);
-  }), L("contextmenu", h, (y) => {
+  }), L("contextmenu", d, (y) => {
     a?.(y);
-  }), /* @__PURE__ */ pe(we.Provider, { value: h, children: [
+  }), /* @__PURE__ */ pe(we.Provider, { value: d, children: [
     /* @__PURE__ */ R(
       at,
       {
         id: e,
-        className: l,
+        className: u,
         style: m,
-        sync: d,
-        children: p
+        sync: h,
+        children: l
       }
     ),
-    u
+    p
   ] });
 }, at = ({ id: e, className: t, style: n, sync: s, children: o }) => {
-  const r = A(null), c = De().frame, i = A(c);
-  i.current = c;
-  const a = q(we), l = s?.key || a, m = A(null), d = A(null), p = A(null), u = () => {
-    const f = r.current?.parentElement;
+  const c = A(null), r = De().frame, i = A(r);
+  i.current = r;
+  const a = q(we), u = s?.key || a, m = A(null), h = A(null), l = A(null), p = () => {
+    const f = c.current?.parentElement;
     if (f) {
       if (f.dataset.canplotroot === void 0)
         throw new Error(
@@ -694,10 +697,10 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         );
       return f.getBoundingClientRect();
     }
-  }, h = (f, g) => {
+  }, d = (f, g) => {
     const w = ct(
       f,
-      u(),
+      p(),
       i.current,
       s?.xViaScaleId,
       s?.yViaScaleId
@@ -712,10 +715,10 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         metaKey: f.metaKey
       }
     );
-  }, y = A(h);
-  return y.current = h, $e(() => {
+  }, y = A(d);
+  return y.current = d, $e(() => {
     const f = (v) => {
-      const b = d.current;
+      const b = h.current;
       b && M.spanselect.dispatchEvent(a, {
         ...b,
         completed: !0
@@ -734,20 +737,20 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         altKey: v.altKey,
         shiftKey: v.shiftKey,
         metaKey: v.metaKey
-      }, S = p.current;
+      }, S = l.current;
       if (S && Object.entries(b).some(
         ([C, P]) => S.keys[C] !== P
       )) {
         const C = { ...S, keys: b };
-        p.current = C, M.sync_move.dispatchEvent(l, C);
+        l.current = C, M.sync_move.dispatchEvent(u, C);
       }
-      const E = d.current;
+      const E = h.current;
       if (E && Object.entries(b).some(
         ([C, P]) => E.keys[C] !== P
       )) {
         v.stopPropagation(), v.preventDefault();
         const C = { ...E, keys: b };
-        d.current = C, M.spanselect.dispatchEvent(a, C);
+        h.current = C, M.spanselect.dispatchEvent(a, C);
       }
     }, w = (v) => {
       y.current(
@@ -755,19 +758,19 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         (b, { cssX: S, cssY: E }, C) => {
           const P = m.current;
           if (!P || !b.x || !b.y) return;
-          const k = i.current, B = P.xRangeCss.start, ie = S, ce = P.yRangeCss.start, ae = E, le = X(k, b.x.scaleId), ue = X(k, b.y.scaleId);
+          const k = i.current, z = P.xRangeCss.start, ie = S, ce = P.yRangeCss.start, ae = E, le = X(k, b.x.scaleId), ue = X(k, b.y.scaleId);
           m.current = {
-            xRangeCss: { start: B, end: ie },
+            xRangeCss: { start: z, end: ie },
             yRangeCss: { start: ce, end: ae }
           };
           let W = "below_threshold";
-          const he = Math.abs(ce - ae), de = Math.abs(B - ie);
+          const he = Math.abs(ce - ae), de = Math.abs(z - ie);
           he < 10 && de < 10 ? W = "below_threshold" : he > 30 && de > 30 ? W = "box" : he > de ? W = "y" : W = "x";
           const Te = {
             scaleId: le.id,
             from: _(
               k,
-              V(i.current, B, "css"),
+              V(i.current, z, "css"),
               le.id,
               "css"
             ),
@@ -791,27 +794,27 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
               ue.id,
               "css"
             )
-          }, J = Te && Pe("x", Te, i.current), Q = Se && Pe("y", Se, i.current), _e = J?.scaled, Xe = Q?.scaled, Ce = {
+          }, Q = Te && Pe("x", Te, i.current), ee = Se && Pe("y", Se, i.current), _e = Q?.scaled, Xe = ee?.scaled, Ce = {
             mode: W,
             frame: i.current,
             completed: !1,
             x: {
-              css: J && {
-                from: J.fromCSS,
-                to: J.toCSS
+              css: Q && {
+                from: Q.fromCSS,
+                to: Q.toCSS
               },
               scaled: _e ?? []
             },
             y: {
-              css: Q && {
-                from: Q.fromCSS,
-                to: Q.toCSS
+              css: ee && {
+                from: ee.fromCSS,
+                to: ee.toCSS
               },
               scaled: Xe ?? []
             },
             keys: C
           };
-          d.current = Ce, M.spanselect.dispatchEvent(
+          h.current = Ce, M.spanselect.dispatchEvent(
             a,
             Ce
           );
@@ -839,18 +842,18 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       });
     };
     document.addEventListener("mouseup", f), document.addEventListener("keydown", g), document.addEventListener("keyup", g), document.addEventListener("mousemove", w);
-    const x = r.current;
+    const x = c.current;
     return x?.addEventListener("wheel", T, {
       passive: !1
     }), () => {
       document.removeEventListener("mouseup", f), document.removeEventListener("keydown", g), document.removeEventListener("keyup", g), document.removeEventListener("mousemove", w), x?.removeEventListener("wheel", T);
     };
-  }, [i, a, l, y]), L("sync_move", l, (f) => {
+  }, [i, a, u, y]), L("sync_move", u, (f) => {
     const g = f.positions ? N(
       f.positions,
       i.current
     ) : null;
-    p.current = f, M.move.dispatchEvent(a, {
+    l.current = f, M.move.dispatchEvent(a, {
       frame: i.current,
       pointer: g ?? null,
       keys: f.keys,
@@ -859,15 +862,15 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
   }), /* @__PURE__ */ R(
     "div",
     {
-      ref: r,
+      ref: c,
       id: e,
       className: t,
       style: {
         position: "absolute",
-        left: c.chartAreaCSS.x,
-        top: c.chartAreaCSS.y,
-        width: c.chartAreaCSS.width,
-        height: c.chartAreaCSS.height,
+        left: r.chartAreaCSS.x,
+        top: r.chartAreaCSS.y,
+        width: r.chartAreaCSS.width,
+        height: r.chartAreaCSS.height,
         zIndex: 25,
         ...n
       },
@@ -875,7 +878,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         f.preventDefault();
       },
       onClick: (f) => {
-        h(f, (g, w, T) => {
+        d(f, (g, w, T) => {
           const x = N(
             g,
             i.current
@@ -888,8 +891,8 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         });
       },
       onMouseLeave: (f) => {
-        h(f, (g, w, T) => {
-          M.sync_move.dispatchEvent(l, {
+        d(f, (g, w, T) => {
+          M.sync_move.dispatchEvent(u, {
             positions: null,
             keys: T,
             originInteractionsId: a
@@ -897,8 +900,8 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         });
       },
       onMouseMove: (f) => {
-        h(f, (g, w, T) => {
-          M.sync_move.dispatchEvent(l, {
+        d(f, (g, w, T) => {
+          M.sync_move.dispatchEvent(u, {
             positions: g,
             keys: T,
             originInteractionsId: a
@@ -906,7 +909,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         });
       },
       onMouseDown: (f) => {
-        h(f, (g, { cssX: w, cssY: T }, x) => {
+        d(f, (g, { cssX: w, cssY: T }, x) => {
           const v = N(
             g,
             i.current
@@ -922,7 +925,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         });
       },
       onMouseUp: (f) => {
-        h(f, (g, w, T) => {
+        d(f, (g, w, T) => {
           const x = N(
             g,
             i.current
@@ -933,8 +936,8 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
             pointer: x,
             keys: T
           });
-          const v = d.current;
-          d.current = null;
+          const v = h.current;
+          h.current = null;
           const b = m.current;
           if (m.current = null, b && v) {
             const S = {
@@ -942,7 +945,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
               keys: T,
               completed: !0
             };
-            d.current = null, M.spanselect.dispatchEvent(
+            h.current = null, M.spanselect.dispatchEvent(
               a,
               S
             );
@@ -950,7 +953,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         });
       },
       onContextMenu: (f) => {
-        f.preventDefault(), h(f, (g, w, T) => {
+        f.preventDefault(), d(f, (g, w, T) => {
           const x = N(
             g,
             i.current
@@ -963,7 +966,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         });
       },
       onDoubleClick: (f) => {
-        h(f, (g, w, T) => {
+        d(f, (g, w, T) => {
           const x = N(
             g,
             i.current
@@ -979,50 +982,50 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
     }
   );
 }, Kt = ({ data: e, renderTooltip: t, xScaleId: n }) => {
-  const [s, o] = z(null);
-  xe("move", (c) => {
-    o(c);
+  const [s, o] = B(null);
+  xe("move", (r) => {
+    o(r);
   });
-  const r = oe(() => {
+  const c = J(() => {
     if (!s)
       return null;
-    const { frame: c, pointer: i } = s, a = i?.scaled[n];
+    const { frame: r, pointer: i } = s, a = i?.scaled[n];
     if (a === void 0)
       return null;
-    const l = [];
+    const u = [];
     let m = a;
-    for (const d of e) {
-      let p = null, u = 1 / 0;
-      for (const [y, f] of d.points.entries()) {
-        if (!fe(c, f.x, n) || !fe(c, f.y, d.yScaleId))
+    for (const h of e) {
+      let l = null, p = 1 / 0;
+      for (const [y, f] of h.points.entries()) {
+        if (!fe(r, f.x, n) || !fe(r, f.y, h.yScaleId))
           continue;
         const g = Math.abs(f.x - a);
-        g < u && (u = g, p = y);
+        g < p && (p = g, l = y);
       }
-      const h = d.points[p ?? -1];
-      if (!h || ge(c, u, n, "css") > 30) {
-        l.push({ seriesId: d.seriesId, y: null });
+      const d = h.points[l ?? -1];
+      if (!d || ge(r, p, n, "css") > 30) {
+        u.push({ seriesId: h.seriesId, y: null });
         continue;
       }
-      m = h.x, l.push({
-        seriesId: d.seriesId,
-        y: h.y
+      m = d.x, u.push({
+        seriesId: h.seriesId,
+        y: d.y
       });
     }
     return {
-      frame: c,
+      frame: r,
       x: m,
-      points: l
+      points: u
     };
   }, [e, s, n]);
-  return t(r);
+  return t(c);
 }, Ft = ({ makeXStyle: e, makeXClassName: t, makeYStyle: n, makeYClassName: s }) => {
-  const [o, r] = z(null);
-  if (xe("move", (p) => {
-    r(p);
+  const [o, c] = B(null);
+  if (xe("move", (l) => {
+    c(l);
   }), !o)
     return null;
-  const { frame: c, pointer: i } = o, a = i?.cssX ?? null, l = i?.cssY ?? null, m = a ? V(c, a, "css") : 0, d = l ? H(c, l, "css") : 0;
+  const { frame: r, pointer: i } = o, a = i?.cssX ?? null, u = i?.cssY ?? null, m = a ? V(r, a, "css") : 0, h = u ? H(r, u, "css") : 0;
   return /* @__PURE__ */ pe(Fe, { children: [
     /* @__PURE__ */ R(
       "div",
@@ -1033,8 +1036,8 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
           position: "absolute",
           left: 0,
           visibility: a === null ? "hidden" : "visible",
-          top: c.chartAreaCSS.y,
-          height: c.chartAreaCSS.height,
+          top: r.chartAreaCSS.y,
+          height: r.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
@@ -1052,32 +1055,32 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
         "data-show": !!i,
         style: {
           position: "absolute",
-          visibility: l === null ? "hidden" : "visible",
+          visibility: u === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: c.chartAreaCSS.x,
-          width: c.chartAreaCSS.width,
+          left: r.chartAreaCSS.x,
+          width: r.chartAreaCSS.width,
           pointerEvents: "none",
           opacity: i ? 1 : 0,
-          transform: `translateY(${d}px)`,
+          transform: `translateY(${h}px)`,
           ...n?.(o)
         }
       }
     )
   ] });
 }, Yt = ({ makeClassName: e, makeStyle: t }) => {
-  const [n, s] = z(null);
-  xe("spanselect", (r) => {
+  const [n, s] = B(null);
+  xe("spanselect", (c) => {
     s(
-      r.mode === "below_threshold" || r.completed ? null : r
+      c.mode === "below_threshold" || c.completed ? null : c
     );
   });
-  const o = oe(() => {
+  const o = J(() => {
     if (!n || n.mode === "below_threshold")
       return null;
-    const r = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, c = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, i = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, a = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = V(n.frame, r, "css"), m = V(n.frame, c, "css"), d = H(n.frame, i, "css"), p = H(n.frame, a, "css"), u = Math.min(l, m), h = Math.min(d, p), y = Math.abs(m - l), f = Math.abs(p - d);
-    return { leftPx: u, topPx: h, widthPx: y, heightPx: f };
+    const c = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, r = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, i = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, a = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, u = V(n.frame, c, "css"), m = V(n.frame, r, "css"), h = H(n.frame, i, "css"), l = H(n.frame, a, "css"), p = Math.min(u, m), d = Math.min(h, l), y = Math.abs(m - u), f = Math.abs(l - h);
+    return { leftPx: p, topPx: d, widthPx: y, heightPx: f };
   }, [n]);
   return /* @__PURE__ */ R(
     "div",
@@ -1095,7 +1098,7 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       }
     }
   );
-}, zt = ({ style: e, children: t, scaleId: n, ...s }) => {
+}, Bt = ({ style: e, children: t, scaleId: n, ...s }) => {
   const o = De().getScale(n)?.axis;
   return o ? /* @__PURE__ */ R(
     "div",
@@ -1113,32 +1116,32 @@ const At = ze(({ configuration: e, children: t, style: n, className: s }, o) =>
       children: t
     }
   ) : null;
-}, Ie = 60, lt = 30, Le = "UTC", ut = "en-GB", Bt = ({
+}, Ie = 60, lt = 30, Le = "UTC", ut = "en-GB", zt = ({
   space: e,
   formatter: t,
   acceptableIncrements: n
 } = {}) => (s, o) => {
-  const { min: r, max: c } = s, i = [], a = window.devicePixelRatio || 1, l = (e ?? (s.origin === "x" ? Ie : lt)) * a, m = je(
+  const { min: c, max: r } = s, i = [], a = window.devicePixelRatio || 1, u = (e ?? (s.origin === "x" ? Ie : lt)) * a, m = je(
     o,
-    l,
+    u,
     s.id,
     "canvas"
-  ), d = n ?? ee, p = d.find((h) => h > m) ?? d.at(-1) ?? 1;
-  let u = r;
-  if (Math.abs(u % p) > Number.EPSILON) {
-    const h = (p - u % p) % p;
-    u += h;
+  ), h = n ?? te, l = h.find((d) => d > m) ?? h.at(-1) ?? 1;
+  let p = c;
+  if (Math.abs(p % l) > Number.EPSILON) {
+    const d = (l - p % l) % l;
+    p += d;
   }
-  for (; u <= c && i.length < 1e3; )
-    i.push(u), u += p;
+  for (; p <= r && i.length < 1e3; )
+    i.push(p), p += l;
   return (t ?? ht)(i);
 }, ht = (e) => {
   const t = Math.max(0, Math.ceil(-Math.log10(e[1] - e[0])));
   return e.map((n) => ({ value: n, label: n.toFixed(t) }));
-}, ee = [];
+}, te = [];
 for (let e = -12; e <= 12; e++)
-  ee.push(1 * 10 ** e), ee.push(2 * 10 ** e), ee.push(5 * 10 ** e);
-const dt = 1, Ue = 1e3 * dt, be = 60 * Ue, se = 60 * be, re = 24 * se, ft = 30 * re, mt = 365 * re, pt = [
+  te.push(1 * 10 ** e), te.push(2 * 10 ** e), te.push(5 * 10 ** e);
+const dt = 1, Ue = 1e3 * dt, be = 60 * Ue, oe = 60 * be, re = 24 * oe, ft = 30 * re, mt = 365 * re, pt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1190,7 +1193,7 @@ const dt = 1, Ue = 1e3 * dt, be = 60 * Ue, se = 60 * be, re = 24 * se, ft = 30 *
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], te = (e) => {
+], ne = (e) => {
   const [t, n] = e;
   switch (n) {
     case "milliseconds":
@@ -1200,7 +1203,7 @@ const dt = 1, Ue = 1e3 * dt, be = 60 * Ue, se = 60 * be, re = 24 * se, ft = 30 *
     case "minutes":
       return t * be;
     case "hours":
-      return t * se;
+      return t * oe;
     case "days":
       return t * re;
     case "months":
@@ -1245,38 +1248,38 @@ const dt = 1, Ue = 1e3 * dt, be = 60 * Ue, se = 60 * be, re = 24 * se, ft = 30 *
       return Me(e, n * 12);
   }
 };
-function ne(e, t) {
+function se(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 bt = (e, t, n = "UTC") => {
   const [s, o] = t;
-  let r = new Date(e);
-  const c = () => {
-    r.setUTCHours(-ne(r, n), 0, 0, 0);
+  let c = new Date(e);
+  const r = () => {
+    c.setUTCHours(-se(c, n), 0, 0, 0);
   };
   switch (o) {
     case "milliseconds":
-      r.setUTCMilliseconds(
-        Math.ceil(r.getUTCMilliseconds() / s) * s
+      c.setUTCMilliseconds(
+        Math.ceil(c.getUTCMilliseconds() / s) * s
       );
       break;
     case "seconds":
-      r.setUTCSeconds(
-        Math.ceil(r.getUTCSeconds() / s) * s,
+      c.setUTCSeconds(
+        Math.ceil(c.getUTCSeconds() / s) * s,
         0
       );
       break;
     case "minutes":
-      r.setUTCMinutes(
-        Math.ceil(r.getTime() % se / be / s) * s,
+      c.setUTCMinutes(
+        Math.ceil(c.getTime() % oe / be / s) * s,
         0,
         0
       );
       break;
     case "hours":
-      r.setUTCHours(
-        Math.ceil(r.getTime() % re / se / s) * s,
+      c.setUTCHours(
+        Math.ceil(c.getTime() % re / oe / s) * s,
         0,
         0,
         0
@@ -1285,37 +1288,37 @@ const bt = (e, t, n = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? r.setUTCDate(1) : o === "years" && r.setUTCMonth(0, 1), c(), r.getTime() < e && (r = new Date(Y(r, [1, o])));
+      o === "months" ? c.setUTCDate(1) : o === "years" && c.setUTCMonth(0, 1), r(), c.getTime() < e && (c = new Date(Y(c, [1, o])));
       break;
   }
-  return r.getTime();
+  return c.getTime();
 }, Nt = ({
   timeZone: e = Le,
   space: t = Ie,
   formatter: n,
   locale: s,
   showTimezone: o
-} = {}) => (r, c) => {
-  const { min: i, max: a } = r, l = Math.floor(c.chartAreaCanvasPX.width / t) + 1, d = (a - i) / l, [p, u] = pt.find(
-    (w) => te(w) >= d
-  ) ?? [1, "milliseconds"], h = bt(i, [p, u], e), y = ne(h, e), f = [h];
+} = {}) => (c, r) => {
+  const { min: i, max: a } = c, u = Math.floor(r.chartAreaCanvasPX.width / t) + 1, h = (a - i) / u, [l, p] = pt.find(
+    (w) => ne(w) >= h
+  ) ?? [1, "milliseconds"], d = bt(i, [l, p], e), y = se(d, e), f = [d];
   let g;
   for (; ; ) {
-    switch (u) {
+    switch (p) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        g = Y(h, [f.length * p, u]);
+        g = Y(d, [f.length * l, p]);
         break;
       }
       case "days": {
-        const w = Y(h, [
-          f.length * p,
-          u
+        const w = Y(d, [
+          f.length * l,
+          p
         ]);
         g = Y(w, [
-          y - ne(w, e),
+          y - se(w, e),
           "hours"
         ]);
         break;
@@ -1323,14 +1326,14 @@ const bt = (e, t, n = "UTC") => {
       case "months":
       case "years": {
         const w = Y(
-          Y(Y(h, [y, "hours"]), [
-            f.length * p,
-            u
+          Y(Y(d, [y, "hours"]), [
+            f.length * l,
+            p
           ]),
           [-y, "hours"]
         );
         g = Y(w, [
-          y - ne(w, e),
+          y - se(w, e),
           "hours"
         ]);
         break;
@@ -1363,15 +1366,15 @@ const bt = (e, t, n = "UTC") => {
     timeZone: e
   });
   return (o) => {
-    const r = o[1] - o[0], c = r < te([1, "days"]), i = r < te([1, "minutes"]), a = r < te([1, "seconds"]);
-    return o.map((l) => ({ value: l, label: s.formatToParts(new Date(l)) })).map((l, m, d) => {
-      const p = d[m - 1], u = m === 0 || F(l.label, p.label, "year"), h = m === 0 || F(l.label, p.label, "day"), y = m === 0 || F(l.label, p.label, "month"), f = m === 0 || F(l.label, p.label, "hour"), g = m === 0 || F(l.label, p.label, "timeZoneName"), w = m === 0 || F(l.label, p.label, "minute"), T = m === 0 || F(l.label, p.label, "second"), x = m === 0 || F(l.label, p.label, "fractionalSecond"), v = [];
-      if (c && (f || w || g || T || x)) {
-        const b = l.label.find((P) => P.type === "hour")?.value, S = l.label.find((P) => P.type === "minute")?.value, E = l.label.find((P) => P.type === "timeZoneName")?.value;
+    const c = o[1] - o[0], r = c < ne([1, "days"]), i = c < ne([1, "minutes"]), a = c < ne([1, "seconds"]);
+    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, m, h) => {
+      const l = h[m - 1], p = m === 0 || F(u.label, l.label, "year"), d = m === 0 || F(u.label, l.label, "day"), y = m === 0 || F(u.label, l.label, "month"), f = m === 0 || F(u.label, l.label, "hour"), g = m === 0 || F(u.label, l.label, "timeZoneName"), w = m === 0 || F(u.label, l.label, "minute"), T = m === 0 || F(u.label, l.label, "second"), x = m === 0 || F(u.label, l.label, "fractionalSecond"), v = [];
+      if (r && (f || w || g || T || x)) {
+        const b = u.label.find((P) => P.type === "hour")?.value, S = u.label.find((P) => P.type === "minute")?.value, E = u.label.find((P) => P.type === "timeZoneName")?.value;
         let C = "";
         if (i) {
-          const P = l.label.find((B) => B.type === "second")?.value, k = l.label.find(
-            (B) => B.type === "fractionalSecond"
+          const P = u.label.find((z) => z.type === "second")?.value, k = u.label.find(
+            (z) => z.type === "fractionalSecond"
           )?.value;
           C = `:${P}` + (a ? `.${k}` : "");
         }
@@ -1379,13 +1382,13 @@ const bt = (e, t, n = "UTC") => {
           `${b}:${S}${C}` + (n && g ? ` ${E}` : "")
         );
       }
-      return (h || y) && v.push(
+      return (d || y) && v.push(
         [
-          l.label.find((b) => b.type === "month")?.value,
-          h && l.label.find((b) => b.type === "day")?.value
+          u.label.find((b) => b.type === "month")?.value,
+          d && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), u && v.push(l.label.find((b) => b.type === "year")?.value), {
-        value: l.value,
+      ), p && v.push(u.label.find((b) => b.type === "year")?.value), {
+        value: u.value,
         label: v.filter((b) => b).join(`
 `)
       };
@@ -1394,7 +1397,7 @@ const bt = (e, t, n = "UTC") => {
 };
 export {
   Lt as AreaPlot,
-  zt as AxisOverlay,
+  Bt as AxisOverlay,
   It as BarPlot,
   Ae as CANPLOT_LAYER,
   At as CanPlot,
@@ -1417,7 +1420,7 @@ export {
   ht as defaultNumericalTicksFormatter,
   Et as findClosestIndex,
   X as getScale,
-  Bt as makeLinearTicks,
+  zt as makeLinearTicks,
   Tt as makeTimeTickFormat,
   Nt as makeTimeTicks,
   _ as posToVal,