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

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

@@ -5,9 +5,15 @@ import Animated, { useSharedValue } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 
 import { useCartesianChartContext } from '../CartesianChart/context';
+import { useMagneticPointsContext } from '../Point/pointContext';
 import { ScrubberContextProvider } from './context';
 import type { ScrubberProviderProps } from './types';
-import { getDataIndexFromPosition } from './utils';
+import {
+  applyMagnetisation,
+  getDataIndexFromPosition,
+  resolvePixelX,
+  buildSortedMagnets,
+} from './utils';
 
 const LONG_PRESS_MIN_DURATION_MS = 50;
 
@@ -30,29 +36,46 @@ export function ScrubberProvider({
   height,
   enableScrubbing,
   onScrubberPositionChange,
+  magnetRadius = 6,
+  style,
 }: Readonly<ScrubberProviderProps>) {
   const [scrubberPosition, setScrubberPosition] = useState<
     number | undefined
   >();
 
   const { getXScale, getXAxisConfig, dataLength } = useCartesianChartContext();
+  const { getMagneticPoints, version } = useMagneticPointsContext();
 
   // All values touched by the gesture's JS-thread callback live in a single
   // ref. Reading via `latest.current` keeps the callbacks reference-stable
   // across data, scale, and prop updates, which in turn keeps `composed` and
   // the gesture surface JSX stable so re-rendering the provider on each
   // index change never tears down the GestureDetector or the View tree.
+  const sortedMagnets = useMemo(() => {
+    const magneticIndices = getMagneticPoints();
+    return buildSortedMagnets({
+      magneticIndices,
+      getPixelForIndex: (index) =>
+        resolvePixelX(index, getXScale, getXAxisConfig()),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [version, getXScale, getXAxisConfig, getMagneticPoints]);
+
   const latest = useRef({
     getXScale,
     getXAxisConfig,
     dataLength,
     onChange: onScrubberPositionChange,
     lastIndex: undefined as number | undefined,
+    magnetRadius,
+    sortedMagnets,
   });
   latest.current.getXScale = getXScale;
   latest.current.getXAxisConfig = getXAxisConfig;
   latest.current.dataLength = dataLength;
   latest.current.onChange = onScrubberPositionChange;
+  latest.current.magnetRadius = magnetRadius;
+  latest.current.sortedMagnets = sortedMagnets;
 
   const setScrubberPositionAndNotify = useCallback(
     (index: number | undefined) => {
@@ -78,12 +101,25 @@ export function ScrubberProvider({
       const ref = latest.current;
       const scale = ref.getXScale();
       if (!scale || ref.dataLength <= 0) return;
-      const index = getDataIndexFromPosition(
+
+      const xAxisConfig = ref.getXAxisConfig();
+
+      let index = getDataIndexFromPosition(
         pixelX,
         scale,
-        ref.getXAxisConfig(),
+        xAxisConfig,
         ref.dataLength,
       );
+
+      if (ref.magnetRadius > 0) {
+        index = applyMagnetisation({
+          resolvedIndex: index,
+          pixelX,
+          sortedMagnets: ref.sortedMagnets,
+          magnetRadius: ref.magnetRadius,
+        });
+      }
+
       setScrubberPositionAndNotify(index);
     },
     [setScrubberPositionAndNotify],
@@ -128,7 +164,7 @@ export function ScrubberProvider({
   // context as expected.
   const surface = useMemo(
     () => (
-      <View style={{ width, height }}>
+      <View style={[{ width, height }, style]}>
         {children}
         {enableScrubbing && (
           <GestureDetector gesture={composed}>
@@ -140,7 +176,7 @@ export function ScrubberProvider({
         )}
       </View>
     ),
-    [width, height, children, enableScrubbing, composed],
+    [width, height, style, children, enableScrubbing, composed],
   );
 
   const contextValue = useMemo(

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { DrawingArea } from '../../utils/types';
 
@@ -35,6 +36,18 @@ export type ScrubberProviderProps = {
    * Optional external callback fired whenever the scrubber position changes.
    */
   onScrubberPositionChange?: (index: number | undefined) => void;
+  /**
+   * Pixel radius within which the scrubber magnetically snaps to registered
+   * magnetic points. Set to `0` to disable magnetisation.
+   * @default 6
+   */
+  magnetRadius?: number;
+  /**
+   * Optional style applied to the wrapping `View` that holds the chart and the
+   * gesture overlay.Used to offset the(enlarged) SVG group so its drawing area
+   * aligns with the container footprint.
+   */
+  style?: StyleProp<ViewStyle>;
 };
 
 export type ChartTooltipItemData = {

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

@@ -5,10 +5,14 @@ import {
   getNumericScale,
 } from '../../utils/scales/scales';
 import {
+  applyMagnetisation,
+  buildSortedMagnets,
   getDataIndexFromPosition,
+  nearestIndex,
   resolvePixelX,
   resolvePixelY,
 } from './utils';
+import type { MagnetEntry } from './utils';
 
 describe('getDataIndexFromPosition', () => {
   describe('with a categorical (band) scale', () => {
@@ -170,3 +174,149 @@ describe('resolvePixelY', () => {
     expect(result).toBe(scale(50));
   });
 });
+
+describe('buildSortedMagnets', () => {
+  it('returns an empty array when the set is empty', () => {
+    const result = buildSortedMagnets({
+      magneticIndices: new Set(),
+      getPixelForIndex: () => 0,
+    });
+    expect(result).toEqual([]);
+  });
+
+  it('returns entries sorted by pixelX', () => {
+    const result = buildSortedMagnets({
+      magneticIndices: new Set([3, 1, 2]),
+      getPixelForIndex: (i) => i * 50,
+    });
+    expect(result).toEqual([
+      { index: 1, pixelX: 50 },
+      { index: 2, pixelX: 100 },
+      { index: 3, pixelX: 150 },
+    ]);
+  });
+
+  it('filters out indices where getPixelForIndex returns undefined', () => {
+    const result = buildSortedMagnets({
+      magneticIndices: new Set([0, 1, 2]),
+      getPixelForIndex: (i) => (i === 1 ? undefined : i * 100),
+    });
+    expect(result).toEqual([
+      { index: 0, pixelX: 0 },
+      { index: 2, pixelX: 200 },
+    ]);
+  });
+
+  it('returns an empty array when all indices resolve to undefined', () => {
+    const result = buildSortedMagnets({
+      magneticIndices: new Set([0, 1]),
+      getPixelForIndex: () => undefined,
+    });
+    expect(result).toEqual([]);
+  });
+});
+
+describe('nearestIndex', () => {
+  const magnets = (...pixelXs: number[]): MagnetEntry[] =>
+    pixelXs.map((px, i) => ({ index: i, pixelX: px }));
+
+  it('returns -1 for an empty array', () => {
+    expect(nearestIndex([], 100)).toBe(-1);
+  });
+
+  it('returns 0 for a single-element array', () => {
+    expect(nearestIndex(magnets(200), 100)).toBe(0);
+  });
+
+  it('returns the index of the exact match', () => {
+    expect(nearestIndex(magnets(100, 200, 300), 200)).toBe(1);
+  });
+
+  it('returns the closer index when target is between two values', () => {
+    expect(nearestIndex(magnets(100, 200), 160)).toBe(1);
+    expect(nearestIndex(magnets(100, 200), 140)).toBe(0);
+  });
+
+  it('favors the left index when equidistant', () => {
+    expect(nearestIndex(magnets(100, 200), 150)).toBe(0);
+  });
+
+  it('returns the last index when target is beyond all values', () => {
+    expect(nearestIndex(magnets(100, 200), 500)).toBe(1);
+  });
+
+  it('returns the first index when target is before all values', () => {
+    expect(nearestIndex(magnets(100, 200), 0)).toBe(0);
+  });
+});
+
+describe('applyMagnetisation', () => {
+  const toMagnets = (...indices: number[]): MagnetEntry[] =>
+    indices.map((i) => ({ index: i, pixelX: i * 100 }));
+
+  it('returns resolvedIndex when sortedMagnets is empty', () => {
+    expect(
+      applyMagnetisation({
+        resolvedIndex: 2,
+        pixelX: 200,
+        sortedMagnets: [],
+        magnetRadius: 30,
+      }),
+    ).toBe(2);
+  });
+
+  it('returns resolvedIndex when magnetRadius is 0', () => {
+    expect(
+      applyMagnetisation({
+        resolvedIndex: 1,
+        pixelX: 200,
+        sortedMagnets: toMagnets(2),
+        magnetRadius: 0,
+      }),
+    ).toBe(1);
+  });
+
+  it('returns resolvedIndex when nearest magnet is outside radius', () => {
+    expect(
+      applyMagnetisation({
+        resolvedIndex: 2,
+        pixelX: 200,
+        sortedMagnets: toMagnets(0, 4),
+        magnetRadius: 30,
+      }),
+    ).toBe(2);
+  });
+
+  it('snaps to nearest magnet when within radius', () => {
+    expect(
+      applyMagnetisation({
+        resolvedIndex: 2,
+        pixelX: 280,
+        sortedMagnets: toMagnets(3),
+        magnetRadius: 30,
+      }),
+    ).toBe(3);
+  });
+
+  it('snaps at the exact boundary of magnetRadius', () => {
+    expect(
+      applyMagnetisation({
+        resolvedIndex: 2,
+        pixelX: 270,
+        sortedMagnets: toMagnets(3),
+        magnetRadius: 30,
+      }),
+    ).toBe(3);
+  });
+
+  it('does not snap when distance exceeds magnetRadius by 1', () => {
+    expect(
+      applyMagnetisation({
+        resolvedIndex: 2,
+        pixelX: 269,
+        sortedMagnets: toMagnets(3),
+        magnetRadius: 30,
+      }),
+    ).toBe(2);
+  });
+});

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

@@ -4,10 +4,15 @@ import {
   isNumericScale,
 } from '../../utils/scales/scales';
 import type {
-  AxisConfigProps,
   CartesianChartContextValue,
   ChartScaleFunction,
 } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
+
+export type MagnetEntry = {
+  index: number;
+  pixelX: number;
+};
 
 const isNumberArray = (arr: string[] | number[]): arr is number[] =>
   typeof arr[0] === 'number';
@@ -49,7 +54,7 @@ const findClosestIndex = (
 export const getDataIndexFromPosition = (
   pixelX: number,
   scale: ChartScaleFunction,
-  axisConfig: Partial<AxisConfigProps> | undefined,
+  axisConfig: Partial<BaseAxisProps> | undefined,
   dataLength: number,
 ): number => {
   if (dataLength <= 0) return 0;
@@ -116,7 +121,7 @@ export const resolvePixelY = (
 export const resolvePixelX = (
   dataIndex: number,
   getXScale: CartesianChartContextValue['getXScale'],
-  axisConfig?: AxisConfigProps,
+  axisConfig?: BaseAxisProps,
 ): number | undefined => {
   const scale = getXScale();
   if (!scale) return undefined;
@@ -124,3 +129,88 @@ export const resolvePixelX = (
   const xValue = typeof axisValue === 'number' ? axisValue : dataIndex;
   return getPointOnScale(xValue, scale);
 };
+
+/**
+ * Resolves each magnetic index to its pixel position and returns them sorted
+ * by `pixelX` ascending. Indices that cannot be projected are filtered out.
+ * The sorted output enables early-exit in {@link applyMagnetisation}.
+ */
+export const buildSortedMagnets = ({
+  magneticIndices,
+  getPixelForIndex,
+}: {
+  magneticIndices: ReadonlySet<number>;
+  getPixelForIndex: (index: number) => number | undefined;
+}): MagnetEntry[] => {
+  if (magneticIndices.size === 0) return [];
+
+  const magnets: MagnetEntry[] = [];
+
+  for (const index of magneticIndices) {
+    const pixelX = getPixelForIndex(index);
+    if (pixelX !== undefined) magnets.push({ index, pixelX });
+  }
+
+  magnets.sort((a, b) => a.pixelX - b.pixelX);
+
+  return magnets;
+};
+
+/**
+ * Binary search for the magnet whose `pixelX` is closest to `pixelX`.
+ * Returns -1 when the array is empty. Favors the left neighbor on ties.
+ */
+export const nearestIndex = (
+  sortedMagnets: readonly MagnetEntry[],
+  pixelX: number,
+): number => {
+  if (sortedMagnets.length === 0) return -1;
+
+  let left = 0;
+  let right = sortedMagnets.length;
+
+  while (left < right) {
+    const mid = Math.floor((left + right) / 2);
+    if (sortedMagnets[mid].pixelX < pixelX) {
+      left = mid + 1;
+    } else {
+      right = mid;
+    }
+  }
+
+  if (left === 0) return 0;
+  if (left === sortedMagnets.length) return left - 1;
+
+  const distBefore = pixelX - sortedMagnets[left - 1].pixelX;
+  const distAfter = sortedMagnets[left].pixelX - pixelX;
+
+  return distBefore <= distAfter ? left - 1 : left;
+};
+
+/**
+ * Given a resolved data index and the raw pixel position, checks whether any
+ * magnetic point is within `magnetRadius` pixels of `pixelX`. If so, returns
+ * the closest magnetic index; otherwise returns the original `resolvedIndex`.
+ */
+export const applyMagnetisation = ({
+  resolvedIndex,
+  pixelX,
+  sortedMagnets,
+  magnetRadius,
+}: {
+  resolvedIndex: number;
+  pixelX: number;
+  sortedMagnets: readonly MagnetEntry[];
+  magnetRadius: number;
+}): number => {
+  if (magnetRadius <= 0 || sortedMagnets.length === 0) return resolvedIndex;
+
+  const nearest = nearestIndex(sortedMagnets, pixelX);
+  if (
+    nearest >= 0 &&
+    Math.abs(sortedMagnets[nearest].pixelX - pixelX) <= magnetRadius
+  ) {
+    return sortedMagnets[nearest].index;
+  }
+  return resolvedIndex;
+};

package/src/lib/utils/domain/domain.ts

@@ -1,4 +1,5 @@
-import type { AxisBounds, AxisConfigProps, Series } from '../types';
+import type { AxisBounds, BaseAxisProps } from '../../Components/Axis';
+import type { Series } from '../types';
 
 /**
  * Compute the X domain (index-based) from series data and axis config.
@@ -7,7 +8,7 @@ import type { AxisBounds, AxisConfigProps, Series } from '../types';
  */
 export const computeXDomain = (
   series: Series[],
-  axisConfig?: Partial<AxisConfigProps>,
+  axisConfig?: Partial<BaseAxisProps>,
 ): AxisBounds => {
   const axisData = axisConfig?.data;
 
@@ -44,7 +45,7 @@ export const computeXDomain = (
  */
 export const computeYDomain = (
   series: Series[],
-  axisConfig?: Partial<AxisConfigProps>,
+  axisConfig?: Partial<BaseAxisProps>,
 ): AxisBounds => {
   let min = 0;
   let max = 0;
@@ -76,7 +77,7 @@ export const computeYDomain = (
  */
 export const computeDataLength = (
   series: Series[],
-  axisConfig?: Partial<AxisConfigProps>,
+  axisConfig?: Partial<BaseAxisProps>,
 ): number => {
   if (axisConfig?.data && axisConfig.data.length > 0) {
     return axisConfig.data.length;
@@ -86,7 +87,7 @@ export const computeDataLength = (
 
 const applyDomainOverride = (
   autoBounds: AxisBounds,
-  domainOverride?: AxisConfigProps['domain'],
+  domainOverride?: BaseAxisProps['domain'],
 ): AxisBounds => {
   if (!domainOverride) return autoBounds;
 

package/src/lib/utils/index.ts

@@ -1,6 +1,4 @@
 export type {
-  AxisBounds,
-  AxisConfigProps,
   CartesianChartContextValue,
   CategoricalScale,
   ChartInset,

package/src/lib/utils/scales/scales.test.ts

@@ -53,6 +53,25 @@ describe('getNumericScale', () => {
     expect(range[0]).toBe(20);
     expect(range[1]).toBe(400);
   });
+
+  it('rounds the domain outward when nice is true (default)', () => {
+    const scale = getNumericScale({
+      scaleType: 'linear',
+      domain: { min: 0, max: 3769 },
+      range: { min: 0, max: 400 },
+    });
+    expect(scale.domain()).toEqual([0, 4000]);
+  });
+
+  it('keeps the domain exact when nice is false', () => {
+    const scale = getNumericScale({
+      scaleType: 'linear',
+      domain: { min: 0, max: 3769 },
+      range: { min: 0, max: 400 },
+      nice: false,
+    });
+    expect(scale.domain()).toEqual([0, 3769]);
+  });
 });
 
 describe('getCategoricalScale', () => {

package/src/lib/utils/scales/scales.ts

@@ -1,31 +1,37 @@
 import { scaleBand, scaleLinear, scaleLog } from 'd3-scale';
 
+import type { AxisBounds, BaseAxisProps } from '../../Components/Axis';
 import type {
-  AxisBounds,
-  AxisConfigProps,
   CategoricalScale,
   ChartScaleFunction,
   NumericScale,
 } from '../types';
 
 /**
- * Creates a numeric scale with `.nice()` applied so the domain
- * extends to clean rounded boundaries (e.g. `[4, 98]` → `[0, 100]`).
+ * Creates a numeric scale.
+ *
+ * When `nice` is `true` (default), the domain is rounded outward to clean
+ * boundaries via d3's `.nice()` (e.g. `[4, 98]` → `[0, 100]`). Set `nice` to
+ * `false` to keep the domain exactly as provided so data fills the range
+ * boundary-to-boundary.
  */
 export const getNumericScale = ({
   scaleType,
   domain,
   range,
+  nice = true,
 }: {
   scaleType: 'linear' | 'log';
   domain: AxisBounds;
   range: AxisBounds;
+  nice?: boolean;
 }): NumericScale => {
   const scale = scaleType === 'log' ? scaleLog() : scaleLinear();
-  return scale
-    .domain([domain.min, domain.max])
-    .nice()
-    .range([range.min, range.max]);
+  scale.domain([domain.min, domain.max]);
+  if (nice) {
+    scale.nice();
+  }
+  return scale.range([range.min, range.max]);
 };
 
 export const getCategoricalScale = ({
@@ -52,7 +58,7 @@ export const getCategoricalScale = ({
  * Checks if a scale type config value refers to a band (categorical) scale.
  */
 export const isBandScaleType = (
-  scaleType: AxisConfigProps['scaleType'],
+  scaleType: BaseAxisProps['scaleType'],
 ): scaleType is 'band' => scaleType === 'band';
 
 /**

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

@@ -36,6 +36,24 @@ describe('getTickValues', () => {
   it('should return full domain for band scales', () => {
     expect(getTickValues(bandScale)).toEqual([0, 1, 2, 3, 4]);
   });
+
+  it('should return numeric axis data verbatim (no d3-invented intermediate ticks)', () => {
+    expect(getTickValues(numericScale, undefined, [0, 2, 4])).toEqual([
+      0, 2, 4,
+    ]);
+  });
+
+  it('should return indices for string axis data', () => {
+    expect(
+      getTickValues(numericScale, undefined, ['Jan', 'Feb', 'Mar']),
+    ).toEqual([0, 1, 2]);
+  });
+
+  it('should prioritize explicit ticks over axis data', () => {
+    expect(
+      getTickValues(numericScale, [10, 20], ['Jan', 'Feb', 'Mar']),
+    ).toEqual([10, 20]);
+  });
 });
 
 describe('getTickPosition', () => {
@@ -121,6 +139,33 @@ describe('buildTicksData', () => {
     expect(result[1].label).toBe('Tue');
   });
 
+  it('should derive ticks from numeric axis data (no intermediate ticks)', () => {
+    const result = buildTicksData(numericScale, { data: [0, 2, 4] });
+    expect(result.map((t: { value: number }) => t.value)).toEqual([0, 2, 4]);
+    expect(result.map((t: { label: string }) => t.label)).toEqual([
+      '0',
+      '2',
+      '4',
+    ]);
+  });
+
+  it('should derive ticks from string axis data without intermediate values', () => {
+    const stringScale = getNumericScale({
+      scaleType: 'linear',
+      domain: { min: 0, max: 2 },
+      range: { min: 0, max: 500 },
+    });
+    const result = buildTicksData(stringScale, {
+      data: ['Jan', 'Feb', 'Mar'],
+    });
+    expect(result.map((t: { value: number }) => t.value)).toEqual([0, 1, 2]);
+    expect(result.map((t: { label: string }) => t.label)).toEqual([
+      'Jan',
+      'Feb',
+      'Mar',
+    ]);
+  });
+
   it('should apply tick formatter', () => {
     const formatter = (v: number | string): string => `$${v}`;
     const result = buildTicksData(numericScale, undefined, [0, 50], formatter);

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

@@ -1,9 +1,6 @@
+import type { BaseAxisProps } from '../../Components/Axis';
 import { isCategoricalScale, isNumericScale } from '../scales/scales';
-import type {
-  AxisConfigProps,
-  ChartScaleFunction,
-  DrawingArea,
-} from '../types';
+import type { ChartScaleFunction, DrawingArea } from '../types';
 
 export const APPROXIMATE_TICK_COUNT = 5;
 
@@ -15,13 +12,26 @@ export type TickData = {
 
 /**
  * Resolves which numeric tick values should appear on the axis.
- * Explicit ticks take priority, then scale-specific defaults.
+ *
+ * Priority:
+ * 1. Explicit `ticks` provided by the consumer.
+ * 2. Axis `data` — when provided, ticks come from the data itself (numeric
+ *    values for numeric data, indices for string data) so the rendered ticks
+ *    mirror exactly what the consumer asked for, with no d3-invented
+ *    intermediate values.
+ * 3. Scale-specific defaults (band domain, or `scale.ticks()` for numeric).
  */
 export const getTickValues = (
   scale: ChartScaleFunction,
   explicitTicks?: number[],
+  axisData?: BaseAxisProps['data'],
 ): number[] => {
   if (explicitTicks) return explicitTicks;
+  if (axisData && axisData.length > 0) {
+    return typeof axisData[0] === 'number'
+      ? (axisData as number[])
+      : axisData.map((_, i) => i);
+  }
   if (isCategoricalScale(scale)) return scale.domain();
   if (isNumericScale(scale)) return scale.ticks(APPROXIMATE_TICK_COUNT);
   return [];
@@ -47,7 +57,7 @@ export const getTickPosition = (
  */
 export const getTickLabel = (
   tick: number,
-  axisData: AxisConfigProps['data'],
+  axisData: BaseAxisProps['data'],
   formatter?: (value: number | string) => string,
 ): string => {
   const hasStringLabels =
@@ -71,12 +81,12 @@ export const getTickLabel = (
  */
 export const buildTicksData = (
   scale: ChartScaleFunction,
-  axisConfig?: AxisConfigProps,
+  axisConfig?: BaseAxisProps,
   explicitTicks?: number[],
   formatter?: (value: number | string) => string,
 ): TickData[] => {
-  const tickValues = getTickValues(scale, explicitTicks);
   const axisData = axisConfig?.data;
+  const tickValues = getTickValues(scale, explicitTicks, axisData);
 
   return tickValues.map((tick) => ({
     position: getTickPosition(scale, tick),