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

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

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
-import type { AxisConfigProps, ChartInset, Series } from '../../utils/types';
+import type { ChartInset, Series } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
 
 export type CartesianChartProps = {
   /**
@@ -10,11 +11,11 @@ export type CartesianChartProps = {
   /**
    * Scale and domain configuration for the x-axis.
    */
-  xAxis?: Partial<AxisConfigProps>;
+  xAxis?: Partial<BaseAxisProps>;
   /**
    * Scale and domain configuration for the y-axis.
    */
-  yAxis?: Partial<AxisConfigProps>;
+  yAxis?: Partial<BaseAxisProps>;
   /**
    * Width of the chart in pixels.
    * When omitted, the component auto-measures via `onLayout`.
@@ -63,4 +64,11 @@ export type CartesianChartProps = {
    * @default true
    */
   animate?: boolean;
+  /**
+   * Pixel radius within which the scrubber magnetically snaps to registered
+   * magnetic `<Point>` components. Requires `enableScrubbing` to be `true`.
+   * Set to `0` to disable magnetisation.
+   * @default 6
+   */
+  magnetRadius?: number;
 };

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

@@ -4,21 +4,31 @@ import type { CartesianChartProps } from './types';
 export const DEFAULT_HEIGHT = 160;
 
 /**
- * Internal buffer that prevents SVG content (labels, points, ticks) from being
- * clipped at the edge of the container. Compensated by negative margins on the
- * wrapper so the chart's visual footprint stays unchanged.
+ * Internal buffer added around the drawing area so SVG content (labels, points,
+ * ticks) drawn at the edges is not clipped. The SVG canvas is enlarged by this
+ * buffer on every side and shifted back by {@link OVERFLOW_OFFSET} so
+ * the chart's layout footprint (and the drawing area) stays exactly the
+ * consumer-provided width/height.
  */
 export const OVERFLOW_BUFFER: ChartInset = {
-  top: 50,
-  right: 50,
-  bottom: 50,
-  left: 50,
+  top: 25,
+  right: 25,
+  bottom: 25,
+  left: 25,
 };
-export const OVERFLOW_NEGATIVE_MARGIN = {
-  marginTop: -OVERFLOW_BUFFER.top,
-  marginRight: -OVERFLOW_BUFFER.right,
-  marginBottom: -OVERFLOW_BUFFER.bottom,
-  marginLeft: -OVERFLOW_BUFFER.left,
+/**
+ * Top/left offset applied to the (enlarged) SVG group so its drawing area aligns
+ * with the container's top-left. The extra width/height added to the SVG
+ * overflows symmetrically on every side via `overflow: visible`.
+ *
+ * Uses `position: relative` to keep parity with the web implementation, where a
+ * negative `margin-top` would collapse through the container instead of
+ * offsetting the SVG inside it.
+ */
+export const OVERFLOW_OFFSET = {
+  position: 'relative' as const,
+  top: -OVERFLOW_BUFFER.top,
+  left: -OVERFLOW_BUFFER.left,
 };
 export const ZERO_PADDING: ChartInset = {
   top: 0,

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

@@ -0,0 +1,90 @@
+import { describe, expect, it } from '@jest/globals';
+
+import {
+  getCategoricalScale,
+  getNumericScale,
+} from '../../utils/scales/scales';
+
+import { toScaledPoints } from './utils';
+
+const xScale = getNumericScale({
+  scaleType: 'linear',
+  domain: { min: 0, max: 7 },
+  range: { min: 0, max: 800 },
+  nice: false,
+});
+
+const yScale = getNumericScale({
+  scaleType: 'linear',
+  domain: { min: 0, max: 100 },
+  range: { min: 200, max: 0 },
+});
+
+describe('toScaledPoints', () => {
+  it('uses index as x input when no xData is provided', () => {
+    const data = [10, 50, 90];
+    const points = toScaledPoints(data, xScale, yScale);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(3);
+    expect(points![0][0]).toBe(0);
+    expect(points![1][0]).toBeCloseTo(800 / 7);
+    expect(points![2][0]).toBeCloseTo((800 / 7) * 2);
+  });
+
+  it('caps iteration to xData.length when series is longer', () => {
+    const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+    const xData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'];
+
+    const points = toScaledPoints(data, xScale, yScale, xData);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(xData.length);
+    expect(points![0][0]).toBe(0);
+    expect(points![points!.length - 1][0]).toBe(800);
+  });
+
+  it('skips null values without affecting the cap', () => {
+    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![points!.length - 1][0]).toBe((800 / 7) * 7);
+  });
+
+  it('uses numeric xData values as the x input', () => {
+    const data = [10, 20, 30];
+    const customX = [0, 3.5, 7];
+
+    const points = toScaledPoints(data, xScale, yScale, customX);
+
+    expect(points![0][0]).toBe(0);
+    expect(points![1][0]).toBeCloseTo(400);
+    expect(points![2][0]).toBe(800);
+  });
+
+  it('centers points within categorical band scales', () => {
+    const bandScale = getCategoricalScale({
+      domain: { min: 0, max: 2 },
+      range: { min: 0, max: 300 },
+      padding: 0,
+    });
+    const data = [10, 50, 90];
+
+    const points = toScaledPoints(data, bandScale, yScale);
+
+    expect(points).toHaveLength(3);
+    const bandwidth = bandScale.bandwidth();
+    expect(points![0][0]).toBe((bandScale(0) ?? 0) + bandwidth / 2);
+  });
+
+  it('returns null when fewer than 2 valid points remain', () => {
+    const data: (number | null)[] = [10, null, null];
+    const xData = ['A', 'B', 'C'];
+
+    expect(toScaledPoints(data, xScale, yScale, xData)).toBeNull();
+  });
+});

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

@@ -14,6 +14,10 @@ type Point = [x: number, y: number];
  *
  * 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.
+ *
+ * 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.
  */
 export const toScaledPoints = (
   data: (number | null)[],
@@ -22,8 +26,9 @@ export const toScaledPoints = (
   xData?: readonly (string | number)[],
 ): Point[] | null => {
   const pts: Point[] = [];
+  const limit = xData ? Math.min(data.length, xData.length) : data.length;
 
-  for (let i = 0; i < data.length; i++) {
+  for (let i = 0; i < limit; i++) {
     const value = data[i];
     if (value === null) continue;
 

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

@@ -76,6 +76,42 @@ export const WithXAxis: Story = {
   },
 };
 
+export const XAxisExplicitNumericData: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+      data: [0, 2, 4],
+    },
+  },
+};
+
+export const XAxisStringData: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+      data: ['Jan', 'Feb', 'Mar'],
+    },
+  },
+};
+
 export const WithStringLabels: Story = {
   parameters: {
     layout: 'centered',

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

@@ -2,6 +2,7 @@ import { describe, it, expect } 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 { Circle } from 'react-native-svg';
 
 import { LineChart } from './LineChart';
 
@@ -99,4 +100,159 @@ describe('LineChart', () => {
     );
     getByTestId('chart-svg');
   });
+
+  it('renders a Path for each series when multiple series are provided', () => {
+    const multipleSeries = [
+      { id: 'a', stroke: '#000', data: [10, 20, 30, 40, 50] },
+      { id: 'b', stroke: '#f00', data: [5, 15, 25, 35, 45] },
+    ];
+    const { getAllByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={multipleSeries} width={400} height={200} />
+      </LineChartWrapper>,
+    );
+    expect(getAllByTestId('line-path')).toHaveLength(2);
+  });
+
+  it('renders an area fill for each series when showArea is true', () => {
+    const multipleSeries = [
+      { id: 'a', stroke: '#000', data: [10, 20, 30, 40, 50] },
+      { id: 'b', stroke: '#f00', data: [5, 15, 25, 35, 45] },
+    ];
+    const { getAllByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={multipleSeries} width={400} height={200} showArea />
+      </LineChartWrapper>,
+    );
+    expect(getAllByTestId('line-area')).toHaveLength(2);
+  });
+
+  it('renders custom children inside the chart', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} height={200}>
+          <Circle testID='custom-child' cx={10} cy={10} r={5} />
+        </LineChart>
+      </LineChartWrapper>,
+    );
+    getByTestId('custom-child');
+  });
+
+  it('renders x-axis tick labels when showXAxis is true', () => {
+    const { getByText } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          showXAxis
+          xAxis={{ ticks: [0, 2, 4] }}
+        />
+      </LineChartWrapper>,
+    );
+    getByText('0');
+    getByText('2');
+    getByText('4');
+  });
+
+  it('renders x-axis tick labels when positioned at the top', () => {
+    const { getByText } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          showXAxis
+          xAxis={{ position: 'top', ticks: [0, 4] }}
+        />
+      </LineChartWrapper>,
+    );
+    getByText('0');
+    getByText('4');
+  });
+
+  it('renders y-axis tick labels when showYAxis is true', () => {
+    const { getByText } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          showYAxis
+          yAxis={{ ticks: [10, 50] }}
+        />
+      </LineChartWrapper>,
+    );
+    getByText('10');
+    getByText('50');
+  });
+
+  it('renders y-axis tick labels when positioned at the end', () => {
+    const { getByText } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          showYAxis
+          yAxis={{ position: 'end', ticks: [10, 50] }}
+        />
+      </LineChartWrapper>,
+    );
+    getByText('10');
+    getByText('50');
+  });
+
+  it('does not render axis tick labels by default', () => {
+    const { queryByText } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          xAxis={{ ticks: [0, 2, 4] }}
+        />
+      </LineChartWrapper>,
+    );
+    expect(queryByText('0')).toBeNull();
+    expect(queryByText('2')).toBeNull();
+    expect(queryByText('4')).toBeNull();
+  });
+
+  it('renders with scrubbing enabled', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          enableScrubbing
+        />
+      </LineChartWrapper>,
+    );
+    getByTestId('chart-svg');
+  });
+
+  it('renders with a custom inset', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart
+          series={sampleSeries}
+          width={400}
+          height={200}
+          inset={{ top: 10, bottom: 10, left: 20, right: 20 }}
+        />
+      </LineChartWrapper>,
+    );
+    expect(getByTestId('line-path')).toBeTruthy();
+  });
+
+  it('uses the default height when none is provided', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} />
+      </LineChartWrapper>,
+    );
+    getByTestId('chart-svg');
+  });
 });

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

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
 
-import type { AxisConfigProps, ChartInset } from '../../utils/types';
+import type { ChartInset } from '../../utils/types';
+import { defaultXAxisProps, defaultYAxisProps } from '../Axis';
 import { DEFAULT_AXIS_HEIGHT, XAxis } from '../Axis/XAxis';
-import { DEFAULT_AXIS_WIDTH, YAxis } from '../Axis/YAxis';
+import { YAxis } from '../Axis/YAxis';
 import { CartesianChart } from '../CartesianChart';
 import { Line } from '../Line';
 
@@ -23,52 +24,40 @@ export const LineChart = ({
   enableScrubbing = false,
   onScrubberPositionChange,
   animate,
+  magnetRadius,
 }: LineChartProps) => {
-  const {
-    scaleType: xScaleType,
-    data: xData,
-    domain: xDomain,
-    ...xAxisVisualProps
-  } = xAxis ?? {};
-
-  const {
-    scaleType: yScaleType,
-    data: yData,
-    domain: yDomain,
-    ...yAxisVisualProps
-  } = yAxis ?? {};
-
-  const xAxisConfig: Partial<AxisConfigProps> = {
-    scaleType: xScaleType,
-    data: xData,
-    domain: xDomain,
+  const xAxisConfig = {
+    ...defaultXAxisProps,
+    ...xAxis,
   };
-
-  const yAxisConfig: Partial<AxisConfigProps> = {
-    scaleType: yScaleType,
-    data: yData,
-    domain: yDomain,
+  const yAxisConfig = {
+    ...defaultYAxisProps,
+    ...yAxis,
   };
 
   const axisPadding: Partial<ChartInset> | undefined = useMemo(() => {
-    if (!showXAxis && !showYAxis) return undefined;
-    const xAxisPosition =
-      xAxisVisualProps.position === 'top' ? 'top' : 'bottom';
-    const yAxisPosition =
-      yAxisVisualProps.position === 'end' ? 'right' : 'left';
-    const yAxisWidth = yAxisVisualProps.width ?? DEFAULT_AXIS_WIDTH;
+    if (!showXAxis && !showYAxis) {
+      return undefined;
+    }
+
     return {
-      top: showXAxis && xAxisPosition === 'top' ? DEFAULT_AXIS_HEIGHT : 0,
-      bottom: showXAxis && xAxisPosition === 'bottom' ? DEFAULT_AXIS_HEIGHT : 0,
-      left: showYAxis && yAxisPosition === 'left' ? yAxisWidth : 0,
-      right: showYAxis && yAxisPosition === 'right' ? yAxisWidth : 0,
+      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,
-    xAxisVisualProps.position,
-    yAxisVisualProps.position,
-    yAxisVisualProps.width,
+    xAxisConfig?.position,
+    yAxisConfig?.position,
+    yAxisConfig?.width,
   ]);
 
   return (
@@ -83,9 +72,10 @@ export const LineChart = ({
       enableScrubbing={enableScrubbing}
       onScrubberPositionChange={onScrubberPositionChange}
       animate={animate}
+      magnetRadius={magnetRadius}
     >
-      {showXAxis && <XAxis {...xAxisVisualProps} />}
-      {showYAxis && <YAxis {...yAxisVisualProps} />}
+      {showXAxis && <XAxis {...xAxisConfig} />}
+      {showYAxis && <YAxis {...yAxisConfig} />}
       {series?.map((s) => (
         <Line
           key={s.id}

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 
-import type { AxisConfigProps, ChartInset, Series } from '../../utils/types';
+import type { ChartInset, Series } from '../../utils/types';
 import type { XAxisProps } from '../Axis/XAxis';
 import type { YAxisProps } from '../Axis/YAxis';
 
@@ -35,12 +35,12 @@ export type LineChartProps = {
    * Combined axis configuration and visual props for the x-axis.
    * Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
    */
-  xAxis?: Partial<AxisConfigProps> & XAxisProps;
+  xAxis?: XAxisProps;
   /**
    * Combined axis configuration and visual props for the y-axis.
    * Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
    */
-  yAxis?: Partial<AxisConfigProps> & YAxisProps;
+  yAxis?: YAxisProps;
   /**
    * Width of the chart in pixels.
    * When omitted, the component auto-measures via `onLayout`.
@@ -76,4 +76,11 @@ export type LineChartProps = {
    * @default true
    */
   animate?: boolean;
+  /**
+   * Pixel radius within which the scrubber magnetically snaps to registered
+   * magnetic `<Point>` components. Requires `enableScrubbing` to be `true`.
+   * Set to `0` to disable magnetisation.
+   * @default 6
+   */
+  magnetRadius?: number;
 };

package/src/lib/Components/Point/Point.tsx

@@ -5,15 +5,16 @@ import { Circle, G, Polygon, Text as SvgText } from 'react-native-svg';
 import { projectPoint } from '../../utils/scales/scales';
 import { useCartesianChartContext } from '../CartesianChart/context';
 import { useRevealClip } from '../CartesianChart/RevealClip';
+import { DEFAULT_SIZE, STROKE_WIDTH } from './constants';
+import { useMagneticPointsContext } from './pointContext';
 
 import type { PointLabelProps, PointProps } from './types';
 import {
   buildArrowPoints,
   computeLabelY,
-  DEFAULT_SIZE,
   isWithinBounds,
   resolveLabel,
-  STROKE_WIDTH,
+  useMagneticRegistration,
 } from './utils';
 
 export function PointLabel({
@@ -45,9 +46,14 @@ export function Point({
   showLabelArrow = true,
   size = DEFAULT_SIZE,
   onPress,
+  magnetic = false,
 }: Readonly<PointProps>) {
-  const { getXScale, getYScale, drawingArea } = useCartesianChartContext();
+  const { getXScale, getYScale, getXAxisConfig, drawingArea } =
+    useCartesianChartContext();
   const clipPath = useRevealClip();
+  const magneticContext = useMagneticPointsContext();
+
+  useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticContext);
   const { theme } = useTheme();
 
   const xScale = getXScale();

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

@@ -0,0 +1,6 @@
+export const DEFAULT_SIZE = 10;
+export const STROKE_WIDTH = 2;
+export const LABEL_FONT_SIZE = 10;
+export const ARROW_WIDTH = 6;
+export const ARROW_HEIGHT = 4;
+export const GAP = 4;