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

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;

package/src/lib/Components/Point/pointContext/MagneticPointsProvider.test.tsx

@@ -0,0 +1,162 @@
+import { describe, expect, it } from '@jest/globals';
+import { renderHook, act } from '@testing-library/react-native';
+import type { ReactNode } from 'react';
+
+import { useMagneticPointsContext } from './magneticPointsContext';
+import { MagneticPointsProvider } from './MagneticPointsProvider';
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+  <MagneticPointsProvider>{children}</MagneticPointsProvider>
+);
+
+describe('MagneticPointsProvider', () => {
+  it('starts with an empty set', () => {
+    const { result } = renderHook(() => useMagneticPointsContext(), {
+      wrapper,
+    });
+    expect(result.current.getMagneticPoints().size).toBe(0);
+  });
+
+  it('registers a magnetic point', () => {
+    const { result } = renderHook(() => useMagneticPointsContext(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.register(3);
+    });
+
+    expect(result.current.getMagneticPoints().has(3)).toBe(true);
+    expect(result.current.getMagneticPoints().size).toBe(1);
+  });
+
+  it('registers multiple magnetic points', () => {
+    const { result } = renderHook(() => useMagneticPointsContext(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.register(2);
+      result.current.register(7);
+    });
+
+    const points = result.current.getMagneticPoints();
+    expect(points.has(2)).toBe(true);
+    expect(points.has(7)).toBe(true);
+    expect(points.size).toBe(2);
+  });
+
+  it('unregisters a magnetic point', () => {
+    const { result } = renderHook(() => useMagneticPointsContext(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.register(5);
+      result.current.register(8);
+    });
+
+    act(() => {
+      result.current.unregister(5);
+    });
+
+    const points = result.current.getMagneticPoints();
+    expect(points.has(5)).toBe(false);
+    expect(points.has(8)).toBe(true);
+    expect(points.size).toBe(1);
+  });
+
+  it('handles duplicate registrations gracefully', () => {
+    const { result } = renderHook(() => useMagneticPointsContext(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.register(4);
+      result.current.register(4);
+    });
+
+    expect(result.current.getMagneticPoints().size).toBe(1);
+  });
+
+  it('handles unregistering a non-existent point gracefully', () => {
+    const { result } = renderHook(() => useMagneticPointsContext(), {
+      wrapper,
+    });
+
+    act(() => {
+      result.current.unregister(99);
+    });
+
+    expect(result.current.getMagneticPoints().size).toBe(0);
+  });
+
+  describe('version counter', () => {
+    it('starts at 0', () => {
+      const { result } = renderHook(() => useMagneticPointsContext(), {
+        wrapper,
+      });
+      expect(result.current.version).toBe(0);
+    });
+
+    it('increments on register', () => {
+      const { result } = renderHook(() => useMagneticPointsContext(), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.register(1);
+      });
+
+      expect(result.current.version).toBe(1);
+    });
+
+    it('increments on unregister', () => {
+      const { result } = renderHook(() => useMagneticPointsContext(), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.register(1);
+      });
+
+      act(() => {
+        result.current.unregister(1);
+      });
+
+      expect(result.current.version).toBe(2);
+    });
+
+    it('does not increment on duplicate register', () => {
+      const { result } = renderHook(() => useMagneticPointsContext(), {
+        wrapper,
+      });
+
+      act(() => {
+        result.current.register(5);
+      });
+
+      const versionAfterFirst = result.current.version;
+
+      act(() => {
+        result.current.register(5);
+      });
+
+      expect(result.current.version).toBe(versionAfterFirst);
+    });
+
+    it('does not increment when unregistering a non-existent point', () => {
+      const { result } = renderHook(() => useMagneticPointsContext(), {
+        wrapper,
+      });
+
+      const versionBefore = result.current.version;
+
+      act(() => {
+        result.current.unregister(99);
+      });
+
+      expect(result.current.version).toBe(versionBefore);
+    });
+  });
+});

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

@@ -0,0 +1,45 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+
+import {
+  MagneticPointsContextProvider,
+  type MagneticPointsContextValue,
+} from './magneticPointsContext';
+
+type MagneticPointsProviderProps = {
+  children: ReactNode;
+};
+
+export function MagneticPointsProvider({
+  children,
+}: Readonly<MagneticPointsProviderProps>) {
+  const pointsRef = useRef(new Set<number>());
+  const [version, setVersion] = useState(0);
+
+  const register = useCallback((dataIndex: number): void => {
+    if (pointsRef.current.has(dataIndex)) return;
+    pointsRef.current.add(dataIndex);
+    setVersion((v) => v + 1);
+  }, []);
+
+  const unregister = useCallback((dataIndex: number): void => {
+    if (!pointsRef.current.has(dataIndex)) return;
+    pointsRef.current.delete(dataIndex);
+    setVersion((v) => v + 1);
+  }, []);
+
+  const getMagneticPoints = useCallback((): ReadonlySet<number> => {
+    return pointsRef.current;
+  }, []);
+
+  const value: MagneticPointsContextValue = useMemo(
+    () => ({ register, unregister, getMagneticPoints, version }),
+    [register, unregister, getMagneticPoints, version],
+  );
+
+  return (
+    <MagneticPointsContextProvider value={value}>
+      {children}
+    </MagneticPointsContextProvider>
+  );
+}

package/src/lib/Components/Point/pointContext/index.ts

@@ -0,0 +1,5 @@
+export {
+  useMagneticPointsContext,
+  type MagneticPointsContextValue,
+} from './magneticPointsContext';
+export { MagneticPointsProvider } from './MagneticPointsProvider';

package/src/lib/Components/Point/pointContext/magneticPointsContext.ts

@@ -0,0 +1,19 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+
+export type MagneticPointsContextValue = {
+  register: (dataIndex: number) => void;
+  unregister: (dataIndex: number) => void;
+  version: number;
+  getMagneticPoints: () => ReadonlySet<number>;
+};
+
+const [MagneticPointsContextProvider, _useMagneticPointsSafeContext] =
+  createSafeContext<MagneticPointsContextValue>('MagneticPoints');
+
+export const useMagneticPointsContext = (): MagneticPointsContextValue =>
+  _useMagneticPointsSafeContext({
+    consumerName: 'useMagneticPointsContext',
+    contextRequired: true,
+  });
+
+export { MagneticPointsContextProvider };

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

@@ -73,4 +73,11 @@ export type PointProps = {
    * Called when the point is pressed.
    */
   onPress?: (event: GestureResponderEvent) => void;
+  /**
+   * When `true`, the scrubber magnetically snaps to this point within the
+   * chart's `magnetRadius`. Requires `enableScrubbing` to be set on the
+   * parent chart.
+   * @default false
+   */
+  magnetic?: boolean;
 };