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

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;
 };

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

@@ -1,14 +1,14 @@
-import { describe, expect, it } from '@jest/globals';
+import { describe, expect, it, jest } from '@jest/globals';
+import { renderHook } from '@testing-library/react-native';
 
+import type { BaseAxisProps } from '../Axis';
+import { ARROW_HEIGHT, ARROW_WIDTH, GAP, LABEL_FONT_SIZE } from './constants';
 import {
-  ARROW_HEIGHT,
-  ARROW_WIDTH,
   buildArrowPoints,
   computeLabelY,
-  GAP,
   isWithinBounds,
-  LABEL_FONT_SIZE,
   resolveLabel,
+  useMagneticRegistration,
 } from './utils';
 
 describe('isWithinBounds', () => {
@@ -116,3 +116,93 @@ describe('computeLabelY', () => {
     expect(result).toBe(pixelY + radius + GAP + GAP + LABEL_FONT_SIZE);
   });
 });
+
+const makeContext = () => ({
+  register: jest.fn(),
+  unregister: jest.fn(),
+  version: 0,
+  getMagneticPoints: () => new Set<number>(),
+});
+
+const noAxisConfig = (): BaseAxisProps | undefined => undefined;
+
+describe('useMagneticRegistration', () => {
+  it('registers the data index when magnetic is true', () => {
+    const ctx = makeContext();
+    renderHook(() => useMagneticRegistration(true, 3, noAxisConfig, ctx));
+
+    expect(ctx.register).toHaveBeenCalledWith(3);
+  });
+
+  it('does not register when magnetic is false', () => {
+    const ctx = makeContext();
+    renderHook(() => useMagneticRegistration(false, 3, noAxisConfig, ctx));
+
+    expect(ctx.register).not.toHaveBeenCalled();
+  });
+
+  it('unregisters on unmount', () => {
+    const ctx = makeContext();
+    const { unmount } = renderHook(() =>
+      useMagneticRegistration(true, 3, noAxisConfig, ctx),
+    );
+
+    unmount();
+    expect(ctx.unregister).toHaveBeenCalledWith(3);
+  });
+
+  it('resolves dataX through axis config data when provided', () => {
+    const ctx = makeContext();
+    const getXAxisConfig = (): BaseAxisProps => ({
+      scaleType: 'band',
+      data: [100, 200, 300],
+    });
+
+    renderHook(() => useMagneticRegistration(true, 200, getXAxisConfig, ctx));
+
+    expect(ctx.register).toHaveBeenCalledWith(1);
+  });
+
+  it('does not register when axis data exists but does not contain the value', () => {
+    const ctx = makeContext();
+    const getXAxisConfig = (): BaseAxisProps => ({
+      scaleType: 'band',
+      data: [100, 200, 300],
+    });
+
+    renderHook(() => useMagneticRegistration(true, 999, getXAxisConfig, ctx));
+
+    expect(ctx.register).not.toHaveBeenCalled();
+  });
+
+  it('re-registers when dataX changes', () => {
+    const ctx = makeContext();
+    const { rerender } = renderHook(
+      ({ dataX }: { dataX: number }) =>
+        useMagneticRegistration(true, dataX, noAxisConfig, ctx),
+      { initialProps: { dataX: 2 } },
+    );
+
+    expect(ctx.register).toHaveBeenCalledWith(2);
+
+    rerender({ dataX: 4 });
+
+    expect(ctx.unregister).toHaveBeenCalledWith(2);
+    expect(ctx.register).toHaveBeenCalledWith(4);
+  });
+
+  it('unregisters and stops when magnetic switches to false', () => {
+    const ctx = makeContext();
+    const { rerender } = renderHook(
+      ({ magnetic }: { magnetic: boolean }) =>
+        useMagneticRegistration(magnetic, 3, noAxisConfig, ctx),
+      { initialProps: { magnetic: true } },
+    );
+
+    expect(ctx.register).toHaveBeenCalledWith(3);
+
+    rerender({ magnetic: false });
+
+    expect(ctx.unregister).toHaveBeenCalledWith(3);
+  });
+});

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

@@ -1,11 +1,9 @@
-import type { DrawingArea } from '../../utils/types';
+import { useEffect } from 'react';
 
-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;
+import type { DrawingArea } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
+import { LABEL_FONT_SIZE, ARROW_WIDTH, ARROW_HEIGHT, GAP } from './constants';
+import type { MagneticPointsContextValue } from './pointContext/magneticPointsContext';
 
 export const isWithinBounds = (
   px: number,
@@ -53,6 +51,36 @@ export const resolveLabel = (
   return resolved === '' ? undefined : resolved;
 };
 
+export const resolveDataXToIndex = (
+  dataX: number,
+  axisConfig: BaseAxisProps | undefined,
+): number | undefined => {
+  const axisData = axisConfig?.data;
+  if (!axisData || typeof axisData[0] !== 'number') return dataX;
+  const index = (axisData as number[]).indexOf(dataX);
+  if (index === -1) return undefined;
+  return index;
+};
+
+/**
+ * Registers/unregisters a data index as a magnetic snap target
+ * when the Point has `magnetic` enabled.
+ */
+export const useMagneticRegistration = (
+  magnetic: boolean,
+  dataX: number,
+  getXAxisConfig: () => BaseAxisProps | undefined,
+  { register, unregister }: MagneticPointsContextValue,
+): void => {
+  useEffect(() => {
+    if (!magnetic) return;
+    const index = resolveDataXToIndex(dataX, getXAxisConfig());
+    if (index === undefined) return;
+    register(index);
+    return () => unregister(index);
+  }, [magnetic, dataX, getXAxisConfig, register, unregister]);
+};
+
 /**
  * Computes the vertical position of the label text baseline.
  */

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

@@ -1,9 +1,6 @@
 import { getPointOnScale, isCategoricalScale } from '../../utils/scales/scales';
-import type {
-  AxisConfigProps,
-  ChartScaleFunction,
-  DrawingArea,
-} from '../../utils/types';
+import type { ChartScaleFunction, DrawingArea } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
 
 import type { LabelAlignment, LabelPosition } from './types';
 
@@ -28,7 +25,7 @@ type ResolvePixelParams = {
   scale: ChartScaleFunction | undefined;
   axis: 'x' | 'y';
   drawingArea: DrawingArea;
-  axisConfig?: AxisConfigProps;
+  axisConfig?: BaseAxisProps;
 };
 
 type LabelParams = {
@@ -95,7 +92,7 @@ export const isPixelWithinDrawingArea = (
  */
 const resolveDataValue = (
   index: number,
-  axisConfig?: AxisConfigProps,
+  axisConfig?: BaseAxisProps,
 ): number | undefined => {
   const data = axisConfig?.data;
   if (!data || data.length === 0) return index;

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

@@ -31,7 +31,7 @@ export const ChartTooltipItem = memo(function ChartTooltipItem({
         textAnchor='start'
         alignmentBaseline='central'
         fill={theme.colors.text.muted}
-        fontSize={theme.typographies.body4.fontSize}
+        fontSize={theme.typographies.body3.fontSize}
         fontFamily={theme.fontFamilies.sans}
       >
         {String(label)}
@@ -43,8 +43,8 @@ export const ChartTooltipItem = memo(function ChartTooltipItem({
         textAnchor='end'
         alignmentBaseline='central'
         fill={theme.colors.text.base}
-        fontSize={theme.typographies.body4.fontSize}
-        fontWeight={theme.typographies.body4.fontWeight}
+        fontSize={theme.typographies.body3SemiBold.fontSize}
+        fontWeight={theme.typographies.body3SemiBold.fontWeight}
         fontFamily={theme.fontFamilies.sans}
       >
         {String(value)}

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

@@ -148,7 +148,7 @@ describe('DefaultScrubberTooltip', () => {
         scrubberProps: { tooltip: defaultTooltip },
         scrubberContext: scrubberAt(2),
       });
-      expect(getByTestId('chart-tooltip-rect').props.x).toBe(210);
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(235);
     });
 
     it('flips tooltip left when right side would overflow (index 3)', () => {
@@ -158,7 +158,7 @@ describe('DefaultScrubberTooltip', () => {
         },
         scrubberContext: scrubberAt(3),
       });
-      expect(getByTestId('chart-tooltip-rect').props.x).toBe(145);
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(195);
     });
 
     it('flips at the rightmost scrubber position (index 4)', () => {
@@ -168,7 +168,7 @@ describe('DefaultScrubberTooltip', () => {
         },
         scrubberContext: scrubberAt(4),
       });
-      expect(getByTestId('chart-tooltip-rect').props.x).toBe(220);
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(295);
     });
 
     it('custom offset shifts the no-flip tooltip position', () => {
@@ -178,7 +178,7 @@ describe('DefaultScrubberTooltip', () => {
         },
         scrubberContext: scrubberAt(2),
       });
-      expect(getByTestId('chart-tooltip-rect').props.x).toBe(220);
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(245);
     });
 
     it('wider minWidth can trigger a flip that the default width would not', () => {
@@ -188,7 +188,7 @@ describe('DefaultScrubberTooltip', () => {
         },
         scrubberContext: scrubberAt(2),
       });
-      expect(getByTestId('chart-tooltip-rect').props.x).toBe(50);
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(25);
     });
   });
 

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

@@ -4,7 +4,6 @@ import { G, Rect, Text as SvgText } from 'react-native-svg';
 import type { ScrubberTooltipProps } from '../types';
 import { ChartTooltipItem } from './ChartTooltipItem';
 import {
-  BORDER_RADIUS,
   DEFAULT_OFFSET,
   DEFAULT_TOOLTIP_MIN_WIDTH,
   PADDING_X,
@@ -68,7 +67,7 @@ export function DefaultScrubberTooltip({
         y={drawingArea.y}
         width={tooltipWidth}
         height={tooltipHeight}
-        rx={BORDER_RADIUS}
+        rx={theme.borderRadius.sm}
         fill={theme.colors.bg.muted}
       />
       {hasTitle && (
@@ -80,9 +79,9 @@ export function DefaultScrubberTooltip({
           x={tooltipX + PADDING_X}
           y={drawingArea.y + PADDING_Y + ROW_HEIGHT / 2}
           alignmentBaseline='central'
-          fill={theme.colors.text.base}
-          fontSize={theme.typographies.body4.fontSize}
-          fontWeight={theme.typographies.body4.fontWeight}
+          fill={theme.colors.text.muted}
+          fontSize={theme.typographies.body3.fontSize}
+          fontWeight={theme.typographies.body3.fontWeight}
           fontFamily={theme.fontFamilies.sans}
         >
           {String(title)}

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

@@ -3,7 +3,6 @@ export const DEFAULT_TOOLTIP_MIN_WIDTH = 80;
 export const PADDING_X = 8;
 export const PADDING_Y = 8;
 export const ROW_HEIGHT = 16;
-export const ROW_GAP = 6;
+export const ROW_GAP = 4;
 export const TITLE_GAP = 6;
-export const BORDER_RADIUS = 4;
 export const LABEL_VALUE_GAP = 12;

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

@@ -192,7 +192,7 @@ describe('measureWidths', () => {
       titleRef,
       labelRefs,
       valueRefs,
-    );
+    ).promise;
 
     expect(result).toEqual({ title: 50, labels: [30], values: [20] });
     raf.mockRestore();
@@ -212,7 +212,7 @@ describe('measureWidths', () => {
       titleRef,
       labelRefs,
       valueRefs,
-    );
+    ).promise;
 
     expect(result.title).toBe(0);
     raf.mockRestore();
@@ -235,7 +235,7 @@ describe('measureWidths', () => {
       titleRef,
       labelRefs,
       valueRefs,
-    );
+    ).promise;
 
     expect(result.labels).toEqual([10, 20]);
     expect(result.values).toEqual([5, 15]);
@@ -256,7 +256,7 @@ describe('measureWidths', () => {
       titleRef,
       labelRefs,
       valueRefs,
-    );
+    ).promise;
 
     expect(result).toEqual({ title: 0, labels: [0], values: [0] });
     raf.mockRestore();

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

@@ -107,29 +107,41 @@ export const computeItemsBaseY = (
   return drawingAreaY + PADDING_Y + titleBlockHeight;
 };
 
-const waitForAnimationFrame = (): Promise<void> =>
-  new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+const waitForAnimationFrame = (): {
+  promise: Promise<void>;
+  cancel: () => void;
+} => {
+  let id: number;
+  const promise = new Promise<void>((resolve) => {
+    id = requestAnimationFrame(() => resolve());
+  });
+  return { promise, cancel: () => cancelAnimationFrame(id) };
+};
 
 /**
  * Reads the rendered widths of all tooltip text elements via async `getBBox`.
  * Defers until the next animation frame so layout has settled.
+ * Returns a cancel function so callers can abort the pending RAF.
  */
-export const measureWidths = async (
+export const measureWidths = (
   items: ChartTooltipItemData[],
   hasTitle: boolean,
   titleRef: RefObject<SvgBBoxElement | null>,
   labelRefs: RefObject<(SvgBBoxElement | null)[]>,
   valueRefs: RefObject<(SvgBBoxElement | null)[]>,
-): Promise<Widths> => {
-  await waitForAnimationFrame();
-  const title = hasTitle ? await safeGetBBoxWidth(titleRef.current) : 0;
-  const labels = await Promise.all(
-    items.map((_, i) => safeGetBBoxWidth(labelRefs.current[i])),
-  );
-  const values = await Promise.all(
-    items.map((_, i) => safeGetBBoxWidth(valueRefs.current[i])),
-  );
-  return { title, labels, values };
+): { promise: Promise<Widths>; cancel: () => void } => {
+  const raf = waitForAnimationFrame();
+  const promise = raf.promise.then(async () => {
+    const title = hasTitle ? await safeGetBBoxWidth(titleRef.current) : 0;
+    const labels = await Promise.all(
+      items.map((_, i) => safeGetBBoxWidth(labelRefs.current[i])),
+    );
+    const values = await Promise.all(
+      items.map((_, i) => safeGetBBoxWidth(valueRefs.current[i])),
+    );
+    return { title, labels, values };
+  });
+  return { promise, cancel: raf.cancel };
 };
 
 /**
@@ -186,18 +198,20 @@ export function useTooltipMeasurement(
 
     let cancelled = false;
 
-    void measureWidths(
+    const { promise, cancel } = measureWidths(
       itemsRef.current,
       hasTitleRef.current,
       titleRef,
       labelRefs,
       valueRefs,
-    ).then((result) => {
+    );
+    void promise.then((result) => {
       if (!cancelled) setWidths(result);
     });
 
     return () => {
       cancelled = true;
+      cancel();
     };
   }, [shapeKey]);