@ledgerhq/lumen-ui-react-visualization 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/dist/index.js +15 -9
  2. package/dist/lib/Components/CartesianChart/CartesianChart.d.ts +1 -1
  3. package/dist/lib/Components/CartesianChart/CartesianChart.d.ts.map +1 -1
  4. package/dist/lib/Components/CartesianChart/CartesianChart.js +78 -79
  5. package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts +3 -0
  6. package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts.map +1 -0
  7. package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.js +41 -0
  8. package/dist/lib/Components/CartesianChart/RevealClip/context.d.ts +7 -0
  9. package/dist/lib/Components/CartesianChart/RevealClip/context.d.ts.map +1 -0
  10. package/dist/lib/Components/CartesianChart/RevealClip/context.js +6 -0
  11. package/dist/lib/Components/CartesianChart/RevealClip/index.d.ts +3 -0
  12. package/dist/lib/Components/CartesianChart/RevealClip/index.d.ts.map +1 -0
  13. package/dist/lib/Components/CartesianChart/RevealClip/types.d.ts +37 -0
  14. package/dist/lib/Components/CartesianChart/RevealClip/types.d.ts.map +1 -0
  15. package/dist/lib/Components/CartesianChart/RevealClip/utils.d.ts +17 -0
  16. package/dist/lib/Components/CartesianChart/RevealClip/utils.d.ts.map +1 -0
  17. package/dist/lib/Components/CartesianChart/RevealClip/utils.js +23 -0
  18. package/dist/lib/Components/CartesianChart/types.d.ts +6 -0
  19. package/dist/lib/Components/CartesianChart/types.d.ts.map +1 -1
  20. package/dist/lib/Components/CartesianChart/utils.js +8 -8
  21. package/dist/lib/Components/Line/Line.d.ts.map +1 -1
  22. package/dist/lib/Components/Line/Line.js +22 -21
  23. package/dist/lib/Components/LineChart/LineChart.d.ts +1 -1
  24. package/dist/lib/Components/LineChart/LineChart.d.ts.map +1 -1
  25. package/dist/lib/Components/LineChart/LineChart.js +36 -34
  26. package/dist/lib/Components/LineChart/types.d.ts +5 -0
  27. package/dist/lib/Components/LineChart/types.d.ts.map +1 -1
  28. package/dist/lib/Components/Point/Point.d.ts.map +1 -1
  29. package/dist/lib/Components/Point/Point.js +19 -17
  30. package/dist/lib/Components/ReferenceLine/ReferenceLine.d.ts +3 -0
  31. package/dist/lib/Components/ReferenceLine/ReferenceLine.d.ts.map +1 -0
  32. package/dist/lib/Components/ReferenceLine/ReferenceLine.js +122 -0
  33. package/dist/lib/Components/ReferenceLine/constants.d.ts +4 -0
  34. package/dist/lib/Components/ReferenceLine/constants.d.ts.map +1 -0
  35. package/dist/lib/Components/ReferenceLine/constants.js +7 -0
  36. package/dist/lib/Components/ReferenceLine/index.d.ts +3 -0
  37. package/dist/lib/Components/ReferenceLine/index.d.ts.map +1 -0
  38. package/dist/lib/Components/ReferenceLine/types.d.ts +74 -0
  39. package/dist/lib/Components/ReferenceLine/types.d.ts.map +1 -0
  40. package/dist/lib/Components/ReferenceLine/utils.d.ts +49 -0
  41. package/dist/lib/Components/ReferenceLine/utils.d.ts.map +1 -0
  42. package/dist/lib/Components/ReferenceLine/utils.js +65 -0
  43. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.d.ts +3 -0
  44. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.d.ts.map +1 -0
  45. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.js +50 -0
  46. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.d.ts +12 -0
  47. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.d.ts.map +1 -0
  48. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.js +85 -0
  49. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/constants.d.ts +11 -0
  50. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/constants.d.ts.map +1 -0
  51. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/constants.js +13 -0
  52. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/index.d.ts +3 -0
  53. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/index.d.ts.map +1 -0
  54. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/utils.d.ts +43 -0
  55. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/utils.d.ts.map +1 -0
  56. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/utils.js +59 -0
  57. package/dist/lib/Components/Scrubber/Scrubber.d.ts +14 -2
  58. package/dist/lib/Components/Scrubber/Scrubber.d.ts.map +1 -1
  59. package/dist/lib/Components/Scrubber/Scrubber.js +107 -81
  60. package/dist/lib/Components/Scrubber/index.d.ts +2 -1
  61. package/dist/lib/Components/Scrubber/index.d.ts.map +1 -1
  62. package/dist/lib/Components/Scrubber/types.d.ts +99 -1
  63. package/dist/lib/Components/Scrubber/types.d.ts.map +1 -1
  64. package/dist/lib/Components/index.d.ts +1 -0
  65. package/dist/lib/Components/index.d.ts.map +1 -1
  66. package/dist/package.json +3 -3
  67. package/package.json +3 -3
@@ -0,0 +1,85 @@
1
+ import { jsxs as R, jsx as f } from "react/jsx-runtime";
2
+ import { ChartTooltipItem as _ } from "./ChartTooltipItem.js";
3
+ import { TOOLTIP_TRANSITION as D, BORDER_RADIUS as x, PADDING_Y as O, ROW_HEIGHT as u, PADDING_X as E, ROW_GAP as g, DEFAULT_OFFSET as L, DEFAULT_TOOLTIP_MIN_WIDTH as S } from "./constants.js";
4
+ import { useTooltipMeasurement as W, computeTooltipWidth as F, computeTooltipHeight as H, computeTooltipX as N, computeItemsBaseY as P } from "./utils.js";
5
+ import { cssVar as o } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
6
+ const A = {
7
+ fontSize: o("var(--font-style-body-4-size)"),
8
+ fontFamily: o("var(--font-family-font)"),
9
+ fill: o("var(--text-base)"),
10
+ fontWeight: o("var(--font-style-body-4-weight-medium)")
11
+ };
12
+ function $({
13
+ pixelX: T,
14
+ drawingArea: e,
15
+ title: l,
16
+ items: i,
17
+ offset: m = L,
18
+ minWidth: h = S
19
+ }) {
20
+ const t = l != null, { widths: c, titleRef: d, labelRefs: y, valueRefs: I } = W(
21
+ i,
22
+ t,
23
+ l
24
+ );
25
+ if (i.length === 0)
26
+ return null;
27
+ const a = F(c, t, h), s = N(T, m, a, e), v = H(i.length, t), b = P(e.y, t);
28
+ return /* @__PURE__ */ R(
29
+ "g",
30
+ {
31
+ "data-testid": "chart-tooltip",
32
+ role: "tooltip",
33
+ style: {
34
+ opacity: c === null ? 0 : 1,
35
+ transition: D,
36
+ pointerEvents: "none"
37
+ },
38
+ children: [
39
+ /* @__PURE__ */ f(
40
+ "rect",
41
+ {
42
+ x: s,
43
+ y: e.y,
44
+ width: a,
45
+ height: v,
46
+ rx: x,
47
+ fill: o("var(--background-muted)")
48
+ }
49
+ ),
50
+ t && /* @__PURE__ */ f(
51
+ "text",
52
+ {
53
+ ref: d,
54
+ "data-testid": "chart-tooltip-title",
55
+ x: s + E,
56
+ y: e.y + O + u / 2,
57
+ dominantBaseline: "middle",
58
+ style: A,
59
+ children: l
60
+ }
61
+ ),
62
+ i.map((n, r) => /* @__PURE__ */ f(
63
+ _,
64
+ {
65
+ label: n.label,
66
+ value: n.value,
67
+ x: s,
68
+ y: b + r * (u + g) + u / 2,
69
+ width: a,
70
+ labelRef: (p) => {
71
+ y.current[r] = p;
72
+ },
73
+ valueRef: (p) => {
74
+ I.current[r] = p;
75
+ }
76
+ },
77
+ `${n.label}-${n.value}-${r}`
78
+ ))
79
+ ]
80
+ }
81
+ );
82
+ }
83
+ export {
84
+ $ as DefaultScrubberTooltip
85
+ };
@@ -0,0 +1,11 @@
1
+ export declare const DEFAULT_OFFSET = 10;
2
+ export declare const PADDING_X = 8;
3
+ export declare const PADDING_Y = 8;
4
+ export declare const ROW_HEIGHT = 16;
5
+ export declare const ROW_GAP = 6;
6
+ export declare const TITLE_GAP = 6;
7
+ export declare const BORDER_RADIUS = 4;
8
+ export declare const TOOLTIP_TRANSITION = "opacity 0.15s ease-out 0.05s";
9
+ export declare const LABEL_VALUE_GAP = 12;
10
+ export declare const DEFAULT_TOOLTIP_MIN_WIDTH = 80;
11
+ //# sourceMappingURL=constants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,kBAAkB,iCAAiC,CAAC;AACjE,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
@@ -0,0 +1,13 @@
1
+ const o = 10, s = 8, t = 8, T = 16, _ = 6, c = 6, A = 4, I = "opacity 0.15s ease-out 0.05s", n = 12, D = 80;
2
+ export {
3
+ A as BORDER_RADIUS,
4
+ o as DEFAULT_OFFSET,
5
+ D as DEFAULT_TOOLTIP_MIN_WIDTH,
6
+ n as LABEL_VALUE_GAP,
7
+ s as PADDING_X,
8
+ t as PADDING_Y,
9
+ _ as ROW_GAP,
10
+ T as ROW_HEIGHT,
11
+ c as TITLE_GAP,
12
+ I as TOOLTIP_TRANSITION
13
+ };
@@ -0,0 +1,3 @@
1
+ export { ChartTooltipItem } from './ChartTooltipItem';
2
+ export { DefaultScrubberTooltip } from './DefaultScrubberTooltip';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC"}
@@ -0,0 +1,43 @@
1
+ import { RefObject } from 'react';
2
+ import { DrawingArea } from '../../../utils/types';
3
+ import { ChartTooltipItemData, SvgTextContent } from '../types';
4
+ type Widths = {
5
+ title: number;
6
+ labels: number[];
7
+ values: number[];
8
+ };
9
+ type UseTooltipMeasurementReturn = {
10
+ widths: Widths | null;
11
+ titleRef: RefObject<SVGTextElement | null>;
12
+ labelRefs: RefObject<(SVGTextElement | null)[]>;
13
+ valueRefs: RefObject<(SVGTextElement | null)[]>;
14
+ };
15
+ export declare const safeGetBBoxWidth: (el: SVGGraphicsElement | null) => number;
16
+ /**
17
+ * Derive the auto-fit tooltip width from measured text widths,
18
+ * clamped to a minimum floor.
19
+ */
20
+ export declare const computeTooltipWidth: (widths: Widths | null, hasTitle: boolean, minWidth: number) => number;
21
+ /**
22
+ * Compute the tooltip's horizontal position, flipping to the left
23
+ * of the scrubber line when it would overflow the drawing area.
24
+ */
25
+ export declare const computeTooltipX: (pixelX: number, offset: number, tooltipWidth: number, drawingArea: DrawingArea) => number;
26
+ /**
27
+ * Compute the total tooltip height from item count and title presence.
28
+ */
29
+ export declare const computeTooltipHeight: (itemCount: number, hasTitle: boolean) => number;
30
+ /**
31
+ * Vertical offset where tooltip rows begin, accounting for title presence.
32
+ */
33
+ export declare const computeItemsBaseY: (drawingAreaY: number, hasTitle: boolean) => number;
34
+ /**
35
+ * Manages SVG text measurement for the tooltip via `getBBox`.
36
+ *
37
+ * A single `ResizeObserver` is created on mount and reused for the
38
+ * component's entire lifetime, avoiding the cost of tearing down and
39
+ * recreating an observer on every scrubber movement.
40
+ */
41
+ export declare function useTooltipMeasurement(items: ChartTooltipItemData[], hasTitle: boolean, title: SvgTextContent | null | undefined): UseTooltipMeasurementReturn;
42
+ export {};
43
+ //# sourceMappingURL=utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAUrE,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;AAEF;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,oBAAoB,EAAE,EAC7B,QAAQ,EAAE,OAAO,EACjB,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,GACvC,2BAA2B,CAkD7B"}
@@ -0,0 +1,59 @@
1
+ import { useRef as i, useState as W, useEffect as _, useLayoutEffect as g } from "react";
2
+ import { LABEL_VALUE_GAP as E, PADDING_Y as d, ROW_HEIGHT as p, ROW_GAP as x, PADDING_X as G, TITLE_GAP as b } from "./constants.js";
3
+ const m = (t) => {
4
+ if (!t || typeof t.getBBox != "function") return 0;
5
+ try {
6
+ return t.getBBox().width;
7
+ } catch {
8
+ return 0;
9
+ }
10
+ }, A = (t, e, r) => {
11
+ const n = t && e ? t.title : 0, c = t ? t.labels.map(
12
+ (a, f) => a + E + (t.values[f] ?? 0)
13
+ ) : [], l = Math.max(n, ...c) + G * 2;
14
+ return Math.max(l, r);
15
+ }, H = (t, e, r, n) => {
16
+ const c = t + e + r > n.x + n.width;
17
+ return Math.max(
18
+ n.x,
19
+ c ? t - e - r : t + e
20
+ );
21
+ }, I = (t, e) => {
22
+ const r = e ? p + b : 0;
23
+ return d * 2 + r + t * p + (t - 1) * x;
24
+ }, P = (t, e) => {
25
+ const r = e ? p + b : 0;
26
+ return t + d + r;
27
+ };
28
+ function y(t, e, r) {
29
+ const n = i(null), c = i([]), s = i([]), l = i(null), a = i(() => {
30
+ }), [f, v] = W(null);
31
+ return a.current = () => {
32
+ const o = e ? m(n.current) : 0, u = t.map(
33
+ (R, h) => m(c.current[h])
34
+ ), B = t.map(
35
+ (R, h) => m(s.current[h])
36
+ );
37
+ v({
38
+ title: o,
39
+ labels: u,
40
+ values: B
41
+ });
42
+ }, _(() => {
43
+ if (!(typeof ResizeObserver > "u"))
44
+ return l.current = new ResizeObserver(() => a.current()), () => l.current?.disconnect();
45
+ }, []), g(() => {
46
+ if (t.length === 0) return;
47
+ c.current.length = t.length, s.current.length = t.length, a.current();
48
+ const o = l.current;
49
+ o && (o.disconnect(), n.current && o.observe(n.current), c.current.forEach((u) => u && o.observe(u)), s.current.forEach((u) => u && o.observe(u)));
50
+ }, [t, r, e]), { widths: f, titleRef: n, labelRefs: c, valueRefs: s };
51
+ }
52
+ export {
53
+ P as computeItemsBaseY,
54
+ I as computeTooltipHeight,
55
+ A as computeTooltipWidth,
56
+ H as computeTooltipX,
57
+ m as safeGetBBoxWidth,
58
+ y as useTooltipMeasurement
59
+ };
@@ -1,7 +1,8 @@
1
1
  import { ScrubberProps } from './types';
2
2
  /**
3
3
  * Renders the scrubber visuals: vertical reference line, future-data overlay
4
- * rect, per-series beacon dots, and an optional formatted label above the line.
4
+ * rect, per-series beacon dots, optional label above the line, and an optional
5
+ * tooltip when {@link ScrubberProps.tooltip} is set, using {@link DefaultScrubberTooltip}.
5
6
  *
6
7
  * Must be used as a child of `LineChart` (or `CartesianChart`) with
7
8
  * `enableScrubbing` enabled. Renders nothing when no scrubber position is active.
@@ -12,6 +13,17 @@ import { ScrubberProps } from './types';
12
13
  * <Scrubber label={(i) => data[i].date} />
13
14
  * </LineChart>
14
15
  * ```
16
+ *
17
+ * @example Tooltip
18
+ * ```tsx
19
+ * <Scrubber
20
+ * tooltip={(i) => ({
21
+ * title: `${counts[i]} Transactions`,
22
+ * items: [{ label: 'Index', value: String(i) }],
23
+ * minWidth: 160,
24
+ * })}
25
+ * />
26
+ * ```
15
27
  */
16
- export declare function Scrubber({ label, hideLine, hideOverlay, showBeacons, }: Readonly<ScrubberProps>): import("react/jsx-runtime").JSX.Element | null;
28
+ export declare function Scrubber({ label, hideLine, hideOverlay, showBeacons, tooltip, }: Readonly<ScrubberProps>): import("react/jsx-runtime").JSX.Element | null;
17
29
  //# sourceMappingURL=Scrubber.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Scrubber/Scrubber.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAa7C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAgB,EAChB,WAAmB,EACnB,WAAmB,GACpB,EAAE,QAAQ,CAAC,aAAa,CAAC,kDA0IzB"}
1
+ {"version":3,"file":"Scrubber.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Scrubber/Scrubber.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAa7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAgB,EAChB,WAAmB,EACnB,WAAmB,EACnB,OAAO,GACR,EAAE,QAAQ,CAAC,aAAa,CAAC,kDA2KzB"}
@@ -1,134 +1,160 @@
1
- import { jsxs as l, jsx as i, Fragment as F } from "react/jsx-runtime";
2
- import { useId as N, useMemo as c } from "react";
3
- import { resolvePixelX as R, resolvePixelY as W, LINE_GRADIENT_EDGE_OPACITY as g, OVERLAY_OPACITY as X, LABEL_OFFSET_Y as D, BEACON_STROKE_WIDTH as P, BEACON_RADIUS as G, OVERLAY_OFFSET as f, OVERLAY_LINE_INSET as E } from "./utils.js";
4
- import { useScrubberContext as V } from "./context/scrubberContext.js";
5
- import { useCartesianChartContext as H } from "../CartesianChart/context/cartesianChartContext.js";
6
- import { cssVar as t } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
7
- function K({
8
- label: a,
9
- hideLine: A = !1,
10
- hideOverlay: C = !1,
11
- showBeacons: d = !1
1
+ import { jsxs as v, jsx as o, Fragment as F } from "react/jsx-runtime";
2
+ import { useId as N, useMemo as d } from "react";
3
+ import { resolvePixelX as P, resolvePixelY as R, LINE_GRADIENT_EDGE_OPACITY as O, OVERLAY_OPACITY as X, LABEL_OFFSET_Y as G, BEACON_STROKE_WIDTH as V, BEACON_RADIUS as H, OVERLAY_OFFSET as m, OVERLAY_LINE_INSET as S } from "./utils.js";
4
+ import { useScrubberContext as M } from "./context/scrubberContext.js";
5
+ import { useCartesianChartContext as U } from "../CartesianChart/context/cartesianChartContext.js";
6
+ import { DefaultScrubberTooltip as j } from "./DefaultScrubberTooltip/DefaultScrubberTooltip.js";
7
+ import { cssVar as r } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
8
+ function Z({
9
+ label: n,
10
+ hideLine: Y = !1,
11
+ hideOverlay: _ = !1,
12
+ showBeacons: l = !1,
13
+ tooltip: f
12
14
  }) {
13
- const u = N(), { scrubberPosition: e } = V(), {
14
- getXScale: b,
15
- getXAxisConfig: v,
16
- getYScale: p,
17
- drawingArea: O,
18
- series: x,
19
- seriesMap: y
20
- } = H(), o = c(() => {
15
+ const b = N(), { scrubberPosition: e } = M(), {
16
+ getXScale: p,
17
+ getXAxisConfig: h,
18
+ getYScale: y,
19
+ drawingArea: x,
20
+ series: g,
21
+ seriesMap: E
22
+ } = U(), i = d(() => {
21
23
  if (e !== void 0)
22
- return R(e, b, v());
23
- }, [e, b, v]), Y = c(() => e === void 0 || !d ? [] : x.map((r) => {
24
- const w = y.get(r.id)?.data, h = W(e, w, p);
25
- return h === void 0 ? null : { id: r.id, stroke: r.stroke, pixelY: h };
24
+ return P(e, p, h());
25
+ }, [e, p, h]), I = d(() => e === void 0 || !l ? [] : g.map((t) => {
26
+ const u = E.get(t.id)?.data, C = R(e, u, y);
27
+ return C === void 0 ? null : { id: t.id, stroke: t.stroke, pixelY: C };
26
28
  }).filter(
27
- (r) => r !== null
28
- ), [e, d, x, y, p]), m = c(() => {
29
- if (!(e === void 0 || !a))
30
- return a(e);
31
- }, [e, a]);
32
- if (e === void 0 || o === void 0)
29
+ (t) => t !== null
30
+ ), [e, l, g, E, y]), A = d(() => {
31
+ if (!(e === void 0 || !n))
32
+ return n(e);
33
+ }, [e, n]), a = d(() => {
34
+ if (e === void 0 || !f)
35
+ return;
36
+ const t = f(e);
37
+ if (t.items.length === 0) return;
38
+ const u = typeof t.title == "function" ? t.title(e) : t.title;
39
+ return {
40
+ items: t.items,
41
+ resolvedTitle: u,
42
+ offset: t.offset,
43
+ minWidth: t.minWidth
44
+ };
45
+ }, [e, f]);
46
+ if (e === void 0 || i === void 0)
33
47
  return null;
34
48
  const {
35
- x: _,
49
+ x: T,
36
50
  y: s,
37
- width: S,
38
- height: n
39
- } = O, k = o + E, I = s - f, L = Math.max(
51
+ width: k,
52
+ height: c
53
+ } = x, W = i + S, L = s - m, w = Math.max(
40
54
  0,
41
- _ + S - o - E + f
42
- ), T = n + f * 2;
43
- return /* @__PURE__ */ l("g", { "data-testid": "scrubber", children: [
44
- !A && /* @__PURE__ */ l(F, { children: [
45
- /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ l(
55
+ T + k - i - S + m
56
+ ), D = c + m * 2;
57
+ return /* @__PURE__ */ v("g", { "data-testid": "scrubber", children: [
58
+ !Y && /* @__PURE__ */ v(F, { children: [
59
+ /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ v(
46
60
  "linearGradient",
47
61
  {
48
- id: u,
62
+ id: b,
49
63
  gradientUnits: "userSpaceOnUse",
50
- x1: o,
64
+ x1: i,
51
65
  y1: s,
52
- x2: o,
53
- y2: s + n,
66
+ x2: i,
67
+ y2: s + c,
54
68
  children: [
55
- /* @__PURE__ */ i(
69
+ /* @__PURE__ */ o(
56
70
  "stop",
57
71
  {
58
72
  offset: "0%",
59
- stopColor: t("var(--border-base)"),
60
- stopOpacity: g
73
+ stopColor: r("var(--border-base)"),
74
+ stopOpacity: O
61
75
  }
62
76
  ),
63
- /* @__PURE__ */ i("stop", { offset: "20%", stopColor: t("var(--border-base)") }),
64
- /* @__PURE__ */ i("stop", { offset: "80%", stopColor: t("var(--border-base)") }),
65
- /* @__PURE__ */ i(
77
+ /* @__PURE__ */ o("stop", { offset: "20%", stopColor: r("var(--border-base)") }),
78
+ /* @__PURE__ */ o("stop", { offset: "80%", stopColor: r("var(--border-base)") }),
79
+ /* @__PURE__ */ o(
66
80
  "stop",
67
81
  {
68
82
  offset: "100%",
69
- stopColor: t("var(--border-base)"),
70
- stopOpacity: g
83
+ stopColor: r("var(--border-base)"),
84
+ stopOpacity: O
71
85
  }
72
86
  )
73
87
  ]
74
88
  }
75
89
  ) }),
76
- /* @__PURE__ */ i(
90
+ /* @__PURE__ */ o(
77
91
  "line",
78
92
  {
79
93
  "data-testid": "scrubber-line",
80
- x1: o,
94
+ x1: i,
81
95
  y1: s,
82
- x2: o,
83
- y2: s + n,
84
- stroke: `url(#${u})`,
85
- strokeWidth: t("var(--stroke-1)")
96
+ x2: i,
97
+ y2: s + c,
98
+ stroke: `url(#${b})`,
99
+ strokeWidth: r("var(--stroke-1)")
86
100
  }
87
101
  )
88
102
  ] }),
89
- !C && /* @__PURE__ */ i(
103
+ !_ && /* @__PURE__ */ o(
90
104
  "rect",
91
105
  {
92
106
  "data-testid": "scrubber-overlay",
93
- x: k,
94
- y: I,
95
- width: L,
96
- height: T,
97
- fill: t("var(--background-base)"),
107
+ x: W,
108
+ y: L,
109
+ width: w,
110
+ height: D,
111
+ fill: r("var(--background-base)"),
98
112
  opacity: X
99
113
  }
100
114
  ),
101
- m !== void 0 && /* @__PURE__ */ i(
115
+ A !== void 0 && /* @__PURE__ */ o(
102
116
  "text",
103
117
  {
104
118
  "data-testid": "scrubber-label",
105
- x: o,
106
- y: s - D,
119
+ x: i,
120
+ y: s - G,
107
121
  textAnchor: "middle",
108
122
  style: {
109
- fill: t("var(--text-base)"),
110
- fontSize: t("var(--font-style-body-4-size)"),
111
- fontWeight: t("var(--font-style-body-4-weight-medium)"),
112
- fontFamily: t("var(--font-family-font)")
123
+ fill: r("var(--text-base)"),
124
+ fontSize: r("var(--font-style-body-4-size)"),
125
+ fontWeight: r("var(--font-style-body-4-weight-medium)"),
126
+ fontFamily: r("var(--font-family-font)")
113
127
  },
114
- children: m
128
+ children: A
115
129
  }
116
130
  ),
117
- d && Y.map((r) => /* @__PURE__ */ i(
131
+ l && I.map((t) => /* @__PURE__ */ o(
118
132
  "circle",
119
133
  {
120
- "data-testid": `scrubber-beacon-${r.id}`,
121
- cx: o,
122
- cy: r.pixelY,
123
- r: G,
124
- fill: r.stroke,
125
- stroke: t("var(--background-canvas)"),
126
- strokeWidth: P
134
+ "data-testid": `scrubber-beacon-${t.id}`,
135
+ cx: i,
136
+ cy: t.pixelY,
137
+ r: H,
138
+ fill: t.stroke,
139
+ stroke: r("var(--background-canvas)"),
140
+ strokeWidth: V
127
141
  },
128
- r.id
129
- ))
142
+ t.id
143
+ )),
144
+ a !== void 0 && /* @__PURE__ */ o(
145
+ j,
146
+ {
147
+ pixelX: i,
148
+ drawingArea: x,
149
+ dataIndex: e,
150
+ title: a.resolvedTitle,
151
+ items: a.items,
152
+ offset: a.offset,
153
+ minWidth: a.minWidth
154
+ }
155
+ )
130
156
  ] });
131
157
  }
132
158
  export {
133
- K as Scrubber
159
+ Z as Scrubber
134
160
  };
@@ -1,4 +1,5 @@
1
1
  export { Scrubber } from './Scrubber';
2
2
  export { useScrubberContext } from './context';
3
- export type { ScrubberProps, ScrubberContextValue } from './types';
3
+ export { ChartTooltipItem, DefaultScrubberTooltip, } from './DefaultScrubberTooltip';
4
+ export type { ChartTooltipItemData, ChartTooltipItemProps, ScrubberContextValue, ScrubberProps, ScrubberTooltipContent, ScrubberTooltipProps, SvgTextContent, } from './types';
4
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Scrubber/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Scrubber/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,sBAAsB,GACvB,MAAM,0BAA0B,CAAC;AAClC,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EACpB,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,cAAc,GACf,MAAM,SAAS,CAAC"}
@@ -1,4 +1,5 @@
1
- import { ReactNode, RefObject } from 'react';
1
+ import { ReactElement, ReactNode, Ref, RefObject, SVGProps } from 'react';
2
+ import { DrawingArea } from '../../utils/types';
2
3
  export type ScrubberContextValue = {
3
4
  /**
4
5
  * Whether scrubbing interactions are enabled.
@@ -28,6 +29,97 @@ export type ScrubberProviderProps = {
28
29
  */
29
30
  onScrubberPositionChange?: (index: number | undefined) => void;
30
31
  };
32
+ /**
33
+ * Valid content for an SVG `<text>` element: a plain string,
34
+ * a number, or a `<tspan>` element.
35
+ */
36
+ export type SvgTextContent = string | number | ReactElement<SVGProps<SVGTSpanElement>, 'tspan'>;
37
+ export type ChartTooltipItemData = {
38
+ /** Label displayed on the left side of the row. */
39
+ label: SvgTextContent;
40
+ /** Value displayed on the right side of the row. */
41
+ value: SvgTextContent;
42
+ };
43
+ export type ChartTooltipItemProps = ChartTooltipItemData & {
44
+ /**
45
+ * X position in SVG coordinate space.
46
+ * @default 0
47
+ */
48
+ x?: number;
49
+ /**
50
+ * Y midline position in SVG coordinate space.
51
+ * @default 0
52
+ */
53
+ y?: number;
54
+ /**
55
+ * Width allocated to this row, used to right-align the value text.
56
+ */
57
+ width: number;
58
+ /**
59
+ * Optional ref forwarded to the label `<text>` element. Useful to measure
60
+ * the label's natural width via `getBBox` for auto-fit layouts.
61
+ */
62
+ labelRef?: Ref<SVGTextElement>;
63
+ /**
64
+ * Optional ref forwarded to the value `<text>` element. Useful to measure
65
+ * the value's natural width via `getBBox` for auto-fit layouts.
66
+ */
67
+ valueRef?: Ref<SVGTextElement>;
68
+ };
69
+ export type ScrubberTooltipLayoutProps = {
70
+ /**
71
+ * Horizontal gap in pixels between the scrubber line and the tooltip box.
72
+ * @default 10
73
+ */
74
+ offset?: number;
75
+ /**
76
+ * Minimum width in pixels. The tooltip auto-fits to the rendered content
77
+ * but never collapses below this floor; raise it to avoid jitter when
78
+ * value length changes between indices.
79
+ * @default 80
80
+ */
81
+ minWidth?: number;
82
+ };
83
+ export type ScrubberTooltipProps = ScrubberTooltipLayoutProps & {
84
+ /**
85
+ * Horizontal pixel position of the scrubber line within the SVG coordinate
86
+ * space. Used to place the tooltip left or right of the line.
87
+ */
88
+ pixelX: number;
89
+ /**
90
+ * Bounding box of the chart's drawing area (x, y, width, height). Used to
91
+ * constrain the tooltip so it never overflows the chart boundaries.
92
+ */
93
+ drawingArea: DrawingArea;
94
+ /**
95
+ * Zero-based index of the data point currently under the scrubber. Maps
96
+ * directly to the series data arrays so consumers can look up values.
97
+ */
98
+ dataIndex: number;
99
+ /**
100
+ * Optional title displayed at the top of the tooltip. Pass `null` or omit
101
+ * to render the tooltip without a title row.
102
+ */
103
+ title?: SvgTextContent | null;
104
+ /**
105
+ * List of label/value pairs rendered as rows inside the tooltip body.
106
+ */
107
+ items: ChartTooltipItemData[];
108
+ };
109
+ /**
110
+ * Return value of the `tooltip` callback on {@link ScrubberProps}.
111
+ */
112
+ export type ScrubberTooltipContent = ScrubberTooltipLayoutProps & {
113
+ /**
114
+ * Optional header. Static value or callback per data index.
115
+ * A callback may return `null` or `undefined` to suppress the title.
116
+ */
117
+ title?: SvgTextContent | ((index: number) => SvgTextContent | null | undefined);
118
+ /**
119
+ * Tooltip rows for this index. Return an empty array to hide the tooltip.
120
+ */
121
+ items: ChartTooltipItemData[];
122
+ };
31
123
  export type ScrubberProps = {
32
124
  /**
33
125
  * Formats a label string shown above the reference line for a given data index.
@@ -49,5 +141,11 @@ export type ScrubberProps = {
49
141
  * @default false
50
142
  */
51
143
  showBeacons?: boolean;
144
+ /**
145
+ * Produces tooltip content for the active data index. When set, {@link DefaultScrubberTooltip}
146
+ * is rendered. Optional `offset` and `minWidth` on the returned object tune layout.
147
+ * Return `{ items: [] }` to hide the tooltip at an index.
148
+ */
149
+ tooltip?: (dataIndex: number) => ScrubberTooltipContent;
52
150
  };
53
151
  //# sourceMappingURL=types.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Scrubber/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Scrubber/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC;;OAEG;IACH,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;IACxC;;OAEG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,mDAAmD;IACnD,KAAK,EAAE,cAAc,CAAC;IACtB,oDAAoD;IACpD,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,GAAG;IACzD;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/B;;;OAGG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,0BAA0B,GAAG;IAC9D;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAAG;IAChE;;;OAGG;IACH,KAAK,CAAC,EACF,cAAc,GACd,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC3D;;OAEG;IACH,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,sBAAsB,CAAC;CACzD,CAAC"}
@@ -1,4 +1,5 @@
1
1
  export * from './LineChart';
2
2
  export * from './Point';
3
+ export * from './ReferenceLine';
3
4
  export * from './Scrubber';
4
5
  //# sourceMappingURL=index.d.ts.map