@ledgerhq/lumen-ui-react-visualization 0.1.19 → 0.1.21

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 (66) hide show
  1. package/dist/lib/Components/Axis/Axis.types.d.ts +6 -0
  2. package/dist/lib/Components/Axis/Axis.types.d.ts.map +1 -1
  3. package/dist/lib/Components/Axis/XAxis/XAxis.d.ts +1 -1
  4. package/dist/lib/Components/Axis/XAxis/XAxis.d.ts.map +1 -1
  5. package/dist/lib/Components/Axis/XAxis/XAxis.js +18 -17
  6. package/dist/lib/Components/Axis/YAxis/YAxis.d.ts +1 -1
  7. package/dist/lib/Components/Axis/YAxis/YAxis.d.ts.map +1 -1
  8. package/dist/lib/Components/Axis/YAxis/YAxis.js +20 -19
  9. package/dist/lib/Components/CartesianChart/CartesianChart.d.ts.map +1 -1
  10. package/dist/lib/Components/CartesianChart/CartesianChart.js +61 -61
  11. package/dist/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.d.ts +3 -0
  12. package/dist/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.d.ts.map +1 -0
  13. package/dist/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.js +41 -0
  14. package/dist/lib/Components/CartesianChart/RevealAnimation/context.d.ts +15 -0
  15. package/dist/lib/Components/CartesianChart/RevealAnimation/context.d.ts.map +1 -0
  16. package/dist/lib/Components/CartesianChart/RevealAnimation/context.js +10 -0
  17. package/dist/lib/Components/CartesianChart/RevealAnimation/index.d.ts +3 -0
  18. package/dist/lib/Components/CartesianChart/RevealAnimation/index.d.ts.map +1 -0
  19. package/dist/lib/Components/CartesianChart/RevealAnimation/types.d.ts +57 -0
  20. package/dist/lib/Components/CartesianChart/RevealAnimation/types.d.ts.map +1 -0
  21. package/dist/lib/Components/CartesianChart/RevealAnimation/utils.d.ts +31 -0
  22. package/dist/lib/Components/CartesianChart/RevealAnimation/utils.d.ts.map +1 -0
  23. package/dist/lib/Components/CartesianChart/RevealAnimation/utils.js +67 -0
  24. package/dist/lib/Components/CartesianChart/utils.d.ts +1 -24
  25. package/dist/lib/Components/CartesianChart/utils.d.ts.map +1 -1
  26. package/dist/lib/Components/CartesianChart/utils.js +12 -23
  27. package/dist/lib/Components/Line/Line.d.ts +1 -1
  28. package/dist/lib/Components/Line/Line.d.ts.map +1 -1
  29. package/dist/lib/Components/Line/Line.js +40 -33
  30. package/dist/lib/Components/Line/types.d.ts +7 -0
  31. package/dist/lib/Components/Line/types.d.ts.map +1 -1
  32. package/dist/lib/Components/Line/utils.d.ts +8 -3
  33. package/dist/lib/Components/Line/utils.d.ts.map +1 -1
  34. package/dist/lib/Components/Line/utils.js +30 -25
  35. package/dist/lib/Components/LineChart/LineChart.d.ts +1 -1
  36. package/dist/lib/Components/LineChart/LineChart.d.ts.map +1 -1
  37. package/dist/lib/Components/LineChart/LineChart.js +114 -102
  38. package/dist/lib/Components/LineChart/LineChartEmptyState/LineChartEmptyState.js +16 -16
  39. package/dist/lib/Components/LineChart/__stories__/chartStoryFixtures.d.ts +21 -0
  40. package/dist/lib/Components/LineChart/__stories__/chartStoryFixtures.d.ts.map +1 -1
  41. package/dist/lib/Components/LineChart/types.d.ts +12 -1
  42. package/dist/lib/Components/LineChart/types.d.ts.map +1 -1
  43. package/dist/lib/Components/Point/Point.d.ts.map +1 -1
  44. package/dist/lib/Components/Point/Point.js +29 -27
  45. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.d.ts.map +1 -1
  46. package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.js +4 -2
  47. package/dist/lib/utils/types.d.ts +7 -0
  48. package/dist/lib/utils/types.d.ts.map +1 -1
  49. package/dist/package.json +3 -3
  50. package/package.json +2 -2
  51. package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts +0 -3
  52. package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts.map +0 -1
  53. package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.js +0 -42
  54. package/dist/lib/Components/CartesianChart/RevealClip/context.d.ts +0 -7
  55. package/dist/lib/Components/CartesianChart/RevealClip/context.d.ts.map +0 -1
  56. package/dist/lib/Components/CartesianChart/RevealClip/context.js +0 -6
  57. package/dist/lib/Components/CartesianChart/RevealClip/index.d.ts +0 -3
  58. package/dist/lib/Components/CartesianChart/RevealClip/index.d.ts.map +0 -1
  59. package/dist/lib/Components/CartesianChart/RevealClip/types.d.ts +0 -37
  60. package/dist/lib/Components/CartesianChart/RevealClip/types.d.ts.map +0 -1
  61. package/dist/lib/Components/CartesianChart/hooks/useDataFingerprint.d.ts +0 -9
  62. package/dist/lib/Components/CartesianChart/hooks/useDataFingerprint.d.ts.map +0 -1
  63. package/dist/lib/Components/CartesianChart/hooks/useDataFingerprint.js +0 -8
  64. package/dist/lib/Components/CartesianChart/hooks/useRevealClipAnimation.d.ts +0 -14
  65. package/dist/lib/Components/CartesianChart/hooks/useRevealClipAnimation.d.ts.map +0 -1
  66. package/dist/lib/Components/CartesianChart/hooks/useRevealClipAnimation.js +0 -20
@@ -23,6 +23,12 @@ export type BaseAxisProps = {
23
23
  * @default false
24
24
  */
25
25
  showTickMark?: boolean;
26
+ /**
27
+ * Whether to render the tick labels along the axis.
28
+ * Set to `false` to keep ticks/grid while hiding their text labels.
29
+ * @default true
30
+ */
31
+ showLabels?: boolean;
26
32
  /**
27
33
  * Explicit tick positions along the axis.
28
34
  * When omitted, ticks are computed automatically from the scale.
@@ -1 +1 @@
1
- {"version":3,"file":"Axis.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Axis/Axis.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;IACpE;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
1
+ {"version":3,"file":"Axis.types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Axis/Axis.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;IACpE;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { XAxisProps } from './types';
2
- export declare function XAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: XAxisProps): import("react/jsx-runtime").JSX.Element | null;
2
+ export declare function XAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, showLabels, ticks: ticksProp, tickLabelFormatter, }: XAxisProps): import("react/jsx-runtime").JSX.Element | null;
3
3
  //# sourceMappingURL=XAxis.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/XAxis.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,aAAuB,EACvB,QAAmB,EACnB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAqFZ"}
1
+ {"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/XAxis/XAxis.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,aAAuB,EACvB,QAAmB,EACnB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,UAAiB,EACjB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAsFZ"}
@@ -1,27 +1,28 @@
1
- import { jsxs as A, jsx as a } from "react/jsx-runtime";
2
- import { useMemo as C } from "react";
3
- import { buildTicksData as $ } from "../../../utils/ticks/ticks.js";
4
- import { TICK_MARK_SIZE as y, TICK_LABEL_OFFSET as S } from "../Axis.constants.js";
5
- import { useCartesianChartContext as T } from "../../CartesianChart/context/cartesianChartContext.js";
1
+ import { jsxs as C, jsx as a } from "react/jsx-runtime";
2
+ import { useMemo as $ } from "react";
3
+ import { buildTicksData as S } from "../../../utils/ticks/ticks.js";
4
+ import { TICK_MARK_SIZE as y, TICK_LABEL_OFFSET as T } from "../Axis.constants.js";
5
+ import { useCartesianChartContext as D } from "../../CartesianChart/context/cartesianChartContext.js";
6
6
  import { cssVar as o } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
7
- function W({
8
- gridLineStyle: h = "solid",
7
+ function X({
8
+ gridLineStyle: u = "solid",
9
9
  position: l = "bottom",
10
- showGrid: u = !1,
10
+ showGrid: h = !1,
11
11
  showLine: c = !1,
12
12
  showTickMark: g = !1,
13
+ showLabels: v = !0,
13
14
  ticks: d,
14
15
  tickLabelFormatter: m
15
16
  }) {
16
- const { getXScale: v, getXAxisConfig: b, drawingArea: e } = T(), i = v(), x = b(), n = C(
17
- () => i ? $(i, x, d, m) : [],
17
+ const { getXScale: b, getXAxisConfig: k, drawingArea: e } = D(), i = b(), x = k(), n = $(
18
+ () => i ? S(i, x, d, m) : [],
18
19
  [i, x, d, m]
19
20
  );
20
21
  if (!i || e.width <= 0)
21
22
  return null;
22
- const f = l === "top", s = f ? e.y : e.y + e.height, p = f ? -1 : 1, k = s + p * (y + S);
23
- return /* @__PURE__ */ A("g", { "data-testid": "x-axis", children: [
24
- u && n.map((t, r) => /* @__PURE__ */ a(
23
+ const f = l === "top", s = f ? e.y : e.y + e.height, p = f ? -1 : 1, A = s + p * (y + T);
24
+ return /* @__PURE__ */ C("g", { "data-testid": "x-axis", children: [
25
+ h && n.map((t, r) => /* @__PURE__ */ a(
25
26
  "line",
26
27
  {
27
28
  x1: t.position,
@@ -32,7 +33,7 @@ function W({
32
33
  stroke: o("var(--border-muted-subtle-transparent)")
33
34
  },
34
35
  strokeWidth: o("var(--stroke-1)"),
35
- strokeDasharray: h === "dashed" ? "3 3" : void 0
36
+ strokeDasharray: u === "dashed" ? "3 3" : void 0
36
37
  },
37
38
  `grid-${t.value}-${r}`
38
39
  )),
@@ -61,11 +62,11 @@ function W({
61
62
  },
62
63
  `tick-${t.value}-${r}`
63
64
  )),
64
- n.map((t, r) => /* @__PURE__ */ a(
65
+ v && n.map((t, r) => /* @__PURE__ */ a(
65
66
  "text",
66
67
  {
67
68
  x: t.position,
68
- y: k,
69
+ y: A,
69
70
  textAnchor: "middle",
70
71
  dominantBaseline: l === "top" ? "auto" : "hanging",
71
72
  style: {
@@ -80,5 +81,5 @@ function W({
80
81
  ] });
81
82
  }
82
83
  export {
83
- W as XAxis
84
+ X as XAxis
84
85
  };
@@ -1,3 +1,3 @@
1
1
  import { YAxisProps } from './types';
2
- export declare function YAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, ticks: ticksProp, tickLabelFormatter, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
2
+ export declare function YAxis({ gridLineStyle, position, showGrid, showLine, showTickMark, showLabels, ticks: ticksProp, tickLabelFormatter, }: YAxisProps): import("react/jsx-runtime").JSX.Element | null;
3
3
  //# sourceMappingURL=YAxis.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/YAxis.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,aAAuB,EACvB,QAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAqFZ"}
1
+ {"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Axis/YAxis/YAxis.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,KAAK,CAAC,EACpB,aAAuB,EACvB,QAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,YAAoB,EACpB,UAAiB,EACjB,KAAK,EAAE,SAAS,EAChB,kBAAkB,GACnB,EAAE,UAAU,kDAsFZ"}
@@ -1,27 +1,28 @@
1
- import { jsxs as A, jsx as i } from "react/jsx-runtime";
2
- import { useMemo as C } from "react";
3
- import { buildTicksData as S } from "../../../utils/ticks/ticks.js";
4
- import { TICK_MARK_SIZE as p, TICK_LABEL_OFFSET as $ } from "../Axis.constants.js";
5
- import { useCartesianChartContext as D } from "../../CartesianChart/context/cartesianChartContext.js";
1
+ import { jsxs as C, jsx as i } from "react/jsx-runtime";
2
+ import { useMemo as S } from "react";
3
+ import { buildTicksData as $ } from "../../../utils/ticks/ticks.js";
4
+ import { TICK_MARK_SIZE as p, TICK_LABEL_OFFSET as D } from "../Axis.constants.js";
5
+ import { useCartesianChartContext as E } from "../../CartesianChart/context/cartesianChartContext.js";
6
6
  import { cssVar as r } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
7
- function W({
8
- gridLineStyle: c = "solid",
7
+ function Y({
8
+ gridLineStyle: u = "solid",
9
9
  position: l = "start",
10
- showGrid: h = !1,
11
- showLine: u = !1,
10
+ showGrid: c = !1,
11
+ showLine: h = !1,
12
12
  showTickMark: v = !1,
13
+ showLabels: g = !0,
13
14
  ticks: d,
14
15
  tickLabelFormatter: x
15
16
  }) {
16
- const { getYScale: g, getYAxisConfig: b, drawingArea: e } = D(), a = g(), m = b(), n = C(
17
- () => a ? S(a, m, d, x) : [],
17
+ const { getYScale: b, getYAxisConfig: k, drawingArea: e } = E(), a = b(), m = k(), n = S(
18
+ () => a ? $(a, m, d, x) : [],
18
19
  [a, m, d, x]
19
20
  );
20
21
  if (!a || e.height <= 0)
21
22
  return null;
22
- const y = l === "start", s = y ? e.x : e.x + e.width, f = y ? -1 : 1, k = s + f * (p + $);
23
- return /* @__PURE__ */ A("g", { "data-testid": "y-axis", children: [
24
- h && n.map((t, o) => /* @__PURE__ */ i(
23
+ const y = l === "start", s = y ? e.x : e.x + e.width, f = y ? -1 : 1, A = s + f * (p + D);
24
+ return /* @__PURE__ */ C("g", { "data-testid": "y-axis", children: [
25
+ c && n.map((t, o) => /* @__PURE__ */ i(
25
26
  "line",
26
27
  {
27
28
  x1: e.x,
@@ -32,11 +33,11 @@ function W({
32
33
  stroke: r("var(--border-muted-subtle-transparent)")
33
34
  },
34
35
  strokeWidth: r("var(--stroke-1)"),
35
- strokeDasharray: c === "dashed" ? "3 3" : void 0
36
+ strokeDasharray: u === "dashed" ? "3 3" : void 0
36
37
  },
37
38
  `grid-${t.value}-${o}`
38
39
  )),
39
- u && /* @__PURE__ */ i(
40
+ h && /* @__PURE__ */ i(
40
41
  "line",
41
42
  {
42
43
  x1: s,
@@ -61,10 +62,10 @@ function W({
61
62
  },
62
63
  `tick-${t.value}-${o}`
63
64
  )),
64
- n.map((t, o) => /* @__PURE__ */ i(
65
+ g && n.map((t, o) => /* @__PURE__ */ i(
65
66
  "text",
66
67
  {
67
- x: k,
68
+ x: A,
68
69
  y: t.position,
69
70
  textAnchor: l === "start" ? "end" : "start",
70
71
  dominantBaseline: "central",
@@ -80,5 +81,5 @@ function W({
80
81
  ] });
81
82
  }
82
83
  export {
83
- W as YAxis
84
+ Y as YAxis
84
85
  };
@@ -1 +1 @@
1
- {"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AASnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,eAAuB,EACvB,wBAAwB,EACxB,OAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,mBAAmB,2CA4GrB"}
1
+ {"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,QAAgB,EAChB,OAAO,EAAE,WAAW,EACpB,eAAuB,EACvB,wBAAwB,EACxB,OAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,mBAAmB,2CAuGrB"}
@@ -1,106 +1,106 @@
1
- import { jsx as t, jsxs as H, Fragment as L } from "react/jsx-runtime";
2
- import { useRef as b, useState as T, useCallback as V, useEffect as _, useMemo as R } from "react";
3
- import { ScrubberProvider as j } from "../Scrubber/ScrubberProvider.js";
4
- import { resolveInset as k, resolveAxisPadding as B, DEFAULT_HEIGHT as D, OVERFLOW_OFFSET as U, OVERFLOW_BUFFER as s } from "./utils.js";
5
- import { useBuildChartContext as G } from "./context/useBuildChartContext.js";
6
- import { CartesianChartProvider as S } from "./context/cartesianChartContext.js";
7
- import { MagneticPointsProvider as q } from "../Point/pointContext/MagneticPointsProvider.js";
8
- import { RevealClipDefs as J } from "./RevealClip/RevealClipDefs.js";
9
- function te({
1
+ import { jsx as r, jsxs as j, Fragment as k } from "react/jsx-runtime";
2
+ import { useRef as h, useState as F, useCallback as H, useEffect as O, useMemo as b } from "react";
3
+ import { ScrubberProvider as T } from "../Scrubber/ScrubberProvider.js";
4
+ import { resolveInset as B, resolveAxisPadding as D, DEFAULT_HEIGHT as G } from "./utils.js";
5
+ import { useBuildChartContext as L } from "./context/useBuildChartContext.js";
6
+ import { CartesianChartProvider as U } from "./context/cartesianChartContext.js";
7
+ import { MagneticPointsProvider as V } from "../Point/pointContext/MagneticPointsProvider.js";
8
+ import { RevealAnimationProvider as _ } from "./RevealAnimation/RevealAnimationProvider.js";
9
+ function Z({
10
10
  series: d,
11
11
  xAxis: y,
12
12
  yAxis: C,
13
13
  width: e = "100%",
14
- height: l = D,
15
- inset: c,
16
- axisPadding: v,
14
+ height: n = G,
15
+ inset: l,
16
+ axisPadding: c,
17
17
  ariaLabel: x = "Chart",
18
- ariaBusy: F = !1,
19
- overlay: E,
20
- enableScrubbing: n = !1,
21
- onScrubberPositionChange: O,
22
- animate: P = !0,
23
- magnetRadius: W,
24
- children: A
18
+ ariaBusy: R = !1,
19
+ overlay: g,
20
+ enableScrubbing: s = !1,
21
+ onScrubberPositionChange: P,
22
+ animate: A = !0,
23
+ magnetRadius: w,
24
+ children: I
25
25
  }) {
26
- const a = b(null), f = b(null), [w, I] = T(
26
+ const a = h(null), v = h(null), [M, W] = F(
27
27
  typeof e == "number" ? e : void 0
28
- ), r = typeof e != "number", u = V((i) => {
29
- const [g] = i;
30
- g && I(g.contentRect.width);
28
+ ), t = typeof e != "number", f = H((i) => {
29
+ const [p] = i;
30
+ p && W(p.contentRect.width);
31
31
  }, []);
32
- _(() => {
33
- if (!r || !a.current || typeof ResizeObserver > "u")
32
+ O(() => {
33
+ if (!t || !a.current || typeof ResizeObserver > "u")
34
34
  return;
35
- const i = new ResizeObserver(u);
35
+ const i = new ResizeObserver(f);
36
36
  return i.observe(a.current), () => i.disconnect();
37
- }, [r, u]);
38
- const o = typeof e == "number" ? e : w ?? 0, m = o > 0 ? o + s.left + s.right : 0, h = l + s.top + s.bottom, M = R(() => k(c), [c]), z = R(
39
- () => B(v),
40
- [v]
41
- ), p = G({
37
+ }, [t, f]);
38
+ const o = typeof e == "number" ? e : M ?? 0, u = o > 0 ? o : 0, z = b(() => B(l), [l]), E = b(
39
+ () => D(c),
40
+ [c]
41
+ ), m = L({
42
42
  series: d,
43
43
  xAxis: y,
44
44
  yAxis: C,
45
- width: m,
46
- height: h,
47
- inset: M,
48
- axisPadding: z
45
+ width: u,
46
+ height: n,
47
+ inset: z,
48
+ axisPadding: E
49
49
  });
50
- return /* @__PURE__ */ t(
50
+ return /* @__PURE__ */ r(
51
51
  "div",
52
52
  {
53
- ref: r ? a : void 0,
53
+ ref: t ? a : void 0,
54
54
  "data-testid": "chart-container",
55
55
  style: {
56
- width: r ? e : o,
57
- height: l,
56
+ width: t ? e : o,
57
+ height: n,
58
58
  overflow: "visible",
59
59
  position: "relative"
60
60
  },
61
- children: o > 0 && /* @__PURE__ */ H(L, { children: [
62
- /* @__PURE__ */ t(
61
+ children: o > 0 && /* @__PURE__ */ j(k, { children: [
62
+ /* @__PURE__ */ r(
63
63
  "svg",
64
64
  {
65
- ref: f,
65
+ ref: v,
66
66
  "data-testid": "chart-svg",
67
- width: m,
68
- height: h,
67
+ width: u,
68
+ height: n,
69
69
  role: "img",
70
70
  "aria-label": x || "Chart",
71
- "aria-busy": F || void 0,
72
- tabIndex: n ? 0 : void 0,
71
+ "aria-busy": R || void 0,
72
+ tabIndex: s ? 0 : void 0,
73
73
  style: {
74
74
  display: "block",
75
75
  overflow: "visible",
76
- outline: n ? "none" : void 0,
77
- ...U
76
+ position: "relative",
77
+ outline: s ? "none" : void 0
78
78
  },
79
- children: /* @__PURE__ */ t(S, { value: p, children: /* @__PURE__ */ t(q, { children: /* @__PURE__ */ t(
80
- j,
79
+ children: /* @__PURE__ */ r(U, { value: m, children: /* @__PURE__ */ r(V, { children: /* @__PURE__ */ r(
80
+ T,
81
81
  {
82
- svgRef: f,
83
- enableScrubbing: n,
84
- onScrubberPositionChange: O,
85
- magnetRadius: W,
86
- children: /* @__PURE__ */ t(
87
- J,
82
+ svgRef: v,
83
+ enableScrubbing: s,
84
+ onScrubberPositionChange: P,
85
+ magnetRadius: w,
86
+ children: /* @__PURE__ */ r(
87
+ _,
88
88
  {
89
- drawingArea: p.drawingArea,
89
+ drawingArea: m.drawingArea,
90
90
  series: d,
91
- animate: P,
92
- children: A
91
+ animate: A,
92
+ children: I
93
93
  }
94
94
  )
95
95
  }
96
96
  ) }) })
97
97
  }
98
98
  ),
99
- E
99
+ g
100
100
  ] })
101
101
  }
102
102
  );
103
103
  }
104
104
  export {
105
- te as CartesianChart
105
+ Z as CartesianChart
106
106
  };
@@ -0,0 +1,3 @@
1
+ import { RevealAnimationProps } from './types';
2
+ export declare function RevealAnimationProvider({ children, drawingArea, series, animate, transitions, }: RevealAnimationProps): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=RevealAnimationProvider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"RevealAnimationProvider.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAMpD,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,WAAW,EACX,MAAM,EACN,OAAc,EACd,WAAW,GACZ,EAAE,oBAAoB,2CA0CtB"}
@@ -0,0 +1,41 @@
1
+ import { jsx as e, Fragment as f, jsxs as y } from "react/jsx-runtime";
2
+ import { useMemo as v } from "react";
3
+ import { RevealAnimationContext as x } from "./context.js";
4
+ import { useDataFingerprint as P, useRevealAnimation as A } from "./utils.js";
5
+ const D = 0.8, R = "linear";
6
+ function I({
7
+ children: n,
8
+ drawingArea: t,
9
+ series: l,
10
+ animate: s = !0,
11
+ transitions: o
12
+ }) {
13
+ const c = !s, m = o?.enter?.duration ?? D, h = o?.enter?.easing ?? R, d = P({ series: l }), { clipId: p, clipPathAttr: r, clipPathAnimation: a, fadeAnimation: i } = A({
14
+ duration: m,
15
+ easing: h,
16
+ drawingArea: t
17
+ }), u = v(
18
+ () => ({
19
+ clipPathAttr: r,
20
+ getPointRevealStyle: i.getPointRevealStyle
21
+ }),
22
+ [r, i]
23
+ );
24
+ return c ? /* @__PURE__ */ e(f, { children: n }) : /* @__PURE__ */ y(x.Provider, { value: u, children: [
25
+ /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: p, children: /* @__PURE__ */ e(
26
+ "rect",
27
+ {
28
+ x: t.x,
29
+ y: t.y,
30
+ height: t.height,
31
+ width: t.width,
32
+ style: { animation: a.style }
33
+ }
34
+ ) }) }),
35
+ /* @__PURE__ */ e("style", { children: `${a.keyframe} ${i.keyframe}` }),
36
+ n
37
+ ] }, d);
38
+ }
39
+ export {
40
+ I as RevealAnimationProvider
41
+ };
@@ -0,0 +1,15 @@
1
+ import { CSSProperties } from 'react';
2
+ import { RevealAnimationContextValue } from './types';
3
+ export declare const RevealAnimationContext: import('react').Context<RevealAnimationContextValue | undefined>;
4
+ /**
5
+ * Clip-path attribute for path-based consumers (e.g. `Line`).
6
+ * Returns `undefined` when the reveal animation is disabled.
7
+ */
8
+ export declare const usePathReveal: () => string | undefined;
9
+ /**
10
+ * Opacity fade-in style for accessory consumers (e.g. `Point`). Returns
11
+ * `undefined` when the reveal animation is disabled, leaving the consumer fully
12
+ * visible.
13
+ */
14
+ export declare const usePointReveal: () => CSSProperties | undefined;
15
+ //# sourceMappingURL=context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealAnimation/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,sBAAsB,kEAEvB,CAAC;AAEb;;;GAGG;AACH,eAAO,MAAM,aAAa,QAAO,MAAM,GAAG,SAEzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAAO,aAAa,GAAG,SAGjD,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { useContext as e, createContext as n, useMemo as r } from "react";
2
+ const o = n(void 0), s = () => e(o)?.clipPathAttr, c = () => {
3
+ const t = e(o);
4
+ return r(() => t?.getPointRevealStyle(), [t]);
5
+ };
6
+ export {
7
+ o as RevealAnimationContext,
8
+ s as usePathReveal,
9
+ c as usePointReveal
10
+ };
@@ -0,0 +1,3 @@
1
+ export { RevealAnimationProvider } from './RevealAnimationProvider';
2
+ export { usePathReveal, usePointReveal } from './context';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealAnimation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
@@ -0,0 +1,57 @@
1
+ import { CSSProperties, ReactNode } from 'react';
2
+ import { DrawingArea, Series } from '../../../utils';
3
+ /**
4
+ * Value shared by the reveal animation provider.
5
+ *
6
+ * - `clipPathAttr` drives the left-to-right clip wipe consumed by path-based
7
+ * components (e.g. `Line`).
8
+ * - `getPointRevealStyle` returns the opacity fade-in style for accessory
9
+ * components (e.g. `Point`) that must not be clipped, so edge content stays
10
+ * visible.
11
+ */
12
+ export type RevealAnimationContextValue = {
13
+ /**
14
+ * `clip-path` attribute (`url(#id)`) used by the line/area wipe.
15
+ */
16
+ clipPathAttr: string;
17
+ /**
18
+ * Builds the opacity fade-in style for an accessory (e.g. `Point`) so it
19
+ * reveals without being clipped, keeping edge content visible.
20
+ */
21
+ getPointRevealStyle: () => CSSProperties;
22
+ };
23
+ export type EnterTransitionConfig = {
24
+ /**
25
+ * Duration in seconds. @default 0.8
26
+ */
27
+ duration?: number;
28
+ /**
29
+ * CSS easing function. @default 'linear'
30
+ */
31
+ easing?: string;
32
+ };
33
+ export type RevealAnimationProps = {
34
+ children: ReactNode;
35
+ /**
36
+ * The drawing area whose bounds define the clip rectangle.
37
+ */
38
+ drawingArea: DrawingArea;
39
+ /**
40
+ * Whether to animate the chart.
41
+ * @default true
42
+ */
43
+ animate?: boolean;
44
+ /**
45
+ * Transition configuration.
46
+ * @default { enter: { duration: 0.8, easing: 'linear' } }
47
+ */
48
+ transitions?: {
49
+ enter?: EnterTransitionConfig;
50
+ };
51
+ /**
52
+ * Data series used to compute a fingerprint that restarts
53
+ * the animation when data changes.
54
+ */
55
+ series: Series[];
56
+ };
57
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealAnimation/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE1D;;;;;;;;GAQG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,mBAAmB,EAAE,MAAM,aAAa,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;KAAE,CAAC;IAChD;;;OAGG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC"}
@@ -0,0 +1,31 @@
1
+ import { CSSProperties } from 'react';
2
+ import { DrawingArea, Series } from '../../../utils/types';
3
+ type RevealAnimationConfig = {
4
+ duration: number;
5
+ easing: string;
6
+ drawingArea: DrawingArea;
7
+ };
8
+ /**
9
+ * Creates the reveal animation for the chart.
10
+ * It returns
11
+ * - the clip id
12
+ * - the clip path animation
13
+ * - and the fade animation.
14
+ */
15
+ export declare const useRevealAnimation: ({ duration, easing, drawingArea, }: RevealAnimationConfig) => {
16
+ clipId: string;
17
+ clipPathAttr: string;
18
+ clipPathAnimation: {
19
+ keyframe: string;
20
+ style: string;
21
+ };
22
+ fadeAnimation: {
23
+ keyframe: string;
24
+ getPointRevealStyle: () => CSSProperties;
25
+ };
26
+ };
27
+ export declare const useDataFingerprint: ({ series, }: {
28
+ series: Series[];
29
+ }) => string;
30
+ export {};
31
+ //# sourceMappingURL=utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealAnimation/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAQhE,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,oCAIhC,qBAAqB;;;;;;;;;mCA2CO,aAAa;;CAnB3C,CAAC;AA2DF,eAAO,MAAM,kBAAkB,GAAI,aAEhC;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,KAAG,MAEH,CAAC"}
@@ -0,0 +1,67 @@
1
+ import { useId as l, useMemo as r } from "react";
2
+ const m = 0.2, s = -0.1, $ = ({
3
+ duration: a,
4
+ easing: t,
5
+ drawingArea: o
6
+ }) => {
7
+ const e = l(), n = c({
8
+ clipId: e,
9
+ duration: a,
10
+ easing: t
11
+ }), i = p({
12
+ clipId: e,
13
+ duration: a,
14
+ easing: t,
15
+ drawingArea: o
16
+ });
17
+ return r(
18
+ () => ({
19
+ clipId: e,
20
+ clipPathAttr: `url(#${e})`,
21
+ clipPathAnimation: i,
22
+ fadeAnimation: n
23
+ }),
24
+ [e, i, n]
25
+ );
26
+ }, c = ({
27
+ clipId: a,
28
+ duration: t,
29
+ easing: o
30
+ }) => {
31
+ const e = `reveal-fade-${a.replaceAll(":", "")}`;
32
+ return r(
33
+ () => ({
34
+ keyframe: `@keyframes ${e} { from { opacity: 0; } to { opacity: 1; } }`,
35
+ getPointRevealStyle: () => {
36
+ const n = Math.max(
37
+ 0,
38
+ t + s
39
+ );
40
+ return {
41
+ animation: `${e} ${m}s ${o} ${n}s both`
42
+ };
43
+ }
44
+ }),
45
+ [t, o, e]
46
+ );
47
+ }, p = ({
48
+ clipId: a,
49
+ duration: t,
50
+ easing: o,
51
+ drawingArea: e
52
+ }) => {
53
+ const n = `reveal-clip-${a.replaceAll(":", "")}`, i = e.width;
54
+ return r(
55
+ () => ({
56
+ keyframe: `@keyframes ${n} { from { width: 0; } to { width: ${i}px; } }`,
57
+ style: `${n} ${t}s ${o} forwards`
58
+ }),
59
+ [n, t, o, i]
60
+ );
61
+ }, f = ({
62
+ series: a
63
+ }) => a.map((t) => t.data?.join(",") ?? "").join("|");
64
+ export {
65
+ f as useDataFingerprint,
66
+ $ as useRevealAnimation
67
+ };