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

package/src/lib/Components/CartesianChart/context/useBuildChartContext.test.ts

@@ -0,0 +1,224 @@
+import { describe, expect, it } from '@jest/globals';
+import { renderHook } from '@testing-library/react-native';
+
+import {
+  isCategoricalScale,
+  isNumericScale,
+} from '../../../utils/scales/scales';
+import type {
+  ChartInset,
+  ChartScaleFunction,
+  Series,
+} from '../../../utils/types';
+
+import {
+  buildScale,
+  computeAxisRange,
+  computeDrawingArea,
+  useBuildChartContext,
+} from './useBuildChartContext';
+
+const makeSeries = (data: (number | null)[]): Series => ({
+  id: 'test',
+  stroke: '#000',
+  data,
+});
+
+const DEFAULT_INSET: ChartInset = { top: 0, right: 0, bottom: 0, left: 0 };
+const ZERO_PADDING: ChartInset = { top: 0, right: 0, bottom: 0, left: 0 };
+
+const hookParams = (
+  overrides: Partial<Parameters<typeof useBuildChartContext>[0]> = {},
+) => ({
+  series: [makeSeries([10, 20, 30])],
+  width: 400,
+  height: 200,
+  inset: DEFAULT_INSET,
+  axisPadding: ZERO_PADDING,
+  ...overrides,
+});
+
+describe('computeAxisRange', () => {
+  it('computes x range from drawing area', () => {
+    const { xRange } = computeAxisRange({
+      x: 10,
+      y: 0,
+      width: 100,
+      height: 50,
+    });
+    expect(xRange).toEqual({ min: 10, max: 110 });
+  });
+
+  it('inverts y range for SVG coordinates', () => {
+    const { yRange } = computeAxisRange({
+      x: 0,
+      y: 10,
+      width: 100,
+      height: 200,
+    });
+    expect(yRange).toEqual({ min: 210, max: 10 });
+  });
+});
+
+describe('buildScale', () => {
+  const range = { min: 0, max: 400 };
+
+  it('builds a numeric linear scale by default', () => {
+    const scale = buildScale({ min: 0, max: 100 }, range);
+    expect(isNumericScale(scale)).toBe(true);
+  });
+
+  it('builds a numeric log scale', () => {
+    const scale = buildScale({ min: 1, max: 100 }, range, 'log');
+    expect(isNumericScale(scale)).toBe(true);
+  });
+
+  it('builds a categorical band scale', () => {
+    const scale = buildScale({ min: 0, max: 2 }, range, 'band');
+    expect(isCategoricalScale(scale)).toBe(true);
+  });
+});
+
+describe('computeDrawingArea', () => {
+  it('subtracts inset from available space', () => {
+    const inset: ChartInset = { top: 10, right: 20, bottom: 30, left: 40 };
+    const area = computeDrawingArea(400, 200, inset, ZERO_PADDING);
+    expect(area).toEqual({ x: 40, y: 10, width: 340, height: 160 });
+  });
+
+  it('combines inset and axis padding', () => {
+    const inset: ChartInset = { top: 5, right: 5, bottom: 5, left: 5 };
+    const axisPad: ChartInset = { top: 0, right: 0, bottom: 28, left: 40 };
+    const area = computeDrawingArea(400, 200, inset, axisPad);
+    expect(area).toEqual({ x: 45, y: 5, width: 350, height: 162 });
+  });
+
+  it('clamps negative dimensions to zero', () => {
+    const huge: ChartInset = { top: 100, right: 100, bottom: 100, left: 100 };
+    const area = computeDrawingArea(50, 50, huge, ZERO_PADDING);
+    expect(area.width).toBe(0);
+    expect(area.height).toBe(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Hook integration tests
+// ---------------------------------------------------------------------------
+
+describe('useBuildChartContext', () => {
+  it('returns undefined scales when drawing area is zero', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(hookParams({ width: 0, height: 0 })),
+    );
+    expect(result.current.getXScale()).toBeUndefined();
+    expect(result.current.getYScale()).toBeUndefined();
+  });
+
+  it('creates linear scales by default', () => {
+    const { result } = renderHook(() => useBuildChartContext(hookParams()));
+    const xScale = result.current.getXScale();
+    const yScale = result.current.getYScale();
+    expect(xScale).toBeDefined();
+    expect(yScale).toBeDefined();
+    expect(isNumericScale(xScale as ChartScaleFunction)).toBe(true);
+    expect(isNumericScale(yScale as ChartScaleFunction)).toBe(true);
+  });
+
+  it('creates a band scale when scaleType is band', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(hookParams({ xAxis: { scaleType: 'band' } })),
+    );
+    expect(
+      isCategoricalScale(result.current.getXScale() as ChartScaleFunction),
+    ).toBe(true);
+  });
+
+  it('computes data length from series', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(
+        hookParams({ series: [makeSeries([1, 2, 3, 4, 5])] }),
+      ),
+    );
+    expect(result.current.dataLength).toBe(5);
+  });
+
+  it('computes data length from axis data when provided', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(
+        hookParams({ xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] } }),
+      ),
+    );
+    expect(result.current.dataLength).toBe(5);
+  });
+
+  it('applies domain overrides', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(
+        hookParams({ yAxis: { domain: { min: 0, max: 100 } } }),
+      ),
+    );
+    const yScale = result.current.getYScale()!;
+    expect(isNumericScale(yScale)).toBe(true);
+    expect(yScale.domain()).toEqual([0, 100]);
+  });
+
+  it('applies domain function overrides', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(
+        hookParams({
+          yAxis: {
+            domain: (bounds: { min: number; max: number }) => ({
+              min: bounds.min - 5,
+              max: bounds.max + 5,
+            }),
+          },
+        }),
+      ),
+    );
+    const domain = result.current.getYScale()!.domain();
+    expect(domain[0]).toBe(0);
+    expect(domain[1]).toBe(40);
+  });
+
+  it('inverts Y range for SVG coordinates', () => {
+    const { result } = renderHook(() =>
+      useBuildChartContext(
+        hookParams({
+          inset: { top: 10, right: 0, bottom: 0, left: 0 },
+        }),
+      ),
+    );
+    const yScale = result.current.getYScale()!;
+    const range = yScale.range();
+    expect(range[0]).toBeGreaterThan(range[1]);
+  });
+
+  it('exposes series and axis configs', () => {
+    const series = [makeSeries([1, 2])];
+    const xAxis = { scaleType: 'linear' as const };
+    const { result } = renderHook(() =>
+      useBuildChartContext(hookParams({ series, xAxis })),
+    );
+    expect(result.current.series).toBe(series);
+    expect(result.current.getXAxisConfig()).toBe(xAxis);
+  });
+
+  it('builds a seriesMap for lookups', () => {
+    const series = [makeSeries([1, 2])];
+    const { result } = renderHook(() =>
+      useBuildChartContext(hookParams({ series })),
+    );
+    expect(result.current.seriesMap.get('test')).toBe(series[0]);
+    expect(result.current.seriesMap.size).toBe(1);
+  });
+
+  it('applies static axisPadding to drawingArea', () => {
+    const axisPadding: ChartInset = { top: 0, right: 0, bottom: 28, left: 40 };
+    const { result } = renderHook(() =>
+      useBuildChartContext(hookParams({ axisPadding })),
+    );
+    expect(result.current.drawingArea.x).toBe(40);
+    expect(result.current.drawingArea.width).toBe(400 - 40);
+    expect(result.current.drawingArea.height).toBe(200 - 28);
+  });
+});

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

@@ -0,0 +1,115 @@
+import { useMemo } from 'react';
+
+import {
+  computeDataLength,
+  computeXDomain,
+  computeYDomain,
+} from '../../../utils/domain/domain';
+import {
+  getCategoricalScale,
+  getNumericScale,
+  isBandScaleType,
+} from '../../../utils/scales/scales';
+import type {
+  AxisBounds,
+  AxisConfigProps,
+  CartesianChartContextValue,
+  ChartInset,
+  ChartScaleFunction,
+  DrawingArea,
+  Series,
+} from '../../../utils/types';
+
+type UseBuildChartContextParams = {
+  series: Series[];
+  xAxis?: Partial<AxisConfigProps>;
+  yAxis?: Partial<AxisConfigProps>;
+  width: number;
+  height: number;
+  inset: ChartInset;
+  axisPadding: ChartInset;
+};
+
+type AxisRange = { min: number; max: number };
+
+export const computeAxisRange = (
+  drawingArea: DrawingArea,
+): { xRange: AxisRange; yRange: AxisRange } => ({
+  xRange: { min: drawingArea.x, max: drawingArea.x + drawingArea.width },
+  yRange: {
+    min: drawingArea.y + drawingArea.height,
+    max: drawingArea.y,
+  },
+});
+
+export const buildScale = (
+  domain: AxisBounds,
+  range: AxisRange,
+  scaleType: AxisConfigProps['scaleType'] = 'linear',
+): ChartScaleFunction =>
+  isBandScaleType(scaleType)
+    ? getCategoricalScale({ domain, range })
+    : getNumericScale({ scaleType, domain, range });
+
+export const computeDrawingArea = (
+  width: number,
+  height: number,
+  inset: ChartInset,
+  axisPadding: ChartInset,
+): DrawingArea => {
+  const totalInset = {
+    top: inset.top + axisPadding.top,
+    right: inset.right + axisPadding.right,
+    bottom: inset.bottom + axisPadding.bottom,
+    left: inset.left + axisPadding.left,
+  };
+  return {
+    x: totalInset.left,
+    y: totalInset.top,
+    width: Math.max(0, width - totalInset.left - totalInset.right),
+    height: Math.max(0, height - totalInset.top - totalInset.bottom),
+  };
+};
+
+export const useBuildChartContext = ({
+  series,
+  xAxis,
+  yAxis,
+  width,
+  height,
+  inset,
+  axisPadding,
+}: UseBuildChartContextParams): CartesianChartContextValue => {
+  const drawingArea = useMemo(
+    () => computeDrawingArea(width, height, inset, axisPadding),
+    [width, height, inset, axisPadding],
+  );
+
+  return useMemo(() => {
+    const { xRange, yRange } = computeAxisRange(drawingArea);
+
+    let xScale: ChartScaleFunction | undefined;
+    let yScale: ChartScaleFunction | undefined;
+
+    if (drawingArea.width > 0 && drawingArea.height > 0) {
+      const xDomain = computeXDomain(series, xAxis);
+      const yDomain = computeYDomain(series, yAxis);
+      xScale = buildScale(xDomain, xRange, xAxis?.scaleType);
+      yScale = buildScale(yDomain, yRange, yAxis?.scaleType);
+    }
+
+    const dataLength = computeDataLength(series, xAxis);
+    const seriesMap = new Map(series.map((s) => [s.id, s]));
+
+    return {
+      series,
+      seriesMap,
+      getXScale: (_id?: string) => xScale,
+      getYScale: (_id?: string) => yScale,
+      getXAxisConfig: (_id?: string) => xAxis,
+      getYAxisConfig: (_id?: string) => yAxis,
+      drawingArea,
+      dataLength,
+    };
+  }, [series, xAxis, yAxis, drawingArea]);
+};

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

@@ -0,0 +1,3 @@
+export { CartesianChart } from './CartesianChart';
+export { useCartesianChartContext } from './context';
+export type { CartesianChartProps } from './types';

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+
+import type { AxisConfigProps, ChartInset, Series } from '../../utils/types';
+
+export type CartesianChartProps = {
+  /**
+   * Data series provided to child components via context.
+   */
+  series: Series[];
+  /**
+   * Scale and domain configuration for the x-axis.
+   */
+  xAxis?: Partial<AxisConfigProps>;
+  /**
+   * Scale and domain configuration for the y-axis.
+   */
+  yAxis?: Partial<AxisConfigProps>;
+  /**
+   * 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>;
+  /**
+   * Space reserved for axes around the drawing area.
+   * Shrinks the drawing area by the specified amount on each side.
+   */
+  axisPadding?: Partial<ChartInset>;
+  /**
+   * Accessible label for the chart.
+   * @default 'Chart'
+   */
+  ariaLabel?: string;
+  /**
+   * SVG content rendered inside the chart's context provider.
+   */
+  children?: ReactNode;
+};

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

@@ -0,0 +1,88 @@
+import { useId, useMemo } from 'react';
+import { Defs, LinearGradient, Path, Stop } from 'react-native-svg';
+
+import { isNumericScale } from '../../utils/scales/scales';
+import { useCartesianChartContext } from '../CartesianChart/context';
+
+import type { LineProps } from './types';
+import { buildAreaPath, buildLinePath, toScaledPoints } from './utils';
+
+const STROKE_WIDTH = 2;
+const AREA_GRADIENT_OPACITY = 0.2;
+
+export const Line = ({
+  seriesId,
+  stroke,
+  showArea = false,
+  areaType: _areaType = 'gradient',
+}: LineProps) => {
+  const { getXScale, getYScale, getXAxisConfig, drawingArea, seriesMap } =
+    useCartesianChartContext();
+
+  const xScale = getXScale();
+  const yScale = getYScale();
+  const xAxisConfig = getXAxisConfig();
+
+  const gradientId = useId();
+  const seriesData = seriesMap.get(seriesId);
+  const resolvedStroke = stroke ?? seriesData?.stroke;
+
+  const points = useMemo(
+    () =>
+      seriesData?.data && xScale && yScale && isNumericScale(yScale)
+        ? toScaledPoints(seriesData.data, xScale, yScale, xAxisConfig?.data)
+        : null,
+    [seriesData, xScale, yScale, xAxisConfig],
+  );
+
+  const linePath = useMemo(
+    () => (points ? buildLinePath(points) : null),
+    [points],
+  );
+
+  const areaPath = useMemo(
+    () =>
+      showArea && points && drawingArea
+        ? buildAreaPath(points, drawingArea)
+        : null,
+    [showArea, points, drawingArea],
+  );
+
+  if (!linePath) {
+    return null;
+  }
+
+  return (
+    <>
+      {showArea && areaPath && resolvedStroke && (
+        <>
+          <Defs>
+            <LinearGradient id={gradientId} x1='0' y1='0' x2='0' y2='1'>
+              <Stop
+                offset='0%'
+                stopColor={resolvedStroke}
+                stopOpacity={AREA_GRADIENT_OPACITY}
+              />
+              <Stop offset='100%' stopColor={resolvedStroke} stopOpacity={0} />
+            </LinearGradient>
+          </Defs>
+          <Path
+            testID='line-area'
+            d={areaPath}
+            fill={`url(#${gradientId})`}
+            stroke='none'
+          />
+        </>
+      )}
+      <Path
+        testID='line-path'
+        d={linePath}
+        fill='none'
+        stroke={resolvedStroke}
+        strokeWidth={STROKE_WIDTH}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,2 @@
+export { Line } from './Line';
+export type { LineProps } from './types';

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

@@ -0,0 +1,23 @@
+export type LineProps = {
+  /**
+   * The ID of the series to render.
+   * Must match a `Series.id` provided to the parent chart.
+   */
+  seriesId: string;
+  /**
+   * Override color for the line stroke.
+   * When omitted, falls back to the `stroke` defined on the series.
+   */
+  stroke?: string;
+  /**
+   * Whether to show a filled area under the line.
+   * @default false
+   */
+  showArea?: boolean;
+  /**
+   * Area fill style.
+   * When `'gradient'`, renders a vertical gradient from the stroke color to transparent.
+   * @default 'gradient'
+   */
+  areaType?: 'gradient';
+};

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

@@ -0,0 +1,72 @@
+import { area, curveBumpX, line } from 'd3-shape';
+
+import { isCategoricalScale } from '../../utils/scales/scales';
+import type {
+  ChartScaleFunction,
+  DrawingArea,
+  NumericScale,
+} from '../../utils/types';
+
+type Point = [x: number, y: number];
+
+/**
+ * Project series data into scaled [x, y] pixel coordinates, skipping nulls.
+ *
+ * When `xData` contains numeric values, those values are fed into the scale
+ * instead of the array index so the points honour a numeric X domain.
+ */
+export const toScaledPoints = (
+  data: (number | null)[],
+  xScale: ChartScaleFunction,
+  yScale: NumericScale,
+  xData?: readonly (string | number)[],
+): Point[] | null => {
+  const pts: Point[] = [];
+
+  for (let i = 0; i < data.length; i++) {
+    const value = data[i];
+    if (value === null) continue;
+
+    const xInput =
+      xData && typeof xData[i] === 'number' ? (xData[i] as number) : i;
+
+    const x = isCategoricalScale(xScale)
+      ? (xScale(xInput) ?? 0) + xScale.bandwidth() / 2
+      : xScale(xInput);
+    const y = yScale(value);
+
+    pts.push([x as number, y]);
+  }
+
+  return pts.length >= 2 ? pts : null;
+};
+
+/**
+ * Build the SVG `d` attribute for the line stroke.
+ */
+export const buildLinePath = (points: Point[]): string | null => {
+  return (
+    line<Point>()
+      .x((d) => d[0])
+      .y((d) => d[1])
+      .curve(curveBumpX)(points) ?? null
+  );
+};
+
+/**
+ * Build the SVG `d` attribute for the filled area beneath the line.
+ */
+export const buildAreaPath = (
+  points: Point[],
+  drawingArea: DrawingArea,
+): string | null => {
+  const yBottom = drawingArea.y + drawingArea.height;
+
+  return (
+    area<Point>()
+      .x((d) => d[0])
+      .y0(yBottom)
+      .y1((d) => d[1])
+      .curve(curveBumpX)(points) ?? null
+  );
+};