@canplot/react 0.5.10 → 0.5.11

package/dist/canplot.mjs

@@ -2,8 +2,8 @@ var Be = Object.defineProperty;
 var ze = (e, t, n) => t in e ? Be(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var K = (e, t, n) => ze(e, typeof t != "symbol" ? t + "" : t, n);
 import { jsxs as pe, jsx as R, Fragment as Ne } from "react/jsx-runtime";
-import D, { version as $e, createContext as ye, forwardRef as je, useRef as k, useState as B, useMemo as Q, useLayoutEffect as $, useCallback as He, useContext as G, useEffect as ke, useId as Ve } from "react";
-const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (e, t) => {
+import D, { version as $e, createContext as ye, forwardRef as je, useRef as A, useState as B, useMemo as Q, useLayoutEffect as $, useCallback as He, useContext as G, useEffect as Ae, useId as Ve } from "react";
+const re = (e, t, n) => Math.min(Math.max(e, t), n), At = (e) => e.reduce((t, n) => t + (n ?? 0), 0), Rt = (e, t) => {
   let n = 0;
   for (let s = 0; s < e.length; s++)
     Math.abs(e[s] - t) < Math.abs(e[n] - t) && (n = s);
@@ -14,7 +14,7 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n)
     return null;
   const i = s === "canvas" ? e.chartAreaCanvasPX : e.chartAreaCSS, r = (o.origin === "x" ? i.width : i.height) / (o.max - o.min);
   return t / r;
-}, F = (e, t) => e.scales.find((n) => n.id === t) ?? null, U = (e, t) => {
+}, F = (e, t) => e.scales.find((n) => n.id === t) ?? null, _ = (e, t) => {
   const n = window.devicePixelRatio || 1;
   e.lineCap = t?.lineCap ?? "butt", e.lineDashOffset = n * (t?.lineDashOffset ?? 0), e.lineJoin = t?.lineJoin ?? "miter", e.lineWidth = n * (t?.lineWidth ?? 1), e.miterLimit = n * (t?.miterLimit ?? 10), e.strokeStyle = t?.strokeStyle ?? "black", e.fillStyle = t?.fillStyle ?? e.strokeStyle, e.font = t?.font ?? `${10 * n}px sans-serif`, e.textAlign = t?.textAlign ?? "start", e.direction = t?.direction ?? "inherit", e.textBaseline = t?.textBaseline ?? "alphabetic", e.fontKerning = t?.fontKerning ?? "auto";
 }, ge = (e, t, n, s) => {
@@ -81,7 +81,7 @@ const re = (e, t, n) => Math.min(Math.max(e, t), n), kt = (e) => e.reduce((t, n)
   const { ctx: t, scales: n } = e;
   for (const s of n) {
     if (!s.axis) continue;
-    t.save(), U(t, {
+    t.save(), _(t, {
       strokeStyle: "black",
       fillStyle: "black",
       lineWidth: 1,
@@ -170,7 +170,7 @@ class Le {
   }
 }
 const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
-  const i = k(null), r = k(null), c = tt(r), [u, l] = B(null), p = Q(
+  const i = A(null), r = A(null), c = tt(r), [u, l] = B(null), p = Q(
     () => nt(e, c, u),
     [e, c, u]
   );
@@ -216,7 +216,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   $(() => {
     e?.ctx.clearRect(0, 0, e.ctx.canvas.width, e.ctx.canvas.height);
   }, [e, s]);
-  const i = k(null);
+  const i = A(null);
   i.current = e, $(() => {
     n.subscribe(() => {
       i.current && qe(i.current);
@@ -355,9 +355,9 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     throw new Error("useFrame must be used within a CanPlot component");
   const [r] = B(() => new Le());
   r._updateFrame(s);
-  const c = k(r);
+  const c = A(r);
   c.current = r;
-  const u = k(t);
+  const u = A(t);
   u.current = t, $(() => {
     const l = i.subscribe(
       () => {
@@ -370,7 +370,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     };
   }, [i, e, r]), $(() => {
     o();
-  }, [o, ...n]), ke(() => () => {
+  }, [o, ...n]), Ae(() => () => {
     o();
   }, [o]);
 }, Ue = () => {
@@ -384,7 +384,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
 }, st = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o, globalAlpha: i }) => (j(
   e,
   ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: l }) => {
-    r.save(), r.beginPath(), U(r, o), i !== void 0 && (r.globalAlpha = i);
+    r.save(), r.beginPath(), _(r, o), i !== void 0 && (r.globalAlpha = i);
     for (const p of t) {
       const f = c(l(p.x, n, "canvas")), a = u(l(p.y, s, "canvas"));
       f === null || a === null || r.lineTo(f, a);
@@ -411,7 +411,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     clampXPosToChartArea: a,
     clampYPosToChartArea: g
   }) => {
-    l.save(), U(l, c), u !== void 0 && (l.globalAlpha = u);
+    l.save(), _(l, c), u !== void 0 && (l.globalAlpha = u);
     const d = [];
     for (const y of t) {
       let h = null, m = null;
@@ -489,7 +489,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         height: w
       });
     }
-    if (l.save(), U(l, s), r !== void 0 && (l.globalAlpha = r), s?.fillStyle)
+    if (l.save(), _(l, s), r !== void 0 && (l.globalAlpha = r), s?.fillStyle)
       for (const m of h)
         l.beginPath(), c ? l.roundRect(m.x, m.y, m.width, m.height, c) : l.rect(m.x, m.y, m.width, m.height), l.fill();
     if (s?.strokeStyle) {
@@ -517,7 +517,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     }
     const p = l[0];
     if (p) {
-      i.save(), i.beginPath(), U(i, o), i.moveTo(p.x, p.y);
+      i.save(), i.beginPath(), _(i, o), i.moveTo(p.x, p.y);
       for (const f of l)
         i.lineTo(f.x, f.y);
       i.closePath(), i.fill(), i.restore();
@@ -537,7 +537,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       return;
     const g = u(l(0, o));
     if (g !== null) {
-      r.save(), r.beginPath(), U(r, i), r.moveTo(f.x, g);
+      r.save(), r.beginPath(), _(r, i), r.moveTo(f.x, g);
       for (const d of p)
         r.lineTo(d.x, d.y);
       if (r.lineTo(a.x, g), r.closePath(), r.fill(), n) {
@@ -564,7 +564,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     const f = l(t);
     if (!f || !f.axis || f.origin !== "x") return;
     const a = f.axis, g = a.position === "top" ? a.canvasRect.y + a.canvasRect.height : a.canvasRect.y, d = window.devicePixelRatio || 1, y = g, h = (i ?? 6) * d, m = a.position === "top" ? g - h : g + h, v = (o ?? 12) * d;
-    c.save(), c.fontKerning = "auto", U(c, {
+    c.save(), c.fontKerning = "auto", _(c, {
       ...n
     }), c.beginPath();
     const x = Array.isArray(r) ? r : r({ ...f, axis: a }, p);
@@ -572,7 +572,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       const w = u(T, t, "canvas");
       w !== null && (c.moveTo(w, y), c.lineTo(w, m));
     }
-    c.stroke(), c.restore(), c.save(), U(c, {
+    c.stroke(), c.restore(), c.save(), _(c, {
       textBaseline: a.position === "top" ? "bottom" : "top",
       textAlign: "center",
       ...n,
@@ -606,12 +606,12 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     const f = l(t);
     if (!f || !f.axis || f.origin !== "y") return;
     const a = f.axis, g = a.position === "left" ? a.canvasRect.x + a.canvasRect.width : a.canvasRect.x, d = g, y = i ?? 6, h = a.position === "left" ? g - y : g + y, m = o ?? 12, v = Array.isArray(r) ? r : r({ ...f, axis: a }, p);
-    c.save(), c.fontKerning = "auto", U(c, { ...n }), c.beginPath();
+    c.save(), c.fontKerning = "auto", _(c, { ...n }), c.beginPath();
     for (const { value: x } of v) {
       const T = u(x, t, "canvas");
       T !== null && (c.moveTo(d, T), c.lineTo(h, T));
     }
-    c.stroke(), c.restore(), c.save(), U(c, {
+    c.stroke(), c.restore(), c.save(), _(c, {
       textBaseline: "middle",
       textAlign: a.position === "left" ? "right" : "left",
       ...n,
@@ -777,9 +777,9 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     g
   ] });
 }, ht = ({ id: e, className: t, style: n, sync: s, children: o }) => {
-  const i = k(null), r = Ue().frame, c = k(r);
+  const i = A(null), r = Ue().frame, c = A(r);
   c.current = r;
-  const u = G(we), l = s?.key || u, p = k(null), f = k(null), a = k(null), g = () => {
+  const u = G(we), l = s?.key || u, p = A(null), f = A(null), a = A(null), g = () => {
     const h = i.current?.parentElement;
     if (h) {
       if (h.dataset.canplotroot === void 0)
@@ -806,8 +806,8 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         metaKey: h.metaKey
       }
     );
-  }, y = k(d);
-  return y.current = d, ke(() => {
+  }, y = A(d);
+  return y.current = d, Ae(() => {
     const h = (w) => {
       const b = f.current;
       b && M.spanselect.dispatchEvent(u, {
@@ -849,9 +849,9 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         (b, { cssX: S, cssY: E }, C) => {
           const P = p.current;
           if (!P || !b.x || !b.y) return;
-          const A = c.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, ee = F(A, b.x.scaleId);
+          const k = c.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, ee = F(k, b.x.scaleId);
           if (!ee) return;
-          const te = F(A, b.y.scaleId);
+          const te = F(k, b.y.scaleId);
           if (!te) return;
           p.current = {
             xRangeCss: { start: z, end: ae },
@@ -861,28 +861,28 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           const he = Math.abs(le - ue), fe = Math.abs(z - ae);
           he < 10 && fe < 10 ? q = "below_threshold" : he > 30 && fe > 30 ? q = "box" : he > fe ? q = "y" : q = "x";
           const Te = X(
-            A,
+            k,
             V(c.current, z, "css"),
             ee.id,
             "css"
           );
           if (Te === null) return;
           const Se = X(
-            A,
+            k,
             V(c.current, ae, "css"),
             ee.id,
             "css"
           );
           if (Se === null) return;
           const Ce = X(
-            A,
+            k,
             W(c.current, le, "css"),
             te.id,
             "css"
           );
           if (Ce === null) return;
           const Pe = X(
-            A,
+            k,
             W(c.current, ue, "css"),
             te.id,
             "css"
@@ -929,16 +929,16 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           c.current
         );
         if (!C) return;
-        if (Object.values(E).some((A) => A)) {
+        if (Object.values(E).some((k) => k)) {
           w.preventDefault();
-          const A = Math.abs(w.deltaY) > Math.abs(w.deltaX) ? w.deltaY : w.deltaX;
+          const k = Math.abs(w.deltaY) > Math.abs(w.deltaX) ? w.deltaY : w.deltaX;
           M.pressandwheel.dispatchEvent(u, {
             pointer: C,
             frame: c.current,
             keys: E,
             deltaX: w.deltaX,
             deltaY: w.deltaY,
-            deltaAbs: A
+            deltaAbs: k
           });
         }
       });
@@ -1331,10 +1331,10 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * c
 }, St = (e, t) => {
   const n = new Date(e);
   return n.setUTCDate(n.getUTCDate() + t), n.getTime();
-}, Ae = (e, t) => {
+}, ke = (e, t) => {
   const n = new Date(e);
   return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
-}, _ = (e, t) => {
+}, U = (e, t) => {
   const [n, s] = t;
   switch (s) {
     case "milliseconds":
@@ -1348,9 +1348,9 @@ const pt = 1, Oe = 1e3 * pt, be = 60 * Oe, J = 60 * be, ce = 24 * J, yt = 30 * c
     case "days":
       return St(e, n);
     case "months":
-      return Ae(e, n);
+      return ke(e, n);
     case "years":
-      return Ae(e, n * 12);
+      return ke(e, n * 12);
   }
 };
 function H(e, t) {
@@ -1394,10 +1394,16 @@ const Ct = (e, t, n = "UTC") => {
       );
       break;
     }
-    case "days":
+    case "days": {
+      for (r(), i.setUTCDate(
+        1
+      ); i.getTime() < e; )
+        i = new Date(U(i, [s, o]));
+      break;
+    }
     case "months":
     case "years":
-      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(_(i, [1, o])));
+      o === "months" ? i.setUTCDate(1) : o === "years" && i.setUTCMonth(0, 1), r(), i.getTime() < e && (i = new Date(U(i, [1, o])));
       break;
   }
   return i.getTime();
@@ -1416,9 +1422,7 @@ const Ct = (e, t, n = "UTC") => {
   ) ?? [1, "milliseconds"];
   if (!a || !g)
     return [];
-  const d = Ct(c, [a, g], e), y = H(d, e);
-  console.log(y, new Date(d));
-  const h = [d];
+  const d = Ct(c, [a, g], e), y = H(d, e), h = [d];
   let m;
   for (; ; ) {
     if (h.length > 100)
@@ -1428,22 +1432,22 @@ const Ct = (e, t, n = "UTC") => {
       case "seconds":
       case "minutes":
       case "hours": {
-        const v = _(d, [
+        const v = U(d, [
           h.length * a,
           g
         ]);
-        m = _(v, [
+        m = U(v, [
           y - H(v, e),
           "hours"
         ]);
         break;
       }
       case "days": {
-        const v = _(d, [
+        const v = U(d, [
           h.length * a,
           g
         ]);
-        m = _(v, [
+        m = U(v, [
           y - H(v, e),
           "hours"
         ]);
@@ -1451,14 +1455,14 @@ const Ct = (e, t, n = "UTC") => {
       }
       case "months":
       case "years": {
-        const v = _(
-          _(_(d, [y, "hours"]), [
+        const v = U(
+          U(U(d, [y, "hours"]), [
             h.length * a,
             g
           ]),
           [-y, "hours"]
         );
-        m = _(v, [
+        m = U(v, [
           y - H(v, e),
           "hours"
         ]);
@@ -1499,10 +1503,10 @@ const Ct = (e, t, n = "UTC") => {
         const b = l.label.find((P) => P.type === "hour")?.value, S = l.label.find((P) => P.type === "minute")?.value, E = l.label.find((P) => P.type === "timeZoneName")?.value;
         let C = "";
         if (c) {
-          const P = l.label.find((z) => z.type === "second")?.value, A = l.label.find(
+          const P = l.label.find((z) => z.type === "second")?.value, k = l.label.find(
             (z) => z.type === "fractionalSecond"
           )?.value;
-          C = `:${P}` + (u ? `.${A}` : "");
+          C = `:${P}` + (u ? `.${k}` : "");
         }
         w.push(
           `${b}:${S}${C}` + (n && m ? ` ${E}` : "")
@@ -1537,7 +1541,7 @@ export {
   Yt as TooltipsX,
   Ft as XTicks,
   Ot as YTicks,
-  U as applyStyles,
+  _ as applyStyles,
   re as clamp,
   V as clampXPosToChartArea,
   W as clampYPosToChartArea,
@@ -1550,7 +1554,7 @@ export {
   jt as makeTimeTicks,
   X as posToVal,
   We as pxToValDistance,
-  kt as sum,
+  At as sum,
   j as useDrawEffect,
   Ue as useFrameState,
   xe as useInteractionsEvent,