@canplot/react 0.1.0 → 0.1.3

package/dist/canplot.mjs

@@ -1,5 +1,5 @@
 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 vt, useState as N, useId as Dt, useEffect as Xt } from "react";
+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);
@@ -260,22 +260,22 @@ const Wt = (t, s, e = "UTC") => {
     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 v = l.find((P) => P.type === "hour")?.value, E = l.find((P) => P.type === "minute")?.value, M = l.find((P) => P.type === "timeZoneName")?.value;
+        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(
-          `${v}:${E}${_}` + (e && x ? ` ${M}` : "")
+          `${w}:${E}${_}` + (e && x ? ` ${M}` : "")
         );
       }
       return (c || p) && k.push(
         [
-          l.find((v) => v.type === "month")?.value,
-          c && l.find((v) => v.type === "day")?.value
+          l.find((w) => w.type === "month")?.value,
+          c && l.find((w) => w.type === "day")?.value
         ].filter(Boolean).join(" ")
-      ), h && k.push(l.find((v) => v.type === "year")?.value), k.filter((v) => v).join(`
+      ), h && k.push(l.find((w) => w.type === "year")?.value), k.filter((w) => w).join(`
 `);
     });
   };
@@ -437,7 +437,7 @@ function rt(t, 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 = vt(ee, []);
+  const n = U(null), r = U(null), a = ce(r), u = wt(ee, []);
   J(() => {
     u.setState({
       _frame: re(t, a, n.current)
@@ -662,7 +662,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       l.lineTo(d.x, d.y);
     l.closePath(), l.fill(), l.restore();
   }
-}, [t, s, e, o]), null), we = ({ data: t, stroked: s, xScaleId: e, yScaleId: o, style: i }) => (j(
+}, [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) {
@@ -685,7 +685,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
     d.restore();
   },
   [t, s, e, o, i]
-), null), ve = (t, s) => pt(
+), null), we = (t, s) => pt(
   ({
     clampXPosToChartArea: e,
     clampYPosToChartArea: o,
@@ -728,7 +728,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
         o.syncKey === s && o.callback(s, e);
     }
   };
-}, w = {
+}, v = {
   dblclick: T(),
   click: T(),
   move: T(),
@@ -746,7 +746,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
   sync_pressandwheel: T()
 }, b = (t, s, e) => {
   const o = G.useRef(e);
-  o.current = e, G.useEffect(() => w[t].addEventListener(
+  o.current = e, G.useEffect(() => v[t].addEventListener(
     s,
     (n, r) => {
       o.current(r, n);
@@ -790,7 +790,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       })
     )
   };
-}, wt = (t, s, e) => {
+}, vt = (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;
     return {
@@ -862,7 +862,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
     r?.(c);
   }), b("spanselect", h, (c) => {
     a?.(c);
-  }), /* @__PURE__ */ at(mt, { value: h, children: [
+  }), /* @__PURE__ */ at(mt.Provider, { value: h, children: [
     /* @__PURE__ */ D(
       ue,
       {
@@ -907,10 +907,10 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
   return h.current = m, Xt(() => {
     const c = (S) => {
       const g = l.current;
-      g && w.sync_spanselect.dispatchEvent(a, {
+      g && v.sync_spanselect.dispatchEvent(a, {
         ...g,
         completed: !0
-      }), w.documentmouseup.dispatchEvent(a, {
+      }), v.documentmouseup.dispatchEvent(a, {
         frame: n.current,
         keys: {
           ctrlKey: S.ctrlKey,
@@ -930,15 +930,15 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
         ([E, M]) => k.keys[E] !== M
       )) {
         const E = { ...k, keys: g };
-        d.current = E, w.sync_move.dispatchEvent(a, E);
+        d.current = E, v.sync_move.dispatchEvent(a, E);
       }
-      const v = l.current;
-      if (v && Object.entries(g).some(
-        ([E, M]) => v.keys[E] !== M
+      const w = l.current;
+      if (w && Object.entries(g).some(
+        ([E, M]) => w.keys[E] !== M
       )) {
         S.stopPropagation(), S.preventDefault();
-        const E = { ...v, keys: g };
-        l.current = E, w.sync_spanselect.dispatchEvent(
+        const E = { ...w, keys: g };
+        l.current = E, v.sync_spanselect.dispatchEvent(
           a,
           E
         );
@@ -946,10 +946,10 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
     }, y = (S) => {
       h.current(
         S,
-        (g, { cssX: k, cssY: v }, E) => {
+        (g, { cssX: k, cssY: w }, 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 = v, st = A(_, g.x.scaleId), nt = A(_, g.y.scaleId);
+          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);
           u.current = {
             xRangeCss: { start: P, end: B },
             yRangeCss: { start: F, end: et }
@@ -992,20 +992,20 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
             completed: !1,
             keys: E
           };
-          l.current = yt, w.sync_spanselect.dispatchEvent(
+          l.current = yt, v.sync_spanselect.dispatchEvent(
             a,
             yt
           );
         }
       );
     }, x = (S) => {
-      h.current(S, (g, k, v) => {
-        if (Object.values(v).some((M) => M)) {
+      h.current(S, (g, k, w) => {
+        if (Object.values(w).some((M) => M)) {
           S.preventDefault();
           const M = Math.abs(S.deltaY) > Math.abs(S.deltaX) ? S.deltaY : S.deltaX;
-          w.sync_pressandwheel.dispatchEvent(a, {
+          v.sync_pressandwheel.dispatchEvent(a, {
             positions: g,
-            keys: v,
+            keys: w,
             deltaX: S.deltaX,
             deltaY: S.deltaY,
             deltaAbs: M
@@ -1025,7 +1025,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       c.positions,
       n.current
     );
-    p && w.dblclick.dispatchEvent(r, {
+    p && v.dblclick.dispatchEvent(r, {
       frame: n.current,
       pointer: p,
       keys: c.keys
@@ -1035,7 +1035,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       c.positions,
       n.current
     );
-    p && w.click.dispatchEvent(r, {
+    p && v.click.dispatchEvent(r, {
       frame: n.current,
       pointer: p,
       keys: c.keys
@@ -1045,7 +1045,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       c.positions,
       n.current
     ) : null;
-    d.current = c, w.move.dispatchEvent(r, {
+    d.current = c, v.move.dispatchEvent(r, {
       frame: n.current,
       pointer: p ?? null,
       keys: c.keys
@@ -1055,7 +1055,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       c.positions,
       n.current
     );
-    p && w.mousedown.dispatchEvent(r, {
+    p && v.mousedown.dispatchEvent(r, {
       frame: n.current,
       pointer: p,
       keys: c.keys
@@ -1065,7 +1065,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       c.positions,
       n.current
     );
-    p && w.mouseup.dispatchEvent(r, {
+    p && v.mouseup.dispatchEvent(r, {
       frame: n.current,
       pointer: p,
       keys: c.keys
@@ -1078,7 +1078,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
         c.positions,
         n.current
       );
-      p && w.pressandwheel.dispatchEvent(r, {
+      p && v.pressandwheel.dispatchEvent(r, {
         frame: n.current,
         pointer: p,
         keys: c.keys,
@@ -1088,16 +1088,16 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       });
     }
   ), b("sync_spanselect", a, (c) => {
-    const p = wt(
+    const p = vt(
       "x",
       c.xRange,
       n.current
-    ), y = wt(
+    ), y = vt(
       "y",
       c.yRange,
       n.current
     ), x = p.scaled, C = y.scaled;
-    c.completed && (u.current = null), w.spanselect.dispatchEvent(r, {
+    c.completed && (u.current = null), v.spanselect.dispatchEvent(r, {
       mode: c.mode,
       frame: n.current,
       xRanges: x,
@@ -1124,7 +1124,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       onClick: (c) => {
         m(c, (p, y, x) => {
-          w.sync_click.dispatchEvent(a, {
+          v.sync_click.dispatchEvent(a, {
             positions: p,
             keys: x
           });
@@ -1132,7 +1132,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       onMouseLeave: (c) => {
         m(c, (p, y, x) => {
-          w.sync_move.dispatchEvent(a, {
+          v.sync_move.dispatchEvent(a, {
             positions: null,
             keys: x
           });
@@ -1140,7 +1140,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       onMouseMove: (c) => {
         m(c, (p, y, x) => {
-          w.sync_move.dispatchEvent(a, {
+          v.sync_move.dispatchEvent(a, {
             positions: p,
             keys: x
           });
@@ -1148,7 +1148,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       onMouseDown: (c) => {
         m(c, (p, { cssX: y, cssY: x }, C) => {
-          w.sync_mousedown.dispatchEvent(a, {
+          v.sync_mousedown.dispatchEvent(a, {
             positions: p,
             keys: C
           }), l.current = null, u.current = {
@@ -1159,7 +1159,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       onMouseUp: (c) => {
         m(c, (p, y, x) => {
-          w.sync_mouseup.dispatchEvent(a, {
+          v.sync_mouseup.dispatchEvent(a, {
             positions: p,
             keys: x
           });
@@ -1172,7 +1172,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
               keys: x,
               completed: !0
             };
-            w.sync_spanselect.dispatchEvent(
+            v.sync_spanselect.dispatchEvent(
               a,
               g
             );
@@ -1181,7 +1181,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
       },
       onDoubleClick: (c) => {
         m(c, (p, y, x) => {
-          w.sync_dblclick.dispatchEvent(a, {
+          v.sync_dblclick.dispatchEvent(a, {
             positions: p,
             keys: x
           });
@@ -1194,7 +1194,7 @@ const fe = Lt(({ configuration: t, children: s, style: e, className: o }, i) =>
   ft("move", (r) => {
     i(r);
   });
-  const n = vt(() => {
+  const n = wt(() => {
     if (!o)
       return null;
     const { frame: r, pointer: a } = o, u = a?.scaled[e];
@@ -1343,7 +1343,7 @@ export {
   ye as LinePlot,
   xe as ScatterPlot,
   ke as SelectBox,
-  we as SparklinePlot,
+  ve as SparklinePlot,
   Te as TooltipsX,
   X as applyStyles,
   O as clampXPosToChartArea,
@@ -1353,7 +1353,7 @@ export {
   me as isYScale,
   L as posToVal,
   Ft as pxToValDistance,
-  ve as usePositioned,
+  we as usePositioned,
   ct as valFits,
   K as valToPos,
   ut as valToPxDistance