@canplot/react 0.1.4 → 0.1.5

package/dist/canplot.mjs

@@ -1,48 +1,51 @@
-import { jsxs as at, jsx as L, Fragment as Et } from "react/jsx-runtime";
-import Z, { createContext as Mt, useContext as lt, useRef as R, useLayoutEffect as G, version as Pt, forwardRef as At, useMemo as gt, useState as N, useId as _t, useEffect as Rt } from "react";
-import { createStore as Ut, useStore as wt } from "zustand";
-const J = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
-  const { min: n, max: o } = D(t, e), i = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = (Q(t, e) ? i.width : i.height) / (o - n);
-  return s / a;
-}, D = (t, s) => {
+import { jsxs as at, jsx as X, Fragment as Et } from "react/jsx-runtime";
+import Z, { createContext as Mt, useContext as lt, useRef as L, useLayoutEffect as J, version as At, forwardRef as Pt, useMemo as St, useState as N, useId as Rt, useEffect as _t } from "react";
+import { createStore as Ut, useStore as vt } from "zustand";
+const V = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
+  const { min: n, max: o } = P(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = (Q(t, e) ? a.width : a.height) / (o - n);
+  return s / l;
+}, P = (t, s) => {
   const e = t.scales.find((c) => c.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
   return e;
-}, Q = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", ae = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", O = (t, s) => {
+}, Q = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", ae = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", 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";
 }, ut = (t, s, e, c) => {
-  const n = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: o, max: i } = D(t, e), a = (Q(t, e) ? n.width : n.height) / (i - o);
-  return s * a;
-}, B = (t, s, e, c) => {
-  const { min: n } = D(t, e), o = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, i = ut(t, s - n, e, c);
-  return Q(t, e) ? J(
-    o.x + i,
+  const n = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: o, max: a } = P(t, e), l = (Q(t, e) ? n.width : n.height) / (a - o);
+  return s * l;
+}, j = (t, s, e, c) => {
+  const { min: n } = P(t, e), o = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = ut(t, s - n, e, c);
+  return Q(t, e) ? V(
+    o.x + a,
     o.x - 10 * o.width,
     o.x + 11 * o.width
-  ) : J(
-    o.y + o.height - i,
+  ) : V(
+    o.y + o.height - a,
     o.y - 10 * o.height,
     o.y + 11 * o.height
   );
-}, z = (t, s, e) => {
+}, le = (t, s, e) => {
+  const { min: c, max: n } = P(t, e);
+  return V(s, c, n);
+}, O = (t, s, e) => {
   const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return J(s, c.x, c.x + c.width);
-}, Y = (t, s, e) => {
+  return V(s, c.x, c.x + c.width);
+}, $ = (t, s, e) => {
   const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return J(s, c.y, c.y + c.height);
-}, rt = (t, s, e) => {
-  const { min: c, max: n } = D(t, e);
+  return V(s, c.y, c.y + c.height);
+}, it = (t, s, e) => {
+  const { min: c, max: n } = P(t, e);
   return s >= c && s <= n;
-}, U = (t, s, e, c) => {
-  const { min: n, max: o } = D(t, e), i = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = Q(t, e) ? (s - i.x) / i.width : (i.height - s + i.y) / i.height;
-  return n + a * (o - n);
+}, D = (t, s, e, c) => {
+  const { min: n, max: o } = P(t, e), a = c === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, l = Q(t, e) ? (s - a.x) / a.width : (a.height - s + a.y) / a.height;
+  return n + l * (o - n);
 }, Dt = (t) => {
   const { ctx: s, scales: e } = t;
   for (const c of e) {
     if (!c.axis) continue;
-    s.save(), O(s, {
+    s.save(), R(s, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -62,7 +65,7 @@ const J = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
     } else c.axis.position === "right" && (s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x, n.y + n.height), s.stroke());
     s.restore();
   }
-}, It = () => Ut((t, s) => {
+}, Xt = () => Ut((t, s) => {
   const e = () => {
     const c = s()._frame;
     if (!c) throw new Error("No frame set in frame store");
@@ -72,24 +75,24 @@ const J = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (c, n) => z(e(), c, n ?? "canvas"),
-    clampYPosToChartArea: (c, n) => Y(e(), c, n ?? "canvas"),
-    valToPos: (c, n, o) => B(e(), c, n, o ?? "canvas"),
+    clampXPosToChartArea: (c, n) => O(e(), c, n ?? "canvas"),
+    clampYPosToChartArea: (c, n) => $(e(), c, n ?? "canvas"),
+    valToPos: (c, n, o) => j(e(), c, n, o ?? "canvas"),
     valToPxDistance: (c, n, o) => ut(
       e(),
       c,
       n,
       o ?? "canvas"
     ),
-    valFits: (c, n) => rt(e(), c, n),
-    getScale: (c) => D(e(), c)
+    valFits: (c, n) => it(e(), c, n),
+    getScale: (c) => P(e(), c)
   };
-}), dt = Mt(null), V = (t, s) => {
+}), dt = Mt(null), z = (t, s) => {
   const e = lt(dt);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
-  const c = R(t);
-  c.current = t, G(() => {
+  const c = L(t);
+  c.current = t, J(() => {
     c.current(e.getState()), e.subscribe((n) => {
       n._frame && c.current(n);
     });
@@ -98,48 +101,48 @@ const J = (t, s, e) => Math.min(Math.max(t, s), e), Lt = (t, s, e, c) => {
   const s = lt(dt);
   if (!s)
     throw new Error("useFrame must be used within a CanPlot component");
-  return wt(
+  return vt(
     s,
     t ?? ((e) => e.getFrame())
   );
 };
-function Xt(t) {
+function Kt(t) {
   return (s) => {
-    for (const e of t) it(e, s);
+    for (const e of t) rt(e, s);
   };
 }
-function Kt(t) {
+function It(t) {
   return (s) => {
     const e = [];
     for (const c of t) {
-      const n = it(c, s), o = typeof n == "function";
-      e.push(o ? n : () => it(c, null));
+      const n = rt(c, s), o = typeof n == "function";
+      e.push(o ? n : () => rt(c, null));
     }
     return () => {
       for (const c of e) c();
     };
   };
 }
-function it(t, s) {
+function rt(t, s) {
   if (typeof t == "function")
     return t(s);
   t && (t.current = s);
 }
-var Ft = parseInt(Pt.split(".")[0], 10) >= 19 ? Kt : Xt;
-const le = At(({ configuration: t, children: s, style: e, className: c }, n) => {
-  const o = R(null), i = R(null), a = Yt(i), u = gt(It, []);
-  G(() => {
-    u.setState({
-      _frame: Ot(t, a, o.current)
+var Ft = parseInt(At.split(".")[0], 10) >= 19 ? It : Kt;
+const ue = Pt(({ configuration: t, children: s, style: e, className: c }, n) => {
+  const o = L(null), a = L(null), l = Yt(a), d = St(Xt, []);
+  J(() => {
+    d.setState({
+      _frame: Ot(t, l, o.current)
     });
-  }, [t, a, o, u]), G(() => u.subscribe((d) => {
-    d._frame && $t(d._frame);
-  }), [u]);
-  const l = window.devicePixelRatio || 1;
+  }, [t, l, o, d]), J(() => d.subscribe((r) => {
+    r._frame && $t(r._frame);
+  }), [d]);
+  const u = window.devicePixelRatio || 1;
   return /* @__PURE__ */ at(
     "div",
     {
-      ref: Ft([n, i]),
+      ref: Ft([n, a]),
       className: c,
       style: {
         position: "relative",
@@ -148,41 +151,41 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ L(
+        /* @__PURE__ */ X(
           "canvas",
           {
             ref: o,
-            width: a.width * l,
-            height: a.height * l,
+            width: l.width * u,
+            height: l.height * u,
             style: {
               inset: 0,
               position: "absolute",
-              width: `${a.width}px`,
-              height: `${a.height}px`
+              width: `${l.width}px`,
+              height: `${l.height}px`
             }
           }
         ),
-        /* @__PURE__ */ L(zt, { frameStore: u, children: s })
+        /* @__PURE__ */ X(zt, { frameStore: d, children: s })
       ]
     }
   );
-}), zt = ({ frameStore: t, children: s }) => wt(t, (c) => !!c._frame) ? /* @__PURE__ */ L(dt.Provider, { value: t, children: s }) : null, Yt = (t) => {
+}), zt = ({ frameStore: t, children: s }) => vt(t, (c) => !!c._frame) ? /* @__PURE__ */ X(dt.Provider, { value: t, children: s }) : null, Yt = (t) => {
   const [s, e] = N({
     width: 0,
     height: 0
   }), [c] = N(() => new ResizeObserver((n) => {
     for (const o of n) {
-      const i = Math.round(o.contentRect.width), a = Math.round(o.contentRect.height);
+      const a = Math.round(o.contentRect.width), l = Math.round(o.contentRect.height);
       e(
-        (u) => u.width !== i || u.height !== a ? { ...u, width: i, height: a } : u
+        (d) => d.width !== a || d.height !== l ? { ...d, width: a, height: l } : d
       );
     }
   }));
-  return G(() => {
+  return J(() => {
     if (!t.current) return;
     const n = t.current.clientWidth, o = t.current.clientHeight;
     return e(
-      (i) => i.width !== n || i.height !== o ? { ...i, width: n, height: o } : i
+      (a) => a.width !== n || a.height !== o ? { ...a, width: n, height: o } : a
     ), c.observe(t.current, { box: "border-box" }), () => c.disconnect();
   }, [c, t]), s;
 }, Ot = (t, s, e) => {
@@ -202,31 +205,31 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
       0,
       o.height - h.axis.size
     ), h.axis.position === "top" && (o.y += h.axis.size)) : (h.axis.position === "left" || h.axis.position === "right") && (o.width = Math.max(0, o.width - h.axis.size), h.axis.position === "left" && (o.x += h.axis.size)));
-  const i = {
+  const a = {
     x: o.x * n,
     y: o.y * n,
     width: o.width * n,
     height: o.height * n
-  }, a = [];
-  let u = t.padding.left * n, l = c.canvas.width - t.padding.right * n, d = c.canvas.height - t.padding.bottom * n, p = t.padding.top * n;
+  }, l = [];
+  let d = t.padding.left * n, u = c.canvas.width - t.padding.right * n, r = c.canvas.height - t.padding.bottom * n, p = t.padding.top * n;
   for (const h of t.scales) {
     if (!h.axis) {
-      a.push({ ...h, axis: null });
+      l.push({ ...h, axis: null });
       continue;
     }
-    let r;
+    let i;
     if (h.origin === "x")
       switch (h.axis.position) {
         case "bottom":
-          d -= h.axis.size * n, r = {
+          r -= h.axis.size * n, i = {
             x: o.x,
-            y: d / n,
+            y: r / n,
             width: o.width,
             height: h.axis.size
           };
           break;
         case "top":
-          p += h.axis.size * n, r = {
+          p += h.axis.size * n, i = {
             x: o.x,
             y: p / n - h.axis.size,
             width: o.width,
@@ -240,16 +243,16 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
     else
       switch (h.axis.position) {
         case "left":
-          u += h.axis.size * n, r = {
-            x: u / n - h.axis.size,
+          d += h.axis.size * n, i = {
+            x: d / n - h.axis.size,
             y: o.y,
             width: h.axis.size,
             height: o.height
           };
           break;
         case "right":
-          l -= h.axis.size * n, r = {
-            x: l / n,
+          u -= h.axis.size * n, i = {
+            x: u / n,
             y: o.y,
             width: h.axis.size,
             height: o.height
@@ -260,16 +263,16 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
           throw new Error("Invalid axis position for y origin");
       }
     const m = {
-      x: r.x * n,
-      y: r.y * n,
-      width: r.width * n,
-      height: r.height * n
+      x: i.x * n,
+      y: i.y * n,
+      width: i.width * n,
+      height: i.height * n
     };
-    a.push({
+    l.push({
       ...h,
       axis: {
         ...h.axis,
-        cssRect: r,
+        cssRect: i,
         canvasRect: m
       }
     });
@@ -278,132 +281,185 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
     ctx: c,
     dpr: n,
     padding: t.padding,
-    scales: a,
+    scales: l,
     chartAreaCSS: o,
-    chartAreaCanvasPX: i
+    chartAreaCanvasPX: a
   };
 }, $t = (t) => {
   t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Dt(t);
-}, ue = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (V(
-  ({ getCtx: n, clampXPosToChartArea: o, clampYPosToChartArea: i, valToPos: a }) => {
-    const u = n();
-    u.save(), u.beginPath(), O(u, c);
-    for (const l of t) {
-      const d = o(a(l.x, s)), p = i(a(l.y, e));
-      u.lineTo(d, p);
+}, de = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(
+  ({ getCtx: n, clampXPosToChartArea: o, clampYPosToChartArea: a, valToPos: l }) => {
+    const d = n();
+    d.save(), d.beginPath(), R(d, c);
+    for (const u of t) {
+      const r = o(l(u.x, s)), p = a(l(u.y, e));
+      d.lineTo(r, p);
     }
-    u.stroke(), u.restore();
+    d.stroke(), d.restore();
   },
   [t, s, e, c]
-), null), de = ({ data: t, xScaleId: s, yScaleId: e, radius: c = 5, style: n }) => (V(({ getCtx: o, valToPos: i, valFits: a }) => {
-  const u = o();
-  u.save(), u.beginPath(), O(u, n);
-  for (const l of t) {
-    if (!a(l.x, s) || !a(l.y, e))
+), null), he = ({ data: t, xScaleId: s, yScaleId: e, radius: c = 5, style: n }) => (z(({ getCtx: o, valToPos: a, valFits: l }) => {
+  const d = o();
+  d.save(), d.beginPath(), R(d, n);
+  for (const u of t) {
+    if (!l(u.x, s) || !l(u.y, e))
       continue;
-    const d = i(l.x, s), p = i(l.y, e);
-    u.moveTo(d + c, p), u.arc(d, p, c, 0, Math.PI * 2);
+    const r = a(u.x, s), p = a(u.y, e);
+    d.moveTo(r + c, p), d.arc(r, p, c, 0, Math.PI * 2);
   }
-  u.stroke(), u.fill(), u.restore();
-}, [t, s, e, c, n]), null), he = ({
+  d.stroke(), d.fill(), d.restore();
+}, [t, s, e, c, n]), null), fe = ({
   data: t,
   xScaleId: s,
   yScaleId: e,
   style: c,
   barWidth: n,
   xPositionOffset: o,
-  radius: i
-}) => (V(
+  radius: a
+}) => (z(
   ({
-    getCtx: a,
-    valToPxDistance: u,
-    valToPos: l,
-    clampXPosToChartArea: d,
+    getCtx: l,
+    valToPxDistance: d,
+    valToPos: u,
+    clampXPosToChartArea: r,
     clampYPosToChartArea: p
   }) => {
     if (t.length === 0) return;
-    const f = a();
-    f.save(), O(f, c);
-    const h = u(n, s);
+    const f = l();
+    f.save(), R(f, c);
+    const h = d(n, s);
     f.beginPath();
-    for (const r of t) {
-      const y = l(r.x, s) - h / 2 + o * h, x = p(l(0, e)), g = p(l(r.y, e)), S = x - g, w = d(y), k = d(y + h) - w;
-      i ? f.roundRect(
+    for (const i of t) {
+      const y = u(i.x, s) - h / 2 + o * h, x = p(u(0, e)), v = p(u(i.y, e)), g = x - v, S = r(y), w = r(y + h) - S;
+      a ? f.roundRect(
+        S,
+        v,
         w,
         g,
-        k,
-        S,
-        i
-      ) : f.rect(w, g, k, S);
+        a
+      ) : f.rect(S, v, w, g);
     }
     f.closePath(), f.fill(), c?.strokeStyle && f.stroke(), f.restore();
   },
-  [t, s, e, c, n, o, i]
-), null), me = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (V(({ getCtx: n, clampXPosToChartArea: o, clampYPosToChartArea: i, valToPos: a }) => {
-  const u = [];
-  for (const d of t) {
-    const p = o(a(d.x, s)), f = i(a(d.y[0], e)), h = i(a(d.y[1], e));
-    u.push({ x: p, y: f }), u.unshift({ x: p, y: h });
+  [t, s, e, c, n, o, a]
+), null), me = ({ data: t, xScaleId: s, yScaleId: e, style: c }) => (z(({ getCtx: n, clampXPosToChartArea: o, clampYPosToChartArea: a, valToPos: l }) => {
+  const d = [];
+  for (const r of t) {
+    const p = o(l(r.x, s)), f = a(l(r.y[0], e)), h = a(l(r.y[1], e));
+    d.push({ x: p, y: f }), d.unshift({ x: p, y: h });
   }
-  const l = n();
-  if (u.length > 0) {
-    l.save(), l.beginPath(), O(l, c), l.moveTo(u[0].x, u[0].y);
-    for (const d of u)
-      l.lineTo(d.x, d.y);
-    l.closePath(), l.fill(), l.restore();
+  const u = n();
+  if (d.length > 0) {
+    u.save(), u.beginPath(), R(u, c), u.moveTo(d[0].x, d[0].y);
+    for (const r of d)
+      u.lineTo(r.x, r.y);
+    u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, c]), null), fe = ({ data: t, stroked: s, xScaleId: e, yScaleId: c, style: n }) => (V(
-  ({ getCtx: o, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: u }) => {
-    const l = [], d = o();
-    for (const r of t) {
-      const m = i(u(r.x, e)), y = a(u(r.y, c));
-      l.push({ x: m, y });
+}, [t, s, e, c]), null), pe = ({ data: t, stroked: s, xScaleId: e, yScaleId: c, style: n }) => (z(
+  ({ getCtx: o, clampXPosToChartArea: a, clampYPosToChartArea: l, valToPos: d }) => {
+    const u = [], r = o();
+    for (const i of t) {
+      const m = a(d(i.x, e)), y = l(d(i.y, c));
+      u.push({ x: m, y });
     }
-    const p = l.at(0), f = l.at(-1);
+    const p = u.at(0), f = u.at(-1);
     if (!p || !f)
       return;
-    const h = a(u(0, c));
-    d.save(), d.beginPath(), O(d, n), d.moveTo(p.x, h);
-    for (const r of l)
-      d.lineTo(r.x, r.y);
-    if (d.lineTo(f.x, h), d.closePath(), d.fill(), s) {
-      d.beginPath(), d.moveTo(p.x, p.y);
-      for (const r of l)
-        d.lineTo(r.x, r.y);
-      d.stroke();
+    const h = l(d(0, c));
+    r.save(), r.beginPath(), R(r, n), r.moveTo(p.x, h);
+    for (const i of u)
+      r.lineTo(i.x, i.y);
+    if (r.lineTo(f.x, h), r.closePath(), r.fill(), s) {
+      r.beginPath(), r.moveTo(p.x, p.y);
+      for (const i of u)
+        r.lineTo(i.x, i.y);
+      r.stroke();
     }
-    d.restore();
+    r.restore();
   },
   [t, s, e, c, n]
-), null), pe = (t, s) => ht(
+), null), ye = (t, s) => ht(
   ({
     clampXPosToChartArea: e,
     clampYPosToChartArea: c,
     getScale: n,
     valToPos: o,
-    valFits: i
+    valFits: a
   }) => {
-    const a = {};
-    for (const u in t) {
-      const l = t[u];
-      switch (l.exceeding) {
+    const l = {};
+    for (const d in t) {
+      const u = t[d];
+      switch (u.exceeding) {
         case "discard": {
-          if (i(l.value, l.scaleId)) {
-            const d = o(l.value, l.scaleId, s);
-            a[u] = d;
+          if (a(u.value, u.scaleId)) {
+            const r = o(u.value, u.scaleId, s);
+            l[d] = r;
           }
           break;
         }
         case "clamp": {
-          const d = o(l.value, l.scaleId, s);
-          a[u] = n(l.scaleId)?.origin === "x" ? e(d, s) : c(d, s);
+          const r = o(u.value, u.scaleId, s);
+          l[d] = n(u.scaleId)?.origin === "x" ? e(r, s) : c(r, s);
           break;
         }
       }
     }
-    return a;
+    return l;
   }
-), b = () => {
+), xe = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: n, ticks: o }) => (z(
+  ({ getCtx: a, valToPos: l, getScale: d, getFrame: u }) => {
+    const r = a(), p = d(t);
+    if (!p || !p.axis || p.origin !== "x") return;
+    const f = p.axis, h = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, i = window.devicePixelRatio || 1, m = h, y = (n ?? 6) * i, x = f.position === "top" ? h - y : h + y, v = (c ?? 12) * i;
+    r.save(), r.fontKerning = "auto", R(r, {
+      ...s
+    }), r.beginPath();
+    const g = Array.isArray(o) ? o : o({ ...p, axis: f }, u());
+    for (const { value: S } of g) {
+      const w = l(S, t, "canvas");
+      r.moveTo(w, m), r.lineTo(w, x);
+    }
+    r.stroke(), r.restore(), r.save(), R(r, {
+      textBaseline: f.position === "top" ? "bottom" : "top",
+      textAlign: "center",
+      ...s,
+      ...e
+    });
+    for (const { value: S, label: w } of g) {
+      const b = l(S, t, "canvas"), k = w.split(`
+`);
+      for (let C = 0; C < k.length; C++)
+        r.fillText(k[C], b, x + i * 2 + C * v);
+    }
+    r.restore();
+  },
+  [o, t, s, e]
+), null), ge = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: c, tickSize: n, ticks: o }) => (z(
+  ({ getCtx: a, valToPos: l, getScale: d, getFrame: u }) => {
+    const r = a(), p = d(t);
+    if (!p || !p.axis || p.origin !== "y") return;
+    const f = p.axis, h = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, i = window.devicePixelRatio || 1, m = h, y = (n ?? 6) * i, x = f.position === "left" ? h - y : h + y, v = (c ?? 12) * i, g = Array.isArray(o) ? o : o({ ...p, axis: f }, u());
+    r.save(), r.fontKerning = "auto", R(r, { ...s }), r.beginPath();
+    for (const { value: S } of g) {
+      const w = l(S, t, "canvas");
+      r.moveTo(m, w), r.lineTo(x, w);
+    }
+    r.stroke(), r.restore(), r.save(), R(r, {
+      textBaseline: "middle",
+      textAlign: f.position === "left" ? "right" : "left",
+      ...s,
+      ...e
+    });
+    for (const { value: S, label: w } of g) {
+      const b = l(S, t, "canvas"), k = w.split(`
+`);
+      for (let C = 0; C < k.length; C++)
+        r.fillText(` ${k[C]} `, x, b + C * v);
+    }
+    r.restore();
+  },
+  [o, t, s, e]
+), null), E = () => {
   const t = [];
   return {
     addEventListener: (s, e) => (t.push({
@@ -418,53 +474,53 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
         c.syncKey === s && c.callback(s, e);
     }
   };
-}, v = {
-  dblclick: b(),
-  click: b(),
-  move: b(),
-  mousedown: b(),
-  mouseup: b(),
-  spanselect: b(),
-  documentmouseup: b(),
-  pressandwheel: b(),
-  sync_dblclick: b(),
-  sync_click: b(),
-  sync_move: b(),
-  sync_mousedown: b(),
-  sync_mouseup: b(),
-  sync_spanselect: b(),
-  sync_pressandwheel: b()
-}, T = (t, s, e) => {
+}, T = {
+  dblclick: E(),
+  click: E(),
+  move: E(),
+  mousedown: E(),
+  mouseup: E(),
+  spanselect: E(),
+  documentmouseup: E(),
+  pressandwheel: E(),
+  sync_dblclick: E(),
+  sync_click: E(),
+  sync_move: E(),
+  sync_mousedown: E(),
+  sync_mouseup: E(),
+  sync_spanselect: E(),
+  sync_pressandwheel: E()
+}, M = (t, s, e) => {
   const c = Z.useRef(e);
-  c.current = e, Z.useEffect(() => v[t].addEventListener(
+  c.current = e, Z.useEffect(() => T[t].addEventListener(
     s,
-    (o, i) => {
-      c.current(i, o);
+    (o, a) => {
+      c.current(a, o);
     }
   ), [s, t, c]);
-}, mt = Z.createContext(""), ft = (t, s) => {
-  const e = Z.useContext(mt);
-  return T(t, e, s);
-}, Nt = (t, s, e, c, n) => {
+}, ft = Z.createContext(""), mt = (t, s) => {
+  const e = Z.useContext(ft);
+  return M(t, e, s);
+}, Bt = (t, s, e, c, n) => {
   if (!s) return;
-  const o = c ?? e.scales.find((p) => p.origin === "x")?.id, i = n ?? e.scales.find((p) => p.origin === "y")?.id;
-  if (!o || !i)
+  const o = c ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
+  if (!o || !a)
     return;
-  const a = t.clientX - s.left, u = {
+  const l = t.clientX - s.left, d = {
     scaleId: o,
-    value: U(e, a, o, "css")
-  }, l = t.clientY - s.top, d = {
-    scaleId: i,
-    value: U(e, l, i, "css")
+    value: D(e, l, o, "css")
+  }, u = t.clientY - s.top, r = {
+    scaleId: a,
+    value: D(e, u, a, "css")
   };
-  return { pointerSyncPosition: { x: u, y: d }, cssX: a, cssY: l };
-}, F = (t, s) => {
-  const e = t.x ? B(
+  return { pointerSyncPosition: { x: d, y: r }, cssX: l, cssY: u };
+}, Y = (t, s) => {
+  const e = t.x ? j(
     s,
     t.x.value,
     t.x.scaleId,
     "css"
-  ) : 0, c = t.y ? B(
+  ) : 0, c = t.y ? j(
     s,
     t.y.value,
     t.y.scaleId,
@@ -476,44 +532,44 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
     scaled: Object.fromEntries(
       s.scales.map((n) => {
         const o = n.origin === "y" ? c : e;
-        return [n.id, U(s, o, n.id, "css")];
+        return [n.id, D(s, o, n.id, "css")];
       })
     )
   };
 }, xt = (t, s, e) => {
   if (!s) {
-    const i = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, a = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
+    const a = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, l = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
     return {
-      fromCSS: i,
-      toCSS: a,
-      scaled: e.scales.flatMap((u) => {
-        if (u.origin !== t)
+      fromCSS: a,
+      toCSS: l,
+      scaled: e.scales.flatMap((d) => {
+        if (d.origin !== t)
           return [];
-        const { min: l, max: d } = D(e, u.id);
-        return [{ scaleId: u.id, from: l, to: d }];
+        const { min: u, max: r } = P(e, d.id);
+        return [{ scaleId: d.id, from: u, to: r }];
       })
     };
   }
-  const c = B(
+  const c = j(
     e,
     s.from,
     s.scaleId,
     "css"
-  ), n = B(
+  ), n = j(
     e,
     s.to,
     s.scaleId,
     "css"
   ), o = e.scales.flatMap(
-    (i) => {
-      if (i.origin !== t)
+    (a) => {
+      if (a.origin !== t)
         return [];
-      const a = U(e, c, i.id, "css"), u = U(e, n, i.id, "css");
+      const l = D(e, c, a.id, "css"), d = D(e, n, a.id, "css");
       return [
         {
-          scaleId: i.id,
-          from: a,
-          to: u
+          scaleId: a.id,
+          from: l,
+          to: d
         }
       ];
     }
@@ -523,61 +579,61 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
     toCSS: n,
     scaled: o
   };
-}, ye = ({
+}, Se = ({
   id: t,
   onClick: s,
   onDblClick: e,
   onMouseMove: c,
   onMouseDown: n,
   onMouseUp: o,
-  onDocumentMouseUp: i,
-  onSpanSelect: a,
-  className: u,
-  style: l,
-  sync: d,
+  onDocumentMouseUp: a,
+  onSpanSelect: l,
+  className: d,
+  style: u,
+  sync: r,
   children: p
 }) => {
-  const f = _t(), h = t || f;
-  return T("dblclick", h, (r) => {
-    e?.(r);
-  }), T("click", h, (r) => {
-    s?.(r);
-  }), T("move", h, (r) => {
-    c?.(r);
-  }), T("mousedown", h, (r) => {
-    n?.(r);
-  }), T("mouseup", h, (r) => {
-    o?.(r);
-  }), T("documentmouseup", h, (r) => {
-    i?.(r);
-  }), T("spanselect", h, (r) => {
-    a?.(r);
-  }), /* @__PURE__ */ at(mt.Provider, { value: h, children: [
-    /* @__PURE__ */ L(
-      Bt,
+  const f = Rt(), h = t || f;
+  return M("dblclick", h, (i) => {
+    e?.(i);
+  }), M("click", h, (i) => {
+    s?.(i);
+  }), M("move", h, (i) => {
+    c?.(i);
+  }), M("mousedown", h, (i) => {
+    n?.(i);
+  }), M("mouseup", h, (i) => {
+    o?.(i);
+  }), M("documentmouseup", h, (i) => {
+    a?.(i);
+  }), M("spanselect", h, (i) => {
+    l?.(i);
+  }), /* @__PURE__ */ at(ft.Provider, { value: h, children: [
+    /* @__PURE__ */ X(
+      Nt,
       {
-        className: u,
-        style: l,
-        sync: d
+        className: d,
+        style: u,
+        sync: r
       }
     ),
     p
   ] });
-}, Bt = ({ className: t, style: s, sync: e }) => {
-  const c = R(null), n = ht(), o = R(n);
+}, Nt = ({ className: t, style: s, sync: e }) => {
+  const c = L(null), n = ht(), o = L(n);
   o.current = n;
-  const i = lt(mt), a = e?.key || i, u = R(null), l = R(null), d = R(null), p = () => {
-    const r = c.current?.parentElement;
-    if (r) {
-      if (r.dataset.canplotroot === void 0)
+  const a = lt(ft), l = e?.key || a, d = L(null), u = L(null), r = L(null), p = () => {
+    const i = c.current?.parentElement;
+    if (i) {
+      if (i.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return r.getBoundingClientRect();
+      return i.getBoundingClientRect();
     }
-  }, f = (r, m) => {
-    const y = Nt(
-      r,
+  }, f = (i, m) => {
+    const y = Bt(
+      i,
       p(),
       o.current,
       e?.xViaScaleId,
@@ -587,217 +643,217 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
       y.pointerSyncPosition,
       { cssX: y.cssX, cssY: y.cssY },
       {
-        ctrlKey: r.ctrlKey,
-        altKey: r.altKey,
-        shiftKey: r.shiftKey,
-        metaKey: r.metaKey
+        ctrlKey: i.ctrlKey,
+        altKey: i.altKey,
+        shiftKey: i.shiftKey,
+        metaKey: i.metaKey
       }
     );
-  }, h = R(f);
-  return h.current = f, Rt(() => {
-    const r = (S) => {
-      const w = l.current;
-      w && v.sync_spanselect.dispatchEvent(a, {
-        ...w,
+  }, h = L(f);
+  return h.current = f, _t(() => {
+    const i = (g) => {
+      const S = u.current;
+      S && T.sync_spanselect.dispatchEvent(l, {
+        ...S,
         completed: !0
-      }), v.documentmouseup.dispatchEvent(a, {
+      }), T.documentmouseup.dispatchEvent(l, {
         frame: o.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
         }
       });
-    }, m = (S) => {
-      const w = {
-        ctrlKey: S.ctrlKey,
-        altKey: S.altKey,
-        shiftKey: S.shiftKey,
-        metaKey: S.metaKey
-      }, k = d.current;
-      if (k && Object.entries(w).some(
-        ([E, M]) => k.keys[E] !== M
+    }, m = (g) => {
+      const S = {
+        ctrlKey: g.ctrlKey,
+        altKey: g.altKey,
+        shiftKey: g.shiftKey,
+        metaKey: g.metaKey
+      }, w = r.current;
+      if (w && Object.entries(S).some(
+        ([k, C]) => w.keys[k] !== C
       )) {
-        const E = { ...k, keys: w };
-        d.current = E, v.sync_move.dispatchEvent(a, E);
+        const k = { ...w, keys: S };
+        r.current = k, T.sync_move.dispatchEvent(l, k);
       }
-      const C = l.current;
-      if (C && Object.entries(w).some(
-        ([E, M]) => C.keys[E] !== M
+      const b = u.current;
+      if (b && Object.entries(S).some(
+        ([k, C]) => b.keys[k] !== C
       )) {
-        S.stopPropagation(), S.preventDefault();
-        const E = { ...C, keys: w };
-        l.current = E, v.sync_spanselect.dispatchEvent(
-          a,
-          E
+        g.stopPropagation(), g.preventDefault();
+        const k = { ...b, keys: S };
+        u.current = k, T.sync_spanselect.dispatchEvent(
+          l,
+          k
         );
       }
-    }, y = (S) => {
+    }, y = (g) => {
       h.current(
-        S,
-        (w, { cssX: k, cssY: C }, E) => {
-          const M = u.current;
-          if (!M || !w.x || !w.y) return;
-          const A = o.current, P = M.xRangeCss.start, $ = k, K = M.yRangeCss.start, et = C, st = D(A, w.x.scaleId), nt = D(A, w.y.scaleId);
-          u.current = {
-            xRangeCss: { start: P, end: $ },
-            yRangeCss: { start: K, end: et }
+        g,
+        (S, { cssX: w, cssY: b }, k) => {
+          const C = d.current;
+          if (!C || !S.x || !S.y) return;
+          const _ = o.current, A = C.xRangeCss.start, B = w, F = C.yRangeCss.start, et = b, st = P(_, S.x.scaleId), nt = P(_, S.y.scaleId);
+          d.current = {
+            xRangeCss: { start: A, end: B },
+            yRangeCss: { start: F, end: et }
           };
-          let _ = "none";
-          const ot = Math.abs(K - et), ct = Math.abs(P - $);
-          ot < 10 && ct < 10 ? _ = "none" : ot > 30 && ct > 30 ? _ = "box" : ot > ct ? _ = "y" : _ = "x";
-          const Tt = _ === "x" || _ === "box" ? {
+          let U = "none";
+          const ot = Math.abs(F - et), ct = Math.abs(A - B);
+          ot < 10 && ct < 10 ? U = "none" : ot > 30 && ct > 30 ? U = "box" : ot > ct ? U = "y" : U = "x";
+          const Tt = U === "x" || U === "box" ? {
             scaleId: st.id,
-            from: U(
-              A,
-              z(o.current, P, "css"),
+            from: D(
+              _,
+              O(o.current, A, "css"),
               st.id,
               "css"
             ),
-            to: U(
-              A,
-              z(o.current, $, "css"),
+            to: D(
+              _,
+              O(o.current, B, "css"),
               st.id,
               "css"
             )
-          } : void 0, kt = _ === "y" || _ === "box" ? {
+          } : void 0, kt = U === "y" || U === "box" ? {
             scaleId: nt.id,
-            from: U(
-              A,
-              Y(o.current, K, "css"),
+            from: D(
+              _,
+              $(o.current, F, "css"),
               nt.id,
               "css"
             ),
-            to: U(
-              A,
-              Y(o.current, et, "css"),
+            to: D(
+              _,
+              $(o.current, et, "css"),
               nt.id,
               "css"
             )
           } : void 0, yt = {
-            mode: _,
+            mode: U,
             xRange: Tt,
             yRange: kt,
             completed: !1,
-            keys: E
+            keys: k
           };
-          l.current = yt, v.sync_spanselect.dispatchEvent(
-            a,
+          u.current = yt, T.sync_spanselect.dispatchEvent(
+            l,
             yt
           );
         }
       );
-    }, x = (S) => {
-      h.current(S, (w, k, C) => {
-        if (Object.values(C).some((M) => M)) {
-          S.preventDefault();
-          const M = Math.abs(S.deltaY) > Math.abs(S.deltaX) ? S.deltaY : S.deltaX;
-          v.sync_pressandwheel.dispatchEvent(a, {
-            positions: w,
-            keys: C,
-            deltaX: S.deltaX,
-            deltaY: S.deltaY,
-            deltaAbs: M
+    }, x = (g) => {
+      h.current(g, (S, w, b) => {
+        if (Object.values(b).some((C) => C)) {
+          g.preventDefault();
+          const C = Math.abs(g.deltaY) > Math.abs(g.deltaX) ? g.deltaY : g.deltaX;
+          T.sync_pressandwheel.dispatchEvent(l, {
+            positions: S,
+            keys: b,
+            deltaX: g.deltaX,
+            deltaY: g.deltaY,
+            deltaAbs: C
           });
         }
       });
     };
-    document.addEventListener("mouseup", r), document.addEventListener("keydown", m), document.addEventListener("keyup", m), document.addEventListener("mousemove", y);
-    const g = c.current;
-    return g?.addEventListener("wheel", x, {
+    document.addEventListener("mouseup", i), document.addEventListener("keydown", m), document.addEventListener("keyup", m), document.addEventListener("mousemove", y);
+    const v = c.current;
+    return v?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", r), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", y), g?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", i), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", y), v?.removeEventListener("wheel", x);
     };
-  }, [o, a, h]), T("sync_dblclick", a, (r) => {
-    const m = F(
-      r.positions,
+  }, [o, l, h]), M("sync_dblclick", l, (i) => {
+    const m = Y(
+      i.positions,
       o.current
     );
-    m && v.dblclick.dispatchEvent(i, {
+    m && T.dblclick.dispatchEvent(a, {
       frame: o.current,
       pointer: m,
-      keys: r.keys
+      keys: i.keys
     });
-  }), T("sync_click", a, (r) => {
-    const m = F(
-      r.positions,
+  }), M("sync_click", l, (i) => {
+    const m = Y(
+      i.positions,
       o.current
     );
-    m && v.click.dispatchEvent(i, {
+    m && T.click.dispatchEvent(a, {
       frame: o.current,
       pointer: m,
-      keys: r.keys
+      keys: i.keys
     });
-  }), T("sync_move", a, (r) => {
-    const m = r.positions ? F(
-      r.positions,
+  }), M("sync_move", l, (i) => {
+    const m = i.positions ? Y(
+      i.positions,
       o.current
     ) : null;
-    d.current = r, v.move.dispatchEvent(i, {
+    r.current = i, T.move.dispatchEvent(a, {
       frame: o.current,
       pointer: m ?? null,
-      keys: r.keys
+      keys: i.keys
     });
-  }), T("sync_mousedown", a, (r) => {
-    const m = F(
-      r.positions,
+  }), M("sync_mousedown", l, (i) => {
+    const m = Y(
+      i.positions,
       o.current
     );
-    m && v.mousedown.dispatchEvent(i, {
+    m && T.mousedown.dispatchEvent(a, {
       frame: o.current,
       pointer: m,
-      keys: r.keys
+      keys: i.keys
     });
-  }), T("sync_mouseup", a, (r) => {
-    const m = F(
-      r.positions,
+  }), M("sync_mouseup", l, (i) => {
+    const m = Y(
+      i.positions,
       o.current
     );
-    m && v.mouseup.dispatchEvent(i, {
+    m && T.mouseup.dispatchEvent(a, {
       frame: o.current,
       pointer: m,
-      keys: r.keys
+      keys: i.keys
     });
-  }), T(
+  }), M(
     "sync_pressandwheel",
-    a,
-    (r) => {
-      const m = F(
-        r.positions,
+    l,
+    (i) => {
+      const m = Y(
+        i.positions,
         o.current
       );
-      m && v.pressandwheel.dispatchEvent(i, {
+      m && T.pressandwheel.dispatchEvent(a, {
         frame: o.current,
         pointer: m,
-        keys: r.keys,
-        deltaX: r.deltaX,
-        deltaY: r.deltaY,
-        deltaAbs: r.deltaAbs
+        keys: i.keys,
+        deltaX: i.deltaX,
+        deltaY: i.deltaY,
+        deltaAbs: i.deltaAbs
       });
     }
-  ), T("sync_spanselect", a, (r) => {
+  ), M("sync_spanselect", l, (i) => {
     const m = xt(
       "x",
-      r.xRange,
+      i.xRange,
       o.current
     ), y = xt(
       "y",
-      r.yRange,
+      i.yRange,
       o.current
-    ), x = m.scaled, g = y.scaled;
-    r.completed && (u.current = null), v.spanselect.dispatchEvent(i, {
-      mode: r.mode,
+    ), x = m.scaled, v = y.scaled;
+    i.completed && (d.current = null), T.spanselect.dispatchEvent(a, {
+      mode: i.mode,
       frame: o.current,
       xRanges: x,
-      yRanges: g,
-      completed: r.completed,
+      yRanges: v,
+      completed: i.completed,
       x: { fromCSS: m.fromCSS, toCSS: m.toCSS },
       y: { fromCSS: y.fromCSS, toCSS: y.toCSS },
-      keys: r.keys
+      keys: i.keys
     });
-  }), /* @__PURE__ */ L(
+  }), /* @__PURE__ */ X(
     "div",
     {
       ref: c,
@@ -812,66 +868,66 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
         zIndex: 25,
         ...s
       },
-      onClick: (r) => {
-        f(r, (m, y, x) => {
-          v.sync_click.dispatchEvent(a, {
+      onClick: (i) => {
+        f(i, (m, y, x) => {
+          T.sync_click.dispatchEvent(l, {
             positions: m,
             keys: x
           });
         });
       },
-      onMouseLeave: (r) => {
-        f(r, (m, y, x) => {
-          v.sync_move.dispatchEvent(a, {
+      onMouseLeave: (i) => {
+        f(i, (m, y, x) => {
+          T.sync_move.dispatchEvent(l, {
             positions: null,
             keys: x
           });
         });
       },
-      onMouseMove: (r) => {
-        f(r, (m, y, x) => {
-          v.sync_move.dispatchEvent(a, {
+      onMouseMove: (i) => {
+        f(i, (m, y, x) => {
+          T.sync_move.dispatchEvent(l, {
             positions: m,
             keys: x
           });
         });
       },
-      onMouseDown: (r) => {
-        f(r, (m, { cssX: y, cssY: x }, g) => {
-          v.sync_mousedown.dispatchEvent(a, {
+      onMouseDown: (i) => {
+        f(i, (m, { cssX: y, cssY: x }, v) => {
+          T.sync_mousedown.dispatchEvent(l, {
             positions: m,
-            keys: g
-          }), l.current = null, u.current = {
+            keys: v
+          }), u.current = null, d.current = {
             xRangeCss: { start: y, end: y },
             yRangeCss: { start: x, end: x }
           };
         });
       },
-      onMouseUp: (r) => {
-        f(r, (m, y, x) => {
-          v.sync_mouseup.dispatchEvent(a, {
+      onMouseUp: (i) => {
+        f(i, (m, y, x) => {
+          T.sync_mouseup.dispatchEvent(l, {
             positions: m,
             keys: x
           });
-          const g = l.current;
-          l.current = null;
-          const S = u.current;
-          if (u.current = null, S && g) {
-            const w = {
-              ...g,
+          const v = u.current;
+          u.current = null;
+          const g = d.current;
+          if (d.current = null, g && v) {
+            const S = {
+              ...v,
               keys: x,
               completed: !0
             };
-            v.sync_spanselect.dispatchEvent(
-              a,
-              w
+            T.sync_spanselect.dispatchEvent(
+              l,
+              S
             );
           }
         });
       },
-      onDoubleClick: (r) => {
-        f(r, (m, y, x) => {
-          v.sync_dblclick.dispatchEvent(a, {
+      onDoubleClick: (i) => {
+        f(i, (m, y, x) => {
+          T.sync_dblclick.dispatchEvent(l, {
             positions: m,
             keys: x
           });
@@ -879,134 +935,134 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
       }
     }
   );
-}, xe = ({ data: t, renderTooltip: s, xScaleId: e }) => {
+}, ve = ({ data: t, renderTooltip: s, xScaleId: e }) => {
   const [c, n] = N(null);
-  ft("move", (i) => {
-    n(i);
+  mt("move", (a) => {
+    n(a);
   });
-  const o = gt(() => {
+  const o = St(() => {
     if (!c)
       return null;
-    const { frame: i, pointer: a } = c, u = a?.scaled[e];
-    if (u === void 0)
+    const { frame: a, pointer: l } = c, d = l?.scaled[e];
+    if (d === void 0)
       return null;
-    const l = [];
-    let d = u;
+    const u = [];
+    let r = d;
     for (const p of t) {
       let f = null, h = 1 / 0;
       for (const [m, y] of p.points.entries()) {
-        if (!rt(i, y.x, e) || !rt(i, y.y, p.yScaleId))
+        if (!it(a, y.x, e) || !it(a, y.y, p.yScaleId))
           continue;
-        const x = Math.abs(y.x - u);
+        const x = Math.abs(y.x - d);
         x < h && (h = x, f = m);
       }
-      const r = p.points[f ?? -1];
-      if (!r || ut(i, h, e, "css") > 30) {
-        l.push({ seriesId: p.seriesId, y: null });
+      const i = p.points[f ?? -1];
+      if (!i || ut(a, h, e, "css") > 30) {
+        u.push({ seriesId: p.seriesId, y: null });
         continue;
       }
-      d = r.x, l.push({
+      r = i.x, u.push({
         seriesId: p.seriesId,
-        y: r.y
+        y: i.y
       });
     }
     return {
-      frame: i,
-      x: d,
-      points: l
+      frame: a,
+      x: r,
+      points: u
     };
   }, [t, c, e]);
   return s(o);
-}, Se = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: c }) => {
+}, we = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: c }) => {
   const [n, o] = N(null);
-  if (ft("move", (d) => {
-    o(d);
+  if (mt("move", (r) => {
+    o(r);
   }), !n)
     return null;
-  const { frame: i, pointer: a } = n, u = z(i, a?.cssX ?? 0, "css"), l = Y(i, a?.cssY ?? 0, "css");
+  const { frame: a, pointer: l } = n, d = O(a, l?.cssX ?? 0, "css"), u = $(a, l?.cssY ?? 0, "css");
   return /* @__PURE__ */ at(Et, { children: [
-    /* @__PURE__ */ L(
+    /* @__PURE__ */ X(
       "div",
       {
-        "data-show": !!a,
+        "data-show": !!l,
         className: s?.(n),
         style: {
           position: "absolute",
           left: 0,
-          top: i.chartAreaCSS.y,
-          height: i.chartAreaCSS.height,
+          top: a.chartAreaCSS.y,
+          height: a.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
-          opacity: a ? 1 : 0,
-          transform: `translateX(${u}px)`,
+          opacity: l ? 1 : 0,
+          transform: `translateX(${d}px)`,
           ...t?.(n)
         }
       }
     ),
-    /* @__PURE__ */ L(
+    /* @__PURE__ */ X(
       "div",
       {
         className: c?.(n),
-        "data-show": !!a,
+        "data-show": !!l,
         style: {
           position: "absolute",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: i.chartAreaCSS.x,
-          width: i.chartAreaCSS.width,
+          left: a.chartAreaCSS.x,
+          width: a.chartAreaCSS.width,
           pointerEvents: "none",
-          opacity: a ? 1 : 0,
-          transform: `translateY(${l}px)`,
+          opacity: l ? 1 : 0,
+          transform: `translateY(${u}px)`,
           ...e?.(n)
         }
       }
     )
   ] });
-}, ge = ({ makeClassName: t, makeStyle: s }) => {
+}, Ce = ({ makeClassName: t, makeStyle: s }) => {
   const [e, c] = N(null);
-  if (ft("spanselect", (f) => {
+  if (mt("spanselect", (f) => {
     c(f.mode === "none" || f.completed ? null : f);
   }), !e)
     return null;
-  const n = z(
+  const n = O(
     e.frame,
     e.x.fromCSS,
     "css"
-  ), o = z(
+  ), o = O(
     e.frame,
     e.x.toCSS,
     "css"
-  ), i = Y(
+  ), a = $(
     e.frame,
     e.y.fromCSS,
     "css"
-  ), a = Y(
+  ), l = $(
     e.frame,
     e.y.toCSS,
     "css"
-  ), u = Math.min(n, o), l = Math.min(i, a), d = Math.abs(o - n), p = Math.abs(a - i);
-  return /* @__PURE__ */ L(
+  ), d = Math.min(n, o), u = Math.min(a, l), r = Math.abs(o - n), p = Math.abs(l - a);
+  return /* @__PURE__ */ X(
     "div",
     {
       className: t?.(e),
       style: {
         position: "absolute",
         backgroundColor: "#0000ff22",
-        left: `${u}px`,
-        top: `${l}px`,
-        width: `${d}px`,
+        left: `${d}px`,
+        top: `${u}px`,
+        width: `${r}px`,
         height: `${p}px`,
         pointerEvents: "none",
         ...s?.(e)
       }
     }
   );
-}, we = ({ style: t, children: s, scaleId: e, ...c }) => {
+}, be = ({ style: t, children: s, scaleId: e, ...c }) => {
   const n = ht((o) => o.getScale(e)?.axis);
-  return n ? /* @__PURE__ */ L(
+  return n ? /* @__PURE__ */ X(
     "div",
     {
       style: {
@@ -1022,27 +1078,27 @@ const le = At(({ configuration: t, children: s, style: e, className: c }, n) =>
       children: s
     }
   ) : null;
-}, vt = 60, Vt = 30, Ct = "UTC", Ht = "en-GB", ve = ({
+}, wt = 60, Vt = 30, Ct = "UTC", jt = "en-GB", Te = ({
   space: t,
   formatter: s
 } = {}) => (e, c) => {
-  const { min: n, max: o } = e, i = [], a = window.devicePixelRatio || 1, u = (t ?? (e.origin === "x" ? vt : Vt)) * a, l = Lt(
+  const { min: n, max: o } = e, a = [], l = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? wt : Vt)) * l, u = Lt(
     c,
-    u,
+    d,
     e.id,
     "canvas"
-  ), d = H.find((f) => f > l) ?? 1;
-  let p = n % d < Number.EPSILON ? n : n + d - n % d;
+  ), r = H.find((f) => f > u) ?? 1;
+  let p = n % r < Number.EPSILON ? n : n + r - n % r;
   for (; p <= o; )
-    i.push(p), p += d;
-  return (s ?? jt)(i);
-}, jt = (t) => {
+    a.push(p), p += r;
+  return (s ?? Ht)(a);
+}, Ht = (t) => {
   const s = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
   return t.map((e) => ({ value: e, label: e.toFixed(s) }));
 }, H = [];
 for (let t = -12; t <= 12; t++)
   H.push(1 * 10 ** t), H.push(2 * 10 ** t), H.push(5 * 10 ** t);
-const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Zt = 30 * tt, Gt = 365 * tt, Jt = [
+const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Gt = 30 * tt, Zt = 365 * tt, Jt = [
   // second divisors
   [1, "milliseconds"],
   [2, "milliseconds"],
@@ -1094,7 +1150,7 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Zt = 30 * t
   [25, "years"],
   [50, "years"],
   [100, "years"]
-], j = (t) => {
+], W = (t) => {
   const [s, e] = t;
   switch (e) {
     case "milliseconds":
@@ -1108,9 +1164,9 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Zt = 30 * t
     case "days":
       return s * tt;
     case "months":
-      return s * Zt;
-    case "years":
       return s * Gt;
+    case "years":
+      return s * Zt;
   }
 }, qt = (t, s) => {
   const e = new Date(t);
@@ -1127,10 +1183,10 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Zt = 30 * t
 }, se = (t, s) => {
   const e = new Date(t);
   return e.setUTCDate(e.getUTCDate() + s), e.getTime();
-}, St = (t, s) => {
+}, gt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
-}, X = (t, s) => {
+}, I = (t, s) => {
   const [e, c] = s;
   switch (c) {
     case "milliseconds":
@@ -1144,20 +1200,20 @@ const Wt = 1, bt = 1e3 * Wt, pt = 60 * bt, q = 60 * pt, tt = 24 * q, Zt = 30 * t
     case "days":
       return se(t, e);
     case "months":
-      return St(t, e);
+      return gt(t, e);
     case "years":
-      return St(t, e * 12);
+      return gt(t, e * 12);
   }
 };
-function W(t, s) {
+function G(t, s) {
   const e = new Date(t), c = new Date(e.toLocaleString("en-US", { timeZone: s })), n = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
   return (c.getTime() - n.getTime()) / (3600 * 1e3);
 }
 const ne = (t, s, e = "UTC") => {
   const [c, n] = s;
   let o = new Date(t);
-  const i = () => {
-    o.setUTCHours(-W(o, e), 0, 0, 0);
+  const a = () => {
+    o.setUTCHours(-G(o, e), 0, 0, 0);
   };
   switch (n) {
     case "milliseconds":
@@ -1189,20 +1245,20 @@ const ne = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      n === "months" ? o.setUTCDate(1) : n === "years" && o.setUTCMonth(0, 1), i(), o.getTime() < t && (o = new Date(X(o, [1, n])));
+      n === "months" ? o.setUTCDate(1) : n === "years" && o.setUTCMonth(0, 1), a(), o.getTime() < t && (o = new Date(I(o, [1, n])));
       break;
   }
   return o.getTime();
-}, Ce = ({
+}, ke = ({
   timeZone: t = Ct,
-  space: s = vt,
+  space: s = wt,
   formatter: e,
   locale: c,
   showTimezone: n
-} = {}) => (o, i) => {
-  const { min: a, max: u } = o, l = Math.floor(i.chartAreaCanvasPX.width / s) + 1, p = (u - a) / l, [f, h] = Jt.find(
-    (g) => j(g) >= p
-  ) ?? [1, "milliseconds"], r = ne(a, [f, h], t), m = W(r, t), y = [r];
+} = {}) => (o, a) => {
+  const { min: l, max: d } = o, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - l) / u, [f, h] = Jt.find(
+    (v) => W(v) >= p
+  ) ?? [1, "milliseconds"], i = ne(l, [f, h], t), m = G(i, t), y = [i];
   let x;
   for (; ; ) {
     switch (h) {
@@ -1210,37 +1266,37 @@ const ne = (t, s, e = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        x = X(r, [y.length * f, h]);
+        x = I(i, [y.length * f, h]);
         break;
       }
       case "days": {
-        const g = X(r, [
+        const v = I(i, [
           y.length * f,
           h
         ]);
-        x = X(g, [
-          m - W(g, t),
+        x = I(v, [
+          m - G(v, t),
           "hours"
         ]);
         break;
       }
       case "months":
       case "years": {
-        const g = X(
-          X(X(r, [m, "hours"]), [
+        const v = I(
+          I(I(i, [m, "hours"]), [
             y.length * f,
             h
           ]),
           [-m, "hours"]
         );
-        x = X(g, [
-          m - W(g, t),
+        x = I(v, [
+          m - G(v, t),
           "hours"
         ]);
         break;
       }
     }
-    if (x > u)
+    if (x > d)
       break;
     y.push(x);
   }
@@ -1249,9 +1305,9 @@ const ne = (t, s, e = "UTC") => {
     showTimezone: n,
     timeZone: t
   }))(y);
-}, I = (t, s, e) => t.find((c) => c.type === e)?.value !== s.find((c) => c.type === e)?.value, oe = ({
+}, K = (t, s, e) => t.find((c) => c.type === e)?.value !== s.find((c) => c.type === e)?.value, oe = ({
   timeZone: t = Ct,
-  locale: s = Ht,
+  locale: s = jt,
   showTimezone: e = !0
 }) => {
   const c = new Intl.DateTimeFormat(s, {
@@ -1267,30 +1323,30 @@ const ne = (t, s, e = "UTC") => {
     timeZone: t
   });
   return (n) => {
-    const o = n[1] - n[0], i = o < j([1, "days"]), a = o < j([1, "minutes"]), u = o < j([1, "seconds"]);
-    return n.map((l) => ({ value: l, label: c.formatToParts(new Date(l)) })).map((l, d, p) => {
-      const f = p[d - 1], h = d === 0 || I(l.label, f.label, "year"), r = d === 0 || I(l.label, f.label, "day"), m = d === 0 || I(l.label, f.label, "month"), y = d === 0 || I(l.label, f.label, "hour"), x = d === 0 || I(l.label, f.label, "timeZoneName"), g = d === 0 || I(l.label, f.label, "minute"), S = d === 0 || I(l.label, f.label, "second"), w = d === 0 || I(l.label, f.label, "fractionalSecond"), k = [];
-      if (i && (y || g || x || S || w)) {
-        const C = l.label.find((P) => P.type === "hour")?.value, E = l.label.find((P) => P.type === "minute")?.value, M = l.label.find((P) => P.type === "timeZoneName")?.value;
-        let A = "";
-        if (a) {
-          const P = l.label.find((K) => K.type === "second")?.value, $ = l.label.find(
-            (K) => K.type === "fractionalSecond"
+    const o = n[1] - n[0], a = o < W([1, "days"]), l = o < W([1, "minutes"]), d = o < W([1, "seconds"]);
+    return n.map((u) => ({ value: u, label: c.formatToParts(new Date(u)) })).map((u, r, p) => {
+      const f = p[r - 1], h = r === 0 || K(u.label, f.label, "year"), i = r === 0 || K(u.label, f.label, "day"), m = r === 0 || K(u.label, f.label, "month"), y = r === 0 || K(u.label, f.label, "hour"), x = r === 0 || K(u.label, f.label, "timeZoneName"), v = r === 0 || K(u.label, f.label, "minute"), g = r === 0 || K(u.label, f.label, "second"), S = r === 0 || K(u.label, f.label, "fractionalSecond"), w = [];
+      if (a && (y || v || x || g || S)) {
+        const b = u.label.find((A) => A.type === "hour")?.value, k = u.label.find((A) => A.type === "minute")?.value, C = u.label.find((A) => A.type === "timeZoneName")?.value;
+        let _ = "";
+        if (l) {
+          const A = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
+            (F) => F.type === "fractionalSecond"
           )?.value;
-          A = `:${P}` + (u ? `.${$}` : "");
+          _ = `:${A}` + (d ? `.${B}` : "");
         }
-        k.push(
-          `${C}:${E}${A}` + (e && x ? ` ${M}` : "")
+        w.push(
+          `${b}:${k}${_}` + (e && x ? ` ${C}` : "")
         );
       }
-      return (r || m) && k.push(
+      return (i || m) && w.push(
         [
-          l.label.find((C) => C.type === "month")?.value,
-          r && l.label.find((C) => C.type === "day")?.value
+          u.label.find((b) => b.type === "month")?.value,
+          i && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), h && k.push(l.label.find((C) => C.type === "year")?.value), {
-        value: l.value,
-        label: k.filter((C) => C).join(`
+      ), h && w.push(u.label.find((b) => b.type === "year")?.value), {
+        value: u.value,
+        label: w.filter((b) => b).join(`
 `)
       };
     });
@@ -1298,33 +1354,36 @@ const ne = (t, s, e = "UTC") => {
 };
 export {
   me as AreaPlot,
-  we as AxisOverlay,
-  he as BarPlot,
-  le as CanPlot,
-  ye as ChartAreaInteractions,
-  Se as Crosshair,
-  ue as LinePlot,
-  de as ScatterPlot,
-  ge as SelectBox,
-  fe as SparklinePlot,
-  xe as TooltipsX,
-  O as applyStyles,
-  z as clampXPosToChartArea,
-  Y as clampYPosToChartArea,
-  jt as defaultNumericalTicksFormatter,
-  D as getScale,
+  be as AxisOverlay,
+  fe as BarPlot,
+  ue as CanPlot,
+  Se as ChartAreaInteractions,
+  we as Crosshair,
+  de as LinePlot,
+  he as ScatterPlot,
+  Ce as SelectBox,
+  pe as SparklinePlot,
+  ve as TooltipsX,
+  xe as XTicks,
+  ge as YTicks,
+  R as applyStyles,
+  le as clampUnfit,
+  O as clampXPosToChartArea,
+  $ as clampYPosToChartArea,
+  Ht as defaultNumericalTicksFormatter,
+  P as getScale,
   Q as isXScale,
   ae as isYScale,
-  ve as makeLinearTicks,
+  Te as makeLinearTicks,
   oe as makeTimeTickFormat,
-  Ce as makeTimeTicks,
-  U as posToVal,
+  ke as makeTimeTicks,
+  D as posToVal,
   Lt as pxToValDistance,
-  V as useDrawEffect,
+  z as useDrawEffect,
   ht as useFrameState,
-  pe as usePositioned,
-  rt as valFits,
-  B as valToPos,
+  ye as useXPositioned,
+  it as valFits,
+  j as valToPos,
   ut as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map