@canplot/react 0.1.10 → 0.1.11

package/dist/canplot.mjs

@@ -1,154 +1,154 @@
-import { jsxs as ut, jsx as A, Fragment as _t } from "react/jsx-runtime";
-import Z, { createContext as vt, useContext as J, useRef as D, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as Ut, useMemo as Q, useState as V, useId as Lt } from "react";
-import { createStore as bt, useStore as Ct } from "zustand";
-const j = (t, s, e) => Math.min(Math.max(t, s), e), ue = (t) => t.reduce((s, e) => s + (e ?? 0), 0), de = (t, s) => {
+import { jsxs as lt, jsx as _, Fragment as _t } from "react/jsx-runtime";
+import Z, { createContext as vt, useContext as J, useRef as L, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
+import { createStore as bt, useStore as St } from "zustand";
+const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e) => s + (e ?? 0), 0), ue = (t, s) => {
   let e = 0;
-  for (let c = 0; c < t.length; c++)
-    Math.abs(t[c] - s) < Math.abs(t[e] - s) && (e = c);
+  for (let o = 0; o < t.length; o++)
+    Math.abs(t[o] - s) < Math.abs(t[e] - s) && (e = o);
   return e;
-}, Dt = (t, s, e, c) => {
-  const { min: o, max: n } = _(t, e), l = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = (et(t, e) ? l.width : l.height) / (n - o);
-  return s / r;
-}, _ = (t, s) => {
-  const e = t.scales.find((c) => c.id === s);
+}, Lt = (t, s, e, o) => {
+  const { min: n, max: i, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (i - n);
+  return s / d;
+}, I = (t, s) => {
+  const e = t.scales.find((o) => o.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
   return e;
-}, et = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", he = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", R = (t, s) => {
+}, R = (t, s) => {
   const e = window.devicePixelRatio || 1;
   t.lineCap = s?.lineCap ?? "butt", t.lineDashOffset = e * (s?.lineDashOffset ?? 0), t.lineJoin = s?.lineJoin ?? "miter", t.lineWidth = e * (s?.lineWidth ?? 1), t.miterLimit = e * (s?.miterLimit ?? 10), t.strokeStyle = s?.strokeStyle ?? "black", t.fillStyle = s?.fillStyle ?? t.strokeStyle, t.font = s?.font ?? `${10 * e}px sans-serif`, t.textAlign = s?.textAlign ?? "start", t.direction = s?.direction ?? "inherit", t.textBaseline = s?.textBaseline ?? "alphabetic", t.fontKerning = s?.fontKerning ?? "auto";
-}, dt = (t, s, e, c) => {
-  const o = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: n, max: l } = _(t, e), r = (et(t, e) ? o.width : o.height) / (l - n);
-  return s * r;
-}, H = (t, s, e, c) => {
-  const { min: o } = _(t, e), n = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = dt(t, s - o, e, c);
-  return et(t, e) ? j(
-    n.x + l,
-    n.x - 10 * n.width,
-    n.x + 11 * n.width
+}, ut = (t, s, e, o) => {
+  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: i, max: a, origin: r } = I(t, e), d = (r === "x" ? n.width : n.height) / (a - i);
+  return s * d;
+}, H = (t, s, e, o) => {
+  const { min: n, origin: i } = I(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
+  return i === "x" ? j(
+    a.x + r,
+    a.x - 10 * a.width,
+    a.x + 11 * a.width
   ) : j(
-    n.y + n.height - l,
-    n.y - 10 * n.height,
-    n.y + 11 * n.height
+    a.y + a.height - r,
+    a.y - 10 * a.height,
+    a.y + 11 * a.height
   );
-}, fe = (t, s, e) => {
-  const { min: c, max: o } = _(t, e);
-  return j(s, c, o);
+}, de = (t, s, e) => {
+  const { min: o, max: n } = I(t, e);
+  return j(s, o, n);
 }, O = (t, s, e) => {
-  const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return j(s, c.x, c.x + c.width);
+  const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return j(s, o.x, o.x + o.width);
 }, $ = (t, s, e) => {
-  const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return j(s, c.y, c.y + c.height);
-}, at = (t, s, e) => {
-  const { min: c, max: o } = _(t, e);
-  return s >= c && s <= o;
-}, X = (t, s, e, c) => {
-  const { min: o, max: n } = _(t, e), l = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = et(t, e) ? (s - l.x) / l.width : (l.height - s + l.y) / l.height;
-  return o + r * (n - o);
-}, Xt = (t) => {
+  const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return j(s, o.y, o.y + o.height);
+}, rt = (t, s, e) => {
+  const { min: o, max: n } = I(t, e);
+  return s >= o && s <= n;
+}, D = (t, s, e, o) => {
+  const { min: n, max: i, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
+  return n + d * (i - n);
+}, Dt = (t) => {
   const { ctx: s, scales: e } = t;
-  for (const c of e) {
-    if (!c.axis) continue;
+  for (const o of e) {
+    if (!o.axis) continue;
     s.save(), R(s, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
-      ...c.axis.style
+      ...o.axis.style
     });
-    const o = c.axis.canvasRect;
-    if (c.origin === "x") {
-      if (c.axis.position === "bottom")
-        s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x + o.width, o.y), s.stroke();
-      else if (c.axis.position === "top") {
-        const n = o.y + o.height;
-        s.beginPath(), s.moveTo(o.x, n), s.lineTo(o.x + o.width, n), s.stroke();
+    const n = o.axis.canvasRect;
+    if (o.origin === "x") {
+      if (o.axis.position === "bottom")
+        s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x + n.width, n.y), s.stroke();
+      else if (o.axis.position === "top") {
+        const i = n.y + n.height;
+        s.beginPath(), s.moveTo(n.x, i), s.lineTo(n.x + n.width, i), s.stroke();
       }
-    } else if (c.axis.position === "left") {
-      const n = o.x + o.width;
-      s.beginPath(), s.moveTo(n, o.y), s.lineTo(n, o.y + o.height), s.stroke();
-    } else c.axis.position === "right" && (s.beginPath(), s.moveTo(o.x, o.y), s.lineTo(o.x, o.y + o.height), s.stroke());
+    } else if (o.axis.position === "left") {
+      const i = n.x + n.width;
+      s.beginPath(), s.moveTo(i, n.y), s.lineTo(i, n.y + n.height), s.stroke();
+    } else o.axis.position === "right" && (s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x, n.y + n.height), s.stroke());
     s.restore();
   }
 }, It = () => bt((t, s) => {
   const e = () => {
-    const c = s()._frame;
-    if (!c) throw new Error("No frame set in frame store");
-    return c;
+    const o = s()._frame;
+    if (!o) throw new Error("No frame set in frame store");
+    return o;
   };
   return {
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (c, o) => O(e(), c, o ?? "canvas"),
-    clampYPosToChartArea: (c, o) => $(e(), c, o ?? "canvas"),
-    valToPos: (c, o, n) => H(e(), c, o, n ?? "canvas"),
-    valToPxDistance: (c, o, n) => dt(
+    clampXPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
+    clampYPosToChartArea: (o, n) => $(e(), o, n ?? "canvas"),
+    valToPos: (o, n, i) => H(e(), o, n, i ?? "canvas"),
+    valToPxDistance: (o, n, i) => ut(
       e(),
-      c,
       o,
-      n ?? "canvas"
+      n,
+      i ?? "canvas"
     ),
-    valFits: (c, o) => at(e(), c, o),
-    getScale: (c) => _(e(), c)
+    valFits: (o, n) => rt(e(), o, n),
+    getScale: (o) => I(e(), o)
   };
-}), Kt = () => bt((t) => ({
+}), Xt = () => bt((t) => ({
   notify: () => {
     t((s) => ({ version: s.version + 1 }));
   },
   version: 0
-})), ht = vt(null), Tt = vt(null), Y = (t, s) => {
-  const e = J(ht), c = J(Tt);
-  if (!e || !c)
+})), dt = vt(null), Ct = vt(null), Y = (t, s) => {
+  const e = J(dt), o = J(Ct);
+  if (!e || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const o = D(t);
-  o.current = t, N(() => {
-    o.current(e.getState()), e.subscribe((n) => {
-      n._frame && o.current(n);
+  const n = L(t);
+  n.current = t, N(() => {
+    n.current(e.getState()), e.subscribe((i) => {
+      i._frame && n.current(i);
     });
   }, [e]), wt(() => {
-    c.getState().notify();
-  }, [c, ...s]);
-}, ft = (t) => {
-  const s = J(ht);
+    o.getState().notify();
+  }, [o, ...s]);
+}, ht = (t) => {
+  const s = J(dt);
   if (!s)
     throw new Error("useFrame must be used within a CanPlot component");
-  return Ct(
+  return St(
     s,
     t ?? ((e) => e.getFrame())
   );
 };
-function Ft(t) {
+function Kt(t) {
   return (s) => {
-    for (const e of t) lt(e, s);
+    for (const e of t) at(e, s);
   };
 }
-function zt(t) {
+function Ft(t) {
   return (s) => {
     const e = [];
-    for (const c of t) {
-      const o = lt(c, s), n = typeof o == "function";
-      e.push(n ? o : () => lt(c, null));
+    for (const o of t) {
+      const n = at(o, s), i = typeof n == "function";
+      e.push(i ? n : () => at(o, null));
     }
     return () => {
-      for (const c of e) c();
+      for (const o of e) o();
     };
   };
 }
-function lt(t, s) {
+function at(t, s) {
   if (typeof t == "function")
     return t(s);
   t && (t.current = s);
 }
-var Yt = parseInt(Rt.split(".")[0], 10) >= 19 ? zt : Ft;
-const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) => {
-  const n = D(null), l = D(null), r = $t(l), d = Q(It, []), u = Q(Kt, []);
+var zt = parseInt(Rt.split(".")[0], 10) >= 19 ? Ft : Kt;
+const he = At(({ configuration: t, children: s, style: e, className: o }, n) => {
+  const i = L(null), a = L(null), r = Ot(a), d = Q(It, []), u = Q(Xt, []);
   N(() => {
     d.setState({
-      _frame: Bt(t, r, n.current)
+      _frame: $t(t, r, i.current)
     });
-  }, [t, r, n, d]), N(() => d.subscribe((p) => {
-    p._frame && Nt(p._frame);
+  }, [t, r, i, d]), N(() => d.subscribe((p) => {
+    p._frame && Bt(p._frame);
   }), [d]), N(() => {
     let p = !1;
     return u.subscribe(() => {
@@ -159,12 +159,12 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
       }));
     });
   }, [u, d]);
-  const a = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ ut(
+  const l = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ lt(
     "div",
     {
-      ref: Yt([o, l]),
-      className: c,
+      ref: zt([n, a]),
+      className: o,
       style: {
         position: "relative",
         overflow: "hidden",
@@ -172,12 +172,12 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ A(
+        /* @__PURE__ */ _(
           "canvas",
           {
-            ref: n,
-            width: r.width * a,
-            height: r.height * a,
+            ref: i,
+            width: r.width * l,
+            height: r.height * l,
             style: {
               inset: 0,
               position: "absolute",
@@ -186,8 +186,8 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
             }
           }
         ),
-        /* @__PURE__ */ A(
-          Ot,
+        /* @__PURE__ */ _(
+          Yt,
           {
             frameStore: d,
             updateRequestStore: u,
@@ -197,70 +197,70 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
       ]
     }
   );
-}), Ot = ({ frameStore: t, updateRequestStore: s, children: e }) => Ct(t, (o) => !!o._frame) ? /* @__PURE__ */ A(Tt.Provider, { value: s, children: /* @__PURE__ */ A(ht.Provider, { value: t, children: e }) }) : null, $t = (t) => {
+}), Yt = ({ frameStore: t, updateRequestStore: s, children: e }) => St(t, (n) => !!n._frame) ? /* @__PURE__ */ _(Ct.Provider, { value: s, children: /* @__PURE__ */ _(dt.Provider, { value: t, children: e }) }) : null, Ot = (t) => {
   const [s, e] = V({
     width: 0,
     height: 0
-  }), [c] = V(() => new ResizeObserver((o) => {
-    for (const n of o) {
-      const l = Math.round(n.contentRect.width), r = Math.round(n.contentRect.height);
+  }), [o] = V(() => new ResizeObserver((n) => {
+    for (const i of n) {
+      const a = Math.round(i.contentRect.width), r = Math.round(i.contentRect.height);
       e(
-        (d) => d.width !== l || d.height !== r ? { ...d, width: l, height: r } : d
+        (d) => d.width !== a || d.height !== r ? { ...d, width: a, height: r } : d
       );
     }
   }));
   return N(() => {
     if (!t.current) return;
-    const o = t.current.clientWidth, n = t.current.clientHeight;
+    const n = t.current.clientWidth, i = t.current.clientHeight;
     return e(
-      (l) => l.width !== o || l.height !== n ? { ...l, width: o, height: n } : l
-    ), c.observe(t.current, { box: "border-box" }), () => c.disconnect();
-  }, [c, t]), s;
-}, Bt = (t, s, e) => {
-  const c = e?.getContext("2d");
-  if (!c) return null;
-  const o = window.devicePixelRatio || 1;
+      (a) => a.width !== n || a.height !== i ? { ...a, width: n, height: i } : a
+    ), o.observe(t.current, { box: "border-box" }), () => o.disconnect();
+  }, [o, t]), s;
+}, $t = (t, s, e) => {
+  const o = e?.getContext("2d");
+  if (!o) return null;
+  const n = window.devicePixelRatio || 1;
   if (s.width === 0 || s.height === 0)
     return null;
-  const n = {
+  const i = {
     x: t.padding.left,
     y: t.padding.top,
     width: s.width - t.padding.left - t.padding.right,
     height: s.height - t.padding.top - t.padding.bottom
   };
   for (const m of t.scales)
-    m.axis && (m.origin === "x" ? (m.axis.position === "bottom" || m.axis.position === "top") && (n.height = Math.max(
+    m.axis && (m.origin === "x" ? (m.axis.position === "bottom" || m.axis.position === "top") && (i.height = Math.max(
       0,
-      n.height - m.axis.size
-    ), m.axis.position === "top" && (n.y += m.axis.size)) : (m.axis.position === "left" || m.axis.position === "right") && (n.width = Math.max(0, n.width - m.axis.size), m.axis.position === "left" && (n.x += m.axis.size)));
-  const l = {
-    x: n.x * o,
-    y: n.y * o,
-    width: n.width * o,
-    height: n.height * o
+      i.height - m.axis.size
+    ), m.axis.position === "top" && (i.y += m.axis.size)) : (m.axis.position === "left" || m.axis.position === "right") && (i.width = Math.max(0, i.width - m.axis.size), m.axis.position === "left" && (i.x += m.axis.size)));
+  const a = {
+    x: i.x * n,
+    y: i.y * n,
+    width: i.width * n,
+    height: i.height * n
   }, r = [];
-  let d = t.padding.left * o, u = c.canvas.width - t.padding.right * o, a = c.canvas.height - t.padding.bottom * o, p = t.padding.top * o;
+  let d = t.padding.left * n, u = o.canvas.width - t.padding.right * n, l = o.canvas.height - t.padding.bottom * n, p = t.padding.top * n;
   for (const m of t.scales) {
     if (!m.axis) {
       r.push({ ...m, axis: null });
       continue;
     }
-    let i;
+    let c;
     if (m.origin === "x")
       switch (m.axis.position) {
         case "bottom":
-          a -= m.axis.size * o, i = {
-            x: n.x,
-            y: a / o,
-            width: n.width,
+          l -= m.axis.size * n, c = {
+            x: i.x,
+            y: l / n,
+            width: i.width,
             height: m.axis.size
           };
           break;
         case "top":
-          p += m.axis.size * o, i = {
-            x: n.x,
-            y: p / o - m.axis.size,
-            width: n.width,
+          p += m.axis.size * n, c = {
+            x: i.x,
+            y: p / n - m.axis.size,
+            width: i.width,
             height: m.axis.size
           };
           break;
@@ -271,19 +271,19 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
     else
       switch (m.axis.position) {
         case "left":
-          d += m.axis.size * o, i = {
-            x: d / o - m.axis.size,
-            y: n.y,
+          d += m.axis.size * n, c = {
+            x: d / n - m.axis.size,
+            y: i.y,
             width: m.axis.size,
-            height: n.height
+            height: i.height
           };
           break;
         case "right":
-          u -= m.axis.size * o, i = {
-            x: u / o,
-            y: n.y,
+          u -= m.axis.size * n, c = {
+            x: u / n,
+            y: i.y,
             width: m.axis.size,
-            height: n.height
+            height: i.height
           };
           break;
         case "top":
@@ -291,202 +291,202 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
           throw new Error("Invalid axis position for y origin");
       }
     const h = {
-      x: i.x * o,
-      y: i.y * o,
-      width: i.width * o,
-      height: i.height * o
+      x: c.x * n,
+      y: c.y * n,
+      width: c.width * n,
+      height: c.height * n
     };
     r.push({
       ...m,
       axis: {
         ...m.axis,
-        cssRect: i,
+        cssRect: c,
         canvasRect: h
       }
     });
   }
   return {
-    ctx: c,
-    dpr: o,
+    ctx: o,
+    dpr: n,
     padding: t.padding,
     scales: r,
-    chartAreaCSS: n,
-    chartAreaCanvasPX: l
+    chartAreaCSS: i,
+    chartAreaCanvasPX: a
   };
-}, Nt = (t) => {
-  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Xt(t);
-}, pe = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (Y(
-  ({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: l, valToPos: r }) => {
-    const d = o();
-    d.save(), d.beginPath(), R(d, c);
+}, Bt = (t) => {
+  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Dt(t);
+}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(
+  ({ getCtx: n, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: r }) => {
+    const d = n();
+    d.save(), d.beginPath(), R(d, o);
     for (const u of t) {
-      const a = n(r(u.x, s)), p = l(r(u.y, e));
-      d.lineTo(a, p);
+      const l = i(r(u.x, s)), p = a(r(u.y, e));
+      d.lineTo(l, p);
     }
     d.stroke(), d.restore();
   },
-  [t, s, e, c]
-), null), ye = ({ data: t, xScaleId: s, yScaleId: e, radius: c = 5, style: o }) => (Y(({ getCtx: n, valToPos: l, valFits: r }) => {
-  const d = n();
-  d.save(), d.beginPath(), R(d, o);
+  [t, s, e, o]
+), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (Y(({ getCtx: i, valToPos: a, valFits: r }) => {
+  const d = i();
+  d.save(), d.beginPath(), R(d, n);
   for (const u of t) {
     if (!r(u.x, s) || !r(u.y, e))
       continue;
-    const a = l(u.x, s), p = l(u.y, e);
-    d.moveTo(a + c, p), d.arc(a, p, c, 0, Math.PI * 2);
+    const l = a(u.x, s), p = a(u.y, e);
+    d.moveTo(l + o, p), d.arc(l, p, o, 0, Math.PI * 2);
   }
   d.stroke(), d.fill(), d.restore();
-}, [t, s, e, c, o]), null), xe = ({
+}, [t, s, e, o, n]), null), pe = ({
   data: t,
   xScaleId: s,
   yScaleId: e,
-  style: c,
-  barWidth: o,
-  xPositionOffset: n,
-  radius: l
+  style: o,
+  barWidth: n,
+  xPositionOffset: i,
+  radius: a
 }) => (Y(
   ({
     getCtx: r,
     valToPxDistance: d,
     valToPos: u,
-    clampXPosToChartArea: a,
+    clampXPosToChartArea: l,
     clampYPosToChartArea: p
   }) => {
     if (t.length === 0) return;
     const f = r();
-    f.save(), R(f, c);
-    const m = d(o, s);
+    f.save(), R(f, o);
+    const m = d(n, s);
     f.beginPath();
-    for (const i of t) {
-      const y = u(i.x, s) - m / 2 + n * m, x = p(u(0, e)), v = p(u(i.y, e)), S = x - v, g = a(y), T = a(y + m) - g;
-      l ? f.roundRect(
-        g,
+    for (const c of t) {
+      const y = u(c.x, s) - m / 2 + i * m, x = p(u(0, e)), w = p(u(c.y, e)), g = x - w, v = l(y), T = l(y + m) - v;
+      a ? f.roundRect(
         v,
+        w,
         T,
-        S,
-        l
-      ) : f.rect(g, v, T, S);
+        g,
+        a
+      ) : f.rect(v, w, T, g);
     }
-    f.closePath(), f.fill(), c?.strokeStyle && f.stroke(), f.restore();
+    f.closePath(), f.fill(), o?.strokeStyle && f.stroke(), f.restore();
   },
-  [t, s, e, c, o, n, l]
-), null), Se = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (Y(({ getCtx: o, clampXPosToChartArea: n, clampYPosToChartArea: l, valToPos: r }) => {
+  [t, s, e, o, n, i, a]
+), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(({ getCtx: n, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: r }) => {
   const d = [];
-  for (const a of t) {
-    const p = n(r(a.x, s)), f = l(r(a.y[0], e)), m = l(r(a.y[1], e));
+  for (const l of t) {
+    const p = i(r(l.x, s)), f = a(r(l.y[0], e)), m = a(r(l.y[1], e));
     d.push({ x: p, y: f }), d.unshift({ x: p, y: m });
   }
-  const u = o();
+  const u = n();
   if (d.length > 0) {
-    u.save(), u.beginPath(), R(u, c), u.moveTo(d[0].x, d[0].y);
-    for (const a of d)
-      u.lineTo(a.x, a.y);
+    u.save(), u.beginPath(), R(u, o), u.moveTo(d[0].x, d[0].y);
+    for (const l of d)
+      u.lineTo(l.x, l.y);
     u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, c]), null), ge = ({ data: t, stroked: s, xScaleId: e, yScaleId: c, style: o }) => (Y(
-  ({ getCtx: n, clampXPosToChartArea: l, clampYPosToChartArea: r, valToPos: d }) => {
-    const u = [], a = n();
-    for (const i of t) {
-      const h = l(d(i.x, e)), y = r(d(i.y, c));
+}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (Y(
+  ({ getCtx: i, clampXPosToChartArea: a, clampYPosToChartArea: r, valToPos: d }) => {
+    const u = [], l = i();
+    for (const c of t) {
+      const h = a(d(c.x, e)), y = r(d(c.y, o));
       u.push({ x: h, y });
     }
     const p = u.at(0), f = u.at(-1);
     if (!p || !f)
       return;
-    const m = r(d(0, c));
-    a.save(), a.beginPath(), R(a, o), a.moveTo(p.x, m);
-    for (const i of u)
-      a.lineTo(i.x, i.y);
-    if (a.lineTo(f.x, m), a.closePath(), a.fill(), s) {
-      a.beginPath(), a.moveTo(p.x, p.y);
-      for (const i of u)
-        a.lineTo(i.x, i.y);
-      a.stroke();
+    const m = r(d(0, o));
+    l.save(), l.beginPath(), R(l, n), l.moveTo(p.x, m);
+    for (const c of u)
+      l.lineTo(c.x, c.y);
+    if (l.lineTo(f.x, m), l.closePath(), l.fill(), s) {
+      l.beginPath(), l.moveTo(p.x, p.y);
+      for (const c of u)
+        l.lineTo(c.x, c.y);
+      l.stroke();
     }
-    a.restore();
+    l.restore();
   },
-  [t, s, e, c, o]
-), null), ve = (t, s) => ft(
+  [t, s, e, o, n]
+), null), ge = (t, s) => ht(
   ({
     clampXPosToChartArea: e,
-    clampYPosToChartArea: c,
-    getScale: o,
-    valToPos: n,
-    valFits: l
+    clampYPosToChartArea: o,
+    getScale: n,
+    valToPos: i,
+    valFits: a
   }) => {
     const r = {};
     for (const d in t) {
       const u = t[d];
       switch (u.exceeding) {
         case "discard": {
-          if (l(u.value, u.scaleId)) {
-            const a = n(u.value, u.scaleId, s);
-            r[d] = a;
+          if (a(u.value, u.scaleId)) {
+            const l = i(u.value, u.scaleId, s);
+            r[d] = l;
           }
           break;
         }
         case "clamp": {
-          const a = n(u.value, u.scaleId, s);
-          r[d] = o(u.scaleId)?.origin === "x" ? e(a, s) : c(a, s);
+          const l = i(u.value, u.scaleId, s);
+          r[d] = n(u.scaleId)?.origin === "x" ? e(l, s) : o(l, s);
           break;
         }
       }
     }
     return r;
   }
-), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: o, ticks: n }) => (Y(
-  ({ getCtx: l, valToPos: r, getScale: d, getFrame: u }) => {
-    const a = l(), p = d(t);
+), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: i }) => (Y(
+  ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
+    const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "x") return;
-    const f = p.axis, m = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, i = window.devicePixelRatio || 1, h = m, y = (o ?? 6) * i, x = f.position === "top" ? m - y : m + y, v = (c ?? 12) * i;
-    a.save(), a.fontKerning = "auto", R(a, {
+    const f = p.axis, m = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, c = window.devicePixelRatio || 1, h = m, y = (n ?? 6) * c, x = f.position === "top" ? m - y : m + y, w = (o ?? 12) * c;
+    l.save(), l.fontKerning = "auto", R(l, {
       ...s
-    }), a.beginPath();
-    const S = Array.isArray(n) ? n : n({ ...p, axis: f }, u());
-    for (const { value: g } of S) {
-      const T = r(g, t, "canvas");
-      a.moveTo(T, h), a.lineTo(T, x);
+    }), l.beginPath();
+    const g = Array.isArray(i) ? i : i({ ...p, axis: f }, u());
+    for (const { value: v } of g) {
+      const T = r(v, t, "canvas");
+      l.moveTo(T, h), l.lineTo(T, x);
     }
-    a.stroke(), a.restore(), a.save(), R(a, {
+    l.stroke(), l.restore(), l.save(), R(l, {
       textBaseline: f.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...s,
       ...e
     });
-    for (const { value: g, label: T } of S) {
-      const w = r(g, t, "canvas"), C = T.split(`
+    for (const { value: v, label: T } of g) {
+      const b = r(v, t, "canvas"), C = T.split(`
 `);
       for (let k = 0; k < C.length; k++)
-        a.fillText(C[k], w, x + i * 2 + k * v);
+        l.fillText(C[k], b, x + c * 2 + k * w);
     }
-    a.restore();
+    l.restore();
   },
-  [n, t, s, e]
-), null), be = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: o, ticks: n }) => (Y(
-  ({ getCtx: l, valToPos: r, getScale: d, getFrame: u }) => {
-    const a = l(), p = d(t);
+  [i, t, s, e]
+), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: i }) => (Y(
+  ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
+    const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "y") return;
-    const f = p.axis, m = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, i = m, h = o ?? 6, y = f.position === "left" ? m - h : m + h, x = c ?? 12, v = Array.isArray(n) ? n : n({ ...p, axis: f }, u());
-    a.save(), a.fontKerning = "auto", R(a, { ...s }), a.beginPath();
-    for (const { value: S } of v) {
-      const g = r(S, t, "canvas");
-      a.moveTo(i, g), a.lineTo(y, g);
+    const f = p.axis, m = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, c = m, h = n ?? 6, y = f.position === "left" ? m - h : m + h, x = o ?? 12, w = Array.isArray(i) ? i : i({ ...p, axis: f }, u());
+    l.save(), l.fontKerning = "auto", R(l, { ...s }), l.beginPath();
+    for (const { value: g } of w) {
+      const v = r(g, t, "canvas");
+      l.moveTo(c, v), l.lineTo(y, v);
     }
-    a.stroke(), a.restore(), a.save(), R(a, {
+    l.stroke(), l.restore(), l.save(), R(l, {
       textBaseline: "middle",
       textAlign: f.position === "left" ? "right" : "left",
       ...s,
       ...e
     });
-    for (const { value: S, label: g } of v) {
-      const T = r(S, t, "canvas"), w = g.split(`
+    for (const { value: g, label: v } of w) {
+      const T = r(g, t, "canvas"), b = v.split(`
 `);
-      for (let C = 0; C < w.length; C++)
-        a.fillText(` ${w[C]} `, y, T + C * x);
+      for (let C = 0; C < b.length; C++)
+        l.fillText(` ${b[C]} `, y, T + C * x);
     }
-    a.restore();
+    l.restore();
   },
-  [n, t, s, e]
+  [i, t, s, e]
 ), null), E = () => {
   const t = [];
   return {
@@ -494,15 +494,15 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
       syncKey: s,
       callback: e
     }), () => {
-      const c = t.findIndex((o) => o.callback === e);
-      c !== -1 && t.splice(c, 1);
+      const o = t.findIndex((n) => n.callback === e);
+      o !== -1 && t.splice(o, 1);
     }),
     dispatchEvent: (s, e) => {
-      for (const c of t)
-        c.syncKey === s && c.callback(s, e);
+      for (const o of t)
+        o.syncKey === s && o.callback(s, e);
     }
   };
-}, b = {
+}, S = {
   dblclick: E(),
   click: E(),
   contextmenu: E(),
@@ -521,36 +521,36 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
   sync_pressandwheel: E(),
   sync_contextmenu: E()
 }, M = (t, s, e) => {
-  const c = Z.useRef(e);
-  c.current = e, Z.useEffect(() => b[t].addEventListener(
+  const o = Z.useRef(e);
+  o.current = e, Z.useEffect(() => S[t].addEventListener(
     s,
-    (n, l) => {
-      c.current(l, n);
+    (i, a) => {
+      o.current(a, i);
     }
-  ), [s, t, c]);
-}, mt = Z.createContext(""), pt = (t, s) => {
-  const e = Z.useContext(mt);
+  ), [s, t, o]);
+}, ft = Z.createContext(""), mt = (t, s) => {
+  const e = Z.useContext(ft);
   return M(t, e, s);
-}, Vt = (t, s, e, c, o) => {
+}, Nt = (t, s, e, o, n) => {
   if (!s) return;
-  const n = c ?? e.scales.find((p) => p.origin === "x")?.id, l = o ?? e.scales.find((p) => p.origin === "y")?.id;
-  if (!n || !l)
+  const i = o ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
+  if (!i || !a)
     return;
   const r = t.clientX - s.left, d = {
-    scaleId: n,
-    value: X(e, r, n, "css")
-  }, u = t.clientY - s.top, a = {
-    scaleId: l,
-    value: X(e, u, l, "css")
+    scaleId: i,
+    value: D(e, r, i, "css")
+  }, u = t.clientY - s.top, l = {
+    scaleId: a,
+    value: D(e, u, a, "css")
   };
-  return { pointerSyncPosition: { x: d, y: a }, cssX: r, cssY: u };
+  return { pointerSyncPosition: { x: d, y: l }, cssX: r, cssY: u };
 }, z = (t, s) => {
   const e = t.x ? H(
     s,
     t.x.value,
     t.x.scaleId,
     "css"
-  ) : 0, c = t.y ? H(
+  ) : 0, o = t.y ? H(
     s,
     t.y.value,
     t.y.scaleId,
@@ -558,46 +558,33 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
   ) : 0;
   return {
     cssX: e,
-    cssY: c,
+    cssY: o,
     scaled: Object.fromEntries(
-      s.scales.map((o) => {
-        const n = o.origin === "y" ? c : e;
-        return [o.id, X(s, n, o.id, "css")];
+      s.scales.map((n) => {
+        const i = n.origin === "y" ? o : e;
+        return [n.id, D(s, i, n.id, "css")];
       })
     )
   };
-}, St = (t, s, e) => {
-  if (!s) {
-    const l = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, r = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
-    return {
-      fromCSS: l,
-      toCSS: r,
-      scaled: e.scales.flatMap((d) => {
-        if (d.origin !== t)
-          return [];
-        const { min: u, max: a } = _(e, d.id);
-        return [{ scaleId: d.id, from: u, to: a }];
-      })
-    };
-  }
-  const c = H(
+}, xt = (t, s, e) => {
+  const o = H(
     e,
     s.from,
     s.scaleId,
     "css"
-  ), o = H(
+  ), n = H(
     e,
     s.to,
     s.scaleId,
     "css"
-  ), n = e.scales.flatMap(
-    (l) => {
-      if (l.origin !== t)
+  ), i = e.scales.flatMap(
+    (a) => {
+      if (a.origin !== t)
         return [];
-      const r = X(e, c, l.id, "css"), d = X(e, o, l.id, "css");
+      const r = D(e, o, a.id, "css"), d = D(e, n, a.id, "css");
       return [
         {
-          scaleId: l.id,
+          scaleId: a.id,
           from: r,
           to: d
         }
@@ -605,70 +592,70 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
     }
   );
   return {
-    fromCSS: c,
-    toCSS: o,
-    scaled: n
+    fromCSS: o,
+    toCSS: n,
+    scaled: i
   };
-}, Ce = ({
+}, be = ({
   id: t,
   onClick: s,
   onDblClick: e,
-  onMouseMove: c,
-  onMouseDown: o,
-  onMouseUp: n,
-  onDocumentMouseUp: l,
+  onMouseMove: o,
+  onMouseDown: n,
+  onMouseUp: i,
+  onDocumentMouseUp: a,
   onSpanSelect: r,
   onContextMenu: d,
   className: u,
-  style: a,
+  style: l,
   sync: p,
   children: f
 }) => {
-  const m = Lt(), i = t || m;
-  return M("dblclick", i, (h) => {
+  const m = Ut(), c = t || m;
+  return M("dblclick", c, (h) => {
     e?.(h);
-  }), M("click", i, (h) => {
+  }), M("click", c, (h) => {
     s?.(h);
-  }), M("move", i, (h) => {
-    c?.(h);
-  }), M("mousedown", i, (h) => {
+  }), M("move", c, (h) => {
     o?.(h);
-  }), M("mouseup", i, (h) => {
+  }), M("mousedown", c, (h) => {
     n?.(h);
-  }), M("documentmouseup", i, (h) => {
-    l?.(h);
-  }), M("spanselect", i, (h) => {
+  }), M("mouseup", c, (h) => {
+    i?.(h);
+  }), M("documentmouseup", c, (h) => {
+    a?.(h);
+  }), M("spanselect", c, (h) => {
     r?.(h);
-  }), M("contextmenu", i, (h) => {
+  }), M("contextmenu", c, (h) => {
     d?.(h);
-  }), /* @__PURE__ */ ut(mt.Provider, { value: i, children: [
-    /* @__PURE__ */ A(
-      jt,
+  }), /* @__PURE__ */ lt(ft.Provider, { value: c, children: [
+    /* @__PURE__ */ _(
+      Vt,
       {
         className: u,
-        style: a,
+        style: l,
         sync: p
       }
     ),
     f
   ] });
-}, jt = ({ className: t, style: s, sync: e }) => {
-  const c = D(null), o = ft(), n = D(o);
-  n.current = o;
-  const l = J(mt), r = e?.key || l, d = D(null), u = D(null), a = D(null), p = () => {
-    const i = c.current?.parentElement;
-    if (i) {
-      if (i.dataset.canplotroot === void 0)
+}, Vt = ({ className: t, style: s, sync: e }) => {
+  const o = L(null), n = ht(), i = L(n);
+  i.current = n;
+  const a = J(ft), r = e?.key || a, d = L(null), u = L(null), l = L(null), p = () => {
+    const c = o.current?.parentElement;
+    if (c) {
+      if (c.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return i.getBoundingClientRect();
+      return c.getBoundingClientRect();
     }
-  }, f = (i, h) => {
-    const y = Vt(
-      i,
+  }, f = (c, h) => {
+    const y = Nt(
+      c,
       p(),
-      n.current,
+      i.current,
       e?.xViaScaleId,
       e?.yViaScaleId
     );
@@ -676,312 +663,314 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
       y.pointerSyncPosition,
       { cssX: y.cssX, cssY: y.cssY },
       {
-        ctrlKey: i.ctrlKey,
-        altKey: i.altKey,
-        shiftKey: i.shiftKey,
-        metaKey: i.metaKey
+        ctrlKey: c.ctrlKey,
+        altKey: c.altKey,
+        shiftKey: c.shiftKey,
+        metaKey: c.metaKey
       }
     );
-  }, m = D(f);
+  }, m = L(f);
   return m.current = f, wt(() => {
-    const i = (S) => {
-      const g = u.current;
-      g && b.sync_spanselect.dispatchEvent(r, {
-        ...g,
+    const c = (g) => {
+      const v = u.current;
+      v && S.sync_spanselect.dispatchEvent(r, {
+        ...v,
         completed: !0
-      }), b.documentmouseup.dispatchEvent(r, {
-        frame: n.current,
+      }), S.documentmouseup.dispatchEvent(r, {
+        frame: i.current,
         keys: {
-          ctrlKey: S.ctrlKey,
-          altKey: S.altKey,
-          shiftKey: S.shiftKey,
-          metaKey: S.metaKey
+          ctrlKey: g.ctrlKey,
+          altKey: g.altKey,
+          shiftKey: g.shiftKey,
+          metaKey: g.metaKey
         }
       });
-    }, h = (S) => {
-      const g = {
-        ctrlKey: S.ctrlKey,
-        altKey: S.altKey,
-        shiftKey: S.shiftKey,
-        metaKey: S.metaKey
-      }, T = a.current;
-      if (T && Object.entries(g).some(
+    }, h = (g) => {
+      const v = {
+        ctrlKey: g.ctrlKey,
+        altKey: g.altKey,
+        shiftKey: g.shiftKey,
+        metaKey: g.metaKey
+      }, T = l.current;
+      if (T && Object.entries(v).some(
         ([C, k]) => T.keys[C] !== k
       )) {
-        const C = { ...T, keys: g };
-        a.current = C, b.sync_move.dispatchEvent(r, C);
+        const C = { ...T, keys: v };
+        l.current = C, S.sync_move.dispatchEvent(r, C);
       }
-      const w = u.current;
-      if (w && Object.entries(g).some(
-        ([C, k]) => w.keys[C] !== k
+      const b = u.current;
+      if (b && Object.entries(v).some(
+        ([C, k]) => b.keys[C] !== k
       )) {
-        S.stopPropagation(), S.preventDefault();
-        const C = { ...w, keys: g };
-        u.current = C, b.sync_spanselect.dispatchEvent(
+        g.stopPropagation(), g.preventDefault();
+        const C = { ...b, keys: v };
+        u.current = C, S.sync_spanselect.dispatchEvent(
           r,
           C
         );
       }
-    }, y = (S) => {
+    }, y = (g) => {
       m.current(
-        S,
-        (g, { cssX: T, cssY: w }, C) => {
+        g,
+        (v, { cssX: T, cssY: b }, C) => {
           const k = d.current;
-          if (!k || !g.x || !g.y) return;
-          const U = n.current, P = k.xRangeCss.start, B = T, F = k.yRangeCss.start, nt = w, ot = _(U, g.x.scaleId), ct = _(U, g.y.scaleId);
+          if (!k || !v.x || !v.y) return;
+          const A = i.current, P = k.xRangeCss.start, B = T, F = k.yRangeCss.start, st = b, nt = I(A, v.x.scaleId), ot = I(A, v.y.scaleId);
           d.current = {
             xRangeCss: { start: P, end: B },
-            yRangeCss: { start: F, end: nt }
+            yRangeCss: { start: F, end: st }
           };
-          let L = "none";
-          const it = Math.abs(F - nt), rt = Math.abs(P - B);
-          it < 10 && rt < 10 ? L = "none" : it > 30 && rt > 30 ? L = "box" : it > rt ? L = "y" : L = "x";
-          const Pt = L === "x" || L === "box" ? {
-            scaleId: ot.id,
-            from: X(
-              U,
-              O(n.current, P, "css"),
-              ot.id,
+          let U = "below_threshold";
+          const it = Math.abs(F - st), ct = Math.abs(P - B);
+          it < 10 && ct < 10 ? U = "below_threshold" : it > 30 && ct > 30 ? U = "box" : it > ct ? U = "y" : U = "x";
+          const Mt = U === "x" || U === "box" ? {
+            scaleId: nt.id,
+            from: D(
+              A,
+              O(i.current, P, "css"),
+              nt.id,
               "css"
             ),
-            to: X(
-              U,
-              O(n.current, B, "css"),
-              ot.id,
+            to: D(
+              A,
+              O(i.current, B, "css"),
+              nt.id,
               "css"
             )
-          } : void 0, At = L === "y" || L === "box" ? {
-            scaleId: ct.id,
-            from: X(
-              U,
-              $(n.current, F, "css"),
-              ct.id,
+          } : void 0, Pt = U === "y" || U === "box" ? {
+            scaleId: ot.id,
+            from: D(
+              A,
+              $(i.current, F, "css"),
+              ot.id,
               "css"
             ),
-            to: X(
-              U,
-              $(n.current, nt, "css"),
-              ct.id,
+            to: D(
+              A,
+              $(i.current, st, "css"),
+              ot.id,
               "css"
             )
-          } : void 0, xt = {
-            mode: L,
-            xRange: Pt,
-            yRange: At,
+          } : void 0, yt = {
+            mode: U,
+            xRange: Mt,
+            yRange: Pt,
             completed: !1,
             keys: C
           };
-          u.current = xt, b.sync_spanselect.dispatchEvent(
+          u.current = yt, S.sync_spanselect.dispatchEvent(
             r,
-            xt
+            yt
           );
         }
       );
-    }, x = (S) => {
-      m.current(S, (g, T, w) => {
-        if (Object.values(w).some((k) => k)) {
-          S.preventDefault();
-          const k = Math.abs(S.deltaY) > Math.abs(S.deltaX) ? S.deltaY : S.deltaX;
-          b.sync_pressandwheel.dispatchEvent(r, {
-            positions: g,
-            keys: w,
-            deltaX: S.deltaX,
-            deltaY: S.deltaY,
+    }, x = (g) => {
+      m.current(g, (v, T, b) => {
+        if (Object.values(b).some((k) => k)) {
+          g.preventDefault();
+          const k = Math.abs(g.deltaY) > Math.abs(g.deltaX) ? g.deltaY : g.deltaX;
+          S.sync_pressandwheel.dispatchEvent(r, {
+            positions: v,
+            keys: b,
+            deltaX: g.deltaX,
+            deltaY: g.deltaY,
             deltaAbs: k
           });
         }
       });
     };
-    document.addEventListener("mouseup", i), document.addEventListener("keydown", h), document.addEventListener("keyup", h), document.addEventListener("mousemove", y);
-    const v = c.current;
-    return v?.addEventListener("wheel", x, {
+    document.addEventListener("mouseup", c), document.addEventListener("keydown", h), document.addEventListener("keyup", h), document.addEventListener("mousemove", y);
+    const w = o.current;
+    return w?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", i), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), v?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", c), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), w?.removeEventListener("wheel", x);
     };
-  }, [n, r, m]), M("sync_dblclick", r, (i) => {
+  }, [i, r, m]), M("sync_dblclick", r, (c) => {
     const h = z(
-      i.positions,
-      n.current
+      c.positions,
+      i.current
     );
-    h && b.dblclick.dispatchEvent(l, {
-      frame: n.current,
+    h && S.dblclick.dispatchEvent(a, {
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_click", r, (i) => {
+  }), M("sync_click", r, (c) => {
     const h = z(
-      i.positions,
-      n.current
+      c.positions,
+      i.current
     );
-    h && b.click.dispatchEvent(l, {
-      frame: n.current,
+    h && S.click.dispatchEvent(a, {
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_contextmenu", r, (i) => {
+  }), M("sync_contextmenu", r, (c) => {
     const h = z(
-      i.positions,
-      n.current
+      c.positions,
+      i.current
     );
-    h && b.contextmenu.dispatchEvent(l, {
-      frame: n.current,
+    h && S.contextmenu.dispatchEvent(a, {
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_move", r, (i) => {
-    const h = i.positions ? z(
-      i.positions,
-      n.current
+  }), M("sync_move", r, (c) => {
+    const h = c.positions ? z(
+      c.positions,
+      i.current
     ) : null;
-    a.current = i, b.move.dispatchEvent(l, {
-      frame: n.current,
+    l.current = c, S.move.dispatchEvent(a, {
+      frame: i.current,
       pointer: h ?? null,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_mousedown", r, (i) => {
+  }), M("sync_mousedown", r, (c) => {
     const h = z(
-      i.positions,
-      n.current
+      c.positions,
+      i.current
     );
-    h && b.mousedown.dispatchEvent(l, {
-      frame: n.current,
+    h && S.mousedown.dispatchEvent(a, {
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
-  }), M("sync_mouseup", r, (i) => {
+  }), M("sync_mouseup", r, (c) => {
     const h = z(
-      i.positions,
-      n.current
+      c.positions,
+      i.current
     );
-    h && b.mouseup.dispatchEvent(l, {
-      frame: n.current,
+    h && S.mouseup.dispatchEvent(a, {
+      frame: i.current,
       pointer: h,
-      keys: i.keys
+      keys: c.keys
     });
   }), M(
     "sync_pressandwheel",
     r,
-    (i) => {
+    (c) => {
       const h = z(
-        i.positions,
-        n.current
+        c.positions,
+        i.current
       );
-      h && b.pressandwheel.dispatchEvent(l, {
-        frame: n.current,
+      h && S.pressandwheel.dispatchEvent(a, {
+        frame: i.current,
         pointer: h,
-        keys: i.keys,
-        deltaX: i.deltaX,
-        deltaY: i.deltaY,
-        deltaAbs: i.deltaAbs
+        keys: c.keys,
+        deltaX: c.deltaX,
+        deltaY: c.deltaY,
+        deltaAbs: c.deltaAbs
       });
     }
-  ), M("sync_spanselect", r, (i) => {
-    const h = St(
-      "x",
-      i.xRange,
-      n.current
-    ), y = St(
-      "y",
-      i.yRange,
-      n.current
-    ), x = h.scaled, v = y.scaled;
-    i.completed && (d.current = null), b.spanselect.dispatchEvent(l, {
-      mode: i.mode,
-      frame: n.current,
-      xRanges: x,
-      yRanges: v,
-      completed: i.completed,
-      x: { fromCSS: h.fromCSS, toCSS: h.toCSS },
-      y: { fromCSS: y.fromCSS, toCSS: y.toCSS },
-      keys: i.keys
+  ), M("sync_spanselect", r, (c) => {
+    const h = c.xRange && xt("x", c.xRange, i.current), y = c.yRange && xt("y", c.yRange, i.current), x = h?.scaled, w = y?.scaled;
+    c.completed && (d.current = null), S.spanselect.dispatchEvent(a, {
+      mode: c.mode,
+      frame: i.current,
+      completed: c.completed,
+      x: {
+        css: h && {
+          from: h.fromCSS,
+          to: h.toCSS
+        },
+        scaled: x ?? []
+      },
+      y: {
+        css: y && {
+          from: y.fromCSS,
+          to: y.toCSS
+        },
+        scaled: w ?? []
+      },
+      keys: c.keys
     });
-  }), /* @__PURE__ */ A(
+  }), /* @__PURE__ */ _(
     "div",
     {
-      ref: c,
+      ref: o,
       id: "interactions",
       className: t,
       style: {
         position: "absolute",
-        left: o.chartAreaCSS.x,
-        top: o.chartAreaCSS.y,
-        width: o.chartAreaCSS.width,
-        height: o.chartAreaCSS.height,
+        left: n.chartAreaCSS.x,
+        top: n.chartAreaCSS.y,
+        width: n.chartAreaCSS.width,
+        height: n.chartAreaCSS.height,
         zIndex: 25,
         ...s
       },
-      onDragStart: (i) => {
-        i.preventDefault();
+      onDragStart: (c) => {
+        c.preventDefault();
       },
-      onClick: (i) => {
-        f(i, (h, y, x) => {
-          b.sync_click.dispatchEvent(r, {
+      onClick: (c) => {
+        f(c, (h, y, x) => {
+          S.sync_click.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onMouseLeave: (i) => {
-        f(i, (h, y, x) => {
-          b.sync_move.dispatchEvent(r, {
+      onMouseLeave: (c) => {
+        f(c, (h, y, x) => {
+          S.sync_move.dispatchEvent(r, {
             positions: null,
             keys: x
           });
         });
       },
-      onMouseMove: (i) => {
-        f(i, (h, y, x) => {
-          b.sync_move.dispatchEvent(r, {
+      onMouseMove: (c) => {
+        f(c, (h, y, x) => {
+          S.sync_move.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onMouseDown: (i) => {
-        f(i, (h, { cssX: y, cssY: x }, v) => {
-          b.sync_mousedown.dispatchEvent(r, {
+      onMouseDown: (c) => {
+        f(c, (h, { cssX: y, cssY: x }, w) => {
+          S.sync_mousedown.dispatchEvent(r, {
             positions: h,
-            keys: v
+            keys: w
           }), u.current = null, d.current = {
             xRangeCss: { start: y, end: y },
             yRangeCss: { start: x, end: x }
           };
         });
       },
-      onMouseUp: (i) => {
-        f(i, (h, y, x) => {
-          b.sync_mouseup.dispatchEvent(r, {
+      onMouseUp: (c) => {
+        f(c, (h, y, x) => {
+          S.sync_mouseup.dispatchEvent(r, {
             positions: h,
             keys: x
           });
-          const v = u.current;
+          const w = u.current;
           u.current = null;
-          const S = d.current;
-          if (d.current = null, S && v) {
-            const g = {
-              ...v,
+          const g = d.current;
+          if (d.current = null, g && w) {
+            const v = {
+              ...w,
               keys: x,
               completed: !0
             };
-            b.sync_spanselect.dispatchEvent(
+            S.sync_spanselect.dispatchEvent(
               r,
-              g
+              v
             );
           }
         });
       },
-      onContextMenu: (i) => {
-        i.preventDefault(), f(i, (h, y, x) => {
-          b.sync_contextmenu.dispatchEvent(r, {
+      onContextMenu: (c) => {
+        c.preventDefault(), f(c, (h, y, x) => {
+          S.sync_contextmenu.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onDoubleClick: (i) => {
-        f(i, (h, y, x) => {
-          b.sync_dblclick.dispatchEvent(r, {
+      onDoubleClick: (c) => {
+        f(c, (h, y, x) => {
+          S.sync_dblclick.dispatchEvent(r, {
             positions: h,
             keys: x
           });
@@ -989,174 +978,174 @@ const me = Ut(({ configuration: t, children: s, style: e, className: c }, o) =>
       }
     }
   );
-}, Te = ({ data: t, renderTooltip: s, xScaleId: e }) => {
-  const [c, o] = V(null);
-  pt("move", (l) => {
-    o(l);
+}, Se = ({ data: t, renderTooltip: s, xScaleId: e }) => {
+  const [o, n] = V(null);
+  mt("move", (a) => {
+    n(a);
   });
-  const n = Q(() => {
-    if (!c)
+  const i = Q(() => {
+    if (!o)
       return null;
-    const { frame: l, pointer: r } = c, d = r?.scaled[e];
+    const { frame: a, pointer: r } = o, d = r?.scaled[e];
     if (d === void 0)
       return null;
     const u = [];
-    let a = d;
+    let l = d;
     for (const p of t) {
       let f = null, m = 1 / 0;
       for (const [h, y] of p.points.entries()) {
-        if (!at(l, y.x, e) || !at(l, y.y, p.yScaleId))
+        if (!rt(a, y.x, e) || !rt(a, y.y, p.yScaleId))
           continue;
         const x = Math.abs(y.x - d);
         x < m && (m = x, f = h);
       }
-      const i = p.points[f ?? -1];
-      if (!i || dt(l, m, e, "css") > 30) {
+      const c = p.points[f ?? -1];
+      if (!c || ut(a, m, e, "css") > 30) {
         u.push({ seriesId: p.seriesId, y: null });
         continue;
       }
-      a = i.x, u.push({
+      l = c.x, u.push({
         seriesId: p.seriesId,
-        y: i.y
+        y: c.y
       });
     }
     return {
-      frame: l,
-      x: a,
+      frame: a,
+      x: l,
       points: u
     };
-  }, [t, c, e]);
-  return s(n);
-}, ke = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: c }) => {
-  const [o, n] = V(null);
-  if (pt("move", (a) => {
-    n(a);
-  }), !o)
+  }, [t, o, e]);
+  return s(i);
+}, Ce = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: o }) => {
+  const [n, i] = V(null);
+  if (mt("move", (l) => {
+    i(l);
+  }), !n)
     return null;
-  const { frame: l, pointer: r } = o, d = O(l, r?.cssX ?? 0, "css"), u = $(l, r?.cssY ?? 0, "css");
-  return /* @__PURE__ */ ut(_t, { children: [
-    /* @__PURE__ */ A(
+  const { frame: a, pointer: r } = n, d = O(a, r?.cssX ?? 0, "css"), u = $(a, r?.cssY ?? 0, "css");
+  return /* @__PURE__ */ lt(_t, { children: [
+    /* @__PURE__ */ _(
       "div",
       {
         "data-show": !!r,
-        className: s?.(o),
+        className: s?.(n),
         style: {
           position: "absolute",
           left: 0,
-          top: l.chartAreaCSS.y,
-          height: l.chartAreaCSS.height,
+          top: a.chartAreaCSS.y,
+          height: a.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
           opacity: r ? 1 : 0,
           transform: `translateX(${d}px)`,
-          ...t?.(o)
+          ...t?.(n)
         }
       }
     ),
-    /* @__PURE__ */ A(
+    /* @__PURE__ */ _(
       "div",
       {
-        className: c?.(o),
+        className: o?.(n),
         "data-show": !!r,
         style: {
           position: "absolute",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: l.chartAreaCSS.x,
-          width: l.chartAreaCSS.width,
+          left: a.chartAreaCSS.x,
+          width: a.chartAreaCSS.width,
           pointerEvents: "none",
           opacity: r ? 1 : 0,
           transform: `translateY(${u}px)`,
-          ...e?.(o)
+          ...e?.(n)
         }
       }
     )
   ] });
-}, Ee = ({ makeClassName: t, makeStyle: s }) => {
-  const [e, c] = V(null);
-  pt("spanselect", (n) => {
-    c(n.mode === "none" || n.completed ? null : n);
+}, Te = ({ makeClassName: t, makeStyle: s }) => {
+  const [e, o] = V(null);
+  mt("spanselect", (i) => {
+    o(i.mode === "below_threshold" || i.completed ? null : i);
   });
-  const o = Q(() => {
-    if (!e)
+  const n = Q(() => {
+    if (!e || e.mode === "below_threshold")
       return null;
-    const n = O(
+    const i = O(
       e.frame,
-      e.x.fromCSS,
+      e.x.css?.from ?? -1 / 0,
       "css"
-    ), l = O(
+    ), a = O(
       e.frame,
-      e.x.toCSS,
+      e.x.css?.to ?? 1 / 0,
       "css"
     ), r = $(
       e.frame,
-      e.y.fromCSS,
+      e.y.css?.from ?? -1 / 0,
       "css"
     ), d = $(
       e.frame,
-      e.y.toCSS,
+      e.y.css?.to ?? 1 / 0,
       "css"
-    ), u = Math.min(n, l), a = Math.min(r, d), p = Math.abs(l - n), f = Math.abs(d - r);
-    return { leftPx: u, topPx: a, widthPx: p, heightPx: f };
+    ), u = Math.min(i, a), l = Math.min(r, d), p = Math.abs(a - i), f = Math.abs(d - r);
+    return { leftPx: u, topPx: l, widthPx: p, heightPx: f };
   }, [e]);
-  return /* @__PURE__ */ A(
+  return /* @__PURE__ */ _(
     "div",
     {
       className: e ? t?.(e) : void 0,
       style: {
         position: "absolute",
         visibility: e ? "visible" : "hidden",
-        left: `${o?.leftPx ?? 0}px`,
-        top: `${o?.topPx ?? 0}px`,
-        width: `${o?.widthPx ?? 0}px`,
-        height: `${o?.heightPx ?? 0}px`,
+        left: `${n?.leftPx ?? 0}px`,
+        top: `${n?.topPx ?? 0}px`,
+        width: `${n?.widthPx ?? 0}px`,
+        height: `${n?.heightPx ?? 0}px`,
         pointerEvents: "none",
         ...e ? s?.(e) : void 0
       }
     }
   );
-}, Me = ({ style: t, children: s, scaleId: e, ...c }) => {
-  const o = ft((n) => n.getScale(e)?.axis);
-  return o ? /* @__PURE__ */ A(
+}, ke = ({ style: t, children: s, scaleId: e, ...o }) => {
+  const n = ht((i) => i.getScale(e)?.axis);
+  return n ? /* @__PURE__ */ _(
     "div",
     {
       style: {
         position: "absolute",
         backgroundColor: "#0000ff11",
-        left: o.cssRect.x,
-        top: o.cssRect.y,
-        height: o.cssRect.height,
-        width: o.cssRect.width,
+        left: n.cssRect.x,
+        top: n.cssRect.y,
+        height: n.cssRect.height,
+        width: n.cssRect.width,
         ...t
       },
-      ...c,
+      ...o,
       children: s
     }
   ) : null;
-}, kt = 60, Ht = 30, Et = "UTC", Wt = "en-GB", Pe = ({
+}, Tt = 60, jt = 30, kt = "UTC", Ht = "en-GB", Ee = ({
   space: t,
   formatter: s
-} = {}) => (e, c) => {
-  const { min: o, max: n } = e, l = [], r = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? kt : Ht)) * r, u = Dt(
-    c,
+} = {}) => (e, o) => {
+  const { min: n, max: i } = e, a = [], r = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? Tt : jt)) * r, u = Lt(
+    o,
     d,
     e.id,
     "canvas"
-  ), a = W.find((f) => f > u) ?? 1;
-  let p = o % a < Number.EPSILON ? o : o + a - o % a;
-  for (; p <= n; )
-    l.push(p), p += a;
-  return (s ?? qt)(l);
-}, qt = (t) => {
+  ), l = W.find((f) => f > u) ?? 1;
+  let p = n % l < Number.EPSILON ? n : n + l - n % l;
+  for (; p <= i; )
+    a.push(p), p += l;
+  return (s ?? Wt)(a);
+}, Wt = (t) => {
   const s = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
   return t.map((e) => ({ value: e, label: e.toFixed(s) }));
 }, W = [];
 for (let t = -12; t <= 12; t++)
   W.push(1 * 10 ** t), W.push(2 * 10 ** t), W.push(5 * 10 ** t);
-const Gt = 1, Mt = 1e3 * Gt, yt = 60 * Mt, tt = 60 * yt, st = 24 * tt, Zt = 30 * st, Jt = 365 * st, Qt = [
+const qt = 1, Et = 1e3 * qt, pt = 60 * Et, tt = 60 * pt, et = 24 * tt, Gt = 30 * et, Zt = 365 * et, Jt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1214,49 +1203,49 @@ const Gt = 1, Mt = 1e3 * Gt, yt = 60 * Mt, tt = 60 * yt, st = 24 * tt, Zt = 30 *
     case "milliseconds":
       return s;
     case "seconds":
-      return s * Mt;
+      return s * Et;
     case "minutes":
-      return s * yt;
+      return s * pt;
     case "hours":
       return s * tt;
     case "days":
-      return s * st;
+      return s * et;
     case "months":
-      return s * Zt;
+      return s * Gt;
     case "years":
-      return s * Jt;
+      return s * Zt;
   }
-}, te = (t, s) => {
+}, Qt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMilliseconds(e.getUTCMilliseconds() + s), e.getTime();
-}, ee = (t, s) => {
+}, te = (t, s) => {
   const e = new Date(t);
   return e.setUTCSeconds(e.getUTCSeconds() + s), e.getTime();
-}, se = (t, s) => {
+}, ee = (t, s) => {
   const e = new Date(t);
   return e.setUTCMinutes(e.getUTCMinutes() + s), e.getTime();
-}, ne = (t, s) => {
+}, se = (t, s) => {
   const e = new Date(t);
   return e.setUTCHours(e.getUTCHours() + s), e.getTime();
-}, oe = (t, s) => {
+}, ne = (t, s) => {
   const e = new Date(t);
   return e.setUTCDate(e.getUTCDate() + s), e.getTime();
 }, gt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
 }, K = (t, s) => {
-  const [e, c] = s;
-  switch (c) {
+  const [e, o] = s;
+  switch (o) {
     case "milliseconds":
-      return te(t, e);
+      return Qt(t, e);
     case "seconds":
-      return ee(t, e);
+      return te(t, e);
     case "minutes":
-      return se(t, e);
+      return ee(t, e);
     case "hours":
-      return ne(t, e);
+      return se(t, e);
     case "days":
-      return oe(t, e);
+      return ne(t, e);
     case "months":
       return gt(t, e);
     case "years":
@@ -1264,37 +1253,37 @@ const Gt = 1, Mt = 1e3 * Gt, yt = 60 * Mt, tt = 60 * yt, st = 24 * tt, Zt = 30 *
   }
 };
 function G(t, s) {
-  const e = new Date(t), c = new Date(e.toLocaleString("en-US", { timeZone: s })), o = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
-  return (c.getTime() - o.getTime()) / (3600 * 1e3);
+  const e = new Date(t), o = new Date(e.toLocaleString("en-US", { timeZone: s })), n = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
+  return (o.getTime() - n.getTime()) / (3600 * 1e3);
 }
-const ce = (t, s, e = "UTC") => {
-  const [c, o] = s;
-  let n = new Date(t);
-  const l = () => {
-    n.setUTCHours(-G(n, e), 0, 0, 0);
+const oe = (t, s, e = "UTC") => {
+  const [o, n] = s;
+  let i = new Date(t);
+  const a = () => {
+    i.setUTCHours(-G(i, e), 0, 0, 0);
   };
-  switch (o) {
+  switch (n) {
     case "milliseconds":
-      n.setUTCMilliseconds(
-        Math.ceil(n.getUTCMilliseconds() / c) * c
+      i.setUTCMilliseconds(
+        Math.ceil(i.getUTCMilliseconds() / o) * o
       );
       break;
     case "seconds":
-      n.setUTCSeconds(
-        Math.ceil(n.getUTCSeconds() / c) * c,
+      i.setUTCSeconds(
+        Math.ceil(i.getUTCSeconds() / o) * o,
         0
       );
       break;
     case "minutes":
-      n.setUTCMinutes(
-        Math.ceil(n.getTime() % tt / yt / c) * c,
+      i.setUTCMinutes(
+        Math.ceil(i.getTime() % tt / pt / o) * o,
         0,
         0
       );
       break;
     case "hours":
-      n.setUTCHours(
-        Math.ceil(n.getTime() % st / tt / c) * c,
+      i.setUTCHours(
+        Math.ceil(i.getTime() % et / tt / o) * o,
         0,
         0,
         0
@@ -1303,20 +1292,20 @@ const ce = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? n.setUTCDate(1) : o === "years" && n.setUTCMonth(0, 1), l(), n.getTime() < t && (n = new Date(K(n, [1, o])));
+      n === "months" ? i.setUTCDate(1) : n === "years" && i.setUTCMonth(0, 1), a(), i.getTime() < t && (i = new Date(K(i, [1, n])));
       break;
   }
-  return n.getTime();
-}, Ae = ({
-  timeZone: t = Et,
-  space: s = kt,
+  return i.getTime();
+}, Me = ({
+  timeZone: t = kt,
+  space: s = Tt,
   formatter: e,
-  locale: c,
-  showTimezone: o
-} = {}) => (n, l) => {
-  const { min: r, max: d } = n, u = Math.floor(l.chartAreaCanvasPX.width / s) + 1, p = (d - r) / u, [f, m] = Qt.find(
-    (v) => q(v) >= p
-  ) ?? [1, "milliseconds"], i = ce(r, [f, m], t), h = G(i, t), y = [i];
+  locale: o,
+  showTimezone: n
+} = {}) => (i, a) => {
+  const { min: r, max: d } = i, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - r) / u, [f, m] = Jt.find(
+    (w) => q(w) >= p
+  ) ?? [1, "milliseconds"], c = oe(r, [f, m], t), h = G(c, t), y = [c];
   let x;
   for (; ; ) {
     switch (m) {
@@ -1324,31 +1313,31 @@ const ce = (t, s, e = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        x = K(i, [y.length * f, m]);
+        x = K(c, [y.length * f, m]);
         break;
       }
       case "days": {
-        const v = K(i, [
+        const w = K(c, [
           y.length * f,
           m
         ]);
-        x = K(v, [
-          h - G(v, t),
+        x = K(w, [
+          h - G(w, t),
           "hours"
         ]);
         break;
       }
       case "months":
       case "years": {
-        const v = K(
-          K(K(i, [h, "hours"]), [
+        const w = K(
+          K(K(c, [h, "hours"]), [
             y.length * f,
             m
           ]),
           [-h, "hours"]
         );
-        x = K(v, [
-          h - G(v, t),
+        x = K(w, [
+          h - G(w, t),
           "hours"
         ]);
         break;
@@ -1359,16 +1348,16 @@ const ce = (t, s, e = "UTC") => {
     y.push(x);
   }
   return (e ?? ie({
-    locale: c,
-    showTimezone: o,
+    locale: o,
+    showTimezone: n,
     timeZone: t
   }))(y);
-}, I = (t, s, e) => t.find((c) => c.type === e)?.value !== s.find((c) => c.type === e)?.value, ie = ({
-  timeZone: t = Et,
-  locale: s = Wt,
+}, X = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ie = ({
+  timeZone: t = kt,
+  locale: s = Ht,
   showTimezone: e = !0
 }) => {
-  const c = new Intl.DateTimeFormat(s, {
+  const o = new Intl.DateTimeFormat(s, {
     year: "numeric",
     day: "numeric",
     month: "short",
@@ -1380,72 +1369,70 @@ const ce = (t, s, e = "UTC") => {
     timeZoneName: "short",
     timeZone: t
   });
-  return (o) => {
-    const n = o[1] - o[0], l = n < q([1, "days"]), r = n < q([1, "minutes"]), d = n < q([1, "seconds"]);
-    return o.map((u) => ({ value: u, label: c.formatToParts(new Date(u)) })).map((u, a, p) => {
-      const f = p[a - 1], m = a === 0 || I(u.label, f.label, "year"), i = a === 0 || I(u.label, f.label, "day"), h = a === 0 || I(u.label, f.label, "month"), y = a === 0 || I(u.label, f.label, "hour"), x = a === 0 || I(u.label, f.label, "timeZoneName"), v = a === 0 || I(u.label, f.label, "minute"), S = a === 0 || I(u.label, f.label, "second"), g = a === 0 || I(u.label, f.label, "fractionalSecond"), T = [];
-      if (l && (y || v || x || S || g)) {
-        const w = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, k = u.label.find((P) => P.type === "timeZoneName")?.value;
-        let U = "";
+  return (n) => {
+    const i = n[1] - n[0], a = i < q([1, "days"]), r = i < q([1, "minutes"]), d = i < q([1, "seconds"]);
+    return n.map((u) => ({ value: u, label: o.formatToParts(new Date(u)) })).map((u, l, p) => {
+      const f = p[l - 1], m = l === 0 || X(u.label, f.label, "year"), c = l === 0 || X(u.label, f.label, "day"), h = l === 0 || X(u.label, f.label, "month"), y = l === 0 || X(u.label, f.label, "hour"), x = l === 0 || X(u.label, f.label, "timeZoneName"), w = l === 0 || X(u.label, f.label, "minute"), g = l === 0 || X(u.label, f.label, "second"), v = l === 0 || X(u.label, f.label, "fractionalSecond"), T = [];
+      if (a && (y || w || x || g || v)) {
+        const b = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, k = u.label.find((P) => P.type === "timeZoneName")?.value;
+        let A = "";
         if (r) {
           const P = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
             (F) => F.type === "fractionalSecond"
           )?.value;
-          U = `:${P}` + (d ? `.${B}` : "");
+          A = `:${P}` + (d ? `.${B}` : "");
         }
         T.push(
-          `${w}:${C}${U}` + (e && x ? ` ${k}` : "")
+          `${b}:${C}${A}` + (e && x ? ` ${k}` : "")
         );
       }
-      return (i || h) && T.push(
+      return (c || h) && T.push(
         [
-          u.label.find((w) => w.type === "month")?.value,
-          i && u.label.find((w) => w.type === "day")?.value
+          u.label.find((b) => b.type === "month")?.value,
+          c && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), m && T.push(u.label.find((w) => w.type === "year")?.value), {
+      ), m && T.push(u.label.find((b) => b.type === "year")?.value), {
         value: u.value,
-        label: T.filter((w) => w).join(`
+        label: T.filter((b) => b).join(`
 `)
       };
     });
   };
 };
 export {
-  Se as AreaPlot,
-  Me as AxisOverlay,
-  xe as BarPlot,
-  me as CanPlot,
-  Ce as ChartAreaInteractions,
-  ke as Crosshair,
-  pe as LinePlot,
-  ye as ScatterPlot,
-  Ee as SelectBox,
-  ge as SparklinePlot,
-  Te as TooltipsX,
-  we as XTicks,
-  be as YTicks,
+  ye as AreaPlot,
+  ke as AxisOverlay,
+  pe as BarPlot,
+  he as CanPlot,
+  be as ChartAreaInteractions,
+  Ce as Crosshair,
+  fe as LinePlot,
+  me as ScatterPlot,
+  Te as SelectBox,
+  xe as SparklinePlot,
+  Se as TooltipsX,
+  ve as XTicks,
+  we as YTicks,
   R as applyStyles,
   j as clamp,
-  fe as clampUnfit,
+  de as clampUnfit,
   O as clampXPosToChartArea,
   $ as clampYPosToChartArea,
-  qt as defaultNumericalTicksFormatter,
-  de as findClosestIndex,
-  _ as getScale,
-  et as isXScale,
-  he as isYScale,
-  Pe as makeLinearTicks,
+  Wt as defaultNumericalTicksFormatter,
+  ue as findClosestIndex,
+  I as getScale,
+  Ee as makeLinearTicks,
   ie as makeTimeTickFormat,
-  Ae as makeTimeTicks,
-  X as posToVal,
-  Dt as pxToValDistance,
-  ue as sum,
+  Me as makeTimeTicks,
+  D as posToVal,
+  Lt as pxToValDistance,
+  le as sum,
   Y as useDrawEffect,
-  ft as useFrameState,
-  pt as useInteractionsEvent,
-  ve as useXPositioned,
-  at as valFits,
+  ht as useFrameState,
+  mt as useInteractionsEvent,
+  ge as useXPositioned,
+  rt as valFits,
   H as valToPos,
-  dt as valToPxDistance
+  ut as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map