@canplot/react 0.1.3 → 0.1.4

package/dist/canplot.mjs

@@ -1,456 +1,146 @@
-import { jsxs as at, jsx as D, Fragment as _t } from "react/jsx-runtime";
-import G, { createContext as Rt, useContext as lt, useRef as U, useLayoutEffect as J, version as Ut, forwardRef as Lt, useMemo as wt, useState as N, useId as Dt, useEffect as Xt } from "react";
-import { createStore as Kt, useStore as Ct } from "zustand";
-const Tt = 5, bt = 10, kt = 60, It = 30, Et = "UTC", zt = "en-GB", q = (t, s, e) => Math.min(Math.max(t, s), e), Ft = (t, s, e, o) => {
-  const { min: i, max: n } = A(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = (V(t, e) ? r.width : r.height) / (n - i);
+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;
-}, A = (t, s) => {
-  const e = t.scales.find((o) => o.id === s);
+}, D = (t, s) => {
+  const e = t.scales.find((c) => c.id === s);
   if (!e)
     throw new Error(`Scale ${s} not found`);
   return e;
-}, V = (t, s) => t.scales.find((e) => e.id === s)?.origin === "x", me = (t, s) => t.scales.find((e) => e.id === s)?.origin === "y", X = (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", O = (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, o) => {
-  const i = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, { min: n, max: r } = A(t, e), a = (V(t, e) ? i.width : i.height) / (r - n);
+}, 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;
-}, K = (t, s, e, o) => {
-  const { min: i } = A(t, e), n = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, r = ut(t, s - i, e, o);
-  return V(t, e) ? q(
-    n.x + r,
-    n.x - 10 * n.width,
-    n.x + 11 * n.width
-  ) : q(
-    n.y + n.height - r,
-    n.y - 10 * n.height,
-    n.y + 11 * n.height
+}, 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,
+    o.x - 10 * o.width,
+    o.x + 11 * o.width
+  ) : J(
+    o.y + o.height - i,
+    o.y - 10 * o.height,
+    o.y + 11 * o.height
   );
-}, O = (t, s, e) => {
-  const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return q(s, o.x, o.x + o.width);
-}, $ = (t, s, e) => {
-  const o = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
-  return q(s, o.y, o.y + o.height);
-}, ct = (t, s, e) => {
-  const { min: o, max: i } = A(t, e);
-  return s >= o && s <= i;
-}, L = (t, s, e, o) => {
-  const { min: i, max: n } = A(t, e), r = o === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS, a = V(t, e) ? (s - r.x) / r.width : (r.height - s + r.y) / r.height;
-  return i + a * (n - i);
-}, Yt = 1, Mt = 1e3 * Yt, dt = 60 * Mt, Q = 60 * dt, tt = 24 * Q, Ot = 30 * tt, $t = 365 * tt, Bt = [
-  // second divisors
-  [1, "milliseconds"],
-  [2, "milliseconds"],
-  [5, "milliseconds"],
-  [10, "milliseconds"],
-  [20, "milliseconds"],
-  [50, "milliseconds"],
-  [100, "milliseconds"],
-  [200, "milliseconds"],
-  [500, "milliseconds"],
-  // minute divisors
-  [1, "seconds"],
-  [5, "seconds"],
-  [10, "seconds"],
-  [15, "seconds"],
-  [30, "seconds"],
-  // hour divisors
-  [1, "minutes"],
-  [5, "minutes"],
-  [10, "minutes"],
-  [15, "minutes"],
-  [30, "minutes"],
-  // day divisors
-  [1, "hours"],
-  [2, "hours"],
-  [3, "hours"],
-  [4, "hours"],
-  [6, "hours"],
-  [8, "hours"],
-  [12, "hours"],
-  // month divisors
-  [1, "days"],
-  [3, "days"],
-  [5, "days"],
-  [7, "days"],
-  [10, "days"],
-  [15, "days"],
-  // year divisors
-  [1, "months"],
-  [2, "months"],
-  [3, "months"],
-  [4, "months"],
-  [6, "months"],
-  // century divisors
-  [1, "years"],
-  [2, "years"],
-  [5, "years"],
-  [10, "years"],
-  [25, "years"],
-  [50, "years"],
-  [100, "years"]
-], H = (t) => {
-  const [s, e] = t;
-  switch (e) {
-    case "milliseconds":
-      return s;
-    case "seconds":
-      return s * Mt;
-    case "minutes":
-      return s * dt;
-    case "hours":
-      return s * Q;
-    case "days":
-      return s * tt;
-    case "months":
-      return s * Ot;
-    case "years":
-      return s * $t;
-  }
-}, Nt = (t, s) => {
-  const e = new Date(t);
-  return e.setUTCMilliseconds(e.getUTCMilliseconds() + s), e.getTime();
-}, Vt = (t, s) => {
-  const e = new Date(t);
-  return e.setUTCSeconds(e.getUTCSeconds() + s), e.getTime();
-}, jt = (t, s) => {
-  const e = new Date(t);
-  return e.setUTCMinutes(e.getUTCMinutes() + s), e.getTime();
-}, Ht = (t, s) => {
-  const e = new Date(t);
-  return e.setUTCHours(e.getUTCHours() + s), e.getTime();
-}, Zt = (t, s) => {
-  const e = new Date(t);
-  return e.setUTCDate(e.getUTCDate() + s), e.getTime();
-}, xt = (t, s) => {
-  const e = new Date(t);
-  return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
-}, z = (t, s) => {
-  const [e, o] = s;
-  switch (o) {
-    case "milliseconds":
-      return Nt(t, e);
-    case "seconds":
-      return Vt(t, e);
-    case "minutes":
-      return jt(t, e);
-    case "hours":
-      return Ht(t, e);
-    case "days":
-      return Zt(t, e);
-    case "months":
-      return xt(t, e);
-    case "years":
-      return xt(t, e * 12);
-  }
-};
-function Z(t, s) {
-  const e = new Date(t), o = new Date(e.toLocaleString("en-US", { timeZone: s })), i = new Date(e.toLocaleString("en-US", { timeZone: "UTC" }));
-  return (o.getTime() - i.getTime()) / (3600 * 1e3);
-}
-const Wt = (t, s, e = "UTC") => {
-  const [o, i] = s;
-  let n = new Date(t);
-  const r = () => {
-    n.setUTCHours(-Z(n, e), 0, 0, 0);
-  };
-  switch (i) {
-    case "milliseconds":
-      n.setUTCMilliseconds(
-        Math.ceil(n.getUTCMilliseconds() / o) * o
-      );
-      break;
-    case "seconds":
-      n.setUTCSeconds(
-        Math.ceil(n.getUTCSeconds() / o) * o,
-        0
-      );
-      break;
-    case "minutes":
-      n.setUTCMinutes(
-        Math.ceil(n.getTime() % Q / dt / o) * o,
-        0,
-        0
-      );
-      break;
-    case "hours":
-      n.setUTCHours(
-        Math.ceil(n.getTime() % tt / Q / o) * o,
-        0,
-        0,
-        0
-      );
-      break;
-    case "days":
-    case "months":
-    case "years":
-      i === "months" ? n.setUTCDate(1) : i === "years" && n.setUTCMonth(0, 1), r(), n.getTime() < t && (n = new Date(z(n, [1, i])));
-      break;
-  }
-  return n.getTime();
-}, Gt = ({
-  timeZone: t = Et,
-  space: s = kt
-}) => ({ frame: e, scaleId: o }) => {
-  const { min: i, max: n } = A(e, o), r = Math.floor(e.chartAreaCanvasPX.width / s) + 1, u = (n - i) / r, [l, d] = Bt.find(
-    (p) => H(p) >= u
-  ) ?? [1, "milliseconds"], f = Wt(i, [l, d], t), m = Z(f, t), h = [f];
-  let c;
-  for (; ; ) {
-    switch (d) {
-      case "milliseconds":
-      case "seconds":
-      case "minutes":
-      case "hours": {
-        c = z(f, [h.length * l, d]);
-        break;
-      }
-      case "days": {
-        const p = z(f, [
-          h.length * l,
-          d
-        ]);
-        c = z(p, [
-          m - Z(p, t),
-          "hours"
-        ]);
-        break;
-      }
-      case "months":
-      case "years": {
-        const p = z(
-          z(z(f, [m, "hours"]), [
-            h.length * l,
-            d
-          ]),
-          [-m, "hours"]
-        );
-        c = z(p, [
-          m - Z(p, t),
-          "hours"
-        ]);
-        break;
-      }
-    }
-    if (c > n)
-      break;
-    h.push(c);
-  }
-  return h;
-}, I = (t, s, e) => t.find((o) => o.type === e)?.value !== s.find((o) => o.type === e)?.value, Jt = ({
-  timeZone: t = Et,
-  locale: s = zt,
-  showTimezone: e = !0
-}) => {
-  const o = new Intl.DateTimeFormat(s, {
-    year: "numeric",
-    day: "numeric",
-    month: "short",
-    hour: "numeric",
-    hourCycle: "h23",
-    minute: "numeric",
-    second: "numeric",
-    fractionalSecondDigits: 3,
-    timeZoneName: "short",
-    timeZone: t
-  });
-  return ({ ticks: i }) => {
-    const n = i[1] - i[0], r = n < H([1, "days"]), a = n < H([1, "minutes"]), u = n < H([1, "seconds"]);
-    return i.map((l) => o.formatToParts(new Date(l))).map((l, d, f) => {
-      const m = f[d - 1], h = d === 0 || I(l, m, "year"), c = d === 0 || I(l, m, "day"), p = d === 0 || I(l, m, "month"), y = d === 0 || I(l, m, "hour"), x = d === 0 || I(l, m, "timeZoneName"), C = d === 0 || I(l, m, "minute"), S = d === 0 || I(l, m, "second"), g = d === 0 || I(l, m, "fractionalSecond"), k = [];
-      if (r && (y || C || x || S || g)) {
-        const w = l.find((P) => P.type === "hour")?.value, E = l.find((P) => P.type === "minute")?.value, M = l.find((P) => P.type === "timeZoneName")?.value;
-        let _ = "";
-        if (a) {
-          const P = l.find((F) => F.type === "second")?.value, B = l.find((F) => F.type === "fractionalSecond")?.value;
-          _ = `:${P}` + (u ? `.${B}` : "");
-        }
-        k.push(
-          `${w}:${E}${_}` + (e && x ? ` ${M}` : "")
-        );
-      }
-      return (c || p) && k.push(
-        [
-          l.find((w) => w.type === "month")?.value,
-          c && l.find((w) => w.type === "day")?.value
-        ].filter(Boolean).join(" ")
-      ), h && k.push(l.find((w) => w.type === "year")?.value), k.filter((w) => w).join(`
-`);
-    });
-  };
-}, W = [];
-for (let t = -12; t <= 12; t++)
-  W.push(1 * 10 ** t), W.push(2 * 10 ** t), W.push(5 * 10 ** t);
-const qt = (t) => {
+}, z = (t, s, e) => {
+  const c = e === "canvas" ? t.chartAreaCanvasPX : t.chartAreaCSS;
+  return J(s, c.x, c.x + c.width);
+}, Y = (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 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);
+}, Dt = (t) => {
   const { ctx: s, scales: e } = t;
-  s.save(), s.strokeStyle = "black", s.fillStyle = "black", s.lineWidth = 1, s.font = "12px Arial", s.textAlign = "center", s.textBaseline = "middle";
-  for (const o of e) {
-    if (!o.axis) continue;
-    const i = o.type === "time" ? Gt({
-      space: o.axis.tickSpace,
-      timeZone: o.timeZone
-    }) : Qt({ space: o.axis.tickSpace }), n = o.type === "time" ? Jt({
-      timeZone: o.timeZone,
-      showTimezone: o.axis.showTimezone,
-      locale: o.locale
-    }) : te, r = o.axis.canvasRect;
-    if (o.origin === "x") {
-      if (o.axis.position === "bottom")
-        s.beginPath(), s.moveTo(r.x, r.y), s.lineTo(r.x + r.width, r.y), s.stroke(), gt(t, o.id, r.y, i, n);
-      else if (o.axis.position === "top") {
-        const a = r.y + r.height;
-        s.beginPath(), s.moveTo(r.x, a), s.lineTo(r.x + r.width, a), s.stroke(), gt(t, o.id, a, i, n);
+  for (const c of e) {
+    if (!c.axis) continue;
+    s.save(), O(s, {
+      strokeStyle: "black",
+      fillStyle: "black",
+      lineWidth: 1,
+      ...c.axis.style
+    });
+    const n = c.axis.canvasRect;
+    if (c.origin === "x") {
+      if (c.axis.position === "bottom")
+        s.beginPath(), s.moveTo(n.x, n.y), s.lineTo(n.x + n.width, n.y), s.stroke();
+      else if (c.axis.position === "top") {
+        const o = n.y + n.height;
+        s.beginPath(), s.moveTo(n.x, o), s.lineTo(n.x + n.width, o), s.stroke();
       }
-    } else if (o.axis.position === "left") {
-      const a = r.x + r.width;
-      s.beginPath(), s.moveTo(a, r.y), s.lineTo(a, r.y + r.height), s.stroke(), St(t, o.id, a, i, n);
-    } else o.axis.position === "right" && (s.beginPath(), s.moveTo(r.x, r.y), s.lineTo(r.x, r.y + r.height), s.stroke(), St(t, o.id, r.x, i, n));
+    } else if (c.axis.position === "left") {
+      const o = n.x + n.width;
+      s.beginPath(), s.moveTo(o, n.y), s.lineTo(o, n.y + n.height), s.stroke();
+    } 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();
   }
-  s.restore();
-}, St = (t, s, e, o, i) => {
-  const { ctx: n } = t, r = t.scales.find((c) => c.id === s)?.axis;
-  if (!r) return;
-  const a = window.devicePixelRatio || 1, u = Tt, l = e, d = r.position === "left" ? e - u : e + u, f = bt * a, m = o({ frame: t, scaleId: s }) ?? [], h = i({
-    frame: t,
-    scaleId: s,
-    ticks: m
-  });
-  n.save(), n.fontKerning = "auto", X(n, {}), n.beginPath();
-  for (let c = 0; c < m.length; c++) {
-    const p = K(t, m[c], s, "canvas");
-    n.moveTo(l, p), n.lineTo(d, p);
-  }
-  n.stroke(), n.restore(), n.save(), X(n, {
-    textBaseline: "middle",
-    textAlign: r.position === "left" ? "right" : "left"
-    // ...axis.axisStyle,
-    // ...axis.tickLabelStyle,
-  });
-  for (let c = 0; c < m.length; c++) {
-    const p = K(t, m[c], s, "canvas"), y = h[c].split(`
-`);
-    for (let x = 0; x < y.length; x++)
-      n.fillText(` ${y[x]} `, d, p + x * f);
-  }
-  n.restore();
-}, gt = (t, s, e, o, i) => {
-  const { ctx: n } = t, r = t.scales.find((c) => c.id === s)?.axis;
-  if (!r) return;
-  const a = window.devicePixelRatio || 1, u = Tt, l = e, d = r.position === "top" ? e - u : e + u, f = bt * a, m = o({ frame: t, scaleId: s }) ?? [], h = i({ frame: t, scaleId: s, ticks: m });
-  n.save(), n.fontKerning = "auto", X(n, {}), n.beginPath();
-  for (let c = 0; c < m.length; c++) {
-    const p = K(t, m[c], s, "canvas");
-    n.moveTo(p, l), n.lineTo(p, d);
-  }
-  n.stroke(), n.restore(), n.save(), X(n, {
-    textBaseline: r.position === "top" ? "bottom" : "top",
-    textAlign: "center"
-    // ...axis.axisStyle,
-    // ...axis.tickLabelStyle,
-  });
-  for (let c = 0; c < m.length; c++) {
-    const p = K(t, m[c], s, "canvas"), y = h[c].split(`
-`);
-    for (let x = 0; x < y.length; x++)
-      n.fillText(y[x], p, d + a * 2 + x * f);
-  }
-  n.restore();
-}, Qt = ({
-  space: t
-} = {}) => ({ frame: s, scaleId: e }) => {
-  const { min: o, max: i } = A(s, e), n = [], r = window.devicePixelRatio || 1, a = (t ?? (V(s, e) ? kt : It)) * r, u = Ft(
-    s,
-    a,
-    e,
-    "canvas"
-  ), l = W.find((f) => f > u) ?? 1;
-  let d = o % l < Number.EPSILON ? o : o + l - o % l;
-  for (; d <= i; )
-    n.push(d), d += l;
-  return n;
-}, te = ({ ticks: t }) => {
-  const s = Math.max(0, Math.ceil(-Math.log10(t[1] - t[0])));
-  return t.map((e) => e.toFixed(s));
-}, ee = () => Kt((t, s) => {
+}, It = () => Ut((t, s) => {
   const e = () => {
-    const o = s()._frame;
-    if (!o) throw new Error("No frame set in frame store");
-    return o;
+    const c = s()._frame;
+    if (!c) throw new Error("No frame set in frame store");
+    return c;
   };
   return {
     _frame: null,
     getFrame: e,
     getCtx: () => e().ctx,
-    clampXPosToChartArea: (o, i) => O(e(), o, i ?? "canvas"),
-    clampYPosToChartArea: (o, i) => $(e(), o, i ?? "canvas"),
-    valToPos: (o, i, n) => K(e(), o, i, n ?? "canvas"),
-    valToPxDistance: (o, i, n) => ut(
+    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"),
+    valToPxDistance: (c, n, o) => ut(
       e(),
-      o,
-      i,
-      n ?? "canvas"
+      c,
+      n,
+      o ?? "canvas"
     ),
-    valFits: (o, i) => ct(e(), o, i),
-    getScale: (o) => A(e(), o)
+    valFits: (c, n) => rt(e(), c, n),
+    getScale: (c) => D(e(), c)
   };
-}), ht = Rt(null), j = (t, s) => {
-  const e = lt(ht);
+}), dt = Mt(null), V = (t, s) => {
+  const e = lt(dt);
   if (!e)
     throw new Error("useFrame must be used within a CanPlot component");
-  const o = U(t);
-  o.current = t, J(() => {
-    o.current(e.getState()), e.subscribe((i) => {
-      i._frame && o.current(i);
+  const c = R(t);
+  c.current = t, G(() => {
+    c.current(e.getState()), e.subscribe((n) => {
+      n._frame && c.current(n);
     });
   }, [e, ...s]);
-}, pt = (t) => {
-  const s = lt(ht);
+}, ht = (t) => {
+  const s = lt(dt);
   if (!s)
     throw new Error("useFrame must be used within a CanPlot component");
-  return Ct(
+  return wt(
     s,
     t ?? ((e) => e.getFrame())
   );
 };
-function se(t) {
+function Xt(t) {
   return (s) => {
-    for (const e of t) rt(e, s);
+    for (const e of t) it(e, s);
   };
 }
-function ne(t) {
+function Kt(t) {
   return (s) => {
     const e = [];
-    for (const o of t) {
-      const i = rt(o, s), n = typeof i == "function";
-      e.push(n ? i : () => rt(o, null));
+    for (const c of t) {
+      const n = it(c, s), o = typeof n == "function";
+      e.push(o ? n : () => it(c, null));
     }
     return () => {
-      for (const o of e) o();
+      for (const c of e) c();
     };
   };
 }
-function rt(t, s) {
+function it(t, s) {
   if (typeof t == "function")
     return t(s);
   t && (t.current = s);
 }
-var oe = parseInt(Ut.split(".")[0], 10) >= 19 ? ne : se;
-const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) => {
-  const n = U(null), r = U(null), a = ce(r), u = wt(ee, []);
-  J(() => {
+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: re(t, a, n.current)
+      _frame: Ot(t, a, o.current)
     });
-  }, [t, a, n, u]), J(() => u.subscribe((d) => {
-    d._frame && ae(d._frame);
+  }, [t, a, o, u]), G(() => u.subscribe((d) => {
+    d._frame && $t(d._frame);
   }), [u]);
   const l = window.devicePixelRatio || 1;
   return /* @__PURE__ */ at(
     "div",
     {
-      ref: oe([i, r]),
-      className: o,
+      ref: Ft([n, i]),
+      className: c,
       style: {
         position: "relative",
         overflow: "hidden",
@@ -458,10 +148,10 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       "data-canplotroot": !0,
       children: [
-        /* @__PURE__ */ D(
+        /* @__PURE__ */ L(
           "canvas",
           {
-            ref: n,
+            ref: o,
             width: a.width * l,
             height: a.height * l,
             style: {
@@ -472,74 +162,74 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
             }
           }
         ),
-        /* @__PURE__ */ D(ie, { frameStore: u, children: s })
+        /* @__PURE__ */ L(zt, { frameStore: u, children: s })
       ]
     }
   );
-}), ie = ({ frameStore: t, children: s }) => Ct(t, (o) => !!o._frame) ? /* @__PURE__ */ D(ht.Provider, { value: t, children: s }) : null, ce = (t) => {
+}), zt = ({ frameStore: t, children: s }) => wt(t, (c) => !!c._frame) ? /* @__PURE__ */ L(dt.Provider, { value: t, children: s }) : null, Yt = (t) => {
   const [s, e] = N({
     width: 0,
     height: 0
-  }), [o] = N(() => new ResizeObserver((i) => {
-    for (const n of i) {
-      const r = Math.round(n.contentRect.width), a = Math.round(n.contentRect.height);
+  }), [c] = N(() => new ResizeObserver((n) => {
+    for (const o of n) {
+      const i = Math.round(o.contentRect.width), a = Math.round(o.contentRect.height);
       e(
-        (u) => u.width !== r || u.height !== a ? { ...u, width: r, height: a } : u
+        (u) => u.width !== i || u.height !== a ? { ...u, width: i, height: a } : u
       );
     }
   }));
-  return J(() => {
+  return G(() => {
     if (!t.current) return;
-    const i = t.current.clientWidth, n = t.current.clientHeight;
+    const n = t.current.clientWidth, o = t.current.clientHeight;
     return e(
-      (r) => r.width !== i || r.height !== n ? { ...r, width: i, height: n } : r
-    ), o.observe(t.current, { box: "border-box" }), () => o.disconnect();
-  }, [o, t]), s;
-}, re = (t, s, e) => {
-  const o = e?.getContext("2d");
-  if (!o) return null;
-  const i = window.devicePixelRatio || 1;
+      (i) => i.width !== n || i.height !== o ? { ...i, width: n, height: o } : i
+    ), c.observe(t.current, { box: "border-box" }), () => c.disconnect();
+  }, [c, t]), s;
+}, Ot = (t, s, e) => {
+  const c = e?.getContext("2d");
+  if (!c) return null;
+  const n = window.devicePixelRatio || 1;
   if (s.width === 0 || s.height === 0)
     return null;
-  const n = {
+  const o = {
     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 h of t.scales)
-    h.axis && (h.origin === "x" ? (h.axis.position === "bottom" || h.axis.position === "top") && (n.height = Math.max(
+    h.axis && (h.origin === "x" ? (h.axis.position === "bottom" || h.axis.position === "top") && (o.height = Math.max(
       0,
-      n.height - h.axis.size
-    ), h.axis.position === "top" && (n.y += h.axis.size)) : (h.axis.position === "left" || h.axis.position === "right") && (n.width = Math.max(0, n.width - h.axis.size), h.axis.position === "left" && (n.x += h.axis.size)));
-  const r = {
-    x: n.x * i,
-    y: n.y * i,
-    width: n.width * i,
-    height: n.height * i
+      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 = {
+    x: o.x * n,
+    y: o.y * n,
+    width: o.width * n,
+    height: o.height * n
   }, a = [];
-  let u = t.padding.left * i, l = o.canvas.width - t.padding.right * i, d = o.canvas.height - t.padding.bottom * i, f = t.padding.top * i;
+  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;
   for (const h of t.scales) {
     if (!h.axis) {
       a.push({ ...h, axis: null });
       continue;
     }
-    let c;
+    let r;
     if (h.origin === "x")
       switch (h.axis.position) {
         case "bottom":
-          d -= h.axis.size * i, c = {
-            x: n.x,
-            y: d / i,
-            width: n.width,
+          d -= h.axis.size * n, r = {
+            x: o.x,
+            y: d / n,
+            width: o.width,
             height: h.axis.size
           };
           break;
         case "top":
-          f += h.axis.size * i, c = {
-            x: n.x,
-            y: f / i - h.axis.size,
-            width: n.width,
+          p += h.axis.size * n, r = {
+            x: o.x,
+            y: p / n - h.axis.size,
+            width: o.width,
             height: h.axis.size
           };
           break;
@@ -550,231 +240,231 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
     else
       switch (h.axis.position) {
         case "left":
-          u += h.axis.size * i, c = {
-            x: u / i - h.axis.size,
-            y: n.y,
+          u += h.axis.size * n, r = {
+            x: u / n - h.axis.size,
+            y: o.y,
             width: h.axis.size,
-            height: n.height
+            height: o.height
           };
           break;
         case "right":
-          l -= h.axis.size * i, c = {
-            x: l / i,
-            y: n.y,
+          l -= h.axis.size * n, r = {
+            x: l / n,
+            y: o.y,
             width: h.axis.size,
-            height: n.height
+            height: o.height
           };
           break;
         case "top":
         case "bottom":
           throw new Error("Invalid axis position for y origin");
       }
-    const p = {
-      x: c.x * i,
-      y: c.y * i,
-      width: c.width * i,
-      height: c.height * i
+    const m = {
+      x: r.x * n,
+      y: r.y * n,
+      width: r.width * n,
+      height: r.height * n
     };
     a.push({
       ...h,
       axis: {
         ...h.axis,
-        cssRect: c,
-        canvasRect: p
+        cssRect: r,
+        canvasRect: m
       }
     });
   }
   return {
-    ctx: o,
-    dpr: i,
+    ctx: c,
+    dpr: n,
     padding: t.padding,
     scales: a,
-    chartAreaCSS: n,
-    chartAreaCanvasPX: r
+    chartAreaCSS: o,
+    chartAreaCanvasPX: i
   };
-}, ae = (t) => {
-  t.ctx.clearRect(0, 0, t.ctx.canvas.width, t.ctx.canvas.height), qt(t);
-}, ye = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (j(
-  ({ getCtx: i, clampXPosToChartArea: n, clampYPosToChartArea: r, valToPos: a }) => {
-    const u = i();
-    u.save(), u.beginPath(), X(u, o);
+}, $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 = n(a(l.x, s)), f = r(a(l.y, e));
-      u.lineTo(d, f);
+      const d = o(a(l.x, s)), p = i(a(l.y, e));
+      u.lineTo(d, p);
     }
     u.stroke(), u.restore();
   },
-  [t, s, e, o]
-), null), xe = ({ data: t, xScaleId: s, yScaleId: e, radius: o = 5, style: i }) => (j(({ getCtx: n, valToPos: r, valFits: a }) => {
-  const u = n();
-  u.save(), u.beginPath(), X(u, i);
+  [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))
       continue;
-    const d = r(l.x, s), f = r(l.y, e);
-    u.moveTo(d + o, f), u.arc(d, f, o, 0, Math.PI * 2);
+    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);
   }
   u.stroke(), u.fill(), u.restore();
-}, [t, s, e, o, i]), null), Se = ({
+}, [t, s, e, c, n]), null), he = ({
   data: t,
   xScaleId: s,
   yScaleId: e,
-  style: o,
-  barWidth: i,
-  xPositionOffset: n,
-  radius: r
-}) => (j(
+  style: c,
+  barWidth: n,
+  xPositionOffset: o,
+  radius: i
+}) => (V(
   ({
     getCtx: a,
     valToPxDistance: u,
     valToPos: l,
     clampXPosToChartArea: d,
-    clampYPosToChartArea: f
+    clampYPosToChartArea: p
   }) => {
     if (t.length === 0) return;
-    const m = a();
-    m.save(), X(m, o);
-    const h = u(i, s);
-    m.beginPath();
-    for (const c of t) {
-      const y = l(c.x, s) - h / 2 + n * h, x = f(l(0, e)), C = f(l(c.y, e)), S = x - C, g = d(y), k = d(y + h) - g;
-      r ? m.roundRect(
+    const f = a();
+    f.save(), O(f, c);
+    const h = u(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(
+        w,
         g,
-        C,
         k,
         S,
-        r
-      ) : m.rect(g, C, k, S);
+        i
+      ) : f.rect(w, g, k, S);
     }
-    m.closePath(), m.fill(), o?.strokeStyle && m.stroke(), m.restore();
+    f.closePath(), f.fill(), c?.strokeStyle && f.stroke(), f.restore();
   },
-  [t, s, e, o, i, n, r]
-), null), ge = ({ data: t, xScaleId: s, yScaleId: e, style: o }) => (j(({ getCtx: i, clampXPosToChartArea: n, clampYPosToChartArea: r, valToPos: a }) => {
+  [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 f = n(a(d.x, s)), m = r(a(d.y[0], e)), h = r(a(d.y[1], e));
-    u.push({ x: f, y: m }), u.unshift({ x: f, y: h });
+    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 });
   }
-  const l = i();
+  const l = n();
   if (u.length > 0) {
-    l.save(), l.beginPath(), X(l, o), l.moveTo(u[0].x, u[0].y);
+    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();
   }
-}, [t, s, e, o]), null), ve = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: i }) => (j(
-  ({ getCtx: n, clampXPosToChartArea: r, clampYPosToChartArea: a, valToPos: u }) => {
-    const l = [], d = n();
-    for (const c of t) {
-      const p = r(u(c.x, e)), y = a(u(c.y, o));
-      l.push({ x: p, y });
+}, [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 });
     }
-    const f = l.at(0), m = l.at(-1);
-    if (!f || !m)
+    const p = l.at(0), f = l.at(-1);
+    if (!p || !f)
       return;
-    const h = a(u(0, o));
-    d.save(), d.beginPath(), X(d, i), d.moveTo(f.x, h);
-    for (const c of l)
-      d.lineTo(c.x, c.y);
-    if (d.lineTo(m.x, h), d.closePath(), d.fill(), s) {
-      d.beginPath(), d.moveTo(f.x, f.y);
-      for (const c of l)
-        d.lineTo(c.x, c.y);
+    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();
     }
     d.restore();
   },
-  [t, s, e, o, i]
-), null), we = (t, s) => pt(
+  [t, s, e, c, n]
+), null), pe = (t, s) => ht(
   ({
     clampXPosToChartArea: e,
-    clampYPosToChartArea: o,
-    getScale: i,
-    valToPos: n,
-    valFits: r
+    clampYPosToChartArea: c,
+    getScale: n,
+    valToPos: o,
+    valFits: i
   }) => {
     const a = {};
     for (const u in t) {
       const l = t[u];
       switch (l.exceeding) {
         case "discard": {
-          if (r(l.value, l.scaleId)) {
-            const d = n(l.value, l.scaleId, s);
+          if (i(l.value, l.scaleId)) {
+            const d = o(l.value, l.scaleId, s);
             a[u] = d;
           }
           break;
         }
         case "clamp": {
-          const d = n(l.value, l.scaleId, s);
-          a[u] = i(l.scaleId)?.origin === "x" ? e(d, s) : o(d, s);
+          const d = o(l.value, l.scaleId, s);
+          a[u] = n(l.scaleId)?.origin === "x" ? e(d, s) : c(d, s);
           break;
         }
       }
     }
     return a;
   }
-), T = () => {
+), b = () => {
   const t = [];
   return {
     addEventListener: (s, e) => (t.push({
       syncKey: s,
       callback: e
     }), () => {
-      const o = t.findIndex((i) => i.callback === e);
-      o !== -1 && t.splice(o, 1);
+      const c = t.findIndex((n) => n.callback === e);
+      c !== -1 && t.splice(c, 1);
     }),
     dispatchEvent: (s, e) => {
-      for (const o of t)
-        o.syncKey === s && o.callback(s, e);
+      for (const c of t)
+        c.syncKey === s && c.callback(s, e);
     }
   };
 }, v = {
-  dblclick: T(),
-  click: T(),
-  move: T(),
-  mousedown: T(),
-  mouseup: T(),
-  spanselect: T(),
-  documentmouseup: T(),
-  pressandwheel: T(),
-  sync_dblclick: T(),
-  sync_click: T(),
-  sync_move: T(),
-  sync_mousedown: T(),
-  sync_mouseup: T(),
-  sync_spanselect: T(),
-  sync_pressandwheel: T()
-}, b = (t, s, e) => {
-  const o = G.useRef(e);
-  o.current = e, G.useEffect(() => v[t].addEventListener(
+  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) => {
+  const c = Z.useRef(e);
+  c.current = e, Z.useEffect(() => v[t].addEventListener(
     s,
-    (n, r) => {
-      o.current(r, n);
+    (o, i) => {
+      c.current(i, o);
     }
-  ), [s, t, o]);
-}, mt = G.createContext(""), ft = (t, s) => {
-  const e = G.useContext(mt);
-  return b(t, e, s);
-}, le = (t, s, e, o, i) => {
+  ), [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) => {
   if (!s) return;
-  const n = o ?? e.scales.find((f) => f.origin === "x")?.id, r = i ?? e.scales.find((f) => f.origin === "y")?.id;
-  if (!n || !r)
+  const o = c ?? e.scales.find((p) => p.origin === "x")?.id, i = n ?? e.scales.find((p) => p.origin === "y")?.id;
+  if (!o || !i)
     return;
   const a = t.clientX - s.left, u = {
-    scaleId: n,
-    value: L(e, a, n, "css")
+    scaleId: o,
+    value: U(e, a, o, "css")
   }, l = t.clientY - s.top, d = {
-    scaleId: r,
-    value: L(e, l, r, "css")
+    scaleId: i,
+    value: U(e, l, i, "css")
   };
   return { pointerSyncPosition: { x: u, y: d }, cssX: a, cssY: l };
-}, Y = (t, s) => {
-  const e = t.x ? K(
+}, F = (t, s) => {
+  const e = t.x ? B(
     s,
     t.x.value,
     t.x.scaleId,
     "css"
-  ) : 0, o = t.y ? K(
+  ) : 0, c = t.y ? B(
     s,
     t.y.value,
     t.y.scaleId,
@@ -782,46 +472,46 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
   ) : 0;
   return {
     cssX: e,
-    cssY: o,
+    cssY: c,
     scaled: Object.fromEntries(
-      s.scales.map((i) => {
-        const n = i.origin === "y" ? o : e;
-        return [i.id, L(s, n, i.id, "css")];
+      s.scales.map((n) => {
+        const o = n.origin === "y" ? c : e;
+        return [n.id, U(s, o, n.id, "css")];
       })
     )
   };
-}, vt = (t, s, e) => {
+}, xt = (t, s, e) => {
   if (!s) {
-    const r = t === "x" ? e.chartAreaCSS.x : e.chartAreaCSS.y, a = t === "x" ? e.chartAreaCSS.x + e.chartAreaCSS.width : e.chartAreaCSS.y + e.chartAreaCSS.height;
+    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;
     return {
-      fromCSS: r,
+      fromCSS: i,
       toCSS: a,
       scaled: e.scales.flatMap((u) => {
         if (u.origin !== t)
           return [];
-        const { min: l, max: d } = A(e, u.id);
+        const { min: l, max: d } = D(e, u.id);
         return [{ scaleId: u.id, from: l, to: d }];
       })
     };
   }
-  const o = K(
+  const c = B(
     e,
     s.from,
     s.scaleId,
     "css"
-  ), i = K(
+  ), n = B(
     e,
     s.to,
     s.scaleId,
     "css"
-  ), n = e.scales.flatMap(
-    (r) => {
-      if (r.origin !== t)
+  ), o = e.scales.flatMap(
+    (i) => {
+      if (i.origin !== t)
         return [];
-      const a = L(e, o, r.id, "css"), u = L(e, i, r.id, "css");
+      const a = U(e, c, i.id, "css"), u = U(e, n, i.id, "css");
       return [
         {
-          scaleId: r.id,
+          scaleId: i.id,
           from: a,
           to: u
         }
@@ -829,89 +519,89 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
     }
   );
   return {
-    fromCSS: o,
-    toCSS: i,
-    scaled: n
+    fromCSS: c,
+    toCSS: n,
+    scaled: o
   };
-}, Ce = ({
+}, ye = ({
   id: t,
   onClick: s,
   onDblClick: e,
-  onMouseMove: o,
-  onMouseDown: i,
-  onMouseUp: n,
-  onDocumentMouseUp: r,
+  onMouseMove: c,
+  onMouseDown: n,
+  onMouseUp: o,
+  onDocumentMouseUp: i,
   onSpanSelect: a,
   className: u,
   style: l,
   sync: d,
-  children: f
+  children: p
 }) => {
-  const m = Dt(), h = t || m;
-  return b("dblclick", h, (c) => {
-    e?.(c);
-  }), b("click", h, (c) => {
-    s?.(c);
-  }), b("move", h, (c) => {
-    o?.(c);
-  }), b("mousedown", h, (c) => {
-    i?.(c);
-  }), b("mouseup", h, (c) => {
-    n?.(c);
-  }), b("documentmouseup", h, (c) => {
-    r?.(c);
-  }), b("spanselect", h, (c) => {
-    a?.(c);
+  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__ */ D(
-      ue,
+    /* @__PURE__ */ L(
+      Bt,
       {
         className: u,
         style: l,
         sync: d
       }
     ),
-    f
+    p
   ] });
-}, ue = ({ className: t, style: s, sync: e }) => {
-  const o = U(null), i = pt(), n = U(i);
-  n.current = i;
-  const r = lt(mt), a = e?.key || r, u = U(null), l = U(null), d = U(null), f = () => {
-    const c = o.current?.parentElement;
-    if (c) {
-      if (c.dataset.canplotroot === void 0)
+}, Bt = ({ className: t, style: s, sync: e }) => {
+  const c = R(null), n = ht(), o = R(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)
         throw new Error(
           "ChartAreaInteractions must be used within a CanPlot component"
         );
-      return c.getBoundingClientRect();
+      return r.getBoundingClientRect();
     }
-  }, m = (c, p) => {
-    const y = le(
-      c,
-      f(),
-      n.current,
+  }, f = (r, m) => {
+    const y = Nt(
+      r,
+      p(),
+      o.current,
       e?.xViaScaleId,
       e?.yViaScaleId
     );
-    y && p(
+    y && m(
       y.pointerSyncPosition,
       { cssX: y.cssX, cssY: y.cssY },
       {
-        ctrlKey: c.ctrlKey,
-        altKey: c.altKey,
-        shiftKey: c.shiftKey,
-        metaKey: c.metaKey
+        ctrlKey: r.ctrlKey,
+        altKey: r.altKey,
+        shiftKey: r.shiftKey,
+        metaKey: r.metaKey
       }
     );
-  }, h = U(m);
-  return h.current = m, Xt(() => {
-    const c = (S) => {
-      const g = l.current;
-      g && v.sync_spanselect.dispatchEvent(a, {
-        ...g,
+  }, h = R(f);
+  return h.current = f, Rt(() => {
+    const r = (S) => {
+      const w = l.current;
+      w && v.sync_spanselect.dispatchEvent(a, {
+        ...w,
         completed: !0
       }), v.documentmouseup.dispatchEvent(a, {
-        frame: n.current,
+        frame: o.current,
         keys: {
           ctrlKey: S.ctrlKey,
           altKey: S.altKey,
@@ -919,25 +609,25 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
           metaKey: S.metaKey
         }
       });
-    }, p = (S) => {
-      const g = {
+    }, m = (S) => {
+      const w = {
         ctrlKey: S.ctrlKey,
         altKey: S.altKey,
         shiftKey: S.shiftKey,
         metaKey: S.metaKey
       }, k = d.current;
-      if (k && Object.entries(g).some(
+      if (k && Object.entries(w).some(
         ([E, M]) => k.keys[E] !== M
       )) {
-        const E = { ...k, keys: g };
+        const E = { ...k, keys: w };
         d.current = E, v.sync_move.dispatchEvent(a, E);
       }
-      const w = l.current;
-      if (w && Object.entries(g).some(
-        ([E, M]) => w.keys[E] !== M
+      const C = l.current;
+      if (C && Object.entries(w).some(
+        ([E, M]) => C.keys[E] !== M
       )) {
         S.stopPropagation(), S.preventDefault();
-        const E = { ...w, keys: g };
+        const E = { ...C, keys: w };
         l.current = E, v.sync_spanselect.dispatchEvent(
           a,
           E
@@ -946,49 +636,49 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
     }, y = (S) => {
       h.current(
         S,
-        (g, { cssX: k, cssY: w }, E) => {
+        (w, { cssX: k, cssY: C }, E) => {
           const M = u.current;
-          if (!M || !g.x || !g.y) return;
-          const _ = n.current, P = M.xRangeCss.start, B = k, F = M.yRangeCss.start, et = w, st = A(_, g.x.scaleId), nt = A(_, g.y.scaleId);
+          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: B },
-            yRangeCss: { start: F, end: et }
+            xRangeCss: { start: P, end: $ },
+            yRangeCss: { start: K, end: et }
           };
-          let R = "none";
-          const ot = Math.abs(F - et), it = Math.abs(P - B);
-          ot < 10 && it < 10 ? R = "none" : ot > 30 && it > 30 ? R = "box" : ot > it ? R = "y" : R = "x";
-          const Pt = R === "x" || R === "box" ? {
+          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" ? {
             scaleId: st.id,
-            from: L(
-              _,
-              O(n.current, P, "css"),
+            from: U(
+              A,
+              z(o.current, P, "css"),
               st.id,
               "css"
             ),
-            to: L(
-              _,
-              O(n.current, B, "css"),
+            to: U(
+              A,
+              z(o.current, $, "css"),
               st.id,
               "css"
             )
-          } : void 0, At = R === "y" || R === "box" ? {
+          } : void 0, kt = _ === "y" || _ === "box" ? {
             scaleId: nt.id,
-            from: L(
-              _,
-              $(n.current, F, "css"),
+            from: U(
+              A,
+              Y(o.current, K, "css"),
               nt.id,
               "css"
             ),
-            to: L(
-              _,
-              $(n.current, et, "css"),
+            to: U(
+              A,
+              Y(o.current, et, "css"),
               nt.id,
               "css"
             )
           } : void 0, yt = {
-            mode: R,
-            xRange: Pt,
-            yRange: At,
+            mode: _,
+            xRange: Tt,
+            yRange: kt,
             completed: !1,
             keys: E
           };
@@ -999,13 +689,13 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
         }
       );
     }, x = (S) => {
-      h.current(S, (g, k, w) => {
-        if (Object.values(w).some((M) => M)) {
+      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: g,
-            keys: w,
+            positions: w,
+            keys: C,
             deltaX: S.deltaX,
             deltaY: S.deltaY,
             deltaAbs: M
@@ -1013,292 +703,292 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
         }
       });
     };
-    document.addEventListener("mouseup", c), document.addEventListener("keydown", p), document.addEventListener("keyup", p), document.addEventListener("mousemove", y);
-    const C = o.current;
-    return C?.addEventListener("wheel", x, {
+    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, {
       passive: !1
     }), () => {
-      document.removeEventListener("mouseup", c), document.removeEventListener("keydown", p), document.removeEventListener("keyup", p), document.removeEventListener("mousemove", y), C?.removeEventListener("wheel", x);
+      document.removeEventListener("mouseup", r), document.removeEventListener("keydown", m), document.removeEventListener("keyup", m), document.removeEventListener("mousemove", y), g?.removeEventListener("wheel", x);
     };
-  }, [n, a, h]), b("sync_dblclick", a, (c) => {
-    const p = Y(
-      c.positions,
-      n.current
+  }, [o, a, h]), T("sync_dblclick", a, (r) => {
+    const m = F(
+      r.positions,
+      o.current
     );
-    p && v.dblclick.dispatchEvent(r, {
-      frame: n.current,
-      pointer: p,
-      keys: c.keys
+    m && v.dblclick.dispatchEvent(i, {
+      frame: o.current,
+      pointer: m,
+      keys: r.keys
     });
-  }), b("sync_click", a, (c) => {
-    const p = Y(
-      c.positions,
-      n.current
+  }), T("sync_click", a, (r) => {
+    const m = F(
+      r.positions,
+      o.current
     );
-    p && v.click.dispatchEvent(r, {
-      frame: n.current,
-      pointer: p,
-      keys: c.keys
+    m && v.click.dispatchEvent(i, {
+      frame: o.current,
+      pointer: m,
+      keys: r.keys
     });
-  }), b("sync_move", a, (c) => {
-    const p = c.positions ? Y(
-      c.positions,
-      n.current
+  }), T("sync_move", a, (r) => {
+    const m = r.positions ? F(
+      r.positions,
+      o.current
     ) : null;
-    d.current = c, v.move.dispatchEvent(r, {
-      frame: n.current,
-      pointer: p ?? null,
-      keys: c.keys
+    d.current = r, v.move.dispatchEvent(i, {
+      frame: o.current,
+      pointer: m ?? null,
+      keys: r.keys
     });
-  }), b("sync_mousedown", a, (c) => {
-    const p = Y(
-      c.positions,
-      n.current
+  }), T("sync_mousedown", a, (r) => {
+    const m = F(
+      r.positions,
+      o.current
     );
-    p && v.mousedown.dispatchEvent(r, {
-      frame: n.current,
-      pointer: p,
-      keys: c.keys
+    m && v.mousedown.dispatchEvent(i, {
+      frame: o.current,
+      pointer: m,
+      keys: r.keys
     });
-  }), b("sync_mouseup", a, (c) => {
-    const p = Y(
-      c.positions,
-      n.current
+  }), T("sync_mouseup", a, (r) => {
+    const m = F(
+      r.positions,
+      o.current
     );
-    p && v.mouseup.dispatchEvent(r, {
-      frame: n.current,
-      pointer: p,
-      keys: c.keys
+    m && v.mouseup.dispatchEvent(i, {
+      frame: o.current,
+      pointer: m,
+      keys: r.keys
     });
-  }), b(
+  }), T(
     "sync_pressandwheel",
     a,
-    (c) => {
-      const p = Y(
-        c.positions,
-        n.current
+    (r) => {
+      const m = F(
+        r.positions,
+        o.current
       );
-      p && v.pressandwheel.dispatchEvent(r, {
-        frame: n.current,
-        pointer: p,
-        keys: c.keys,
-        deltaX: c.deltaX,
-        deltaY: c.deltaY,
-        deltaAbs: c.deltaAbs
+      m && v.pressandwheel.dispatchEvent(i, {
+        frame: o.current,
+        pointer: m,
+        keys: r.keys,
+        deltaX: r.deltaX,
+        deltaY: r.deltaY,
+        deltaAbs: r.deltaAbs
       });
     }
-  ), b("sync_spanselect", a, (c) => {
-    const p = vt(
+  ), T("sync_spanselect", a, (r) => {
+    const m = xt(
       "x",
-      c.xRange,
-      n.current
-    ), y = vt(
+      r.xRange,
+      o.current
+    ), y = xt(
       "y",
-      c.yRange,
-      n.current
-    ), x = p.scaled, C = y.scaled;
-    c.completed && (u.current = null), v.spanselect.dispatchEvent(r, {
-      mode: c.mode,
-      frame: n.current,
+      r.yRange,
+      o.current
+    ), x = m.scaled, g = y.scaled;
+    r.completed && (u.current = null), v.spanselect.dispatchEvent(i, {
+      mode: r.mode,
+      frame: o.current,
       xRanges: x,
-      yRanges: C,
-      completed: c.completed,
-      x: { fromCSS: p.fromCSS, toCSS: p.toCSS },
+      yRanges: g,
+      completed: r.completed,
+      x: { fromCSS: m.fromCSS, toCSS: m.toCSS },
       y: { fromCSS: y.fromCSS, toCSS: y.toCSS },
-      keys: c.keys
+      keys: r.keys
     });
-  }), /* @__PURE__ */ D(
+  }), /* @__PURE__ */ L(
     "div",
     {
-      ref: o,
+      ref: c,
       id: "interactions",
       className: t,
       style: {
         position: "absolute",
-        left: i.chartAreaCSS.x,
-        top: i.chartAreaCSS.y,
-        width: i.chartAreaCSS.width,
-        height: i.chartAreaCSS.height,
+        left: n.chartAreaCSS.x,
+        top: n.chartAreaCSS.y,
+        width: n.chartAreaCSS.width,
+        height: n.chartAreaCSS.height,
         zIndex: 25,
         ...s
       },
-      onClick: (c) => {
-        m(c, (p, y, x) => {
+      onClick: (r) => {
+        f(r, (m, y, x) => {
           v.sync_click.dispatchEvent(a, {
-            positions: p,
+            positions: m,
             keys: x
           });
         });
       },
-      onMouseLeave: (c) => {
-        m(c, (p, y, x) => {
+      onMouseLeave: (r) => {
+        f(r, (m, y, x) => {
           v.sync_move.dispatchEvent(a, {
             positions: null,
             keys: x
           });
         });
       },
-      onMouseMove: (c) => {
-        m(c, (p, y, x) => {
+      onMouseMove: (r) => {
+        f(r, (m, y, x) => {
           v.sync_move.dispatchEvent(a, {
-            positions: p,
+            positions: m,
             keys: x
           });
         });
       },
-      onMouseDown: (c) => {
-        m(c, (p, { cssX: y, cssY: x }, C) => {
+      onMouseDown: (r) => {
+        f(r, (m, { cssX: y, cssY: x }, g) => {
           v.sync_mousedown.dispatchEvent(a, {
-            positions: p,
-            keys: C
+            positions: m,
+            keys: g
           }), l.current = null, u.current = {
             xRangeCss: { start: y, end: y },
             yRangeCss: { start: x, end: x }
           };
         });
       },
-      onMouseUp: (c) => {
-        m(c, (p, y, x) => {
+      onMouseUp: (r) => {
+        f(r, (m, y, x) => {
           v.sync_mouseup.dispatchEvent(a, {
-            positions: p,
+            positions: m,
             keys: x
           });
-          const C = l.current;
+          const g = l.current;
           l.current = null;
           const S = u.current;
-          if (u.current = null, S && C) {
-            const g = {
-              ...C,
+          if (u.current = null, S && g) {
+            const w = {
+              ...g,
               keys: x,
               completed: !0
             };
             v.sync_spanselect.dispatchEvent(
               a,
-              g
+              w
             );
           }
         });
       },
-      onDoubleClick: (c) => {
-        m(c, (p, y, x) => {
+      onDoubleClick: (r) => {
+        f(r, (m, y, x) => {
           v.sync_dblclick.dispatchEvent(a, {
-            positions: p,
+            positions: m,
             keys: x
           });
         });
       }
     }
   );
-}, Te = ({ data: t, renderTooltip: s, xScaleId: e }) => {
-  const [o, i] = N(null);
-  ft("move", (r) => {
-    i(r);
+}, xe = ({ data: t, renderTooltip: s, xScaleId: e }) => {
+  const [c, n] = N(null);
+  ft("move", (i) => {
+    n(i);
   });
-  const n = wt(() => {
-    if (!o)
+  const o = gt(() => {
+    if (!c)
       return null;
-    const { frame: r, pointer: a } = o, u = a?.scaled[e];
+    const { frame: i, pointer: a } = c, u = a?.scaled[e];
     if (u === void 0)
       return null;
     const l = [];
     let d = u;
-    for (const f of t) {
-      let m = null, h = 1 / 0;
-      for (const [p, y] of f.points.entries()) {
-        if (!ct(r, y.x, e) || !ct(r, y.y, f.yScaleId))
+    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))
           continue;
         const x = Math.abs(y.x - u);
-        x < h && (h = x, m = p);
+        x < h && (h = x, f = m);
       }
-      const c = f.points[m ?? -1];
-      if (!c || ut(r, h, e, "css") > 30) {
-        l.push({ seriesId: f.seriesId, y: null });
+      const r = p.points[f ?? -1];
+      if (!r || ut(i, h, e, "css") > 30) {
+        l.push({ seriesId: p.seriesId, y: null });
         continue;
       }
-      d = c.x, l.push({
-        seriesId: f.seriesId,
-        y: c.y
+      d = r.x, l.push({
+        seriesId: p.seriesId,
+        y: r.y
       });
     }
     return {
-      frame: r,
+      frame: i,
       x: d,
       points: l
     };
-  }, [t, o, e]);
-  return s(n);
-}, be = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: o }) => {
-  const [i, n] = N(null);
+  }, [t, c, e]);
+  return s(o);
+}, Se = ({ makeXStyle: t, makeXClassName: s, makeYStyle: e, makeYClassName: c }) => {
+  const [n, o] = N(null);
   if (ft("move", (d) => {
-    n(d);
-  }), !i)
+    o(d);
+  }), !n)
     return null;
-  const { frame: r, pointer: a } = i, u = O(r, a?.cssX ?? 0, "css"), l = $(r, a?.cssY ?? 0, "css");
-  return /* @__PURE__ */ at(_t, { children: [
-    /* @__PURE__ */ D(
+  const { frame: i, pointer: a } = n, u = z(i, a?.cssX ?? 0, "css"), l = Y(i, a?.cssY ?? 0, "css");
+  return /* @__PURE__ */ at(Et, { children: [
+    /* @__PURE__ */ L(
       "div",
       {
         "data-show": !!a,
-        className: s?.(i),
+        className: s?.(n),
         style: {
           position: "absolute",
           left: 0,
-          top: r.chartAreaCSS.y,
-          height: r.chartAreaCSS.height,
+          top: i.chartAreaCSS.y,
+          height: i.chartAreaCSS.height,
           borderColor: "red",
           borderLeftWidth: "1px",
           borderLeftStyle: "solid",
           pointerEvents: "none",
           opacity: a ? 1 : 0,
           transform: `translateX(${u}px)`,
-          ...t?.(i)
+          ...t?.(n)
         }
       }
     ),
-    /* @__PURE__ */ D(
+    /* @__PURE__ */ L(
       "div",
       {
-        className: o?.(i),
+        className: c?.(n),
         "data-show": !!a,
         style: {
           position: "absolute",
           top: 0,
           height: 0,
           borderTop: "solid 1px red",
-          left: r.chartAreaCSS.x,
-          width: r.chartAreaCSS.width,
+          left: i.chartAreaCSS.x,
+          width: i.chartAreaCSS.width,
           pointerEvents: "none",
           opacity: a ? 1 : 0,
           transform: `translateY(${l}px)`,
-          ...e?.(i)
+          ...e?.(n)
         }
       }
     )
   ] });
-}, ke = ({ makeClassName: t, makeStyle: s }) => {
-  const [e, o] = N(null);
-  if (ft("spanselect", (m) => {
-    o(m.mode === "none" || m.completed ? null : m);
+}, ge = ({ makeClassName: t, makeStyle: s }) => {
+  const [e, c] = N(null);
+  if (ft("spanselect", (f) => {
+    c(f.mode === "none" || f.completed ? null : f);
   }), !e)
     return null;
-  const i = O(
+  const n = z(
     e.frame,
     e.x.fromCSS,
     "css"
-  ), n = O(
+  ), o = z(
     e.frame,
     e.x.toCSS,
     "css"
-  ), r = $(
+  ), i = Y(
     e.frame,
     e.y.fromCSS,
     "css"
-  ), a = $(
+  ), a = Y(
     e.frame,
     e.y.toCSS,
     "css"
-  ), u = Math.min(i, n), l = Math.min(r, a), d = Math.abs(n - i), f = Math.abs(a - r);
-  return /* @__PURE__ */ D(
+  ), u = Math.min(n, o), l = Math.min(i, a), d = Math.abs(o - n), p = Math.abs(a - i);
+  return /* @__PURE__ */ L(
     "div",
     {
       className: t?.(e),
@@ -1308,54 +998,333 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
         left: `${u}px`,
         top: `${l}px`,
         width: `${d}px`,
-        height: `${f}px`,
+        height: `${p}px`,
         pointerEvents: "none",
         ...s?.(e)
       }
     }
   );
-}, Ee = ({ style: t, children: s, scaleId: e, ...o }) => {
-  const i = pt((n) => n.getScale(e)?.axis);
-  return i ? /* @__PURE__ */ D(
+}, we = ({ style: t, children: s, scaleId: e, ...c }) => {
+  const n = ht((o) => o.getScale(e)?.axis);
+  return n ? /* @__PURE__ */ L(
     "div",
     {
       style: {
         position: "absolute",
         backgroundColor: "#0000ff11",
-        left: i.cssRect.x,
-        top: i.cssRect.y,
-        height: i.cssRect.height,
-        width: i.cssRect.width,
+        left: n.cssRect.x,
+        top: n.cssRect.y,
+        height: n.cssRect.height,
+        width: n.cssRect.width,
         ...t
       },
-      ...o,
+      ...c,
       children: s
     }
   ) : null;
+}, vt = 60, Vt = 30, Ct = "UTC", Ht = "en-GB", ve = ({
+  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(
+    c,
+    u,
+    e.id,
+    "canvas"
+  ), d = H.find((f) => f > l) ?? 1;
+  let p = n % d < Number.EPSILON ? n : n + d - n % d;
+  for (; p <= o; )
+    i.push(p), p += d;
+  return (s ?? jt)(i);
+}, jt = (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 = [
+  // second divisors
+  [1, "milliseconds"],
+  [2, "milliseconds"],
+  [5, "milliseconds"],
+  [10, "milliseconds"],
+  [20, "milliseconds"],
+  [50, "milliseconds"],
+  [100, "milliseconds"],
+  [200, "milliseconds"],
+  [500, "milliseconds"],
+  // minute divisors
+  [1, "seconds"],
+  [5, "seconds"],
+  [10, "seconds"],
+  [15, "seconds"],
+  [30, "seconds"],
+  // hour divisors
+  [1, "minutes"],
+  [5, "minutes"],
+  [10, "minutes"],
+  [15, "minutes"],
+  [30, "minutes"],
+  // day divisors
+  [1, "hours"],
+  [2, "hours"],
+  [3, "hours"],
+  [4, "hours"],
+  [6, "hours"],
+  [8, "hours"],
+  [12, "hours"],
+  // month divisors
+  [1, "days"],
+  [3, "days"],
+  [5, "days"],
+  [7, "days"],
+  [10, "days"],
+  [15, "days"],
+  // year divisors
+  [1, "months"],
+  [2, "months"],
+  [3, "months"],
+  [4, "months"],
+  [6, "months"],
+  // century divisors
+  [1, "years"],
+  [2, "years"],
+  [5, "years"],
+  [10, "years"],
+  [25, "years"],
+  [50, "years"],
+  [100, "years"]
+], j = (t) => {
+  const [s, e] = t;
+  switch (e) {
+    case "milliseconds":
+      return s;
+    case "seconds":
+      return s * bt;
+    case "minutes":
+      return s * pt;
+    case "hours":
+      return s * q;
+    case "days":
+      return s * tt;
+    case "months":
+      return s * Zt;
+    case "years":
+      return s * Gt;
+  }
+}, qt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCMilliseconds(e.getUTCMilliseconds() + s), e.getTime();
+}, Qt = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCSeconds(e.getUTCSeconds() + s), e.getTime();
+}, te = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCMinutes(e.getUTCMinutes() + s), e.getTime();
+}, ee = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCHours(e.getUTCHours() + s), e.getTime();
+}, se = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCDate(e.getUTCDate() + s), e.getTime();
+}, St = (t, s) => {
+  const e = new Date(t);
+  return e.setUTCMonth(e.getUTCMonth() + s), e.getTime();
+}, X = (t, s) => {
+  const [e, c] = s;
+  switch (c) {
+    case "milliseconds":
+      return qt(t, e);
+    case "seconds":
+      return Qt(t, e);
+    case "minutes":
+      return te(t, e);
+    case "hours":
+      return ee(t, e);
+    case "days":
+      return se(t, e);
+    case "months":
+      return St(t, e);
+    case "years":
+      return St(t, e * 12);
+  }
+};
+function W(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);
+  };
+  switch (n) {
+    case "milliseconds":
+      o.setUTCMilliseconds(
+        Math.ceil(o.getUTCMilliseconds() / c) * c
+      );
+      break;
+    case "seconds":
+      o.setUTCSeconds(
+        Math.ceil(o.getUTCSeconds() / c) * c,
+        0
+      );
+      break;
+    case "minutes":
+      o.setUTCMinutes(
+        Math.ceil(o.getTime() % q / pt / c) * c,
+        0,
+        0
+      );
+      break;
+    case "hours":
+      o.setUTCHours(
+        Math.ceil(o.getTime() % tt / q / c) * c,
+        0,
+        0,
+        0
+      );
+      break;
+    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])));
+      break;
+  }
+  return o.getTime();
+}, Ce = ({
+  timeZone: t = Ct,
+  space: s = vt,
+  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];
+  let x;
+  for (; ; ) {
+    switch (h) {
+      case "milliseconds":
+      case "seconds":
+      case "minutes":
+      case "hours": {
+        x = X(r, [y.length * f, h]);
+        break;
+      }
+      case "days": {
+        const g = X(r, [
+          y.length * f,
+          h
+        ]);
+        x = X(g, [
+          m - W(g, t),
+          "hours"
+        ]);
+        break;
+      }
+      case "months":
+      case "years": {
+        const g = X(
+          X(X(r, [m, "hours"]), [
+            y.length * f,
+            h
+          ]),
+          [-m, "hours"]
+        );
+        x = X(g, [
+          m - W(g, t),
+          "hours"
+        ]);
+        break;
+      }
+    }
+    if (x > u)
+      break;
+    y.push(x);
+  }
+  return (e ?? oe({
+    locale: c,
+    showTimezone: n,
+    timeZone: t
+  }))(y);
+}, I = (t, s, e) => t.find((c) => c.type === e)?.value !== s.find((c) => c.type === e)?.value, oe = ({
+  timeZone: t = Ct,
+  locale: s = Ht,
+  showTimezone: e = !0
+}) => {
+  const c = new Intl.DateTimeFormat(s, {
+    year: "numeric",
+    day: "numeric",
+    month: "short",
+    hour: "numeric",
+    hourCycle: "h23",
+    minute: "numeric",
+    second: "numeric",
+    fractionalSecondDigits: 3,
+    timeZoneName: "short",
+    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"
+          )?.value;
+          A = `:${P}` + (u ? `.${$}` : "");
+        }
+        k.push(
+          `${C}:${E}${A}` + (e && x ? ` ${M}` : "")
+        );
+      }
+      return (r || m) && k.push(
+        [
+          l.label.find((C) => C.type === "month")?.value,
+          r && l.label.find((C) => C.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(`
+`)
+      };
+    });
+  };
 };
 export {
-  ge as AreaPlot,
-  Ee as AxisOverlay,
-  Se as BarPlot,
-  fe as CanPlot,
-  Ce as ChartAreaInteractions,
-  be as Crosshair,
-  ye as LinePlot,
-  xe as ScatterPlot,
-  ke as SelectBox,
-  ve as SparklinePlot,
-  Te as TooltipsX,
-  X as applyStyles,
-  O as clampXPosToChartArea,
-  $ as clampYPosToChartArea,
-  A as getScale,
-  V as isXScale,
-  me as isYScale,
-  L as posToVal,
-  Ft as pxToValDistance,
-  we as usePositioned,
-  ct as valFits,
-  K as valToPos,
+  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,
+  Q as isXScale,
+  ae as isYScale,
+  ve as makeLinearTicks,
+  oe as makeTimeTickFormat,
+  Ce as makeTimeTicks,
+  U as posToVal,
+  Lt as pxToValDistance,
+  V as useDrawEffect,
+  ht as useFrameState,
+  pe as usePositioned,
+  rt as valFits,
+  B as valToPos,
   ut as valToPxDistance
 };
 //# sourceMappingURL=canplot.mjs.map