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

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

@@ -1,22 +1,19 @@
 import { useTheme } from '@ledgerhq/lumen-ui-rnative';
-import { useMemo } from 'react';
+
+import { memo } from 'react';
 import Animated from 'react-native-reanimated';
 import { Circle, G, Polygon, Text as SvgText } from 'react-native-svg';
 
-import { projectPoint } from '../../utils/scales/scales';
-import { useCartesianChartContext } from '../CartesianChart/context';
-import { useRevealFadeProps } from '../CartesianChart/RevealAnimation';
-import { DEFAULT_SIZE, STROKE_WIDTH } from './constants';
-import { useMagneticPointsContext } from './pointContext';
+import { DEFAULT_SIZE, LABEL_FONT_SIZE, STROKE_WIDTH } from './constants';
+import type {
+  PointArrowProps,
+  PointLabelProps,
+  PointMarkerProps,
+  PointProps,
+} from './types';
 
-import type { PointLabelProps, PointProps } from './types';
-import {
-  buildArrowPoints,
-  computeLabelY,
-  isWithinBounds,
-  resolveLabel,
-  useMagneticRegistration,
-} from './utils';
+import { usePointGeometry } from './usePointGeometry';
+import { buildArrowPoints, computeLabelGeometry, resolveLabel } from './utils';
 
 const AnimatedG = Animated.createAnimatedComponent(G);
 
@@ -30,7 +27,7 @@ export function PointLabel({
     <SvgText
       textAnchor={textAnchor}
       fill={theme.colors.text.base}
-      fontSize={theme.typographies.body4.fontSize}
+      fontSize={LABEL_FONT_SIZE}
       fontWeight={theme.typographies.body4.fontWeight}
       fontFamily={theme.fontFamilies.sans}
       {...props}
@@ -38,7 +35,37 @@ export function PointLabel({
   );
 }
 
-export function Point({
+function PointMarker({ x, y, size, color }: Readonly<PointMarkerProps>) {
+  const { theme } = useTheme();
+  const radius = size / 2;
+  const fill = color ?? theme.colors.bg.mutedStrong;
+
+  return (
+    <Circle
+      testID='point-circle'
+      cx={x}
+      cy={y}
+      r={radius}
+      fill={fill}
+      stroke={theme.colors.bg.canvas}
+      strokeWidth={STROKE_WIDTH}
+    />
+  );
+}
+
+function PointArrow({ x, y, size, position }: Readonly<PointArrowProps>) {
+  const { theme } = useTheme();
+
+  return (
+    <Polygon
+      testID='point-arrow'
+      points={buildArrowPoints(x, y, size / 2, position)}
+      fill={theme.colors.text.base}
+    />
+  );
+}
+
+export const Point = memo(function Point({
   dataX,
   dataY,
   color,
@@ -50,62 +77,57 @@ export function Point({
   size = DEFAULT_SIZE,
   onPress,
   magnetic = false,
+  labelAlignment = 'auto',
 }: Readonly<PointProps>) {
-  const { getXScale, getYScale, getXAxisConfig, drawingArea } =
-    useCartesianChartContext();
-  const fadeProps = useRevealFadeProps();
-  const magneticContext = useMagneticPointsContext();
-
-  useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticContext);
-  const { theme } = useTheme();
-
-  const xScale = getXScale();
-  const yScale = getYScale();
+  const { pixel, drawingArea, fadeProps, isVisible } = usePointGeometry({
+    dataX,
+    dataY,
+    magnetic,
+  });
 
-  const radius = size / 2;
-  const fill = color ?? theme.colors.bg.mutedStrong;
-
-  const pixel = useMemo(() => {
-    if (!xScale || !yScale) return undefined;
-    return projectPoint(dataX, dataY, xScale, yScale);
-  }, [dataX, dataY, xScale, yScale]);
-
-  if (!pixel || !isWithinBounds(pixel.x, pixel.y, drawingArea)) {
+  if (!isVisible || !pixel) {
     return null;
   }
 
-  const resolvedLabel = resolveLabel(label, dataX);
-  const hasLabel = resolvedLabel != null;
-  const renderArrow = showLabelArrow && hasLabel;
-  const labelY = computeLabelY(pixel.y, radius, labelPosition, renderArrow);
+  const labelText = resolveLabel(label, dataX);
+  const isLabelVisible = labelText !== undefined;
+  const labelGeometry = isLabelVisible
+    ? computeLabelGeometry({
+        text: labelText,
+        pixelX: pixel.x,
+        pixelY: pixel.y,
+        size,
+        labelPosition,
+        showLabelArrow,
+        area: drawingArea,
+        alignment: labelAlignment,
+      })
+    : null;
 
   const Label = LabelComponent ?? PointLabel;
 
   return (
     <AnimatedG testID='point-group' onPress={onPress} animatedProps={fadeProps}>
       {!hidePoint && (
-        <Circle
-          testID='point-circle'
-          cx={pixel.x}
-          cy={pixel.y}
-          r={radius}
-          fill={fill}
-          stroke={theme.colors.bg.canvas}
-          strokeWidth={STROKE_WIDTH}
-        />
+        <PointMarker x={pixel.x} y={pixel.y} size={size} color={color} />
       )}
-      {renderArrow && (
-        <Polygon
-          testID='point-arrow'
-          points={buildArrowPoints(pixel.x, pixel.y, radius, labelPosition)}
-          fill={theme.colors.text.base}
+      {isLabelVisible && showLabelArrow && (
+        <PointArrow
+          x={pixel.x}
+          y={pixel.y}
+          size={size}
+          position={labelPosition}
         />
       )}
-      {resolvedLabel != null && (
-        <Label x={pixel.x} y={labelY}>
-          {resolvedLabel}
+      {labelText != null && labelGeometry && (
+        <Label
+          x={labelGeometry.x}
+          y={labelGeometry.y}
+          textAnchor={labelGeometry.textAnchor}
+        >
+          {labelText}
         </Label>
       )}
     </AnimatedG>
   );
-}
+});

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

@@ -4,3 +4,5 @@ export const LABEL_FONT_SIZE = 10;
 export const ARROW_WIDTH = 6;
 export const ARROW_HEIGHT = 4;
 export const GAP = 4;
+/** Approximate width of a character in the label font, as a ratio of the font size. Used to compute the label width. */
+export const LABEL_CHAR_WIDTH_RATIO = 0.6;

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

@@ -2,13 +2,25 @@ 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 {
+  useMagneticRegistry,
+  useMagneticSnapshot,
+} from './magneticPointsContext';
 import { MagneticPointsProvider } from './MagneticPointsProvider';
 
 const wrapper = ({ children }: { children: ReactNode }) => (
   <MagneticPointsProvider>{children}</MagneticPointsProvider>
 );
 
+/**
+ * Reads both split contexts so the existing assertions (register/unregister/
+ * getMagneticPoints/version) keep working against a single result object.
+ */
+const useMagneticPointsContext = () => ({
+  ...useMagneticRegistry(),
+  ...useMagneticSnapshot(),
+});
+
 describe('MagneticPointsProvider', () => {
   it('starts with an empty set', () => {
     const { result } = renderHook(() => useMagneticPointsContext(), {

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

@@ -2,8 +2,10 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import type { ReactNode } from 'react';
 
 import {
-  MagneticPointsContextProvider,
-  type MagneticPointsContextValue,
+  MagneticRegistryProvider,
+  MagneticSnapshotProvider,
+  type MagneticRegistryValue,
+  type MagneticSnapshotValue,
 } from './magneticPointsContext';
 
 type MagneticPointsProviderProps = {
@@ -32,14 +34,24 @@ export function MagneticPointsProvider({
     return pointsRef.current;
   }, []);
 
-  const value: MagneticPointsContextValue = useMemo(
-    () => ({ register, unregister, getMagneticPoints, version }),
-    [register, unregister, getMagneticPoints, version],
+  // Stable identity for the provider's lifetime: `Point` consumers read this
+  // and therefore never re-render when the magnetic set changes.
+  const registry: MagneticRegistryValue = useMemo(
+    () => ({ register, unregister }),
+    [register, unregister],
+  );
+
+  // Changes on every register/unregister: consumed only by the scrubber.
+  const snapshot: MagneticSnapshotValue = useMemo(
+    () => ({ version, getMagneticPoints }),
+    [version, getMagneticPoints],
   );
 
   return (
-    <MagneticPointsContextProvider value={value}>
-      {children}
-    </MagneticPointsContextProvider>
+    <MagneticRegistryProvider value={registry}>
+      <MagneticSnapshotProvider value={snapshot}>
+        {children}
+      </MagneticSnapshotProvider>
+    </MagneticRegistryProvider>
   );
 }

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

@@ -1,5 +1,7 @@
 export {
-  useMagneticPointsContext,
-  type MagneticPointsContextValue,
+  useMagneticRegistry,
+  useMagneticSnapshot,
+  type MagneticRegistryValue,
+  type MagneticSnapshotValue,
 } from './magneticPointsContext';
 export { MagneticPointsProvider } from './MagneticPointsProvider';

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

@@ -1,19 +1,41 @@
 import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
 
-export type MagneticPointsContextValue = {
+/**
+ * Stable registration API for magnetic points. Its identity never changes for
+ * the provider's lifetime, so consumers (every `Point`) do not re-render when
+ * the magnetic set changes — only when they mount/unmount.
+ */
+export type MagneticRegistryValue = {
   register: (dataIndex: number) => void;
   unregister: (dataIndex: number) => void;
+};
+
+/**
+ * Mutable snapshot of the registered magnetic points. Changes on every
+ * register/unregister (via `version`) and is consumed only by the scrubber,
+ * which needs to recompute its snap targets when the set changes.
+ */
+export type MagneticSnapshotValue = {
   version: number;
   getMagneticPoints: () => ReadonlySet<number>;
 };
 
-const [MagneticPointsContextProvider, _useMagneticPointsSafeContext] =
-  createSafeContext<MagneticPointsContextValue>('MagneticPoints');
+const [MagneticRegistryProvider, _useMagneticRegistrySafeContext] =
+  createSafeContext<MagneticRegistryValue>('MagneticRegistry');
+
+const [MagneticSnapshotProvider, _useMagneticSnapshotSafeContext] =
+  createSafeContext<MagneticSnapshotValue>('MagneticSnapshot');
+
+export const useMagneticRegistry = (): MagneticRegistryValue =>
+  _useMagneticRegistrySafeContext({
+    consumerName: 'useMagneticRegistry',
+    contextRequired: true,
+  });
 
-export const useMagneticPointsContext = (): MagneticPointsContextValue =>
-  _useMagneticPointsSafeContext({
-    consumerName: 'useMagneticPointsContext',
+export const useMagneticSnapshot = (): MagneticSnapshotValue =>
+  _useMagneticSnapshotSafeContext({
+    consumerName: 'useMagneticSnapshot',
     contextRequired: true,
   });
 
-export { MagneticPointsContextProvider };
+export { MagneticRegistryProvider, MagneticSnapshotProvider };

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

@@ -10,6 +10,38 @@ export type PointLabelProps = {
 
 export type PointLabelComponent = ComponentType<PointLabelProps>;
 
+/**
+ * Horizontal alignment strategy for a point's label.
+ *
+ * - `'auto'`: keep the label inside the drawing area, anchoring it to the
+ *   nearest edge when it would overflow.
+ * - `'center'`: always centre the label on the point.
+ */
+export type LabelAlignment = 'center' | 'auto';
+
+/**
+ * Pixel position and styling inputs shared by the point's rendered glyphs. Each
+ * glyph picks the subset it needs and derives its own pixel geometry (e.g.
+ * radius from `size`).
+ */
+type PointGlyphProps = {
+  x: number;
+  y: number;
+  size: number;
+  color?: string;
+  position: 'top' | 'bottom';
+};
+
+export type PointMarkerProps = Pick<
+  PointGlyphProps,
+  'x' | 'y' | 'size' | 'color'
+>;
+
+export type PointArrowProps = Pick<
+  PointGlyphProps,
+  'x' | 'y' | 'size' | 'position'
+>;
+
 export type PointProps = {
   /**
    * X coordinate in data space (index or explicit value).
@@ -80,4 +112,13 @@ export type PointProps = {
    * @default false
    */
   magnetic?: boolean;
+  /**
+   * Horizontal alignment of the label relative to the chart's drawing area.
+   * With `'auto'`, a label that would overflow the left/right edge is anchored
+   * to that edge and grows inward instead of being clipped, while the arrow
+   * keeps pointing at the exact data point. Use `'center'` to always centre the
+   * label on the point.
+   * @default 'auto'
+   */
+  labelAlignment?: LabelAlignment;
 };

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

@@ -0,0 +1,95 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { renderHook } from '@testing-library/react-native';
+
+import type { BaseAxisProps } from '../Axis';
+import { useMagneticRegistration } from './usePointGeometry';
+
+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/usePointGeometry.ts

@@ -0,0 +1,77 @@
+import { useEffect, useMemo } from 'react';
+
+import { projectPoint } from '../../utils/scales/scales';
+import type { DrawingArea } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
+import { useCartesianChartContext } from '../CartesianChart/context';
+import { useRevealFadeProps } from '../CartesianChart/RevealAnimation';
+import { useMagneticRegistry } from './pointContext';
+import type { MagneticRegistryValue } from './pointContext/magneticPointsContext';
+import { isWithinBounds, resolveDataXToIndex } from './utils';
+
+type Pixel = { x: number; y: number };
+
+type UsePointGeometryParams = {
+  dataX: number;
+  dataY: number;
+  magnetic: boolean;
+};
+
+type PointGeometry = {
+  pixel: Pixel | undefined;
+  drawingArea: DrawingArea;
+  fadeProps: ReturnType<typeof useRevealFadeProps>;
+  isVisible: boolean;
+};
+
+/**
+ * Resolves a point's chart geometry and behaviour: projects its data
+ * coordinates to pixels, registers it as a magnetic snap target when enabled,
+ * exposes the reveal-animation props, and reports whether it falls inside the
+ * drawing area.
+ */
+export const usePointGeometry = ({
+  dataX,
+  dataY,
+  magnetic,
+}: UsePointGeometryParams): PointGeometry => {
+  const { getXScale, getYScale, getXAxisConfig, drawingArea } =
+    useCartesianChartContext();
+  const magneticRegistry = useMagneticRegistry();
+
+  useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticRegistry);
+
+  const xScale = getXScale();
+  const yScale = getYScale();
+
+  const pixel = useMemo(() => {
+    if (!xScale || !yScale) return undefined;
+    return projectPoint(dataX, dataY, xScale, yScale);
+  }, [dataX, dataY, xScale, yScale]);
+
+  const fadeProps = useRevealFadeProps();
+
+  const isVisible =
+    pixel !== undefined && isWithinBounds(pixel.x, pixel.y, drawingArea);
+
+  return { pixel, drawingArea, fadeProps, isVisible };
+};
+
+/**
+ * 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 }: MagneticRegistryValue,
+): void => {
+  useEffect(() => {
+    if (!magnetic) return;
+    const index = resolveDataXToIndex(dataX, getXAxisConfig());
+    if (index === undefined) return;
+    register(index);
+    return () => unregister(index);
+  }, [magnetic, dataX, getXAxisConfig, register, unregister]);
+};