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

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

@@ -0,0 +1,196 @@
+import { describe, expect, it } from '@jest/globals';
+
+import type { Series } from '../../utils/types';
+import { DEFAULT_AXIS_HEIGHT } from '../Axis/XAxis';
+
+import {
+  canRenderLine,
+  computeAxisPadding,
+  getChartDisplayState,
+} from './utils';
+
+const makeSeries = (data: (number | null)[]): Series => ({
+  id: 'a',
+  stroke: '#000',
+  data,
+});
+
+describe('canRenderLine', () => {
+  it('returns false for undefined or empty series', () => {
+    expect(canRenderLine(undefined)).toBe(false);
+    expect(canRenderLine([])).toBe(false);
+  });
+
+  it('returns false when no series has at least two finite points', () => {
+    expect(canRenderLine([makeSeries([1])])).toBe(false);
+    expect(canRenderLine([makeSeries([1, null])])).toBe(false);
+    expect(canRenderLine([makeSeries([null, null])])).toBe(false);
+  });
+
+  it('returns true once a series has two finite points', () => {
+    expect(canRenderLine([makeSeries([1, 2])])).toBe(true);
+  });
+
+  it('ignores null gaps when counting drawable points', () => {
+    expect(canRenderLine([makeSeries([1, null, 3])])).toBe(true);
+  });
+
+  it('does not count NaN, Infinity, or holes as drawable points', () => {
+    expect(canRenderLine([makeSeries([NaN, NaN])])).toBe(false);
+    expect(canRenderLine([makeSeries([Infinity, -Infinity])])).toBe(false);
+    expect(canRenderLine([makeSeries([NaN, 1])])).toBe(false);
+    expect(
+      canRenderLine([makeSeries([1, undefined as unknown as number, 2])]),
+    ).toBe(true);
+    expect(
+      canRenderLine([makeSeries([1, undefined as unknown as number])]),
+    ).toBe(false);
+  });
+
+  it('returns true when any series is drawable', () => {
+    expect(canRenderLine([makeSeries([1]), makeSeries([1, 2, 3])])).toBe(true);
+  });
+
+  it('treats a missing data array as no points', () => {
+    expect(canRenderLine([{ id: 'a', stroke: '#000' }])).toBe(false);
+  });
+
+  it('caps counted points to the x-axis domain length (like toScaledPoints)', () => {
+    expect(canRenderLine([makeSeries([1, 2, 3])], ['Jan'])).toBe(false);
+    expect(canRenderLine([makeSeries([1, 2, 3])], ['Jan', 'Feb'])).toBe(true);
+  });
+
+  it('does not reduce drawable points when xData is longer than the series', () => {
+    expect(canRenderLine([makeSeries([1, 2])], ['a', 'b', 'c', 'd'])).toBe(
+      true,
+    );
+  });
+
+  it('counts only finite points within the capped range', () => {
+    expect(canRenderLine([makeSeries([null, 2, 3])], ['Jan', 'Feb'])).toBe(
+      false,
+    );
+  });
+});
+
+describe('computeAxisPadding', () => {
+  const base = {
+    xAxisPosition: 'bottom' as const,
+    yAxisPosition: 'start' as const,
+    yAxisWidth: 40,
+  };
+
+  it('returns undefined when no axis is shown', () => {
+    expect(
+      computeAxisPadding({ ...base, showXAxis: false, showYAxis: false }),
+    ).toBeUndefined();
+  });
+
+  it('reserves height on the side where the x-axis sits', () => {
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: true,
+        showYAxis: false,
+        xAxisPosition: 'bottom',
+      }),
+    ).toEqual({ top: 0, bottom: DEFAULT_AXIS_HEIGHT, left: 0, right: 0 });
+
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: true,
+        showYAxis: false,
+        xAxisPosition: 'top',
+      }),
+    ).toEqual({ top: DEFAULT_AXIS_HEIGHT, bottom: 0, left: 0, right: 0 });
+  });
+
+  it('reserves the y-axis width on the side where it sits', () => {
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: false,
+        showYAxis: true,
+        yAxisPosition: 'start',
+        yAxisWidth: 56,
+      }),
+    ).toEqual({ top: 0, bottom: 0, left: 56, right: 0 });
+
+    expect(
+      computeAxisPadding({
+        ...base,
+        showXAxis: false,
+        showYAxis: true,
+        yAxisPosition: 'end',
+        yAxisWidth: 56,
+      }),
+    ).toEqual({ top: 0, bottom: 0, left: 0, right: 56 });
+  });
+
+  it('combines padding when both axes are shown', () => {
+    expect(
+      computeAxisPadding({
+        showXAxis: true,
+        showYAxis: true,
+        xAxisPosition: 'bottom',
+        yAxisPosition: 'start',
+        yAxisWidth: 40,
+      }),
+    ).toEqual({ top: 0, bottom: DEFAULT_AXIS_HEIGHT, left: 40, right: 0 });
+  });
+});
+
+describe('getChartDisplayState', () => {
+  it('is initial-loading when loading with no data', () => {
+    expect(
+      getChartDisplayState({
+        loading: true,
+        hasData: false,
+        emptyLabel: 'No data',
+      }),
+    ).toEqual({
+      status: 'initial-loading',
+      ariaLabel: 'Loading chart',
+    });
+  });
+
+  it('is empty when not loading with no data', () => {
+    expect(
+      getChartDisplayState({
+        loading: false,
+        hasData: false,
+        emptyLabel: 'Nothing here',
+      }),
+    ).toEqual({
+      status: 'empty',
+      ariaLabel: 'Nothing here',
+    });
+  });
+
+  it('is transition-loading when loading with data', () => {
+    expect(
+      getChartDisplayState({
+        loading: true,
+        hasData: true,
+        emptyLabel: 'No data',
+      }),
+    ).toEqual({
+      status: 'transition-loading',
+      ariaLabel: 'Loading chart',
+    });
+  });
+
+  it('is ready with no aria label when data is present and not loading', () => {
+    expect(
+      getChartDisplayState({
+        loading: false,
+        hasData: true,
+        emptyLabel: 'No data',
+      }),
+    ).toEqual({
+      status: 'ready',
+      ariaLabel: undefined,
+    });
+  });
+});

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

@@ -0,0 +1,107 @@
+import { isFiniteNumber } from '../../utils/numbers';
+import type { ChartInset, Series } from '../../utils/types';
+import { DEFAULT_AXIS_HEIGHT } from '../Axis/XAxis';
+import type { XAxisProps } from '../Axis/XAxis';
+import { DEFAULT_AXIS_WIDTH } from '../Axis/YAxis';
+import type { YAxisProps } from '../Axis/YAxis';
+
+/**
+ * Minimum number of finite points a series needs to be drawable as a line.
+ */
+const MIN_DRAWABLE_POINTS = 2;
+const LOADING_ARIA_LABEL = 'Loading chart';
+
+type ComputeAxisPaddingParams = {
+  showXAxis: boolean;
+  showYAxis: boolean;
+  xAxisPosition: XAxisProps['position'];
+  yAxisPosition: YAxisProps['position'];
+  yAxisWidth: YAxisProps['width'];
+};
+
+type ChartDisplayStateParams = {
+  loading: boolean;
+  hasData: boolean;
+  emptyLabel: string;
+};
+
+type ChartStatus = 'initial-loading' | 'empty' | 'transition-loading' | 'ready';
+
+type ChartDisplayState = {
+  status: ChartStatus;
+  ariaLabel: string | undefined;
+};
+
+/**
+ * Reserves space on the relevant sides of the drawing area for visible axes.
+ * Returns `undefined` when no axis is shown so the chart keeps its full area.
+ */
+export const computeAxisPadding = ({
+  showXAxis,
+  showYAxis,
+  xAxisPosition,
+  yAxisPosition,
+  yAxisWidth,
+}: ComputeAxisPaddingParams): Partial<ChartInset> | undefined => {
+  if (!showXAxis && !showYAxis) {
+    return undefined;
+  }
+
+  const resolvedYAxisWidth = yAxisWidth ?? DEFAULT_AXIS_WIDTH;
+
+  return {
+    top: showXAxis && xAxisPosition === 'top' ? DEFAULT_AXIS_HEIGHT : 0,
+    bottom: showXAxis && xAxisPosition === 'bottom' ? DEFAULT_AXIS_HEIGHT : 0,
+    left: showYAxis && yAxisPosition === 'start' ? resolvedYAxisWidth : 0,
+    right: showYAxis && yAxisPosition === 'end' ? resolvedYAxisWidth : 0,
+  };
+};
+
+/**
+ * Derives the chart's {@link ChartStatus} from its loading flag and whether it
+ * has drawable data, along with the matching accessibility label.
+ */
+export const getChartDisplayState = ({
+  loading,
+  hasData,
+  emptyLabel,
+}: ChartDisplayStateParams): ChartDisplayState => {
+  if (loading) {
+    return {
+      status: hasData ? 'transition-loading' : 'initial-loading',
+      ariaLabel: LOADING_ARIA_LABEL,
+    };
+  }
+
+  if (!hasData) {
+    return { status: 'empty', ariaLabel: emptyLabel };
+  }
+
+  return { status: 'ready', ariaLabel: undefined };
+};
+
+/**
+ * Whether any series has at least {@link MIN_DRAWABLE_POINTS} finite points,
+ * i.e. enough to actually draw a line. Drives the empty / loading / data states
+ * of the chart.
+ *
+ * When `xData` (the x-axis domain) is provided, only the first `xData.length`
+ * points of each series are considered — mirroring the cap in `toScaledPoints`
+ * (Line/utils.ts) — so a series longer than the axis cannot report drawable
+ * points that would never be plotted.
+ */
+export const canRenderLine = (
+  series: Series[] | undefined,
+  xData?: readonly (string | number)[],
+): boolean => {
+  return (series ?? []).some((s) => {
+    const data = s.data ?? [];
+    const limit = xData ? Math.min(data.length, xData.length) : data.length;
+    let drawablePoints = 0;
+    for (let i = 0; i < limit; i++) {
+      if (isFiniteNumber(data[i])) drawablePoints++;
+      if (drawablePoints >= MIN_DRAWABLE_POINTS) return true;
+    }
+    return false;
+  });
+};

package/src/lib/Components/ReferenceLine/ReferenceLine.tsx

@@ -3,7 +3,10 @@ import { G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
 
 import { useCartesianChartContext } from '../CartesianChart/context';
 
-import { DASH_ARRAY, STROKE_WIDTH } from './constants';
+import {
+  REFERENCE_LINE_DASH_ARRAY,
+  REFERENCE_LINE_STROKE_WIDTH,
+} from './constants';
 import type { ReferenceLineProps } from './types';
 import {
   computeHorizontalLabelCoordinates,
@@ -28,7 +31,8 @@ export function ReferenceLine({
   const { theme } = useTheme();
 
   const resolvedStroke = stroke ?? theme.colors.border.muted;
-  const dashArray = lineStyle === 'dashed' ? DASH_ARRAY : undefined;
+  const dashArray =
+    lineStyle === 'dashed' ? REFERENCE_LINE_DASH_ARRAY : undefined;
   const fontSize = theme.typographies.body4.fontSize;
 
   if (props.dataY !== undefined) {
@@ -65,7 +69,7 @@ export function ReferenceLine({
           x2={drawingArea.x + drawingArea.width}
           y2={yPixel}
           stroke={resolvedStroke}
-          strokeWidth={STROKE_WIDTH}
+          strokeWidth={REFERENCE_LINE_STROKE_WIDTH}
           strokeDasharray={dashArray}
           strokeLinecap='round'
         />
@@ -122,7 +126,7 @@ export function ReferenceLine({
           x2={xPixel}
           y2={drawingArea.y + drawingArea.height}
           stroke={resolvedStroke}
-          strokeWidth={STROKE_WIDTH}
+          strokeWidth={REFERENCE_LINE_STROKE_WIDTH}
           strokeDasharray={dashArray}
           strokeLinecap='round'
         />

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

@@ -1,2 +1,2 @@
-export const STROKE_WIDTH = 2;
-export const DASH_ARRAY = '0.1 6';
+export const REFERENCE_LINE_STROKE_WIDTH = 2;
+export const REFERENCE_LINE_DASH_ARRAY = '0.1 6';

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

@@ -1,3 +1,4 @@
+import { isFiniteNumber } from '../../utils/numbers';
 import { getPointOnScale, isCategoricalScale } from '../../utils/scales/scales';
 import type { ChartScaleFunction, DrawingArea } from '../../utils/types';
 import type { BaseAxisProps } from '../Axis';
@@ -127,7 +128,7 @@ export const resolvePixel = ({
 
   const p = getPointOnScale(resolved, scale);
 
-  if (!Number.isFinite(p) || !isPixelWithinDrawingArea(p, axis, drawingArea)) {
+  if (!isFiniteNumber(p) || !isPixelWithinDrawingArea(p, axis, drawingArea)) {
     return undefined;
   }
   return p;

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/utils.ts

@@ -1,6 +1,7 @@
 import type { RefObject } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { clamp } from '../../../utils/numbers';
 import type { DrawingArea } from '../../../utils/types';
 import type { ChartTooltipItemData, SvgBBoxElement } from '../types';
 import {
@@ -77,7 +78,7 @@ export const computeTooltipX = (
     drawingArea.x,
     drawingArea.x + drawingArea.width - tooltipWidth,
   );
-  return Math.min(maxTooltipX, Math.max(drawingArea.x, preferredTooltipX));
+  return clamp(preferredTooltipX, drawingArea.x, maxTooltipX);
 };
 
 /**

package/src/lib/Components/Scrubber/Scrubber.tsx

@@ -80,12 +80,23 @@ export function Scrubber({
         const seriesData = seriesMap.get(s.id)?.data;
         const pixelY = resolvePixelY(scrubberPosition, seriesData, getYScale);
         if (pixelY === undefined) return null;
-        return { id: s.id, stroke: s.stroke, pixelY };
+        return {
+          id: s.id,
+          stroke: s.stroke ?? theme.colors.border.muted,
+          pixelY,
+        };
       })
       .filter(
         (b): b is { id: string; stroke: string; pixelY: number } => b !== null,
       );
-  }, [scrubberPosition, showBeacons, series, seriesMap, getYScale]);
+  }, [
+    scrubberPosition,
+    showBeacons,
+    series,
+    seriesMap,
+    getYScale,
+    theme.colors.border.muted,
+  ]);
 
   const tooltipPayload = useMemo(() => {
     if (scrubberPosition === undefined || !tooltip) {

package/src/lib/Components/Scrubber/ScrubberProvider.tsx

@@ -4,6 +4,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { useSharedValue } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 
+import { clamp } from '../../utils/numbers';
 import { useCartesianChartContext } from '../CartesianChart/context';
 import { useMagneticPointsContext } from '../Point/pointContext';
 import { ScrubberContextProvider } from './context';
@@ -83,7 +84,7 @@ export function ScrubberProvider({
       const clamped =
         index === undefined || ref.dataLength <= 0
           ? undefined
-          : Math.max(0, Math.min(index, ref.dataLength - 1));
+          : clamp(index, 0, ref.dataLength - 1);
       if (clamped === ref.lastIndex) return;
       ref.lastIndex = clamped;
       setScrubberPosition(clamped);

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

@@ -1,3 +1,4 @@
+import { clamp } from '../../utils/numbers';
 import {
   getPointOnScale,
   isCategoricalScale,
@@ -71,7 +72,7 @@ export const getDataIndexFromPosition = (
     const offset =
       rangeStart + scale.paddingOuter() * step + scale.bandwidth() / 2;
     const index = Math.round((pixelX - offset) / step);
-    return Math.max(0, Math.min(index, dataLength - 1));
+    return clamp(index, 0, dataLength - 1);
   }
 
   if (isNumericScale(scale)) {
@@ -84,10 +85,7 @@ export const getDataIndexFromPosition = (
     }
 
     const inverted = scale.invert(pixelX);
-    return Math.max(
-      0,
-      Math.min(Math.round(inverted as number), dataLength - 1),
-    );
+    return clamp(Math.round(inverted as number), 0, dataLength - 1);
   }
 
   return 0;

package/src/lib/utils/index.ts

@@ -3,6 +3,7 @@ export type {
   CategoricalScale,
   ChartInset,
   ChartScaleFunction,
+  CurveType,
   DrawingArea,
   NumericScale,
   Series,

package/src/lib/utils/numbers.ts

@@ -0,0 +1,15 @@
+/**
+ * Type guard for a finite number. Narrows out `null`, `undefined`, `NaN` and
+ * `Infinity`, i.e. any value that cannot be projected to a valid coordinate or
+ * counted as a drawable data point.
+ */
+export const isFiniteNumber = (value: unknown): value is number =>
+  Number.isFinite(value);
+
+/**
+ * Constrains `value` to the inclusive `[min, max]` range. For a degenerate
+ * range where `min > max` (e.g. an index range `[0, length - 1]` for empty
+ * data), `min` takes precedence and is returned — matching `lodash.clamp`.
+ */
+export const clamp = (value: number, min: number, max: number): number =>
+  Math.max(Math.min(value, max), min);

package/src/lib/utils/ticks/ticks.ts

@@ -1,6 +1,6 @@
 import type { BaseAxisProps } from '../../Components/Axis';
 import { isCategoricalScale, isNumericScale } from '../scales/scales';
-import type { ChartScaleFunction, DrawingArea } from '../types';
+import type { ChartScaleFunction } from '../types';
 
 export const APPROXIMATE_TICK_COUNT = 5;
 
@@ -94,25 +94,3 @@ export const buildTicksData = (
     label: getTickLabel(tick, axisData, formatter),
   }));
 };
-
-/**
- * Excludes the X grid line at the Y-axis origin (left edge)
- * to prevent overlap with the Y-axis solid line.
- */
-export const isTickOnXAxisDomainEdge = (
-  tick: TickData,
-  drawingArea: DrawingArea,
-): boolean => {
-  return tick.position !== drawingArea.x;
-};
-
-/**
- * Excludes the Y grid line at the X-axis origin (bottom edge)
- * to prevent overlap with the X-axis solid line.
- */
-export const isTickOnYAxisDomainEdge = (
-  tick: TickData,
-  drawingArea: DrawingArea,
-): boolean => {
-  return tick.position !== drawingArea.y + drawingArea.height;
-};

package/src/lib/utils/types.ts

@@ -19,6 +19,26 @@ export type DrawingArea = {
   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.
@@ -33,9 +53,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 =

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

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useId","useAnimatedProps","useSharedValue","withTiming","OVERFLOW_BUFFER","useRevealClipAnimation","durationMs","drawingArea","dataFingerprint","clipId","width","value","left","right","duration","animatedRectProps","useComputeDataFingerprint","series","map","s","data","join"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/RevealClip/utils.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,KAAK,QAAQ,OAAO;AACxC,SACEC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAGhC,SAASC,eAAe,QAAQ,aAAU;AAa1C,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCC,UAAU;EACVC,WAAW;EACXC;AACyB,CAAC,KAAgC;EAC1D,MAAMC,MAAM,GAAGT,KAAK,CAAC,CAAC;EACtB,MAAMU,KAAK,GAAGR,cAAc,CAAC,CAAC,CAAC;EAE/BH,SAAS,CAAC,MAAM;IACdW,KAAK,CAACC,KAAK,GAAG,CAAC;IACfD,KAAK,CAACC,KAAK,GAAGR,UAAU,CACtBI,WAAW,CAACG,KAAK,GAAGN,eAAe,CAACQ,IAAI,GAAGR,eAAe,CAACS,KAAK,EAChE;MAAEC,QAAQ,EAAER;IAAW,CACzB,CAAC;EACH,CAAC,EAAE,CAACC,WAAW,CAACG,KAAK,EAAEJ,UAAU,EAAEI,KAAK,EAAEF,eAAe,CAAC,CAAC;EAE3D,MAAMO,iBAAiB,GAAGd,gBAAgB,CAAC,OAAO;IAChDS,KAAK,EAAEA,KAAK,CAACC;EACf,CAAC,CAAC,CAAC;EAEH,OAAO;IAAEF,MAAM;IAAEM;EAAkB,CAAC;AACtC,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGA,CAAC;EACxCC;AAGF,CAAC,KAAa;EACZ,OAAOA,MAAM,CAACC,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,EAAEC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAACA,IAAI,CAAC,GAAG,CAAC;AAC7D,CAAC","ignoreList":[]}

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

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/CartesianChart/RevealClip/utils.ts"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGhE,KAAK,yBAAyB,GAAG;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,WAAW,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;CACxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,+CAIpC,yBAAyB,KAAG,yBAiB9B,CAAC;AAEF,eAAO,MAAM,yBAAyB,GAAI,aAEvC;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,KAAG,MAEH,CAAC"}