@ledgerhq/lumen-ui-rnative-visualization 0.1.17 → 0.1.19

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

@@ -2,10 +2,7 @@ import { useTheme } from '@ledgerhq/lumen-ui-rnative';
 import { useMemo } from 'react';
 import { G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
 
-import {
-  buildTicksData,
-  isTickOnYAxisDomainEdge,
-} from '../../../utils/ticks/ticks';
+import { buildTicksData } from '../../../utils/ticks/ticks';
 import { useCartesianChartContext } from '../../CartesianChart/context';
 
 import type { YAxisProps } from './types';
@@ -20,6 +17,7 @@ export const YAxis = ({
   showGrid = false,
   showLine = false,
   showTickMark = false,
+  showLabels = true,
   gridLineStyle = 'dashed',
   ticks: ticksProp,
   tickLabelFormatter,
@@ -56,20 +54,18 @@ export const YAxis = ({
   return (
     <G>
       {showGrid &&
-        ticksData
-          .filter((tick) => isTickOnYAxisDomainEdge(tick, drawingArea))
-          .map((tick, i) => (
-            <SvgLine
-              key={`grid-${tick.value}-${i}`}
-              x1={drawingArea.x}
-              y1={tick.position}
-              x2={drawingArea.x + drawingArea.width}
-              y2={tick.position}
-              stroke={gridStroke}
-              strokeWidth={STROKE_WIDTH}
-              strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
-            />
-          ))}
+        ticksData.map((tick, i) => (
+          <SvgLine
+            key={`grid-${tick.value}-${i}`}
+            x1={drawingArea.x}
+            y1={tick.position}
+            x2={drawingArea.x + drawingArea.width}
+            y2={tick.position}
+            stroke={gridStroke}
+            strokeWidth={STROKE_WIDTH}
+            strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
+          />
+        ))}
 
       {showLine && (
         <SvgLine
@@ -96,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,
@@ -24,6 +24,8 @@ export function CartesianChart({
   inset,
   axisPadding,
   ariaLabel = 'Chart',
+  ariaBusy = false,
+  overlay,
   children,
   enableScrubbing = false,
   onScrubberPositionChange,
@@ -75,6 +77,7 @@ export function CartesianChart({
       onLayout={needsMeasurement ? handleLayout : undefined}
       accessibilityRole='image'
       accessibilityLabel={ariaLabel}
+      accessibilityState={{ busy: ariaBusy }}
       style={{
         width: needsMeasurement ? undefined : resolvedWidth,
         height,
@@ -82,33 +85,36 @@ export function CartesianChart({
       }}
     >
       {resolvedWidth > 0 && (
-        <CartesianChartProvider value={contextValue}>
-          <MagneticPointsProvider>
-            <ScrubberProvider
-              width={svgWidth}
-              height={svgHeight}
-              enableScrubbing={enableScrubbing}
-              onScrubberPositionChange={onScrubberPositionChange}
-              style={OVERFLOW_OFFSET}
-              magnetRadius={magnetRadius}
-            >
-              <Svg
-                testID='chart-svg'
+        <>
+          <CartesianChartProvider value={contextValue}>
+            <MagneticPointsProvider>
+              <ScrubberProvider
                 width={svgWidth}
                 height={svgHeight}
-                style={{ overflow: 'visible' }}
+                enableScrubbing={enableScrubbing}
+                onScrubberPositionChange={onScrubberPositionChange}
+                style={OVERFLOW_OFFSET}
+                magnetRadius={magnetRadius}
               >
-                <RevealClipDefs
-                  drawingArea={contextValue.drawingArea}
-                  series={series}
-                  animate={animate}
+                <Svg
+                  testID='chart-svg'
+                  width={svgWidth}
+                  height={svgHeight}
+                  style={{ overflow: 'visible' }}
                 >
-                  {children}
-                </RevealClipDefs>
-              </Svg>
-            </ScrubberProvider>
-          </MagneticPointsProvider>
-        </CartesianChartProvider>
+                  <RevealAnimationProvider
+                    drawingArea={contextValue.drawingArea}
+                    series={series}
+                    animate={animate}
+                  >
+                    {children}
+                  </RevealAnimationProvider>
+                </Svg>
+              </ScrubberProvider>
+            </MagneticPointsProvider>
+          </CartesianChartProvider>
+          {overlay}
+        </>
       )}
     </View>
   );

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

@@ -0,0 +1,68 @@
+import { Text, useStyleSheet } from '@ledgerhq/lumen-ui-rnative';
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+
+type ChartEmptyLabelProps = {
+  children: ReactNode;
+};
+
+const useStyles = () => {
+  return useStyleSheet(
+    (t) => ({
+      container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      pill: {
+        backgroundColor: t.colors.bg.muted,
+        borderRadius: t.borderRadius.xs,
+        paddingHorizontal: t.spacings.s12,
+        paddingVertical: t.spacings.s6,
+      },
+      label: {
+        color: t.colors.text.muted,
+        ...t.typographies.body3,
+      },
+    }),
+    [],
+  );
+};
+
+/**
+ * Centered overlay label shown when a chart has no data (and is not loading).
+ * Rendered through the `overlay` slot of `CartesianChart` so it shares the
+ * chart's positioned container and aligns with the chart footprint. Shared
+ * across cartesian charts (LineChart, future BarChart).
+ *
+ * This is the lib's only non-SVG (View/Text) element, so unlike the chart
+ * visuals (which read raw theme colors for `react-native-svg`) it is styled with
+ * the design system's themed stylesheet, consistent with the components in
+ * `ui-rnative`.
+ */
+export function ChartEmptyLabel({ children }: Readonly<ChartEmptyLabelProps>) {
+  const styles = useStyles();
+
+  return (
+    <View
+      pointerEvents='none'
+      accessibilityElementsHidden={true}
+      importantForAccessibility='no-hide-descendants'
+      style={styles.container}
+    >
+      <View style={styles.pill}>
+        <Text
+          testID='chart-empty-label'
+          style={styles.label}
+          accessible={false}
+        >
+          {children}
+        </Text>
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1 @@
+export { ChartEmptyLabel } from './ChartEmptyLabel';

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}

@@ -6,21 +6,21 @@ import { ClipPath, Defs, Rect } from 'react-native-svg';
 
 import { OVERFLOW_BUFFER } from '../utils';
 
-import { RevealClipContext } from './context';
-import type { RevealClipDefsProps } from './types';
-import { useComputeDataFingerprint, useRevealClipAnimation } from './utils';
+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.
@@ -29,16 +29,16 @@ export function RevealClipDefs({
   const durationMs =
     (transitions?.enter?.duration ?? DEFAULT_DURATION_IN_SECONDS) * 1000;
 
-  const dataFingerprint = useComputeDataFingerprint({ series });
-  const { clipId, animatedRectProps } = useRevealClipAnimation({
+  const dataFingerprint = useDataFingerprint(series);
+  const { clipId, animatedRectProps, pointOpacity } = useRevealAnimation({
     durationMs,
     drawingArea,
     dataFingerprint,
   });
 
   const contextValue = useMemo(
-    () => ({ clipPathAttr: `url(#${clipId})` }),
-    [clipId],
+    () => ({ clipPathAttr: `url(#${clipId})`, pointOpacity }),
+    [clipId, pointOpacity],
   );
 
   if (isDisabled) {
@@ -46,7 +46,7 @@ export function RevealClipDefs({
   }
 
   return (
-    <RevealClipContext.Provider key={dataFingerprint} value={contextValue}>
+    <RevealAnimationContext.Provider value={contextValue}>
       <Defs>
         <ClipPath id={clipId}>
           <AnimatedRect
@@ -60,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,6 +1,7 @@
 import type { ReactNode } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 
-import type { DrawingArea, Series } from '../../../utils';
+import type { DrawingArea, Series } from '../../../utils/types';
 
 export type EnterTransitionConfig = {
   /**
@@ -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],
+  );
+};