@ledgerhq/lumen-ui-rnative-visualization 0.1.18 → 0.1.20

package/src/lib/Components/Axis/YAxis/YAxis.tsx

@@ -17,6 +17,7 @@ export const YAxis = ({
   showGrid = false,
   showLine = false,
   showTickMark = false,
+  showLabels = true,
   gridLineStyle = 'dashed',
   ticks: ticksProp,
   tickLabelFormatter,
@@ -91,20 +92,21 @@ export const YAxis = ({
           />
         ))}
 
-      {ticksData.map((tick, i) => (
-        <SvgText
-          key={`label-${tick.value}-${i}`}
-          x={labelX}
-          y={tick.position}
-          dy={labelDy}
-          textAnchor={position === 'start' ? 'end' : 'start'}
-          fill={textFill}
-          fontSize={theme.typographies.body4.fontSize}
-          fontFamily={theme.fontFamilies.sans}
-        >
-          {tick.label}
-        </SvgText>
-      ))}
+      {showLabels &&
+        ticksData.map((tick, i) => (
+          <SvgText
+            key={`label-${tick.value}-${i}`}
+            x={labelX}
+            y={tick.position}
+            dy={labelDy}
+            textAnchor={position === 'start' ? 'end' : 'start'}
+            fill={textFill}
+            fontSize={theme.typographies.body4.fontSize}
+            fontFamily={theme.fontFamilies.sans}
+          >
+            {tick.label}
+          </SvgText>
+        ))}
     </G>
   );
 };

package/src/lib/Components/CartesianChart/CartesianChart.tsx

@@ -5,7 +5,7 @@ import { Svg } from 'react-native-svg';
 import { MagneticPointsProvider } from '../Point/pointContext';
 import { ScrubberProvider } from '../Scrubber/ScrubberProvider';
 import { CartesianChartProvider, useBuildChartContext } from './context';
-import { RevealClipDefs } from './RevealClip';
+import { RevealAnimationProvider } from './RevealAnimation';
 import type { CartesianChartProps } from './types';
 import {
   DEFAULT_HEIGHT,
@@ -102,13 +102,13 @@ export function CartesianChart({
                   height={svgHeight}
                   style={{ overflow: 'visible' }}
                 >
-                  <RevealClipDefs
+                  <RevealAnimationProvider
                     drawingArea={contextValue.drawingArea}
                     series={series}
                     animate={animate}
                   >
                     {children}
-                  </RevealClipDefs>
+                  </RevealAnimationProvider>
                 </Svg>
               </ScrubberProvider>
             </MagneticPointsProvider>

package/src/lib/Components/CartesianChart/{RevealClip/RevealClipDefs.test.tsx → RevealAnimation/RevealAnimationProvider.test.tsx}

@@ -7,8 +7,8 @@ import { Svg } from 'react-native-svg';
 import type { DrawingArea, Series } from '../../../utils/types';
 import { OVERFLOW_BUFFER } from '../utils';
 
-import { useRevealClip } from './context';
-import { RevealClipDefs } from './RevealClipDefs';
+import { usePathReveal, usePointReveal } from './context';
+import { RevealAnimationProvider } from './RevealAnimationProvider';
 
 const drawingArea: DrawingArea = {
   x: 10,
@@ -20,10 +20,15 @@ const drawingArea: DrawingArea = {
 const series: Series[] = [{ id: 'a', stroke: '#000', data: [1, 2, 3] }];
 
 function ClipConsumer() {
-  const clipPath = useRevealClip();
+  const clipPath = usePathReveal();
   return <Svg testID='consumer' clipPath={clipPath} />;
 }
 
+function PointConsumer() {
+  const pointOpacity = usePointReveal();
+  return <Svg testID='point-consumer' opacity={pointOpacity ? 1 : 0} />;
+}
+
 const renderInSvg = (ui: React.ReactElement) =>
   render(
     <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
@@ -31,16 +36,16 @@ const renderInSvg = (ui: React.ReactElement) =>
     </ThemeProvider>,
   );
 
-describe('RevealClipDefs', () => {
+describe('RevealAnimationProvider', () => {
   it('renders children', () => {
     const { getByTestId } = renderInSvg(
-      <RevealClipDefs
+      <RevealAnimationProvider
         drawingArea={drawingArea}
         series={series}
         transitions={{ enter: { duration: 0.5 } }}
       >
         <Svg testID='child' />
-      </RevealClipDefs>,
+      </RevealAnimationProvider>,
     );
 
     expect(getByTestId('child')).toBeTruthy();
@@ -48,13 +53,13 @@ describe('RevealClipDefs', () => {
 
   it('renders a ClipPath with a Rect when animate is true', () => {
     const { UNSAFE_root } = renderInSvg(
-      <RevealClipDefs
+      <RevealAnimationProvider
         drawingArea={drawingArea}
         series={series}
         transitions={{ enter: { duration: 0.5 } }}
       >
         <Svg testID='child' />
-      </RevealClipDefs>,
+      </RevealAnimationProvider>,
     );
 
     const clipPaths = UNSAFE_root.findAllByType('ClipPath' as any);
@@ -71,26 +76,45 @@ describe('RevealClipDefs', () => {
     );
   });
 
-  it('provides clipPathAttr to consumers via context', () => {
+  it('provides clipPathAttr to consumers via usePathReveal', () => {
     const { UNSAFE_root } = renderInSvg(
-      <RevealClipDefs
+      <RevealAnimationProvider
         drawingArea={drawingArea}
         series={series}
         transitions={{ enter: { duration: 0.5 } }}
       >
         <ClipConsumer />
-      </RevealClipDefs>,
+      </RevealAnimationProvider>,
     );
 
     const consumer = UNSAFE_root.findByProps({ testID: 'consumer' });
     expect(consumer.props.clipPath).toMatch(/^url\(#/);
   });
 
+  it('provides a point opacity shared value via usePointReveal', () => {
+    const { UNSAFE_root } = renderInSvg(
+      <RevealAnimationProvider
+        drawingArea={drawingArea}
+        series={series}
+        transitions={{ enter: { duration: 0.5 } }}
+      >
+        <PointConsumer />
+      </RevealAnimationProvider>,
+    );
+
+    const consumer = UNSAFE_root.findByProps({ testID: 'point-consumer' });
+    expect(consumer.props.opacity).toBe(1);
+  });
+
   it('skips ClipPath when animate is false', () => {
     const { UNSAFE_root, getByTestId } = renderInSvg(
-      <RevealClipDefs drawingArea={drawingArea} series={series} animate={false}>
+      <RevealAnimationProvider
+        drawingArea={drawingArea}
+        series={series}
+        animate={false}
+      >
         <Svg testID='child' />
-      </RevealClipDefs>,
+      </RevealAnimationProvider>,
     );
 
     expect(getByTestId('child')).toBeTruthy();
@@ -101,24 +125,43 @@ describe('RevealClipDefs', () => {
 
   it('does not provide clipPathAttr when animate is false', () => {
     const { UNSAFE_root } = renderInSvg(
-      <RevealClipDefs drawingArea={drawingArea} series={series} animate={false}>
+      <RevealAnimationProvider
+        drawingArea={drawingArea}
+        series={series}
+        animate={false}
+      >
         <ClipConsumer />
-      </RevealClipDefs>,
+      </RevealAnimationProvider>,
     );
 
     const consumer = UNSAFE_root.findByProps({ testID: 'consumer' });
     expect(consumer.props.clipPath).toBeUndefined();
   });
 
+  it('does not provide a point opacity value when animate is false', () => {
+    const { UNSAFE_root } = renderInSvg(
+      <RevealAnimationProvider
+        drawingArea={drawingArea}
+        series={series}
+        animate={false}
+      >
+        <PointConsumer />
+      </RevealAnimationProvider>,
+    );
+
+    const consumer = UNSAFE_root.findByProps({ testID: 'point-consumer' });
+    expect(consumer.props.opacity).toBe(0);
+  });
+
   it('renders without crashing when transitions.enter is not defined', () => {
     const { UNSAFE_root, getByTestId } = renderInSvg(
-      <RevealClipDefs
+      <RevealAnimationProvider
         drawingArea={drawingArea}
         series={series}
         transitions={{}}
       >
         <Svg testID='child' />
-      </RevealClipDefs>,
+      </RevealAnimationProvider>,
     );
 
     expect(getByTestId('child')).toBeTruthy();

package/src/lib/Components/CartesianChart/{RevealClip/RevealClipDefs.tsx → RevealAnimation/RevealAnimationProvider.tsx}

@@ -4,24 +4,23 @@ import { useMemo } from 'react';
 import Animated from 'react-native-reanimated';
 import { ClipPath, Defs, Rect } from 'react-native-svg';
 
-import { useDataFingerprint } from '../hooks/useDataFingerprint';
-import { useRevealClipAnimation } from '../hooks/useRevealClipAnimation';
 import { OVERFLOW_BUFFER } from '../utils';
 
-import { RevealClipContext } from './context';
-import type { RevealClipDefsProps } from './types';
+import { RevealAnimationContext } from './context';
+import type { RevealAnimationProps } from './types';
+import { useDataFingerprint, useRevealAnimation } from './utils';
 
 const DEFAULT_DURATION_IN_SECONDS = 0.8;
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
-export function RevealClipDefs({
+export function RevealAnimationProvider({
   children,
   drawingArea,
   series,
   animate = true,
   transitions,
-}: RevealClipDefsProps) {
+}: RevealAnimationProps) {
   /**
    * Disable reveal animation on Android devices due to issues with SVG clip-path animation support.
    * On Android, the animation does not render correctly, so we opt out for a consistent user experience.
@@ -31,15 +30,15 @@ export function RevealClipDefs({
     (transitions?.enter?.duration ?? DEFAULT_DURATION_IN_SECONDS) * 1000;
 
   const dataFingerprint = useDataFingerprint(series);
-  const { clipId, animatedRectProps } = useRevealClipAnimation({
+  const { clipId, animatedRectProps, pointOpacity } = useRevealAnimation({
     durationMs,
     drawingArea,
     dataFingerprint,
   });
 
   const contextValue = useMemo(
-    () => ({ clipPathAttr: `url(#${clipId})` }),
-    [clipId],
+    () => ({ clipPathAttr: `url(#${clipId})`, pointOpacity }),
+    [clipId, pointOpacity],
   );
 
   if (isDisabled) {
@@ -47,7 +46,7 @@ export function RevealClipDefs({
   }
 
   return (
-    <RevealClipContext.Provider key={dataFingerprint} value={contextValue}>
+    <RevealAnimationContext.Provider value={contextValue}>
       <Defs>
         <ClipPath id={clipId}>
           <AnimatedRect
@@ -61,6 +60,6 @@ export function RevealClipDefs({
         </ClipPath>
       </Defs>
       {children}
-    </RevealClipContext.Provider>
+    </RevealAnimationContext.Provider>
   );
 }

package/src/lib/Components/CartesianChart/RevealAnimation/context.ts

@@ -0,0 +1,39 @@
+import { createContext, useContext } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+import { useAnimatedProps } from 'react-native-reanimated';
+
+import type { RevealAnimationContextValue } from './types';
+
+export const RevealAnimationContext = createContext<
+  RevealAnimationContextValue | undefined
+>(undefined);
+
+/**
+ * Clip-path attribute for path-based consumers (e.g. `Line`).
+ * Returns `undefined` when the reveal animation is disabled.
+ */
+export const usePathReveal = (): string | undefined => {
+  return useContext(RevealAnimationContext)?.clipPathAttr;
+};
+
+/**
+ * Raw shared opacity value for the point/accessory fade. Returns `undefined`
+ * when the reveal animation is disabled. Prefer {@link useRevealFadeProps} in
+ * components; this is the low-level primitive for custom needs.
+ */
+export const usePointReveal = (): SharedValue<number> | undefined => {
+  return useContext(RevealAnimationContext)?.pointOpacity;
+};
+
+/**
+ * Ready-to-use animated props for accessory components (e.g. `Point`) that
+ * fade in with the reveal instead of being clipped. Spread directly onto any
+ * animated SVG element via `animatedProps`
+ */
+export const useRevealFadeProps = (): ReturnType<typeof useAnimatedProps> => {
+  const pointOpacity = usePointReveal();
+  return useAnimatedProps(
+    () => ({ opacity: pointOpacity?.value ?? 1 }),
+    [pointOpacity],
+  );
+};

package/src/lib/Components/CartesianChart/RevealAnimation/index.ts

@@ -0,0 +1,2 @@
+export { RevealAnimationProvider } from './RevealAnimationProvider';
+export { usePathReveal, useRevealFadeProps } from './context';

package/src/lib/Components/CartesianChart/{RevealClip → RevealAnimation}/types.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 
 import type { DrawingArea, Series } from '../../../utils/types';
 
@@ -14,7 +15,7 @@ export type EnterTransitionConfig = {
   easing?: string;
 };
 
-export type RevealClipDefsProps = {
+export type RevealAnimationProps = {
   children: ReactNode;
   /**
    * The drawing area whose bounds define the clip rectangle.
@@ -36,3 +37,16 @@ export type RevealClipDefsProps = {
    */
   series: Series[];
 };
+
+/**
+ * Value shared by the reveal animation provider.
+ *
+ * - `clipPathAttr` drives the left-to-right clip wipe consumed by path-based
+ *   components (e.g. `Line`, `LineChartEmptyState`).
+ * - `pointOpacity` is the shared opacity value for accessory components (e.g.
+ *   `Point`) that must not be clipped, so they fade in after the wipe instead.
+ */
+export type RevealAnimationContextValue = {
+  clipPathAttr: string;
+  pointOpacity: SharedValue<number>;
+};

package/src/lib/Components/CartesianChart/RevealAnimation/utils.ts

@@ -0,0 +1,87 @@
+import { useEffect, useId, useMemo, useRef } from 'react';
+import {
+  useAnimatedProps,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+
+import type { DrawingArea, Series } from '../../../utils/types';
+import { OVERFLOW_BUFFER } from '../utils';
+
+/**
+ * Duration in ms of an individual point's opacity fade-in.
+ */
+const POINT_FADE_DURATION_IN_MS = 200;
+const POINT_FADE_IN_AFTER_CLIP_IN_MS = -100;
+
+type RevealAnimationConfig = {
+  durationMs: number;
+  drawingArea: DrawingArea;
+  dataFingerprint: string;
+};
+
+type RevealAnimationResult = {
+  clipId: string;
+  animatedRectProps: ReturnType<typeof useAnimatedProps>;
+  pointOpacity: ReturnType<typeof useSharedValue<number>>;
+};
+
+/**
+ * Drives the two reveal animations:
+ * - the left-to-right clip-path wipe (animated `Rect` width, including the
+ *   {@link OVERFLOW_BUFFER} so edge content is revealed too), and
+ * - the point fade-in, delayed so points appear as the wipe finishes.
+ *
+ * On a data change the shared values are reset to `0` (hidden) *synchronously
+ * during render* — before the new line/points are committed and painted — so
+ * they never paint once at the previous cycle's end values (a visible flash).
+ * The effect then animates them back in.
+ */
+export const useRevealAnimation = ({
+  durationMs,
+  drawingArea,
+  dataFingerprint,
+}: RevealAnimationConfig): RevealAnimationResult => {
+  const clipId = useId();
+  const clipWidth = useSharedValue(0);
+  const pointOpacity = useSharedValue(0);
+
+  const previousFingerprint = useRef<string | null>(null);
+  if (previousFingerprint.current !== dataFingerprint) {
+    previousFingerprint.current = dataFingerprint;
+    clipWidth.value = 0;
+    pointOpacity.value = 0;
+  }
+
+  useEffect(() => {
+    clipWidth.value = withTiming(
+      drawingArea.width + OVERFLOW_BUFFER.left + OVERFLOW_BUFFER.right,
+      { duration: durationMs },
+    );
+
+    pointOpacity.value = withDelay(
+      Math.max(durationMs + POINT_FADE_IN_AFTER_CLIP_IN_MS, 0),
+      withTiming(1, { duration: POINT_FADE_DURATION_IN_MS }),
+    );
+  }, [drawingArea.width, durationMs, clipWidth, pointOpacity, dataFingerprint]);
+
+  const animatedRectProps = useAnimatedProps(() => ({
+    width: clipWidth.value,
+  }));
+
+  return { clipId, animatedRectProps, pointOpacity };
+};
+
+/**
+ * Stable signature of every series' data points, memoized on the `series`
+ * reference. Used to key the reveal provider so the reveal animation only
+ * replays when the underlying data actually changes — not on unrelated
+ * re-renders such as scrubbing or hover.
+ */
+export const useDataFingerprint = (series: Series[]): string => {
+  return useMemo(
+    () => series.map((s) => s.data?.join(',') ?? '').join('|'),
+    [series],
+  );
+};

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

@@ -1,7 +1,7 @@
 import type { ChartInset } from '../../utils/types';
 import type { CartesianChartProps } from './types';
 
-export const DEFAULT_HEIGHT = 160;
+export const DEFAULT_HEIGHT = 228;
 
 /**
  * Internal buffer added around the drawing area so SVG content (labels, points,
@@ -30,6 +30,7 @@ export const OVERFLOW_OFFSET = {
   top: -OVERFLOW_BUFFER.top,
   left: -OVERFLOW_BUFFER.left,
 };
+
 export const ZERO_PADDING: ChartInset = {
   top: 0,
   right: 0,

package/src/lib/Components/Line/Line.tsx

@@ -4,7 +4,7 @@ import { Defs, G, LinearGradient, Path, Stop } from 'react-native-svg';
 
 import { isNumericScale } from '../../utils/scales/scales';
 import { useCartesianChartContext } from '../CartesianChart/context';
-import { useRevealClip } from '../CartesianChart/RevealClip';
+import { usePathReveal } from '../CartesianChart/RevealAnimation';
 
 import { LINE_AREA_GRADIENT_OPACITY, LINE_STROKE_WIDTH } from './constants';
 import type { LineProps } from './types';
@@ -16,10 +16,11 @@ export const Line = ({
   showArea = false,
   areaType: _areaType = 'gradient',
   curve,
+  connectNulls,
 }: LineProps) => {
   const { getXScale, getYScale, getXAxisConfig, drawingArea, seriesMap } =
     useCartesianChartContext();
-  const clipPath = useRevealClip();
+  const clipPath = usePathReveal();
 
   const xScale = getXScale();
   const yScale = getYScale();
@@ -31,13 +32,21 @@ export const Line = ({
   const resolvedStroke =
     stroke ?? seriesData?.stroke ?? theme.colors.border.muted;
   const resolvedCurve = curve ?? seriesData?.curve;
+  const resolvedConnectNulls =
+    connectNulls ?? seriesData?.connectNulls ?? false;
 
   const points = useMemo(
     () =>
       seriesData?.data && xScale && yScale && isNumericScale(yScale)
-        ? toScaledPoints(seriesData.data, xScale, yScale, xAxisConfig?.data)
+        ? toScaledPoints(
+            seriesData.data,
+            xScale,
+            yScale,
+            xAxisConfig?.data,
+            resolvedConnectNulls,
+          )
         : null,
-    [seriesData, xScale, yScale, xAxisConfig],
+    [seriesData, xScale, yScale, xAxisConfig, resolvedConnectNulls],
   );
 
   const linePath = useMemo(

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

@@ -30,4 +30,11 @@ export type LineProps = {
    * @default 'bump'
    */
   curve?: CurveType;
+  /**
+   * When true, skips null values and draws a continuous line across gaps.
+   * When false, null values create gaps in the line.
+   * When omitted, falls back to the `connectNulls` defined on the series.
+   * @default false
+   */
+  connectNulls?: boolean;
 };

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

@@ -44,17 +44,29 @@ describe('toScaledPoints', () => {
     expect(points![points!.length - 1][0]).toBe(800);
   });
 
-  it('skips null values without affecting the cap', () => {
+  it('keeps null values as holes by default so the line breaks', () => {
     const data: (number | null)[] = [10, null, 30, 40, 50, 60, 70, 80, 90];
     const xData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
 
     const points = toScaledPoints(data, xScale, yScale, xData);
 
     expect(points).not.toBeNull();
-    expect(points).toHaveLength(7);
+    expect(points).toHaveLength(8);
+    expect(points![1][1]).toBeNull();
     expect(points![points!.length - 1][0]).toBe((800 / 7) * 7);
   });
 
+  it('skips null values when connectNulls is true', () => {
+    const data: (number | null)[] = [10, null, 30, 40, 50, 60, 70, 80, 90];
+    const xData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+    const points = toScaledPoints(data, xScale, yScale, xData, true);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(7);
+    expect(points!.every((p) => p[1] !== null)).toBe(true);
+  });
+
   it('uses numeric xData values as the x input', () => {
     const data = [10, 20, 30];
     const customX = [0, 3.5, 7];
@@ -127,4 +139,26 @@ describe('buildLinePath', () => {
 
     expect(path).toBe(buildLinePath(points));
   });
+
+  it('breaks the path into segments at null holes', () => {
+    const gapped: [number, number | null][] = [
+      [0, 100],
+      [50, 80],
+      [100, null],
+      [150, 60],
+      [200, 40],
+    ];
+
+    const path = buildLinePath(gapped, 'linear');
+
+    expect(path).not.toBeNull();
+    expect(path!.match(/M/g)).toHaveLength(2);
+    expect(path).toBe('M0,100L50,80M150,60L200,40');
+  });
+
+  it('draws a single continuous segment when there are no holes', () => {
+    const path = buildLinePath(points, 'linear');
+
+    expect(path!.match(/M/g)).toHaveLength(1);
+  });
 });