@ledgerhq/lumen-ui-rnative-visualization 0.1.22 → 0.1.24

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

@@ -1,14 +1,12 @@
-import { describe, expect, it, jest } from '@jest/globals';
-import { renderHook } from '@testing-library/react-native';
+import { describe, expect, it } from '@jest/globals';
 
-import type { BaseAxisProps } from '../Axis';
 import { ARROW_HEIGHT, ARROW_WIDTH, GAP, LABEL_FONT_SIZE } from './constants';
 import {
   buildArrowPoints,
+  computeLabelX,
   computeLabelY,
   isWithinBounds,
   resolveLabel,
-  useMagneticRegistration,
 } from './utils';
 
 describe('isWithinBounds', () => {
@@ -117,92 +115,48 @@ describe('computeLabelY', () => {
   });
 });
 
-const makeContext = () => ({
-  register: jest.fn(),
-  unregister: jest.fn(),
-  version: 0,
-  getMagneticPoints: () => new Set<number>(),
-});
-
-const noAxisConfig = (): BaseAxisProps | undefined => undefined;
+describe('computeLabelX', () => {
+  const area = { x: 100, y: 0, width: 200, height: 100 };
+  const halfArrow = ARROW_WIDTH / 2;
 
-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('centres the label on the point when clamping is disabled', () => {
+    expect(
+      computeLabelX(105, 'A very long label', area, 'center', true),
+    ).toEqual({
+      x: 105,
+      textAnchor: 'middle',
+    });
   });
 
-  it('resolves dataX through axis config data when provided', () => {
-    const ctx = makeContext();
-    const getXAxisConfig = (): BaseAxisProps => ({
-      scaleType: 'band',
-      data: [100, 200, 300],
+  it('centres the label on the point when it fits inside the bounds', () => {
+    expect(computeLabelX(200, 'Peak', area, 'auto', true)).toEqual({
+      x: 200,
+      textAnchor: 'middle',
     });
-
-    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],
+  it('anchors near the left edge, offset by half the arrow width from the point', () => {
+    expect(computeLabelX(105, 'Long label', area, 'auto', true)).toEqual({
+      x: 105 - halfArrow,
+      textAnchor: 'start',
     });
-
-    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('anchors near the right edge, offset by half the arrow width from the point', () => {
+    expect(computeLabelX(295, 'Long label', area, 'auto', true)).toEqual({
+      x: 295 + halfArrow,
+      textAnchor: 'end',
+    });
   });
 
-  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);
+  it('omits the arrow offset when no arrow is rendered', () => {
+    expect(computeLabelX(105, 'Long label', area, 'auto', false)).toEqual({
+      x: 105,
+      textAnchor: 'start',
+    });
+    expect(computeLabelX(295, 'Long label', area, 'auto', false)).toEqual({
+      x: 295,
+      textAnchor: 'end',
+    });
   });
 });

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

@@ -1,9 +1,15 @@
-import { useEffect } from 'react';
-
 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';
+import {
+  ARROW_HEIGHT,
+  ARROW_WIDTH,
+  GAP,
+  LABEL_CHAR_WIDTH_RATIO,
+  LABEL_FONT_SIZE,
+} from './constants';
+import type { LabelAlignment } from './types';
+
+export type LabelTextAnchor = 'start' | 'middle' | 'end';
 
 export const isWithinBounds = (
   px: number,
@@ -63,22 +69,33 @@ export const resolveDataXToIndex = (
 };
 
 /**
- * Registers/unregisters a data index as a magnetic snap target
- * when the Point has `magnetic` enabled.
+ * Computes the label's horizontal placement, keeping it inside the drawing area
+ * near the left/right edges. Centred on the point when it fits; otherwise
+ * anchored to the edge and aligned with the arrow's outer vertex (offset by half
+ * the arrow width from the point, when an arrow is rendered).
  */
-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]);
+export const computeLabelX = (
+  pixelX: number,
+  label: string,
+  area: DrawingArea,
+  alignment: LabelAlignment,
+  hasArrow: boolean,
+): { x: number; textAnchor: LabelTextAnchor } => {
+  if (alignment === 'center') {
+    return { x: pixelX, textAnchor: 'middle' };
+  }
+
+  const halfWidth =
+    (label.length * LABEL_FONT_SIZE * LABEL_CHAR_WIDTH_RATIO) / 2;
+  const arrowOffset = hasArrow ? ARROW_WIDTH / 2 : 0;
+
+  if (pixelX - halfWidth < area.x) {
+    return { x: pixelX - arrowOffset, textAnchor: 'start' };
+  }
+  if (pixelX + halfWidth > area.x + area.width) {
+    return { x: pixelX + arrowOffset, textAnchor: 'end' };
+  }
+  return { x: pixelX, textAnchor: 'middle' };
 };
 
 /**
@@ -96,3 +113,44 @@ export const computeLabelY = (
     ? pixelY - radius - arrowOffset - GAP
     : pixelY + radius + arrowOffset + GAP + LABEL_FONT_SIZE;
 };
+
+/**
+ * Computes where a point's label and its connector arrow are drawn: the
+ * (optionally clamped) horizontal placement, the vertical baseline, and whether
+ * the arrow is rendered. Label content is resolved separately via
+ * {@link resolveLabel}.
+ */
+export const computeLabelGeometry = ({
+  text,
+  pixelX,
+  pixelY,
+  size,
+  labelPosition,
+  showLabelArrow,
+  area,
+  alignment,
+}: {
+  text: string;
+  pixelX: number;
+  pixelY: number;
+  size: number;
+  labelPosition: 'top' | 'bottom';
+  showLabelArrow: boolean;
+  area: DrawingArea;
+  alignment: LabelAlignment;
+}): {
+  x: number;
+  y: number;
+  textAnchor: LabelTextAnchor;
+} => {
+  const { x, textAnchor } = computeLabelX(
+    pixelX,
+    text,
+    area,
+    alignment,
+    showLabelArrow,
+  );
+  const y = computeLabelY(pixelY, size / 2, labelPosition, showLabelArrow);
+
+  return { x, y, textAnchor };
+};

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

@@ -7,7 +7,7 @@ import { scheduleOnRN } from 'react-native-worklets';
 
 import { clamp } from '../../utils/numbers';
 import { useCartesianChartContext } from '../CartesianChart/context';
-import { useMagneticPointsContext } from '../Point/pointContext';
+import { useMagneticSnapshot } from '../Point/pointContext';
 import { ScrubberContextProvider } from './context';
 import type { ScrubberProviderProps } from './types';
 import {
@@ -46,7 +46,7 @@ export function ScrubberProvider({
   >();
 
   const { getXScale, getXAxisConfig, dataLength } = useCartesianChartContext();
-  const { getMagneticPoints, version } = useMagneticPointsContext();
+  const { getMagneticPoints, version } = useMagneticSnapshot();
 
   // All values touched by the gesture's JS-thread callback live in a single
   // ref. Reading via `latest.current` keeps the callbacks reference-stable

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

@@ -55,13 +55,13 @@ export const computeYDomain = (
     if (!s.data) continue;
     for (const v of s.data) {
       if (v !== null && v !== undefined) {
-        if (!hasValue) {
+        if (hasValue) {
+          if (v < min) min = v;
+          if (v > max) max = v;
+        } else {
           min = v;
           max = v;
           hasValue = true;
-        } else {
-          if (v < min) min = v;
-          if (v > max) max = v;
         }
       }
     }