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

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

@@ -1,22 +1,16 @@
 import { useTheme } from '@ledgerhq/lumen-ui-rnative';
-import { useMemo } 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 type { PointLabelProps, PointProps } from './types';
-import {
-  buildArrowPoints,
-  computeLabelY,
-  isWithinBounds,
-  resolveLabel,
-  useMagneticRegistration,
-} from './utils';
+import { DEFAULT_SIZE, LABEL_FONT_SIZE, STROKE_WIDTH } from './constants';
+import type {
+  PointArrowProps,
+  PointLabelProps,
+  PointMarkerProps,
+  PointProps,
+} from './types';
+import { usePointGeometry } from './usePointGeometry';
+import { buildArrowPoints, computeLabelGeometry, resolveLabel } from './utils';
 
 const AnimatedG = Animated.createAnimatedComponent(G);
 
@@ -30,7 +24,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,6 +32,36 @@ export function PointLabel({
   );
 }
 
+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 function Point({
   dataX,
   dataY,
@@ -50,60 +74,55 @@ 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 { pixel, drawingArea, fadeProps, isVisible } = usePointGeometry({
+    dataX,
+    dataY,
+    magnetic,
+  });
 
-  const xScale = getXScale();
-  const yScale = getYScale();
-
-  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/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 { useMagneticPointsContext } from './pointContext';
+import type { MagneticPointsContextValue } 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 magneticContext = useMagneticPointsContext();
+
+  useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticContext);
+
+  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 }: 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]);
+};

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