@canplot/react 0.1.22 → 0.1.23

package/dist/canplot.mjs

@@ -1,13 +1,13 @@
-import { jsxs as ht, jsx as A, Fragment as It } from "react/jsx-runtime";
-import Q, { createContext as Ct, useContext as tt, useRef as _, useLayoutEffect as z, useEffect as Mt, version as Ut, forwardRef as Xt, useMemo as et, useState as V, useId as Kt } from "react";
-import { createStore as Et, useStore as Pt } from "zustand";
-const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t) => e + (t ?? 0), 0), me = (n, e) => {
+import { jsxs as Ct, jsx as k, Fragment as Ut } from "react/jsx-runtime";
+import Q, { createContext as Mt, useContext as tt, useRef as _, useLayoutEffect as z, useEffect as Et, version as Xt, forwardRef as Kt, useMemo as et, useState as V, useId as Ot } from "react";
+import { createStore as Pt, useStore as kt } from "zustand";
+const j = (n, e, t) => Math.min(Math.max(n, e), t), me = (n) => n.reduce((e, t) => e + (t ?? 0), 0), pe = (n, e) => {
   let t = 0;
   for (let s = 0; s < n.length; s++)
     Math.abs(n[s] - e) < Math.abs(n[t] - e) && (t = s);
   return t;
-}, Ot = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), d = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, h = (r === "x" ? d.width : d.height) / (i - o);
+}, Ft = (n, e, t, s) => {
+  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, h = (r === "x" ? l.width : l.height) / (i - o);
   return e / h;
 }, I = (n, e) => {
   const t = n.scales.find((s) => s.id === e);
@@ -18,20 +18,20 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t)
   const t = window.devicePixelRatio || 1;
   n.lineCap = e?.lineCap ?? "butt", n.lineDashOffset = t * (e?.lineDashOffset ?? 0), n.lineJoin = e?.lineJoin ?? "miter", n.lineWidth = t * (e?.lineWidth ?? 1), n.miterLimit = t * (e?.miterLimit ?? 10), n.strokeStyle = e?.strokeStyle ?? "black", n.fillStyle = e?.fillStyle ?? n.strokeStyle, n.font = e?.font ?? `${10 * t}px sans-serif`, n.textAlign = e?.textAlign ?? "start", n.direction = e?.direction ?? "inherit", n.textBaseline = e?.textBaseline ?? "alphabetic", n.fontKerning = e?.fontKerning ?? "auto";
 }, ft = (n, e, t, s) => {
-  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: d } = I(n, t), h = (d === "x" ? o.width : o.height) / (r - i);
+  const o = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, { min: i, max: r, origin: l } = I(n, t), h = (l === "x" ? o.width : o.height) / (r - i);
   return e * h;
 }, H = (n, e, t, s) => {
-  const { min: o, origin: i } = I(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, d = ft(n, e - o, t, s);
+  const { min: o, origin: i } = I(n, t), r = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, l = ft(n, e - o, t, s);
   return i === "x" ? j(
-    r.x + d,
+    r.x + l,
     r.x - 10 * r.width,
     r.x + 11 * r.width
   ) : j(
-    r.y + r.height - d,
+    r.y + r.height - l,
     r.y - 10 * r.height,
     r.y + 11 * r.height
   );
-}, pe = (n, e, t) => {
+}, xe = (n, e, t) => {
   const { min: s, max: o } = I(n, t);
   return j(e, s, o);
 }, Y = (n, e, t) => {
@@ -40,13 +40,13 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t)
 }, B = (n, e, t) => {
   const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
   return j(e, s.y, s.y + s.height);
-}, lt = (n, e, t) => {
+}, ut = (n, e, t) => {
   const { min: s, max: o } = I(n, t);
   return e >= s && e <= o;
 }, L = (n, e, t, s) => {
-  const { min: o, max: i, origin: r } = I(n, t), d = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, h = r === "x" ? (e - d.x) / d.width : (d.height - e + d.y) / d.height;
+  const { min: o, max: i, origin: r } = I(n, t), l = s === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS, h = r === "x" ? (e - l.x) / l.width : (l.height - e + l.y) / l.height;
   return o + h * (i - o);
-}, Ft = (n) => {
+}, zt = (n) => {
   const { ctx: e, scales: t } = n;
   for (const s of t) {
     if (!s.axis) continue;
@@ -70,12 +70,12 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t)
     } else s.axis.position === "right" && (e.beginPath(), e.moveTo(o.x, o.y), e.lineTo(o.x, o.y + o.height), e.stroke());
     e.restore();
   }
-}, ut = {
+}, dt = {
   TOP: 400,
   MIDDLE: 300,
   BOTTOM: 200,
   BACKGROUND: 100
-}, zt = () => Et((n, e) => {
+}, Yt = () => Pt((n, e) => {
   const t = () => {
     const s = e()._frame;
     if (!s) throw new Error("No frame set in frame store");
@@ -94,7 +94,7 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t)
       o,
       i ?? "canvas"
     ),
-    valFits: (s, o) => lt(t(), s, o),
+    valFits: (s, o) => ut(t(), s, o),
     getScale: (s) => I(t(), s),
     _listeners: [],
     _subscribe: (s, o) => (e()._listeners.push([o, s]), e()._listeners.sort((i, r) => i[0] - r[0]), () => {
@@ -106,13 +106,13 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t)
         o(s);
     }
   };
-}), Yt = () => Et((n) => ({
+}), Bt = () => Pt((n) => ({
   notify: () => {
     n((e) => ({ version: e.version + 1 }));
   },
   version: 0
-})), mt = Ct(null), kt = Ct(null), F = (n, e, t) => {
-  const s = tt(mt), o = tt(kt);
+})), mt = Mt(null), Rt = Mt(null), F = (n, e, t) => {
+  const s = tt(mt), o = tt(Rt);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
   const i = _(e);
@@ -122,72 +122,72 @@ const j = (n, e, t) => Math.min(Math.max(n, e), t), fe = (n) => n.reduce((e, t)
     (r) => {
       r._frame && i.current(r);
     },
-    typeof n == "number" ? n : ut[n]
-  )), [s, n]), Mt(() => {
+    typeof n == "number" ? n : dt[n]
+  )), [s, n]), Et(() => {
     o.getState().notify();
   }, [o, ...t]);
 }, pt = (n) => {
   const e = tt(mt);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
-  return Pt(
+  return kt(
     e,
     n ?? ((t) => t.getFrame())
   );
 };
-function Bt(n) {
+function Nt(n) {
   return (e) => {
-    for (const t of n) dt(t, e);
+    for (const t of n) ht(t, e);
   };
 }
-function Nt(n) {
+function $t(n) {
   return (e) => {
     const t = [];
     for (const s of n) {
-      const o = dt(s, e), i = typeof o == "function";
-      t.push(i ? o : () => dt(s, null));
+      const o = ht(s, e), i = typeof o == "function";
+      t.push(i ? o : () => ht(s, null));
     }
     return () => {
       for (const s of t) s();
     };
   };
 }
-function dt(n, e) {
+function ht(n, e) {
   if (typeof n == "function")
     return n(e);
   n && (n.current = e);
 }
-var $t = parseInt(Ut.split(".")[0], 10) >= 19 ? Nt : Bt;
-const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) => {
-  const i = _(null), r = _(null), d = jt(r), h = et(zt, []), u = et(Yt, []);
+var Vt = parseInt(Xt.split(".")[0], 10) >= 19 ? $t : Nt;
+const ye = Kt(({ configuration: n, children: e, style: t, className: s }, o) => {
+  const i = _(null), r = _(null), l = Ht(r), h = et(Yt, []), u = et(Bt, []);
   z(() => {
     h.setState({
-      _frame: Ht(n, d, i.current)
+      _frame: Wt(n, l, i.current)
     });
-    const c = h.getState();
-    c._notifyListeners(c);
-  }, [n, d, i, h]), z(() => h.getState()._subscribe((c) => {
-    const f = c._frame?.ctx;
-    f && f.clearRect(0, 0, f.canvas.width, f.canvas.height);
-  }, ut.BACKGROUND), [h]), z(() => h.getState()._subscribe((c) => {
-    c._frame && Ft(c._frame);
-  }, ut.BOTTOM), [h]), z(() => {
-    let c = !1;
+    const a = h.getState();
+    a._notifyListeners(a);
+  }, [n, l, i, h]), z(() => h.getState()._subscribe((a) => {
+    const m = a._frame?.ctx;
+    m && m.clearRect(0, 0, m.canvas.width, m.canvas.height);
+  }, dt.BACKGROUND), [h]), z(() => h.getState()._subscribe((a) => {
+    a._frame && zt(a._frame);
+  }, dt.BOTTOM), [h]), z(() => {
+    let a = !1;
     return u.subscribe(() => {
-      c || (c = !0, window.requestAnimationFrame(() => {
-        c = !1, h.setState((a) => ({
-          _frame: a._frame ? { ...a._frame } : null
+      a || (a = !0, window.requestAnimationFrame(() => {
+        a = !1, h.setState((c) => ({
+          _frame: c._frame ? { ...c._frame } : null
         }));
-        const f = h.getState();
-        f._notifyListeners(f);
+        const m = h.getState();
+        m._notifyListeners(m);
       }));
     });
   }, [u, h]);
-  const m = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ ht(
+  const f = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ Ct(
     "div",
     {
-      ref: $t([o, r]),
+      ref: Vt([o, r]),
       className: s,
       style: {
         position: "relative",
@@ -196,22 +196,22 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ A(
+        /* @__PURE__ */ k(
           "canvas",
           {
             ref: i,
-            width: d.width * m,
-            height: d.height * m,
+            width: l.width * f,
+            height: l.height * f,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${d.width}px`,
-              height: `${d.height}px`
+              width: `${l.width}px`,
+              height: `${l.height}px`
             }
           }
         ),
-        /* @__PURE__ */ A(
-          Vt,
+        /* @__PURE__ */ k(
+          jt,
           {
             frameStore: h,
             updateRequestStore: u,
@@ -221,15 +221,15 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
       ]
     }
   );
-}), Vt = ({ frameStore: n, updateRequestStore: e, children: t }) => Pt(n, (o) => !!o._frame) ? /* @__PURE__ */ A(kt.Provider, { value: e, children: /* @__PURE__ */ A(mt.Provider, { value: n, children: t }) }) : null, jt = (n) => {
+}), jt = ({ frameStore: n, updateRequestStore: e, children: t }) => kt(n, (o) => !!o._frame) ? /* @__PURE__ */ k(Rt.Provider, { value: e, children: /* @__PURE__ */ k(mt.Provider, { value: n, children: t }) }) : null, Ht = (n) => {
   const [e, t] = V({
     width: 0,
     height: 0
   }), [s] = V(() => new ResizeObserver((o) => {
     for (const i of o) {
-      const r = Math.round(i.contentRect.width), d = Math.round(i.contentRect.height);
+      const r = Math.round(i.contentRect.width), l = Math.round(i.contentRect.height);
       t(
-        (h) => h.width !== r || h.height !== d ? { ...h, width: r, height: d } : h
+        (h) => h.width !== r || h.height !== l ? { ...h, width: r, height: l } : h
       );
     }
   }));
@@ -240,7 +240,7 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
       (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
     ), s.observe(n.current, { box: "border-box" }), () => s.disconnect();
   }, [s, n]), e;
-}, Ht = (n, e, t) => {
+}, Wt = (n, e, t) => {
   const s = t?.getContext("2d");
   if (!s) return null;
   const o = window.devicePixelRatio || 1;
@@ -252,40 +252,40 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     width: e.width - n.padding.left - n.padding.right,
     height: e.height - n.padding.top - n.padding.bottom
   };
-  for (const a of n.scales)
-    a.axis && (a.origin === "x" ? (a.axis.position === "bottom" || a.axis.position === "top") && (i.height = Math.max(
+  for (const c of n.scales)
+    c.axis && (c.origin === "x" ? (c.axis.position === "bottom" || c.axis.position === "top") && (i.height = Math.max(
       0,
-      i.height - a.axis.size
-    ), a.axis.position === "top" && (i.y += a.axis.size)) : (a.axis.position === "left" || a.axis.position === "right") && (i.width = Math.max(0, i.width - a.axis.size), a.axis.position === "left" && (i.x += a.axis.size)));
+      i.height - c.axis.size
+    ), c.axis.position === "top" && (i.y += c.axis.size)) : (c.axis.position === "left" || c.axis.position === "right") && (i.width = Math.max(0, i.width - c.axis.size), c.axis.position === "left" && (i.x += c.axis.size)));
   const r = {
     x: i.x * o,
     y: i.y * o,
     width: i.width * o,
     height: i.height * o
-  }, d = [];
-  let h = n.padding.left * o, u = s.canvas.width - n.padding.right * o, m = s.canvas.height - n.padding.bottom * o, c = n.padding.top * o;
-  for (const a of n.scales) {
-    if (!a.axis) {
-      d.push({ ...a, axis: null });
+  }, l = [];
+  let h = n.padding.left * o, u = s.canvas.width - n.padding.right * o, f = s.canvas.height - n.padding.bottom * o, a = n.padding.top * o;
+  for (const c of n.scales) {
+    if (!c.axis) {
+      l.push({ ...c, axis: null });
       continue;
     }
-    let l;
-    if (a.origin === "x")
-      switch (a.axis.position) {
+    let p;
+    if (c.origin === "x")
+      switch (c.axis.position) {
         case "bottom":
-          m -= a.axis.size * o, l = {
+          f -= c.axis.size * o, p = {
             x: i.x,
-            y: m / o,
+            y: f / o,
             width: i.width,
-            height: a.axis.size
+            height: c.axis.size
           };
           break;
         case "top":
-          c += a.axis.size * o, l = {
+          a += c.axis.size * o, p = {
             x: i.x,
-            y: c / o - a.axis.size,
+            y: a / o - c.axis.size,
             width: i.width,
-            height: a.axis.size
+            height: c.axis.size
           };
           break;
         case "left":
@@ -293,20 +293,20 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (a.axis.position) {
+      switch (c.axis.position) {
         case "left":
-          h += a.axis.size * o, l = {
-            x: h / o - a.axis.size,
+          h += c.axis.size * o, p = {
+            x: h / o - c.axis.size,
             y: i.y,
-            width: a.axis.size,
+            width: c.axis.size,
             height: i.height
           };
           break;
         case "right":
-          u -= a.axis.size * o, l = {
+          u -= c.axis.size * o, p = {
             x: u / o,
             y: i.y,
-            width: a.axis.size,
+            width: c.axis.size,
             height: i.height
           };
           break;
@@ -314,18 +314,18 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const p = {
-      x: l.x * o,
-      y: l.y * o,
-      width: l.width * o,
-      height: l.height * o
+    const d = {
+      x: p.x * o,
+      y: p.y * o,
+      width: p.width * o,
+      height: p.height * o
     };
-    d.push({
-      ...a,
+    l.push({
+      ...c,
       axis: {
-        ...a.axis,
-        cssRect: l,
-        canvasRect: p
+        ...c.axis,
+        cssRect: p,
+        canvasRect: d
       }
     });
   }
@@ -333,39 +333,39 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     ctx: s,
     dpr: o,
     padding: n.padding,
-    scales: d,
+    scales: l,
     chartAreaCSS: i,
     chartAreaCanvasPX: r
   };
-}, ye = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
+}, ve = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
   n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: d, valToPos: h }) => {
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: h }) => {
     const u = i();
     u.save(), u.beginPath(), D(u, o);
-    for (const m of e) {
-      const c = r(h(m.x, t)), f = d(h(m.y, s));
-      u.lineTo(c, f);
+    for (const f of e) {
+      const a = r(h(f.x, t)), m = l(h(f.y, s));
+      u.lineTo(a, m);
     }
     u.stroke(), u.restore();
   },
   [e, t, s, o]
-), null), ve = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (F(
+), null), ge = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, radius: o = 5, style: i, globalAlpha: r }) => (F(
   n,
-  ({ getCtx: d, valToPos: h, valFits: u }) => {
-    const m = d();
-    m.save(), m.beginPath();
-    const c = new Path2D();
-    D(m, i), r !== void 0 && (m.globalAlpha = r);
-    for (const f of e) {
-      if (!u(f.x, t) || !u(f.y, s))
+  ({ getCtx: l, valToPos: h, valFits: u }) => {
+    const f = l();
+    f.save(), f.beginPath();
+    const a = new Path2D();
+    D(f, i), r !== void 0 && (f.globalAlpha = r);
+    for (const m of e) {
+      if (!u(m.x, t) || !u(m.y, s))
         continue;
-      const a = h(f.x, t), l = h(f.y, s);
-      c.moveTo(a + o, l), c.arc(a, l, o, 0, Math.PI * 2);
+      const c = h(m.x, t), p = h(m.y, s);
+      a.moveTo(c + o, p), a.arc(c, p, o, 0, Math.PI * 2);
     }
-    m.fill(c), m.stroke(c), m.restore();
+    f.fill(a), f.stroke(a), f.restore();
   },
   [e, t, s, o, i, r]
-), null), ge = ({
+), null), be = ({
   data: n,
   xScaleId: e,
   yScaleId: t,
@@ -373,76 +373,76 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
   barWidth: o,
   xPositionOffset: i,
   radius: r,
-  layer: d = "MIDDLE"
+  layer: l = "MIDDLE"
 }) => (F(
-  d,
+  l,
   ({
     getCtx: h,
     valToPxDistance: u,
-    valToPos: m,
-    clampXPosToChartArea: c,
-    clampYPosToChartArea: f
+    valToPos: f,
+    clampXPosToChartArea: a,
+    clampYPosToChartArea: m
   }) => {
     if (n.length === 0) return;
-    const a = h();
-    a.save(), D(a, s);
-    const l = u(o, e);
-    a.beginPath();
-    for (const p of n) {
-      const x = m(p.x, e) - l / 2 + i * l, g = f(m(0, t)), y = f(m(p.y, t)), w = g - y, S = c(x), b = c(x + l) - S;
-      r ? a.roundRect(
-        S,
-        y,
+    const c = h();
+    c.save(), D(c, s);
+    const p = u(o, e);
+    c.beginPath();
+    for (const d of n) {
+      const v = f(d.x, e) - p / 2 + i * p, g = m(f(0, t)), S = m(f(d.y, t)), y = g - S, b = a(v), w = a(v + p) - b;
+      r ? c.roundRect(
         b,
+        S,
         w,
+        y,
         r
-      ) : a.rect(S, y, b, w);
+      ) : c.rect(b, S, w, y);
     }
-    a.closePath(), a.fill(), s?.strokeStyle && a.stroke(), a.restore();
+    c.closePath(), c.fill(), s?.strokeStyle && c.stroke(), c.restore();
   },
   [n, e, t, s, o, i, r]
 ), null), we = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
   n,
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: d, valToPos: h }) => {
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: l, valToPos: h }) => {
     const u = [];
-    for (const c of e) {
-      const f = r(h(c.x, t)), a = d(h(c.y[0], s)), l = d(h(c.y[1], s));
-      u.push({ x: f, y: a }), u.unshift({ x: f, y: l });
+    for (const a of e) {
+      const m = r(h(a.x, t)), c = l(h(a.y[0], s)), p = l(h(a.y[1], s));
+      u.push({ x: m, y: c }), u.unshift({ x: m, y: p });
     }
-    const m = i();
+    const f = i();
     if (u.length > 0) {
-      m.save(), m.beginPath(), D(m, o), m.moveTo(u[0].x, u[0].y);
-      for (const c of u)
-        m.lineTo(c.x, c.y);
-      m.closePath(), m.fill(), m.restore();
+      f.save(), f.beginPath(), D(f, o), f.moveTo(u[0].x, u[0].y);
+      for (const a of u)
+        f.lineTo(a.x, a.y);
+      f.closePath(), f.fill(), f.restore();
     }
   },
   [e, t, s, o]
-), null), be = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (F(
+), null), Se = ({ layer: n = "MIDDLE", data: e, stroked: t, xScaleId: s, yScaleId: o, style: i }) => (F(
   n,
-  ({ getCtx: r, clampXPosToChartArea: d, clampYPosToChartArea: h, valToPos: u }) => {
-    const m = [], c = r();
-    for (const p of e) {
-      const v = d(u(p.x, s)), x = h(u(p.y, o));
-      m.push({ x: v, y: x });
+  ({ getCtx: r, clampXPosToChartArea: l, clampYPosToChartArea: h, valToPos: u }) => {
+    const f = [], a = r();
+    for (const d of e) {
+      const x = l(u(d.x, s)), v = h(u(d.y, o));
+      f.push({ x, y: v });
     }
-    const f = m.at(0), a = m.at(-1);
-    if (!f || !a)
+    const m = f.at(0), c = f.at(-1);
+    if (!m || !c)
       return;
-    const l = h(u(0, o));
-    c.save(), c.beginPath(), D(c, i), c.moveTo(f.x, l);
-    for (const p of m)
-      c.lineTo(p.x, p.y);
-    if (c.lineTo(a.x, l), c.closePath(), c.fill(), t) {
-      c.beginPath(), c.moveTo(f.x, f.y);
-      for (const p of m)
-        c.lineTo(p.x, p.y);
-      c.stroke();
+    const p = h(u(0, o));
+    a.save(), a.beginPath(), D(a, i), a.moveTo(m.x, p);
+    for (const d of f)
+      a.lineTo(d.x, d.y);
+    if (a.lineTo(c.x, p), a.closePath(), a.fill(), t) {
+      a.beginPath(), a.moveTo(m.x, m.y);
+      for (const d of f)
+        a.lineTo(d.x, d.y);
+      a.stroke();
     }
-    c.restore();
+    a.restore();
   },
   [e, t, s, o, i]
-), null), Se = (n, e) => pt(
+), null), Te = (n, e) => pt(
   ({
     clampXPosToChartArea: t,
     clampYPosToChartArea: s,
@@ -450,82 +450,82 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     valToPos: i,
     valFits: r
   }) => {
-    const d = {};
+    const l = {};
     for (const h in n) {
       const u = n[h];
       switch (u.exceeding) {
         case "discard": {
           if (r(u.value, u.scaleId)) {
-            const m = i(u.value, u.scaleId, e);
-            d[h] = m;
+            const f = i(u.value, u.scaleId, e);
+            l[h] = f;
           }
           break;
         }
         case "clamp": {
-          const m = i(u.value, u.scaleId, e);
-          d[h] = o(u.scaleId)?.origin === "x" ? t(m, e) : s(m, e);
+          const f = i(u.value, u.scaleId, e);
+          l[h] = o(u.scaleId)?.origin === "x" ? t(f, e) : s(f, e);
           break;
         }
       }
     }
-    return d;
+    return l;
   }
-), Te = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
+), Ce = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
   n,
-  ({ getCtx: d, valToPos: h, getScale: u, getFrame: m }) => {
-    const c = d(), f = u(e);
-    if (!f || !f.axis || f.origin !== "x") return;
-    const a = f.axis, l = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, p = window.devicePixelRatio || 1, v = l, x = (i ?? 6) * p, g = a.position === "top" ? l - x : l + x, y = (o ?? 12) * p;
-    c.save(), c.fontKerning = "auto", D(c, {
+  ({ getCtx: l, valToPos: h, getScale: u, getFrame: f }) => {
+    const a = l(), m = u(e);
+    if (!m || !m.axis || m.origin !== "x") return;
+    const c = m.axis, p = c.position === "top" ? c.canvasRect.y + c.canvasRect.height : c.canvasRect.y, d = window.devicePixelRatio || 1, x = p, v = (i ?? 6) * d, g = c.position === "top" ? p - v : p + v, S = (o ?? 12) * d;
+    a.save(), a.fontKerning = "auto", D(a, {
       ...t
-    }), c.beginPath();
-    const w = Array.isArray(r) ? r : r({ ...f, axis: a }, m());
-    for (const { value: S } of w) {
-      const b = h(S, e, "canvas");
-      c.moveTo(b, v), c.lineTo(b, g);
+    }), a.beginPath();
+    const y = Array.isArray(r) ? r : r({ ...m, axis: c }, f());
+    for (const { value: b } of y) {
+      const w = h(b, e, "canvas");
+      a.moveTo(w, x), a.lineTo(w, g);
     }
-    c.stroke(), c.restore(), c.save(), D(c, {
-      textBaseline: a.position === "top" ? "bottom" : "top",
+    a.stroke(), a.restore(), a.save(), D(a, {
+      textBaseline: c.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...t,
       ...s
     });
-    for (const { value: S, label: b } of w) {
-      const T = h(S, e, "canvas"), C = b.split(`
+    for (const { value: b, label: w } of y) {
+      const P = h(b, e, "canvas"), T = w.split(`
 `);
-      for (let M = 0; M < C.length; M++)
-        c.fillText(C[M], T, g + p * 2 + M * y);
+      for (let M = 0; M < T.length; M++)
+        a.fillText(T[M], P, g + d * 2 + M * S);
     }
-    c.restore();
+    a.restore();
   },
   [r, e, t, s]
-), null), Ce = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
+), null), Me = ({ layer: n = "BOTTOM", scaleId: e, tickStyle: t, labelStyle: s, labelGap: o, tickSize: i, ticks: r }) => (F(
   n,
-  ({ getCtx: d, valToPos: h, getScale: u, getFrame: m }) => {
-    const c = d(), f = u(e);
-    if (!f || !f.axis || f.origin !== "y") return;
-    const a = f.axis, l = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, p = l, v = i ?? 6, x = a.position === "left" ? l - v : l + v, g = o ?? 12, y = Array.isArray(r) ? r : r({ ...f, axis: a }, m());
-    c.save(), c.fontKerning = "auto", D(c, { ...t }), c.beginPath();
-    for (const { value: w } of y) {
-      const S = h(w, e, "canvas");
-      c.moveTo(p, S), c.lineTo(x, S);
+  ({ getCtx: l, valToPos: h, getScale: u, getFrame: f }) => {
+    const a = l(), m = u(e);
+    if (!m || !m.axis || m.origin !== "y") return;
+    const c = m.axis, p = c.position === "left" ? c.canvasRect.x + c.canvasRect.width : c.canvasRect.x, d = p, x = i ?? 6, v = c.position === "left" ? p - x : p + x, g = o ?? 12, S = Array.isArray(r) ? r : r({ ...m, axis: c }, f());
+    a.save(), a.fontKerning = "auto", D(a, { ...t }), a.beginPath();
+    for (const { value: y } of S) {
+      const b = h(y, e, "canvas");
+      a.moveTo(d, b), a.lineTo(v, b);
     }
-    c.stroke(), c.restore(), c.save(), D(c, {
+    a.stroke(), a.restore(), a.save(), D(a, {
       textBaseline: "middle",
-      textAlign: a.position === "left" ? "right" : "left",
+      textAlign: c.position === "left" ? "right" : "left",
       ...t,
       ...s
     });
-    for (const { value: w, label: S } of y) {
-      const b = h(w, e, "canvas"), T = S.split(`
+    for (const { value: y, label: b } of S) {
+      const w = h(y, e, "canvas"), P = b.split(`
 `);
-      for (let C = 0; C < T.length; C++)
-        c.fillText(` ${T[C]} `, x, b + C * g);
+      for (let T = 0; T < P.length; T++)
+        a.fillText(` ${P[T]} `, v, w + T * g);
     }
-    c.restore();
+    a.restore();
   },
   [r, e, t, s]
-), null), k = () => {
+), null), R = () => {
   const n = [];
   return {
     addEventListener: (e, t) => (n.push({
@@ -541,17 +541,17 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     }
   };
 }, E = {
-  dblclick: k(),
-  click: k(),
-  contextmenu: k(),
-  move: k(),
-  mousedown: k(),
-  mouseup: k(),
-  spanselect: k(),
-  documentmouseup: k(),
-  pressandwheel: k(),
-  sync_move: k()
-}, R = (n, e, t) => {
+  dblclick: R(),
+  click: R(),
+  contextmenu: R(),
+  move: R(),
+  mousedown: R(),
+  mouseup: R(),
+  spanselect: R(),
+  documentmouseup: R(),
+  pressandwheel: R(),
+  sync_move: R()
+}, A = (n, e, t) => {
   const s = Q.useRef(t);
   s.current = t, Q.useEffect(() => E[n].addEventListener(
     e,
@@ -561,20 +561,20 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
   ), [e, n, s]);
 }, xt = Q.createContext(""), yt = (n, e) => {
   const t = Q.useContext(xt);
-  return R(n, t, e);
-}, Wt = (n, e, t, s, o) => {
+  return A(n, t, e);
+}, qt = (n, e, t, s, o) => {
   if (!e) return;
-  const i = s ?? t.scales.find((c) => c.origin === "x")?.id, r = o ?? t.scales.find((c) => c.origin === "y")?.id;
+  const i = s ?? t.scales.find((a) => a.origin === "x")?.id, r = o ?? t.scales.find((a) => a.origin === "y")?.id;
   if (!i || !r)
     return;
-  const d = n.clientX - e.left, h = {
+  const l = n.clientX - e.left, h = {
     scaleId: i,
-    value: L(t, d, i, "css")
-  }, u = n.clientY - e.top, m = {
+    value: L(t, l, i, "css")
+  }, u = n.clientY - e.top, f = {
     scaleId: r,
     value: L(t, u, r, "css")
   };
-  return { pointerSyncPosition: { x: h, y: m }, cssX: d, cssY: u };
+  return { pointerSyncPosition: { x: h, y: f }, cssX: l, cssY: u };
 }, O = (n, e) => {
   const { x: t, y: s } = n, o = t && e.scales.some((r) => r.id === t.scaleId) ? H(e, t.value, t.scaleId, "css") : null, i = s && e.scales.some((r) => r.id === s.scaleId) ? H(e, s.value, s.scaleId, "css") : null;
   return {
@@ -582,8 +582,8 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     cssY: i,
     scaled: Object.fromEntries(
       e.scales.flatMap((r) => {
-        const d = r.origin === "y" ? i : o;
-        return d === null ? [] : [[r.id, L(e, d, r.id, "css")]];
+        const l = r.origin === "y" ? i : o;
+        return l === null ? [] : [[r.id, L(e, l, r.id, "css")]];
       })
     )
   };
@@ -602,11 +602,11 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     (r) => {
       if (r.origin !== n)
         return [];
-      const d = L(t, s, r.id, "css"), h = L(t, o, r.id, "css");
+      const l = L(t, s, r.id, "css"), h = L(t, o, r.id, "css");
       return [
         {
           scaleId: r.id,
-          from: d,
+          from: l,
           to: h
         }
       ];
@@ -617,7 +617,7 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
     toCSS: o,
     scaled: i
   };
-}, Me = ({
+}, Ee = ({
   id: n,
   onClick: e,
   onDblClick: t,
@@ -625,80 +625,78 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
   onMouseDown: o,
   onMouseUp: i,
   onDocumentMouseUp: r,
-  onSpanSelect: d,
+  onSpanSelect: l,
   onContextMenu: h,
   className: u,
-  style: m,
-  sync: c,
-  children: f
+  style: f,
+  sync: a,
+  children: m
 }) => {
-  const a = Kt(), l = n || a;
-  return R("dblclick", l, (p) => {
-    t?.(p);
-  }), R("click", l, (p) => {
-    e?.(p);
-  }), R("move", l, (p) => {
-    s?.(p);
-  }), R("mousedown", l, (p) => {
-    o?.(p);
-  }), R("mouseup", l, (p) => {
-    i?.(p);
-  }), R("documentmouseup", l, (p) => {
-    r?.(p);
-  }), R("spanselect", l, (p) => {
-    d?.(p);
-  }), R("contextmenu", l, (p) => {
-    h?.(p);
-  }), /* @__PURE__ */ ht(xt.Provider, { value: l, children: [
-    /* @__PURE__ */ A(
-      qt,
-      {
-        className: u,
-        style: m,
-        sync: c
-      }
-    ),
-    f
-  ] });
-}, qt = ({ className: n, style: e, sync: t }) => {
-  const s = _(null), o = pt(), i = _(o);
-  i.current = o;
-  const r = tt(xt), d = t?.key || r, h = _(null), u = _(null), m = _(null), c = () => {
-    const l = s.current?.parentElement;
-    if (l) {
-      if (l.dataset.canplotroot === void 0)
+  const c = Ot(), p = n || c;
+  return A("dblclick", p, (d) => {
+    t?.(d);
+  }), A("click", p, (d) => {
+    e?.(d);
+  }), A("move", p, (d) => {
+    s?.(d);
+  }), A("mousedown", p, (d) => {
+    o?.(d);
+  }), A("mouseup", p, (d) => {
+    i?.(d);
+  }), A("documentmouseup", p, (d) => {
+    r?.(d);
+  }), A("spanselect", p, (d) => {
+    l?.(d);
+  }), A("contextmenu", p, (d) => {
+    h?.(d);
+  }), /* @__PURE__ */ k(xt.Provider, { value: p, children: /* @__PURE__ */ k(
+    Gt,
+    {
+      className: u,
+      style: f,
+      sync: a,
+      children: m
+    }
+  ) });
+}, Gt = ({ className: n, style: e, sync: t, children: s }) => {
+  const o = _(null), i = pt(), r = _(i);
+  r.current = i;
+  const l = tt(xt), h = t?.key || l, u = _(null), f = _(null), a = _(null), m = () => {
+    const d = o.current?.parentElement;
+    if (d) {
+      if (d.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return l.getBoundingClientRect();
+      return d.getBoundingClientRect();
     }
-  }, f = (l, p) => {
-    const v = Wt(
-      l,
-      c(),
-      i.current,
+  }, c = (d, x) => {
+    const v = qt(
+      d,
+      m(),
+      r.current,
       t?.xViaScaleId,
       t?.yViaScaleId
     );
-    v && p(
+    v && x(
       v.pointerSyncPosition,
       { cssX: v.cssX, cssY: v.cssY },
       {
-        ctrlKey: l.ctrlKey,
-        altKey: l.altKey,
-        shiftKey: l.shiftKey,
-        metaKey: l.metaKey
+        ctrlKey: d.ctrlKey,
+        altKey: d.altKey,
+        shiftKey: d.shiftKey,
+        metaKey: d.metaKey
       }
     );
-  }, a = _(f);
-  return a.current = f, Mt(() => {
-    const l = (y) => {
-      const w = u.current;
-      w && E.spanselect.dispatchEvent(r, {
-        ...w,
+  }, p = _(c);
+  return p.current = c, Et(() => {
+    const d = (y) => {
+      const b = f.current;
+      b && E.spanselect.dispatchEvent(l, {
+        ...b,
         completed: !0
-      }), E.documentmouseup.dispatchEvent(r, {
-        frame: i.current,
+      }), E.documentmouseup.dispatchEvent(l, {
+        frame: r.current,
         keys: {
           ctrlKey: y.ctrlKey,
           altKey: y.altKey,
@@ -706,253 +704,254 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
           metaKey: y.metaKey
         }
       });
-    }, p = (y) => {
-      const w = {
+    }, x = (y) => {
+      const b = {
         ctrlKey: y.ctrlKey,
         altKey: y.altKey,
         shiftKey: y.shiftKey,
         metaKey: y.metaKey
-      }, S = m.current;
-      if (S && Object.entries(w).some(
-        ([T, C]) => S.keys[T] !== C
+      }, w = a.current;
+      if (w && Object.entries(b).some(
+        ([T, M]) => w.keys[T] !== M
       )) {
-        const T = { ...S, keys: w };
-        m.current = T, E.sync_move.dispatchEvent(d, T);
+        const T = { ...w, keys: b };
+        a.current = T, E.sync_move.dispatchEvent(h, T);
       }
-      const b = u.current;
-      if (b && Object.entries(w).some(
-        ([T, C]) => b.keys[T] !== C
+      const P = f.current;
+      if (P && Object.entries(b).some(
+        ([T, M]) => P.keys[T] !== M
       )) {
         y.stopPropagation(), y.preventDefault();
-        const T = { ...b, keys: w };
-        u.current = T, E.spanselect.dispatchEvent(r, T);
+        const T = { ...P, keys: b };
+        f.current = T, E.spanselect.dispatchEvent(l, T);
       }
     }, v = (y) => {
-      a.current(
+      p.current(
         y,
-        (w, { cssX: S, cssY: b }, T) => {
-          const C = h.current;
-          if (!C || !w.x || !w.y) return;
-          const M = i.current, P = C.xRangeCss.start, N = S, K = C.yRangeCss.start, ot = b, it = I(M, w.x.scaleId), rt = I(M, w.y.scaleId);
-          h.current = {
-            xRangeCss: { start: P, end: N },
-            yRangeCss: { start: K, end: ot }
+        (b, { cssX: w, cssY: P }, T) => {
+          const M = u.current;
+          if (!M || !b.x || !b.y) return;
+          const C = r.current, N = M.xRangeCss.start, K = w, ot = M.yRangeCss.start, it = P, rt = I(C, b.x.scaleId), ct = I(C, b.y.scaleId);
+          u.current = {
+            xRangeCss: { start: N, end: K },
+            yRangeCss: { start: ot, end: it }
           };
           let $ = "below_threshold";
-          const ct = Math.abs(K - ot), at = Math.abs(P - N);
-          ct < 10 && at < 10 ? $ = "below_threshold" : ct > 30 && at > 30 ? $ = "box" : ct > at ? $ = "y" : $ = "x";
+          const at = Math.abs(ot - it), lt = Math.abs(N - K);
+          at < 10 && lt < 10 ? $ = "below_threshold" : at > 30 && lt > 30 ? $ = "box" : at > lt ? $ = "y" : $ = "x";
           const gt = {
-            scaleId: it.id,
+            scaleId: rt.id,
             from: L(
-              M,
-              Y(i.current, P, "css"),
-              it.id,
+              C,
+              Y(r.current, N, "css"),
+              rt.id,
               "css"
             ),
             to: L(
-              M,
-              Y(i.current, N, "css"),
-              it.id,
+              C,
+              Y(r.current, K, "css"),
+              rt.id,
               "css"
             )
-          }, wt = {
-            scaleId: rt.id,
+          }, bt = {
+            scaleId: ct.id,
             from: L(
-              M,
-              B(i.current, K, "css"),
-              rt.id,
+              C,
+              B(r.current, ot, "css"),
+              ct.id,
               "css"
             ),
             to: L(
-              M,
-              B(i.current, ot, "css"),
-              rt.id,
+              C,
+              B(r.current, it, "css"),
+              ct.id,
               "css"
             )
-          }, W = gt && St("x", gt, i.current), q = wt && St("y", wt, i.current), _t = W?.scaled, Lt = q?.scaled, bt = {
+          }, W = gt && St("x", gt, r.current), q = bt && St("y", bt, r.current), Lt = W?.scaled, It = q?.scaled, wt = {
             mode: $,
-            frame: i.current,
+            frame: r.current,
             completed: !1,
             x: {
               css: W && {
                 from: W.fromCSS,
                 to: W.toCSS
               },
-              scaled: _t ?? []
+              scaled: Lt ?? []
             },
             y: {
               css: q && {
                 from: q.fromCSS,
                 to: q.toCSS
               },
-              scaled: Lt ?? []
+              scaled: It ?? []
             },
             keys: T
           };
-          u.current = bt, E.spanselect.dispatchEvent(
-            r,
-            bt
+          f.current = wt, E.spanselect.dispatchEvent(
+            l,
+            wt
           );
         }
       );
-    }, x = (y) => {
-      a.current(y, (w, S, b) => {
+    }, g = (y) => {
+      p.current(y, (b, w, P) => {
         const T = O(
-          w,
-          i.current
+          b,
+          r.current
         );
         if (!T) return;
-        if (Object.values(b).some((M) => M)) {
+        if (Object.values(P).some((C) => C)) {
           y.preventDefault();
-          const M = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
-          E.pressandwheel.dispatchEvent(r, {
+          const C = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
+          E.pressandwheel.dispatchEvent(l, {
             pointer: T,
-            frame: i.current,
-            keys: b,
+            frame: r.current,
+            keys: P,
             deltaX: y.deltaX,
             deltaY: y.deltaY,
-            deltaAbs: M
+            deltaAbs: C
           });
         }
       });
     };
-    document.addEventListener("mouseup", l), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", v);
-    const g = s.current;
-    return g?.addEventListener("wheel", x, {
+    document.addEventListener("mouseup", d), document.addEventListener("keydown", x), document.addEventListener("keyup", x), document.addEventListener("mousemove", v);
+    const S = o.current;
+    return S?.addEventListener("wheel", g, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", l), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", v), g?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", d), document.removeEventListener("keydown", x), document.removeEventListener("keyup", x), document.removeEventListener("mousemove", v), S?.removeEventListener("wheel", g);
     };
-  }, [i, r, d, a]), R("sync_move", d, (l) => {
-    const p = l.positions ? O(
-      l.positions,
-      i.current
+  }, [r, l, h, p]), A("sync_move", h, (d) => {
+    const x = d.positions ? O(
+      d.positions,
+      r.current
     ) : null;
-    m.current = l, E.move.dispatchEvent(r, {
-      frame: i.current,
-      pointer: p ?? null,
-      keys: l.keys
+    a.current = d, E.move.dispatchEvent(l, {
+      frame: r.current,
+      pointer: x ?? null,
+      keys: d.keys
     });
-  }), /* @__PURE__ */ A(
+  }), /* @__PURE__ */ k(
     "div",
     {
-      ref: s,
+      ref: o,
       id: "interactions",
       className: n,
       style: {
         position: "absolute",
-        left: o.chartAreaCSS.x,
-        top: o.chartAreaCSS.y,
-        width: o.chartAreaCSS.width,
-        height: o.chartAreaCSS.height,
+        left: i.chartAreaCSS.x,
+        top: i.chartAreaCSS.y,
+        width: i.chartAreaCSS.width,
+        height: i.chartAreaCSS.height,
         zIndex: 25,
         ...e
       },
-      onDragStart: (l) => {
-        l.preventDefault();
+      onDragStart: (d) => {
+        d.preventDefault();
       },
-      onClick: (l) => {
-        f(l, (p, v, x) => {
-          const g = O(
-            p,
-            i.current
+      onClick: (d) => {
+        c(d, (x, v, g) => {
+          const S = O(
+            x,
+            r.current
           );
-          g && E.click.dispatchEvent(r, {
-            pointer: g,
-            frame: i.current,
-            keys: x
+          S && E.click.dispatchEvent(l, {
+            pointer: S,
+            frame: r.current,
+            keys: g
           });
         });
       },
-      onMouseLeave: (l) => {
-        f(l, (p, v, x) => {
-          E.sync_move.dispatchEvent(d, {
+      onMouseLeave: (d) => {
+        c(d, (x, v, g) => {
+          E.sync_move.dispatchEvent(h, {
             positions: null,
-            keys: x
+            keys: g
           });
         });
       },
-      onMouseMove: (l) => {
-        f(l, (p, v, x) => {
-          E.sync_move.dispatchEvent(d, {
-            positions: p,
-            keys: x
+      onMouseMove: (d) => {
+        c(d, (x, v, g) => {
+          E.sync_move.dispatchEvent(h, {
+            positions: x,
+            keys: g
           });
         });
       },
-      onMouseDown: (l) => {
-        f(l, (p, { cssX: v, cssY: x }, g) => {
+      onMouseDown: (d) => {
+        c(d, (x, { cssX: v, cssY: g }, S) => {
           const y = O(
-            p,
-            i.current
+            x,
+            r.current
           );
-          y && (E.mousedown.dispatchEvent(r, {
+          y && (E.mousedown.dispatchEvent(l, {
             pointer: y,
-            frame: i.current,
-            keys: g
-          }), h.current = {
+            frame: r.current,
+            keys: S
+          }), u.current = {
             xRangeCss: { start: v, end: v },
-            yRangeCss: { start: x, end: x }
+            yRangeCss: { start: g, end: g }
           });
         });
       },
-      onMouseUp: (l) => {
-        f(l, (p, v, x) => {
-          const g = O(
-            p,
-            i.current
+      onMouseUp: (d) => {
+        c(d, (x, v, g) => {
+          const S = O(
+            x,
+            r.current
           );
-          if (!g) return;
-          E.mouseup.dispatchEvent(r, {
-            frame: i.current,
-            pointer: g,
-            keys: x
+          if (!S) return;
+          E.mouseup.dispatchEvent(l, {
+            frame: r.current,
+            pointer: S,
+            keys: g
           });
-          const y = u.current;
-          u.current = null;
-          const w = h.current;
-          if (h.current = null, w && y) {
-            const S = {
+          const y = f.current;
+          f.current = null;
+          const b = u.current;
+          if (u.current = null, b && y) {
+            const w = {
               ...y,
-              keys: x,
+              keys: g,
               completed: !0
             };
-            u.current = null, E.spanselect.dispatchEvent(
-              r,
-              S
+            f.current = null, E.spanselect.dispatchEvent(
+              l,
+              w
             );
           }
         });
       },
-      onContextMenu: (l) => {
-        l.preventDefault(), f(l, (p, v, x) => {
-          const g = O(
-            p,
-            i.current
+      onContextMenu: (d) => {
+        d.preventDefault(), c(d, (x, v, g) => {
+          const S = O(
+            x,
+            r.current
           );
-          g && E.contextmenu.dispatchEvent(r, {
-            frame: i.current,
-            pointer: g,
-            keys: x
+          S && E.contextmenu.dispatchEvent(l, {
+            frame: r.current,
+            pointer: S,
+            keys: g
           });
         });
       },
-      onDoubleClick: (l) => {
-        f(l, (p, v, x) => {
-          const g = O(
-            p,
-            i.current
+      onDoubleClick: (d) => {
+        c(d, (x, v, g) => {
+          const S = O(
+            x,
+            r.current
           );
-          g && E.dblclick.dispatchEvent(r, {
-            frame: i.current,
-            pointer: g,
-            keys: x
+          S && E.dblclick.dispatchEvent(l, {
+            frame: r.current,
+            pointer: S,
+            keys: g
           });
         });
-      }
+      },
+      children: s
     }
   );
-}, Ee = ({ data: n, renderTooltip: e, xScaleId: t }) => {
+}, Pe = ({ data: n, renderTooltip: e, xScaleId: t }) => {
   const [s, o] = V(null);
   yt("move", (r) => {
     o(r);
@@ -960,87 +959,87 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
   const i = et(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: d } = s, h = d?.scaled[t];
+    const { frame: r, pointer: l } = s, h = l?.scaled[t];
     if (h === void 0)
       return null;
     const u = [];
-    let m = h;
-    for (const c of n) {
-      let f = null, a = 1 / 0;
-      for (const [p, v] of c.points.entries()) {
-        if (!lt(r, v.x, t) || !lt(r, v.y, c.yScaleId))
+    let f = h;
+    for (const a of n) {
+      let m = null, c = 1 / 0;
+      for (const [d, x] of a.points.entries()) {
+        if (!ut(r, x.x, t) || !ut(r, x.y, a.yScaleId))
           continue;
-        const x = Math.abs(v.x - h);
-        x < a && (a = x, f = p);
+        const v = Math.abs(x.x - h);
+        v < c && (c = v, m = d);
       }
-      const l = c.points[f ?? -1];
-      if (!l || ft(r, a, t, "css") > 30) {
-        u.push({ seriesId: c.seriesId, y: null });
+      const p = a.points[m ?? -1];
+      if (!p || ft(r, c, t, "css") > 30) {
+        u.push({ seriesId: a.seriesId, y: null });
         continue;
       }
-      m = l.x, u.push({
-        seriesId: c.seriesId,
-        y: l.y
+      f = p.x, u.push({
+        seriesId: a.seriesId,
+        y: p.y
       });
     }
     return {
       frame: r,
-      x: m,
+      x: f,
       points: u
     };
   }, [n, s, t]);
   return e(i);
-}, Pe = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
+}, ke = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
   const [o, i] = V(null);
-  if (yt("move", (f) => {
-    i(f);
+  if (yt("move", (m) => {
+    i(m);
   }), !o)
     return null;
-  const { frame: r, pointer: d } = o, h = d?.cssX ?? null, u = d?.cssY ?? null, m = h ? Y(r, h, "css") : 0, c = u ? B(r, u, "css") : 0;
-  return /* @__PURE__ */ ht(It, { children: [
-    /* @__PURE__ */ A(
+  const { frame: r, pointer: l } = o, h = l?.cssX ?? null, u = l?.cssY ?? null, f = h ? Y(r, h, "css") - r.chartAreaCSS.x : 0, a = u ? B(r, u, "css") - r.chartAreaCSS.y : 0;
+  return /* @__PURE__ */ Ct(Ut, { children: [
+    /* @__PURE__ */ k(
       "div",
       {
-        "data-show": !!d,
+        "data-show": !!l,
         className: e?.(o),
         style: {
           position: "absolute",
           left: 0,
           visibility: h === null ? "hidden" : "visible",
-          top: r.chartAreaCSS.y,
-          height: r.chartAreaCSS.height,
+          top: 0,
+          bottom: 0,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: d ? 1 : 0,
-          transform: `translateX(${m}px)`,
+          opacity: l ? 1 : 0,
+          transform: `translateX(${f}px)`,
           ...n?.(o)
         }
       }
     ),
-    /* @__PURE__ */ A(
+    /* @__PURE__ */ k(
       "div",
       {
         className: s?.(o),
-        "data-show": !!d,
+        "data-show": !!l,
         style: {
           position: "absolute",
           visibility: u === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: r.chartAreaCSS.x,
-          width: r.chartAreaCSS.width,
+          left: 0,
+          right: 0,
           pointerEvents: "none",
-          opacity: d ? 1 : 0,
-          transform: `translateY(${c}px)`,
+          opacity: l ? 1 : 0,
+          transform: `translateY(${a}px)`,
           ...t?.(o)
         }
       }
     )
   ] });
-}, ke = ({ makeClassName: n, makeStyle: e }) => {
+}, Re = ({ makeClassName: n, makeStyle: e }) => {
   const [t, s] = V(null);
   yt("spanselect", (i) => {
     s(
@@ -1050,10 +1049,10 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
   const o = et(() => {
     if (!t || t.mode === "below_threshold")
       return null;
-    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, d = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, h = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, u = Y(t.frame, i, "css"), m = Y(t.frame, r, "css"), c = B(t.frame, d, "css"), f = B(t.frame, h, "css"), a = Math.min(u, m), l = Math.min(c, f), p = Math.abs(m - u), v = Math.abs(f - c);
-    return { leftPx: a, topPx: l, widthPx: p, heightPx: v };
+    const i = t.mode === "y" ? -1 / 0 : t.x.css?.from ?? -1 / 0, r = t.mode === "y" ? 1 / 0 : t.x.css?.to ?? 1 / 0, l = t.mode === "x" ? -1 / 0 : t.y.css?.from ?? -1 / 0, h = t.mode === "x" ? 1 / 0 : t.y.css?.to ?? 1 / 0, u = Y(t.frame, i, "css"), f = Y(t.frame, r, "css"), a = B(t.frame, l, "css"), m = B(t.frame, h, "css"), c = Math.min(u, f) - t.frame.chartAreaCSS.x, p = Math.min(a, m) - t.frame.chartAreaCSS.y, d = Math.abs(f - u), x = Math.abs(m - a);
+    return { leftPx: c, topPx: p, widthPx: d, heightPx: x };
   }, [t]);
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ k(
     "div",
     {
       className: t ? n?.(t) : void 0,
@@ -1069,9 +1068,9 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
       }
     }
   );
-}, Re = ({ style: n, children: e, scaleId: t, ...s }) => {
+}, Ae = ({ style: n, children: e, scaleId: t, ...s }) => {
   const o = pt((i) => i.getScale(t)?.axis);
-  return o ? /* @__PURE__ */ A(
+  return o ? /* @__PURE__ */ k(
     "div",
     {
       style: {
@@ -1087,32 +1086,32 @@ const xe = Xt(({ configuration: n, children: e, style: t, className: s }, o) =>
       children: e
     }
   ) : null;
-}, Rt = 60, Gt = 30, At = "UTC", Zt = "en-GB", Ae = ({
+}, At = 60, Zt = 30, Dt = "UTC", Jt = "en-GB", De = ({
   space: n,
   formatter: e,
   acceptableIncrements: t
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, d = [], h = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? Rt : Gt)) * h, m = Ot(
+  const { min: i, max: r } = s, l = [], h = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? At : Zt)) * h, f = Ft(
     o,
     u,
     s.id,
     "canvas"
-  ), c = t ?? G, f = c.find((l) => l > m) ?? c.at(-1) ?? 1;
-  let a = i;
-  if (Math.abs(a % f) > Number.EPSILON) {
-    const l = (f - a % f) % f;
-    a += l;
+  ), a = t ?? G, m = a.find((p) => p > f) ?? a.at(-1) ?? 1;
+  let c = i;
+  if (Math.abs(c % m) > Number.EPSILON) {
+    const p = (m - c % m) % m;
+    c += p;
   }
-  for (; a <= r && d.length < 1e3; )
-    d.push(a), a += f;
-  return (e ?? Jt)(d);
-}, Jt = (n) => {
+  for (; c <= r && l.length < 1e3; )
+    l.push(c), c += m;
+  return (e ?? Qt)(l);
+}, Qt = (n) => {
   const e = Math.max(0, Math.ceil(-Math.log10(n[1] - n[0])));
   return n.map((t) => ({ value: t, label: t.toFixed(e) }));
 }, G = [];
 for (let n = -12; n <= 12; n++)
   G.push(1 * 10 ** n), G.push(2 * 10 ** n), G.push(5 * 10 ** n);
-const Qt = 1, Dt = 1e3 * Qt, vt = 60 * Dt, nt = 60 * vt, st = 24 * nt, te = 30 * st, ee = 365 * st, ne = [
+const te = 1, _t = 1e3 * te, vt = 60 * _t, nt = 60 * vt, st = 24 * nt, ee = 30 * st, ne = 365 * st, se = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1170,7 +1169,7 @@ const Qt = 1, Dt = 1e3 * Qt, vt = 60 * Dt, nt = 60 * vt, st = 24 * nt, te = 30 *
     case "milliseconds":
       return e;
     case "seconds":
-      return e * Dt;
+      return e * _t;
     case "minutes":
       return e * vt;
     case "hours":
@@ -1178,23 +1177,23 @@ const Qt = 1, Dt = 1e3 * Qt, vt = 60 * Dt, nt = 60 * vt, st = 24 * nt, te = 30 *
     case "days":
       return e * st;
     case "months":
-      return e * te;
-    case "years":
       return e * ee;
+    case "years":
+      return e * ne;
   }
-}, se = (n, e) => {
+}, oe = (n, e) => {
   const t = new Date(n);
   return t.setUTCMilliseconds(t.getUTCMilliseconds() + e), t.getTime();
-}, oe = (n, e) => {
+}, ie = (n, e) => {
   const t = new Date(n);
   return t.setUTCSeconds(t.getUTCSeconds() + e), t.getTime();
-}, ie = (n, e) => {
+}, re = (n, e) => {
   const t = new Date(n);
   return t.setUTCMinutes(t.getUTCMinutes() + e), t.getTime();
-}, re = (n, e) => {
+}, ce = (n, e) => {
   const t = new Date(n);
   return t.setUTCHours(t.getUTCHours() + e), t.getTime();
-}, ce = (n, e) => {
+}, ae = (n, e) => {
   const t = new Date(n);
   return t.setUTCDate(t.getUTCDate() + e), t.getTime();
 }, Tt = (n, e) => {
@@ -1204,15 +1203,15 @@ const Qt = 1, Dt = 1e3 * Qt, vt = 60 * Dt, nt = 60 * vt, st = 24 * nt, te = 30 *
   const [t, s] = e;
   switch (s) {
     case "milliseconds":
-      return se(n, t);
-    case "seconds":
       return oe(n, t);
-    case "minutes":
+    case "seconds":
       return ie(n, t);
-    case "hours":
+    case "minutes":
       return re(n, t);
-    case "days":
+    case "hours":
       return ce(n, t);
+    case "days":
+      return ae(n, t);
     case "months":
       return Tt(n, t);
     case "years":
@@ -1223,7 +1222,7 @@ function J(n, e) {
   const t = new Date(n), s = new Date(t.toLocaleString("en-US", { timeZone: e })), o = new Date(t.toLocaleString("en-US", { timeZone: "UTC" }));
   return (s.getTime() - o.getTime()) / (3600 * 1e3);
 }
-const ae = (n, e, t = "UTC") => {
+const le = (n, e, t = "UTC") => {
   const [s, o] = e;
   let i = new Date(n);
   const r = () => {
@@ -1263,33 +1262,33 @@ const ae = (n, e, t = "UTC") => {
       break;
   }
   return i.getTime();
-}, De = ({
-  timeZone: n = At,
-  space: e = Rt,
+}, _e = ({
+  timeZone: n = Dt,
+  space: e = At,
   formatter: t,
   locale: s,
   showTimezone: o
 } = {}) => (i, r) => {
-  const { min: d, max: h } = i, u = Math.floor(r.chartAreaCanvasPX.width / e) + 1, c = (h - d) / u, [f, a] = ne.find(
-    (g) => Z(g) >= c
-  ) ?? [1, "milliseconds"], l = ae(d, [f, a], n), p = J(l, n), v = [l];
-  let x;
+  const { min: l, max: h } = i, u = Math.floor(r.chartAreaCanvasPX.width / e) + 1, a = (h - l) / u, [m, c] = se.find(
+    (g) => Z(g) >= a
+  ) ?? [1, "milliseconds"], p = le(l, [m, c], n), d = J(p, n), x = [p];
+  let v;
   for (; ; ) {
-    switch (a) {
+    switch (c) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        x = X(l, [v.length * f, a]);
+        v = X(p, [x.length * m, c]);
         break;
       }
       case "days": {
-        const g = X(l, [
-          v.length * f,
-          a
+        const g = X(p, [
+          x.length * m,
+          c
         ]);
-        x = X(g, [
-          p - J(g, n),
+        v = X(g, [
+          d - J(g, n),
           "hours"
         ]);
         break;
@@ -1297,31 +1296,31 @@ const ae = (n, e, t = "UTC") => {
       case "months":
       case "years": {
         const g = X(
-          X(X(l, [p, "hours"]), [
-            v.length * f,
-            a
+          X(X(p, [d, "hours"]), [
+            x.length * m,
+            c
           ]),
-          [-p, "hours"]
+          [-d, "hours"]
         );
-        x = X(g, [
-          p - J(g, n),
+        v = X(g, [
+          d - J(g, n),
           "hours"
         ]);
         break;
       }
     }
-    if (x > h)
+    if (v > h)
       break;
-    v.push(x);
+    x.push(v);
   }
-  return (t ?? le({
+  return (t ?? ue({
     locale: s,
     showTimezone: o,
     timeZone: n
-  }))(v);
-}, U = (n, e, t) => n.find((s) => s.type === t)?.value !== e.find((s) => s.type === t)?.value, le = ({
-  timeZone: n = At,
-  locale: e = Zt,
+  }))(x);
+}, U = (n, e, t) => n.find((s) => s.type === t)?.value !== e.find((s) => s.type === t)?.value, ue = ({
+  timeZone: n = Dt,
+  locale: e = Jt,
   showTimezone: t = !0
 }) => {
   const s = new Intl.DateTimeFormat(e, {
@@ -1337,30 +1336,30 @@ const ae = (n, e, t = "UTC") => {
     timeZone: n
   });
   return (o) => {
-    const i = o[1] - o[0], r = i < Z([1, "days"]), d = i < Z([1, "minutes"]), h = i < Z([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, m, c) => {
-      const f = c[m - 1], a = m === 0 || U(u.label, f.label, "year"), l = m === 0 || U(u.label, f.label, "day"), p = m === 0 || U(u.label, f.label, "month"), v = m === 0 || U(u.label, f.label, "hour"), x = m === 0 || U(u.label, f.label, "timeZoneName"), g = m === 0 || U(u.label, f.label, "minute"), y = m === 0 || U(u.label, f.label, "second"), w = m === 0 || U(u.label, f.label, "fractionalSecond"), S = [];
-      if (r && (v || g || x || y || w)) {
-        const b = u.label.find((P) => P.type === "hour")?.value, T = u.label.find((P) => P.type === "minute")?.value, C = u.label.find((P) => P.type === "timeZoneName")?.value;
+    const i = o[1] - o[0], r = i < Z([1, "days"]), l = i < Z([1, "minutes"]), h = i < Z([1, "seconds"]);
+    return o.map((u) => ({ value: u, label: s.formatToParts(new Date(u)) })).map((u, f, a) => {
+      const m = a[f - 1], c = f === 0 || U(u.label, m.label, "year"), p = f === 0 || U(u.label, m.label, "day"), d = f === 0 || U(u.label, m.label, "month"), x = f === 0 || U(u.label, m.label, "hour"), v = f === 0 || U(u.label, m.label, "timeZoneName"), g = f === 0 || U(u.label, m.label, "minute"), S = f === 0 || U(u.label, m.label, "second"), y = f === 0 || U(u.label, m.label, "fractionalSecond"), b = [];
+      if (r && (x || g || v || S || y)) {
+        const w = u.label.find((C) => C.type === "hour")?.value, P = u.label.find((C) => C.type === "minute")?.value, T = u.label.find((C) => C.type === "timeZoneName")?.value;
         let M = "";
-        if (d) {
-          const P = u.label.find((K) => K.type === "second")?.value, N = u.label.find(
+        if (l) {
+          const C = u.label.find((K) => K.type === "second")?.value, N = u.label.find(
             (K) => K.type === "fractionalSecond"
           )?.value;
-          M = `:${P}` + (h ? `.${N}` : "");
+          M = `:${C}` + (h ? `.${N}` : "");
         }
-        S.push(
-          `${b}:${T}${M}` + (t && x ? ` ${C}` : "")
+        b.push(
+          `${w}:${P}${M}` + (t && v ? ` ${T}` : "")
         );
       }
-      return (l || p) && S.push(
+      return (p || d) && b.push(
         [
-          u.label.find((b) => b.type === "month")?.value,
-          l && u.label.find((b) => b.type === "day")?.value
+          u.label.find((w) => w.type === "month")?.value,
+          p && u.label.find((w) => w.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), a && S.push(u.label.find((b) => b.type === "year")?.value), {
+      ), c && b.push(u.label.find((w) => w.type === "year")?.value), {
         value: u.value,
-        label: S.filter((b) => b).join(`
+        label: b.filter((w) => w).join(`
 `)
       };
     });
@@ -1368,38 +1367,38 @@ const ae = (n, e, t = "UTC") => {
 };
 export {
   we as AreaPlot,
-  Re as AxisOverlay,
-  ge as BarPlot,
-  ut as CANPLOT_LAYER,
-  xe as CanPlot,
-  Me as ChartAreaInteractions,
-  Pe as Crosshair,
-  ye as LinePlot,
-  ve as ScatterPlot,
-  ke as SelectBox,
-  be as SparklinePlot,
-  Ee as TooltipsX,
-  Te as XTicks,
-  Ce as YTicks,
+  Ae as AxisOverlay,
+  be as BarPlot,
+  dt as CANPLOT_LAYER,
+  ye as CanPlot,
+  Ee as ChartAreaInteractions,
+  ke as Crosshair,
+  ve as LinePlot,
+  ge as ScatterPlot,
+  Re as SelectBox,
+  Se as SparklinePlot,
+  Pe as TooltipsX,
+  Ce as XTicks,
+  Me as YTicks,
   D as applyStyles,
   j as clamp,
-  pe as clampUnfit,
+  xe as clampUnfit,
   Y as clampXPosToChartArea,
   B as clampYPosToChartArea,
-  Jt as defaultNumericalTicksFormatter,
-  me as findClosestIndex,
+  Qt as defaultNumericalTicksFormatter,
+  pe as findClosestIndex,
   I as getScale,
-  Ae as makeLinearTicks,
-  le as makeTimeTickFormat,
-  De as makeTimeTicks,
+  De as makeLinearTicks,
+  ue as makeTimeTickFormat,
+  _e as makeTimeTicks,
   L as posToVal,
-  Ot as pxToValDistance,
-  fe as sum,
+  Ft as pxToValDistance,
+  me as sum,
   F as useDrawEffect,
   pt as useFrameState,
   yt as useInteractionsEvent,
-  Se as useXPositioned,
-  lt as valFits,
+  Te as useXPositioned,
+  ut as valFits,
   H as valToPos,
   ft as valToPxDistance
 };