@ledgerhq/lumen-ui-rnative-visualization 0.1.10 → 0.1.11

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

@@ -0,0 +1,269 @@
+import { describe, expect, it } 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 React from 'react';
+
+import { CartesianChart } from '../CartesianChart';
+
+import { ReferenceLine } from './ReferenceLine';
+
+const sampleSeries = [{ id: 's1', stroke: '#000', data: [10, 20, 30, 40, 50] }];
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <ThemeProvider themes={ledgerLiveThemes} colorScheme='light'>
+    {children}
+  </ThemeProvider>
+);
+
+const renderInChart = (
+  children: React.ReactNode,
+  {
+    width = 400,
+    height = 200,
+    xAxis,
+    yAxis,
+  }: {
+    width?: number;
+    height?: number;
+    xAxis?: Parameters<typeof CartesianChart>[0]['xAxis'];
+    yAxis?: Parameters<typeof CartesianChart>[0]['yAxis'];
+  } = {},
+) =>
+  render(
+    <Wrapper>
+      <CartesianChart
+        series={sampleSeries}
+        width={width}
+        height={height}
+        xAxis={xAxis}
+        yAxis={yAxis}
+      >
+        {children}
+      </CartesianChart>
+    </Wrapper>,
+  );
+
+describe('ReferenceLine', () => {
+  describe('horizontal line (dataY)', () => {
+    it('renders a horizontal line at the correct y-pixel', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataY={30} />);
+      const line = getByTestId('reference-line-line');
+      expect(line).toBeTruthy();
+      expect(line.props.y1).toBe(line.props.y2);
+    });
+
+    it('spans the full width of the drawing area', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataY={30} />);
+      const line = getByTestId('reference-line-line');
+      expect(line.props.x2).toBeGreaterThan(line.props.x1);
+    });
+
+    it('does not render when dataY is outside domain bounds', () => {
+      const { queryByTestId } = renderInChart(<ReferenceLine dataY={999} />);
+      expect(queryByTestId('reference-line')).toBeNull();
+    });
+
+    it('renders label with textAnchor start when labelPosition is end', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataY={30} label='Target' labelPosition='end' />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.textAnchor).toBe('start');
+    });
+
+    it('renders label with textAnchor end when labelPosition is start', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataY={30} label='Target' labelPosition='start' />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.textAnchor).toBe('end');
+    });
+
+    it('renders label with textAnchor middle when labelPosition is center', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataY={30} label='Target' labelPosition='center' />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.textAnchor).toBe('middle');
+    });
+
+    it('defaults labelPosition to end', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataY={30} label='Target' />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.textAnchor).toBe('start');
+    });
+  });
+
+  describe('vertical line (dataX)', () => {
+    it('renders a vertical line at the correct x-pixel', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataX={2} />);
+      const line = getByTestId('reference-line-line');
+      expect(line).toBeTruthy();
+      expect(line.props.x1).toBe(line.props.x2);
+    });
+
+    it('spans the full height of the drawing area', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataX={2} />);
+      const line = getByTestId('reference-line-line');
+      expect(line.props.y2).toBeGreaterThan(line.props.y1);
+    });
+
+    it('does not render when dataX is outside domain bounds', () => {
+      const { queryByTestId } = renderInChart(<ReferenceLine dataX={999} />);
+      expect(queryByTestId('reference-line')).toBeNull();
+    });
+
+    it('defaults labelPosition to end with dy offset for hanging baseline', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataX={2} label='Event' />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.dy).toBe(8);
+    });
+
+    it('works with band (categorical) x-axis scale', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataX={2} />, {
+        xAxis: { scaleType: 'band' },
+      });
+      expect(getByTestId('reference-line-line')).toBeTruthy();
+    });
+
+    it('does not render when dataX is outside band scale domain', () => {
+      const { queryByTestId } = renderInChart(<ReferenceLine dataX={999} />, {
+        xAxis: { scaleType: 'band' },
+      });
+      expect(queryByTestId('reference-line')).toBeNull();
+    });
+
+    it('resolves dataX through numeric xAxis.data', () => {
+      const numericXData = [100, 200, 300, 400, 500];
+      const { getByTestId: getIdx0 } = renderInChart(
+        <ReferenceLine dataX={0} />,
+        { xAxis: { data: numericXData } },
+      );
+      const { getByTestId: getIdx2 } = renderInChart(
+        <ReferenceLine dataX={2} />,
+        { xAxis: { data: numericXData } },
+      );
+      const x1Idx0 = getIdx0('reference-line-line').props.x1;
+      const x1Idx2 = getIdx2('reference-line-line').props.x1;
+
+      expect(x1Idx2).toBeGreaterThan(x1Idx0);
+    });
+
+    it('does not render when dataX index is out of bounds for xAxis.data', () => {
+      const { queryByTestId } = renderInChart(<ReferenceLine dataX={10} />, {
+        xAxis: { data: [100, 200, 300] },
+      });
+      expect(queryByTestId('reference-line')).toBeNull();
+    });
+  });
+
+  describe('label offsets', () => {
+    it('applies labelDx offset to label x position', () => {
+      const { getByTestId, unmount } = renderInChart(
+        <ReferenceLine dataY={30} label='A' />,
+      );
+      const xWithoutOffset = getByTestId('reference-line-label').props.x;
+      unmount();
+
+      const { getByTestId: getWithOffset } = renderInChart(
+        <ReferenceLine dataY={30} label='A' labelDx={10} />,
+      );
+      const xWithOffset = getWithOffset('reference-line-label').props.x;
+      expect(xWithOffset).toBe(xWithoutOffset + 10);
+    });
+
+    it('applies labelDy offset to label y position', () => {
+      const { getByTestId, unmount } = renderInChart(
+        <ReferenceLine dataY={30} label='A' />,
+      );
+      const yWithoutOffset = getByTestId('reference-line-label').props.y;
+      unmount();
+
+      const { getByTestId: getWithOffset } = renderInChart(
+        <ReferenceLine dataY={30} label='A' labelDy={-4} />,
+      );
+      const yWithOffset = getWithOffset('reference-line-label').props.y;
+      expect(yWithOffset).toBe(yWithoutOffset - 4);
+    });
+  });
+
+  describe('styling', () => {
+    it('uses dashed line style by default', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataY={30} />);
+      const line = getByTestId('reference-line-line');
+      expect(line.props.strokeDasharray).toBe('0.1 6');
+    });
+
+    it('removes dasharray when lineStyle is solid', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataY={30} lineStyle='solid' />,
+      );
+      const line = getByTestId('reference-line-line');
+      expect(line.props.strokeDasharray).toBeUndefined();
+    });
+
+    it('applies custom stroke color', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine dataY={30} stroke='#FF0000' />,
+      );
+      const line = getByTestId('reference-line-line');
+      expect(line.props.stroke).toBe('#FF0000');
+    });
+
+    it('has round linecap', () => {
+      const { getByTestId } = renderInChart(<ReferenceLine dataY={30} />);
+      const line = getByTestId('reference-line-line');
+      expect(line.props.strokeLinecap).toBe('round');
+    });
+  });
+
+  describe('label alignment overrides', () => {
+    it('applies labelHorizontalAlignment=start on vertical line', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine
+          dataX={2}
+          label='Test'
+          labelHorizontalAlignment='start'
+        />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.textAnchor).toBe('end');
+    });
+
+    it('applies labelVerticalAlignment=start on horizontal line', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine
+          dataY={30}
+          label='Test'
+          labelVerticalAlignment='start'
+        />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.dy).toBe(0);
+    });
+
+    it('applies labelVerticalAlignment=center on horizontal line', () => {
+      const { getByTestId } = renderInChart(
+        <ReferenceLine
+          dataY={30}
+          label='Test'
+          labelVerticalAlignment='center'
+        />,
+      );
+      const label = getByTestId('reference-line-label');
+      expect(label.props.dy).toBe(3.5);
+    });
+  });
+
+  describe('no label', () => {
+    it('does not render label element when label is not provided', () => {
+      const { queryByTestId } = renderInChart(<ReferenceLine dataY={30} />);
+      expect(queryByTestId('reference-line-label')).toBeNull();
+    });
+  });
+});

package/src/lib/Components/ReferenceLine/ReferenceLine.tsx

@@ -0,0 +1,149 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import { G, Line as SvgLine, Text as SvgText } from 'react-native-svg';
+
+import { useCartesianChartContext } from '../CartesianChart/context';
+
+import { DASH_ARRAY, STROKE_WIDTH } from './constants';
+import type { ReferenceLineProps } from './types';
+import {
+  computeHorizontalLabelCoordinates,
+  computeVerticalLabelCoordinates,
+  dominantBaselineToDy,
+  resolvePixel,
+} from './utils';
+
+export function ReferenceLine({
+  label,
+  labelDx = 0,
+  labelDy = 0,
+  labelHorizontalAlignment,
+  labelVerticalAlignment,
+  labelPosition = 'end',
+  stroke,
+  lineStyle = 'dashed',
+  ...props
+}: Readonly<ReferenceLineProps>) {
+  const { getXScale, getYScale, getXAxisConfig, getYAxisConfig, drawingArea } =
+    useCartesianChartContext();
+  const { theme } = useTheme();
+
+  const resolvedStroke = stroke ?? theme.colors.border.muted;
+  const dashArray = lineStyle === 'dashed' ? DASH_ARRAY : undefined;
+  const fontSize = theme.typographies.body4.fontSize;
+
+  if (props.dataY !== undefined) {
+    const yPixel = resolvePixel({
+      dataValue: props.dataY,
+      scale: getYScale(),
+      axis: 'y',
+      drawingArea,
+      axisConfig: getYAxisConfig(),
+    });
+    if (yPixel === undefined) return null;
+
+    const labelCoords = label
+      ? computeHorizontalLabelCoordinates({
+          pixel: yPixel,
+          labelPosition,
+          drawingArea,
+          dx: labelDx,
+          dy: labelDy,
+          horizontalAlignment: labelHorizontalAlignment,
+          verticalAlignment: labelVerticalAlignment,
+        })
+      : null;
+    const baselineDy = labelCoords
+      ? dominantBaselineToDy(labelCoords.dominantBaseline, fontSize)
+      : 0;
+
+    return (
+      <G testID='reference-line'>
+        <SvgLine
+          testID='reference-line-line'
+          x1={drawingArea.x}
+          y1={yPixel}
+          x2={drawingArea.x + drawingArea.width}
+          y2={yPixel}
+          stroke={resolvedStroke}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={dashArray}
+          strokeLinecap='round'
+        />
+        {labelCoords && (
+          <SvgText
+            testID='reference-line-label'
+            x={labelCoords.x}
+            y={labelCoords.y}
+            dy={baselineDy}
+            textAnchor={labelCoords.textAnchor}
+            fill={theme.colors.text.muted}
+            fontSize={fontSize}
+            fontWeight={theme.typographies.body4.fontWeight}
+            fontFamily={theme.fontFamilies.sans}
+          >
+            {label}
+          </SvgText>
+        )}
+      </G>
+    );
+  }
+
+  if (props.dataX !== undefined) {
+    const xPixel = resolvePixel({
+      dataValue: props.dataX,
+      scale: getXScale(),
+      axis: 'x',
+      drawingArea,
+      axisConfig: getXAxisConfig(),
+    });
+    if (xPixel === undefined) return null;
+
+    const labelCoords = label
+      ? computeVerticalLabelCoordinates({
+          pixel: xPixel,
+          labelPosition,
+          drawingArea,
+          dx: labelDx,
+          dy: labelDy,
+          horizontalAlignment: labelHorizontalAlignment,
+          verticalAlignment: labelVerticalAlignment,
+        })
+      : null;
+    const baselineDy = labelCoords
+      ? dominantBaselineToDy(labelCoords.dominantBaseline, fontSize)
+      : 0;
+
+    return (
+      <G testID='reference-line'>
+        <SvgLine
+          testID='reference-line-line'
+          x1={xPixel}
+          y1={drawingArea.y}
+          x2={xPixel}
+          y2={drawingArea.y + drawingArea.height}
+          stroke={resolvedStroke}
+          strokeWidth={STROKE_WIDTH}
+          strokeDasharray={dashArray}
+          strokeLinecap='round'
+        />
+        {labelCoords && (
+          <SvgText
+            testID='reference-line-label'
+            x={labelCoords.x}
+            y={labelCoords.y}
+            dy={baselineDy}
+            textAnchor={labelCoords.textAnchor}
+            fill={theme.colors.text.muted}
+            fontSize={fontSize}
+            fontWeight={theme.typographies.body4.fontWeight}
+            fontFamily={theme.fontFamilies.sans}
+          >
+            {label}
+          </SvgText>
+        )}
+      </G>
+    );
+  }
+
+  return null;
+}

package/src/lib/Components/ReferenceLine/constants.ts

@@ -0,0 +1,2 @@
+export const STROKE_WIDTH = 2;
+export const DASH_ARRAY = '0.1 6';

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

@@ -0,0 +1,2 @@
+export * from './ReferenceLine';
+export * from './types';

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

@@ -0,0 +1,79 @@
+export type LabelAlignment = 'start' | 'center' | 'end';
+export type LabelPosition = 'start' | 'center' | 'end';
+
+export type ReferenceLineBaseProps = {
+  /**
+   * Label text displayed near the reference line.
+   */
+  label?: string;
+  /**
+   * Horizontal pixel offset applied to the label position.
+   * @default 0
+   */
+  labelDx?: number;
+  /**
+   * Vertical pixel offset applied to the label position.
+   * @default 0
+   */
+  labelDy?: number;
+  /**
+   * Position of the label along the line.
+   * @default 'end'
+   */
+  labelPosition?: LabelPosition;
+  /**
+   * Controls the direction the label text extends from its position.
+   * - `'start'`: text extends toward the start of the axis (left)
+   * - `'center'`: text is centered on the position
+   * - `'end'`: text extends toward the end of the axis (right)
+   *
+   * Defaults: `'center'` for vertical lines, inferred from `labelPosition` for horizontal lines.
+   */
+  labelHorizontalAlignment?: LabelAlignment;
+  /**
+   * Controls the direction the label text extends from its position.
+   * - `'start'`: text extends toward the start of the axis (up)
+   * - `'center'`: text is vertically centered on the position
+   * - `'end'`: text extends toward the end of the axis (down)
+   *
+   * Defaults: `'end'` for horizontal lines, inferred from `labelPosition` for vertical lines.
+   */
+  labelVerticalAlignment?: LabelAlignment;
+  /**
+   * Line color.
+   * @default theme.colors.border.muted
+   */
+  stroke?: string;
+  /**
+   * Line dash style.
+   * - `'dashed'`: rounded dots with `strokeDasharray="0.1 6"`
+   * - `'solid'`: continuous line
+   * @default 'dashed'
+   */
+  lineStyle?: 'solid' | 'dashed';
+};
+
+export type HorizontalReferenceLineProps = ReferenceLineBaseProps & {
+  /**
+   * Y-axis value in data space where the horizontal line is drawn.
+   * The horizontal line is rendered at this Y position spanning the full
+   * width of the drawing area.
+   */
+  dataY: number;
+  dataX?: never;
+};
+
+export type VerticalReferenceLineProps = ReferenceLineBaseProps & {
+  /**
+   * Data index along the X axis. When `xAxis.data` contains numeric values,
+   * the index is mapped to the corresponding axis value automatically.
+   * The vertical line is drawn at this position spanning the full height
+   * of the drawing area.
+   */
+  dataX: number;
+  dataY?: never;
+};
+
+export type ReferenceLineProps =
+  | HorizontalReferenceLineProps
+  | VerticalReferenceLineProps;