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

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/CartesianChart/utils.ts

@@ -1,7 +1,7 @@
 import type { ChartInset } from '../../utils/types';
 import type { CartesianChartProps } from './types';
 
-export const DEFAULT_HEIGHT = 160;
+export const DEFAULT_HEIGHT = 228;
 
 /**
  * Internal buffer added around the drawing area so SVG content (labels, points,
@@ -30,6 +30,7 @@ export const OVERFLOW_OFFSET = {
   top: -OVERFLOW_BUFFER.top,
   left: -OVERFLOW_BUFFER.left,
 };
+
 export const ZERO_PADDING: ChartInset = {
   top: 0,
   right: 0,

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

@@ -1,53 +1,65 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
 import { useId, useMemo } from 'react';
 import { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
 
 import { isNumericScale } from '../../utils/scales/scales';
 import { useCartesianChartContext } from '../CartesianChart/context';
-import { useRevealClip } from '../CartesianChart/RevealClip';
+import { usePathReveal } from '../CartesianChart/RevealAnimation';
 
+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,
+  connectNulls,
 }: LineProps) => {
   const { getXScale, getYScale, getXAxisConfig, drawingArea, seriesMap } =
     useCartesianChartContext();
-  const clipPath = useRevealClip();
+  const clipPath = usePathReveal();
 
   const xScale = getXScale();
   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 resolvedConnectNulls =
+    connectNulls ?? seriesData?.connectNulls ?? false;
 
   const points = useMemo(
     () =>
       seriesData?.data && xScale && yScale && isNumericScale(yScale)
-        ? toScaledPoints(seriesData.data, xScale, yScale, xAxisConfig?.data)
+        ? toScaledPoints(
+            seriesData.data,
+            xScale,
+            yScale,
+            xAxisConfig?.data,
+            resolvedConnectNulls,
+          )
         : null,
-    [seriesData, xScale, yScale, xAxisConfig],
+    [seriesData, xScale, yScale, xAxisConfig, resolvedConnectNulls],
   );
 
   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 +75,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 +93,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,17 @@ 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;
+  /**
+   * When true, skips null values and draws a continuous line across gaps.
+   * When false, null values create gaps in the line.
+   * When omitted, falls back to the `connectNulls` defined on the series.
+   * @default false
+   */
+  connectNulls?: boolean;
 };

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',
@@ -44,17 +44,29 @@ describe('toScaledPoints', () => {
     expect(points![points!.length - 1][0]).toBe(800);
   });
 
-  it('skips null values without affecting the cap', () => {
+  it('keeps null values as holes by default so the line breaks', () => {
     const data: (number | null)[] = [10, null, 30, 40, 50, 60, 70, 80, 90];
     const xData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
 
     const points = toScaledPoints(data, xScale, yScale, xData);
 
     expect(points).not.toBeNull();
-    expect(points).toHaveLength(7);
+    expect(points).toHaveLength(8);
+    expect(points![1][1]).toBeNull();
     expect(points![points!.length - 1][0]).toBe((800 / 7) * 7);
   });
 
+  it('skips null values when connectNulls is true', () => {
+    const data: (number | null)[] = [10, null, 30, 40, 50, 60, 70, 80, 90];
+    const xData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+    const points = toScaledPoints(data, xScale, yScale, xData, true);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(7);
+    expect(points!.every((p) => p[1] !== null)).toBe(true);
+  });
+
   it('uses numeric xData values as the x input', () => {
     const data = [10, 20, 30];
     const customX = [0, 3.5, 7];
@@ -88,3 +100,65 @@ 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));
+  });
+
+  it('breaks the path into segments at null holes', () => {
+    const gapped: [number, number | null][] = [
+      [0, 100],
+      [50, 80],
+      [100, null],
+      [150, 60],
+      [200, 40],
+    ];
+
+    const path = buildLinePath(gapped, 'linear');
+
+    expect(path).not.toBeNull();
+    expect(path!.match(/M/g)).toHaveLength(2);
+    expect(path).toBe('M0,100L50,80M150,60L200,40');
+  });
+
+  it('draws a single continuous segment when there are no holes', () => {
+    const path = buildLinePath(points, 'linear');
+
+    expect(path!.match(/M/g)).toHaveLength(1);
+  });
+});

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

@@ -1,16 +1,47 @@
-import { area, curveBumpX, line } from 'd3-shape';
+import {
+  area,
+  curveBumpX,
+  curveLinear,
+  curveMonotoneX,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+  line,
+  type CurveFactory,
+} from 'd3-shape';
 
+import { isFiniteNumber } from '../../utils/numbers';
 import { isCategoricalScale } from '../../utils/scales/scales';
 import type {
   ChartScaleFunction,
+  CurveType,
   DrawingArea,
   NumericScale,
 } from '../../utils/types';
 
-type Point = [x: number, y: number];
+type Point = [x: number, y: number | null];
 
 /**
- * Project series data into scaled [x, y] pixel coordinates, skipping nulls.
+ * Maps the public `CurveType` values to their d3-shape curve factories.
+ */
+const CURVE_FACTORIES: Record<CurveType, CurveFactory> = {
+  bump: curveBumpX,
+  linear: curveLinear,
+  monotone: curveMonotoneX,
+  natural: curveNatural,
+  step: curveStep,
+  stepAfter: curveStepAfter,
+  stepBefore: curveStepBefore,
+};
+
+const DEFAULT_CURVE: CurveType = 'bump';
+
+const getCurveFactory = (curve: CurveType = DEFAULT_CURVE): CurveFactory =>
+  CURVE_FACTORIES[curve] ?? CURVE_FACTORIES[DEFAULT_CURVE];
+
+/**
+ * Project series data into scaled [x, y] pixel coordinates.
  *
  * When `xData` contains numeric values, those values are fed into the scale
  * instead of the array index so the points honour a numeric X domain.
@@ -18,19 +49,28 @@ type Point = [x: number, y: number];
  * When `xData` is provided, iteration is capped at `xData.length` so a series
  * with more points than the axis has labels does not overflow past the right
  * edge of the chart. The axis is treated as authoritative for the X domain.
+ *
+ * Non-finite values (e.g. `null`) are handled according to `connectNulls`:
+ * - `false` (default): kept as `[x, null]` holes so the line/area break into
+ *   gaps via the generators' `.defined()` check.
+ * - `true`: skipped entirely so the line is drawn continuously across gaps.
  */
 export const toScaledPoints = (
   data: (number | null)[],
   xScale: ChartScaleFunction,
   yScale: NumericScale,
   xData?: readonly (string | number)[],
+  connectNulls = false,
 ): Point[] | null => {
   const pts: Point[] = [];
   const limit = xData ? Math.min(data.length, xData.length) : data.length;
+  let finiteCount = 0;
 
   for (let i = 0; i < limit; i++) {
     const value = data[i];
-    if (value === null) continue;
+    const isFiniteValue = isFiniteNumber(value);
+
+    if (!isFiniteValue && connectNulls) continue;
 
     const xInput =
       xData && typeof xData[i] === 'number' ? (xData[i] as number) : i;
@@ -38,23 +78,32 @@ export const toScaledPoints = (
     const x = isCategoricalScale(xScale)
       ? (xScale(xInput) ?? 0) + xScale.bandwidth() / 2
       : xScale(xInput);
-    const y = yScale(value);
 
-    pts.push([x as number, y]);
+    if (!isFiniteValue) {
+      pts.push([x as number, null]);
+      continue;
+    }
+
+    pts.push([x as number, yScale(value)]);
+    finiteCount++;
   }
 
-  return pts.length >= 2 ? pts : null;
+  return finiteCount >= 2 ? pts : null;
 };
 
 /**
  * Build the SVG `d` attribute for the line stroke.
  */
-export const buildLinePath = (points: Point[]): string | null => {
+export const buildLinePath = (
+  points: Point[],
+  curve?: CurveType,
+): string | null => {
   return (
     line<Point>()
+      .defined((d) => d[1] !== null)
       .x((d) => d[0])
-      .y((d) => d[1])
-      .curve(curveBumpX)(points) ?? null
+      .y((d) => d[1] as number)
+      .curve(getCurveFactory(curve))(points) ?? null
   );
 };
 
@@ -64,14 +113,16 @@ export const buildLinePath = (points: Point[]): string | null => {
 export const buildAreaPath = (
   points: Point[],
   drawingArea: DrawingArea,
+  curve?: CurveType,
 ): string | null => {
   const yBottom = drawingArea.y + drawingArea.height;
 
   return (
     area<Point>()
+      .defined((d) => d[1] !== null)
       .x((d) => d[0])
       .y0(yBottom)
-      .y1((d) => d[1])
-      .curve(curveBumpX)(points) ?? null
+      .y1((d) => d[1] as number)
+      .curve(getCurveFactory(curve))(points) ?? null
   );
 };

package/src/lib/Components/LineChart/LineChart.test.tsx

@@ -255,4 +255,139 @@ describe('LineChart', () => {
     );
     getByTestId('chart-svg');
   });
+
+  describe('loading and empty states', () => {
+    it('renders the placeholder with no data while loading (state 1)', () => {
+      const { getByTestId, queryByTestId } = render(
+        <LineChartWrapper>
+          <LineChart width={400} height={200} loading />
+        </LineChartWrapper>,
+      );
+
+      getByTestId('chart-empty-state');
+      expect(queryByTestId('line-path')).toBeNull();
+      expect(queryByTestId('chart-empty-label')).toBeNull();
+    });
+
+    it('renders the placeholder with the empty label when there is no data and not loading (state 2)', () => {
+      const { getByTestId, queryByTestId } = render(
+        <LineChartWrapper>
+          <LineChart width={400} height={200} emptyLabel='Nothing here' />
+        </LineChartWrapper>,
+      );
+
+      getByTestId('chart-empty-state');
+      expect(
+        getByTestId('chart-empty-label', { includeHiddenElements: true }),
+      ).toHaveTextContent('Nothing here');
+      expect(queryByTestId('line-path')).toBeNull();
+    });
+
+    it('defaults the empty label to "No data"', () => {
+      const { getByTestId } = render(
+        <LineChartWrapper>
+          <LineChart width={400} height={200} />
+        </LineChartWrapper>,
+      );
+
+      expect(
+        getByTestId('chart-empty-label', { includeHiddenElements: true }),
+      ).toHaveTextContent('No data');
+    });
+
+    it('keeps rendering the real line during a transition load (state 3)', () => {
+      const { getByTestId, queryByTestId } = render(
+        <LineChartWrapper>
+          <LineChart series={sampleSeries} width={400} height={200} loading />
+        </LineChartWrapper>,
+      );
+
+      getByTestId('line-path');
+      expect(queryByTestId('chart-empty-state')).toBeNull();
+      expect(queryByTestId('chart-empty-label')).toBeNull();
+    });
+
+    it('renders the normal chart when idle with data (state 4)', () => {
+      const { getByTestId, queryByTestId } = render(
+        <LineChartWrapper>
+          <LineChart series={sampleSeries} width={400} height={200} />
+        </LineChartWrapper>,
+      );
+
+      getByTestId('line-path');
+      expect(queryByTestId('chart-empty-state')).toBeNull();
+      expect(queryByTestId('chart-empty-label')).toBeNull();
+    });
+  });
+
+  describe('null gaps and connectNulls', () => {
+    const gappedSeries = [
+      {
+        id: 'gapped',
+        stroke: '#000',
+        data: [10, 20, null, 40, 50],
+        curve: 'linear' as const,
+      },
+    ];
+
+    const countMoves = (d: string): number => d.match(/M/g)?.length ?? 0;
+
+    it('breaks the line into segments at null values by default', () => {
+      const { getByTestId } = render(
+        <LineChartWrapper>
+          <LineChart series={gappedSeries} width={400} height={200} />
+        </LineChartWrapper>,
+      );
+
+      const d = getByTestId('line-path').props.d as string;
+      expect(countMoves(d)).toBe(2);
+    });
+
+    it('connects across nulls when connectNulls is set on the chart', () => {
+      const { getByTestId } = render(
+        <LineChartWrapper>
+          <LineChart
+            series={gappedSeries}
+            width={400}
+            height={200}
+            connectNulls
+          />
+        </LineChartWrapper>,
+      );
+
+      const d = getByTestId('line-path').props.d as string;
+      expect(countMoves(d)).toBe(1);
+    });
+
+    it('honours connectNulls set per-series', () => {
+      const { getByTestId } = render(
+        <LineChartWrapper>
+          <LineChart
+            series={[{ ...gappedSeries[0], connectNulls: true }]}
+            width={400}
+            height={200}
+          />
+        </LineChartWrapper>,
+      );
+
+      const d = getByTestId('line-path').props.d as string;
+      expect(countMoves(d)).toBe(1);
+    });
+
+    it('lets the chart-level prop override the per-series value', () => {
+      const { getByTestId } = render(
+        <LineChartWrapper>
+          <LineChart
+            series={[{ ...gappedSeries[0], connectNulls: true }]}
+            width={400}
+            height={200}
+            connectNulls={false}
+          />
+        </LineChartWrapper>,
+      );
+
+      const d = getByTestId('line-path').props.d as string;
+      expect(countMoves(d)).toBe(2);
+    });
+  });
 });