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

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

@@ -1,17 +1,300 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { View } from 'react-native';
+import { StoryDecorator } from '../../../../.storybook/StoryDecorator.tsx';
+
 import { LineChart } from './LineChart';
 
-const meta: Meta<typeof LineChart> = {
+const meta = {
   component: LineChart,
   title: 'Visualization/LineChart',
   tags: ['experimental'],
-};
+  decorators: [
+    (Story, context) => {
+      return (
+        <StoryDecorator context={context}>
+          <View style={{ width: 600, padding: 16 }}>
+            <Story />
+          </View>
+        </StoryDecorator>
+      );
+    },
+  ],
+} satisfies Meta<typeof LineChart>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof LineChart>;
+
+const sampleSeries = [
+  {
+    id: 'prices',
+    stroke: '#7B61FF',
+    data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+  },
+];
+
+const multiSeries = [
+  {
+    id: 'lineA',
+    label: 'Line A',
+    stroke: '#7B61FF',
+    data: [5, 15, 10, 90, 85, 70, 30, 25, 25],
+  },
+  {
+    id: 'lineB',
+    label: 'Line B',
+    stroke: '#44D7B6',
+    data: [90, 85, 70, 25, 23, 40, 45, 40, 50],
+  },
+];
 
 export const Base: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+  },
+};
+
+export const WithXAxis: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+    },
+  },
+};
+
+export const WithStringLabels: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      data: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+        'Jan',
+        'Feb',
+      ],
+      showLine: true,
+      showGrid: true,
+    },
+  },
+};
+
+export const WithCustomTicks: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+      ticks: [0, 3, 6, 9, 13],
+    },
+  },
+};
+
+export const WithTickFormatter: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      data: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+        'Jan',
+        'Feb',
+      ],
+      showLine: true,
+      tickLabelFormatter: (value) => `${String(value).slice(0, 1)}`,
+    },
+  },
+};
+
+export const XAxisTop: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      position: 'top',
+      showLine: true,
+      showGrid: true,
+    },
+  },
+};
+
+export const MultipleSeries: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: multiSeries,
+    width: 400,
+    height: 300,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+    },
+  },
+};
+
+export const CustomDomain: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+    },
+    yAxis: {
+      domain: { min: 0, max: 100 },
+    },
+  },
+};
+
+export const WithBothAxes: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    showYAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+    },
+    yAxis: {
+      showLine: true,
+      showGrid: true,
+      tickLabelFormatter: (value) => `$${value}`,
+    },
+  },
+};
+
+export const WithBothAxesMultipleSeries: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: multiSeries,
+    width: 400,
+    height: 300,
+    showXAxis: true,
+    showYAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+    },
+    yAxis: {
+      showLine: true,
+      domain: { min: 0, max: 100 },
+    },
+  },
+};
+
+export const WithArea: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showArea: true,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+    },
+  },
+};
+
+export const WithAreaMultipleSeries: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
   args: {
-    series: [],
+    series: multiSeries,
+    width: 400,
+    height: 300,
+    showArea: true,
+    showXAxis: true,
+    showYAxis: true,
+    xAxis: {
+      showLine: true,
+    },
+    yAxis: {
+      showLine: true,
+      domain: { min: 0, max: 100 },
+    },
   },
 };

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

@@ -1,10 +1,79 @@
 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 { LineChart } from './LineChart';
 
+const sampleSeries = [
+  {
+    id: 'test',
+    stroke: '#000',
+    data: [10, 20, 30, 40, 50],
+  },
+];
+
+const LineChartWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+      {children}
+    </ThemeProvider>
+  );
+};
+
 describe('LineChart', () => {
   it('renders the chart container', () => {
-    const { getByTestId } = render(<LineChart series={[]} />);
-    expect(getByTestId('line-chart')).toBeTruthy();
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} height={200} />
+      </LineChartWrapper>,
+    );
+    getByTestId('chart-container');
+  });
+
+  it('renders an Svg element', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} height={200} />
+      </LineChartWrapper>,
+    );
+    getByTestId('chart-svg');
+  });
+
+  it('renders a Path for each series', () => {
+    const { getAllByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} height={200} />
+      </LineChartWrapper>,
+    );
+    expect(getAllByTestId('line-path')).toHaveLength(1);
+  });
+
+  it('renders with no series', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart width={400} height={200} />
+      </LineChartWrapper>,
+    );
+    getByTestId('chart-container');
+  });
+
+  it('renders area fill when showArea is true', () => {
+    const { getByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} height={200} showArea />
+      </LineChartWrapper>,
+    );
+    getByTestId('line-path');
+    getByTestId('line-area');
+  });
+
+  it('does not render area fill when showArea is false', () => {
+    const { queryAllByTestId } = render(
+      <LineChartWrapper>
+        <LineChart series={sampleSeries} width={400} height={200} />
+      </LineChartWrapper>,
+    );
+    expect(queryAllByTestId('line-area')).toHaveLength(0);
   });
 });

package/src/lib/Components/LineChart/LineChart.tsx

@@ -1,38 +1,94 @@
-import { View } from 'react-native';
-import { Rect, Svg, Text as SvgText } from 'react-native-svg';
-import type { Series } from '../../utils';
-
-type LineChartProps = {
-  series: Series[];
-  width?: number;
-  height?: number;
-};
+import { useMemo } from 'react';
+
+import type { AxisConfigProps, ChartInset } from '../../utils/types';
+import { DEFAULT_AXIS_HEIGHT, XAxis } from '../Axis/XAxis';
+import { DEFAULT_AXIS_WIDTH, YAxis } from '../Axis/YAxis';
+import { CartesianChart } from '../CartesianChart';
+import { Line } from '../Line';
+
+import type { LineChartProps } from './types';
+
+export const LineChart = ({
+  series,
+  showArea = false,
+  areaType = 'gradient',
+  showXAxis = false,
+  showYAxis = false,
+  xAxis,
+  yAxis,
+  width,
+  height = 160,
+  inset,
+  children,
+}: LineChartProps) => {
+  const {
+    scaleType: xScaleType,
+    data: xData,
+    domain: xDomain,
+    ...xAxisVisualProps
+  } = xAxis ?? {};
+
+  const {
+    scaleType: yScaleType,
+    data: yData,
+    domain: yDomain,
+    ...yAxisVisualProps
+  } = yAxis ?? {};
+
+  const xAxisConfig: Partial<AxisConfigProps> = {
+    scaleType: xScaleType,
+    data: xData,
+    domain: xDomain,
+  };
+
+  const yAxisConfig: Partial<AxisConfigProps> = {
+    scaleType: yScaleType,
+    data: yData,
+    domain: yDomain,
+  };
+
+  const axisPadding: Partial<ChartInset> | undefined = useMemo(() => {
+    if (!showXAxis && !showYAxis) return undefined;
+    const xAxisPosition =
+      xAxisVisualProps.position === 'top' ? 'top' : 'bottom';
+    const yAxisPosition =
+      yAxisVisualProps.position === 'end' ? 'right' : 'left';
+    const yAxisWidth = yAxisVisualProps.width ?? DEFAULT_AXIS_WIDTH;
+    return {
+      top: showXAxis && xAxisPosition === 'top' ? DEFAULT_AXIS_HEIGHT : 0,
+      bottom: showXAxis && xAxisPosition === 'bottom' ? DEFAULT_AXIS_HEIGHT : 0,
+      left: showYAxis && yAxisPosition === 'left' ? yAxisWidth : 0,
+      right: showYAxis && yAxisPosition === 'right' ? yAxisWidth : 0,
+    };
+  }, [
+    showXAxis,
+    showYAxis,
+    xAxisVisualProps.position,
+    yAxisVisualProps.position,
+    yAxisVisualProps.width,
+  ]);
 
-export function LineChart({
-  series: _series,
-  width = 400,
-  height = 300,
-}: LineChartProps) {
   return (
-    <View
-      testID='line-chart'
-      accessibilityRole='image'
-      accessibilityLabel='Line chart'
+    <CartesianChart
+      series={series ?? []}
+      xAxis={xAxisConfig}
+      yAxis={yAxisConfig}
+      width={width}
+      height={height}
+      inset={inset}
+      axisPadding={axisPadding}
     >
-      <Svg width={width} height={height}>
-        <Rect width={width} height={height} rx={8} fill='#F3F0FA' />
-        <SvgText
-          x={width / 2}
-          y={height / 2}
-          textAnchor='middle'
-          alignmentBaseline='central'
-          fill='#7e4ea5'
-          fontSize={14}
-          fontFamily='Inter'
-        >
-          LineChart placeholder
-        </SvgText>
-      </Svg>
-    </View>
+      {showXAxis && <XAxis {...xAxisVisualProps} />}
+      {showYAxis && <YAxis {...yAxisVisualProps} />}
+      {series?.map((s) => (
+        <Line
+          key={s.id}
+          seriesId={s.id}
+          showArea={showArea}
+          areaType={areaType}
+        />
+      ))}
+      {children}
+    </CartesianChart>
   );
-}
+};

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

@@ -1 +1,2 @@
 export { LineChart } from './LineChart';
+export type { LineChartProps } from './types';

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+
+import type { AxisConfigProps, ChartInset, Series } from '../../utils/types';
+import type { XAxisProps } from '../Axis/XAxis';
+import type { YAxisProps } from '../Axis/YAxis';
+
+export type LineChartProps = {
+  /**
+   * Data series to render as lines.
+   * Each series produces one `<Line>` element.
+   */
+  series?: Series[];
+  /**
+   * Whether to show area fill under all lines.
+   * @default false
+   */
+  showArea?: boolean;
+  /**
+   * Area fill style applied to all lines.
+   * When `'gradient'`, renders a vertical gradient from the stroke color to transparent.
+   * @default 'gradient'
+   */
+  areaType?: 'gradient';
+  /**
+   * Whether to render an x-axis.
+   * @default false
+   */
+  showXAxis?: boolean;
+  /**
+   * Whether to render a y-axis.
+   * @default false
+   */
+  showYAxis?: boolean;
+  /**
+   * Combined axis configuration and visual props for the x-axis.
+   * Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
+   */
+  xAxis?: Partial<AxisConfigProps> & XAxisProps;
+  /**
+   * Combined axis configuration and visual props for the y-axis.
+   * Includes scale/domain settings as well as visual options like `showGrid` and `showLine`.
+   */
+  yAxis?: Partial<AxisConfigProps> & YAxisProps;
+  /**
+   * Width of the chart in pixels.
+   * When omitted, the component auto-measures via `onLayout`.
+   */
+  width?: number;
+  /**
+   * Height of the chart in pixels.
+   * @default 160
+   */
+  height?: number;
+  /**
+   * Padding between the SVG edge and the drawing area.
+   * A number applies uniformly; a partial object overrides individual sides.
+   */
+  inset?: number | Partial<ChartInset>;
+  /**
+   * Additional SVG content rendered inside the chart after lines and axes.
+   */
+  children?: ReactNode;
+};

package/src/lib/utils/domain/domain.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, it } from '@jest/globals';
+
+import type { Series } from '../types';
+
+import { computeDataLength, computeXDomain, computeYDomain } from './domain';
+
+const makeSeries = (data: (number | null)[]): Series => ({
+  id: 'test',
+  stroke: '#000',
+  data,
+});
+
+describe('computeXDomain', () => {
+  it('should derive domain from longest series length', () => {
+    const result = computeXDomain([
+      makeSeries([1, 2, 3]),
+      makeSeries([1, 2, 3, 4, 5]),
+    ]);
+    expect(result).toEqual({ min: 0, max: 4 });
+  });
+
+  it('should return { 0, 0 } for empty series', () => {
+    const result = computeXDomain([]);
+    expect(result).toEqual({ min: 0, max: 0 });
+  });
+
+  it('should use string axis data length', () => {
+    const result = computeXDomain([makeSeries([1, 2])], {
+      data: ['Mon', 'Tue', 'Wed'],
+    });
+    expect(result).toEqual({ min: 0, max: 2 });
+  });
+
+  it('should use numeric axis data min/max', () => {
+    const result = computeXDomain([makeSeries([1])], { data: [10, 30, 20] });
+    expect(result).toEqual({ min: 10, max: 30 });
+  });
+
+  it('should apply partial domain override', () => {
+    const result = computeXDomain([makeSeries([1, 2, 3, 4, 5])], {
+      domain: { min: 1 },
+    });
+    expect(result.min).toBe(1);
+    expect(result.max).toBe(4);
+  });
+
+  it('should apply full domain override', () => {
+    const result = computeXDomain([makeSeries([1, 2, 3])], {
+      domain: { min: 0, max: 10 },
+    });
+    expect(result).toEqual({ min: 0, max: 10 });
+  });
+
+  it('should apply domain function override', () => {
+    const result = computeXDomain([makeSeries([1, 2, 3, 4, 5])], {
+      domain: (bounds: { min: number; max: number }) => ({
+        min: bounds.min - 1,
+        max: bounds.max + 1,
+      }),
+    });
+    expect(result).toEqual({ min: -1, max: 5 });
+  });
+});
+
+describe('computeYDomain', () => {
+  it('should find min/max across all series values', () => {
+    const result = computeYDomain([
+      makeSeries([10, 50, 30]),
+      makeSeries([5, 80]),
+    ]);
+    expect(result).toEqual({ min: 5, max: 80 });
+  });
+
+  it('should skip null values', () => {
+    const result = computeYDomain([makeSeries([null, 10, null, 30, null])]);
+    expect(result).toEqual({ min: 10, max: 30 });
+  });
+
+  it('should return { 0, 1 } when no data values exist', () => {
+    const result = computeYDomain([makeSeries([])]);
+    expect(result).toEqual({ min: 0, max: 1 });
+  });
+
+  it('should handle series without data', () => {
+    const result = computeYDomain([{ id: 's', stroke: '#000' }]);
+    expect(result).toEqual({ min: 0, max: 1 });
+  });
+
+  it('should apply partial domain override', () => {
+    const result = computeYDomain([makeSeries([10, 50])], {
+      domain: { min: 0 },
+    });
+    expect(result).toEqual({ min: 0, max: 50 });
+  });
+
+  it('should apply domain function override', () => {
+    const result = computeYDomain([makeSeries([10, 20, 30])], {
+      domain: (bounds: { min: number; max: number }) => ({
+        min: bounds.min - 5,
+        max: bounds.max + 5,
+      }),
+    });
+    expect(result).toEqual({ min: 5, max: 35 });
+  });
+});
+
+describe('computeDataLength', () => {
+  it('should return longest series length', () => {
+    expect(
+      computeDataLength([makeSeries([1, 2]), makeSeries([1, 2, 3, 4])]),
+    ).toBe(4);
+  });
+
+  it('should return 0 for empty series', () => {
+    expect(computeDataLength([])).toBe(0);
+  });
+
+  it('should prefer axis data length when provided', () => {
+    expect(
+      computeDataLength([makeSeries([1, 2, 3])], {
+        data: ['A', 'B', 'C', 'D', 'E'],
+      }),
+    ).toBe(5);
+  });
+
+  it('should handle series without data', () => {
+    expect(computeDataLength([{ id: 's', stroke: '#000' }])).toBe(0);
+  });
+});