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

package/src/lib/Components/Scrubber/DefaultScrubberTooltip/utils.test.ts

@@ -0,0 +1,264 @@
+import { describe, expect, it, jest } from '@jest/globals';
+
+import {
+  LABEL_VALUE_GAP,
+  PADDING_X,
+  PADDING_Y,
+  ROW_GAP,
+  ROW_HEIGHT,
+  TITLE_GAP,
+} from './constants';
+import {
+  computeItemsBaseY,
+  computeTooltipHeight,
+  computeTooltipWidth,
+  computeTooltipX,
+  measureWidths,
+  safeGetBBoxWidth,
+} from './utils';
+
+describe('safeGetBBoxWidth', () => {
+  it('returns 0 for null', async () => {
+    expect(await safeGetBBoxWidth(null)).toBe(0);
+  });
+
+  it('returns the width from getBBox', async () => {
+    const el = { getBBox: async () => ({ width: 42 }) };
+    expect(await safeGetBBoxWidth(el)).toBe(42);
+  });
+
+  it('returns 0 when getBBox resolves to undefined', async () => {
+    const el = { getBBox: async () => undefined };
+    expect(await safeGetBBoxWidth(el)).toBe(0);
+  });
+
+  it('returns 0 when getBBox throws', async () => {
+    const el = {
+      getBBox: async () => {
+        throw new Error('not supported');
+      },
+    };
+    expect(await safeGetBBoxWidth(el)).toBe(0);
+  });
+});
+
+describe('computeTooltipWidth', () => {
+  it('returns minWidth when widths is null', () => {
+    expect(computeTooltipWidth(null, false, 80)).toBe(80);
+  });
+
+  it('returns minWidth when computed fit is smaller', () => {
+    const widths = { title: 0, labels: [10], values: [10] };
+    const fitWidth = 10 + LABEL_VALUE_GAP + 10 + PADDING_X * 2;
+    expect(computeTooltipWidth(widths, false, fitWidth + 50)).toBe(
+      fitWidth + 50,
+    );
+  });
+
+  it('returns fit width when it exceeds minWidth', () => {
+    const widths = { title: 0, labels: [200], values: [200] };
+    const expected = 200 + LABEL_VALUE_GAP + 200 + PADDING_X * 2;
+    expect(computeTooltipWidth(widths, false, 80)).toBe(expected);
+  });
+
+  it('accounts for title width when hasTitle is true', () => {
+    const widths = { title: 300, labels: [10], values: [10] };
+    const expected = 300 + PADDING_X * 2;
+    expect(computeTooltipWidth(widths, true, 80)).toBe(expected);
+  });
+
+  it('ignores title width when hasTitle is false', () => {
+    const widths = { title: 300, labels: [10], values: [10] };
+    const rowFit = 10 + LABEL_VALUE_GAP + 10 + PADDING_X * 2;
+    expect(computeTooltipWidth(widths, false, 40)).toBe(rowFit);
+    expect(computeTooltipWidth(widths, false, 80)).toBe(80);
+  });
+
+  it('uses the widest row when multiple items are present', () => {
+    const widths = {
+      title: 0,
+      labels: [10, 50],
+      values: [10, 50],
+    };
+    const widestRow = 50 + LABEL_VALUE_GAP + 50;
+    const expected = widestRow + PADDING_X * 2;
+    expect(computeTooltipWidth(widths, false, 80)).toBe(expected);
+  });
+});
+
+describe('computeTooltipX', () => {
+  const drawingArea = { x: 0, y: 0, width: 400, height: 200 };
+
+  it('places tooltip to the right when there is enough space', () => {
+    expect(computeTooltipX(100, 10, 80, drawingArea)).toBe(110);
+  });
+
+  it('flips to the left when placing right would overflow', () => {
+    expect(computeTooltipX(350, 10, 80, drawingArea)).toBe(260);
+  });
+
+  it('clamps to drawingArea.x when flipped position is negative', () => {
+    expect(computeTooltipX(195, 10, 200, drawingArea)).toBe(0);
+  });
+
+  it('clamps the right-side position to not overflow the right edge', () => {
+    expect(computeTooltipX(100, 10, 400, drawingArea)).toBe(0);
+  });
+
+  it('respects a non-zero drawingArea.x as the minimum clamp', () => {
+    const area = { x: 20, y: 0, width: 400, height: 200 };
+    expect(computeTooltipX(5, 10, 200, area)).toBe(20);
+  });
+
+  it('respects a custom offset', () => {
+    expect(computeTooltipX(100, 20, 80, drawingArea)).toBe(120);
+  });
+});
+
+describe('computeTooltipHeight', () => {
+  it('computes height for a single item without a title', () => {
+    const expected = PADDING_Y * 2 + ROW_HEIGHT;
+    expect(computeTooltipHeight(1, false)).toBe(expected);
+  });
+
+  it('adds the title block height when hasTitle is true', () => {
+    const titleBlockHeight = ROW_HEIGHT + TITLE_GAP;
+    const expected = PADDING_Y * 2 + titleBlockHeight + ROW_HEIGHT;
+    expect(computeTooltipHeight(1, true)).toBe(expected);
+  });
+
+  it('adds row gaps for multiple items', () => {
+    const itemCount = 3;
+    const expected =
+      PADDING_Y * 2 + itemCount * ROW_HEIGHT + (itemCount - 1) * ROW_GAP;
+    expect(computeTooltipHeight(itemCount, false)).toBe(expected);
+  });
+
+  it('combines title block and row gaps correctly', () => {
+    const itemCount = 2;
+    const titleBlockHeight = ROW_HEIGHT + TITLE_GAP;
+    const expected =
+      PADDING_Y * 2 +
+      titleBlockHeight +
+      itemCount * ROW_HEIGHT +
+      (itemCount - 1) * ROW_GAP;
+    expect(computeTooltipHeight(itemCount, true)).toBe(expected);
+  });
+});
+
+describe('computeItemsBaseY', () => {
+  it('returns drawingAreaY + PADDING_Y when there is no title', () => {
+    expect(computeItemsBaseY(10, false)).toBe(10 + PADDING_Y);
+  });
+
+  it('adds the title block height when hasTitle is true', () => {
+    const titleBlockHeight = ROW_HEIGHT + TITLE_GAP;
+    expect(computeItemsBaseY(10, true)).toBe(10 + PADDING_Y + titleBlockHeight);
+  });
+
+  it('handles drawingAreaY of 0', () => {
+    expect(computeItemsBaseY(0, false)).toBe(PADDING_Y);
+  });
+});
+
+describe('measureWidths', () => {
+  const makeBBoxEl = (width: number) => ({
+    getBBox: jest.fn(async () => ({ width })),
+  });
+
+  const makeRaf = () =>
+    jest
+      .spyOn(global, 'requestAnimationFrame')
+      .mockImplementation((cb: FrameRequestCallback) => {
+        cb(0);
+        return 0;
+      });
+
+  it('measures title, label and value widths after a RAF tick', async () => {
+    const raf = makeRaf();
+
+    const titleEl = makeBBoxEl(50);
+    const labelEl = makeBBoxEl(30);
+    const valueEl = makeBBoxEl(20);
+
+    const items = [{ label: 'L', value: 'V' }];
+    const titleRef = { current: titleEl };
+    const labelRefs = { current: [labelEl] };
+    const valueRefs = { current: [valueEl] };
+
+    const result = await measureWidths(
+      items,
+      true,
+      titleRef,
+      labelRefs,
+      valueRefs,
+    ).promise;
+
+    expect(result).toEqual({ title: 50, labels: [30], values: [20] });
+    raf.mockRestore();
+  });
+
+  it('returns 0 for the title when hasTitle is false', async () => {
+    const raf = makeRaf();
+
+    const items = [{ label: 'L', value: 'V' }];
+    const titleRef = { current: makeBBoxEl(99) };
+    const labelRefs = { current: [makeBBoxEl(10)] };
+    const valueRefs = { current: [makeBBoxEl(10)] };
+
+    const result = await measureWidths(
+      items,
+      false,
+      titleRef,
+      labelRefs,
+      valueRefs,
+    ).promise;
+
+    expect(result.title).toBe(0);
+    raf.mockRestore();
+  });
+
+  it('measures multiple items', async () => {
+    const raf = makeRaf();
+
+    const items = [
+      { label: 'A', value: '1' },
+      { label: 'B', value: '2' },
+    ];
+    const titleRef = { current: null };
+    const labelRefs = { current: [makeBBoxEl(10), makeBBoxEl(20)] };
+    const valueRefs = { current: [makeBBoxEl(5), makeBBoxEl(15)] };
+
+    const result = await measureWidths(
+      items,
+      false,
+      titleRef,
+      labelRefs,
+      valueRefs,
+    ).promise;
+
+    expect(result.labels).toEqual([10, 20]);
+    expect(result.values).toEqual([5, 15]);
+    raf.mockRestore();
+  });
+
+  it('returns 0 for null refs', async () => {
+    const raf = makeRaf();
+
+    const items = [{ label: 'L', value: 'V' }];
+    const titleRef = { current: null };
+    const labelRefs = { current: [null] };
+    const valueRefs = { current: [null] };
+
+    const result = await measureWidths(
+      items,
+      true,
+      titleRef,
+      labelRefs,
+      valueRefs,
+    ).promise;
+
+    expect(result).toEqual({ title: 0, labels: [0], values: [0] });
+    raf.mockRestore();
+  });
+});

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

@@ -0,0 +1,243 @@
+import type { RefObject } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import type { DrawingArea } from '../../../utils/types';
+import type { ChartTooltipItemData, SvgBBoxElement } from '../types';
+import {
+  LABEL_VALUE_GAP,
+  PADDING_X,
+  PADDING_Y,
+  ROW_GAP,
+  ROW_HEIGHT,
+  TITLE_GAP,
+} from './constants';
+
+type Widths = {
+  title: number;
+  labels: number[];
+  values: number[];
+};
+
+type UseTooltipMeasurementReturn = {
+  widths: Widths | null;
+  titleRef: RefObject<SvgBBoxElement | null>;
+  labelRefs: RefObject<(SvgBBoxElement | null)[]>;
+  valueRefs: RefObject<(SvgBBoxElement | null)[]>;
+};
+
+export const safeGetBBoxWidth = async (
+  el: SvgBBoxElement | null,
+): Promise<number> => {
+  if (!el) return 0;
+  try {
+    const result = await el.getBBox();
+    return result?.width ?? 0;
+  } catch {
+    return 0;
+  }
+};
+
+/**
+ * Derive the auto-fit tooltip width from measured text widths,
+ * clamped to a minimum floor.
+ */
+export const computeTooltipWidth = (
+  widths: Widths | null,
+  hasTitle: boolean,
+  minWidth: number,
+): number => {
+  const titleWidth = widths && hasTitle ? widths.title : 0;
+  const rowWidths = widths
+    ? widths.labels.map(
+        (lw, i) => lw + LABEL_VALUE_GAP + (widths.values[i] ?? 0),
+      )
+    : [];
+  const contentWidth = Math.max(titleWidth, ...rowWidths);
+  const fitWidth = contentWidth + PADDING_X * 2;
+  return Math.max(fitWidth, minWidth);
+};
+
+/**
+ * Compute the tooltip's horizontal position, flipping to the left
+ * of the scrubber line when it would overflow the drawing area.
+ * Also clamps from above to prevent overflow on the right edge.
+ */
+export const computeTooltipX = (
+  pixelX: number,
+  offset: number,
+  tooltipWidth: number,
+  drawingArea: DrawingArea,
+): number => {
+  const shouldFlip =
+    pixelX + offset + tooltipWidth > drawingArea.x + drawingArea.width;
+  const preferredTooltipX = shouldFlip
+    ? pixelX - offset - tooltipWidth
+    : pixelX + offset;
+  const maxTooltipX = Math.max(
+    drawingArea.x,
+    drawingArea.x + drawingArea.width - tooltipWidth,
+  );
+  return Math.min(maxTooltipX, Math.max(drawingArea.x, preferredTooltipX));
+};
+
+/**
+ * Compute the total tooltip height from item count and title presence.
+ */
+export const computeTooltipHeight = (
+  itemCount: number,
+  hasTitle: boolean,
+): number => {
+  const titleBlockHeight = hasTitle ? ROW_HEIGHT + TITLE_GAP : 0;
+  return (
+    PADDING_Y * 2 +
+    titleBlockHeight +
+    itemCount * ROW_HEIGHT +
+    (itemCount - 1) * ROW_GAP
+  );
+};
+
+/**
+ * Vertical offset where tooltip rows begin, accounting for title presence.
+ */
+export const computeItemsBaseY = (
+  drawingAreaY: number,
+  hasTitle: boolean,
+): number => {
+  const titleBlockHeight = hasTitle ? ROW_HEIGHT + TITLE_GAP : 0;
+  return drawingAreaY + PADDING_Y + titleBlockHeight;
+};
+
+const waitForAnimationFrame = (): {
+  promise: Promise<void>;
+  cancel: () => void;
+} => {
+  let id: number;
+  const promise = new Promise<void>((resolve) => {
+    id = requestAnimationFrame(() => resolve());
+  });
+  return { promise, cancel: () => cancelAnimationFrame(id) };
+};
+
+/**
+ * Reads the rendered widths of all tooltip text elements via async `getBBox`.
+ * Defers until the next animation frame so layout has settled.
+ * Returns a cancel function so callers can abort the pending RAF.
+ */
+export const measureWidths = (
+  items: ChartTooltipItemData[],
+  hasTitle: boolean,
+  titleRef: RefObject<SvgBBoxElement | null>,
+  labelRefs: RefObject<(SvgBBoxElement | null)[]>,
+  valueRefs: RefObject<(SvgBBoxElement | null)[]>,
+): { promise: Promise<Widths>; cancel: () => void } => {
+  const raf = waitForAnimationFrame();
+  const promise = raf.promise.then(async () => {
+    const title = hasTitle ? await safeGetBBoxWidth(titleRef.current) : 0;
+    const labels = await Promise.all(
+      items.map((_, i) => safeGetBBoxWidth(labelRefs.current[i])),
+    );
+    const values = await Promise.all(
+      items.map((_, i) => safeGetBBoxWidth(valueRefs.current[i])),
+    );
+    return { title, labels, values };
+  });
+  return { promise, cancel: raf.cancel };
+};
+
+/**
+ * Builds a stable string signature for the tooltip's content shape (labels,
+ * title, and item count). Used as the sole dependency of the measurement
+ * effect so re-measurement only happens when something that can change the
+ * tooltip's natural width actually changes — typically once per shape change,
+ * not on every scrub frame as value strings update.
+ */
+const computeShapeSignature = (
+  items: ChartTooltipItemData[],
+  hasTitle: boolean,
+  title: string | number | undefined,
+): string => {
+  let labels = '';
+  for (let i = 0; i < items.length; i++) {
+    if (i > 0) labels += '\u001F';
+    labels += String(items[i].label);
+  }
+  return `${hasTitle ? '1' : '0'}|${labels}|${title ?? ''}`;
+};
+
+/**
+ * Manages SVG text measurement for the tooltip via async `getBBox`.
+ *
+ * Uses `requestAnimationFrame` to defer measurement until after layout, with a
+ * cancellation flag to prevent stale state updates when items change rapidly.
+ *
+ * The effect's dependency is a shape signature (labels + title + count) rather
+ * than the raw `items` reference, so high-frequency value updates during a
+ * scrub do not trigger a fresh measurement chain. Value-width auto-fit is
+ * handled by `minWidth`; consumers that need pixel-perfect value fitting
+ * should set a `minWidth` large enough to cover the widest value.
+ */
+export function useTooltipMeasurement(
+  items: ChartTooltipItemData[],
+  hasTitle: boolean,
+  title: string | number | undefined,
+): UseTooltipMeasurementReturn {
+  const titleRef = useRef<SvgBBoxElement | null>(null);
+  const labelRefs = useRef<(SvgBBoxElement | null)[]>([]);
+  const valueRefs = useRef<(SvgBBoxElement | null)[]>([]);
+
+  const [widths, setWidths] = useState<Widths | null>(null);
+
+  const shapeKey = computeShapeSignature(items, hasTitle, title);
+  const itemsRef = useRef(items);
+  itemsRef.current = items;
+  const hasTitleRef = useRef(hasTitle);
+  hasTitleRef.current = hasTitle;
+
+  useEffect(() => {
+    if (itemsRef.current.length === 0) return;
+
+    let cancelled = false;
+
+    const { promise, cancel } = measureWidths(
+      itemsRef.current,
+      hasTitleRef.current,
+      titleRef,
+      labelRefs,
+      valueRefs,
+    );
+    void promise.then((result) => {
+      if (!cancelled) setWidths(result);
+    });
+
+    return () => {
+      cancelled = true;
+      cancel();
+    };
+  }, [shapeKey]);
+
+  return { widths, titleRef, labelRefs, valueRefs };
+}
+
+type RefSetter = (el: SvgBBoxElement | null) => void;
+
+/**
+ * Builds stable per-index ref-callback arrays that mutate the given refs in
+ * place. Recomputed only when `length` changes, so the same callback identity
+ * is passed to each `ChartTooltipItem` across scrub frames. This unlocks
+ * `React.memo` on `ChartTooltipItem` and avoids the per-frame detach /
+ * re-attach dance of inline arrow ref callbacks.
+ */
+export const useBuildRefSetters = (
+  refs: { current: (SvgBBoxElement | null)[] },
+  length: number,
+): RefSetter[] => {
+  return useMemo(() => {
+    const setters: RefSetter[] = new Array(length);
+    for (let i = 0; i < length; i++) {
+      setters[i] = (el) => {
+        refs.current[i] = el;
+      };
+    }
+    return setters;
+  }, [refs, length]);
+};

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

@@ -1,9 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
-import { useState } from 'react';
-import { Text, View } from 'react-native';
 
 import { StoryDecorator } from '../../../../.storybook/StoryDecorator.tsx';
 import { LineChart } from '../LineChart';
+import { Point } from '../Point';
 import { Scrubber } from './Scrubber';
 import type { ScrubberProps } from './types';
 
@@ -23,21 +22,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof Scrubber>;
 
-const dates = [
-  'Jan',
-  'Feb',
-  'Mar',
-  'Apr',
-  'May',
-  'Jun',
-  'Jul',
-  'Aug',
-  'Sep',
-  'Oct',
-  'Nov',
-  'Dec',
-];
-
 const singleSeries = [
   {
     id: 'prices',
@@ -70,34 +54,10 @@ export const Base: Story = {
   args: {},
 };
 
-export const WithLabel: Story = {
-  render: (args: ScrubberProps) => {
-    const [activeIndex, setActiveIndex] = useState<number | undefined>();
-    const displayIndex = activeIndex ?? singleSeries[0].data.length - 1;
-    return (
-      <View>
-        <Text style={{ marginBottom: 8, fontSize: 14 }}>
-          {dates[displayIndex]} — ${singleSeries[0].data[displayIndex]}
-        </Text>
-        <LineChart
-          series={singleSeries}
-          height={200}
-          showArea
-          enableScrubbing
-          onScrubberPositionChange={setActiveIndex}
-        >
-          <Scrubber {...args} label={(i: number) => dates[i] ?? ''} />
-        </LineChart>
-      </View>
-    );
-  },
-  args: {},
-};
-
 export const MultiSeries: Story = {
   render: (args: ScrubberProps) => (
     <LineChart series={multiSeries} height={200} enableScrubbing>
-      <Scrubber {...args} label={(i: number) => dates[i] ?? ''} showBeacons />
+      <Scrubber {...args} showBeacons />
     </LineChart>
   ),
   args: {},
@@ -120,3 +80,105 @@ export const HiddenOverlay: Story = {
   ),
   args: {},
 };
+
+const tooltipSampleSeries = [
+  {
+    id: 'prices',
+    stroke: '#7B61FF',
+    data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+  },
+];
+
+const tooltipDates = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+  'Jan',
+  'Feb',
+];
+
+const tooltipAnnotatedIndices = new Set([4, 9]);
+
+export const WithBaseTooltip: Story = {
+  render: () => (
+    <LineChart
+      series={tooltipSampleSeries}
+      height={250}
+      enableScrubbing
+      showArea
+    >
+      <Scrubber
+        tooltip={(dataIndex) => ({
+          items: [
+            { label: 'Date', value: tooltipDates[dataIndex] },
+            {
+              label: 'Price',
+              value: `$${tooltipSampleSeries[0].data[dataIndex]}`,
+            },
+          ],
+        })}
+      />
+    </LineChart>
+  ),
+};
+
+export const WithTooltipTitle: Story = {
+  render: () => (
+    <LineChart
+      series={tooltipSampleSeries}
+      height={250}
+      enableScrubbing
+      showArea
+    >
+      <Scrubber
+        tooltip={(dataIndex) => ({
+          title: `${tooltipSampleSeries[0].data[dataIndex]} Transactions`,
+          items: [
+            { label: 'Date', value: tooltipDates[dataIndex] },
+            {
+              label: 'Price',
+              value: `$${tooltipSampleSeries[0].data[dataIndex]}`,
+            },
+          ],
+        })}
+      />
+    </LineChart>
+  ),
+};
+
+export const WithTooltipOnPoints: Story = {
+  render: () => (
+    <LineChart
+      series={tooltipSampleSeries}
+      height={250}
+      enableScrubbing
+      showArea
+    >
+      <Scrubber
+        tooltip={(dataIndex) => {
+          if (!tooltipAnnotatedIndices.has(dataIndex)) return { items: [] };
+          return {
+            items: [
+              { label: 'Date', value: tooltipDates[dataIndex] },
+              {
+                label: 'Price',
+                value: `$${tooltipSampleSeries[0].data[dataIndex]}`,
+              },
+            ],
+          };
+        }}
+      />
+      <Point dataX={4} dataY={98} label='ATH' />
+      <Point dataX={9} dataY={4} label='Low' labelPosition='bottom' />
+    </LineChart>
+  ),
+};

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

@@ -96,15 +96,17 @@ describe('Scrubber', () => {
     expect(getAllByTestId(/scrubber-beacon-/)).toHaveLength(2);
   });
 
-  it('renders a label when a label function is provided', () => {
+  it('renders chart tooltip when tooltip prop is set', () => {
     const { getByTestId } = renderScrubber({
-      scrubberProps: { label: (i: number) => `Index ${i}` },
+      scrubberProps: {
+        tooltip: () => ({ items: [{ label: 'L', value: 'V' }] }),
+      },
     });
-    expect(getByTestId('scrubber-label')).toBeTruthy();
+    expect(getByTestId('chart-tooltip')).toBeTruthy();
   });
 
-  it('does not render a label when no label function is provided', () => {
+  it('does not render chart tooltip when tooltip prop is not set', () => {
     const { queryByTestId } = renderScrubber();
-    expect(queryByTestId('scrubber-label')).toBeNull();
+    expect(queryByTestId('chart-tooltip')).toBeNull();
   });
 });