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

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

@@ -1,14 +1,14 @@
-import { describe, expect, it } from '@jest/globals';
+import { describe, expect, it, jest } from '@jest/globals';
+import { renderHook } from '@testing-library/react-native';
 
+import type { BaseAxisProps } from '../Axis';
+import { ARROW_HEIGHT, ARROW_WIDTH, GAP, LABEL_FONT_SIZE } from './constants';
 import {
-  ARROW_HEIGHT,
-  ARROW_WIDTH,
   buildArrowPoints,
   computeLabelY,
-  GAP,
   isWithinBounds,
-  LABEL_FONT_SIZE,
   resolveLabel,
+  useMagneticRegistration,
 } from './utils';
 
 describe('isWithinBounds', () => {
@@ -116,3 +116,93 @@ describe('computeLabelY', () => {
     expect(result).toBe(pixelY + radius + GAP + GAP + LABEL_FONT_SIZE);
   });
 });
+
+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/utils.ts

@@ -1,11 +1,9 @@
-import type { DrawingArea } from '../../utils/types';
+import { useEffect } from 'react';
 
-export const DEFAULT_SIZE = 10;
-export const STROKE_WIDTH = 2;
-export const LABEL_FONT_SIZE = 10;
-export const ARROW_WIDTH = 6;
-export const ARROW_HEIGHT = 4;
-export const GAP = 4;
+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';
 
 export const isWithinBounds = (
   px: number,
@@ -53,6 +51,36 @@ export const resolveLabel = (
   return resolved === '' ? undefined : resolved;
 };
 
+export const resolveDataXToIndex = (
+  dataX: number,
+  axisConfig: BaseAxisProps | undefined,
+): number | undefined => {
+  const axisData = axisConfig?.data;
+  if (!axisData || typeof axisData[0] !== 'number') return dataX;
+  const index = (axisData as number[]).indexOf(dataX);
+  if (index === -1) return undefined;
+  return index;
+};
+
+/**
+ * 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]);
+};
+
 /**
  * Computes the vertical position of the label text baseline.
  */

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

@@ -1,9 +1,6 @@
 import { getPointOnScale, isCategoricalScale } from '../../utils/scales/scales';
-import type {
-  AxisConfigProps,
-  ChartScaleFunction,
-  DrawingArea,
-} from '../../utils/types';
+import type { ChartScaleFunction, DrawingArea } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
 
 import type { LabelAlignment, LabelPosition } from './types';
 
@@ -28,7 +25,7 @@ type ResolvePixelParams = {
   scale: ChartScaleFunction | undefined;
   axis: 'x' | 'y';
   drawingArea: DrawingArea;
-  axisConfig?: AxisConfigProps;
+  axisConfig?: BaseAxisProps;
 };
 
 type LabelParams = {
@@ -95,7 +92,7 @@ export const isPixelWithinDrawingArea = (
  */
 const resolveDataValue = (
   index: number,
-  axisConfig?: AxisConfigProps,
+  axisConfig?: BaseAxisProps,
 ): number | undefined => {
   const data = axisConfig?.data;
   if (!data || data.length === 0) return index;

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.tsx

@@ -0,0 +1,54 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import { memo } from 'react';
+import { G, Text as SvgText } from 'react-native-svg';
+
+import type { ChartTooltipItemProps } from '../types';
+import { PADDING_X } from './constants';
+
+/**
+ * Memoized so it only re-renders when one of its primitive props actually
+ * changes. Combined with the stable per-index ref callbacks built in
+ * `DefaultScrubberTooltip`, this keeps the row out of the per-scrub-frame
+ * reconciliation path when its label / value / position have not changed.
+ */
+export const ChartTooltipItem = memo(function ChartTooltipItem({
+  label,
+  value,
+  x = 0,
+  y = 0,
+  width,
+  labelRef,
+  valueRef,
+}: Readonly<ChartTooltipItemProps>) {
+  const { theme } = useTheme();
+
+  return (
+    <G>
+      <SvgText
+        ref={labelRef}
+        x={x + PADDING_X}
+        y={y}
+        textAnchor='start'
+        alignmentBaseline='central'
+        fill={theme.colors.text.muted}
+        fontSize={theme.typographies.body4.fontSize}
+        fontFamily={theme.fontFamilies.sans}
+      >
+        {String(label)}
+      </SvgText>
+      <SvgText
+        ref={valueRef}
+        x={x + width - PADDING_X}
+        y={y}
+        textAnchor='end'
+        alignmentBaseline='central'
+        fill={theme.colors.text.base}
+        fontSize={theme.typographies.body4.fontSize}
+        fontWeight={theme.typographies.body4.fontWeight}
+        fontFamily={theme.fontFamilies.sans}
+      >
+        {String(value)}
+      </SvgText>
+    </G>
+  );
+});

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.test.tsx

@@ -0,0 +1,259 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
+import { render } from '@testing-library/react-native';
+import type { ComponentProps, ReactNode } from 'react';
+
+import { CartesianChart } from '../../CartesianChart';
+import { ScrubberContextProvider } from '../context';
+import { Scrubber } from '../Scrubber';
+import type { ScrubberContextValue, ScrubberTooltipContent } from '../types';
+
+const sampleSeries = [
+  { id: 's1', stroke: '#7B61FF', data: [10, 20, 30, 40, 50] },
+];
+
+const Wrapper = ({ children }: { children: ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+    {children}
+  </ThemeProvider>
+);
+
+const activeScrubberContext: ScrubberContextValue = {
+  enableScrubbing: true,
+  scrubberPosition: 2,
+  onScrubberPositionChange: () => undefined,
+};
+
+const idleScrubberContext: ScrubberContextValue = {
+  enableScrubbing: true,
+  scrubberPosition: undefined,
+  onScrubberPositionChange: () => undefined,
+};
+
+const renderTooltip = ({
+  scrubberProps = { tooltip: () => ({ items: [] }) },
+  scrubberContext = activeScrubberContext,
+  width = 400,
+  height = 200,
+}: {
+  scrubberProps?: ComponentProps<typeof Scrubber>;
+  scrubberContext?: ScrubberContextValue;
+  width?: number;
+  height?: number;
+} = {}) =>
+  render(
+    <Wrapper>
+      <CartesianChart series={sampleSeries} width={width} height={height}>
+        <ScrubberContextProvider value={scrubberContext}>
+          <Scrubber {...scrubberProps} />
+        </ScrubberContextProvider>
+      </CartesianChart>
+    </Wrapper>,
+  );
+
+describe('DefaultScrubberTooltip', () => {
+  it('renders nothing when no scrubber position is active', () => {
+    const { queryByTestId } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+      scrubberContext: idleScrubberContext,
+    });
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  it('renders nothing when items callback returns an empty array', () => {
+    const { queryByTestId } = renderTooltip({
+      scrubberProps: { tooltip: () => ({ items: [] }) },
+    });
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  it('renders the tooltip group when scrubber is active and items are provided', () => {
+    const { getByTestId } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+    });
+    expect(getByTestId('chart-tooltip')).toBeTruthy();
+  });
+
+  it('renders the background rect', () => {
+    const { getByTestId } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+    });
+    expect(getByTestId('chart-tooltip-rect')).toBeTruthy();
+  });
+
+  it('renders item label and value text', () => {
+    const { getByText } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'Date', value: 'Jan' }] }),
+      },
+    });
+    expect(getByText('Date')).toBeTruthy();
+    expect(getByText('Jan')).toBeTruthy();
+  });
+
+  it('renders multiple items', () => {
+    const { getByText } = renderTooltip({
+      scrubberProps: {
+        tooltip: () => ({
+          items: [
+            { label: 'Date', value: 'Jan' },
+            { label: 'Price', value: '$10' },
+          ],
+        }),
+      },
+    });
+    expect(getByText('Date')).toBeTruthy();
+    expect(getByText('Jan')).toBeTruthy();
+    expect(getByText('Price')).toBeTruthy();
+    expect(getByText('$10')).toBeTruthy();
+  });
+
+  it('passes the active data index to the tooltip callback', () => {
+    const tooltip = jest.fn().mockReturnValue({
+      items: [{ label: 'i', value: '0' }],
+    }) as unknown as (index: number) => ScrubberTooltipContent;
+    renderTooltip({ scrubberProps: { tooltip } });
+    expect(tooltip).toHaveBeenCalledWith(
+      activeScrubberContext.scrubberPosition,
+    );
+  });
+
+  it('suppresses the tooltip when items returns empty for the active index', () => {
+    const { queryByTestId } = renderTooltip({
+      scrubberProps: { tooltip: () => ({ items: [] }) },
+    });
+    expect(queryByTestId('chart-tooltip')).toBeNull();
+  });
+
+  describe('positioning logic', () => {
+    const defaultTooltip = (): ScrubberTooltipContent => ({
+      items: [{ label: 'Date', value: 'Jan' }],
+    });
+
+    const scrubberAt = (position: number): ScrubberContextValue => ({
+      enableScrubbing: true,
+      scrubberPosition: position,
+      onScrubberPositionChange: () => undefined,
+    });
+
+    it('places tooltip to the right of the scrubber when mid-chart', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: { tooltip: defaultTooltip },
+        scrubberContext: scrubberAt(2),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(260);
+    });
+
+    it('flips tooltip left when right side would overflow (index 3)', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), minWidth: 120 }),
+        },
+        scrubberContext: scrubberAt(3),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(220);
+    });
+
+    it('flips at the rightmost scrubber position (index 4)', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), minWidth: 120 }),
+        },
+        scrubberContext: scrubberAt(4),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(320);
+    });
+
+    it('custom offset shifts the no-flip tooltip position', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), offset: 20 }),
+        },
+        scrubberContext: scrubberAt(2),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(270);
+    });
+
+    it('wider minWidth can trigger a flip that the default width would not', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ ...defaultTooltip(), minWidth: 200 }),
+        },
+        scrubberContext: scrubberAt(2),
+      });
+      expect(getByTestId('chart-tooltip-rect').props.x).toBe(50);
+    });
+  });
+
+  describe('title in tooltip content', () => {
+    it('renders a static string title', () => {
+      const { getByTestId, getByText } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title: 'My Title',
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(getByTestId('chart-tooltip-title')).toBeTruthy();
+      expect(getByText('My Title')).toBeTruthy();
+    });
+
+    it('renders the title returned by a callback', () => {
+      const { getByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title: (i: number) => `Index ${i}`,
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(getByTestId('chart-tooltip-title')).toBeTruthy();
+    });
+
+    it('passes the active data index to the title callback', () => {
+      const title = jest.fn().mockReturnValue('Title') as unknown as (
+        index: number,
+      ) => string;
+      renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title,
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(title).toHaveBeenCalledWith(
+        activeScrubberContext.scrubberPosition,
+      );
+    });
+
+    it('does not render a title element when title is undefined', () => {
+      const { queryByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({ items: [{ label: 'T', value: 'V' }] }),
+        },
+      });
+      expect(queryByTestId('chart-tooltip-title')).toBeNull();
+    });
+
+    it('does not render a title element when title callback returns undefined', () => {
+      const { queryByTestId } = renderTooltip({
+        scrubberProps: {
+          tooltip: () => ({
+            title: () => undefined,
+            items: [{ label: 'T', value: 'V' }],
+          }),
+        },
+      });
+      expect(queryByTestId('chart-tooltip-title')).toBeNull();
+    });
+  });
+});

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

@@ -0,0 +1,105 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import { G, Rect, Text as SvgText } from 'react-native-svg';
+
+import type { ScrubberTooltipProps } from '../types';
+import { ChartTooltipItem } from './ChartTooltipItem';
+import {
+  BORDER_RADIUS,
+  DEFAULT_OFFSET,
+  DEFAULT_TOOLTIP_MIN_WIDTH,
+  PADDING_X,
+  PADDING_Y,
+  ROW_GAP,
+  ROW_HEIGHT,
+} from './constants';
+import {
+  computeItemsBaseY,
+  computeTooltipHeight,
+  computeTooltipWidth,
+  computeTooltipX,
+  useBuildRefSetters,
+  useTooltipMeasurement,
+} from './utils';
+
+/**
+ * Default structured tooltip anchored to the scrubber line.
+ *
+ * The tooltip auto-fits its width to the rendered content via `getBBox`,
+ * with `minWidth` acting as an optional minimum width override. Use with
+ * {@link ScrubberProps.tooltip}; layout options (`offset`, `minWidth`) belong
+ * on the object returned from the `tooltip` callback. Return `{ items: [] }`
+ * from the callback to hide the tooltip at a given index.
+ */
+export function DefaultScrubberTooltip({
+  pixelX,
+  drawingArea,
+  title,
+  items,
+  offset = DEFAULT_OFFSET,
+  minWidth = DEFAULT_TOOLTIP_MIN_WIDTH,
+}: Readonly<ScrubberTooltipProps>) {
+  const { theme } = useTheme();
+
+  const hasTitle = title !== undefined;
+
+  const { widths, titleRef, labelRefs, valueRefs } = useTooltipMeasurement(
+    items,
+    hasTitle,
+    title,
+  );
+
+  const labelRefSetters = useBuildRefSetters(labelRefs, items.length);
+  const valueRefSetters = useBuildRefSetters(valueRefs, items.length);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  const tooltipWidth = computeTooltipWidth(widths, hasTitle, minWidth);
+  const tooltipX = computeTooltipX(pixelX, offset, tooltipWidth, drawingArea);
+  const tooltipHeight = computeTooltipHeight(items.length, hasTitle);
+  const itemsBaseY = computeItemsBaseY(drawingArea.y, hasTitle);
+
+  return (
+    <G testID='chart-tooltip' opacity={widths === null ? 0 : 1}>
+      <Rect
+        testID='chart-tooltip-rect'
+        x={tooltipX}
+        y={drawingArea.y}
+        width={tooltipWidth}
+        height={tooltipHeight}
+        rx={BORDER_RADIUS}
+        fill={theme.colors.bg.muted}
+      />
+      {hasTitle && (
+        <SvgText
+          ref={(el) => {
+            titleRef.current = el as unknown as (typeof titleRef)['current'];
+          }}
+          testID='chart-tooltip-title'
+          x={tooltipX + PADDING_X}
+          y={drawingArea.y + PADDING_Y + ROW_HEIGHT / 2}
+          alignmentBaseline='central'
+          fill={theme.colors.text.base}
+          fontSize={theme.typographies.body4.fontSize}
+          fontWeight={theme.typographies.body4.fontWeight}
+          fontFamily={theme.fontFamilies.sans}
+        >
+          {String(title)}
+        </SvgText>
+      )}
+      {items.map((item, i) => (
+        <ChartTooltipItem
+          key={i}
+          label={item.label}
+          value={item.value}
+          x={tooltipX}
+          y={itemsBaseY + i * (ROW_HEIGHT + ROW_GAP) + ROW_HEIGHT / 2}
+          width={tooltipWidth}
+          labelRef={labelRefSetters[i]}
+          valueRef={valueRefSetters[i]}
+        />
+      ))}
+    </G>
+  );
+}

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/constants.ts

@@ -0,0 +1,9 @@
+export const DEFAULT_OFFSET = 10;
+export const DEFAULT_TOOLTIP_MIN_WIDTH = 80;
+export const PADDING_X = 8;
+export const PADDING_Y = 8;
+export const ROW_HEIGHT = 16;
+export const ROW_GAP = 6;
+export const TITLE_GAP = 6;
+export const BORDER_RADIUS = 4;
+export const LABEL_VALUE_GAP = 12;