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

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

@@ -1,8 +1,21 @@
-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';
@@ -10,7 +23,26 @@ import type {
 type Point = [x: number, y: number];
 
 /**
- * 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, skipping any
+ * non-finite entries.
  *
  * 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.
@@ -30,7 +62,7 @@ export const toScaledPoints = (
 
   for (let i = 0; i < limit; i++) {
     const value = data[i];
-    if (value === null) continue;
+    if (!isFiniteNumber(value)) continue;
 
     const xInput =
       xData && typeof xData[i] === 'number' ? (xData[i] as number) : i;
@@ -49,12 +81,15 @@ export const toScaledPoints = (
 /**
  * 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>()
       .x((d) => d[0])
       .y((d) => d[1])
-      .curve(curveBumpX)(points) ?? null
+      .curve(getCurveFactory(curve))(points) ?? null
   );
 };
 
@@ -64,6 +99,7 @@ export const buildLinePath = (points: Point[]): string | null => {
 export const buildAreaPath = (
   points: Point[],
   drawingArea: DrawingArea,
+  curve?: CurveType,
 ): string | null => {
   const yBottom = drawingArea.y + drawingArea.height;
 
@@ -72,6 +108,6 @@ export const buildAreaPath = (
       .x((d) => d[0])
       .y0(yBottom)
       .y1((d) => d[1])
-      .curve(curveBumpX)(points) ?? null
+      .curve(getCurveFactory(curve))(points) ?? null
   );
 };

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

@@ -255,4 +255,68 @@ 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();
+    });
+  });
 });

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

@@ -1,13 +1,95 @@
 import { useMemo } from 'react';
+import Animated from 'react-native-reanimated';
+import { G } from 'react-native-svg';
 
-import type { ChartInset } from '../../utils/types';
 import { defaultXAxisProps, defaultYAxisProps } from '../Axis';
-import { DEFAULT_AXIS_HEIGHT, XAxis } from '../Axis/XAxis';
+import { XAxis } from '../Axis/XAxis';
 import { YAxis } from '../Axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
+import { ChartEmptyLabel } from '../CartesianChart/ChartEmptyLabel';
+import { useShimmerAnimation } from '../CartesianChart/hooks/useShimmerAnimation';
 import { Line } from '../Line';
 
-import type { LineChartProps } from './types';
+import { LineChartEmptyState } from './LineChartEmptyState';
+import type {
+  LineChartContentProps,
+  LineChartLinesProps,
+  LineChartProps,
+} from './types';
+import {
+  canRenderLine,
+  computeAxisPadding,
+  getChartDisplayState,
+} from './utils';
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+
+const LineChartLines = ({
+  series,
+  showArea,
+  areaType,
+}: Readonly<LineChartLinesProps>) => {
+  return (
+    <>
+      {series.map((s) => (
+        <Line
+          key={s.id}
+          seriesId={s.id}
+          stroke={s.stroke}
+          showArea={showArea}
+          areaType={areaType}
+        />
+      ))}
+    </>
+  );
+};
+
+const LineChartTransitionLines = ({
+  series,
+  showArea,
+  areaType,
+}: Readonly<LineChartLinesProps>) => {
+  const { animatedProps } = useShimmerAnimation();
+
+  return (
+    <AnimatedG animatedProps={animatedProps}>
+      <LineChartLines series={series} showArea={showArea} areaType={areaType} />
+    </AnimatedG>
+  );
+};
+
+const LineChartContent = ({
+  series,
+  showArea,
+  areaType,
+  showXAxis,
+  showYAxis,
+  xAxisConfig,
+  yAxisConfig,
+  isTransitionLoading,
+  children,
+}: Readonly<LineChartContentProps>) => {
+  return (
+    <>
+      {showXAxis && <XAxis {...xAxisConfig} />}
+      {showYAxis && <YAxis {...yAxisConfig} />}
+      {isTransitionLoading ? (
+        <LineChartTransitionLines
+          series={series}
+          showArea={showArea}
+          areaType={areaType}
+        />
+      ) : (
+        <LineChartLines
+          series={series}
+          showArea={showArea}
+          areaType={areaType}
+        />
+      )}
+      {children}
+    </>
+  );
+};
 
 export const LineChart = ({
   series,
@@ -18,47 +100,54 @@ export const LineChart = ({
   xAxis,
   yAxis,
   width,
-  height = 160,
+  height = 228,
   inset,
   children,
   enableScrubbing = false,
   onScrubberPositionChange,
   animate,
   magnetRadius,
-}: LineChartProps) => {
+  loading = false,
+  emptyLabel = 'No data',
+}: Readonly<LineChartProps>) => {
   const xAxisConfig = {
     ...defaultXAxisProps,
     ...xAxis,
+    position: xAxis?.position ?? defaultXAxisProps.position,
   };
   const yAxisConfig = {
     ...defaultYAxisProps,
     ...yAxis,
+    position: yAxis?.position ?? defaultYAxisProps.position,
+    width: yAxis?.width ?? defaultYAxisProps.width,
   };
 
-  const axisPadding: Partial<ChartInset> | undefined = useMemo(() => {
-    if (!showXAxis && !showYAxis) {
-      return undefined;
-    }
+  const xAxisPosition = xAxisConfig.position;
+  const yAxisPosition = yAxisConfig.position;
+  const yAxisWidth = yAxisConfig.width;
 
-    return {
-      top:
-        showXAxis && xAxisConfig.position === 'top' ? DEFAULT_AXIS_HEIGHT : 0,
-      bottom:
-        showXAxis && xAxisConfig.position === 'bottom'
-          ? DEFAULT_AXIS_HEIGHT
-          : 0,
-      left:
-        showYAxis && yAxisConfig.position === 'start' ? yAxisConfig.width : 0,
-      right:
-        showYAxis && yAxisConfig.position === 'end' ? yAxisConfig.width : 0,
-    };
-  }, [
-    showXAxis,
-    showYAxis,
-    xAxisConfig?.position,
-    yAxisConfig?.position,
-    yAxisConfig?.width,
-  ]);
+  const axisPadding = useMemo(
+    () =>
+      computeAxisPadding({
+        showXAxis,
+        showYAxis,
+        xAxisPosition,
+        yAxisPosition,
+        yAxisWidth,
+      }),
+    [showXAxis, showYAxis, xAxisPosition, yAxisPosition, yAxisWidth],
+  );
+
+  const hasData = canRenderLine(series, xAxisConfig.data);
+
+  const { status, ariaLabel } = getChartDisplayState({
+    loading,
+    hasData,
+    emptyLabel,
+  });
+
+  const isTransitionLoading = status === 'transition-loading';
+  const isPlaceholder = status === 'initial-loading' || status === 'empty';
 
   return (
     <CartesianChart
@@ -71,20 +160,32 @@ export const LineChart = ({
       axisPadding={axisPadding}
       enableScrubbing={enableScrubbing}
       onScrubberPositionChange={onScrubberPositionChange}
-      animate={animate}
+      animate={isTransitionLoading ? false : animate}
       magnetRadius={magnetRadius}
+      ariaLabel={ariaLabel}
+      ariaBusy={loading}
+      overlay={
+        status === 'empty' ? (
+          <ChartEmptyLabel>{emptyLabel}</ChartEmptyLabel>
+        ) : undefined
+      }
     >
-      {showXAxis && <XAxis {...xAxisConfig} />}
-      {showYAxis && <YAxis {...yAxisConfig} />}
-      {series?.map((s) => (
-        <Line
-          key={s.id}
-          seriesId={s.id}
+      {isPlaceholder ? (
+        <LineChartEmptyState loading={status === 'initial-loading'} />
+      ) : (
+        <LineChartContent
+          series={series ?? []}
           showArea={showArea}
           areaType={areaType}
-        />
-      ))}
-      {children}
+          showXAxis={showXAxis}
+          showYAxis={showYAxis}
+          xAxisConfig={xAxisConfig}
+          yAxisConfig={yAxisConfig}
+          isTransitionLoading={isTransitionLoading}
+        >
+          {children}
+        </LineChartContent>
+      )}
     </CartesianChart>
   );
 };

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

@@ -0,0 +1,39 @@
+import { describe, it } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { render } from '@testing-library/react-native';
+
+import { CartesianChart } from '../../CartesianChart';
+import { LineChartEmptyState } from './LineChartEmptyState';
+import type { LineChartEmptyStateProps } from './types';
+
+const renderInChart = (props: LineChartEmptyStateProps) => {
+  return render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+      <CartesianChart series={[]} width={400} height={200}>
+        <LineChartEmptyState {...props} />
+      </CartesianChart>
+    </ThemeProvider>,
+  );
+};
+
+describe('LineChartEmptyState', () => {
+  it('renders the placeholder line', () => {
+    const { getByTestId } = renderInChart({});
+
+    getByTestId('chart-empty-state-line');
+  });
+
+  it('renders the grid lines', () => {
+    const { getByTestId } = renderInChart({});
+
+    getByTestId('chart-empty-state-grid');
+  });
+
+  it('renders the placeholder while loading', () => {
+    const { getByTestId } = renderInChart({ loading: true });
+
+    getByTestId('chart-empty-state');
+    getByTestId('chart-empty-state-line');
+  });
+});

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

@@ -0,0 +1,72 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import Animated from 'react-native-reanimated';
+import { G, Line as SvgLine, Path } from 'react-native-svg';
+
+import { useCartesianChartContext } from '../../CartesianChart/context';
+import { useShimmerAnimation } from '../../CartesianChart/hooks/useShimmerAnimation';
+import { useRevealClip } from '../../CartesianChart/RevealClip';
+
+import type { LineChartEmptyStateProps } from './types';
+import { buildPlaceholderTransform, PLACEHOLDER_LINE_PATH } from './utils';
+
+const GRID_LINE_RATIOS = [0.3, 0.5, 0.7];
+const GRID_STROKE_WIDTH = 1;
+const PLACEHOLDER_STROKE_WIDTH = 2;
+
+const AnimatedG = Animated.createAnimatedComponent(G);
+
+/**
+ * SVG placeholder line shown when a LineChart is loading with no data yet (with
+ * a shimmer) or has no data to display (static). Uses a fixed line shape scaled
+ * into the chart's reserved drawing area, plus static horizontal grid lines, so
+ * axes are not needed.
+ */
+export function LineChartEmptyState({
+  loading = false,
+}: Readonly<LineChartEmptyStateProps>) {
+  const { drawingArea } = useCartesianChartContext();
+  const { theme } = useTheme();
+  const { animatedProps } = useShimmerAnimation(loading);
+  const clipPath = useRevealClip();
+
+  if (drawingArea.width <= 0 || drawingArea.height <= 0) {
+    return null;
+  }
+
+  return (
+    <G testID='chart-empty-state'>
+      <G testID='chart-empty-state-grid'>
+        {GRID_LINE_RATIOS.map((ratio) => {
+          const y = drawingArea.y + drawingArea.height * ratio;
+
+          return (
+            <SvgLine
+              key={ratio}
+              x1={drawingArea.x}
+              y1={y}
+              x2={drawingArea.x + drawingArea.width}
+              y2={y}
+              stroke={theme.colors.border.mutedSubtleTransparent}
+              strokeWidth={GRID_STROKE_WIDTH}
+            />
+          );
+        })}
+      </G>
+      <G clipPath={clipPath}>
+        <AnimatedG animatedProps={animatedProps}>
+          <Path
+            testID='chart-empty-state-line'
+            d={PLACEHOLDER_LINE_PATH}
+            transform={buildPlaceholderTransform(drawingArea)}
+            vectorEffect='non-scaling-stroke'
+            fill='none'
+            stroke={theme.colors.border.muted}
+            strokeWidth={PLACEHOLDER_STROKE_WIDTH}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </AnimatedG>
+      </G>
+    </G>
+  );
+}

package/src/lib/Components/LineChart/LineChartEmptyState/index.ts

@@ -0,0 +1,2 @@
+export { LineChartEmptyState } from './LineChartEmptyState';
+export type { LineChartEmptyStateProps } from './types';

package/src/lib/Components/LineChart/LineChartEmptyState/types.ts

@@ -0,0 +1,3 @@
+import type { LineChartProps } from '../types';
+
+export type LineChartEmptyStateProps = Pick<LineChartProps, 'loading'>;

package/src/lib/Components/LineChart/LineChartEmptyState/utils.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { buildPlaceholderTransform, PLACEHOLDER_LINE_PATH } from './utils';
+
+describe('PLACEHOLDER_LINE_PATH', () => {
+  it('is an svg path starting with a move command', () => {
+    expect(PLACEHOLDER_LINE_PATH).toMatch(/^M/);
+  });
+});
+
+describe('buildPlaceholderTransform', () => {
+  it('translates to the drawing area origin and scales the viewBox to fit', () => {
+    const transform = buildPlaceholderTransform({
+      x: 10,
+      y: 20,
+      width: 364,
+      height: 104,
+    });
+
+    expect(transform).toBe('translate(10, 20) scale(0.5, 0.5)');
+  });
+});

package/src/lib/Components/LineChart/LineChartEmptyState/utils.ts

@@ -0,0 +1,24 @@
+import type { DrawingArea } from '../../../utils/types';
+
+/**
+ * Fixed placeholder line shape, authored against a {@link PLACEHOLDER_VIEW_WIDTH}
+ * x {@link PLACEHOLDER_VIEW_HEIGHT} viewBox. Reused for every empty/loading
+ * state so the placeholder always reads the same.
+ */
+export const PLACEHOLDER_LINE_PATH =
+  'M1.00 128.27 C4.02 127.46 13.09 125.96 19.13 123.47 C25.19 120.97 31.23 116.53 37.28 113.31 C43.33 110.10 49.38 106.15 55.42 104.20 C61.48 102.24 67.52 102.53 73.57 101.61 C79.61 100.69 85.65 99.89 91.71 98.70 C97.75 97.51 103.80 95.67 109.84 94.47 C115.90 93.27 121.94 91.71 127.99 91.49 C134.03 91.26 140.09 91.53 146.13 93.16 C152.19 94.79 158.23 98.37 164.27 101.25 C170.32 104.13 176.36 108.16 182.42 110.45 C188.46 112.74 194.51 114.41 200.55 115.00 C206.61 115.60 212.65 114.56 218.70 114.03 C224.75 113.50 230.80 112.56 236.84 111.86 C242.88 111.17 248.94 110.27 254.98 109.87 C261.03 109.48 267.07 109.14 273.13 109.49 C279.17 109.82 285.22 110.90 291.26 111.90 C297.32 112.90 303.36 114.47 309.41 115.50 C315.46 116.54 321.50 118.12 327.55 118.11 C333.59 118.10 339.65 118.08 345.69 115.45 C351.74 112.81 357.78 107.02 363.84 102.29 C369.88 97.54 375.93 90.87 381.97 87.01 C388.03 83.16 394.07 79.81 400.11 79.12 C406.17 78.43 412.21 80.79 418.26 82.88 C424.30 84.99 430.36 88.88 436.40 91.74 C442.45 94.59 448.49 98.24 454.55 100.02 C460.59 101.80 466.64 102.08 472.68 102.44 C478.72 102.81 484.78 102.31 490.82 102.21 C496.87 102.11 502.92 101.95 508.97 101.84 C515.01 101.74 521.07 101.47 527.11 101.58 C533.16 101.68 539.20 101.57 545.26 102.48 C551.30 103.39 557.34 105.37 563.39 107.02 C569.43 108.68 575.49 111.02 581.53 112.40 C587.59 113.79 593.63 114.62 599.68 115.30 C605.72 115.98 611.78 115.81 617.82 116.48 C623.87 117.16 629.91 118.39 635.95 119.32 C642.01 120.25 648.05 121.51 654.10 122.04 C660.15 122.57 666.20 123.89 672.24 122.47 C678.30 121.07 684.34 117.39 690.39 113.54 C696.43 109.69 702.49 103.53 708.53 99.38 C714.57 95.23 722.31 90.65 726.66 88.61';
+
+const PLACEHOLDER_VIEW_WIDTH = 728;
+const PLACEHOLDER_VIEW_HEIGHT = 208;
+
+/**
+ * Transform that fits {@link PLACEHOLDER_LINE_PATH} into the drawing area. Pair
+ * with `vector-effect: non-scaling-stroke` on the path so the stroke keeps a
+ * constant width despite the (potentially non-uniform) scale.
+ */
+export const buildPlaceholderTransform = (drawingArea: DrawingArea): string => {
+  const scaleX = drawingArea.width / PLACEHOLDER_VIEW_WIDTH;
+  const scaleY = drawingArea.height / PLACEHOLDER_VIEW_HEIGHT;
+
+  return `translate(${drawingArea.x}, ${drawingArea.y}) scale(${scaleX}, ${scaleY})`;
+};

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

@@ -48,7 +48,7 @@ export type LineChartProps = {
   width?: number;
   /**
    * Height of the chart in pixels.
-   * @default 160
+   * @default 228
    */
   height?: number;
   /**
@@ -83,4 +83,38 @@ export type LineChartProps = {
    * @default 6
    */
   magnetRadius?: number;
+  /**
+   * Whether the chart is loading. When there is no data, renders an animated
+   * shimmer placeholder line (initial loading). When data is present (e.g. a
+   * time-range change), the current line is recoloured to a muted grey and
+   * shimmers until the new `series` is provided (transition loading).
+   *
+   * To get the transition behaviour, keep passing the previous `series` while
+   * refetching; clearing it falls back to the initial placeholder.
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * Text shown in the centre of the chart when there is no data and the chart
+   * is not loading.
+   * @default 'No data'
+   */
+  emptyLabel?: string;
 };
+
+/**
+ * Series-render fields shared by `LineChart` and its internal line
+ * sub-components. Derived from {@link LineChartProps} so the option types stay
+ * in sync.
+ */
+export type LineChartLinesProps = Required<
+  Pick<LineChartProps, 'series' | 'showArea' | 'areaType'>
+>;
+
+export type LineChartContentProps = LineChartLinesProps &
+  Required<Pick<LineChartProps, 'showXAxis' | 'showYAxis'>> &
+  Pick<LineChartProps, 'children'> & {
+    xAxisConfig: XAxisProps;
+    yAxisConfig: YAxisProps;
+    isTransitionLoading: boolean;
+  };