@canplot/react 0.1.19 → 0.1.21

package/dist/canplot.mjs

@@ -1,56 +1,56 @@
-import { jsxs as dt, jsx as A, Fragment as Dt } from "react/jsx-runtime";
-import Q, { createContext as Ct, useContext as tt, useRef as I, useLayoutEffect as N, useEffect as Tt, version as _t, forwardRef as Lt, useMemo as et, useState as V, useId as Xt } from "react";
-import { createStore as Pt, useStore as Et } from "zustand";
-const j = (t, n, e) => Math.min(Math.max(t, n), e), fe = (t) => t.reduce((n, e) => n + (e ?? 0), 0), me = (t, n) => {
-  let e = 0;
-  for (let s = 0; s < t.length; s++)
-    Math.abs(t[s] - n) < Math.abs(t[e] - n) && (e = s);
-  return e;
-}, Kt = (t, n, e, s) => {
-  const { min: o, max: i, origin: r } = _(t, e), u = s === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (r === "x" ? u.width : u.height) / (i - o);
-  return n / d;
-}, _ = (t, n) => {
-  const e = t.scales.find((s) => s.id === n);
-  if (!e)
-    throw new Error(`Scale ${n} not found`);
-  return e;
-}, U = (t, n) => {
-  const e = window.devicePixelRatio || 1;
-  t.lineCap = n?.lineCap ?? "butt", t.lineDashOffset = e * (n?.lineDashOffset ?? 0), t.lineJoin = n?.lineJoin ?? "miter", t.lineWidth = e * (n?.lineWidth ?? 1), t.miterLimit = e * (n?.miterLimit ?? 10), t.strokeStyle = n?.strokeStyle ?? "black", t.fillStyle = n?.fillStyle ?? t.strokeStyle, t.font = n?.font ?? `${10 * e}px sans-serif`, t.textAlign = n?.textAlign ?? "start", t.direction = n?.direction ?? "inherit", t.textBaseline = n?.textBaseline ?? "alphabetic", t.fontKerning = n?.fontKerning ?? "auto";
-}, ht = (t, n, e, s) => {
-  const o = s === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: i, max: r, origin: u } = _(t, e), d = (u === "x" ? o.width : o.height) / (r - i);
-  return n * d;
-}, H = (t, n, e, s) => {
-  const { min: o, origin: i } = _(t, e), r = s === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, u = ht(t, n - o, e, s);
+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) => {
+  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);
+  return e / h;
+}, I = (n, e) => {
+  const t = n.scales.find((s) => s.id === e);
+  if (!t)
+    throw new Error(`Scale ${e} not found`);
+  return t;
+}, D = (n, e) => {
+  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);
+  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);
   return i === "x" ? j(
-    r.x + u,
+    r.x + d,
     r.x - 10 * r.width,
     r.x + 11 * r.width
   ) : j(
-    r.y + r.height - u,
+    r.y + r.height - d,
     r.y - 10 * r.height,
     r.y + 11 * r.height
   );
-}, pe = (t, n, e) => {
-  const { min: s, max: o } = _(t, e);
-  return j(n, s, o);
-}, Y = (t, n, e) => {
-  const s = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return j(n, s.x, s.x + s.width);
-}, O = (t, n, e) => {
-  const s = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return j(n, s.y, s.y + s.height);
-}, lt = (t, n, e) => {
-  const { min: s, max: o } = _(t, e);
-  return n >= s && n <= o;
-}, D = (t, n, e, s) => {
-  const { min: o, max: i, origin: r } = _(t, e), u = s === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = r === "x" ? (n - u.x) / u.width : (u.height - n + u.y) / u.height;
-  return o + d * (i - o);
-}, Ft = (t) => {
-  const { ctx: n, scales: e } = t;
-  for (const s of e) {
+}, pe = (n, e, t) => {
+  const { min: s, max: o } = I(n, t);
+  return j(e, s, o);
+}, Y = (n, e, t) => {
+  const s = t === "canvas" ? n.chartAreaCanvasPX : n.chartAreaCSS;
+  return j(e, s.x, s.x + s.width);
+}, 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) => {
+  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;
+  return o + h * (i - o);
+}, Ft = (n) => {
+  const { ctx: e, scales: t } = n;
+  for (const s of t) {
     if (!s.axis) continue;
-    n.save(), U(n, {
+    e.save(), D(e, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -59,108 +59,132 @@ const j = (t, n, e) => Math.min(Math.max(t, n), e), fe = (t) => t.reduce((n, e)
     const o = s.axis.canvasRect;
     if (s.origin === "x") {
       if (s.axis.position === "bottom")
-        n.beginPath(), n.moveTo(o.x, o.y), n.lineTo(o.x + o.width, o.y), n.stroke();
+        e.beginPath(), e.moveTo(o.x, o.y), e.lineTo(o.x + o.width, o.y), e.stroke();
       else if (s.axis.position === "top") {
         const i = o.y + o.height;
-        n.beginPath(), n.moveTo(o.x, i), n.lineTo(o.x + o.width, i), n.stroke();
+        e.beginPath(), e.moveTo(o.x, i), e.lineTo(o.x + o.width, i), e.stroke();
       }
     } else if (s.axis.position === "left") {
       const i = o.x + o.width;
-      n.beginPath(), n.moveTo(i, o.y), n.lineTo(i, o.y + o.height), n.stroke();
-    } else s.axis.position === "right" && (n.beginPath(), n.moveTo(o.x, o.y), n.lineTo(o.x, o.y + o.height), n.stroke());
-    n.restore();
+      e.beginPath(), e.moveTo(i, o.y), e.lineTo(i, o.y + o.height), e.stroke();
+    } 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();
   }
-}, zt = () => Pt((t, n) => {
-  const e = () => {
-    const s = n()._frame;
+}, ut = {
+  TOP: 300,
+  MIDDLE: 200,
+  BOTTOM: 200,
+  BACKGROUND: 100
+}, zt = () => Et((n, e) => {
+  const t = () => {
+    const s = e()._frame;
     if (!s) throw new Error("No frame set in frame store");
     return s;
   };
   return {
     _frame: null,
-    getFrame: e,
-    getCtx: () => e().ctx,
-    clampXPosToChartArea: (s, o) => Y(e(), s, o ?? "canvas"),
-    clampYPosToChartArea: (s, o) => O(e(), s, o ?? "canvas"),
-    valToPos: (s, o, i) => H(e(), s, o, i ?? "canvas"),
-    valToPxDistance: (s, o, i) => ht(
-      e(),
+    getFrame: t,
+    getCtx: () => t().ctx,
+    clampXPosToChartArea: (s, o) => Y(t(), s, o ?? "canvas"),
+    clampYPosToChartArea: (s, o) => B(t(), s, o ?? "canvas"),
+    valToPos: (s, o, i) => H(t(), s, o, i ?? "canvas"),
+    valToPxDistance: (s, o, i) => ft(
+      t(),
       s,
       o,
       i ?? "canvas"
     ),
-    valFits: (s, o) => lt(e(), s, o),
-    getScale: (s) => _(e(), s)
+    valFits: (s, o) => lt(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]), () => {
+      const i = e()._listeners.findIndex(([, r]) => r === s);
+      i !== -1 && e()._listeners.splice(i, 1);
+    }),
+    _notifyListeners: (s) => {
+      for (const [, o] of e()._listeners)
+        o(s);
+    }
   };
-}), Yt = () => Pt((t) => ({
+}), Yt = () => Et((n) => ({
   notify: () => {
-    t((n) => ({ version: n.version + 1 }));
+    n((e) => ({ version: e.version + 1 }));
   },
   version: 0
-})), ft = Ct(null), Mt = Ct(null), z = (t, n) => {
-  const e = tt(ft), s = tt(Mt);
-  if (!e || !s)
+})), mt = Ct(null), kt = Ct(null), F = (n, e, t) => {
+  const s = tt(mt), o = tt(kt);
+  if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const o = I(t);
-  o.current = t, N(() => (Promise.resolve().then(() => {
-    o.current(e.getState());
-  }), e.subscribe((i) => {
-    i._frame && o.current(i);
-  })), [e]), Tt(() => {
-    s.getState().notify();
-  }, [s, ...n]);
-}, mt = (t) => {
-  const n = tt(ft);
-  if (!n)
+  const i = _(e);
+  i.current = e, z(() => (Promise.resolve().then(() => {
+    i.current(s.getState());
+  }), s.getState()._subscribe(
+    (r) => {
+      r._frame && i.current(r);
+    },
+    typeof n == "number" ? n : ut[n]
+  )), [s, n]), Mt(() => {
+    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 Et(
-    n,
-    t ?? ((e) => e.getFrame())
+  return Pt(
+    e,
+    n ?? ((t) => t.getFrame())
   );
 };
-function Ot(t) {
-  return (n) => {
-    for (const e of t) ut(e, n);
+function Bt(n) {
+  return (e) => {
+    for (const t of n) dt(t, e);
   };
 }
-function Bt(t) {
-  return (n) => {
-    const e = [];
-    for (const s of t) {
-      const o = ut(s, n), i = typeof o == "function";
-      e.push(i ? o : () => ut(s, null));
+function Nt(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));
     }
     return () => {
-      for (const s of e) s();
+      for (const s of t) s();
     };
   };
 }
-function ut(t, n) {
-  if (typeof t == "function")
-    return t(n);
-  t && (t.current = n);
+function dt(n, e) {
+  if (typeof n == "function")
+    return n(e);
+  n && (n.current = e);
 }
-var $t = parseInt(_t.split(".")[0], 10) >= 19 ? Bt : Ot;
-const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) => {
-  const i = I(null), r = I(null), u = Vt(r), d = et(zt, []), c = et(Yt, []);
-  N(() => {
-    d.setState({
-      _frame: jt(t, u, i.current)
+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, []);
+  z(() => {
+    h.setState({
+      _frame: Ht(n, d, i.current)
     });
-  }, [t, u, i, d]), N(() => d.subscribe((m) => {
-    m._frame && Ht(m._frame);
-  }), [d]), N(() => {
-    let m = !1;
-    return c.subscribe(() => {
-      m || (m = !0, window.requestAnimationFrame(() => {
-        m = !1, d.setState((f) => ({
-          _frame: f._frame ? { ...f._frame } : null
+    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;
+    return u.subscribe(() => {
+      c || (c = !0, window.requestAnimationFrame(() => {
+        c = !1, h.setState((a) => ({
+          _frame: a._frame ? { ...a._frame } : null
         }));
+        const f = h.getState();
+        f._notifyListeners(f);
       }));
     });
-  }, [c, d]);
-  const a = window.devicePixelRatio || 1;
-  return /* @__PURE__ */ dt(
+  }, [u, h]);
+  const m = window.devicePixelRatio || 1;
+  return /* @__PURE__ */ ht(
     "div",
     {
       ref: $t([o, r]),
@@ -168,7 +192,7 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
       style: {
         position: "relative",
         overflow: "hidden",
-        ...e
+        ...t
       },
       "data-canplotroot": !0,
       children: [
@@ -176,92 +200,92 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
           "canvas",
           {
             ref: i,
-            width: u.width * a,
-            height: u.height * a,
+            width: d.width * m,
+            height: d.height * m,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${u.width}px`,
-              height: `${u.height}px`
+              width: `${d.width}px`,
+              height: `${d.height}px`
             }
           }
         ),
         /* @__PURE__ */ A(
-          Nt,
+          Vt,
           {
-            frameStore: d,
-            updateRequestStore: c,
-            children: n
+            frameStore: h,
+            updateRequestStore: u,
+            children: e
           }
         )
       ]
     }
   );
-}), Nt = ({ frameStore: t, updateRequestStore: n, children: e }) => Et(t, (o) => !!o._frame) ? /* @__PURE__ */ A(Mt.Provider, { value: n, children: /* @__PURE__ */ A(ft.Provider, { value: t, children: e }) }) : null, Vt = (t) => {
-  const [n, e] = V({
+}), 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) => {
+  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), u = Math.round(i.contentRect.height);
-      e(
-        (d) => d.width !== r || d.height !== u ? { ...d, width: r, height: u } : d
+      const r = Math.round(i.contentRect.width), d = Math.round(i.contentRect.height);
+      t(
+        (h) => h.width !== r || h.height !== d ? { ...h, width: r, height: d } : h
       );
     }
   }));
-  return N(() => {
-    if (!t.current) return;
-    const o = t.current.clientWidth, i = t.current.clientHeight;
-    return e(
+  return z(() => {
+    if (!n.current) return;
+    const o = n.current.clientWidth, i = n.current.clientHeight;
+    return t(
       (r) => r.width !== o || r.height !== i ? { ...r, width: o, height: i } : r
-    ), s.observe(t.current, { box: "border-box" }), () => s.disconnect();
-  }, [s, t]), n;
-}, jt = (t, n, e) => {
-  const s = e?.getContext("2d");
+    ), s.observe(n.current, { box: "border-box" }), () => s.disconnect();
+  }, [s, n]), e;
+}, Ht = (n, e, t) => {
+  const s = t?.getContext("2d");
   if (!s) return null;
   const o = window.devicePixelRatio || 1;
-  if (n.width === 0 || n.height === 0)
+  if (e.width === 0 || e.height === 0)
     return null;
   const i = {
-    x: t.padding.left,
-    y: t.padding.top,
-    width: n.width - t.padding.left - t.padding.right,
-    height: n.height - t.padding.top - t.padding.bottom
+    x: n.padding.left,
+    y: n.padding.top,
+    width: e.width - n.padding.left - n.padding.right,
+    height: e.height - n.padding.top - n.padding.bottom
   };
-  for (const h of t.scales)
-    h.axis && (h.origin === "x" ? (h.axis.position === "bottom" || h.axis.position === "top") && (i.height = Math.max(
+  for (const a of n.scales)
+    a.axis && (a.origin === "x" ? (a.axis.position === "bottom" || a.axis.position === "top") && (i.height = Math.max(
       0,
-      i.height - h.axis.size
-    ), h.axis.position === "top" && (i.y += h.axis.size)) : (h.axis.position === "left" || h.axis.position === "right") && (i.width = Math.max(0, i.width - h.axis.size), h.axis.position === "left" && (i.x += h.axis.size)));
+      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)));
   const r = {
     x: i.x * o,
     y: i.y * o,
     width: i.width * o,
     height: i.height * o
-  }, u = [];
-  let d = t.padding.left * o, c = s.canvas.width - t.padding.right * o, a = s.canvas.height - t.padding.bottom * o, m = t.padding.top * o;
-  for (const h of t.scales) {
-    if (!h.axis) {
-      u.push({ ...h, axis: null });
+  }, 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 });
       continue;
     }
     let l;
-    if (h.origin === "x")
-      switch (h.axis.position) {
+    if (a.origin === "x")
+      switch (a.axis.position) {
         case "bottom":
-          a -= h.axis.size * o, l = {
+          m -= a.axis.size * o, l = {
             x: i.x,
-            y: a / o,
+            y: m / o,
             width: i.width,
-            height: h.axis.size
+            height: a.axis.size
           };
           break;
         case "top":
-          m += h.axis.size * o, l = {
+          c += a.axis.size * o, l = {
             x: i.x,
-            y: m / o - h.axis.size,
+            y: c / o - a.axis.size,
             width: i.width,
-            height: h.axis.size
+            height: a.axis.size
           };
           break;
         case "left":
@@ -269,20 +293,20 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (h.axis.position) {
+      switch (a.axis.position) {
         case "left":
-          d += h.axis.size * o, l = {
-            x: d / o - h.axis.size,
+          h += a.axis.size * o, l = {
+            x: h / o - a.axis.size,
             y: i.y,
-            width: h.axis.size,
+            width: a.axis.size,
             height: i.height
           };
           break;
         case "right":
-          c -= h.axis.size * o, l = {
-            x: c / o,
+          u -= a.axis.size * o, l = {
+            x: u / o,
             y: i.y,
-            width: h.axis.size,
+            width: a.axis.size,
             height: i.height
           };
           break;
@@ -296,10 +320,10 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
       width: l.width * o,
       height: l.height * o
     };
-    u.push({
-      ...h,
+    d.push({
+      ...a,
       axis: {
-        ...h.axis,
+        ...a.axis,
         cssRect: l,
         canvasRect: p
       }
@@ -308,201 +332,215 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
   return {
     ctx: s,
     dpr: o,
-    padding: t.padding,
-    scales: u,
+    padding: n.padding,
+    scales: d,
     chartAreaCSS: i,
     chartAreaCanvasPX: r
   };
-}, Ht = (t) => {
-  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Ft(t);
-}, ye = ({ data: t, xScaleId: n, yScaleId: e, style: s }) => (z(
-  ({ getCtx: o, clampXPosToChartArea: i, clampYPosToChartArea: r, valToPos: u }) => {
-    const d = o();
-    d.save(), d.beginPath(), U(d, s);
-    for (const c of t) {
-      const a = i(u(c.x, n)), m = r(u(c.y, e));
-      d.lineTo(a, m);
+}, ye = ({ layer: n = "MIDDLE", data: e, xScaleId: t, yScaleId: s, style: o }) => (F(
+  n,
+  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: d, 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);
     }
-    d.stroke(), d.restore();
+    u.stroke(), u.restore();
   },
-  [t, n, e, s]
-), null), ve = ({ data: t, xScaleId: n, yScaleId: e, radius: s = 5, style: o }) => (z(({ getCtx: i, valToPos: r, valFits: u }) => {
-  const d = i();
-  d.save(), d.beginPath(), U(d, o);
-  for (const c of t) {
-    if (!u(c.x, n) || !u(c.y, e))
-      continue;
-    const a = r(c.x, n), m = r(c.y, e);
-    d.moveTo(a + s, m), d.arc(a, m, s, 0, Math.PI * 2);
-  }
-  d.stroke(), d.fill(), d.restore();
-}, [t, n, e, s, o]), null), ge = ({
-  data: t,
-  xScaleId: n,
-  yScaleId: e,
+  [e, t, s, o]
+), null), ve = ({ 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))
+        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);
+    }
+    m.fill(c), m.stroke(c), m.restore();
+  },
+  [e, t, s, o, i, r]
+), null), ge = ({
+  data: n,
+  xScaleId: e,
+  yScaleId: t,
   style: s,
   barWidth: o,
   xPositionOffset: i,
-  radius: r
-}) => (z(
+  radius: r,
+  layer: d = "MIDDLE"
+}) => (F(
+  d,
   ({
-    getCtx: u,
-    valToPxDistance: d,
-    valToPos: c,
-    clampXPosToChartArea: a,
-    clampYPosToChartArea: m
+    getCtx: h,
+    valToPxDistance: u,
+    valToPos: m,
+    clampXPosToChartArea: c,
+    clampYPosToChartArea: f
   }) => {
-    if (t.length === 0) return;
-    const f = u();
-    f.save(), U(f, s);
-    const h = d(o, n);
-    f.beginPath();
-    for (const l of t) {
-      const x = c(l.x, n) - h / 2 + i * h, v = m(c(0, e)), g = m(c(l.y, e)), y = v - g, w = a(x), S = a(x + h) - w;
-      r ? f.roundRect(
-        w,
-        g,
+    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,
+        b,
+        w,
         r
-      ) : f.rect(w, g, S, y);
+      ) : a.rect(S, y, b, w);
     }
-    f.closePath(), f.fill(), s?.strokeStyle && f.stroke(), f.restore();
+    a.closePath(), a.fill(), s?.strokeStyle && a.stroke(), a.restore();
   },
-  [t, n, e, s, o, i, r]
-), null), we = ({ data: t, xScaleId: n, yScaleId: e, style: s }) => (z(({ getCtx: o, clampXPosToChartArea: i, clampYPosToChartArea: r, valToPos: u }) => {
-  const d = [];
-  for (const a of t) {
-    const m = i(u(a.x, n)), f = r(u(a.y[0], e)), h = r(u(a.y[1], e));
-    d.push({ x: m, y: f }), d.unshift({ x: m, y: h });
-  }
-  const c = o();
-  if (d.length > 0) {
-    c.save(), c.beginPath(), U(c, s), c.moveTo(d[0].x, d[0].y);
-    for (const a of d)
-      c.lineTo(a.x, a.y);
-    c.closePath(), c.fill(), c.restore();
-  }
-}, [t, n, e, s]), null), be = ({ data: t, stroked: n, xScaleId: e, yScaleId: s, style: o }) => (z(
-  ({ getCtx: i, clampXPosToChartArea: r, clampYPosToChartArea: u, valToPos: d }) => {
-    const c = [], a = i();
-    for (const l of t) {
-      const p = r(d(l.x, e)), x = u(d(l.y, s));
-      c.push({ x: p, y: x });
+  [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 }) => {
+    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 });
     }
-    const m = c.at(0), f = c.at(-1);
-    if (!m || !f)
+    const m = 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();
+    }
+  },
+  [e, t, s, o]
+), null), be = ({ 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 });
+    }
+    const f = m.at(0), a = m.at(-1);
+    if (!f || !a)
       return;
-    const h = u(d(0, s));
-    a.save(), a.beginPath(), U(a, o), a.moveTo(m.x, h);
-    for (const l of c)
-      a.lineTo(l.x, l.y);
-    if (a.lineTo(f.x, h), a.closePath(), a.fill(), n) {
-      a.beginPath(), a.moveTo(m.x, m.y);
-      for (const l of c)
-        a.lineTo(l.x, l.y);
-      a.stroke();
+    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();
     }
-    a.restore();
+    c.restore();
   },
-  [t, n, e, s, o]
-), null), Se = (t, n) => mt(
+  [e, t, s, o, i]
+), null), Se = (n, e) => pt(
   ({
-    clampXPosToChartArea: e,
+    clampXPosToChartArea: t,
     clampYPosToChartArea: s,
     getScale: o,
     valToPos: i,
     valFits: r
   }) => {
-    const u = {};
-    for (const d in t) {
-      const c = t[d];
-      switch (c.exceeding) {
+    const d = {};
+    for (const h in n) {
+      const u = n[h];
+      switch (u.exceeding) {
         case "discard": {
-          if (r(c.value, c.scaleId)) {
-            const a = i(c.value, c.scaleId, n);
-            u[d] = a;
+          if (r(u.value, u.scaleId)) {
+            const m = i(u.value, u.scaleId, e);
+            d[h] = m;
           }
           break;
         }
         case "clamp": {
-          const a = i(c.value, c.scaleId, n);
-          u[d] = o(c.scaleId)?.origin === "x" ? e(a, n) : s(a, n);
+          const m = i(u.value, u.scaleId, e);
+          d[h] = o(u.scaleId)?.origin === "x" ? t(m, e) : s(m, e);
           break;
         }
       }
     }
-    return u;
+    return d;
   }
-), Ce = ({ scaleId: t, tickStyle: n, labelStyle: e, labelGap: s, tickSize: o, ticks: i }) => (z(
-  ({ getCtx: r, valToPos: u, getScale: d, getFrame: c }) => {
-    const a = r(), m = d(t);
-    if (!m || !m.axis || m.origin !== "x") return;
-    const f = m.axis, h = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, l = window.devicePixelRatio || 1, p = h, x = (o ?? 6) * l, v = f.position === "top" ? h - x : h + x, g = (s ?? 12) * l;
-    a.save(), a.fontKerning = "auto", U(a, {
-      ...n
-    }), a.beginPath();
-    const y = Array.isArray(i) ? i : i({ ...m, axis: f }, c());
-    for (const { value: w } of y) {
-      const S = u(w, t, "canvas");
-      a.moveTo(S, p), a.lineTo(S, v);
+), Te = ({ 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, {
+      ...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.stroke(), a.restore(), a.save(), U(a, {
-      textBaseline: f.position === "top" ? "bottom" : "top",
+    c.stroke(), c.restore(), c.save(), D(c, {
+      textBaseline: a.position === "top" ? "bottom" : "top",
       textAlign: "center",
-      ...n,
-      ...e
+      ...t,
+      ...s
     });
-    for (const { value: w, label: S } of y) {
-      const C = u(w, t, "canvas"), b = S.split(`
+    for (const { value: S, label: b } of w) {
+      const T = h(S, e, "canvas"), C = b.split(`
 `);
-      for (let P = 0; P < b.length; P++)
-        a.fillText(b[P], C, v + l * 2 + P * g);
+      for (let M = 0; M < C.length; M++)
+        c.fillText(C[M], T, g + p * 2 + M * y);
     }
-    a.restore();
+    c.restore();
   },
-  [i, t, n, e]
-), null), Te = ({ scaleId: t, tickStyle: n, labelStyle: e, labelGap: s, tickSize: o, ticks: i }) => (z(
-  ({ getCtx: r, valToPos: u, getScale: d, getFrame: c }) => {
-    const a = r(), m = d(t);
-    if (!m || !m.axis || m.origin !== "y") return;
-    const f = m.axis, h = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, l = h, p = o ?? 6, x = f.position === "left" ? h - p : h + p, v = s ?? 12, g = Array.isArray(i) ? i : i({ ...m, axis: f }, c());
-    a.save(), a.fontKerning = "auto", U(a, { ...n }), a.beginPath();
-    for (const { value: y } of g) {
-      const w = u(y, t, "canvas");
-      a.moveTo(l, w), a.lineTo(x, w);
+  [r, e, t, s]
+), null), 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 !== "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);
     }
-    a.stroke(), a.restore(), a.save(), U(a, {
+    c.stroke(), c.restore(), c.save(), D(c, {
       textBaseline: "middle",
-      textAlign: f.position === "left" ? "right" : "left",
-      ...n,
-      ...e
+      textAlign: a.position === "left" ? "right" : "left",
+      ...t,
+      ...s
     });
-    for (const { value: y, label: w } of g) {
-      const S = u(y, t, "canvas"), C = w.split(`
+    for (const { value: w, label: S } of y) {
+      const b = h(w, e, "canvas"), T = S.split(`
 `);
-      for (let b = 0; b < C.length; b++)
-        a.fillText(` ${C[b]} `, x, S + b * v);
+      for (let C = 0; C < T.length; C++)
+        c.fillText(` ${T[C]} `, x, b + C * g);
     }
-    a.restore();
+    c.restore();
   },
-  [i, t, n, e]
+  [r, e, t, s]
 ), null), k = () => {
-  const t = [];
+  const n = [];
   return {
-    addEventListener: (n, e) => (t.push({
-      syncKey: n,
-      callback: e
+    addEventListener: (e, t) => (n.push({
+      syncKey: e,
+      callback: t
     }), () => {
-      const s = t.findIndex((o) => o.callback === e);
-      s !== -1 && t.splice(s, 1);
+      const s = n.findIndex((o) => o.callback === t);
+      s !== -1 && n.splice(s, 1);
     }),
-    dispatchEvent: (n, e) => {
-      for (const s of t)
-        s.syncKey === n && s.callback(n, e);
+    dispatchEvent: (e, t) => {
+      for (const s of n)
+        s.syncKey === e && s.callback(e, t);
     }
   };
-}, T = {
+}, E = {
   dblclick: k(),
   click: k(),
   contextmenu: k(),
@@ -513,63 +551,63 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
   documentmouseup: k(),
   pressandwheel: k(),
   sync_move: k()
-}, R = (t, n, e) => {
-  const s = Q.useRef(e);
-  s.current = e, Q.useEffect(() => T[t].addEventListener(
-    n,
+}, R = (n, e, t) => {
+  const s = Q.useRef(t);
+  s.current = t, Q.useEffect(() => E[n].addEventListener(
+    e,
     (i, r) => {
       s.current(r, i);
     }
-  ), [n, t, s]);
-}, pt = Q.createContext(""), xt = (t, n) => {
-  const e = Q.useContext(pt);
-  return R(t, e, n);
-}, Wt = (t, n, e, s, o) => {
-  if (!n) return;
-  const i = s ?? e.scales.find((m) => m.origin === "x")?.id, r = o ?? e.scales.find((m) => m.origin === "y")?.id;
+  ), [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) => {
+  if (!e) return;
+  const i = s ?? t.scales.find((c) => c.origin === "x")?.id, r = o ?? t.scales.find((c) => c.origin === "y")?.id;
   if (!i || !r)
     return;
-  const u = t.clientX - n.left, d = {
+  const d = n.clientX - e.left, h = {
     scaleId: i,
-    value: D(e, u, i, "css")
-  }, c = t.clientY - n.top, a = {
+    value: L(t, d, i, "css")
+  }, u = n.clientY - e.top, m = {
     scaleId: r,
-    value: D(e, c, r, "css")
+    value: L(t, u, r, "css")
   };
-  return { pointerSyncPosition: { x: d, y: a }, cssX: u, cssY: c };
-}, F = (t, n) => {
-  const { x: e, y: s } = t, o = e && n.scales.some((r) => r.id === e.scaleId) ? H(n, e.value, e.scaleId, "css") : null, i = s && n.scales.some((r) => r.id === s.scaleId) ? H(n, s.value, s.scaleId, "css") : null;
+  return { pointerSyncPosition: { x: h, y: m }, cssX: d, 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 {
     cssX: o,
     cssY: i,
     scaled: Object.fromEntries(
-      n.scales.flatMap((r) => {
-        const u = r.origin === "y" ? i : o;
-        return u === null ? [] : [[r.id, D(n, u, r.id, "css")]];
+      e.scales.flatMap((r) => {
+        const d = r.origin === "y" ? i : o;
+        return d === null ? [] : [[r.id, L(e, d, r.id, "css")]];
       })
     )
   };
-}, bt = (t, n, e) => {
+}, St = (n, e, t) => {
   const s = H(
-    e,
-    n.from,
-    n.scaleId,
+    t,
+    e.from,
+    e.scaleId,
     "css"
   ), o = H(
-    e,
-    n.to,
-    n.scaleId,
+    t,
+    e.to,
+    e.scaleId,
     "css"
-  ), i = e.scales.flatMap(
+  ), i = t.scales.flatMap(
     (r) => {
-      if (r.origin !== t)
+      if (r.origin !== n)
         return [];
-      const u = D(e, s, r.id, "css"), d = D(e, o, r.id, "css");
+      const d = L(t, s, r.id, "css"), h = L(t, o, r.id, "css");
       return [
         {
           scaleId: r.id,
-          from: u,
-          to: d
+          from: d,
+          to: h
         }
       ];
     }
@@ -579,26 +617,26 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
     toCSS: o,
     scaled: i
   };
-}, Pe = ({
-  id: t,
-  onClick: n,
-  onDblClick: e,
+}, Me = ({
+  id: n,
+  onClick: e,
+  onDblClick: t,
   onMouseMove: s,
   onMouseDown: o,
   onMouseUp: i,
   onDocumentMouseUp: r,
-  onSpanSelect: u,
-  onContextMenu: d,
-  className: c,
-  style: a,
-  sync: m,
+  onSpanSelect: d,
+  onContextMenu: h,
+  className: u,
+  style: m,
+  sync: c,
   children: f
 }) => {
-  const h = Xt(), l = t || h;
+  const a = Kt(), l = n || a;
   return R("dblclick", l, (p) => {
-    e?.(p);
+    t?.(p);
   }), R("click", l, (p) => {
-    n?.(p);
+    e?.(p);
   }), R("move", l, (p) => {
     s?.(p);
   }), R("mousedown", l, (p) => {
@@ -608,24 +646,24 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
   }), R("documentmouseup", l, (p) => {
     r?.(p);
   }), R("spanselect", l, (p) => {
-    u?.(p);
-  }), R("contextmenu", l, (p) => {
     d?.(p);
-  }), /* @__PURE__ */ dt(pt.Provider, { value: l, children: [
+  }), R("contextmenu", l, (p) => {
+    h?.(p);
+  }), /* @__PURE__ */ ht(xt.Provider, { value: l, children: [
     /* @__PURE__ */ A(
       qt,
       {
-        className: c,
-        style: a,
-        sync: m
+        className: u,
+        style: m,
+        sync: c
       }
     ),
     f
   ] });
-}, qt = ({ className: t, style: n, sync: e }) => {
-  const s = I(null), o = mt(), i = I(o);
+}, qt = ({ className: n, style: e, sync: t }) => {
+  const s = _(null), o = pt(), i = _(o);
   i.current = o;
-  const r = tt(pt), u = e?.key || r, d = I(null), c = I(null), a = I(null), m = () => {
+  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)
@@ -635,16 +673,16 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
       return l.getBoundingClientRect();
     }
   }, f = (l, p) => {
-    const x = Wt(
+    const v = Wt(
       l,
-      m(),
+      c(),
       i.current,
-      e?.xViaScaleId,
-      e?.yViaScaleId
+      t?.xViaScaleId,
+      t?.yViaScaleId
     );
-    x && p(
-      x.pointerSyncPosition,
-      { cssX: x.cssX, cssY: x.cssY },
+    v && p(
+      v.pointerSyncPosition,
+      { cssX: v.cssX, cssY: v.cssY },
       {
         ctrlKey: l.ctrlKey,
         altKey: l.altKey,
@@ -652,14 +690,14 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
         metaKey: l.metaKey
       }
     );
-  }, h = I(f);
-  return h.current = f, Tt(() => {
+  }, a = _(f);
+  return a.current = f, Mt(() => {
     const l = (y) => {
-      const w = c.current;
-      w && T.spanselect.dispatchEvent(r, {
+      const w = u.current;
+      w && E.spanselect.dispatchEvent(r, {
         ...w,
         completed: !0
-      }), T.documentmouseup.dispatchEvent(r, {
+      }), E.documentmouseup.dispatchEvent(r, {
         frame: i.current,
         keys: {
           ctrlKey: y.ctrlKey,
@@ -674,64 +712,64 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
         altKey: y.altKey,
         shiftKey: y.shiftKey,
         metaKey: y.metaKey
-      }, S = a.current;
+      }, S = m.current;
       if (S && Object.entries(w).some(
-        ([b, P]) => S.keys[b] !== P
+        ([T, C]) => S.keys[T] !== C
       )) {
-        const b = { ...S, keys: w };
-        a.current = b, T.sync_move.dispatchEvent(u, b);
+        const T = { ...S, keys: w };
+        m.current = T, E.sync_move.dispatchEvent(d, T);
       }
-      const C = c.current;
-      if (C && Object.entries(w).some(
-        ([b, P]) => C.keys[b] !== P
+      const b = u.current;
+      if (b && Object.entries(w).some(
+        ([T, C]) => b.keys[T] !== C
       )) {
         y.stopPropagation(), y.preventDefault();
-        const b = { ...C, keys: w };
-        c.current = b, T.spanselect.dispatchEvent(r, b);
+        const T = { ...b, keys: w };
+        u.current = T, E.spanselect.dispatchEvent(r, T);
       }
-    }, x = (y) => {
-      h.current(
+    }, v = (y) => {
+      a.current(
         y,
-        (w, { cssX: S, cssY: C }, b) => {
-          const P = d.current;
-          if (!P || !w.x || !w.y) return;
-          const E = i.current, M = P.xRangeCss.start, B = S, K = P.yRangeCss.start, ot = C, it = _(E, w.x.scaleId), rt = _(E, w.y.scaleId);
-          d.current = {
-            xRangeCss: { start: M, end: B },
+        (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 }
           };
           let $ = "below_threshold";
-          const ct = Math.abs(K - ot), at = Math.abs(M - B);
+          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 vt = {
+          const gt = {
             scaleId: it.id,
-            from: D(
-              E,
-              Y(i.current, M, "css"),
+            from: L(
+              M,
+              Y(i.current, P, "css"),
               it.id,
               "css"
             ),
-            to: D(
-              E,
-              Y(i.current, B, "css"),
+            to: L(
+              M,
+              Y(i.current, N, "css"),
               it.id,
               "css"
             )
-          }, gt = {
+          }, wt = {
             scaleId: rt.id,
-            from: D(
-              E,
-              O(i.current, K, "css"),
+            from: L(
+              M,
+              B(i.current, K, "css"),
               rt.id,
               "css"
             ),
-            to: D(
-              E,
-              O(i.current, ot, "css"),
+            to: L(
+              M,
+              B(i.current, ot, "css"),
               rt.id,
               "css"
             )
-          }, W = vt && bt("x", vt, i.current), q = gt && bt("y", gt, i.current), Ut = W?.scaled, It = q?.scaled, wt = {
+          }, W = gt && St("x", gt, i.current), q = wt && St("y", wt, i.current), _t = W?.scaled, Lt = q?.scaled, bt = {
             mode: $,
             frame: i.current,
             completed: !1,
@@ -740,57 +778,57 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
                 from: W.fromCSS,
                 to: W.toCSS
               },
-              scaled: Ut ?? []
+              scaled: _t ?? []
             },
             y: {
               css: q && {
                 from: q.fromCSS,
                 to: q.toCSS
               },
-              scaled: It ?? []
+              scaled: Lt ?? []
             },
-            keys: b
+            keys: T
           };
-          c.current = wt, T.spanselect.dispatchEvent(
+          u.current = bt, E.spanselect.dispatchEvent(
             r,
-            wt
+            bt
           );
         }
       );
-    }, v = (y) => {
-      h.current(y, (w, S, C) => {
-        const b = F(
+    }, x = (y) => {
+      a.current(y, (w, S, b) => {
+        const T = O(
           w,
           i.current
         );
-        if (!b) return;
-        if (Object.values(C).some((E) => E)) {
+        if (!T) return;
+        if (Object.values(b).some((M) => M)) {
           y.preventDefault();
-          const E = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
-          T.pressandwheel.dispatchEvent(r, {
-            pointer: b,
+          const M = Math.abs(y.deltaY) > Math.abs(y.deltaX) ? y.deltaY : y.deltaX;
+          E.pressandwheel.dispatchEvent(r, {
+            pointer: T,
             frame: i.current,
-            keys: C,
+            keys: b,
             deltaX: y.deltaX,
             deltaY: y.deltaY,
-            deltaAbs: E
+            deltaAbs: M
           });
         }
       });
     };
-    document.addEventListener("mouseup", l), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", x);
+    document.addEventListener("mouseup", l), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", v);
     const g = s.current;
-    return g?.addEventListener("wheel", v, {
+    return g?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", l), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", x), g?.removeEventListener("wheel", v);
+      document.removeEventListener("mouseup", l), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", v), g?.removeEventListener("wheel", x);
     };
-  }, [i, r, u, h]), R("sync_move", u, (l) => {
-    const p = l.positions ? F(
+  }, [i, r, d, a]), R("sync_move", d, (l) => {
+    const p = l.positions ? O(
       l.positions,
       i.current
     ) : null;
-    a.current = l, T.move.dispatchEvent(r, {
+    m.current = l, E.move.dispatchEvent(r, {
       frame: i.current,
       pointer: p ?? null,
       keys: l.keys
@@ -800,7 +838,7 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
     {
       ref: s,
       id: "interactions",
-      className: t,
+      className: n,
       style: {
         position: "absolute",
         left: o.chartAreaCSS.x,
@@ -808,78 +846,78 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
         width: o.chartAreaCSS.width,
         height: o.chartAreaCSS.height,
         zIndex: 25,
-        ...n
+        ...e
       },
       onDragStart: (l) => {
         l.preventDefault();
       },
       onClick: (l) => {
-        f(l, (p, x, v) => {
-          const g = F(
+        f(l, (p, v, x) => {
+          const g = O(
             p,
             i.current
           );
-          g && T.click.dispatchEvent(r, {
+          g && E.click.dispatchEvent(r, {
             pointer: g,
             frame: i.current,
-            keys: v
+            keys: x
           });
         });
       },
       onMouseLeave: (l) => {
-        f(l, (p, x, v) => {
-          T.sync_move.dispatchEvent(u, {
+        f(l, (p, v, x) => {
+          E.sync_move.dispatchEvent(d, {
             positions: null,
-            keys: v
+            keys: x
           });
         });
       },
       onMouseMove: (l) => {
-        f(l, (p, x, v) => {
-          T.sync_move.dispatchEvent(u, {
+        f(l, (p, v, x) => {
+          E.sync_move.dispatchEvent(d, {
             positions: p,
-            keys: v
+            keys: x
           });
         });
       },
       onMouseDown: (l) => {
-        f(l, (p, { cssX: x, cssY: v }, g) => {
-          const y = F(
+        f(l, (p, { cssX: v, cssY: x }, g) => {
+          const y = O(
             p,
             i.current
           );
-          y && (T.mousedown.dispatchEvent(r, {
+          y && (E.mousedown.dispatchEvent(r, {
             pointer: y,
             frame: i.current,
             keys: g
-          }), d.current = {
-            xRangeCss: { start: x, end: x },
-            yRangeCss: { start: v, end: v }
+          }), h.current = {
+            xRangeCss: { start: v, end: v },
+            yRangeCss: { start: x, end: x }
           });
         });
       },
       onMouseUp: (l) => {
-        f(l, (p, x, v) => {
-          const g = F(
+        f(l, (p, v, x) => {
+          const g = O(
             p,
             i.current
           );
           if (!g) return;
-          T.mouseup.dispatchEvent(r, {
+          E.mouseup.dispatchEvent(r, {
             frame: i.current,
             pointer: g,
-            keys: v
+            keys: x
           });
-          const y = c.current;
-          c.current = null;
-          const w = d.current;
-          if (d.current = null, w && y) {
+          const y = u.current;
+          u.current = null;
+          const w = h.current;
+          if (h.current = null, w && y) {
             const S = {
               ...y,
-              keys: v,
+              keys: x,
               completed: !0
             };
-            c.current = null, T.spanselect.dispatchEvent(
+            u.current = null, E.spanselect.dispatchEvent(
               r,
               S
             );
@@ -887,97 +925,97 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
         });
       },
       onContextMenu: (l) => {
-        l.preventDefault(), f(l, (p, x, v) => {
-          const g = F(
+        l.preventDefault(), f(l, (p, v, x) => {
+          const g = O(
             p,
             i.current
           );
-          g && T.contextmenu.dispatchEvent(r, {
+          g && E.contextmenu.dispatchEvent(r, {
             frame: i.current,
             pointer: g,
-            keys: v
+            keys: x
           });
         });
       },
       onDoubleClick: (l) => {
-        f(l, (p, x, v) => {
-          const g = F(
+        f(l, (p, v, x) => {
+          const g = O(
             p,
             i.current
           );
-          g && T.dblclick.dispatchEvent(r, {
+          g && E.dblclick.dispatchEvent(r, {
             frame: i.current,
             pointer: g,
-            keys: v
+            keys: x
           });
         });
       }
     }
   );
-}, Ee = ({ data: t, renderTooltip: n, xScaleId: e }) => {
+}, Ee = ({ data: n, renderTooltip: e, xScaleId: t }) => {
   const [s, o] = V(null);
-  xt("move", (r) => {
+  yt("move", (r) => {
     o(r);
   });
   const i = et(() => {
     if (!s)
       return null;
-    const { frame: r, pointer: u } = s, d = u?.scaled[e];
-    if (d === void 0)
+    const { frame: r, pointer: d } = s, h = d?.scaled[t];
+    if (h === void 0)
       return null;
-    const c = [];
-    let a = d;
-    for (const m of t) {
-      let f = null, h = 1 / 0;
-      for (const [p, x] of m.points.entries()) {
-        if (!lt(r, x.x, e) || !lt(r, x.y, m.yScaleId))
+    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))
           continue;
-        const v = Math.abs(x.x - d);
-        v < h && (h = v, f = p);
+        const x = Math.abs(v.x - h);
+        x < a && (a = x, f = p);
       }
-      const l = m.points[f ?? -1];
-      if (!l || ht(r, h, e, "css") > 30) {
-        c.push({ seriesId: m.seriesId, y: null });
+      const l = c.points[f ?? -1];
+      if (!l || ft(r, a, t, "css") > 30) {
+        u.push({ seriesId: c.seriesId, y: null });
         continue;
       }
-      a = l.x, c.push({
-        seriesId: m.seriesId,
+      m = l.x, u.push({
+        seriesId: c.seriesId,
         y: l.y
       });
     }
     return {
       frame: r,
-      x: a,
-      points: c
+      x: m,
+      points: u
     };
-  }, [t, s, e]);
-  return n(i);
-}, Me = ({ makeXStyle: t, makeXClassName: n, makeYStyle: e, makeYClassName: s }) => {
+  }, [n, s, t]);
+  return e(i);
+}, Pe = ({ makeXStyle: n, makeXClassName: e, makeYStyle: t, makeYClassName: s }) => {
   const [o, i] = V(null);
-  if (xt("move", (f) => {
+  if (yt("move", (f) => {
     i(f);
   }), !o)
     return null;
-  const { frame: r, pointer: u } = o, d = u?.cssX ?? null, c = u?.cssY ?? null, a = d ? Y(r, d, "css") : 0, m = c ? O(r, c, "css") : 0;
-  return /* @__PURE__ */ dt(Dt, { children: [
+  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(
       "div",
       {
-        "data-show": !!u,
-        className: n?.(o),
+        "data-show": !!d,
+        className: e?.(o),
         style: {
           position: "absolute",
           left: 0,
-          visibility: d === null ? "hidden" : "visible",
+          visibility: h === null ? "hidden" : "visible",
           top: r.chartAreaCSS.y,
           height: r.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: u ? 1 : 0,
-          transform: `translateX(${a}px)`,
-          ...t?.(o)
+          opacity: d ? 1 : 0,
+          transform: `translateX(${m}px)`,
+          ...n?.(o)
         }
       }
     ),
@@ -985,54 +1023,54 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
       "div",
       {
         className: s?.(o),
-        "data-show": !!u,
+        "data-show": !!d,
         style: {
           position: "absolute",
-          visibility: c === null ? "hidden" : "visible",
+          visibility: u === null ? "hidden" : "visible",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
           left: r.chartAreaCSS.x,
           width: r.chartAreaCSS.width,
           pointerEvents: "none",
-          opacity: u ? 1 : 0,
-          transform: `translateY(${m}px)`,
-          ...e?.(o)
+          opacity: d ? 1 : 0,
+          transform: `translateY(${c}px)`,
+          ...t?.(o)
         }
       }
     )
   ] });
-}, ke = ({ makeClassName: t, makeStyle: n }) => {
-  const [e, s] = V(null);
-  xt("spanselect", (i) => {
+}, ke = ({ makeClassName: n, makeStyle: e }) => {
+  const [t, s] = V(null);
+  yt("spanselect", (i) => {
     s(
       i.mode === "below_threshold" || i.completed ? null : i
     );
   });
   const o = et(() => {
-    if (!e || e.mode === "below_threshold")
+    if (!t || t.mode === "below_threshold")
       return null;
-    const i = e.mode === "y" ? -1 / 0 : e.x.css?.from ?? -1 / 0, r = e.mode === "y" ? 1 / 0 : e.x.css?.to ?? 1 / 0, u = e.mode === "x" ? -1 / 0 : e.y.css?.from ?? -1 / 0, d = e.mode === "x" ? 1 / 0 : e.y.css?.to ?? 1 / 0, c = Y(e.frame, i, "css"), a = Y(e.frame, r, "css"), m = O(e.frame, u, "css"), f = O(e.frame, d, "css"), h = Math.min(c, a), l = Math.min(m, f), p = Math.abs(a - c), x = Math.abs(f - m);
-    return { leftPx: h, topPx: l, widthPx: p, heightPx: x };
-  }, [e]);
+    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 };
+  }, [t]);
   return /* @__PURE__ */ A(
     "div",
     {
-      className: e ? t?.(e) : void 0,
+      className: t ? n?.(t) : void 0,
       style: {
         position: "absolute",
-        visibility: e ? "visible" : "hidden",
+        visibility: t ? "visible" : "hidden",
         left: `${o?.leftPx ?? 0}px`,
         top: `${o?.topPx ?? 0}px`,
         width: `${o?.widthPx ?? 0}px`,
         height: `${o?.heightPx ?? 0}px`,
         pointerEvents: "none",
-        ...e ? n?.(e) : void 0
+        ...t ? e?.(t) : void 0
       }
     }
   );
-}, Re = ({ style: t, children: n, scaleId: e, ...s }) => {
-  const o = mt((i) => i.getScale(e)?.axis);
+}, Re = ({ style: n, children: e, scaleId: t, ...s }) => {
+  const o = pt((i) => i.getScale(t)?.axis);
   return o ? /* @__PURE__ */ A(
     "div",
     {
@@ -1043,38 +1081,38 @@ const xe = Lt(({ configuration: t, children: n, style: e, className: s }, o) =>
         top: o.cssRect.y,
         height: o.cssRect.height,
         width: o.cssRect.width,
-        ...t
+        ...n
       },
       ...s,
-      children: n
+      children: e
     }
   ) : null;
-}, kt = 60, Gt = 30, Rt = "UTC", Zt = "en-GB", Ae = ({
-  space: t,
-  formatter: n,
-  acceptableIncrements: e
+}, Rt = 60, Gt = 30, At = "UTC", Zt = "en-GB", Ae = ({
+  space: n,
+  formatter: e,
+  acceptableIncrements: t
 } = {}) => (s, o) => {
-  const { min: i, max: r } = s, u = [], d = window.devicePixelRatio || 1, c = (t ?? (s.origin === "x" ? kt : Gt)) * d, a = Kt(
+  const { min: i, max: r } = s, d = [], h = window.devicePixelRatio || 1, u = (n ?? (s.origin === "x" ? Rt : Gt)) * h, m = Ot(
     o,
-    c,
+    u,
     s.id,
     "canvas"
-  ), m = e ?? G, f = m.find((l) => l > a) ?? m.at(-1) ?? 1;
-  let h = i;
-  if (Math.abs(h % f) > Number.EPSILON) {
-    const l = (f - h % f) % f;
-    h += l;
+  ), 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;
   }
-  for (; h <= r && u.length < 1e3; )
-    u.push(h), h += f;
-  return (n ?? Jt)(u);
-}, Jt = (t) => {
-  const n = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
-  return t.map((e) => ({ value: e, label: e.toFixed(n) }));
+  for (; a <= r && d.length < 1e3; )
+    d.push(a), a += f;
+  return (e ?? Jt)(d);
+}, Jt = (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 t = -12; t <= 12; t++)
-  G.push(1 * 10 ** t), G.push(2 * 10 ** t), G.push(5 * 10 ** t);
-const Qt = 1, At = 1e3 * Qt, yt = 60 * At, nt = 60 * yt, st = 24 * nt, te = 30 * st, ee = 365 * st, ne = [
+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 = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1126,70 +1164,70 @@ const Qt = 1, At = 1e3 * Qt, yt = 60 * At, nt = 60 * yt, st = 24 * nt, te = 30 *
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], Z = (t) => {
-  const [n, e] = t;
-  switch (e) {
+], Z = (n) => {
+  const [e, t] = n;
+  switch (t) {
     case "milliseconds":
-      return n;
+      return e;
     case "seconds":
-      return n * At;
+      return e * Dt;
     case "minutes":
-      return n * yt;
+      return e * vt;
     case "hours":
-      return n * nt;
+      return e * nt;
     case "days":
-      return n * st;
+      return e * st;
     case "months":
-      return n * te;
+      return e * te;
     case "years":
-      return n * ee;
+      return e * ee;
   }
-}, se = (t, n) => {
-  const e = new Date(t);
-  return e.setUTCMilliseconds(e.getUTCMilliseconds() + n), e.getTime();
-}, oe = (t, n) => {
-  const e = new Date(t);
-  return e.setUTCSeconds(e.getUTCSeconds() + n), e.getTime();
-}, ie = (t, n) => {
-  const e = new Date(t);
-  return e.setUTCMinutes(e.getUTCMinutes() + n), e.getTime();
-}, re = (t, n) => {
-  const e = new Date(t);
-  return e.setUTCHours(e.getUTCHours() + n), e.getTime();
-}, ce = (t, n) => {
-  const e = new Date(t);
-  return e.setUTCDate(e.getUTCDate() + n), e.getTime();
-}, St = (t, n) => {
-  const e = new Date(t);
-  return e.setUTCMonth(e.getUTCMonth() + n), e.getTime();
-}, X = (t, n) => {
-  const [e, s] = n;
+}, se = (n, e) => {
+  const t = new Date(n);
+  return t.setUTCMilliseconds(t.getUTCMilliseconds() + e), t.getTime();
+}, oe = (n, e) => {
+  const t = new Date(n);
+  return t.setUTCSeconds(t.getUTCSeconds() + e), t.getTime();
+}, ie = (n, e) => {
+  const t = new Date(n);
+  return t.setUTCMinutes(t.getUTCMinutes() + e), t.getTime();
+}, re = (n, e) => {
+  const t = new Date(n);
+  return t.setUTCHours(t.getUTCHours() + e), t.getTime();
+}, ce = (n, e) => {
+  const t = new Date(n);
+  return t.setUTCDate(t.getUTCDate() + e), t.getTime();
+}, Tt = (n, e) => {
+  const t = new Date(n);
+  return t.setUTCMonth(t.getUTCMonth() + e), t.getTime();
+}, X = (n, e) => {
+  const [t, s] = e;
   switch (s) {
     case "milliseconds":
-      return se(t, e);
+      return se(n, t);
     case "seconds":
-      return oe(t, e);
+      return oe(n, t);
     case "minutes":
-      return ie(t, e);
+      return ie(n, t);
     case "hours":
-      return re(t, e);
+      return re(n, t);
     case "days":
-      return ce(t, e);
+      return ce(n, t);
     case "months":
-      return St(t, e);
+      return Tt(n, t);
     case "years":
-      return St(t, e * 12);
+      return Tt(n, t * 12);
   }
 };
-function J(t, n) {
-  const e = new Date(t), s = new Date(e.toLocaleString("en-US", { timeZone: n })), o = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
+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 = (t, n, e = "UTC") => {
-  const [s, o] = n;
-  let i = new Date(t);
+const ae = (n, e, t = "UTC") => {
+  const [s, o] = e;
+  let i = new Date(n);
   const r = () => {
-    i.setUTCHours(-J(i, e), 0, 0, 0);
+    i.setUTCHours(-J(i, t), 0, 0, 0);
   };
   switch (o) {
     case "milliseconds":
@@ -1205,7 +1243,7 @@ const ae = (t, n, e = "UTC") => {
       break;
     case "minutes":
       i.setUTCMinutes(
-        Math.ceil(i.getTime() % nt / yt / s) * s,
+        Math.ceil(i.getTime() % nt / vt / s) * s,
         0,
         0
       );
@@ -1221,37 +1259,37 @@ const ae = (t, n, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < t && (i = new Date(X(i, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < n && (i = new Date(X(i, [1, o])));
       break;
   }
   return i.getTime();
-}, Ue = ({
-  timeZone: t = Rt,
-  space: n = kt,
-  formatter: e,
+}, De = ({
+  timeZone: n = At,
+  space: e = Rt,
+  formatter: t,
   locale: s,
   showTimezone: o
 } = {}) => (i, r) => {
-  const { min: u, max: d } = i, c = Math.floor(r.chartAreaCanvasPX.width / n) + 1, m = (d - u) / c, [f, h] = ne.find(
-    (g) => Z(g) >= m
-  ) ?? [1, "milliseconds"], l = ae(u, [f, h], t), p = J(l, t), x = [l];
-  let v;
+  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;
   for (; ; ) {
-    switch (h) {
+    switch (a) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        v = X(l, [x.length * f, h]);
+        x = X(l, [v.length * f, a]);
         break;
       }
       case "days": {
         const g = X(l, [
-          x.length * f,
-          h
+          v.length * f,
+          a
         ]);
-        v = X(g, [
-          p - J(g, t),
+        x = X(g, [
+          p - J(g, n),
           "hours"
         ]);
         break;
@@ -1260,33 +1298,33 @@ const ae = (t, n, e = "UTC") => {
       case "years": {
         const g = X(
           X(X(l, [p, "hours"]), [
-            x.length * f,
-            h
+            v.length * f,
+            a
           ]),
           [-p, "hours"]
         );
-        v = X(g, [
-          p - J(g, t),
+        x = X(g, [
+          p - J(g, n),
           "hours"
         ]);
         break;
       }
     }
-    if (v > d)
+    if (x > h)
       break;
-    x.push(v);
+    v.push(x);
   }
-  return (e ?? le({
+  return (t ?? le({
     locale: s,
     showTimezone: o,
-    timeZone: t
-  }))(x);
-}, L = (t, n, e) => t.find((s) => s.type === e)?.value !== n.find((s) => s.type === e)?.value, le = ({
-  timeZone: t = Rt,
-  locale: n = Zt,
-  showTimezone: e = !0
+    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,
+  showTimezone: t = !0
 }) => {
-  const s = new Intl.DateTimeFormat(n, {
+  const s = new Intl.DateTimeFormat(e, {
     year: "numeric",
     day: "numeric",
     month: "short",
@@ -1296,33 +1334,33 @@ const ae = (t, n, e = "UTC") => {
     second: "numeric",
     fractionalSecondDigits: 3,
     timeZoneName: "short",
-    timeZone: t
+    timeZone: n
   });
   return (o) => {
-    const i = o[1] - o[0], r = i < Z([1, "days"]), u = i < Z([1, "minutes"]), d = i < Z([1, "seconds"]);
-    return o.map((c) => ({ value: c, label: s.formatToParts(new Date(c)) })).map((c, a, m) => {
-      const f = m[a - 1], h = a === 0 || L(c.label, f.label, "year"), l = a === 0 || L(c.label, f.label, "day"), p = a === 0 || L(c.label, f.label, "month"), x = a === 0 || L(c.label, f.label, "hour"), v = a === 0 || L(c.label, f.label, "timeZoneName"), g = a === 0 || L(c.label, f.label, "minute"), y = a === 0 || L(c.label, f.label, "second"), w = a === 0 || L(c.label, f.label, "fractionalSecond"), S = [];
-      if (r && (x || g || v || y || w)) {
-        const C = c.label.find((M) => M.type === "hour")?.value, b = c.label.find((M) => M.type === "minute")?.value, P = c.label.find((M) => M.type === "timeZoneName")?.value;
-        let E = "";
-        if (u) {
-          const M = c.label.find((K) => K.type === "second")?.value, B = c.label.find(
+    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;
+        let M = "";
+        if (d) {
+          const P = u.label.find((K) => K.type === "second")?.value, N = u.label.find(
             (K) => K.type === "fractionalSecond"
           )?.value;
-          E = `:${M}` + (d ? `.${B}` : "");
+          M = `:${P}` + (h ? `.${N}` : "");
         }
         S.push(
-          `${C}:${b}${E}` + (e && v ? ` ${P}` : "")
+          `${b}:${T}${M}` + (t && x ? ` ${C}` : "")
         );
       }
       return (l || p) && S.push(
         [
-          c.label.find((C) => C.type === "month")?.value,
-          l && c.label.find((C) => C.type === "day")?.value
+          u.label.find((b) => b.type === "month")?.value,
+          l && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), h && S.push(c.label.find((C) => C.type === "year")?.value), {
-        value: c.value,
-        label: S.filter((C) => C).join(`
+      ), a && S.push(u.label.find((b) => b.type === "year")?.value), {
+        value: u.value,
+        label: S.filter((b) => b).join(`
 `)
       };
     });
@@ -1332,36 +1370,37 @@ export {
   we as AreaPlot,
   Re as AxisOverlay,
   ge as BarPlot,
+  ut as CANPLOT_LAYER,
   xe as CanPlot,
-  Pe as ChartAreaInteractions,
-  Me as Crosshair,
+  Me as ChartAreaInteractions,
+  Pe as Crosshair,
   ye as LinePlot,
   ve as ScatterPlot,
   ke as SelectBox,
   be as SparklinePlot,
   Ee as TooltipsX,
-  Ce as XTicks,
-  Te as YTicks,
-  U as applyStyles,
+  Te as XTicks,
+  Ce as YTicks,
+  D as applyStyles,
   j as clamp,
   pe as clampUnfit,
   Y as clampXPosToChartArea,
-  O as clampYPosToChartArea,
+  B as clampYPosToChartArea,
   Jt as defaultNumericalTicksFormatter,
   me as findClosestIndex,
-  _ as getScale,
+  I as getScale,
   Ae as makeLinearTicks,
   le as makeTimeTickFormat,
-  Ue as makeTimeTicks,
-  D as posToVal,
-  Kt as pxToValDistance,
+  De as makeTimeTicks,
+  L as posToVal,
+  Ot as pxToValDistance,
   fe as sum,
-  z as useDrawEffect,
-  mt as useFrameState,
-  xt as useInteractionsEvent,
+  F as useDrawEffect,
+  pt as useFrameState,
+  yt as useInteractionsEvent,
   Se as useXPositioned,
   lt as valFits,
   H as valToPos,
-  ht as valToPxDistance
+  ft as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map