@canplot/react 0.1.11 → 0.1.13

package/dist/canplot.mjs

@@ -1,15 +1,15 @@
 import { jsxs as lt, jsx as _, Fragment as _t } from "react/jsx-runtime";
-import Z, { createContext as vt, useContext as J, useRef as L, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
+import Z, { createContext as vt, useContext as J, useRef as U, useLayoutEffect as N, useEffect as wt, version as Rt, forwardRef as At, useMemo as Q, useState as V, useId as Ut } from "react";
 import { createStore as bt, useStore as St } from "zustand";
 const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e) => s + (e ?? 0), 0), ue = (t, s) => {
   let e = 0;
   for (let o = 0; o < t.length; o++)
     Math.abs(t[o] - s) < Math.abs(t[e] - s) && (e = o);
   return e;
-}, Lt = (t, s, e, o) => {
-  const { min: n, max: i, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (i - n);
+}, Dt = (t, s, e, o) => {
+  const { min: n, max: c, origin: a } = L(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = (a === "x" ? r.width : r.height) / (c - n);
   return s / d;
-}, I = (t, s) => {
+}, L = (t, s) => {
   const e = t.scales.find((o) => o.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
@@ -18,11 +18,11 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
   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, o) => {
-  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: i, max: a, origin: r } = I(t, e), d = (r === "x" ? n.width : n.height) / (a - i);
+  const n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: c, max: a, origin: r } = L(t, e), d = (r === "x" ? n.width : n.height) / (a - c);
   return s * d;
 }, H = (t, s, e, o) => {
-  const { min: n, origin: i } = I(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
-  return i === "x" ? j(
+  const { min: n, origin: c } = L(t, e), a = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - n, e, o);
+  return c === "x" ? j(
     a.x + r,
     a.x - 10 * a.width,
     a.x + 11 * a.width
@@ -32,21 +32,21 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     a.y + 11 * a.height
   );
 }, de = (t, s, e) => {
-  const { min: o, max: n } = I(t, e);
+  const { min: o, max: n } = L(t, e);
   return j(s, o, n);
-}, O = (t, s, e) => {
+}, Y = (t, s, e) => {
   const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return j(s, o.x, o.x + o.width);
-}, $ = (t, s, e) => {
+}, O = (t, s, e) => {
   const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
   return j(s, o.y, o.y + o.height);
 }, rt = (t, s, e) => {
-  const { min: o, max: n } = I(t, e);
+  const { min: o, max: n } = L(t, e);
   return s >= o && s <= n;
 }, D = (t, s, e, o) => {
-  const { min: n, max: i, origin: a } = I(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
-  return n + d * (i - n);
-}, Dt = (t) => {
+  const { min: n, max: c, origin: a } = L(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, d = a === "x" ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
+  return n + d * (c - n);
+}, Lt = (t) => {
   const { ctx: s, scales: e } = t;
   for (const o of e) {
     if (!o.axis) continue;
@@ -61,12 +61,12 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
       if (o.axis.position === "bottom")
         s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x + n.width, n.y), s.stroke();
       else if (o.axis.position === "top") {
-        const i = n.y + n.height;
-        s.beginPath(), s.moveTo(n.x, i), s.lineTo(n.x + n.width, i), s.stroke();
+        const c = n.y + n.height;
+        s.beginPath(), s.moveTo(n.x, c), s.lineTo(n.x + n.width, c), s.stroke();
       }
     } else if (o.axis.position === "left") {
-      const i = n.x + n.width;
-      s.beginPath(), s.moveTo(i, n.y), s.lineTo(i, n.y + n.height), s.stroke();
+      const c = n.x + n.width;
+      s.beginPath(), s.moveTo(c, n.y), s.lineTo(c, n.y + n.height), s.stroke();
     } else o.axis.position === "right" && (s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x, n.y + n.height), s.stroke());
     s.restore();
   }
@@ -80,31 +80,31 @@ const j = (t, s, e) => Math.min(Math.max(t, s), e), le = (t) => t.reduce((s, e)
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
-    clampYPosToChartArea: (o, n) => $(e(), o, n ?? "canvas"),
-    valToPos: (o, n, i) => H(e(), o, n, i ?? "canvas"),
-    valToPxDistance: (o, n, i) => ut(
+    clampXPosToChartArea: (o, n) => Y(e(), o, n ?? "canvas"),
+    clampYPosToChartArea: (o, n) => O(e(), o, n ?? "canvas"),
+    valToPos: (o, n, c) => H(e(), o, n, c ?? "canvas"),
+    valToPxDistance: (o, n, c) => ut(
       e(),
       o,
       n,
-      i ?? "canvas"
+      c ?? "canvas"
     ),
     valFits: (o, n) => rt(e(), o, n),
-    getScale: (o) => I(e(), o)
+    getScale: (o) => L(e(), o)
   };
 }), Xt = () => bt((t) => ({
   notify: () => {
     t((s) => ({ version: s.version + 1 }));
   },
   version: 0
-})), dt = vt(null), Ct = vt(null), Y = (t, s) => {
+})), dt = vt(null), Ct = vt(null), z = (t, s) => {
   const e = J(dt), o = J(Ct);
   if (!e || !o)
     throw new Error("useFrame must be used within a CanPlot component");
-  const n = L(t);
+  const n = U(t);
   n.current = t, N(() => {
-    n.current(e.getState()), e.subscribe((i) => {
-      i._frame && n.current(i);
+    n.current(e.getState()), e.subscribe((c) => {
+      c._frame && n.current(c);
     });
   }, [e]), wt(() => {
     o.getState().notify();
@@ -127,8 +127,8 @@ function Ft(t) {
   return (s) => {
     const e = [];
     for (const o of t) {
-      const n = at(o, s), i = typeof n == "function";
-      e.push(i ? n : () => at(o, null));
+      const n = at(o, s), c = typeof n == "function";
+      e.push(c ? n : () => at(o, null));
     }
     return () => {
       for (const o of e) o();
@@ -142,19 +142,19 @@ function at(t, s) {
 }
 var zt = parseInt(Rt.split(".")[0], 10) >= 19 ? Ft : Kt;
 const he = At(({ configuration: t, children: s, style: e, className: o }, n) => {
-  const i = L(null), a = L(null), r = Ot(a), d = Q(It, []), u = Q(Xt, []);
+  const c = U(null), a = U(null), r = Ot(a), d = Q(It, []), u = Q(Xt, []);
   N(() => {
     d.setState({
-      _frame: $t(t, r, i.current)
+      _frame: Bt(t, r, c.current)
     });
-  }, [t, r, i, d]), N(() => d.subscribe((p) => {
-    p._frame && Bt(p._frame);
+  }, [t, r, c, d]), N(() => d.subscribe((p) => {
+    p._frame && $t(p._frame);
   }), [d]), N(() => {
     let p = !1;
     return u.subscribe(() => {
       p || (p = !0, window.requestAnimationFrame(() => {
-        p = !1, d.setState((f) => ({
-          _frame: f._frame ? { ...f._frame } : null
+        p = !1, d.setState((m) => ({
+          _frame: m._frame ? { ...m._frame } : null
         }));
       }));
     });
@@ -175,7 +175,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         /* @__PURE__ */ _(
           "canvas",
           {
-            ref: i,
+            ref: c,
             width: r.width * l,
             height: r.height * l,
             style: {
@@ -202,8 +202,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     width: 0,
     height: 0
   }), [o] = V(() => new ResizeObserver((n) => {
-    for (const i of n) {
-      const a = Math.round(i.contentRect.width), r = Math.round(i.contentRect.height);
+    for (const c of n) {
+      const a = Math.round(c.contentRect.width), r = Math.round(c.contentRect.height);
       e(
         (d) => d.width !== a || d.height !== r ? { ...d, width: a, height: r } : d
       );
@@ -211,57 +211,57 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   }));
   return N(() => {
     if (!t.current) return;
-    const n = t.current.clientWidth, i = t.current.clientHeight;
+    const n = t.current.clientWidth, c = t.current.clientHeight;
     return e(
-      (a) => a.width !== n || a.height !== i ? { ...a, width: n, height: i } : a
+      (a) => a.width !== n || a.height !== c ? { ...a, width: n, height: c } : a
     ), o.observe(t.current, { box: "border-box" }), () => o.disconnect();
   }, [o, t]), s;
-}, $t = (t, s, e) => {
+}, Bt = (t, s, e) => {
   const o = e?.getContext("2d");
   if (!o) return null;
   const n = window.devicePixelRatio || 1;
   if (s.width === 0 || s.height === 0)
     return null;
-  const i = {
+  const c = {
     x: t.padding.left,
     y: t.padding.top,
     width: s.width - t.padding.left - t.padding.right,
     height: s.height - t.padding.top - t.padding.bottom
   };
-  for (const m of t.scales)
-    m.axis && (m.origin === "x" ? (m.axis.position === "bottom" || m.axis.position === "top") && (i.height = Math.max(
+  for (const f of t.scales)
+    f.axis && (f.origin === "x" ? (f.axis.position === "bottom" || f.axis.position === "top") && (c.height = Math.max(
       0,
-      i.height - m.axis.size
-    ), m.axis.position === "top" && (i.y += m.axis.size)) : (m.axis.position === "left" || m.axis.position === "right") && (i.width = Math.max(0, i.width - m.axis.size), m.axis.position === "left" && (i.x += m.axis.size)));
+      c.height - f.axis.size
+    ), f.axis.position === "top" && (c.y += f.axis.size)) : (f.axis.position === "left" || f.axis.position === "right") && (c.width = Math.max(0, c.width - f.axis.size), f.axis.position === "left" && (c.x += f.axis.size)));
   const a = {
-    x: i.x * n,
-    y: i.y * n,
-    width: i.width * n,
-    height: i.height * n
+    x: c.x * n,
+    y: c.y * n,
+    width: c.width * n,
+    height: c.height * n
   }, r = [];
   let d = t.padding.left * n, u = o.canvas.width - t.padding.right * n, l = o.canvas.height - t.padding.bottom * n, p = t.padding.top * n;
-  for (const m of t.scales) {
-    if (!m.axis) {
-      r.push({ ...m, axis: null });
+  for (const f of t.scales) {
+    if (!f.axis) {
+      r.push({ ...f, axis: null });
       continue;
     }
-    let c;
-    if (m.origin === "x")
-      switch (m.axis.position) {
+    let i;
+    if (f.origin === "x")
+      switch (f.axis.position) {
         case "bottom":
-          l -= m.axis.size * n, c = {
-            x: i.x,
+          l -= f.axis.size * n, i = {
+            x: c.x,
             y: l / n,
-            width: i.width,
-            height: m.axis.size
+            width: c.width,
+            height: f.axis.size
           };
           break;
         case "top":
-          p += m.axis.size * n, c = {
-            x: i.x,
-            y: p / n - m.axis.size,
-            width: i.width,
-            height: m.axis.size
+          p += f.axis.size * n, i = {
+            x: c.x,
+            y: p / n - f.axis.size,
+            width: c.width,
+            height: f.axis.size
           };
           break;
         case "left":
@@ -269,21 +269,21 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           throw new Error("Invalid axis position for x origin");
       }
     else
-      switch (m.axis.position) {
+      switch (f.axis.position) {
         case "left":
-          d += m.axis.size * n, c = {
-            x: d / n - m.axis.size,
-            y: i.y,
-            width: m.axis.size,
-            height: i.height
+          d += f.axis.size * n, i = {
+            x: d / n - f.axis.size,
+            y: c.y,
+            width: f.axis.size,
+            height: c.height
           };
           break;
         case "right":
-          u -= m.axis.size * n, c = {
+          u -= f.axis.size * n, i = {
             x: u / n,
-            y: i.y,
-            width: m.axis.size,
-            height: i.height
+            y: c.y,
+            width: f.axis.size,
+            height: c.height
           };
           break;
         case "top":
@@ -291,16 +291,16 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           throw new Error("Invalid axis position for y origin");
       }
     const h = {
-      x: c.x * n,
-      y: c.y * n,
-      width: c.width * n,
-      height: c.height * n
+      x: i.x * n,
+      y: i.y * n,
+      width: i.width * n,
+      height: i.height * n
     };
     r.push({
-      ...m,
+      ...f,
       axis: {
-        ...m.axis,
-        cssRect: c,
+        ...f.axis,
+        cssRect: i,
         canvasRect: h
       }
     });
@@ -310,24 +310,24 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     dpr: n,
     padding: t.padding,
     scales: r,
-    chartAreaCSS: i,
+    chartAreaCSS: c,
     chartAreaCanvasPX: a
   };
-}, Bt = (t) => {
-  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Dt(t);
-}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(
-  ({ getCtx: n, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: r }) => {
+}, $t = (t) => {
+  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), Lt(t);
+}, fe = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (z(
+  ({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
     const d = n();
     d.save(), d.beginPath(), R(d, o);
     for (const u of t) {
-      const l = i(r(u.x, s)), p = a(r(u.y, e));
+      const l = c(r(u.x, s)), p = a(r(u.y, e));
       d.lineTo(l, p);
     }
     d.stroke(), d.restore();
   },
   [t, s, e, o]
-), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (Y(({ getCtx: i, valToPos: a, valFits: r }) => {
-  const d = i();
+), null), me = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: n }) => (z(({ getCtx: c, valToPos: a, valFits: r }) => {
+  const d = c();
   d.save(), d.beginPath(), R(d, n);
   for (const u of t) {
     if (!r(u.x, s) || !r(u.y, e))
@@ -342,9 +342,9 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   yScaleId: e,
   style: o,
   barWidth: n,
-  xPositionOffset: i,
+  xPositionOffset: c,
   radius: a
-}) => (Y(
+}) => (z(
   ({
     getCtx: r,
     valToPxDistance: d,
@@ -353,28 +353,28 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     clampYPosToChartArea: p
   }) => {
     if (t.length === 0) return;
-    const f = r();
-    f.save(), R(f, o);
-    const m = d(n, s);
-    f.beginPath();
-    for (const c of t) {
-      const y = u(c.x, s) - m / 2 + i * m, x = p(u(0, e)), w = p(u(c.y, e)), g = x - w, v = l(y), T = l(y + m) - v;
-      a ? f.roundRect(
+    const m = r();
+    m.save(), R(m, o);
+    const f = d(n, s);
+    m.beginPath();
+    for (const i of t) {
+      const y = u(i.x, s) - f / 2 + c * f, x = p(u(0, e)), w = p(u(i.y, e)), g = x - w, v = l(y), T = l(y + f) - v;
+      a ? m.roundRect(
         v,
         w,
         T,
         g,
         a
-      ) : f.rect(v, w, T, g);
+      ) : m.rect(v, w, T, g);
     }
-    f.closePath(), f.fill(), o?.strokeStyle && f.stroke(), f.restore();
+    m.closePath(), m.fill(), o?.strokeStyle && m.stroke(), m.restore();
   },
-  [t, s, e, o, n, i, a]
-), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (Y(({ getCtx: n, clampXPosToChartArea: i, clampYPosToChartArea: a, valToPos: r }) => {
+  [t, s, e, o, n, c, a]
+), null), ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (z(({ getCtx: n, clampXPosToChartArea: c, clampYPosToChartArea: a, valToPos: r }) => {
   const d = [];
   for (const l of t) {
-    const p = i(r(l.x, s)), f = a(r(l.y[0], e)), m = a(r(l.y[1], e));
-    d.push({ x: p, y: f }), d.unshift({ x: p, y: m });
+    const p = c(r(l.x, s)), m = a(r(l.y[0], e)), f = a(r(l.y[1], e));
+    d.push({ x: p, y: m }), d.unshift({ x: p, y: f });
   }
   const u = n();
   if (d.length > 0) {
@@ -383,24 +383,24 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       u.lineTo(l.x, l.y);
     u.closePath(), u.fill(), u.restore();
   }
-}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (Y(
-  ({ getCtx: i, clampXPosToChartArea: a, clampYPosToChartArea: r, valToPos: d }) => {
-    const u = [], l = i();
-    for (const c of t) {
-      const h = a(d(c.x, e)), y = r(d(c.y, o));
+}, [t, s, e, o]), null), xe = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: n }) => (z(
+  ({ getCtx: c, clampXPosToChartArea: a, clampYPosToChartArea: r, valToPos: d }) => {
+    const u = [], l = c();
+    for (const i of t) {
+      const h = a(d(i.x, e)), y = r(d(i.y, o));
       u.push({ x: h, y });
     }
-    const p = u.at(0), f = u.at(-1);
-    if (!p || !f)
+    const p = u.at(0), m = u.at(-1);
+    if (!p || !m)
       return;
-    const m = r(d(0, o));
-    l.save(), l.beginPath(), R(l, n), l.moveTo(p.x, m);
-    for (const c of u)
-      l.lineTo(c.x, c.y);
-    if (l.lineTo(f.x, m), l.closePath(), l.fill(), s) {
+    const f = r(d(0, o));
+    l.save(), l.beginPath(), R(l, n), l.moveTo(p.x, f);
+    for (const i of u)
+      l.lineTo(i.x, i.y);
+    if (l.lineTo(m.x, f), l.closePath(), l.fill(), s) {
       l.beginPath(), l.moveTo(p.x, p.y);
-      for (const c of u)
-        l.lineTo(c.x, c.y);
+      for (const i of u)
+        l.lineTo(i.x, i.y);
       l.stroke();
     }
     l.restore();
@@ -411,7 +411,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     clampXPosToChartArea: e,
     clampYPosToChartArea: o,
     getScale: n,
-    valToPos: i,
+    valToPos: c,
     valFits: a
   }) => {
     const r = {};
@@ -420,13 +420,13 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       switch (u.exceeding) {
         case "discard": {
           if (a(u.value, u.scaleId)) {
-            const l = i(u.value, u.scaleId, s);
+            const l = c(u.value, u.scaleId, s);
             r[d] = l;
           }
           break;
         }
         case "clamp": {
-          const l = i(u.value, u.scaleId, s);
+          const l = c(u.value, u.scaleId, s);
           r[d] = n(u.scaleId)?.origin === "x" ? e(l, s) : o(l, s);
           break;
         }
@@ -434,21 +434,21 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
     return r;
   }
-), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: i }) => (Y(
+), ve = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (z(
   ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
     const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "x") return;
-    const f = p.axis, m = f.position === "top" ? f.canvasRect.y + f.canvasRect.height : f.canvasRect.y, c = window.devicePixelRatio || 1, h = m, y = (n ?? 6) * c, x = f.position === "top" ? m - y : m + y, w = (o ?? 12) * c;
+    const m = p.axis, f = m.position === "top" ? m.canvasRect.y + m.canvasRect.height : m.canvasRect.y, i = window.devicePixelRatio || 1, h = f, y = (n ?? 6) * i, x = m.position === "top" ? f - y : f + y, w = (o ?? 12) * i;
     l.save(), l.fontKerning = "auto", R(l, {
       ...s
     }), l.beginPath();
-    const g = Array.isArray(i) ? i : i({ ...p, axis: f }, u());
+    const g = Array.isArray(c) ? c : c({ ...p, axis: m }, u());
     for (const { value: v } of g) {
       const T = r(v, t, "canvas");
       l.moveTo(T, h), l.lineTo(T, x);
     }
     l.stroke(), l.restore(), l.save(), R(l, {
-      textBaseline: f.position === "top" ? "bottom" : "top",
+      textBaseline: m.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...s,
       ...e
@@ -457,24 +457,24 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       const b = r(v, t, "canvas"), C = T.split(`
 `);
       for (let k = 0; k < C.length; k++)
-        l.fillText(C[k], b, x + c * 2 + k * w);
+        l.fillText(C[k], b, x + i * 2 + k * w);
     }
     l.restore();
   },
-  [i, t, s, e]
-), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: i }) => (Y(
+  [c, t, s, e]
+), null), we = ({ scaleId: t, tickStyle: s, labelStyle: e, labelGap: o, tickSize: n, ticks: c }) => (z(
   ({ getCtx: a, valToPos: r, getScale: d, getFrame: u }) => {
     const l = a(), p = d(t);
     if (!p || !p.axis || p.origin !== "y") return;
-    const f = p.axis, m = f.position === "left" ? f.canvasRect.x + f.canvasRect.width : f.canvasRect.x, c = m, h = n ?? 6, y = f.position === "left" ? m - h : m + h, x = o ?? 12, w = Array.isArray(i) ? i : i({ ...p, axis: f }, u());
+    const m = p.axis, f = m.position === "left" ? m.canvasRect.x + m.canvasRect.width : m.canvasRect.x, i = f, h = n ?? 6, y = m.position === "left" ? f - h : f + h, x = o ?? 12, w = Array.isArray(c) ? c : c({ ...p, axis: m }, u());
     l.save(), l.fontKerning = "auto", R(l, { ...s }), l.beginPath();
     for (const { value: g } of w) {
       const v = r(g, t, "canvas");
-      l.moveTo(c, v), l.lineTo(y, v);
+      l.moveTo(i, v), l.lineTo(y, v);
     }
     l.stroke(), l.restore(), l.save(), R(l, {
       textBaseline: "middle",
-      textAlign: f.position === "left" ? "right" : "left",
+      textAlign: m.position === "left" ? "right" : "left",
       ...s,
       ...e
     });
@@ -486,7 +486,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
     l.restore();
   },
-  [i, t, s, e]
+  [c, t, s, e]
 ), null), E = () => {
   const t = [];
   return {
@@ -524,8 +524,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   const o = Z.useRef(e);
   o.current = e, Z.useEffect(() => S[t].addEventListener(
     s,
-    (i, a) => {
-      o.current(a, i);
+    (c, a) => {
+      o.current(a, c);
     }
   ), [s, t, o]);
 }, ft = Z.createContext(""), mt = (t, s) => {
@@ -533,18 +533,18 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   return M(t, e, s);
 }, Nt = (t, s, e, o, n) => {
   if (!s) return;
-  const i = o ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
-  if (!i || !a)
+  const c = o ?? e.scales.find((p) => p.origin === "x")?.id, a = n ?? e.scales.find((p) => p.origin === "y")?.id;
+  if (!c || !a)
     return;
   const r = t.clientX - s.left, d = {
-    scaleId: i,
-    value: D(e, r, i, "css")
+    scaleId: c,
+    value: D(e, r, c, "css")
   }, u = t.clientY - s.top, l = {
     scaleId: a,
     value: D(e, u, a, "css")
   };
   return { pointerSyncPosition: { x: d, y: l }, cssX: r, cssY: u };
-}, z = (t, s) => {
+}, F = (t, s) => {
   const e = t.x ? H(
     s,
     t.x.value,
@@ -561,8 +561,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     cssY: o,
     scaled: Object.fromEntries(
       s.scales.map((n) => {
-        const i = n.origin === "y" ? o : e;
-        return [n.id, D(s, i, n.id, "css")];
+        const c = n.origin === "y" ? o : e;
+        return [n.id, D(s, c, n.id, "css")];
       })
     )
   };
@@ -577,7 +577,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     s.to,
     s.scaleId,
     "css"
-  ), i = e.scales.flatMap(
+  ), c = e.scales.flatMap(
     (a) => {
       if (a.origin !== t)
         return [];
@@ -594,7 +594,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   return {
     fromCSS: o,
     toCSS: n,
-    scaled: i
+    scaled: c
   };
 }, be = ({
   id: t,
@@ -602,33 +602,33 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   onDblClick: e,
   onMouseMove: o,
   onMouseDown: n,
-  onMouseUp: i,
+  onMouseUp: c,
   onDocumentMouseUp: a,
   onSpanSelect: r,
   onContextMenu: d,
   className: u,
   style: l,
   sync: p,
-  children: f
+  children: m
 }) => {
-  const m = Ut(), c = t || m;
-  return M("dblclick", c, (h) => {
+  const f = Ut(), i = t || f;
+  return M("dblclick", i, (h) => {
     e?.(h);
-  }), M("click", c, (h) => {
+  }), M("click", i, (h) => {
     s?.(h);
-  }), M("move", c, (h) => {
+  }), M("move", i, (h) => {
     o?.(h);
-  }), M("mousedown", c, (h) => {
+  }), M("mousedown", i, (h) => {
     n?.(h);
-  }), M("mouseup", c, (h) => {
-    i?.(h);
-  }), M("documentmouseup", c, (h) => {
+  }), M("mouseup", i, (h) => {
+    c?.(h);
+  }), M("documentmouseup", i, (h) => {
     a?.(h);
-  }), M("spanselect", c, (h) => {
+  }), M("spanselect", i, (h) => {
     r?.(h);
-  }), M("contextmenu", c, (h) => {
+  }), M("contextmenu", i, (h) => {
     d?.(h);
-  }), /* @__PURE__ */ lt(ft.Provider, { value: c, children: [
+  }), /* @__PURE__ */ lt(ft.Provider, { value: i, children: [
     /* @__PURE__ */ _(
       Vt,
       {
@@ -637,25 +637,25 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         sync: p
       }
     ),
-    f
+    m
   ] });
 }, Vt = ({ className: t, style: s, sync: e }) => {
-  const o = L(null), n = ht(), i = L(n);
-  i.current = n;
-  const a = J(ft), r = e?.key || a, d = L(null), u = L(null), l = L(null), p = () => {
-    const c = o.current?.parentElement;
-    if (c) {
-      if (c.dataset.canplotroot === void 0)
+  const o = U(null), n = ht(), c = U(n);
+  c.current = n;
+  const a = J(ft), r = e?.key || a, d = U(null), u = U(null), l = U(null), p = () => {
+    const i = o.current?.parentElement;
+    if (i) {
+      if (i.dataset.canplotroot === void 0)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return c.getBoundingClientRect();
+      return i.getBoundingClientRect();
     }
-  }, f = (c, h) => {
+  }, m = (i, h) => {
     const y = Nt(
-      c,
+      i,
       p(),
-      i.current,
+      c.current,
       e?.xViaScaleId,
       e?.yViaScaleId
     );
@@ -663,21 +663,21 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       y.pointerSyncPosition,
       { cssX: y.cssX, cssY: y.cssY },
       {
-        ctrlKey: c.ctrlKey,
-        altKey: c.altKey,
-        shiftKey: c.shiftKey,
-        metaKey: c.metaKey
+        ctrlKey: i.ctrlKey,
+        altKey: i.altKey,
+        shiftKey: i.shiftKey,
+        metaKey: i.metaKey
       }
     );
-  }, m = L(f);
-  return m.current = f, wt(() => {
-    const c = (g) => {
+  }, f = U(m);
+  return f.current = m, wt(() => {
+    const i = (g) => {
       const v = u.current;
       v && S.sync_spanselect.dispatchEvent(r, {
         ...v,
         completed: !0
       }), S.documentmouseup.dispatchEvent(r, {
-        frame: i.current,
+        frame: c.current,
         keys: {
           ctrlKey: g.ctrlKey,
           altKey: g.altKey,
@@ -710,49 +710,49 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         );
       }
     }, y = (g) => {
-      m.current(
+      f.current(
         g,
         (v, { cssX: T, cssY: b }, C) => {
           const k = d.current;
           if (!k || !v.x || !v.y) return;
-          const A = i.current, P = k.xRangeCss.start, B = T, F = k.yRangeCss.start, st = b, nt = I(A, v.x.scaleId), ot = I(A, v.y.scaleId);
+          const A = c.current, P = k.xRangeCss.start, B = T, K = k.yRangeCss.start, st = b, nt = L(A, v.x.scaleId), ot = L(A, v.y.scaleId);
           d.current = {
             xRangeCss: { start: P, end: B },
-            yRangeCss: { start: F, end: st }
+            yRangeCss: { start: K, end: st }
           };
-          let U = "below_threshold";
-          const it = Math.abs(F - st), ct = Math.abs(P - B);
-          it < 10 && ct < 10 ? U = "below_threshold" : it > 30 && ct > 30 ? U = "box" : it > ct ? U = "y" : U = "x";
-          const Mt = U === "x" || U === "box" ? {
+          let $ = "below_threshold";
+          const ct = Math.abs(K - st), it = Math.abs(P - B);
+          ct < 10 && it < 10 ? $ = "below_threshold" : ct > 30 && it > 30 ? $ = "box" : ct > it ? $ = "y" : $ = "x";
+          const Mt = {
             scaleId: nt.id,
             from: D(
               A,
-              O(i.current, P, "css"),
+              Y(c.current, P, "css"),
               nt.id,
               "css"
             ),
             to: D(
               A,
-              O(i.current, B, "css"),
+              Y(c.current, B, "css"),
               nt.id,
               "css"
             )
-          } : void 0, Pt = U === "y" || U === "box" ? {
+          }, Pt = {
             scaleId: ot.id,
             from: D(
               A,
-              $(i.current, F, "css"),
+              O(c.current, K, "css"),
               ot.id,
               "css"
             ),
             to: D(
               A,
-              $(i.current, st, "css"),
+              O(c.current, st, "css"),
               ot.id,
               "css"
             )
-          } : void 0, yt = {
-            mode: U,
+          }, yt = {
+            mode: $,
             xRange: Mt,
             yRange: Pt,
             completed: !1,
@@ -765,7 +765,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         }
       );
     }, x = (g) => {
-      m.current(g, (v, T, b) => {
+      f.current(g, (v, T, b) => {
         if (Object.values(b).some((k) => k)) {
           g.preventDefault();
           const k = Math.abs(g.deltaY) > Math.abs(g.deltaX) ? g.deltaY : g.deltaX;
@@ -779,96 +779,96 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         }
       });
     };
-    document.addEventListener("mouseup", c), document.addEventListener("keydown", h), document.addEventListener("keyup", h), document.addEventListener("mousemove", y);
+    document.addEventListener("mouseup", i), document.addEventListener("keydown", h), document.addEventListener("keyup", h), document.addEventListener("mousemove", y);
     const w = o.current;
     return w?.addEventListener("wheel", x, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", c), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), w?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", i), document.removeEventListener("keydown", h), document.removeEventListener("keyup", h), document.removeEventListener("mousemove", y), w?.removeEventListener("wheel", x);
     };
-  }, [i, r, m]), M("sync_dblclick", r, (c) => {
-    const h = z(
-      c.positions,
-      i.current
+  }, [c, r, f]), M("sync_dblclick", r, (i) => {
+    const h = F(
+      i.positions,
+      c.current
     );
     h && S.dblclick.dispatchEvent(a, {
-      frame: i.current,
+      frame: c.current,
       pointer: h,
-      keys: c.keys
+      keys: i.keys
     });
-  }), M("sync_click", r, (c) => {
-    const h = z(
-      c.positions,
-      i.current
+  }), M("sync_click", r, (i) => {
+    const h = F(
+      i.positions,
+      c.current
     );
     h && S.click.dispatchEvent(a, {
-      frame: i.current,
+      frame: c.current,
       pointer: h,
-      keys: c.keys
+      keys: i.keys
     });
-  }), M("sync_contextmenu", r, (c) => {
-    const h = z(
-      c.positions,
-      i.current
+  }), M("sync_contextmenu", r, (i) => {
+    const h = F(
+      i.positions,
+      c.current
     );
     h && S.contextmenu.dispatchEvent(a, {
-      frame: i.current,
+      frame: c.current,
       pointer: h,
-      keys: c.keys
+      keys: i.keys
     });
-  }), M("sync_move", r, (c) => {
-    const h = c.positions ? z(
-      c.positions,
-      i.current
+  }), M("sync_move", r, (i) => {
+    const h = i.positions ? F(
+      i.positions,
+      c.current
     ) : null;
-    l.current = c, S.move.dispatchEvent(a, {
-      frame: i.current,
+    l.current = i, S.move.dispatchEvent(a, {
+      frame: c.current,
       pointer: h ?? null,
-      keys: c.keys
+      keys: i.keys
     });
-  }), M("sync_mousedown", r, (c) => {
-    const h = z(
-      c.positions,
-      i.current
+  }), M("sync_mousedown", r, (i) => {
+    const h = F(
+      i.positions,
+      c.current
     );
     h && S.mousedown.dispatchEvent(a, {
-      frame: i.current,
+      frame: c.current,
       pointer: h,
-      keys: c.keys
+      keys: i.keys
     });
-  }), M("sync_mouseup", r, (c) => {
-    const h = z(
-      c.positions,
-      i.current
+  }), M("sync_mouseup", r, (i) => {
+    const h = F(
+      i.positions,
+      c.current
     );
     h && S.mouseup.dispatchEvent(a, {
-      frame: i.current,
+      frame: c.current,
       pointer: h,
-      keys: c.keys
+      keys: i.keys
     });
   }), M(
     "sync_pressandwheel",
     r,
-    (c) => {
-      const h = z(
-        c.positions,
-        i.current
+    (i) => {
+      const h = F(
+        i.positions,
+        c.current
       );
       h && S.pressandwheel.dispatchEvent(a, {
-        frame: i.current,
+        frame: c.current,
         pointer: h,
-        keys: c.keys,
-        deltaX: c.deltaX,
-        deltaY: c.deltaY,
-        deltaAbs: c.deltaAbs
+        keys: i.keys,
+        deltaX: i.deltaX,
+        deltaY: i.deltaY,
+        deltaAbs: i.deltaAbs
       });
     }
-  ), M("sync_spanselect", r, (c) => {
-    const h = c.xRange && xt("x", c.xRange, i.current), y = c.yRange && xt("y", c.yRange, i.current), x = h?.scaled, w = y?.scaled;
-    c.completed && (d.current = null), S.spanselect.dispatchEvent(a, {
-      mode: c.mode,
-      frame: i.current,
-      completed: c.completed,
+  ), M("sync_spanselect", r, (i) => {
+    const h = i.xRange && xt("x", i.xRange, c.current), y = i.yRange && xt("y", i.yRange, c.current), x = h?.scaled, w = y?.scaled;
+    i.completed && (d.current = null), S.spanselect.dispatchEvent(a, {
+      mode: i.mode,
+      frame: c.current,
+      completed: i.completed,
       x: {
         css: h && {
           from: h.fromCSS,
@@ -883,7 +883,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         },
         scaled: w ?? []
       },
-      keys: c.keys
+      keys: i.keys
     });
   }), /* @__PURE__ */ _(
     "div",
@@ -900,35 +900,35 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
         zIndex: 25,
         ...s
       },
-      onDragStart: (c) => {
-        c.preventDefault();
+      onDragStart: (i) => {
+        i.preventDefault();
       },
-      onClick: (c) => {
-        f(c, (h, y, x) => {
+      onClick: (i) => {
+        m(i, (h, y, x) => {
           S.sync_click.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onMouseLeave: (c) => {
-        f(c, (h, y, x) => {
+      onMouseLeave: (i) => {
+        m(i, (h, y, x) => {
           S.sync_move.dispatchEvent(r, {
             positions: null,
             keys: x
           });
         });
       },
-      onMouseMove: (c) => {
-        f(c, (h, y, x) => {
+      onMouseMove: (i) => {
+        m(i, (h, y, x) => {
           S.sync_move.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onMouseDown: (c) => {
-        f(c, (h, { cssX: y, cssY: x }, w) => {
+      onMouseDown: (i) => {
+        m(i, (h, { cssX: y, cssY: x }, w) => {
           S.sync_mousedown.dispatchEvent(r, {
             positions: h,
             keys: w
@@ -938,8 +938,8 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           };
         });
       },
-      onMouseUp: (c) => {
-        f(c, (h, y, x) => {
+      onMouseUp: (i) => {
+        m(i, (h, y, x) => {
           S.sync_mouseup.dispatchEvent(r, {
             positions: h,
             keys: x
@@ -960,16 +960,16 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
           }
         });
       },
-      onContextMenu: (c) => {
-        c.preventDefault(), f(c, (h, y, x) => {
+      onContextMenu: (i) => {
+        i.preventDefault(), m(i, (h, y, x) => {
           S.sync_contextmenu.dispatchEvent(r, {
             positions: h,
             keys: x
           });
         });
       },
-      onDoubleClick: (c) => {
-        f(c, (h, y, x) => {
+      onDoubleClick: (i) => {
+        m(i, (h, y, x) => {
           S.sync_dblclick.dispatchEvent(r, {
             positions: h,
             keys: x
@@ -983,7 +983,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   mt("move", (a) => {
     n(a);
   });
-  const i = Q(() => {
+  const c = Q(() => {
     if (!o)
       return null;
     const { frame: a, pointer: r } = o, d = r?.scaled[e];
@@ -992,21 +992,21 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     const u = [];
     let l = d;
     for (const p of t) {
-      let f = null, m = 1 / 0;
+      let m = null, f = 1 / 0;
       for (const [h, y] of p.points.entries()) {
         if (!rt(a, y.x, e) || !rt(a, y.y, p.yScaleId))
           continue;
         const x = Math.abs(y.x - d);
-        x < m && (m = x, f = h);
+        x < f && (f = x, m = h);
       }
-      const c = p.points[f ?? -1];
-      if (!c || ut(a, m, e, "css") > 30) {
+      const i = p.points[m ?? -1];
+      if (!i || ut(a, f, e, "css") > 30) {
         u.push({ seriesId: p.seriesId, y: null });
         continue;
       }
-      l = c.x, u.push({
+      l = i.x, u.push({
         seriesId: p.seriesId,
-        y: c.y
+        y: i.y
       });
     }
     return {
@@ -1015,14 +1015,14 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
       points: u
     };
   }, [t, o, e]);
-  return s(i);
+  return s(c);
 }, Ce = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: o }) => {
-  const [n, i] = V(null);
+  const [n, c] = V(null);
   if (mt("move", (l) => {
-    i(l);
+    c(l);
   }), !n)
     return null;
-  const { frame: a, pointer: r } = n, d = O(a, r?.cssX ?? 0, "css"), u = $(a, r?.cssY ?? 0, "css");
+  const { frame: a, pointer: r } = n, d = Y(a, r?.cssX ?? 0, "css"), u = O(a, r?.cssY ?? 0, "css");
   return /* @__PURE__ */ lt(_t, { children: [
     /* @__PURE__ */ _(
       "div",
@@ -1066,30 +1066,30 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   ] });
 }, Te = ({ makeClassName: t, makeStyle: s }) => {
   const [e, o] = V(null);
-  mt("spanselect", (i) => {
-    o(i.mode === "below_threshold" || i.completed ? null : i);
+  mt("spanselect", (c) => {
+    o(c.mode === "below_threshold" || c.completed ? null : c);
   });
   const n = Q(() => {
     if (!e || e.mode === "below_threshold")
       return null;
-    const i = O(
+    const c = Y(
       e.frame,
       e.x.css?.from ?? -1 / 0,
       "css"
-    ), a = O(
+    ), a = Y(
       e.frame,
       e.x.css?.to ?? 1 / 0,
       "css"
-    ), r = $(
+    ), r = O(
       e.frame,
       e.y.css?.from ?? -1 / 0,
       "css"
-    ), d = $(
+    ), d = O(
       e.frame,
       e.y.css?.to ?? 1 / 0,
       "css"
-    ), u = Math.min(i, a), l = Math.min(r, d), p = Math.abs(a - i), f = Math.abs(d - r);
-    return { leftPx: u, topPx: l, widthPx: p, heightPx: f };
+    ), u = Math.min(c, a), l = Math.min(r, d), p = Math.abs(a - c), m = Math.abs(d - r);
+    return { leftPx: u, topPx: l, widthPx: p, heightPx: m };
   }, [e]);
   return /* @__PURE__ */ _(
     "div",
@@ -1108,7 +1108,7 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
     }
   );
 }, ke = ({ style: t, children: s, scaleId: e, ...o }) => {
-  const n = ht((i) => i.getScale(e)?.axis);
+  const n = ht((c) => c.getScale(e)?.axis);
   return n ? /* @__PURE__ */ _(
     "div",
     {
@@ -1127,18 +1127,23 @@ const he = At(({ configuration: t, children: s, style: e, className: o }, n) =>
   ) : null;
 }, Tt = 60, jt = 30, kt = "UTC", Ht = "en-GB", Ee = ({
   space: t,
-  formatter: s
-} = {}) => (e, o) => {
-  const { min: n, max: i } = e, a = [], r = window.devicePixelRatio || 1, d = (t ?? (e.origin === "x" ? Tt : jt)) * r, u = Lt(
-    o,
-    d,
-    e.id,
+  formatter: s,
+  acceptableIncrements: e
+} = {}) => (o, n) => {
+  const { min: c, max: a } = o, r = [], d = window.devicePixelRatio || 1, u = (t ?? (o.origin === "x" ? Tt : jt)) * d, l = Dt(
+    n,
+    u,
+    o.id,
     "canvas"
-  ), l = W.find((f) => f > u) ?? 1;
-  let p = n % l < Number.EPSILON ? n : n + l - n % l;
-  for (; p <= i; )
-    a.push(p), p += l;
-  return (s ?? Wt)(a);
+  ), p = e ?? W, m = p.find((i) => i > l) ?? p.at(-1) ?? 1;
+  let f = c;
+  if (Math.abs(f % m) > Number.EPSILON) {
+    const i = (m - f % m) % m;
+    f += i;
+  }
+  for (; f <= a && r.length < 1e3; )
+    r.push(f), f += m;
+  return (s ?? Wt)(r);
 }, Wt = (t) => {
   const s = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
   return t.map((e) => ({ value: e, label: e.toFixed(s) }));
@@ -1233,7 +1238,7 @@ const qt = 1, Et = 1e3 * qt, pt = 60 * Et, tt = 60 * pt, et = 24 * tt, Gt = 30 *
 }, gt = (t, s) => {
   const e = new Date(t);
   return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
-}, K = (t, s) => {
+}, X = (t, s) => {
   const [e, o] = s;
   switch (o) {
     case "milliseconds":
@@ -1258,32 +1263,32 @@ function G(t, s) {
 }
 const oe = (t, s, e = "UTC") => {
   const [o, n] = s;
-  let i = new Date(t);
+  let c = new Date(t);
   const a = () => {
-    i.setUTCHours(-G(i, e), 0, 0, 0);
+    c.setUTCHours(-G(c, e), 0, 0, 0);
   };
   switch (n) {
     case "milliseconds":
-      i.setUTCMilliseconds(
-        Math.ceil(i.getUTCMilliseconds() / o) * o
+      c.setUTCMilliseconds(
+        Math.ceil(c.getUTCMilliseconds() / o) * o
       );
       break;
     case "seconds":
-      i.setUTCSeconds(
-        Math.ceil(i.getUTCSeconds() / o) * o,
+      c.setUTCSeconds(
+        Math.ceil(c.getUTCSeconds() / o) * o,
         0
       );
       break;
     case "minutes":
-      i.setUTCMinutes(
-        Math.ceil(i.getTime() % tt / pt / o) * o,
+      c.setUTCMinutes(
+        Math.ceil(c.getTime() % tt / pt / o) * o,
         0,
         0
       );
       break;
     case "hours":
-      i.setUTCHours(
-        Math.ceil(i.getTime() % et / tt / o) * o,
+      c.setUTCHours(
+        Math.ceil(c.getTime() % et / tt / o) * o,
         0,
         0,
         0
@@ -1292,36 +1297,36 @@ const oe = (t, s, e = "UTC") => {
     case "days":
     case "months":
     case "years":
-      n === "months" ? i.setUTCDate(1) : n === "years" && i.setUTCMonth(0, 1), a(), i.getTime() < t && (i = new Date(K(i, [1, n])));
+      n === "months" ? c.setUTCDate(1) : n === "years" && c.setUTCMonth(0, 1), a(), c.getTime() < t && (c = new Date(X(c, [1, n])));
       break;
   }
-  return i.getTime();
+  return c.getTime();
 }, Me = ({
   timeZone: t = kt,
   space: s = Tt,
   formatter: e,
   locale: o,
   showTimezone: n
-} = {}) => (i, a) => {
-  const { min: r, max: d } = i, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - r) / u, [f, m] = Jt.find(
+} = {}) => (c, a) => {
+  const { min: r, max: d } = c, u = Math.floor(a.chartAreaCanvasPX.width / s) + 1, p = (d - r) / u, [m, f] = Jt.find(
     (w) => q(w) >= p
-  ) ?? [1, "milliseconds"], c = oe(r, [f, m], t), h = G(c, t), y = [c];
+  ) ?? [1, "milliseconds"], i = oe(r, [m, f], t), h = G(i, t), y = [i];
   let x;
   for (; ; ) {
-    switch (m) {
+    switch (f) {
       case "milliseconds":
       case "seconds":
       case "minutes":
       case "hours": {
-        x = K(c, [y.length * f, m]);
+        x = X(i, [y.length * m, f]);
         break;
       }
       case "days": {
-        const w = K(c, [
-          y.length * f,
-          m
+        const w = X(i, [
+          y.length * m,
+          f
         ]);
-        x = K(w, [
+        x = X(w, [
           h - G(w, t),
           "hours"
         ]);
@@ -1329,14 +1334,14 @@ const oe = (t, s, e = "UTC") => {
       }
       case "months":
       case "years": {
-        const w = K(
-          K(K(c, [h, "hours"]), [
-            y.length * f,
-            m
+        const w = X(
+          X(X(i, [h, "hours"]), [
+            y.length * m,
+            f
           ]),
           [-h, "hours"]
         );
-        x = K(w, [
+        x = X(w, [
           h - G(w, t),
           "hours"
         ]);
@@ -1347,12 +1352,12 @@ const oe = (t, s, e = "UTC") => {
       break;
     y.push(x);
   }
-  return (e ?? ie({
+  return (e ?? ce({
     locale: o,
     showTimezone: n,
     timeZone: t
   }))(y);
-}, X = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ie = ({
+}, I = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, ce = ({
   timeZone: t = kt,
   locale: s = Ht,
   showTimezone: e = !0
@@ -1370,15 +1375,15 @@ const oe = (t, s, e = "UTC") => {
     timeZone: t
   });
   return (n) => {
-    const i = n[1] - n[0], a = i < q([1, "days"]), r = i < q([1, "minutes"]), d = i < q([1, "seconds"]);
+    const c = n[1] - n[0], a = c < q([1, "days"]), r = c < q([1, "minutes"]), d = c < q([1, "seconds"]);
     return n.map((u) => ({ value: u, label: o.formatToParts(new Date(u)) })).map((u, l, p) => {
-      const f = p[l - 1], m = l === 0 || X(u.label, f.label, "year"), c = l === 0 || X(u.label, f.label, "day"), h = l === 0 || X(u.label, f.label, "month"), y = l === 0 || X(u.label, f.label, "hour"), x = l === 0 || X(u.label, f.label, "timeZoneName"), w = l === 0 || X(u.label, f.label, "minute"), g = l === 0 || X(u.label, f.label, "second"), v = l === 0 || X(u.label, f.label, "fractionalSecond"), T = [];
+      const m = p[l - 1], f = l === 0 || I(u.label, m.label, "year"), i = l === 0 || I(u.label, m.label, "day"), h = l === 0 || I(u.label, m.label, "month"), y = l === 0 || I(u.label, m.label, "hour"), x = l === 0 || I(u.label, m.label, "timeZoneName"), w = l === 0 || I(u.label, m.label, "minute"), g = l === 0 || I(u.label, m.label, "second"), v = l === 0 || I(u.label, m.label, "fractionalSecond"), T = [];
       if (a && (y || w || x || g || v)) {
         const b = u.label.find((P) => P.type === "hour")?.value, C = u.label.find((P) => P.type === "minute")?.value, k = u.label.find((P) => P.type === "timeZoneName")?.value;
         let A = "";
         if (r) {
-          const P = u.label.find((F) => F.type === "second")?.value, B = u.label.find(
-            (F) => F.type === "fractionalSecond"
+          const P = u.label.find((K) => K.type === "second")?.value, B = u.label.find(
+            (K) => K.type === "fractionalSecond"
           )?.value;
           A = `:${P}` + (d ? `.${B}` : "");
         }
@@ -1386,12 +1391,12 @@ const oe = (t, s, e = "UTC") => {
           `${b}:${C}${A}` + (e && x ? ` ${k}` : "")
         );
       }
-      return (c || h) && T.push(
+      return (i || h) && T.push(
         [
           u.label.find((b) => b.type === "month")?.value,
-          c && u.label.find((b) => b.type === "day")?.value
+          i && u.label.find((b) => b.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), m && T.push(u.label.find((b) => b.type === "year")?.value), {
+      ), f && T.push(u.label.find((b) => b.type === "year")?.value), {
         value: u.value,
         label: T.filter((b) => b).join(`
 `)
@@ -1416,18 +1421,18 @@ export {
   R as applyStyles,
   j as clamp,
   de as clampUnfit,
-  O as clampXPosToChartArea,
-  $ as clampYPosToChartArea,
+  Y as clampXPosToChartArea,
+  O as clampYPosToChartArea,
   Wt as defaultNumericalTicksFormatter,
   ue as findClosestIndex,
-  I as getScale,
+  L as getScale,
   Ee as makeLinearTicks,
-  ie as makeTimeTickFormat,
+  ce as makeTimeTickFormat,
   Me as makeTimeTicks,
   D as posToVal,
-  Lt as pxToValDistance,
+  Dt as pxToValDistance,
   le as sum,
-  Y as useDrawEffect,
+  z as useDrawEffect,
   ht as useFrameState,
   mt as useInteractionsEvent,
   ge as useXPositioned,