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

package/src/lib/Components/ReferenceLine/utils.test.ts

@@ -0,0 +1,332 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { getNumericScale } from '../../utils/scales/scales';
+import type { DrawingArea } from '../../utils/types';
+
+import {
+  computeHorizontalLabelCoordinates,
+  computeVerticalLabelCoordinates,
+  dominantBaselineToDy,
+  isPixelWithinDrawingArea,
+  resolvePixel,
+} from './utils';
+
+const drawingArea: DrawingArea = { x: 20, y: 10, width: 360, height: 180 };
+
+const linearScale = getNumericScale({
+  scaleType: 'linear',
+  domain: { min: 0, max: 100 },
+  range: { min: drawingArea.x, max: drawingArea.x + drawingArea.width },
+});
+
+describe('isPixelWithinDrawingArea', () => {
+  describe('x axis', () => {
+    it('returns true when pixel is at the left edge', () => {
+      expect(isPixelWithinDrawingArea(20, 'x', drawingArea)).toBe(true);
+    });
+
+    it('returns true when pixel is at the right edge', () => {
+      expect(isPixelWithinDrawingArea(380, 'x', drawingArea)).toBe(true);
+    });
+
+    it('returns true when pixel is within bounds', () => {
+      expect(isPixelWithinDrawingArea(200, 'x', drawingArea)).toBe(true);
+    });
+
+    it('returns false when pixel is before the left edge', () => {
+      expect(isPixelWithinDrawingArea(19, 'x', drawingArea)).toBe(false);
+    });
+
+    it('returns false when pixel is past the right edge', () => {
+      expect(isPixelWithinDrawingArea(381, 'x', drawingArea)).toBe(false);
+    });
+  });
+
+  describe('y axis', () => {
+    it('returns true when pixel is at the top edge', () => {
+      expect(isPixelWithinDrawingArea(10, 'y', drawingArea)).toBe(true);
+    });
+
+    it('returns true when pixel is at the bottom edge', () => {
+      expect(isPixelWithinDrawingArea(190, 'y', drawingArea)).toBe(true);
+    });
+
+    it('returns true when pixel is within bounds', () => {
+      expect(isPixelWithinDrawingArea(100, 'y', drawingArea)).toBe(true);
+    });
+
+    it('returns false when pixel is above the top edge', () => {
+      expect(isPixelWithinDrawingArea(9, 'y', drawingArea)).toBe(false);
+    });
+
+    it('returns false when pixel is below the bottom edge', () => {
+      expect(isPixelWithinDrawingArea(191, 'y', drawingArea)).toBe(false);
+    });
+  });
+});
+
+describe('computeHorizontalLabelCoordinates', () => {
+  const pixel = 100;
+
+  it('positions label at the end (right edge) with textAnchor start', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+    });
+    expect(result.x).toBe(380);
+    expect(result.y).toBe(100);
+    expect(result.textAnchor).toBe('start');
+    expect(result.dominantBaseline).toBe('hanging');
+  });
+
+  it('positions label at the start (left edge) with textAnchor end', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+    });
+    expect(result.x).toBe(20);
+    expect(result.textAnchor).toBe('end');
+  });
+
+  it('positions label at center with textAnchor middle', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'center',
+      drawingArea,
+    });
+    expect(result.x).toBe(200);
+    expect(result.textAnchor).toBe('middle');
+  });
+
+  it('applies dx offset', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+      dx: -8,
+    });
+    expect(result.x).toBe(372);
+  });
+
+  it('applies dy offset', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+      dy: -4,
+    });
+    expect(result.y).toBe(96);
+  });
+
+  it('defaults dominantBaseline to hanging (verticalAlignment=end)', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+    });
+    expect(result.dominantBaseline).toBe('hanging');
+  });
+
+  it('overrides dominantBaseline with verticalAlignment=start', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+      verticalAlignment: 'start',
+    });
+    expect(result.dominantBaseline).toBe('auto');
+  });
+
+  it('overrides dominantBaseline with verticalAlignment=center', () => {
+    const result = computeHorizontalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+      verticalAlignment: 'center',
+    });
+    expect(result.dominantBaseline).toBe('central');
+  });
+});
+
+describe('computeVerticalLabelCoordinates', () => {
+  const pixel = 150;
+
+  it('positions label at start (top) with dominant-baseline auto', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+    });
+    expect(result.x).toBe(150);
+    expect(result.y).toBe(10);
+    expect(result.textAnchor).toBe('middle');
+    expect(result.dominantBaseline).toBe('auto');
+  });
+
+  it('positions label at end (bottom) with dominant-baseline hanging', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'end',
+      drawingArea,
+    });
+    expect(result.y).toBe(190);
+    expect(result.dominantBaseline).toBe('hanging');
+  });
+
+  it('positions label at center with dominant-baseline central', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'center',
+      drawingArea,
+    });
+    expect(result.y).toBe(100);
+    expect(result.dominantBaseline).toBe('central');
+  });
+
+  it('applies dx offset', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+      dx: 4,
+    });
+    expect(result.x).toBe(154);
+  });
+
+  it('applies dy offset', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+      dy: 6,
+    });
+    expect(result.y).toBe(16);
+  });
+
+  it('defaults textAnchor to middle (horizontalAlignment=center)', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+    });
+    expect(result.textAnchor).toBe('middle');
+  });
+
+  it('overrides textAnchor with horizontalAlignment=start', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+      horizontalAlignment: 'start',
+    });
+    expect(result.textAnchor).toBe('end');
+  });
+
+  it('overrides textAnchor with horizontalAlignment=end', () => {
+    const result = computeVerticalLabelCoordinates({
+      pixel,
+      labelPosition: 'start',
+      drawingArea,
+      horizontalAlignment: 'end',
+    });
+    expect(result.textAnchor).toBe('start');
+  });
+});
+
+describe('resolvePixel', () => {
+  it('returns a pixel value for a data value within bounds', () => {
+    const result = resolvePixel({
+      dataValue: 50,
+      scale: linearScale,
+      axis: 'x',
+      drawingArea,
+    });
+    expect(typeof result).toBe('number');
+  });
+
+  it('returns undefined when scale is missing', () => {
+    expect(
+      resolvePixel({
+        dataValue: 50,
+        scale: undefined,
+        axis: 'x',
+        drawingArea,
+      }),
+    ).toBeUndefined();
+  });
+
+  it('returns undefined when pixel falls outside drawing area', () => {
+    expect(
+      resolvePixel({
+        dataValue: 200,
+        scale: linearScale,
+        axis: 'x',
+        drawingArea,
+      }),
+    ).toBeUndefined();
+  });
+
+  it('resolves data index through numeric axisConfig.data', () => {
+    const atIndex = resolvePixel({
+      dataValue: 50,
+      scale: linearScale,
+      axis: 'x',
+      drawingArea,
+    });
+    const throughData = resolvePixel({
+      dataValue: 1,
+      scale: linearScale,
+      axis: 'x',
+      drawingArea,
+      axisConfig: { data: [0, 50, 100] },
+    });
+    expect(throughData).toBe(atIndex);
+  });
+
+  it('uses index directly when axisConfig.data contains strings', () => {
+    const withoutConfig = resolvePixel({
+      dataValue: 2,
+      scale: linearScale,
+      axis: 'x',
+      drawingArea,
+    });
+    const withStringData = resolvePixel({
+      dataValue: 2,
+      scale: linearScale,
+      axis: 'x',
+      drawingArea,
+      axisConfig: { data: ['a', 'b', 'c'] },
+    });
+    expect(withStringData).toBe(withoutConfig);
+  });
+
+  it('returns undefined when data index is out of bounds', () => {
+    expect(
+      resolvePixel({
+        dataValue: 10,
+        scale: linearScale,
+        axis: 'x',
+        drawingArea,
+        axisConfig: { data: [1, 2, 3] },
+      }),
+    ).toBeUndefined();
+  });
+});
+
+describe('dominantBaselineToDy', () => {
+  const fontSize = 10;
+
+  it('returns 0 for auto (text above anchor)', () => {
+    expect(dominantBaselineToDy('auto', fontSize)).toBe(0);
+  });
+
+  it('returns fontSize * 0.35 for central (vertically centered)', () => {
+    expect(dominantBaselineToDy('central', fontSize)).toBe(3.5);
+  });
+
+  it('returns fontSize * 0.8 for hanging (text below anchor)', () => {
+    expect(dominantBaselineToDy('hanging', fontSize)).toBe(8);
+  });
+});

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

@@ -0,0 +1,175 @@
+import { getPointOnScale, isCategoricalScale } from '../../utils/scales/scales';
+import type {
+  AxisConfigProps,
+  ChartScaleFunction,
+  DrawingArea,
+} from '../../utils/types';
+
+import type { LabelAlignment, LabelPosition } from './types';
+
+const DEFAULT_H_ALIGN: LabelAlignment = 'center';
+const DEFAULT_V_ALIGN: LabelAlignment = 'end';
+
+type LabelCoordinates = {
+  x: number;
+  y: number;
+  textAnchor: 'start' | 'middle' | 'end';
+  dominantBaseline: 'hanging' | 'central' | 'auto';
+};
+
+const DY_RATIO: Record<LabelCoordinates['dominantBaseline'], number> = {
+  auto: 0,
+  central: 0.35,
+  hanging: 0.8,
+};
+
+type ResolvePixelParams = {
+  dataValue: number;
+  scale: ChartScaleFunction | undefined;
+  axis: 'x' | 'y';
+  drawingArea: DrawingArea;
+  axisConfig?: AxisConfigProps;
+};
+
+type LabelParams = {
+  pixel: number;
+  labelPosition: LabelPosition;
+  drawingArea: DrawingArea;
+  dx?: number;
+  dy?: number;
+  horizontalAlignment?: LabelAlignment;
+  verticalAlignment?: LabelAlignment;
+};
+
+const textAnchorMap: Record<LabelAlignment, LabelCoordinates['textAnchor']> = {
+  start: 'end',
+  center: 'middle',
+  end: 'start',
+};
+
+const dominantBaselineMap: Record<
+  LabelAlignment,
+  LabelCoordinates['dominantBaseline']
+> = {
+  start: 'auto',
+  center: 'central',
+  end: 'hanging',
+};
+
+const positionRatio: Record<LabelPosition, number> = {
+  start: 0,
+  center: 0.5,
+  end: 1,
+};
+
+/**
+ * Converts a `dominantBaseline` value to a `dy` pixel offset.
+ * react-native-svg doesn't support `dominantBaseline`, so we emulate it
+ * with a font-relative `dy` shift — same approach used by Axis components.
+ */
+export const dominantBaselineToDy = (
+  baseline: LabelCoordinates['dominantBaseline'],
+  fontSize: number,
+): number => fontSize * DY_RATIO[baseline];
+
+/**
+ * Checks whether a pixel coordinate falls within the drawing area
+ * along a single axis.
+ */
+export const isPixelWithinDrawingArea = (
+  pixel: number,
+  axis: 'x' | 'y',
+  drawingArea: DrawingArea,
+): boolean => {
+  if (axis === 'x') {
+    return pixel >= drawingArea.x && pixel <= drawingArea.x + drawingArea.width;
+  }
+  return pixel >= drawingArea.y && pixel <= drawingArea.y + drawingArea.height;
+};
+
+/**
+ * Translates a data index into the value the axis scale expects.
+ * When the axis config contains numeric `data`, the index is mapped to the
+ * corresponding value — returns `undefined` if the index is out of bounds.
+ * When there is no numeric axis data the index is used directly.
+ */
+const resolveDataValue = (
+  index: number,
+  axisConfig?: AxisConfigProps,
+): number | undefined => {
+  const data = axisConfig?.data;
+  if (!data || data.length === 0) return index;
+
+  if (index < 0 || index >= data.length) return undefined;
+
+  const axisValue = data[index];
+  return typeof axisValue === 'number' ? axisValue : index;
+};
+
+/**
+ * Resolves a data-space value to a validated pixel coordinate.
+ * When `axisConfig` is provided, the data value is first translated
+ * through the axis data array before being projected onto the scale.
+ * Returns `undefined` if the value is out of bounds, the scale is missing,
+ * the result is not finite, or the pixel falls outside the drawing area.
+ */
+export const resolvePixel = ({
+  dataValue,
+  scale,
+  axis,
+  drawingArea,
+  axisConfig,
+}: ResolvePixelParams): number | undefined => {
+  const resolved = resolveDataValue(dataValue, axisConfig);
+  if (resolved === undefined) return undefined;
+
+  if (!scale) return undefined;
+
+  if (isCategoricalScale(scale) && scale(resolved) === undefined)
+    return undefined;
+
+  const p = getPointOnScale(resolved, scale);
+
+  if (!Number.isFinite(p) || !isPixelWithinDrawingArea(p, axis, drawingArea)) {
+    return undefined;
+  }
+  return p;
+};
+
+/**
+ * Computes the label pixel coordinates and text alignment attributes
+ * for a horizontal reference line.
+ */
+export const computeHorizontalLabelCoordinates = ({
+  pixel,
+  labelPosition,
+  drawingArea,
+  dx = 0,
+  dy = 0,
+  horizontalAlignment,
+  verticalAlignment,
+}: LabelParams): LabelCoordinates => ({
+  x: drawingArea.x + drawingArea.width * positionRatio[labelPosition] + dx,
+  y: pixel + dy,
+  textAnchor: textAnchorMap[horizontalAlignment ?? labelPosition],
+  dominantBaseline: dominantBaselineMap[verticalAlignment ?? DEFAULT_V_ALIGN],
+});
+
+/**
+ * Computes the label pixel coordinates and text alignment attributes
+ * for a vertical reference line.
+ */
+export const computeVerticalLabelCoordinates = ({
+  pixel,
+  labelPosition,
+  drawingArea,
+  dx = 0,
+  dy = 0,
+  horizontalAlignment,
+  verticalAlignment,
+}: LabelParams): LabelCoordinates => ({
+  x: pixel + dx,
+  y: drawingArea.y + drawingArea.height * positionRatio[labelPosition] + dy,
+  textAnchor: textAnchorMap[horizontalAlignment ?? DEFAULT_H_ALIGN],
+  dominantBaseline: dominantBaselineMap[verticalAlignment ?? labelPosition],
+});

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

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { useState } from 'react';
+import { Text, View } from 'react-native';
+
+import { StoryDecorator } from '../../../../.storybook/StoryDecorator.tsx';
+import { LineChart } from '../LineChart';
+import { Scrubber } from './Scrubber';
+import type { ScrubberProps } from './types';
+
+const meta = {
+  component: Scrubber,
+  title: 'Visualization/Scrubber',
+  tags: ['experimental'],
+  decorators: [
+    (Story, context) => (
+      <StoryDecorator context={context}>
+        <Story />
+      </StoryDecorator>
+    ),
+  ],
+} satisfies Meta<typeof Scrubber>;
+
+export default meta;
+type Story = StoryObj<typeof Scrubber>;
+
+const dates = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+const singleSeries = [
+  {
+    id: 'prices',
+    stroke: '#7B61FF',
+    data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20],
+  },
+];
+
+const multiSeries = [
+  {
+    id: 'lineA',
+    label: 'Line A',
+    stroke: '#7B61FF',
+    data: [5, 15, 10, 90, 85, 70, 30, 25, 25, 40, 60, 80],
+  },
+  {
+    id: 'lineB',
+    label: 'Line B',
+    stroke: '#44D7B6',
+    data: [90, 85, 70, 25, 23, 40, 45, 40, 50, 30, 20, 10],
+  },
+];
+
+export const Base: Story = {
+  render: (args: ScrubberProps) => (
+    <LineChart series={singleSeries} height={200} showArea enableScrubbing>
+      <Scrubber {...args} />
+    </LineChart>
+  ),
+  args: {},
+};
+
+export const WithLabel: Story = {
+  render: (args: ScrubberProps) => {
+    const [activeIndex, setActiveIndex] = useState<number | undefined>();
+    const displayIndex = activeIndex ?? singleSeries[0].data.length - 1;
+    return (
+      <View>
+        <Text style={{ marginBottom: 8, fontSize: 14 }}>
+          {dates[displayIndex]} — ${singleSeries[0].data[displayIndex]}
+        </Text>
+        <LineChart
+          series={singleSeries}
+          height={200}
+          showArea
+          enableScrubbing
+          onScrubberPositionChange={setActiveIndex}
+        >
+          <Scrubber {...args} label={(i: number) => dates[i] ?? ''} />
+        </LineChart>
+      </View>
+    );
+  },
+  args: {},
+};
+
+export const MultiSeries: Story = {
+  render: (args: ScrubberProps) => (
+    <LineChart series={multiSeries} height={200} enableScrubbing>
+      <Scrubber {...args} label={(i: number) => dates[i] ?? ''} showBeacons />
+    </LineChart>
+  ),
+  args: {},
+};
+
+export const HiddenLine: Story = {
+  render: (args: ScrubberProps) => (
+    <LineChart series={singleSeries} height={200} showArea enableScrubbing>
+      <Scrubber {...args} hideLine />
+    </LineChart>
+  ),
+  args: {},
+};
+
+export const HiddenOverlay: Story = {
+  render: (args: ScrubberProps) => (
+    <LineChart series={singleSeries} height={200} showArea enableScrubbing>
+      <Scrubber {...args} hideOverlay />
+    </LineChart>
+  ),
+  args: {},
+};