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

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

@@ -8,26 +8,26 @@ import {
   LinearGradient,
   Rect,
   Stop,
-  Text as SvgText,
 } from 'react-native-svg';
 
 import { useCartesianChartContext } from '../CartesianChart/context';
 import {
   BEACON_RADIUS,
   BEACON_STROKE_WIDTH,
-  LABEL_OFFSET_Y,
   LINE_GRADIENT_EDGE_OPACITY,
   OVERLAY_LINE_INSET,
   OVERLAY_OFFSET,
   OVERLAY_OPACITY,
 } from './constants';
 import { useScrubberContext } from './context';
+import { DefaultScrubberTooltip } from './DefaultScrubberTooltip/DefaultScrubberTooltip';
 import type { ScrubberProps } from './types';
 import { resolvePixelX, resolvePixelY } from './utils';
 
 /**
  * Renders the scrubber visuals: vertical reference line, future-data overlay
- * rect, per-series beacon dots, and an optional formatted label above the line.
+ * rect, per-series beacon dots, optional label above the line, and an optional
+ * tooltip when {@link ScrubberProps.tooltip} is set, using {@link DefaultScrubberTooltip}.
  *
  * Must be used as a child of `LineChart` (or `CartesianChart`) with
  * `enableScrubbing` enabled. Renders nothing when no scrubber position is active.
@@ -38,12 +38,23 @@ import { resolvePixelX, resolvePixelY } from './utils';
  *   <Scrubber label={(i) => data[i].date} />
  * </LineChart>
  * ```
+ *
+ * @example Tooltip
+ * ```tsx
+ * <Scrubber
+ *   tooltip={(i) => ({
+ *     title: `${counts[i]} Transactions`,
+ *     items: [{ label: 'Index', value: String(i) }],
+ *     minWidth: 160,
+ *   })}
+ * />
+ * ```
  */
 export function Scrubber({
-  label,
   hideLine = false,
   hideOverlay = false,
   showBeacons = false,
+  tooltip,
 }: Readonly<ScrubberProps>) {
   const lineGradientId = useId();
   const { theme } = useTheme();
@@ -76,10 +87,27 @@ export function Scrubber({
       );
   }, [scrubberPosition, showBeacons, series, seriesMap, getYScale]);
 
-  const resolvedLabel = useMemo(() => {
-    if (scrubberPosition === undefined || !label) return undefined;
-    return label(scrubberPosition);
-  }, [scrubberPosition, label]);
+  const tooltipPayload = useMemo(() => {
+    if (scrubberPosition === undefined || !tooltip) {
+      return undefined;
+    }
+
+    const content = tooltip(scrubberPosition);
+
+    if (content.items.length === 0) return undefined;
+
+    const resolvedTitle =
+      typeof content.title === 'function'
+        ? content.title(scrubberPosition)
+        : content.title;
+
+    return {
+      items: content.items,
+      resolvedTitle,
+      offset: content.offset,
+      minWidth: content.minWidth,
+    };
+  }, [scrubberPosition, tooltip]);
 
   if (scrubberPosition === undefined || pixelX === undefined) {
     return null;
@@ -102,7 +130,6 @@ export function Scrubber({
 
   const borderMutedColor = theme.colors.border.base;
   const backgroundBaseColor = theme.colors.bg.base;
-  const textBaseColor = theme.colors.text.base;
   const bgCanvasColor = theme.colors.bg.canvas;
 
   return (
@@ -156,21 +183,6 @@ export function Scrubber({
         />
       )}
 
-      {resolvedLabel !== undefined && (
-        <SvgText
-          testID='scrubber-label'
-          x={pixelX}
-          y={drawY - LABEL_OFFSET_Y}
-          textAnchor='middle'
-          fill={textBaseColor}
-          fontSize={theme.typographies.body4.fontSize}
-          fontWeight={theme.typographies.body4.fontWeight}
-          fontFamily={theme.fontFamilies.sans}
-        >
-          {resolvedLabel}
-        </SvgText>
-      )}
-
       {showBeacons &&
         beacons.map((beacon) => (
           <Circle
@@ -184,6 +196,17 @@ export function Scrubber({
             strokeWidth={BEACON_STROKE_WIDTH}
           />
         ))}
+
+      {tooltipPayload !== undefined && (
+        <DefaultScrubberTooltip
+          pixelX={pixelX}
+          drawingArea={drawingArea}
+          title={tooltipPayload.resolvedTitle}
+          items={tooltipPayload.items}
+          offset={tooltipPayload.offset}
+          minWidth={tooltipPayload.minWidth}
+        />
+      )}
     </G>
   );
 }

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

@@ -9,6 +9,8 @@ import { ScrubberContextProvider } from './context';
 import type { ScrubberProviderProps } from './types';
 import { getDataIndexFromPosition } from './utils';
 
+const LONG_PRESS_MIN_DURATION_MS = 50;
+
 /**
  * Provides scrubbing interaction for a chart.
  *
@@ -32,24 +34,39 @@ export function ScrubberProvider({
   const [scrubberPosition, setScrubberPosition] = useState<
     number | undefined
   >();
-  const lastPositionRef = useRef<number | undefined>(undefined);
 
   const { getXScale, getXAxisConfig, dataLength } = useCartesianChartContext();
 
-  const isScrubbing = useSharedValue(false);
+  // All values touched by the gesture's JS-thread callback live in a single
+  // ref. Reading via `latest.current` keeps the callbacks reference-stable
+  // across data, scale, and prop updates, which in turn keeps `composed` and
+  // the gesture surface JSX stable so re-rendering the provider on each
+  // index change never tears down the GestureDetector or the View tree.
+  const latest = useRef({
+    getXScale,
+    getXAxisConfig,
+    dataLength,
+    onChange: onScrubberPositionChange,
+    lastIndex: undefined as number | undefined,
+  });
+  latest.current.getXScale = getXScale;
+  latest.current.getXAxisConfig = getXAxisConfig;
+  latest.current.dataLength = dataLength;
+  latest.current.onChange = onScrubberPositionChange;
 
   const setScrubberPositionAndNotify = useCallback(
     (index: number | undefined) => {
+      const ref = latest.current;
       const clamped =
-        index === undefined || dataLength <= 0
+        index === undefined || ref.dataLength <= 0
           ? undefined
-          : Math.max(0, Math.min(index, dataLength - 1));
-      if (clamped === lastPositionRef.current) return;
-      lastPositionRef.current = clamped;
+          : Math.max(0, Math.min(index, ref.dataLength - 1));
+      if (clamped === ref.lastIndex) return;
+      ref.lastIndex = clamped;
       setScrubberPosition(clamped);
-      onScrubberPositionChange?.(clamped);
+      ref.onChange?.(clamped);
     },
-    [dataLength, onScrubberPositionChange],
+    [],
   );
 
   const handlePositionChange = useCallback(
@@ -58,22 +75,22 @@ export function ScrubberProvider({
         setScrubberPositionAndNotify(undefined);
         return;
       }
-
-      const scale = getXScale();
-      if (!scale || dataLength <= 0) return;
-
-      const axisConfig = getXAxisConfig();
+      const ref = latest.current;
+      const scale = ref.getXScale();
+      if (!scale || ref.dataLength <= 0) return;
       const index = getDataIndexFromPosition(
         pixelX,
         scale,
-        axisConfig,
-        dataLength,
+        ref.getXAxisConfig(),
+        ref.dataLength,
       );
       setScrubberPositionAndNotify(index);
     },
-    [getXScale, getXAxisConfig, dataLength, setScrubberPositionAndNotify],
+    [setScrubberPositionAndNotify],
   );
 
+  const isScrubbing = useSharedValue(false);
+
   const resetScrubber = useCallback((): void => {
     'worklet';
     isScrubbing.value = false;
@@ -82,7 +99,7 @@ export function ScrubberProvider({
 
   const composed = useMemo(() => {
     const longPress = Gesture.LongPress()
-      .minDuration(50)
+      .minDuration(LONG_PRESS_MIN_DURATION_MS)
       .onStart((e) => {
         'worklet';
         isScrubbing.value = true;
@@ -105,17 +122,12 @@ export function ScrubberProvider({
     return Gesture.Simultaneous(longPress, pan);
   }, [isScrubbing, handlePositionChange, resetScrubber]);
 
-  const contextValue = useMemo(
-    () => ({
-      enableScrubbing,
-      scrubberPosition,
-      onScrubberPositionChange: setScrubberPositionAndNotify,
-    }),
-    [enableScrubbing, scrubberPosition, setScrubberPositionAndNotify],
-  );
-
-  return (
-    <ScrubberContextProvider value={contextValue}>
+  // Memoizing the surface lets React's element-identity bailout skip
+  // reconciling the View / GestureDetector / chart `children` subtree when
+  // only `scrubberPosition` changes. The Scrubber consumer still updates via
+  // context as expected.
+  const surface = useMemo(
+    () => (
       <View style={{ width, height }}>
         {children}
         {enableScrubbing && (
@@ -127,6 +139,22 @@ export function ScrubberProvider({
           </GestureDetector>
         )}
       </View>
+    ),
+    [width, height, children, enableScrubbing, composed],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      enableScrubbing,
+      scrubberPosition,
+      onScrubberPositionChange: setScrubberPositionAndNotify,
+    }),
+    [enableScrubbing, scrubberPosition, setScrubberPositionAndNotify],
+  );
+
+  return (
+    <ScrubberContextProvider value={contextValue}>
+      {surface}
     </ScrubberContextProvider>
   );
 }

package/src/lib/Components/Scrubber/index.ts

@@ -1,3 +1,12 @@
 export { Scrubber } from './Scrubber';
 export { useScrubberContext } from './context';
-export type { ScrubberProps, ScrubberContextValue } from './types';
+
+export type {
+  ChartTooltipItemData,
+  ChartTooltipItemProps,
+  ScrubberContextValue,
+  ScrubberProps,
+  ScrubberTooltipContent,
+  ScrubberTooltipProps,
+  SvgBBoxElement,
+} from './types';

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

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import type { DrawingArea } from '../../utils/types';
+
 export type ScrubberContextValue = {
   /**
    * Whether scrubbing interactions are enabled.
@@ -35,12 +37,109 @@ export type ScrubberProviderProps = {
   onScrubberPositionChange?: (index: number | undefined) => void;
 };
 
-export type ScrubberProps = {
+export type ChartTooltipItemData = {
+  /**
+   * Label displayed on the left side of the row.
+   */
+  label: string | number;
+  /**
+   * Value displayed on the right side of the row.
+   */
+  value: string | number;
+};
+
+export type ChartTooltipItemProps = ChartTooltipItemData & {
+  /**
+   * X position in SVG coordinate space.
+   * @default 0
+   */
+  x?: number;
+  /**
+   * Y midline position in SVG coordinate space.
+   * @default 0
+   */
+  y?: number;
+  /**
+   * Width allocated to this row, used to right-align the value text.
+   */
+  width: number;
+  /**
+   * Optional callback ref forwarded to the label `<Text>` element.
+   * Useful to measure the label's natural width via `getBBox` for auto-fit layouts.
+   */
+  labelRef?: (el: SvgBBoxElement | null) => void;
+  /**
+   * Optional callback ref forwarded to the value `<Text>` element.
+   * Useful to measure the value's natural width via `getBBox` for auto-fit layouts.
+   */
+  valueRef?: (el: SvgBBoxElement | null) => void;
+};
+
+/**
+ * Minimal interface for an SVG element that supports `getBBox`.
+ * Handles both react-native-svg (returns `Rect | undefined`) and web DOM SVG
+ * (returns `DOMRect` synchronously or a Promise on native bridge).
+ */
+export type SvgBBoxElement = {
+  getBBox: () =>
+    | { width: number }
+    | undefined
+    | Promise<{ width: number } | undefined>;
+};
+
+export type ScrubberTooltipLayoutProps = {
   /**
-   * Formats a label string shown above the reference line for a given data index.
-   * When omitted, no label is rendered.
+   * Horizontal gap in pixels between the scrubber line and the tooltip box.
+   * @default 10
    */
-  label?: (dataIndex: number) => string;
+  offset?: number;
+  /**
+   * Minimum width in pixels. The tooltip auto-fits to the rendered content
+   * but never collapses below this floor; raise it to avoid jitter when
+   * value length changes between indices.
+   * @default 80
+   */
+  minWidth?: number;
+};
+
+export type ScrubberTooltipProps = ScrubberTooltipLayoutProps & {
+  /**
+   * Horizontal pixel position of the scrubber line within the SVG coordinate
+   * space. Used to place the tooltip left or right of the line.
+   */
+  pixelX: number;
+  /**
+   * Bounding box of the chart's drawing area (x, y, width, height). Used to
+   * constrain the tooltip so it never overflows the chart boundaries.
+   */
+  drawingArea: DrawingArea;
+  /**
+   * Optional title displayed at the top of the tooltip. Omit to render
+   * the tooltip without a title row.
+   */
+  title?: string | number;
+  /**
+   * List of label/value pairs rendered as rows inside the tooltip body.
+   */
+  items: ChartTooltipItemData[];
+};
+
+/**
+ * Return value of the `tooltip` callback on {@link ScrubberProps}.
+ */
+export type ScrubberTooltipContent = ScrubberTooltipLayoutProps & {
+  /**
+   * Optional header. Static value or callback per data index.
+   * A callback may return `undefined` to suppress the title.
+   */
+  title?: string | number | ((index: number) => string | number | undefined);
+  /**
+   * Tooltip rows for this index. Return an empty array to hide the tooltip.
+   */
+  items: ChartTooltipItemData[];
+};
+
+export type ScrubberProps = {
   /**
    * Hides the vertical reference line.
    * @default false
@@ -56,4 +155,10 @@ export type ScrubberProps = {
    * @default false
    */
   showBeacons?: boolean;
+  /**
+   * Produces tooltip content for the active data index. When set, {@link DefaultScrubberTooltip}
+   * is rendered. Optional `offset` and `minWidth` on the returned object tune layout.
+   * Return `{ items: [] }` to hide the tooltip at an index.
+   */
+  tooltip?: (dataIndex: number) => ScrubberTooltipContent;
 };