@ledgerhq/lumen-ui-rnative-visualization 0.1.17 → 0.1.18

package/dist/typescript/src/lib/utils/ticks/ticks.d.ts

@@ -1,5 +1,5 @@
 import type { BaseAxisProps } from '../../Components/Axis';
-import type { ChartScaleFunction, DrawingArea } from '../types';
+import type { ChartScaleFunction } from '../types';
 export declare const APPROXIMATE_TICK_COUNT = 5;
 export type TickData = {
     position: number;
@@ -32,14 +32,4 @@ export declare const getTickLabel: (tick: number, axisData: BaseAxisProps["data"
  * Builds the complete tick data array from a scale and axis configuration.
  */
 export declare const buildTicksData: (scale: ChartScaleFunction, axisConfig?: BaseAxisProps, explicitTicks?: number[], formatter?: (value: number | string) => string) => TickData[];
-/**
- * Excludes the X grid line at the Y-axis origin (left edge)
- * to prevent overlap with the Y-axis solid line.
- */
-export declare const isTickOnXAxisDomainEdge: (tick: TickData, drawingArea: DrawingArea) => boolean;
-/**
- * Excludes the Y grid line at the X-axis origin (bottom edge)
- * to prevent overlap with the X-axis solid line.
- */
-export declare const isTickOnYAxisDomainEdge: (tick: TickData, drawingArea: DrawingArea) => boolean;
 //# sourceMappingURL=ticks.d.ts.map

package/dist/typescript/src/lib/utils/ticks/ticks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticks.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/ticks/ticks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,kBAAkB,EACzB,gBAAgB,MAAM,EAAE,EACxB,WAAW,aAAa,CAAC,MAAM,CAAC,KAC/B,MAAM,EAUR,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,kBAAkB,EACzB,MAAM,MAAM,KACX,MAKF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,EACZ,UAAU,aAAa,CAAC,MAAM,CAAC,EAC/B,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,MAeF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,kBAAkB,EACzB,aAAa,aAAa,EAC1B,gBAAgB,MAAM,EAAE,EACxB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,QAAQ,EASV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,EACd,aAAa,WAAW,KACvB,OAEF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,EACd,aAAa,WAAW,KACvB,OAEF,CAAC"}
+{"version":3,"file":"ticks.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/ticks/ticks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAEnD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,kBAAkB,EACzB,gBAAgB,MAAM,EAAE,EACxB,WAAW,aAAa,CAAC,MAAM,CAAC,KAC/B,MAAM,EAUR,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,kBAAkB,EACzB,MAAM,MAAM,KACX,MAKF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,EACZ,UAAU,aAAa,CAAC,MAAM,CAAC,EAC/B,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,MAeF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,kBAAkB,EACzB,aAAa,aAAa,EAC1B,gBAAgB,MAAM,EAAE,EACxB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,QAAQ,EASV,CAAC"}

package/dist/typescript/src/lib/utils/types.d.ts

@@ -15,6 +15,18 @@ export type DrawingArea = {
     width: number;
     height: number;
 };
+/**
+ * Interpolation used to draw a line (and its area) between data points.
+ * Each value maps to a [d3-shape](https://d3js.org/d3-shape/curve) curve:
+ * - `'bump'` — smooth cubic curve with horizontal tangents (`curveBumpX`).
+ * - `'natural'` — natural cubic spline through every point (`curveNatural`).
+ * - `'monotone'` — smooth curve that preserves monotonicity (`curveMonotoneX`).
+ * - `'linear'` — straight segments between points (`curveLinear`).
+ * - `'step'` — stepped, piecewise-constant line (`curveStep`).
+ * - `'stepAfter'` — stepped line where changes occur after the x-coordinate (`curveStepAfter`).
+ * - `'stepBefore'` — stepped line where changes occur before the x-coordinate (`curveStepBefore`).
+ */
+export type CurveType = 'bump' | 'natural' | 'monotone' | 'linear' | 'step' | 'stepAfter' | 'stepBefore';
 export type Series = {
     /**
      * Unique identifier for the series.
@@ -29,9 +41,15 @@ export type Series = {
      */
     label?: string;
     /**
-     * CSS color applied to the series line/mark.
+     * Color applied to the series line/mark.
+     * @default border-muted
+     */
+    stroke?: string;
+    /**
+     * Interpolation used to draw the line between data points.
+     * @default 'bump'
      */
-    stroke: string;
+    curve?: CurveType;
 };
 export type NumericScale = ScaleLinear<number, number> | ScaleLogarithmic<number, number>;
 export type CategoricalScale = ScaleBand<number>;

package/dist/typescript/src/lib/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,SAAS,GACT,UAAU,GACV,QAAQ,GACR,MAAM,GACN,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative-visualization",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -44,8 +44,8 @@
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.16",
-    "@ledgerhq/lumen-ui-rnative": "0.1.40",
+    "@ledgerhq/lumen-design-core": "0.1.17",
+    "@ledgerhq/lumen-ui-rnative": "0.1.41",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-svg": "^15.0.0",

package/src/lib/Components/Axis/XAxis/XAxis.tsx

@@ -2,10 +2,7 @@ import { useTheme } from '@ledgerhq/lumen-ui-rnative';
 import { useMemo } from 'react';
 import { G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
 
-import {
-  buildTicksData,
-  isTickOnXAxisDomainEdge,
-} from '../../../utils/ticks/ticks';
+import { buildTicksData } from '../../../utils/ticks/ticks';
 import { useCartesianChartContext } from '../../CartesianChart/context';
 
 import type { XAxisProps } from './types';
@@ -57,20 +54,18 @@ export const XAxis = ({
   return (
     <G>
       {showGrid &&
-        ticksData
-          .filter((tick) => isTickOnXAxisDomainEdge(tick, drawingArea))
-          .map((tick, i) => (
-            <SvgLine
-              key={`grid-${tick.value}-${i}`}
-              x1={tick.position}
-              y1={drawingArea.y}
-              x2={tick.position}
-              y2={drawingArea.y + drawingArea.height}
-              stroke={gridStroke}
-              strokeWidth={STROKE_WIDTH}
-              strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
-            />
-          ))}
+        ticksData.map((tick, i) => (
+          <SvgLine
+            key={`grid-${tick.value}-${i}`}
+            x1={tick.position}
+            y1={drawingArea.y}
+            x2={tick.position}
+            y2={drawingArea.y + drawingArea.height}
+            stroke={gridStroke}
+            strokeWidth={STROKE_WIDTH}
+            strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
+          />
+        ))}
 
       {showLine && (
         <SvgLine

package/src/lib/Components/Axis/YAxis/YAxis.tsx

@@ -2,10 +2,7 @@ import { useTheme } from '@ledgerhq/lumen-ui-rnative';
 import { useMemo } from 'react';
 import { G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
 
-import {
-  buildTicksData,
-  isTickOnYAxisDomainEdge,
-} from '../../../utils/ticks/ticks';
+import { buildTicksData } from '../../../utils/ticks/ticks';
 import { useCartesianChartContext } from '../../CartesianChart/context';
 
 import type { YAxisProps } from './types';
@@ -56,20 +53,18 @@ export const YAxis = ({
   return (
     <G>
       {showGrid &&
-        ticksData
-          .filter((tick) => isTickOnYAxisDomainEdge(tick, drawingArea))
-          .map((tick, i) => (
-            <SvgLine
-              key={`grid-${tick.value}-${i}`}
-              x1={drawingArea.x}
-              y1={tick.position}
-              x2={drawingArea.x + drawingArea.width}
-              y2={tick.position}
-              stroke={gridStroke}
-              strokeWidth={STROKE_WIDTH}
-              strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
-            />
-          ))}
+        ticksData.map((tick, i) => (
+          <SvgLine
+            key={`grid-${tick.value}-${i}`}
+            x1={drawingArea.x}
+            y1={tick.position}
+            x2={drawingArea.x + drawingArea.width}
+            y2={tick.position}
+            stroke={gridStroke}
+            strokeWidth={STROKE_WIDTH}
+            strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
+          />
+        ))}
 
       {showLine && (
         <SvgLine

package/src/lib/Components/CartesianChart/CartesianChart.tsx

@@ -24,6 +24,8 @@ export function CartesianChart({
   inset,
   axisPadding,
   ariaLabel = 'Chart',
+  ariaBusy = false,
+  overlay,
   children,
   enableScrubbing = false,
   onScrubberPositionChange,
@@ -75,6 +77,7 @@ export function CartesianChart({
       onLayout={needsMeasurement ? handleLayout : undefined}
       accessibilityRole='image'
       accessibilityLabel={ariaLabel}
+      accessibilityState={{ busy: ariaBusy }}
       style={{
         width: needsMeasurement ? undefined : resolvedWidth,
         height,
@@ -82,33 +85,36 @@ export function CartesianChart({
       }}
     >
       {resolvedWidth > 0 && (
-        <CartesianChartProvider value={contextValue}>
-          <MagneticPointsProvider>
-            <ScrubberProvider
-              width={svgWidth}
-              height={svgHeight}
-              enableScrubbing={enableScrubbing}
-              onScrubberPositionChange={onScrubberPositionChange}
-              style={OVERFLOW_OFFSET}
-              magnetRadius={magnetRadius}
-            >
-              <Svg
-                testID='chart-svg'
+        <>
+          <CartesianChartProvider value={contextValue}>
+            <MagneticPointsProvider>
+              <ScrubberProvider
                 width={svgWidth}
                 height={svgHeight}
-                style={{ overflow: 'visible' }}
+                enableScrubbing={enableScrubbing}
+                onScrubberPositionChange={onScrubberPositionChange}
+                style={OVERFLOW_OFFSET}
+                magnetRadius={magnetRadius}
               >
-                <RevealClipDefs
-                  drawingArea={contextValue.drawingArea}
-                  series={series}
-                  animate={animate}
+                <Svg
+                  testID='chart-svg'
+                  width={svgWidth}
+                  height={svgHeight}
+                  style={{ overflow: 'visible' }}
                 >
-                  {children}
-                </RevealClipDefs>
-              </Svg>
-            </ScrubberProvider>
-          </MagneticPointsProvider>
-        </CartesianChartProvider>
+                  <RevealClipDefs
+                    drawingArea={contextValue.drawingArea}
+                    series={series}
+                    animate={animate}
+                  >
+                    {children}
+                  </RevealClipDefs>
+                </Svg>
+              </ScrubberProvider>
+            </MagneticPointsProvider>
+          </CartesianChartProvider>
+          {overlay}
+        </>
       )}
     </View>
   );

package/src/lib/Components/CartesianChart/ChartEmptyLabel/ChartEmptyLabel.tsx

@@ -0,0 +1,68 @@
+import { Text, useStyleSheet } from '@ledgerhq/lumen-ui-rnative';
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+
+type ChartEmptyLabelProps = {
+  children: ReactNode;
+};
+
+const useStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      pill: {
+        backgroundColor: t.colors.bg.muted,
+        borderRadius: t.borderRadius.xs,
+        paddingHorizontal: t.spacings.s12,
+        paddingVertical: t.spacings.s6,
+      },
+      label: {
+        color: t.colors.text.muted,
+        ...t.typographies.body3,
+      },
+    }),
+    [],
+  );
+};
+
+/**
+ * Centered overlay label shown when a chart has no data (and is not loading).
+ * Rendered through the `overlay` slot of `CartesianChart` so it shares the
+ * chart's positioned container and aligns with the chart footprint. Shared
+ * across cartesian charts (LineChart, future BarChart).
+ *
+ * This is the lib's only non-SVG (View/Text) element, so unlike the chart
+ * visuals (which read raw theme colors for `react-native-svg`) it is styled with
+ * the design system's themed stylesheet, consistent with the components in
+ * `ui-rnative`.
+ */
+export function ChartEmptyLabel({ children }: Readonly<ChartEmptyLabelProps>) {
+  const styles = useStyles();
+
+  return (
+    <View
+      pointerEvents='none'
+      accessibilityElementsHidden={true}
+      importantForAccessibility='no-hide-descendants'
+      style={styles.container}
+    >
+      <View style={styles.pill}>
+        <Text
+          testID='chart-empty-label'
+          style={styles.label}
+          accessible={false}
+        >
+          {children}
+        </Text>
+      </View>
+    </View>
+  );
+}

package/src/lib/Components/CartesianChart/ChartEmptyLabel/index.ts

@@ -0,0 +1 @@
+export { ChartEmptyLabel } from './ChartEmptyLabel';

package/src/lib/Components/CartesianChart/RevealClip/RevealClipDefs.tsx

@@ -4,11 +4,12 @@ import { useMemo } from 'react';
 import Animated from 'react-native-reanimated';
 import { ClipPath, Defs, Rect } from 'react-native-svg';
 
+import { useDataFingerprint } from '../hooks/useDataFingerprint';
+import { useRevealClipAnimation } from '../hooks/useRevealClipAnimation';
 import { OVERFLOW_BUFFER } from '../utils';
 
 import { RevealClipContext } from './context';
 import type { RevealClipDefsProps } from './types';
-import { useComputeDataFingerprint, useRevealClipAnimation } from './utils';
 
 const DEFAULT_DURATION_IN_SECONDS = 0.8;
 
@@ -29,7 +30,7 @@ export function RevealClipDefs({
   const durationMs =
     (transitions?.enter?.duration ?? DEFAULT_DURATION_IN_SECONDS) * 1000;
 
-  const dataFingerprint = useComputeDataFingerprint({ series });
+  const dataFingerprint = useDataFingerprint(series);
   const { clipId, animatedRectProps } = useRevealClipAnimation({
     durationMs,
     drawingArea,

package/src/lib/Components/CartesianChart/RevealClip/types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { DrawingArea, Series } from '../../../utils';
+import type { DrawingArea, Series } from '../../../utils/types';
 
 export type EnterTransitionConfig = {
   /**

package/src/lib/Components/CartesianChart/hooks/useDataFingerprint.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+
+import type { Series } from '../../../utils/types';
+
+/**
+ * Stable signature of every series' data points, memoized on the `series`
+ * reference. Used to key the reveal-clip provider so the reveal animation only
+ * replays when the underlying data actually changes — not on unrelated
+ * re-renders such as scrubbing or hover.
+ */
+export const useDataFingerprint = (series: Series[]): string => {
+  return useMemo(
+    () => series.map((s) => s.data?.join(',') ?? '').join('|'),
+    [series],
+  );
+};

package/src/lib/Components/CartesianChart/{RevealClip/utils.ts → hooks/useRevealClipAnimation.ts}

@@ -5,7 +5,7 @@ import {
   withTiming,
 } from 'react-native-reanimated';
 
-import type { DrawingArea, Series } from '../../../utils/types';
+import type { DrawingArea } from '../../../utils/types';
 import { OVERFLOW_BUFFER } from '../utils';
 
 type RevealClipAnimationConfig = {
@@ -41,11 +41,3 @@ export const useRevealClipAnimation = ({
 
   return { clipId, animatedRectProps };
 };
-
-export const useComputeDataFingerprint = ({
-  series,
-}: {
-  series: Series[];
-}): string => {
-  return series.map((s) => s.data?.join(',') ?? '').join('|');
-};

package/src/lib/Components/CartesianChart/hooks/useShimmerAnimation.ts

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import {
+  cancelAnimation,
+  Easing,
+  useAnimatedProps,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+const HALF_PULSE_DURATION_IN_MS = 1000;
+const MIN_OPACITY = 0.5;
+
+type ShimmerAnimationResult = {
+  animatedProps: ReturnType<typeof useAnimatedProps>;
+};
+
+/**
+ * Self-contained shimmer (opacity pulse) for SVG content, the RN counterpart of
+ * the web's CSS-keyframe shimmer. Shared by the initial loading placeholder and
+ * the transition-loading line. Honors the user's reduced-motion preference by
+ * keeping the content fully opaque.
+ */
+export const useShimmerAnimation = (animate = true): ShimmerAnimationResult => {
+  const opacity = useSharedValue(1);
+  const reducedMotion = useReducedMotion();
+
+  useEffect(() => {
+    if (animate && !reducedMotion) {
+      opacity.value = withRepeat(
+        withTiming(MIN_OPACITY, {
+          duration: HALF_PULSE_DURATION_IN_MS,
+          easing: Easing.inOut(Easing.ease),
+        }),
+        -1,
+        true,
+      );
+    } else {
+      cancelAnimation(opacity);
+      opacity.value = 1;
+    }
+
+    return () => {
+      cancelAnimation(opacity);
+    };
+  }, [animate, reducedMotion, opacity]);
+
+  const animatedProps = useAnimatedProps(() => ({ opacity: opacity.value }));
+
+  return { animatedProps };
+};

package/src/lib/Components/CartesianChart/types.ts

@@ -43,6 +43,18 @@ export type CartesianChartProps = {
    * @default 'Chart'
    */
   ariaLabel?: string;
+  /**
+   * Marks the chart as busy for assistive technologies (via the container's
+   * accessibility state) to signal that its content is loading.
+   * @default false
+   */
+  ariaBusy?: boolean;
+  /**
+   * Content rendered as an absolutely-positioned overlay above the chart SVG,
+   * within the same positioned container (so it aligns with the chart
+   * footprint). Used for e.g. an empty-state label.
+   */
+  overlay?: ReactNode;
   /**
    * SVG content rendered inside the chart's context provider.
    */

package/src/lib/Components/Line/Line.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
 import { useId, useMemo } from 'react';
 import { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
 
@@ -5,17 +6,16 @@ import { isNumericScale } from '../../utils/scales/scales';
 import { useCartesianChartContext } from '../CartesianChart/context';
 import { useRevealClip } from '../CartesianChart/RevealClip';
 
+import { LINE_AREA_GRADIENT_OPACITY, LINE_STROKE_WIDTH } from './constants';
 import type { LineProps } from './types';
 import { buildAreaPath, buildLinePath, toScaledPoints } from './utils';
 
-const STROKE_WIDTH = 2;
-const AREA_GRADIENT_OPACITY = 0.2;
-
 export const Line = ({
   seriesId,
   stroke,
   showArea = false,
   areaType: _areaType = 'gradient',
+  curve,
 }: LineProps) => {
   const { getXScale, getYScale, getXAxisConfig, drawingArea, seriesMap } =
     useCartesianChartContext();
@@ -25,9 +25,12 @@ export const Line = ({
   const yScale = getYScale();
   const xAxisConfig = getXAxisConfig();
 
+  const { theme } = useTheme();
   const gradientId = useId();
   const seriesData = seriesMap.get(seriesId);
-  const resolvedStroke = stroke ?? seriesData?.stroke;
+  const resolvedStroke =
+    stroke ?? seriesData?.stroke ?? theme.colors.border.muted;
+  const resolvedCurve = curve ?? seriesData?.curve;
 
   const points = useMemo(
     () =>
@@ -38,16 +41,16 @@ export const Line = ({
   );
 
   const linePath = useMemo(
-    () => (points ? buildLinePath(points) : null),
-    [points],
+    () => (points ? buildLinePath(points, resolvedCurve) : null),
+    [points, resolvedCurve],
   );
 
   const areaPath = useMemo(
     () =>
       showArea && points && drawingArea
-        ? buildAreaPath(points, drawingArea)
+        ? buildAreaPath(points, drawingArea, resolvedCurve)
         : null,
-    [showArea, points, drawingArea],
+    [showArea, points, drawingArea, resolvedCurve],
   );
 
   if (!linePath) {
@@ -63,7 +66,7 @@ export const Line = ({
               <Stop
                 offset='0%'
                 stopColor={resolvedStroke}
-                stopOpacity={AREA_GRADIENT_OPACITY}
+                stopOpacity={LINE_AREA_GRADIENT_OPACITY}
               />
               <Stop offset='100%' stopColor={resolvedStroke} stopOpacity={0} />
             </LinearGradient>
@@ -81,7 +84,7 @@ export const Line = ({
         d={linePath}
         fill='none'
         stroke={resolvedStroke}
-        strokeWidth={STROKE_WIDTH}
+        strokeWidth={LINE_STROKE_WIDTH}
         strokeLinecap='round'
         strokeLinejoin='round'
       />

package/src/lib/Components/Line/constants.ts

@@ -0,0 +1,2 @@
+export const LINE_STROKE_WIDTH = 2;
+export const LINE_AREA_GRADIENT_OPACITY = 0.25;

package/src/lib/Components/Line/index.ts

@@ -1,2 +1,2 @@
 export { Line } from './Line';
-export type { LineProps } from './types';
+export type { CurveType, LineProps } from './types';

package/src/lib/Components/Line/types.ts

@@ -1,3 +1,7 @@
+import type { CurveType } from '../../utils/types';
+
+export type { CurveType };
+
 export type LineProps = {
   /**
    * The ID of the series to render.
@@ -20,4 +24,10 @@ export type LineProps = {
    * @default 'gradient'
    */
   areaType?: 'gradient';
+  /**
+   * Override interpolation used to draw the line between data points.
+   * When omitted, falls back to the `curve` defined on the series.
+   * @default 'bump'
+   */
+  curve?: CurveType;
 };

package/src/lib/Components/Line/utils.test.ts

@@ -5,7 +5,7 @@ import {
   getNumericScale,
 } from '../../utils/scales/scales';
 
-import { toScaledPoints } from './utils';
+import { buildLinePath, toScaledPoints } from './utils';
 
 const xScale = getNumericScale({
   scaleType: 'linear',
@@ -88,3 +88,43 @@ describe('toScaledPoints', () => {
     expect(toScaledPoints(data, xScale, yScale, xData)).toBeNull();
   });
 });
+
+describe('buildLinePath', () => {
+  const points: [number, number][] = [
+    [0, 100],
+    [50, 20],
+    [100, 60],
+  ];
+
+  it('defaults to the bump curve (cubic beziers)', () => {
+    const path = buildLinePath(points);
+
+    expect(path).not.toBeNull();
+    expect(path).toContain('C');
+  });
+
+  it('draws straight segments for the linear curve', () => {
+    const path = buildLinePath(points, 'linear');
+
+    expect(path).toBe('M0,100L50,20L100,60');
+  });
+
+  it('uses cubic beziers for smooth curves', () => {
+    expect(buildLinePath(points, 'natural')).toContain('C');
+    expect(buildLinePath(points, 'monotone')).toContain('C');
+  });
+
+  it('draws orthogonal segments for the step curve', () => {
+    const path = buildLinePath(points, 'step');
+
+    expect(path).not.toBeNull();
+    expect(path).not.toContain('C');
+    expect(path).toBe('M0,100L25,100L25,20L75,20L75,60L100,60');
+  });
+
+  it('falls back to the default curve for unknown values', () => {
+    const path = buildLinePath(points, 'unknown' as never);
+
+    expect(path).toBe(buildLinePath(points));
+  });
+});