@canplot/react 0.5.11 → 0.5.12

package/dist/canplot.mjs

@@ -1,9 +1,9 @@
 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 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) => {
+import { jsxs as pe, jsx as A, Fragment as Ne } from "react/jsx-runtime";
+import R, { 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), At = (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);
@@ -125,7 +125,7 @@ function me(e, t) {
   e && (e.current = t);
 }
 var Ze = parseInt($e.split(".")[0], 10) >= 19 ? Je : Ge;
-const Re = ye({
+const Ae = ye({
   listeners: [],
   subscribe: () => () => {
   },
@@ -140,7 +140,7 @@ const Re = ye({
     for (const [, s] of e)
       s();
   } };
-}, ve = ye(null), De = ye(() => {
+}, ve = ye(null), Re = ye(() => {
 }), Ie = {
   TOP: 400,
   MIDDLE: 300,
@@ -169,8 +169,8 @@ class Le {
     return this.frame.ctx;
   }
 }
-const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
-  const i = A(null), r = A(null), c = tt(r), [u, l] = B(null), p = Q(
+const Rt = 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(
     () => nt(e, c, u),
     [e, c, u]
   );
@@ -190,7 +190,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       "data-canplotroot": !0,
       ...s,
       children: [
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ A(
           "canvas",
           {
             ref: i,
@@ -204,7 +204,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
             }
           }
         ),
-        p && /* @__PURE__ */ R(et, { frame: p, children: t })
+        p && /* @__PURE__ */ A(et, { frame: p, children: t })
       ]
     }
   );
@@ -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 = A(null);
+  const i = k(null);
   i.current = e, $(() => {
     n.subscribe(() => {
       i.current && qe(i.current);
@@ -232,7 +232,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   const r = He(() => {
     o((c) => c + 1);
   }, [o]);
-  return /* @__PURE__ */ R(Re.Provider, { value: n, children: /* @__PURE__ */ R(De.Provider, { value: r, children: /* @__PURE__ */ R(ve.Provider, { value: e, children: t }) }) });
+  return /* @__PURE__ */ A(Ae.Provider, { value: n, children: /* @__PURE__ */ A(Re.Provider, { value: r, children: /* @__PURE__ */ A(ve.Provider, { value: e, children: t }) }) });
 }, tt = (e) => {
   const [t, n] = B({
     width: 0,
@@ -350,14 +350,14 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     chartAreaCanvasPX: i
   };
 }, j = (e, t, n) => {
-  const s = G(ve), o = G(De), i = G(Re);
+  const s = G(ve), o = G(Re), i = G(Ae);
   if (!s || !o)
     throw new Error("useFrame must be used within a CanPlot component");
   const [r] = B(() => new Le());
   r._updateFrame(s);
-  const c = A(r);
+  const c = k(r);
   c.current = r;
-  const u = A(t);
+  const u = k(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]), Ae(() => () => {
+  }, [o, ...n]), ke(() => () => {
     o();
   }, [o]);
 }, Ue = () => {
@@ -384,15 +384,17 @@ 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(), _(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);
+    r.save(), r.beginPath(), _(r, o);
+    const p = r.getLineDash();
+    o?.lineDash && r.setLineDash(o.lineDash), i !== void 0 && (r.globalAlpha = i);
+    for (const f of t) {
+      const a = c(l(f.x, n, "canvas")), g = u(l(f.y, s, "canvas"));
+      a === null || g === null || r.lineTo(a, g);
     }
-    r.stroke(), r.restore();
+    r.stroke(), p && r.setLineDash(p), r.restore();
   },
   [t, n, s, o, i]
-), null), It = D.memo(st, O), ot = ({
+), null), It = R.memo(st, O), ot = ({
   layer: e = "MIDDLE",
   data: t,
   xScaleId: n,
@@ -444,7 +446,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     l.restore();
   },
   [t, n, s, r, c, u]
-), null), Lt = D.memo(ot, O), it = ({
+), null), Lt = R.memo(ot, O), it = ({
   data: e,
   xScaleId: t,
   yScaleId: n,
@@ -501,7 +503,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     l.restore();
   },
   [e, t, n, s, o, i, c, r]
-), null), Ut = D.memo(it, O), rt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
+), null), Ut = R.memo(it, O), rt = ({ layer: e = "MIDDLE", data: t, xScaleId: n, yScaleId: s, style: o }) => (j(
   e,
   ({ ctx: i, clampXPosToChartArea: r, clampYPosToChartArea: c, valToPos: u }) => {
     const l = [];
@@ -524,7 +526,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     }
   },
   [t, n, s, o]
-), null), _t = D.memo(rt, O), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (j(
+), null), _t = R.memo(rt, O), ct = ({ layer: e = "MIDDLE", data: t, stroked: n, xScaleId: s, yScaleId: o, style: i }) => (j(
   e,
   ({ ctx: r, clampXPosToChartArea: c, clampYPosToChartArea: u, valToPos: l }) => {
     const p = [];
@@ -550,7 +552,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     }
   },
   [t, n, s, o, i]
-), null), Xt = D.memo(ct, O), at = ({
+), null), Xt = R.memo(ct, O), at = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
@@ -592,7 +594,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     c.restore();
   },
   [r, t, n, s]
-), null), Ft = D.memo(at, O), lt = ({
+), null), Ft = R.memo(at, O), lt = ({
   layer: e = "BOTTOM",
   scaleId: t,
   tickStyle: n,
@@ -631,7 +633,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     c.restore();
   },
   [r, t, n, s]
-), null), Ot = D.memo(lt, O), _e = (e) => {
+), null), Ot = R.memo(lt, O), _e = (e) => {
   if (e)
     try {
       return e.replace(/(\d+)px/, (t, n) => `${parseInt(n) * window.devicePixelRatio || 1}px`);
@@ -665,15 +667,15 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   pressandwheel: I(),
   sync_move: I()
 }, L = (e, t, n) => {
-  const s = D.useRef(n);
-  s.current = n, D.useEffect(() => M[e].addEventListener(
+  const s = R.useRef(n);
+  s.current = n, R.useEffect(() => M[e].addEventListener(
     t,
     (i, r) => {
       s.current(r, i);
     }
   ), [t, e, s]);
-}, we = D.createContext(""), xe = (e, t) => {
-  const n = D.useContext(we);
+}, we = R.createContext(""), xe = (e, t) => {
+  const n = R.useContext(we);
   return L(e, n, t);
 }, ut = (e, t, n, s, o) => {
   if (!t) return;
@@ -764,7 +766,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   }), L("contextmenu", d, (y) => {
     u?.(y);
   }), /* @__PURE__ */ pe(we.Provider, { value: d, children: [
-    /* @__PURE__ */ R(
+    /* @__PURE__ */ A(
       ht,
       {
         id: e,
@@ -777,9 +779,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 = A(null), r = Ue().frame, c = A(r);
+  const i = k(null), r = Ue().frame, c = k(r);
   c.current = r;
-  const u = G(we), l = s?.key || u, p = A(null), f = A(null), a = A(null), g = () => {
+  const u = G(we), l = s?.key || u, p = k(null), f = k(null), a = k(null), g = () => {
     const h = i.current?.parentElement;
     if (h) {
       if (h.dataset.canplotroot === void 0)
@@ -806,8 +808,8 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         metaKey: h.metaKey
       }
     );
-  }, y = A(d);
-  return y.current = d, Ae(() => {
+  }, y = k(d);
+  return y.current = d, ke(() => {
     const h = (w) => {
       const b = f.current;
       b && M.spanselect.dispatchEvent(u, {
@@ -849,9 +851,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 k = c.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, ee = F(k, b.x.scaleId);
+          const D = c.current, z = P.xRangeCss.start, ae = S, le = P.yRangeCss.start, ue = E, ee = F(D, b.x.scaleId);
           if (!ee) return;
-          const te = F(k, b.y.scaleId);
+          const te = F(D, b.y.scaleId);
           if (!te) return;
           p.current = {
             xRangeCss: { start: z, end: ae },
@@ -861,28 +863,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(
-            k,
+            D,
             V(c.current, z, "css"),
             ee.id,
             "css"
           );
           if (Te === null) return;
           const Se = X(
-            k,
+            D,
             V(c.current, ae, "css"),
             ee.id,
             "css"
           );
           if (Se === null) return;
           const Ce = X(
-            k,
+            D,
             W(c.current, le, "css"),
             te.id,
             "css"
           );
           if (Ce === null) return;
           const Pe = X(
-            k,
+            D,
             W(c.current, ue, "css"),
             te.id,
             "css"
@@ -929,16 +931,16 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
           c.current
         );
         if (!C) return;
-        if (Object.values(E).some((k) => k)) {
+        if (Object.values(E).some((D) => D)) {
           w.preventDefault();
-          const k = Math.abs(w.deltaY) > Math.abs(w.deltaX) ? w.deltaY : w.deltaX;
+          const D = 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: k
+            deltaAbs: D
           });
         }
       });
@@ -961,7 +963,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
       keys: h.keys,
       source: h.originInteractionsId === u ? "own" : "sync"
     });
-  }), /* @__PURE__ */ R(
+  }), /* @__PURE__ */ A(
     "div",
     {
       ref: i,
@@ -1129,7 +1131,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     return null;
   const { frame: r, pointer: c } = o, u = c?.cssX ?? null, l = c?.cssY ?? null, p = u ? V(r, u, "css") : 0, f = l ? W(r, l, "css") : 0;
   return /* @__PURE__ */ pe(Ne, { children: [
-    /* @__PURE__ */ R(
+    /* @__PURE__ */ A(
       "div",
       {
         "data-show": !!c,
@@ -1150,7 +1152,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
         }
       }
     ),
-    /* @__PURE__ */ R(
+    /* @__PURE__ */ A(
       "div",
       {
         className: s?.(o),
@@ -1184,7 +1186,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
     const i = n.mode === "y" ? -1 / 0 : n.x.css?.from ?? -1 / 0, r = n.mode === "y" ? 1 / 0 : n.x.css?.to ?? 1 / 0, c = n.mode === "x" ? -1 / 0 : n.y.css?.from ?? -1 / 0, u = n.mode === "x" ? 1 / 0 : n.y.css?.to ?? 1 / 0, l = V(n.frame, i, "css"), p = V(n.frame, r, "css"), f = W(n.frame, c, "css"), a = W(n.frame, u, "css"), g = Math.min(l, p), d = Math.min(f, a), y = Math.abs(p - l), h = Math.abs(a - f);
     return { leftPx: g, topPx: d, widthPx: y, heightPx: h };
   }, [n]);
-  return /* @__PURE__ */ R(
+  return /* @__PURE__ */ A(
     "div",
     {
       className: n ? e?.(n) : void 0,
@@ -1202,7 +1204,7 @@ const Dt = je(({ configuration: e, children: t, style: n, ...s }, o) => {
   );
 }, Nt = ({ style: e, children: t, scaleId: n, ...s }) => {
   const o = Ue().getScale(n)?.axis;
-  return o ? /* @__PURE__ */ R(
+  return o ? /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -1331,7 +1333,7 @@ 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();
-}, ke = (e, t) => {
+}, De = (e, t) => {
   const n = new Date(e);
   return n.setUTCMonth(n.getUTCMonth() + t), n.getTime();
 }, U = (e, t) => {
@@ -1348,9 +1350,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 ke(e, n);
+      return De(e, n);
     case "years":
-      return ke(e, n * 12);
+      return De(e, n * 12);
   }
 };
 function H(e, t) {
@@ -1503,10 +1505,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, k = l.label.find(
+          const P = l.label.find((z) => z.type === "second")?.value, D = l.label.find(
             (z) => z.type === "fractionalSecond"
           )?.value;
-          C = `:${P}` + (u ? `.${k}` : "");
+          C = `:${P}` + (u ? `.${D}` : "");
         }
         w.push(
           `${b}:${S}${C}` + (n && m ? ` ${E}` : "")
@@ -1530,7 +1532,7 @@ export {
   Nt as AxisOverlay,
   Ut as BarPlot,
   Ie as CANPLOT_LAYER,
-  Dt as CanPlot,
+  Rt as CanPlot,
   Kt as ChartAreaInteractions,
   Bt as Crosshair,
   Le as FrameDrawer,
@@ -1547,14 +1549,14 @@ export {
   W as clampYPosToChartArea,
   O as deepEqual,
   mt as defaultNumericalTicksFormatter,
-  Rt as findClosestIndex,
+  At as findClosestIndex,
   F as getScale,
   $t as makeLinearTicks,
   Pt as makeTimeTickFormat,
   jt as makeTimeTicks,
   X as posToVal,
   We as pxToValDistance,
-  At as sum,
+  kt as sum,
   j as useDrawEffect,
   Ue as useFrameState,
   xe as useInteractionsEvent,