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

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),

package/src/lib/utils/types.ts

@@ -1,6 +1,6 @@
 import type { ScaleBand, ScaleLinear, ScaleLogarithmic } from 'd3-scale';
 
-export type AxisBounds = { min: number; max: number };
+import type { BaseAxisProps } from '../Components/Axis';
 
 export type ChartInset = {
   top: number;
@@ -38,29 +38,6 @@ export type Series = {
   stroke: string;
 };
 
-export type AxisConfigProps = {
-  /**
-   * Scale algorithm used by this axis.
-   * @default 'linear'
-   */
-  scaleType?: 'linear' | 'log' | 'band';
-  /**
-   * Explicit data values for band scales or category labels.
-   * For band scales, provides the discrete domain. For numeric scales, string values
-   * are used as tick labels at corresponding indices.
-   */
-  data?: string[] | number[];
-  /**
-   * Fixed domain bounds or a function that adjusts the computed bounds.
-   * A partial object overrides only the specified bound(s).
-   * A function receives the auto-computed bounds and returns adjusted ones.
-   *
-   * The final domain is always rounded to nice boundaries via d3's `.nice()`,
-   * ensuring tick marks land on clean values (e.g. `[4, 98]` becomes `[0, 100]`).
-   */
-  domain?: Partial<AxisBounds> | ((bounds: AxisBounds) => AxisBounds);
-};
-
 export type NumericScale =
   | ScaleLinear<number, number>
   | ScaleLogarithmic<number, number>;
@@ -89,11 +66,11 @@ export type CartesianChartContextValue = {
   /**
    * Returns the x-axis config. Accepts an optional axis ID for future multi-axis support.
    */
-  getXAxisConfig: (id?: string) => AxisConfigProps | undefined;
+  getXAxisConfig: (id?: string) => BaseAxisProps | undefined;
   /**
    * Returns the y-axis config. Accepts an optional axis ID for future multi-axis support.
    */
-  getYAxisConfig: (id?: string) => AxisConfigProps | undefined;
+  getYAxisConfig: (id?: string) => BaseAxisProps | undefined;
   /**
    * Pixel bounds of the drawable region.
    */