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

package/dist/index.js

@@ -1,13 +1,17 @@
-import { ChartTooltip as t } from "./lib/Components/ChartTooltip/ChartTooltip.js";
-import { LineChart as p } from "./lib/Components/LineChart/LineChart.js";
-import { Point as b, PointLabel as f } from "./lib/Components/Point/Point.js";
+import { LineChart as o } from "./lib/Components/LineChart/LineChart.js";
+import { Point as f, PointLabel as p } from "./lib/Components/Point/Point.js";
+import { ReferenceLine as x } from "./lib/Components/ReferenceLine/ReferenceLine.js";
 import { Scrubber as i } from "./lib/Components/Scrubber/Scrubber.js";
-import { useScrubberContext as a } from "./lib/Components/Scrubber/context/scrubberContext.js";
+import { useScrubberContext as u } from "./lib/Components/Scrubber/context/scrubberContext.js";
+import { ChartTooltipItem as c } from "./lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.js";
+import { DefaultScrubberTooltip as C } from "./lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.js";
 export {
-  t as ChartTooltip,
-  p as LineChart,
-  b as Point,
-  f as PointLabel,
+  c as ChartTooltipItem,
+  C as DefaultScrubberTooltip,
+  o as LineChart,
+  f as Point,
+  p as PointLabel,
+  x as ReferenceLine,
   i as Scrubber,
-  a as useScrubberContext
+  u as useScrubberContext
 };

package/dist/lib/Components/CartesianChart/CartesianChart.d.ts

@@ -1,3 +1,3 @@
 import { CartesianChartProps } from './types';
-export declare function CartesianChart({ series, xAxis, yAxis, width, height, inset, axisPadding, ariaLabel, enableScrubbing, onScrubberPositionChange, children, }: CartesianChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function CartesianChart({ series, xAxis, yAxis, width, height, inset, axisPadding, ariaLabel, enableScrubbing, onScrubberPositionChange, animate, children, }: CartesianChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CartesianChart.d.ts.map

package/dist/lib/Components/CartesianChart/CartesianChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,eAAuB,EACvB,wBAAwB,EACxB,QAAQ,GACT,EAAE,mBAAmB,2CA4GrB"}
+{"version":3,"file":"CartesianChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/CartesianChart.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQnD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAuB,EACvB,KAAK,EACL,WAAW,EACX,SAAmB,EACnB,eAAuB,EACvB,wBAAwB,EACxB,OAAc,EACd,QAAQ,GACT,EAAE,mBAAmB,2CA6FrB"}

package/dist/lib/Components/CartesianChart/CartesianChart.js

@@ -1,96 +1,95 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useRef as C, useState as W, useCallback as z, useEffect as G, useMemo as y } from "react";
-import { ScrubberProvider as T } from "../Scrubber/ScrubberProvider.js";
-import { resolveInset as V, resolveAxisPadding as _, OVERFLOW_NEGATIVE_MARGIN as R, DEFAULT_HEIGHT as k } from "./utils.js";
-import { useBuildChartContext as F } from "./context/useBuildChartContext.js";
-import { CartesianChartProvider as H } from "./context/cartesianChartContext.js";
-function D({
-  series: h,
-  xAxis: x,
-  yAxis: E,
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as p, useState as O, useCallback as P, useEffect as W, useMemo as h } from "react";
+import { ScrubberProvider as w } from "../Scrubber/ScrubberProvider.js";
+import { resolveInset as z, resolveAxisPadding as G, OVERFLOW_NEGATIVE_MARGIN as T, DEFAULT_HEIGHT as V } from "./utils.js";
+import { useBuildChartContext as _ } from "./context/useBuildChartContext.js";
+import { CartesianChartProvider as k } from "./context/cartesianChartContext.js";
+import { RevealClipDefs as D } from "./RevealClip/RevealClipDefs.js";
+function q({
+  series: d,
+  xAxis: C,
+  yAxis: R,
   width: e = "100%",
-  height: r = k,
-  inset: a,
+  height: s = V,
+  inset: l,
   axisPadding: c,
-  ariaLabel: I = "Chart",
-  enableScrubbing: o = !1,
-  onScrubberPositionChange: b,
-  children: l
+  ariaLabel: b = "Chart",
+  enableScrubbing: i = !1,
+  onScrubberPositionChange: y,
+  animate: x = !0,
+  children: A
 }) {
-  const n = C(null), f = C(null), [u, A] = W(
+  const a = p(null), f = p(null), [E, I] = O(
     typeof e == "number" ? e : void 0
-  ), i = typeof e != "number", v = z((s) => {
-    const [p] = s;
-    p && A(p.contentRect.width);
+  ), t = typeof e != "number", u = P((n) => {
+    const [m] = n;
+    m && I(m.contentRect.width);
   }, []);
-  G(() => {
-    if (!i || !n.current || typeof ResizeObserver > "u")
+  W(() => {
+    if (!t || !a.current || typeof ResizeObserver > "u")
       return;
-    const s = new ResizeObserver(v);
-    return s.observe(n.current), () => s.disconnect();
-  }, [i, v]);
-  const d = typeof e == "number" ? e : u ?? 0, M = y(() => V(a), [a]), O = y(
-    () => _(c),
+    const n = new ResizeObserver(u);
+    return n.observe(a.current), () => n.disconnect();
+  }, [t, u]);
+  const o = typeof e == "number" ? e : E ?? 0, g = h(() => z(l), [l]), M = h(
+    () => G(c),
     [c]
-  ), P = F({
-    series: h,
-    xAxis: x,
-    yAxis: E,
-    width: d,
-    height: r,
-    inset: M,
-    axisPadding: O
-  }), m = /* @__PURE__ */ t(
-    "svg",
-    {
-      ref: f,
-      "data-testid": "chart-svg",
-      width: d,
-      height: r,
-      role: "img",
-      "aria-label": I || "Chart",
-      tabIndex: o ? 0 : void 0,
-      style: {
-        display: "block",
-        overflow: "visible",
-        outline: o ? "none" : void 0
-      },
-      children: /* @__PURE__ */ t(H, { value: P, children: o ? /* @__PURE__ */ t(
-        T,
-        {
-          svgRef: f,
-          enableScrubbing: o,
-          onScrubberPositionChange: b,
-          children: l
-        }
-      ) : l })
-    }
-  );
-  return i ? /* @__PURE__ */ t(
+  ), v = _({
+    series: d,
+    xAxis: C,
+    yAxis: R,
+    width: o,
+    height: s,
+    inset: g,
+    axisPadding: M
+  });
+  return /* @__PURE__ */ r(
     "div",
     {
-      ref: n,
+      ref: t ? a : void 0,
       "data-testid": "chart-container",
       style: {
-        width: e,
-        height: r,
-        ...R
+        width: t ? e : o,
+        height: s,
+        ...T
       },
-      children: u !== void 0 && m
-    }
-  ) : /* @__PURE__ */ t(
-    "div",
-    {
-      "data-testid": "chart-container",
-      style: {
-        width: d,
-        height: r,
-        ...R
-      },
-      children: m
+      children: o > 0 && /* @__PURE__ */ r(
+        "svg",
+        {
+          ref: f,
+          "data-testid": "chart-svg",
+          width: o,
+          height: s,
+          role: "img",
+          "aria-label": b || "Chart",
+          tabIndex: i ? 0 : void 0,
+          style: {
+            display: "block",
+            overflow: "visible",
+            outline: i ? "none" : void 0
+          },
+          children: /* @__PURE__ */ r(k, { value: v, children: /* @__PURE__ */ r(
+            w,
+            {
+              svgRef: f,
+              enableScrubbing: i,
+              onScrubberPositionChange: y,
+              children: /* @__PURE__ */ r(
+                D,
+                {
+                  drawingArea: v.drawingArea,
+                  series: d,
+                  animate: x,
+                  children: A
+                }
+              )
+            }
+          ) })
+        }
+      )
     }
   );
 }
 export {
-  D as CartesianChart
+  q as CartesianChart
 };

package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts

@@ -0,0 +1,3 @@
+import { RevealClipDefsProps } from './types';
+export declare function RevealClipDefs({ children, drawingArea, series, animate, transitions, }: RevealClipDefsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RevealClipDefs.d.ts.map

package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealClipDefs.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealClip/RevealClipDefs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAMnD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,MAAM,EACN,OAAc,EACd,WAAW,GACZ,EAAE,mBAAmB,2CA4CrB"}

package/dist/lib/Components/CartesianChart/RevealClip/RevealClipDefs.js

@@ -0,0 +1,41 @@
+import { jsx as i, Fragment as d, jsxs as F } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { OVERFLOW_BUFFER as t } from "../utils.js";
+import { RevealClipContext as D } from "./context.js";
+import { useComputeDataFingerprint as y, useRevealClipAnimation as C } from "./utils.js";
+const E = 0.8, R = "linear";
+function O({
+  children: n,
+  drawingArea: e,
+  series: l,
+  animate: s = !0,
+  transitions: r
+}) {
+  const m = !s, c = r?.enter?.duration ?? E, p = r?.enter?.easing ?? R, a = y({ series: l }), { clipId: o, animationStyle: u, keyframe: f } = C({
+    duration: c,
+    easing: p,
+    drawingArea: e
+  }), h = x(
+    () => ({
+      clipPathAttr: `url(#${o})`
+    }),
+    [o]
+  );
+  return m ? /* @__PURE__ */ i(d, { children: n }) : /* @__PURE__ */ F(D.Provider, { value: h, children: [
+    /* @__PURE__ */ i("defs", { children: /* @__PURE__ */ i("clipPath", { id: o, children: /* @__PURE__ */ i(
+      "rect",
+      {
+        x: e.x - t.left,
+        y: e.y - t.top,
+        height: e.height + t.top + t.bottom,
+        width: e.width + t.left + t.right,
+        style: { animation: u }
+      }
+    ) }) }),
+    /* @__PURE__ */ i("style", { children: f }),
+    n
+  ] }, a);
+}
+export {
+  O as RevealClipDefs
+};

package/dist/lib/Components/CartesianChart/RevealClip/context.d.ts

@@ -0,0 +1,7 @@
+type RevealClipContextValue = {
+    clipPathAttr: string;
+};
+export declare const RevealClipContext: import('react').Context<RevealClipContextValue | undefined>;
+export declare const useRevealClip: () => string | undefined;
+export {};
+//# sourceMappingURL=context.d.ts.map

package/dist/lib/Components/CartesianChart/RevealClip/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealClip/context.ts"],"names":[],"mappings":"AAEA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6DAElB,CAAC;AAEb,eAAO,MAAM,aAAa,QAAO,MAAM,GAAG,SAEzC,CAAC"}

package/dist/lib/Components/CartesianChart/RevealClip/context.js

@@ -0,0 +1,6 @@
+import { useContext as t, createContext as e } from "react";
+const o = e(void 0), n = () => t(o)?.clipPathAttr;
+export {
+  o as RevealClipContext,
+  n as useRevealClip
+};

package/dist/lib/Components/CartesianChart/RevealClip/index.d.ts

@@ -0,0 +1,3 @@
+export { RevealClipDefs } from './RevealClipDefs';
+export { useRevealClip } from './context';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/CartesianChart/RevealClip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealClip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}

package/dist/lib/Components/CartesianChart/RevealClip/types.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { DrawingArea, Series } from '../../../utils';
+export type EnterTransitionConfig = {
+    /**
+     * Duration in seconds. @default 0.8
+     */
+    duration?: number;
+    /**
+     * CSS easing function. @default 'linear'
+     */
+    easing?: string;
+};
+export type RevealClipDefsProps = {
+    children: ReactNode;
+    /**
+     * The drawing area whose bounds define the clip rectangle.
+     */
+    drawingArea: DrawingArea;
+    /**
+     * Whether to animate the chart.
+     * @default true
+     */
+    animate?: boolean;
+    /**
+     * Transition configuration.
+     * @default { enter: { duration: 0.8, easing: 'linear' } }
+     */
+    transitions?: {
+        enter?: EnterTransitionConfig;
+    };
+    /**
+     * Data series used to compute a fingerprint that restarts
+     * the animation when data changes.
+     */
+    series: Series[];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/CartesianChart/RevealClip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealClip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE1D,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,mBAAmB,GAAG;IAChC,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"}

package/dist/lib/Components/CartesianChart/RevealClip/utils.d.ts

@@ -0,0 +1,17 @@
+import { DrawingArea, Series } from '../../../utils/types';
+type RevealClipAnimationConfig = {
+    duration: number;
+    easing: string;
+    drawingArea: DrawingArea;
+};
+type RevealClipAnimationResult = {
+    clipId: string;
+    animationStyle: string;
+    keyframe: string;
+};
+export declare const useRevealClipAnimation: ({ duration, easing, drawingArea, }: RevealClipAnimationConfig) => RevealClipAnimationResult;
+export declare const useComputeDataFingerprint: ({ series, }: {
+    series: Series[];
+}) => string;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/Components/CartesianChart/RevealClip/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/CartesianChart/RevealClip/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGhE,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;CAC1B,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,oCAIpC,yBAAyB,KAAG,yBAY9B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,aAEvC;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,KAAG,MAEH,CAAC"}

package/dist/lib/Components/CartesianChart/RevealClip/utils.js

@@ -0,0 +1,23 @@
+import { useId as a, useMemo as n } from "react";
+import { OVERFLOW_BUFFER as m } from "../utils.js";
+const s = ({
+  duration: t,
+  easing: e,
+  drawingArea: r
+}) => {
+  const o = a(), i = `reveal-clip-${o.replaceAll(":", "")}`;
+  return n(
+    () => ({
+      clipId: o,
+      animationStyle: `${i} ${t}s ${e} forwards`,
+      keyframe: `@keyframes ${i} { from { width: 0; } to { width: ${r.width + m.left + m.right}px; } }`
+    }),
+    [o, i, t, e, r.width]
+  );
+}, c = ({
+  series: t
+}) => t.map((e) => e.data?.join(",") ?? "").join("|");
+export {
+  c as useComputeDataFingerprint,
+  s as useRevealClipAnimation
+};

package/dist/lib/Components/CartesianChart/types.d.ts

@@ -57,5 +57,11 @@ export type CartesianChartProps = {
      * Receives `undefined` when the scrubber leaves the chart.
      */
     onScrubberPositionChange?: (index: number | undefined) => void;
+    /**
+     * Whether to animate the chart on mount and data changes.
+     * Duration is 0.8 seconds and easing is linear.
+     * @default true
+     */
+    animate?: boolean;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/CartesianChart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE7E,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/CartesianChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE7E,MAAM,MAAM,mBAAmB,GAAG;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/dist/lib/Components/CartesianChart/utils.js

@@ -1,13 +1,13 @@
 const m = 160, r = {
-  top: 30,
-  right: 20,
-  bottom: 30,
-  left: 20
+  top: 50,
+  right: 50,
+  bottom: 50,
+  left: 50
 }, f = {
-  marginTop: -30,
-  marginRight: -20,
-  marginBottom: -30,
-  marginLeft: -20
+  marginTop: -50,
+  marginRight: -50,
+  marginBottom: -50,
+  marginLeft: -50
 }, e = {
   top: 0,
   right: 0,

package/dist/lib/Components/Line/Line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,GACjC,EAAE,SAAS,kDA6EX"}
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Line/Line.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,QAAQ,EAAE,SAAsB,GACjC,EAAE,SAAS,kDA8EX"}

package/dist/lib/Components/Line/Line.js

@@ -1,28 +1,29 @@
-import { jsxs as l, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e, Fragment as P } from "react/jsx-runtime";
 import { useId as S, useMemo as d } from "react";
 import { isNumericScale as A } from "../../utils/scales/scales.js";
-import { toScaledPoints as P, buildLinePath as I, buildAreaPath as L } from "./utils.js";
-import { useCartesianChartContext as T } from "../CartesianChart/context/cartesianChartContext.js";
-import { cssVar as j } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
-const O = 0.15;
-function N({
-  seriesId: g,
-  stroke: h,
-  showArea: n = !1,
+import { toScaledPoints as I, buildLinePath as L, buildAreaPath as T } from "./utils.js";
+import { useCartesianChartContext as j } from "../CartesianChart/context/cartesianChartContext.js";
+import { useRevealClip as v } from "../CartesianChart/RevealClip/context.js";
+import { cssVar as O } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+const R = 0.15;
+function Y({
+  seriesId: u,
+  stroke: g,
+  showArea: i = !1,
   areaType: _ = "gradient"
 }) {
-  const { getXScale: x, getYScale: k, getXAxisConfig: C, drawingArea: i, seriesMap: y } = T(), s = x(), o = k(), c = C(), p = S(), r = y.get(g), a = h ?? r?.stroke, t = d(
-    () => r?.data && s && o && A(o) ? P(r.data, s, o, c?.data) : null,
+  const { getXScale: h, getYScale: x, getXAxisConfig: C, drawingArea: n, seriesMap: k } = j(), y = v(), s = h(), o = x(), c = C(), p = S(), r = k.get(u), a = g ?? r?.stroke, t = d(
+    () => r?.data && s && o && A(o) ? I(r.data, s, o, c?.data) : null,
     [r, s, o, c]
   ), f = d(
-    () => t ? I(t) : null,
+    () => t ? L(t) : null,
     [t]
-  ), u = d(
-    () => n && t && i ? L(t, i) : null,
-    [n, t, i]
+  ), m = d(
+    () => i && t && n ? T(t, n) : null,
+    [i, t, n]
   );
-  return f ? /* @__PURE__ */ l(m, { children: [
-    n && u && a && /* @__PURE__ */ l(m, { children: [
+  return f ? /* @__PURE__ */ l("g", { clipPath: y, children: [
+    i && m && a && /* @__PURE__ */ l(P, { children: [
       /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ l(
         "linearGradient",
         {
@@ -38,7 +39,7 @@ function N({
               {
                 offset: "0%",
                 stopColor: a,
-                stopOpacity: O
+                stopOpacity: R
               }
             ),
             /* @__PURE__ */ e("stop", { offset: "100%", stopColor: a, stopOpacity: 0 })
@@ -49,7 +50,7 @@ function N({
         "path",
         {
           "data-testid": "line-area",
-          d: u,
+          d: m,
           fill: `url(#${p})`,
           stroke: "none"
         }
@@ -62,7 +63,7 @@ function N({
         d: f,
         fill: "none",
         stroke: a,
-        strokeWidth: j("var(--stroke-2)"),
+        strokeWidth: O("var(--stroke-2)"),
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
@@ -70,5 +71,5 @@ function N({
   ] }) : null;
 }
 export {
-  N as Line
+  Y as Line
 };

package/dist/lib/Components/LineChart/LineChart.d.ts

@@ -1,3 +1,3 @@
 import { LineChartProps } from './types';
-export declare function LineChart({ series, showArea, areaType, showXAxis, showYAxis, xAxis, yAxis, width, height, inset, enableScrubbing, onScrubberPositionChange, children, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineChart({ series, showArea, areaType, showXAxis, showYAxis, xAxis, yAxis, width, height, inset, enableScrubbing, onScrubberPositionChange, animate, children, }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/lib/Components/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,eAAe,EACf,wBAAwB,EACxB,QAAQ,GACT,EAAE,cAAc,2CA0EhB"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/LineChart/LineChart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,QAAqB,EACrB,SAAiB,EACjB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,KAAc,EACd,MAAY,EACZ,KAAK,EACL,eAAe,EACf,wBAAwB,EACxB,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,2CA2EhB"}

package/dist/lib/Components/LineChart/LineChart.js

@@ -1,10 +1,10 @@
-import { jsxs as H, jsx as e } from "react/jsx-runtime";
-import { useMemo as j } from "react";
-import { DEFAULT_AXIS_WIDTH as F, YAxis as U } from "../Axis/YAxis/YAxis.js";
-import { DEFAULT_AXIS_HEIGHT as m, XAxis as V } from "../Axis/XAxis/XAxis.js";
-import { CartesianChart as W } from "../CartesianChart/CartesianChart.js";
-import { Line as h } from "../Line/Line.js";
-function B({
+import { jsxs as j, jsx as e } from "react/jsx-runtime";
+import { useMemo as F } from "react";
+import { DEFAULT_AXIS_WIDTH as U, YAxis as V } from "../Axis/YAxis/YAxis.js";
+import { DEFAULT_AXIS_HEIGHT as m, XAxis as W } from "../Axis/XAxis/XAxis.js";
+import { CartesianChart as h } from "../CartesianChart/CartesianChart.js";
+import { Line as v } from "../Line/Line.js";
+function J({
   series: r,
   showArea: d = !1,
   areaType: c = "gradient",
@@ -17,29 +17,30 @@ function B({
   inset: T,
   enableScrubbing: g,
   onScrubberPositionChange: u,
-  children: A
+  animate: A,
+  children: D
 }) {
   const {
-    scaleType: D,
-    data: C,
-    domain: I,
+    scaleType: C,
+    data: I,
+    domain: P,
     ...n
   } = f ?? {}, {
-    scaleType: P,
-    data: L,
-    domain: S,
+    scaleType: L,
+    data: S,
+    domain: _,
     ...o
-  } = l ?? {}, _ = {
-    scaleType: D,
-    data: C,
-    domain: I
-  }, b = {
-    scaleType: P,
-    data: L,
-    domain: S
-  }, E = j(() => {
+  } = l ?? {}, b = {
+    scaleType: C,
+    data: I,
+    domain: P
+  }, E = {
+    scaleType: L,
+    data: S,
+    domain: _
+  }, H = F(() => {
     if (!t && !i) return;
-    const a = n.position === "top" ? "top" : "bottom", s = o.position === "end" ? "right" : "left", p = o.width ?? F;
+    const a = n.position === "top" ? "top" : "bottom", s = o.position === "end" ? "right" : "left", p = o.width ?? U;
     return {
       top: t && a === "top" ? m : 0,
       bottom: t && a === "bottom" ? m : 0,
@@ -53,23 +54,24 @@ function B({
     o.position,
     o.width
   ]);
-  return /* @__PURE__ */ H(
-    W,
+  return /* @__PURE__ */ j(
+    h,
     {
       series: r ?? [],
-      xAxis: _,
-      yAxis: b,
+      xAxis: b,
+      yAxis: E,
       width: x,
       height: y,
       inset: T,
-      axisPadding: E,
+      axisPadding: H,
       enableScrubbing: g,
       onScrubberPositionChange: u,
+      animate: A,
       children: [
-        t && /* @__PURE__ */ e(V, { ...n }),
-        i && /* @__PURE__ */ e(U, { ...o }),
+        t && /* @__PURE__ */ e(W, { ...n }),
+        i && /* @__PURE__ */ e(V, { ...o }),
         r?.map((a) => /* @__PURE__ */ e(
-          h,
+          v,
           {
             seriesId: a.id,
             showArea: d,
@@ -77,11 +79,11 @@ function B({
           },
           a.id
         )),
-        A
+        D
       ]
     }
   );
 }
 export {
-  B as LineChart
+  J as LineChart
 };