@ledgerhq/lumen-ui-react 0.1.56 → 0.1.57

package/dist/lib/Components/visualization/ReferenceLine/utils.js

@@ -0,0 +1,66 @@
+import { isFiniteNumber as d } from "../utils/numbers.js";
+import { isCategoricalScale as h, getPointOnScale as m } from "../utils/scales/scales.js";
+const l = "center", f = "end", c = {
+  start: "end",
+  center: "middle",
+  end: "start"
+}, a = {
+  start: "auto",
+  center: "central",
+  end: "hanging"
+}, u = {
+  start: 0,
+  center: 0.5,
+  end: 1
+}, v = (n, e, t) => e === "x" ? n >= t.x && n <= t.x + t.width : n >= t.y && n <= t.y + t.height, p = (n, e) => {
+  const t = e?.data;
+  if (!t || t.length === 0) return n;
+  if (n < 0 || n >= t.length) return;
+  const o = t[n];
+  return typeof o == "number" ? o : n;
+}, L = ({
+  dataValue: n,
+  scale: e,
+  axis: t,
+  drawingArea: o,
+  axisConfig: s
+}) => {
+  const r = p(n, s);
+  if (r === void 0 || !e || h(e) && e(r) === void 0)
+    return;
+  const i = m(r, e);
+  if (!(!d(i) || !v(i, t, o)))
+    return i;
+}, D = ({
+  pixel: n,
+  labelPosition: e,
+  drawingArea: t,
+  dx: o = 0,
+  dy: s = 0,
+  horizontalAlignment: r,
+  verticalAlignment: i
+}) => ({
+  x: t.x + t.width * u[e] + o,
+  y: n + s,
+  textAnchor: c[r ?? e],
+  dominantBaseline: a[i ?? f]
+}), V = ({
+  pixel: n,
+  labelPosition: e,
+  drawingArea: t,
+  dx: o = 0,
+  dy: s = 0,
+  horizontalAlignment: r,
+  verticalAlignment: i
+}) => ({
+  x: n + o,
+  y: t.y + t.height * u[e] + s,
+  textAnchor: c[r ?? l],
+  dominantBaseline: a[i ?? e]
+});
+export {
+  D as computeHorizontalLabelCoordinates,
+  V as computeVerticalLabelCoordinates,
+  v as isPixelWithinDrawingArea,
+  L as resolvePixel
+};

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.d.ts

@@ -0,0 +1,9 @@
+import { ChartTooltipItemProps } from '../types';
+/**
+ * Memoized so it only re-renders when one of its primitive props actually
+ * changes. Combined with the stable per-index ref callbacks built in
+ * `DefaultScrubberTooltip`, this keeps the row out of the per-scrub-frame
+ * reconciliation path when its label / value / position have not changed.
+ */
+export declare const ChartTooltipItem: import('react').NamedExoticComponent<Readonly<ChartTooltipItemProps>>;
+//# sourceMappingURL=ChartTooltipItem.d.ts.map

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipItem.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAiBtD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,uEAgC3B,CAAC"}

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.js

@@ -0,0 +1,50 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { memo as s } from "react";
+import { chartConfig as h } from "../../config.js";
+const { color: l, font: t, tooltip: n } = h, p = {
+  fontSize: t.bodySize,
+  fontFamily: t.family,
+  fill: l.textMuted
+}, x = {
+  fontSize: t.bodySize,
+  fontFamily: t.family,
+  fill: l.text,
+  fontWeight: t.bodyWeightSemiBold
+}, z = s(function({
+  label: d,
+  value: m,
+  x: o = 0,
+  y: e = 0,
+  width: r,
+  labelRef: f,
+  valueRef: a
+}) {
+  return /* @__PURE__ */ c("g", { children: [
+    /* @__PURE__ */ i(
+      "text",
+      {
+        ref: f,
+        x: o + n.paddingX,
+        y: e,
+        dominantBaseline: "middle",
+        style: p,
+        children: d
+      }
+    ),
+    /* @__PURE__ */ i(
+      "text",
+      {
+        ref: a,
+        x: o + r - n.paddingX,
+        y: e,
+        dominantBaseline: "middle",
+        textAnchor: "end",
+        style: x,
+        children: m
+      }
+    )
+  ] });
+});
+export {
+  z as ChartTooltipItem
+};

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.d.ts

@@ -0,0 +1,12 @@
+import { ScrubberTooltipProps } from '../types';
+/**
+ * Default structured tooltip anchored to the scrubber line.
+ *
+ * The tooltip auto-fits its width to the rendered content via `getBBox`,
+ * with `minWidth` acting as an optional minimum width override. Use with
+ * {@link ScrubberProps.tooltip}; layout options (`offset`, `minWidth`) belong
+ * on the object returned from the `tooltip` callback. Return `{ items: [] }`
+ * from the callback to hide the tooltip at a given index.
+ */
+export declare function DefaultScrubberTooltip({ pixelX, drawingArea, title, items, offset, minWidth, }: Readonly<ScrubberTooltipProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=DefaultScrubberTooltip.d.ts.map

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultScrubberTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAoBrD;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,WAAW,EACX,KAAK,EACL,KAAK,EACL,MAA8B,EAC9B,QAAkC,GACnC,EAAE,QAAQ,CAAC,oBAAoB,CAAC,kDAuEhC"}

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.js

@@ -0,0 +1,82 @@
+import { jsxs as S, jsx as a } from "react/jsx-runtime";
+import { chartConfig as H } from "../../config.js";
+import { ChartTooltipItem as W } from "./ChartTooltipItem.js";
+import { useTooltipMeasurement as w, useBuildRefSetters as h, computeTooltipWidth as B, computeTooltipHeight as M, computeTooltipX as Y, computeItemsBaseY as E } from "./utils.js";
+const { color: I, font: f, tooltip: t } = H, X = {
+  fontSize: f.bodySize,
+  fontFamily: f.family,
+  fill: I.textMuted,
+  fontWeight: f.bodyWeightMedium
+};
+function k({
+  pixelX: u,
+  drawingArea: l,
+  title: n,
+  items: e,
+  offset: c = t.defaultOffset,
+  minWidth: m = t.defaultMinWidth
+}) {
+  const o = n !== void 0, { widths: p, titleRef: g, labelRefs: y, valueRefs: b } = w(
+    e,
+    o,
+    n
+  ), T = h(y, e.length), x = h(b, e.length);
+  if (e.length === 0)
+    return null;
+  const r = B(p, o, m), s = Y(u, c, r, l), R = M(e.length, o), v = E(l.y, o);
+  return /* @__PURE__ */ S(
+    "g",
+    {
+      "data-testid": "chart-tooltip",
+      role: "tooltip",
+      style: {
+        opacity: p === null ? 0 : 1,
+        transition: t.transition,
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ a(
+          "rect",
+          {
+            x: s,
+            y: l.y,
+            width: r,
+            height: R,
+            fill: t.background,
+            style: {
+              rx: t.borderRadius
+            }
+          }
+        ),
+        o && /* @__PURE__ */ a(
+          "text",
+          {
+            ref: g,
+            "data-testid": "chart-tooltip-title",
+            x: s + t.paddingX,
+            y: l.y + t.paddingY + t.rowHeight / 2,
+            dominantBaseline: "middle",
+            style: X,
+            children: n
+          }
+        ),
+        e.map((d, i) => /* @__PURE__ */ a(
+          W,
+          {
+            label: d.label,
+            value: d.value,
+            x: s,
+            y: v + i * (t.rowHeight + t.rowGap) + t.rowHeight / 2,
+            width: r,
+            labelRef: T[i],
+            valueRef: x[i]
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+export {
+  k as DefaultScrubberTooltip
+};

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/utils.d.ts

@@ -0,0 +1,58 @@
+import { RefObject } from 'react';
+import { DrawingArea } from '../../utils/types';
+import { ChartTooltipItemData, SvgTextContent } from '../types';
+type Widths = {
+    title: number;
+    labels: number[];
+    values: number[];
+};
+type UseTooltipMeasurementReturn = {
+    widths: Widths | null;
+    titleRef: RefObject<SVGTextElement | null>;
+    labelRefs: RefObject<(SVGTextElement | null)[]>;
+    valueRefs: RefObject<(SVGTextElement | null)[]>;
+};
+export declare const safeGetBBoxWidth: (el: SVGGraphicsElement | null) => number;
+/**
+ * Derive the auto-fit tooltip width from measured text widths,
+ * clamped to a minimum floor.
+ */
+export declare const computeTooltipWidth: (widths: Widths | null, hasTitle: boolean, minWidth: number) => number;
+/**
+ * Compute the tooltip's horizontal position, flipping to the left
+ * of the scrubber line when it would overflow the drawing area.
+ */
+export declare const computeTooltipX: (pixelX: number, offset: number, tooltipWidth: number, drawingArea: DrawingArea) => number;
+/**
+ * Compute the total tooltip height from item count and title presence.
+ */
+export declare const computeTooltipHeight: (itemCount: number, hasTitle: boolean) => number;
+/**
+ * Vertical offset where tooltip rows begin, accounting for title presence.
+ */
+export declare const computeItemsBaseY: (drawingAreaY: number, hasTitle: boolean) => number;
+/**
+ * Manages SVG text measurement for the tooltip via `getBBox`.
+ *
+ * A single `ResizeObserver` is created on mount and reused for the component's
+ * entire lifetime, avoiding the cost of tearing down and recreating an observer
+ * on every scrubber movement.
+ *
+ * The re-measure / re-observe effect's dependency is a shape signature (labels
+ * + title + count) rather than the raw `items` reference, so high-frequency
+ * value updates during a scrub do not trigger a fresh measurement or
+ * disconnect / re-observe cycle. The `ResizeObserver` still picks up real
+ * geometry changes (e.g. value strings widening past the current rect).
+ */
+export declare function useTooltipMeasurement(items: ChartTooltipItemData[], hasTitle: boolean, title: SvgTextContent | undefined): UseTooltipMeasurementReturn;
+type SvgTextRefSetter = (el: SVGTextElement | null) => void;
+/**
+ * Builds stable per-index ref-callback arrays that mutate the given refs in
+ * place. Recomputed only when `length` changes, so the same callback identity
+ * is passed to each `ChartTooltipItem` across scrub frames. This unlocks
+ * `React.memo` on `ChartTooltipItem` and avoids the per-frame detach /
+ * re-attach dance of inline arrow ref callbacks.
+ */
+export declare const useBuildRefSetters: (refs: RefObject<(SVGTextElement | null)[]>, length: number) => SvgTextRefSetter[];
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAIrE,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,SAAS,EAAE,SAAS,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,SAAS,EAAE,SAAS,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,IAAI,kBAAkB,GAAG,IAAI,KAAG,MAOhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,GAAG,IAAI,EACrB,UAAU,OAAO,EACjB,UAAU,MAAM,KACf,MAUF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,cAAc,MAAM,EACpB,aAAa,WAAW,KACvB,MAOF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAC/B,WAAW,MAAM,EACjB,UAAU,OAAO,KAChB,MAQF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,cAAc,MAAM,EACpB,UAAU,OAAO,KAChB,MAGF,CAAC;AA4BF;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,oBAAoB,EAAE,EAC7B,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,cAAc,GAAG,SAAS,GAChC,2BAA2B,CAuD7B;AAED,KAAK,gBAAgB,GAAG,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;AAE5D;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,SAAS,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,EAC1C,QAAQ,MAAM,KACb,gBAAgB,EAUlB,CAAC"}

package/dist/lib/Components/visualization/Scrubber/DefaultScrubberTooltip/utils.js

@@ -0,0 +1,80 @@
+import { useRef as a, useState as B, useEffect as R, useLayoutEffect as x, useMemo as W } from "react";
+import { chartConfig as H } from "../../config.js";
+const { tooltip: u } = H, d = (t) => {
+  if (!t || typeof t.getBBox != "function") return 0;
+  try {
+    return t.getBBox().width;
+  } catch {
+    return 0;
+  }
+}, w = (t, r, n) => {
+  const e = t && r ? t.title : 0, o = t ? t.labels.map(
+    (f, h) => f + u.labelValueGap + (t.values[h] ?? 0)
+  ) : [], s = Math.max(e, ...o) + u.paddingX * 2;
+  return Math.max(s, n);
+}, E = (t, r, n, e) => {
+  const o = t + r + n > e.x + e.width;
+  return Math.max(
+    e.x,
+    o ? t - r - n : t + r
+  );
+}, T = (t, r) => {
+  const n = r ? u.rowHeight + u.titleGap : 0;
+  return u.paddingY * 2 + n + t * u.rowHeight + (t - 1) * u.rowGap;
+}, L = (t, r) => {
+  const n = r ? u.rowHeight + u.titleGap : 0;
+  return t + u.paddingY + n;
+}, S = (t, r, n) => {
+  let e = "";
+  for (let c = 0; c < t.length; c++) {
+    c > 0 && (e += "");
+    const s = t[c].label;
+    e += typeof s == "string" || typeof s == "number" ? String(s) : "";
+  }
+  const o = typeof n == "string" || typeof n == "number" ? String(n) : "";
+  return `${r ? "1" : "0"}|${e}|${o}`;
+};
+function Y(t, r, n) {
+  const e = a(null), o = a([]), c = a([]), s = a(null), f = a(() => {
+  }), [h, b] = B(null);
+  f.current = () => {
+    const p = r ? d(e.current) : 0, i = t.map(
+      (v, g) => d(o.current[g])
+    ), l = t.map(
+      (v, g) => d(c.current[g])
+    );
+    b({
+      title: p,
+      labels: i,
+      values: l
+    });
+  }, R(() => {
+    if (!(typeof ResizeObserver > "u"))
+      return s.current = new ResizeObserver(() => f.current()), () => s.current?.disconnect();
+  }, []);
+  const y = S(t, r, n), m = a(t.length);
+  return m.current = t.length, x(() => {
+    const p = m.current;
+    if (p === 0) return;
+    o.current.length = p, c.current.length = p, f.current();
+    const i = s.current;
+    i && (i.disconnect(), e.current && i.observe(e.current), o.current.forEach((l) => l && i.observe(l)), c.current.forEach((l) => l && i.observe(l)));
+  }, [y]), { widths: h, titleRef: e, labelRefs: o, valueRefs: c };
+}
+const $ = (t, r) => W(() => {
+  const n = new Array(r);
+  for (let e = 0; e < r; e++)
+    n[e] = (o) => {
+      t.current[e] = o;
+    };
+  return n;
+}, [t, r]);
+export {
+  L as computeItemsBaseY,
+  T as computeTooltipHeight,
+  w as computeTooltipWidth,
+  E as computeTooltipX,
+  d as safeGetBBoxWidth,
+  $ as useBuildRefSetters,
+  Y as useTooltipMeasurement
+};

package/dist/lib/Components/visualization/Scrubber/Scrubber.d.ts

@@ -0,0 +1,29 @@
+import { ScrubberProps } from './types';
+/**
+ * Renders the scrubber visuals: vertical reference line, future-data overlay
+ * rect, per-series beacon dots, and an optional tooltip when
+ * {@link ScrubberProps.tooltip} is set, using {@link DefaultScrubberTooltip}.
+ *
+ * Must be used as a child of `LineChart` (or `CartesianChart`) with
+ * `enableScrubbing` enabled. Renders nothing when no scrubber position is active.
+ *
+ * @example
+ * ```tsx
+ * <LineChart series={data} enableScrubbing>
+ *   <Scrubber showBeacons />
+ * </LineChart>
+ * ```
+ *
+ * @example Tooltip
+ * ```tsx
+ * <Scrubber
+ *   tooltip={(i) => ({
+ *     title: `${counts[i]} Transactions`,
+ *     items: [{ label: 'Index', value: String(i) }],
+ *     minWidth: 160,
+ *   })}
+ * />
+ * ```
+ */
+export declare function Scrubber({ hideLine, hideOverlay, showBeacons, tooltip, }: Readonly<ScrubberProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Scrubber.d.ts.map

package/dist/lib/Components/visualization/Scrubber/Scrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/Scrubber/Scrubber.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAoD7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAgB,EAChB,WAAmB,EACnB,WAAmB,EACnB,OAAO,GACR,EAAE,QAAQ,CAAC,aAAa,CAAC,kDAwDzB"}

package/dist/lib/Components/visualization/Scrubber/Scrubber.js

@@ -0,0 +1,114 @@
+import { jsxs as f, jsx as t, Fragment as y } from "react/jsx-runtime";
+import { useId as b } from "react";
+import { chartConfig as h } from "../config.js";
+import { DefaultScrubberTooltip as m } from "./DefaultScrubberTooltip/DefaultScrubberTooltip.js";
+import { useScrubberGeometry as g } from "./useScrubberGeometry.js";
+const { color: C, strokeWidth: x, scrubber: e } = h;
+function k({ pixelX: r, top: s, bottom: o }) {
+  const l = b();
+  return /* @__PURE__ */ f(y, { children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ f(
+      "linearGradient",
+      {
+        id: l,
+        gradientUnits: "userSpaceOnUse",
+        x1: r,
+        y1: s,
+        x2: r,
+        y2: o,
+        children: [
+          /* @__PURE__ */ t(
+            "stop",
+            {
+              offset: "0%",
+              stopColor: e.lineColor,
+              stopOpacity: e.lineGradientEdgeOpacity
+            }
+          ),
+          /* @__PURE__ */ t("stop", { offset: "20%", stopColor: e.lineColor }),
+          /* @__PURE__ */ t("stop", { offset: "80%", stopColor: e.lineColor }),
+          /* @__PURE__ */ t(
+            "stop",
+            {
+              offset: "100%",
+              stopColor: e.lineColor,
+              stopOpacity: e.lineGradientEdgeOpacity
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ t(
+      "line",
+      {
+        "data-testid": "scrubber-line",
+        x1: r,
+        y1: s,
+        x2: r,
+        y2: o,
+        stroke: `url(#${l})`,
+        strokeWidth: x.hairline
+      }
+    )
+  ] });
+}
+function j({
+  hideLine: r = !1,
+  hideOverlay: s = !1,
+  showBeacons: o = !1,
+  tooltip: l
+}) {
+  const p = g({ showBeacons: o, tooltip: l });
+  if (!p)
+    return null;
+  const { pixelX: c, drawingArea: n, beacons: u, overlay: a, tooltipPayload: i } = p;
+  return /* @__PURE__ */ f("g", { "data-testid": "scrubber", children: [
+    !r && /* @__PURE__ */ t(
+      k,
+      {
+        pixelX: c,
+        top: n.y,
+        bottom: n.y + n.height
+      }
+    ),
+    !s && /* @__PURE__ */ t(
+      "rect",
+      {
+        "data-testid": "scrubber-overlay",
+        x: a.x,
+        y: a.y,
+        width: a.width,
+        height: a.height,
+        fill: e.overlayColor,
+        opacity: e.overlayOpacity
+      }
+    ),
+    o && u.map((d) => /* @__PURE__ */ t(
+      "circle",
+      {
+        "data-testid": `scrubber-beacon-${d.id}`,
+        cx: c,
+        cy: d.pixelY,
+        r: e.beaconRadius,
+        fill: d.stroke,
+        stroke: C.markOutline,
+        strokeWidth: e.beaconStrokeWidth
+      },
+      d.id
+    )),
+    i !== void 0 && /* @__PURE__ */ t(
+      m,
+      {
+        pixelX: c,
+        drawingArea: n,
+        title: i.resolvedTitle,
+        items: i.items,
+        offset: i.offset,
+        minWidth: i.minWidth
+      }
+    )
+  ] });
+}
+export {
+  j as Scrubber
+};

package/dist/lib/Components/visualization/Scrubber/ScrubberProvider.d.ts

@@ -0,0 +1,3 @@
+import { ScrubberProviderProps } from './types';
+export declare function ScrubberProvider({ children, svgRef, enableScrubbing, onScrubberPositionChange, magnetRadius, }: Readonly<ScrubberProviderProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ScrubberProvider.d.ts.map

package/dist/lib/Components/visualization/Scrubber/ScrubberProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrubberProvider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/Scrubber/ScrubberProvider.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAU3E,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,eAAe,EACf,wBAAwB,EACxB,YAA2C,GAC5C,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CAmOjC"}

package/dist/lib/Components/visualization/Scrubber/ScrubberProvider.js

@@ -0,0 +1,154 @@
+import { jsx as K } from "react/jsx-runtime";
+import { useState as j, useRef as C, useMemo as X, useCallback as c, useEffect as z } from "react";
+import { chartConfig as H } from "../config.js";
+import { clamp as g } from "../utils/numbers.js";
+import { buildSortedMagnets as N, getDataIndexFromPosition as U, resolvePixelX as V, applyMagnetization as G } from "./utils.js";
+import { useCartesianChartContext as J } from "../CartesianChart/context/cartesianChartContext.js";
+import { useMagneticSnapshot as O } from "../Point/pointContext/magneticPointsContext.js";
+import { ScrubberContextProvider as Q } from "./context/scrubberContext.js";
+const { scrubber: l } = H;
+function te({
+  children: T,
+  svgRef: D,
+  enableScrubbing: r,
+  onScrubberPositionChange: R,
+  magnetRadius: E = l.defaultMagnetRadius
+}) {
+  const { getXScale: m, getXAxisConfig: v, dataLength: n } = J(), { getMagneticPoints: w, version: B } = O(), [h, F] = j(
+    void 0
+  ), p = C(h);
+  p.current = h;
+  const L = C(null), f = C(0), A = X(() => {
+    const e = w();
+    return N({
+      magneticIndices: e,
+      getPixelForIndex: (t) => V(t, m, v())
+    });
+  }, [B, w, m, v]), a = c(
+    (e) => {
+      const t = e === void 0 || n <= 0 ? void 0 : g(e, 0, n - 1);
+      F(t), R?.(t);
+    },
+    [n, R]
+  ), I = c(
+    (e) => {
+      const t = m();
+      if (!t || !r || n <= 0) return;
+      const i = v();
+      let o = U(
+        e,
+        t,
+        i,
+        n
+      );
+      E > 0 && (o = G({
+        resolvedIndex: o,
+        pixelX: e,
+        sortedMagnets: A,
+        magnetRadius: E
+      })), o !== p.current && a(o);
+    },
+    [
+      r,
+      m,
+      v,
+      n,
+      A,
+      E,
+      a
+    ]
+  ), u = c(
+    (e) => {
+      L.current = e, f.current || (f.current = requestAnimationFrame(() => {
+        f.current = 0;
+        const t = L.current;
+        t !== null && (L.current = null, I(t));
+      }));
+    },
+    [I]
+  ), s = c(() => {
+    r && a(void 0);
+  }, [r, a]), x = c(
+    (e) => {
+      const i = e.currentTarget.getBoundingClientRect();
+      u(e.clientX - i.left);
+    },
+    [u]
+  ), P = c(
+    (e) => {
+      if (!r || !e.touches.length) return;
+      const t = e.touches[0], o = e.currentTarget.getBoundingClientRect();
+      u(t.clientX - o.left);
+    },
+    [r, u]
+  ), k = c(
+    (e) => {
+      if (!e.touches.length) return;
+      e.preventDefault();
+      const t = e.touches[0], o = e.currentTarget.getBoundingClientRect();
+      u(t.clientX - o.left);
+    },
+    [u]
+  ), M = c(
+    (e) => {
+      if (!r || n <= 0) return;
+      const t = n - 1, i = p.current ?? t, o = e.shiftKey ? g(
+        Math.floor(t * l.keyboardPageStepRatio),
+        l.keyboardPageStepMin,
+        l.keyboardPageStepMax
+      ) : l.keyboardStep;
+      let d;
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault(), d = g(i - o, 0, t);
+          break;
+        case "ArrowRight":
+          e.preventDefault(), d = g(i + o, 0, t);
+          break;
+        case "Home":
+          e.preventDefault(), d = 0;
+          break;
+        case "End":
+          e.preventDefault(), d = t;
+          break;
+        case "Escape":
+          e.preventDefault(), d = void 0;
+          break;
+        default:
+          return;
+      }
+      a(d);
+    },
+    [r, n, a]
+  ), y = c(() => {
+    !r || p.current === void 0 || s();
+  }, [r, s]);
+  z(() => {
+    const e = D.current;
+    if (!(!e || !r))
+      return e.addEventListener("mousemove", x), e.addEventListener("mouseleave", s), e.addEventListener("touchstart", P, { passive: !1 }), e.addEventListener("touchmove", k, { passive: !1 }), e.addEventListener("touchend", s), e.addEventListener("touchcancel", s), e.addEventListener("keydown", M), e.addEventListener("blur", y), () => {
+        e.removeEventListener("mousemove", x), e.removeEventListener("mouseleave", s), e.removeEventListener("touchstart", P), e.removeEventListener("touchmove", k), e.removeEventListener("touchend", s), e.removeEventListener("touchcancel", s), e.removeEventListener("keydown", M), e.removeEventListener("blur", y), cancelAnimationFrame(f.current), f.current = 0;
+      };
+  }, [
+    D,
+    r,
+    x,
+    s,
+    P,
+    k,
+    M,
+    y
+  ]);
+  const q = X(
+    () => ({
+      enableScrubbing: r,
+      scrubberPosition: h,
+      onScrubberPositionChange: a
+    }),
+    [r, h, a]
+  );
+  return /* @__PURE__ */ K(Q, { value: q, children: T });
+}
+export {
+  te as ScrubberProvider
+};