@ledgerhq/lumen-ui-rnative-visualization 0.1.2 → 0.1.4

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

@@ -0,0 +1,32 @@
+export type BaseAxisProps = {
+  /**
+   * Whether to render grid lines at each tick.
+   * @default false
+   */
+  showGrid?: boolean;
+  /**
+   * Appearance of the grid lines.
+   * @default 'dashed'
+   */
+  gridLineStyle?: 'solid' | 'dashed';
+  /**
+   * Whether to render the axis baseline.
+   * @default false
+   */
+  showLine?: boolean;
+  /**
+   * Whether to render tick marks at each tick position.
+   * @default false
+   */
+  showTickMark?: boolean;
+  /**
+   * Explicit tick positions along the axis.
+   * When omitted, ticks are computed automatically from the scale.
+   */
+  ticks?: number[];
+  /**
+   * Formats a tick value into its display label.
+   * Receives the raw tick value (number or string label) and must return a string.
+   */
+  tickLabelFormatter?: (value: number | string) => string;
+};

package/src/lib/Components/Axis/XAxis/XAxis.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect } 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 { CartesianChart } from '../../CartesianChart';
+
+import type { XAxisProps } from './types';
+import { XAxis } from './XAxis';
+
+const sampleSeries = [
+  { id: 'test', stroke: '#000', data: [10, 20, 30, 40, 50] },
+];
+
+const renderXAxis = (props: XAxisProps = {}) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+      <CartesianChart series={sampleSeries} width={400} height={200}>
+        <XAxis {...props} />
+      </CartesianChart>
+    </ThemeProvider>,
+  );
+
+describe('XAxis', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = renderXAxis();
+    getByTestId('chart-svg');
+  });
+
+  it('renders tick labels for explicit ticks', () => {
+    const { getByText } = renderXAxis({ ticks: [0, 2, 4] });
+    getByText('0');
+    getByText('2');
+    getByText('4');
+  });
+
+  it('does not render tick labels for empty ticks', () => {
+    const { queryByText } = renderXAxis({ ticks: [] });
+    expect(queryByText('0')).toBeNull();
+  });
+
+  it('applies tickLabelFormatter', () => {
+    const formatter = (value: number | string) => `v${value}`;
+    const { getByText } = renderXAxis({
+      ticks: [0, 4],
+      tickLabelFormatter: formatter,
+    });
+    getByText('v0');
+    getByText('v4');
+  });
+
+  it('renders with showGrid enabled', () => {
+    const { toJSON } = renderXAxis({ showGrid: true, ticks: [0, 2] });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with showLine enabled', () => {
+    const { toJSON } = renderXAxis({ showLine: true, ticks: [] });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with showTickMark enabled', () => {
+    const { toJSON } = renderXAxis({ showTickMark: true, ticks: [0, 2] });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with all visual options enabled', () => {
+    const { getByText } = renderXAxis({
+      showGrid: true,
+      showLine: true,
+      showTickMark: true,
+      ticks: [0, 4],
+    });
+    getByText('0');
+    getByText('4');
+  });
+
+  it('does not render axis when width is 0', () => {
+    const { queryByText } = render(
+      <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+        <CartesianChart series={sampleSeries} width={0} height={200}>
+          <XAxis ticks={[0, 2, 4]} />
+        </CartesianChart>
+      </ThemeProvider>,
+    );
+    expect(queryByText('0')).toBeNull();
+    expect(queryByText('2')).toBeNull();
+  });
+});

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

@@ -0,0 +1,116 @@
+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,
+  isTickOnXAxisDomainEdge,
+} from '../../../utils/ticks/ticks';
+import { useCartesianChartContext } from '../../CartesianChart/context';
+
+import type { XAxisProps } from './types';
+
+const STROKE_WIDTH = 1;
+const TICK_MARK_SIZE = 4;
+const TICK_LABEL_OFFSET = 6;
+export const DEFAULT_AXIS_HEIGHT = 28;
+
+export const XAxis = ({
+  gridLineStyle = 'dashed',
+  position = 'bottom',
+  showGrid = false,
+  showLine = false,
+  showTickMark = false,
+  ticks: ticksProp,
+  tickLabelFormatter,
+}: XAxisProps) => {
+  const { getXScale, getXAxisConfig, drawingArea } = useCartesianChartContext();
+  const { theme } = useTheme();
+
+  const xScale = getXScale();
+  const xAxisConfig = getXAxisConfig();
+
+  const ticksData = useMemo(
+    () =>
+      xScale
+        ? buildTicksData(xScale, xAxisConfig, ticksProp, tickLabelFormatter)
+        : [],
+    [xScale, xAxisConfig, ticksProp, tickLabelFormatter],
+  );
+
+  if (!xScale || drawingArea.width <= 0) {
+    return null;
+  }
+
+  const isTop = position === 'top';
+  const axisY = isTop ? drawingArea.y : drawingArea.y + drawingArea.height;
+
+  const fontSize = theme.typographies.body4.fontSize;
+  const tickDirection = isTop ? -1 : 1;
+  const labelY = axisY + tickDirection * (TICK_MARK_SIZE + TICK_LABEL_OFFSET);
+  const labelDy = isTop ? 0 : fontSize * 0.8;
+
+  const gridStroke = theme.colors.border.mutedSubtle;
+  const lineStroke = theme.colors.border.muted;
+  const textFill = theme.colors.text.muted;
+
+  return (
+    <G>
+      {showGrid &&
+        ticksData
+          .filter((tick) => isTickOnXAxisDomainEdge(tick, drawingArea))
+          .map((tick, i) => (
+            <SvgLine
+              key={`grid-${tick.value}-${i}`}
+              x1={tick.position}
+              y1={drawingArea.y}
+              x2={tick.position}
+              y2={drawingArea.y + drawingArea.height}
+              stroke={gridStroke}
+              strokeWidth={STROKE_WIDTH}
+              strokeDasharray={gridLineStyle === 'dashed' ? '3 3' : undefined}
+            />
+          ))}
+
+      {showLine && (
+        <SvgLine
+          x1={drawingArea.x}
+          y1={axisY}
+          x2={drawingArea.x + drawingArea.width}
+          y2={axisY}
+          stroke={lineStroke}
+          strokeWidth={STROKE_WIDTH}
+          strokeLinecap='square'
+        />
+      )}
+
+      {showTickMark &&
+        ticksData.map((tick, i) => (
+          <SvgLine
+            key={`tick-${tick.value}-${i}`}
+            x1={tick.position}
+            y1={axisY}
+            x2={tick.position}
+            y2={axisY + tickDirection * TICK_MARK_SIZE}
+            stroke={lineStroke}
+            strokeWidth={STROKE_WIDTH}
+          />
+        ))}
+
+      {ticksData.map((tick, i) => (
+        <SvgText
+          key={`label-${tick.value}-${i}`}
+          x={tick.position}
+          y={labelY}
+          dy={labelDy}
+          textAnchor='middle'
+          fill={textFill}
+          fontSize={fontSize}
+          fontFamily={theme.fontFamilies.sans}
+        >
+          {tick.label}
+        </SvgText>
+      ))}
+    </G>
+  );
+};

package/src/lib/Components/Axis/XAxis/index.ts

@@ -0,0 +1,2 @@
+export { XAxis, DEFAULT_AXIS_HEIGHT } from './XAxis';
+export type { XAxisProps } from './types';

package/src/lib/Components/Axis/XAxis/types.ts

@@ -0,0 +1,9 @@
+import type { BaseAxisProps } from '../Axis.types';
+
+export type XAxisProps = BaseAxisProps & {
+  /**
+   * Where the x-axis is rendered relative to the drawing area.
+   * @default 'bottom'
+   */
+  position?: 'top' | 'bottom';
+};

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

@@ -0,0 +1,89 @@
+import { describe, it, expect } 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 { CartesianChart } from '../../CartesianChart';
+
+import type { YAxisProps } from './types';
+import { YAxis } from './YAxis';
+
+const sampleSeries = [
+  { id: 'test', stroke: '#000', data: [10, 20, 30, 40, 50] },
+];
+
+const renderYAxis = (props: YAxisProps = {}) =>
+  render(
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+      <CartesianChart series={sampleSeries} width={400} height={200}>
+        <YAxis {...props} />
+      </CartesianChart>
+    </ThemeProvider>,
+  );
+
+describe('YAxis', () => {
+  it('renders without crashing', () => {
+    const { getByTestId } = renderYAxis();
+    getByTestId('chart-svg');
+  });
+
+  it('renders tick labels for explicit ticks', () => {
+    const { getByText } = renderYAxis({ ticks: [10, 30, 50] });
+    getByText('10');
+    getByText('30');
+    getByText('50');
+  });
+
+  it('does not render tick labels for empty ticks', () => {
+    const { queryByText } = renderYAxis({ ticks: [] });
+    expect(queryByText('10')).toBeNull();
+  });
+
+  it('applies tickLabelFormatter', () => {
+    const formatter = (value: number | string) => `$${value}`;
+    const { getByText } = renderYAxis({
+      ticks: [10, 50],
+      tickLabelFormatter: formatter,
+    });
+    getByText('$10');
+    getByText('$50');
+  });
+
+  it('renders with showGrid enabled', () => {
+    const { toJSON } = renderYAxis({ showGrid: true, ticks: [10, 30] });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with showLine enabled', () => {
+    const { toJSON } = renderYAxis({ showLine: true, ticks: [] });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with showTickMark enabled', () => {
+    const { toJSON } = renderYAxis({ showTickMark: true, ticks: [10, 30] });
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it('renders with all visual options enabled', () => {
+    const { getByText } = renderYAxis({
+      showGrid: true,
+      showLine: true,
+      showTickMark: true,
+      ticks: [10, 50],
+    });
+    getByText('10');
+    getByText('50');
+  });
+
+  it('does not render axis when height is 0', () => {
+    const { queryByText } = render(
+      <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+        <CartesianChart series={sampleSeries} width={400} height={0}>
+          <YAxis ticks={[10, 30, 50]} />
+        </CartesianChart>
+      </ThemeProvider>,
+    );
+    expect(queryByText('10')).toBeNull();
+    expect(queryByText('30')).toBeNull();
+  });
+});

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

@@ -0,0 +1,115 @@
+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 { useCartesianChartContext } from '../../CartesianChart/context';
+
+import type { YAxisProps } from './types';
+
+const STROKE_WIDTH = 1;
+const TICK_MARK_SIZE = 4;
+const TICK_LABEL_OFFSET = 6;
+export const DEFAULT_AXIS_WIDTH = 40;
+
+export const YAxis = ({
+  position = 'start',
+  showGrid = false,
+  showLine = false,
+  showTickMark = false,
+  gridLineStyle = 'dashed',
+  ticks: ticksProp,
+  tickLabelFormatter,
+}: YAxisProps) => {
+  const { getYScale, getYAxisConfig, drawingArea } = useCartesianChartContext();
+  const { theme } = useTheme();
+
+  const yScale = getYScale();
+  const yAxisConfig = getYAxisConfig();
+
+  const ticksData = useMemo(
+    () =>
+      yScale
+        ? buildTicksData(yScale, yAxisConfig, ticksProp, tickLabelFormatter)
+        : [],
+    [yScale, yAxisConfig, ticksProp, tickLabelFormatter],
+  );
+
+  if (!yScale || drawingArea.height <= 0) {
+    return null;
+  }
+
+  const isStart = position === 'start';
+  const axisX = isStart ? drawingArea.x : drawingArea.x + drawingArea.width;
+  const tickDirection = isStart ? -1 : 1;
+  const labelX = axisX + tickDirection * (TICK_MARK_SIZE + TICK_LABEL_OFFSET);
+  const fontSize = theme.typographies.body4.fontSize;
+  const labelDy = fontSize * 0.35;
+
+  const gridStroke = theme.colors.border.mutedSubtle;
+  const lineStroke = theme.colors.border.muted;
+  const textFill = theme.colors.text.muted;
+
+  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}
+            />
+          ))}
+
+      {showLine && (
+        <SvgLine
+          x1={axisX}
+          y1={drawingArea.y}
+          x2={axisX}
+          y2={drawingArea.y + drawingArea.height}
+          stroke={lineStroke}
+          strokeWidth={STROKE_WIDTH}
+          strokeLinecap='square'
+        />
+      )}
+
+      {showTickMark &&
+        ticksData.map((tick, i) => (
+          <SvgLine
+            key={`tick-${tick.value}-${i}`}
+            x1={axisX}
+            y1={tick.position}
+            x2={axisX + tickDirection * TICK_MARK_SIZE}
+            y2={tick.position}
+            stroke={lineStroke}
+            strokeWidth={STROKE_WIDTH}
+          />
+        ))}
+
+      {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/Axis/YAxis/index.ts

@@ -0,0 +1,2 @@
+export { YAxis, DEFAULT_AXIS_WIDTH } from './YAxis';
+export type { YAxisProps } from './types';

package/src/lib/Components/Axis/YAxis/types.ts

@@ -0,0 +1,14 @@
+import type { BaseAxisProps } from '../Axis.types';
+
+export type YAxisProps = BaseAxisProps & {
+  /**
+   * Where the y-axis is rendered relative to the drawing area.
+   * @default 'start'
+   */
+  position?: 'start' | 'end';
+  /**
+   * Width of the axis in pixels.
+   * @default 40
+   */
+  width?: number;
+};

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

@@ -0,0 +1,153 @@
+import { useCallback, useMemo, useState } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import { Svg } from 'react-native-svg';
+
+import type { ChartInset } from '../../utils/types';
+
+import { CartesianChartProvider, useBuildChartContext } from './context';
+import type { CartesianChartProps } from './types';
+
+const DEFAULT_HEIGHT = 160;
+const DEFAULT_INSET: ChartInset = {
+  top: 5,
+  right: 20,
+  bottom: 0,
+  left: 20,
+};
+
+const DEFAULT_NEGATIVE_MARGIN = {
+  marginLeft: -20,
+  marginRight: -20,
+};
+
+const ZERO_PADDING: ChartInset = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+const resolveInset = (inset: CartesianChartProps['inset']): ChartInset => {
+  if (inset === undefined) {
+    return DEFAULT_INSET;
+  }
+
+  if (typeof inset === 'number') {
+    return {
+      top: inset + DEFAULT_INSET.top,
+      right: inset + DEFAULT_INSET.right,
+      bottom: inset + DEFAULT_INSET.bottom,
+      left: inset + DEFAULT_INSET.left,
+    };
+  }
+  return {
+    top: (inset.top ?? 0) + DEFAULT_INSET.top,
+    right: (inset.right ?? 0) + DEFAULT_INSET.right,
+    bottom: (inset.bottom ?? 0) + DEFAULT_INSET.bottom,
+    left: (inset.left ?? 0) + DEFAULT_INSET.left,
+  };
+};
+
+const resolveAxisPadding = (
+  padding: CartesianChartProps['axisPadding'],
+): ChartInset => {
+  if (padding === undefined) {
+    return ZERO_PADDING;
+  }
+
+  return {
+    top: padding.top ?? 0,
+    right: padding.right ?? 0,
+    bottom: padding.bottom ?? 0,
+    left: padding.left ?? 0,
+  };
+};
+
+export const CartesianChart = ({
+  series,
+  xAxis,
+  yAxis,
+  width,
+  height = DEFAULT_HEIGHT,
+  inset,
+  axisPadding,
+  ariaLabel = 'Chart',
+  children,
+}: CartesianChartProps) => {
+  const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(width);
+
+  const needsMeasurement = width === undefined;
+
+  const handleLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (needsMeasurement) {
+        setMeasuredWidth(e.nativeEvent.layout.width);
+      }
+    },
+    [needsMeasurement],
+  );
+
+  const resolvedWidth = width ?? measuredWidth ?? 0;
+
+  const resolvedInset = useMemo(() => resolveInset(inset), [inset]);
+  const resolvedAxisPadding = useMemo(
+    () => resolveAxisPadding(axisPadding),
+    [axisPadding],
+  );
+
+  const contextValue = useBuildChartContext({
+    series,
+    xAxis,
+    yAxis,
+    width: resolvedWidth,
+    height,
+    inset: resolvedInset,
+    axisPadding: resolvedAxisPadding,
+  });
+
+  const svgContent = resolvedWidth > 0 && (
+    <Svg
+      testID='chart-svg'
+      width={resolvedWidth}
+      height={height}
+      style={{ overflow: 'visible' }}
+    >
+      <CartesianChartProvider value={contextValue}>
+        {children}
+      </CartesianChartProvider>
+    </Svg>
+  );
+
+  if (needsMeasurement) {
+    return (
+      <View
+        testID='chart-container'
+        onLayout={handleLayout}
+        style={{
+          height,
+          ...DEFAULT_NEGATIVE_MARGIN,
+        }}
+        accessibilityRole='image'
+        accessibilityLabel={ariaLabel}
+      >
+        {svgContent}
+      </View>
+    );
+  }
+
+  return (
+    <View
+      testID='chart-container'
+      accessibilityRole='image'
+      accessibilityLabel={ariaLabel}
+      style={{
+        width: resolvedWidth,
+        height,
+        marginLeft: -20,
+        marginRight: -20,
+      }}
+    >
+      {svgContent}
+    </View>
+  );
+};

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

@@ -0,0 +1,14 @@
+import { createSafeContext } from '@ledgerhq/lumen-utils-shared';
+
+import type { CartesianChartContextValue } from '../../../utils/types';
+
+const [CartesianChartProvider, _useCartesianChartSafeContext] =
+  createSafeContext<CartesianChartContextValue>('CartesianChart');
+
+export const useCartesianChartContext = () =>
+  _useCartesianChartSafeContext({
+    consumerName: 'useCartesianChartContext',
+    contextRequired: true,
+  });
+
+export { CartesianChartProvider };

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

@@ -0,0 +1,10 @@
+export {
+  CartesianChartProvider,
+  useCartesianChartContext,
+} from './cartesianChartContext';
+export {
+  buildScale,
+  computeAxisRange,
+  computeDrawingArea,
+  useBuildChartContext,
+} from './useBuildChartContext';