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

package/dist/typescript/src/lib/Components/CartesianChart/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/CartesianChart/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,eAAe,EAAE,UAK7B,CAAC;AACF,eAAO,MAAM,wBAAwB;;;;;CAKpC,CAAC;AACF,eAAO,MAAM,YAAY,EAAE,UAK1B,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,mBAAmB,CAAC,OAAO,CAAC,KAClC,UAqBF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,SAAS,mBAAmB,CAAC,aAAa,CAAC,KAC1C,UAQF,CAAC"}

package/dist/typescript/src/lib/Components/Point/Point.d.ts

@@ -0,0 +1,4 @@
+import type { PointLabelProps, PointProps } from './types';
+export declare function PointLabel({ textAnchor, ...props }: Readonly<PointLabelProps>): import("react/jsx-runtime").JSX.Element;
+export declare function Point({ dataX, dataY, color, label, LabelComponent, labelPosition, hidePoint, showLabelArrow, size, onPress, }: Readonly<PointProps>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Point.d.ts.map

package/dist/typescript/src/lib/Components/Point/Point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Point.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/Point.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAU3D,wBAAgB,UAAU,CAAC,EACzB,UAAqB,EACrB,GAAG,KAAK,EACT,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAa3B;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,cAAc,EACd,aAAqB,EACrB,SAAiB,EACjB,cAAqB,EACrB,IAAmB,EACnB,OAAO,GACR,EAAE,QAAQ,CAAC,UAAU,CAAC,kDAqDtB"}

package/dist/typescript/src/lib/Components/Point/index.d.ts

@@ -0,0 +1,3 @@
+export { Point, PointLabel } from './Point';
+export type { PointLabelComponent, PointLabelProps, PointProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/lib/Components/Point/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC5C,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/typescript/src/lib/Components/Point/types.d.ts

@@ -0,0 +1,74 @@
+import type { ComponentType } from 'react';
+import type { GestureResponderEvent } from 'react-native';
+import type { TextProps } from 'react-native-svg';
+export type PointLabelProps = {
+    x: number;
+    y: number;
+    children: string;
+} & Omit<TextProps, 'x' | 'y' | 'children'>;
+export type PointLabelComponent = ComponentType<PointLabelProps>;
+export type PointProps = {
+    /**
+     * X coordinate in data space (index or explicit value).
+     */
+    dataX: number;
+    /**
+     * Y coordinate in data space.
+     */
+    dataY: number;
+    /**
+     * Fill color of the point circle.
+     * Defaults to `theme.colors.bg.mutedStrong`.
+     *
+     * Use the `useTheme` hook from `@ledgerhq/lumen-ui-rnative` to
+     * access design-token colors at runtime:
+     *
+     * @example
+     * ```tsx
+     * import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+     *
+     * const { theme } = useTheme();
+     * <Point dataX={0} dataY={42} color={theme.colors.bg.errorStrong} />
+     * ```
+     */
+    color?: string;
+    /**
+     * Text label displayed near the point.
+     * A string is rendered directly; a function receives `dataX` and returns
+     * the label string, enabling index-based formatting.
+     */
+    label?: string | ((dataIndex: number) => string);
+    /**
+     * Custom component rendered instead of the default `PointLabel`.
+     * Receives pixel coordinates (`x`, `y`) and the resolved label as
+     * `children`. Use `PointLabel` inside your component to retain
+     * theme styling while customising layout or appearance.
+     */
+    LabelComponent?: PointLabelComponent;
+    /**
+     * Placement of the label relative to the point.
+     * @default 'top'
+     */
+    labelPosition?: 'top' | 'bottom';
+    /**
+     * When `true`, the point circle is hidden but the label (if any) is still rendered.
+     * @default false
+     */
+    hidePoint?: boolean;
+    /**
+     * Diameter of the point circle in pixels.
+     * Internally converted to an SVG radius (`size / 2`).
+     * @default 10
+     */
+    size?: number;
+    /**
+     * When `true`, an arrow is displayed pointing from the point to the label.
+     * @default true
+     */
+    showLabelArrow?: boolean;
+    /**
+     * Called when the point is pressed.
+     */
+    onPress?: (event: GestureResponderEvent) => void;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/typescript/src/lib/Components/Point/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC,CAAC;AAE5C,MAAM,MAAM,mBAAmB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;OAcG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;;;;OAKG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClD,CAAC"}

package/dist/typescript/src/lib/Components/Point/utils.d.ts

@@ -0,0 +1,24 @@
+import type { DrawingArea } from '../../utils/types';
+export declare const DEFAULT_SIZE = 10;
+export declare const STROKE_WIDTH = 2;
+export declare const LABEL_FONT_SIZE = 10;
+export declare const ARROW_WIDTH = 6;
+export declare const ARROW_HEIGHT = 4;
+export declare const GAP = 4;
+export declare const isWithinBounds: (px: number, py: number, area: DrawingArea) => boolean;
+/**
+ * Builds the three SVG points of the arrow triangle.
+ *
+ * `'top'`    → arrow sits below the label, tip pointing **down** toward the circle.
+ * `'bottom'` → arrow sits above the label, tip pointing **up** toward the circle.
+ */
+export declare const buildArrowPoints: (cx: number, cy: number, radius: number, position: "top" | "bottom") => string;
+/**
+ * Resolves the label prop to a string or undefined.
+ */
+export declare const resolveLabel: (label: string | ((dataIndex: number) => string) | undefined, dataX: number) => string | undefined;
+/**
+ * Computes the vertical position of the label text baseline.
+ */
+export declare const computeLabelY: (pixelY: number, radius: number, labelPosition: "top" | "bottom", renderArrow: boolean) => number;
+//# sourceMappingURL=utils.d.ts.map

package/dist/typescript/src/lib/Components/Point/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/Components/Point/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,eAAO,MAAM,YAAY,KAAK,CAAC;AAC/B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,YAAY,IAAI,CAAC;AAC9B,eAAO,MAAM,GAAG,IAAI,CAAC;AAErB,eAAO,MAAM,cAAc,GACzB,IAAI,MAAM,EACV,IAAI,MAAM,EACV,MAAM,WAAW,KAChB,OAIyB,CAAC;AAE7B;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,IAAI,MAAM,EACV,IAAI,MAAM,EACV,QAAQ,MAAM,EACd,UAAU,KAAK,GAAG,QAAQ,KACzB,MAYF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,EAC3D,OAAO,MAAM,KACZ,MAAM,GAAG,SAGX,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,eAAe,KAAK,GAAG,QAAQ,EAC/B,aAAa,OAAO,KACnB,MAMF,CAAC"}

package/dist/typescript/src/lib/Components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './LineChart';
+export * from './Point';
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/lib/Components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}

package/dist/typescript/src/lib/utils/scales/scales.d.ts

@@ -25,4 +25,14 @@ export declare const isCategoricalScale: (scale: ChartScaleFunction) => scale is
  * Checks if a scale is a numeric scale.
  */
 export declare const isNumericScale: (scale: ChartScaleFunction) => scale is NumericScale;
+/**
+ * Projects a single data-space coordinate pair to pixel-space
+ * using the provided x and y scale functions.
+ *
+ * For categorical (band) scales the point is anchored at the center of the band.
+ */
+export declare const projectPoint: (dataX: number, dataY: number, xScale: ChartScaleFunction, yScale: ChartScaleFunction) => {
+    x: number;
+    y: number;
+};
 //# sourceMappingURL=scales.d.ts.map

package/dist/typescript/src/lib/utils/scales/scales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/scales/scales.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACb,MAAM,UAAU,CAAC;AAElB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,+BAI7B;IACD,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;CACnB,KAAG,YAMH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,6BAIjC;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,gBAUH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,eAAe,CAAC,WAAW,CAAC,KACtC,SAAS,IAAI,MAA8B,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,kBAAkB,KACxB,KAAK,IAAI,gBAEX,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,kBAAkB,KACxB,KAAK,IAAI,YAEX,CAAC"}
+{"version":3,"file":"scales.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/scales/scales.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,YAAY,EACb,MAAM,UAAU,CAAC;AAElB;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,+BAI7B;IACD,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;CACnB,KAAG,YAMH,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,6BAIjC;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,gBAUH,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,eAAe,CAAC,WAAW,CAAC,KACtC,SAAS,IAAI,MAA8B,CAAC;AAE/C;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAC7B,OAAO,kBAAkB,KACxB,KAAK,IAAI,gBAEX,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,kBAAkB,KACxB,KAAK,IAAI,YAEX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GACvB,OAAO,MAAM,EACb,OAAO,MAAM,EACb,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,KACzB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAQxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative-visualization",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -44,8 +44,8 @@
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.11",
-    "@ledgerhq/lumen-ui-rnative": "0.1.27",
+    "@ledgerhq/lumen-design-core": "0.1.12",
+    "@ledgerhq/lumen-ui-rnative": "0.1.29",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-svg": "^15.0.0"

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

@@ -2,68 +2,16 @@ 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 = ({
+import {
+  DEFAULT_HEIGHT,
+  OVERFLOW_NEGATIVE_MARGIN,
+  resolveAxisPadding,
+  resolveInset,
+} from './utils';
+
+export function CartesianChart({
   series,
   xAxis,
   yAxis,
@@ -73,7 +21,7 @@ export const CartesianChart = ({
   axisPadding,
   ariaLabel = 'Chart',
   children,
-}: CartesianChartProps) => {
+}: Readonly<CartesianChartProps>) {
   const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(width);
 
   const needsMeasurement = width === undefined;
@@ -125,7 +73,7 @@ export const CartesianChart = ({
         onLayout={handleLayout}
         style={{
           height,
-          ...DEFAULT_NEGATIVE_MARGIN,
+          ...OVERFLOW_NEGATIVE_MARGIN,
         }}
         accessibilityRole='image'
         accessibilityLabel={ariaLabel}
@@ -143,11 +91,10 @@ export const CartesianChart = ({
       style={{
         width: resolvedWidth,
         height,
-        marginLeft: -20,
-        marginRight: -20,
+        ...OVERFLOW_NEGATIVE_MARGIN,
       }}
     >
       {svgContent}
     </View>
   );
-};
+}

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

@@ -26,8 +26,10 @@ export type CartesianChartProps = {
    */
   height?: number;
   /**
-   * Padding between the SVG edge and the drawing area.
-   * A number applies uniformly; a partial object overrides individual sides.
+   * Extra padding between the SVG edge and the drawing area, added on top of
+   * a built-in overflow buffer that prevents content (labels, points, ticks)
+   * from being clipped. A number applies uniformly; a partial object sets
+   * individual sides (unset sides default to `0`).
    */
   inset?: number | Partial<ChartInset>;
   /**

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

@@ -0,0 +1,88 @@
+import { describe, it, expect } from '@jest/globals';
+
+import {
+  OVERFLOW_BUFFER,
+  ZERO_PADDING,
+  resolveAxisPadding,
+  resolveInset,
+} from './utils';
+
+describe('resolveInset', () => {
+  it('should return DEFAULT_INSET when undefined', () => {
+    expect(resolveInset(undefined)).toEqual(OVERFLOW_BUFFER);
+  });
+
+  it('should add a uniform number to each default side', () => {
+    expect(resolveInset(10)).toEqual({
+      top: 10 + OVERFLOW_BUFFER.top,
+      right: 10 + OVERFLOW_BUFFER.right,
+      bottom: 10 + OVERFLOW_BUFFER.bottom,
+      left: 10 + OVERFLOW_BUFFER.left,
+    });
+  });
+
+  it('should handle zero as a uniform number', () => {
+    expect(resolveInset(0)).toEqual(OVERFLOW_BUFFER);
+  });
+
+  it('should handle negative uniform values', () => {
+    expect(resolveInset(-5)).toEqual({
+      top: -5 + OVERFLOW_BUFFER.top,
+      right: -5 + OVERFLOW_BUFFER.right,
+      bottom: -5 + OVERFLOW_BUFFER.bottom,
+      left: -5 + OVERFLOW_BUFFER.left,
+    });
+  });
+
+  it('should merge a full partial object with defaults', () => {
+    expect(resolveInset({ top: 10, right: 15, bottom: 20, left: 25 })).toEqual({
+      top: 10 + OVERFLOW_BUFFER.top,
+      right: 15 + OVERFLOW_BUFFER.right,
+      bottom: 20 + OVERFLOW_BUFFER.bottom,
+      left: 25 + OVERFLOW_BUFFER.left,
+    });
+  });
+
+  it('should treat missing sides as 0 when given a partial object', () => {
+    expect(resolveInset({ top: 10 })).toEqual({
+      top: 10 + OVERFLOW_BUFFER.top,
+      right: OVERFLOW_BUFFER.right,
+      bottom: OVERFLOW_BUFFER.bottom,
+      left: OVERFLOW_BUFFER.left,
+    });
+  });
+
+  it('should handle an empty object', () => {
+    expect(resolveInset({})).toEqual(OVERFLOW_BUFFER);
+  });
+});
+
+describe('resolveAxisPadding', () => {
+  it('should return ZERO_PADDING when undefined', () => {
+    expect(resolveAxisPadding(undefined)).toEqual(ZERO_PADDING);
+  });
+
+  it('should resolve a full padding object', () => {
+    expect(
+      resolveAxisPadding({ top: 5, right: 10, bottom: 15, left: 20 }),
+    ).toEqual({
+      top: 5,
+      right: 10,
+      bottom: 15,
+      left: 20,
+    });
+  });
+
+  it('should treat missing sides as 0', () => {
+    expect(resolveAxisPadding({ bottom: 30 })).toEqual({
+      top: 0,
+      right: 0,
+      bottom: 30,
+      left: 0,
+    });
+  });
+
+  it('should handle an empty object', () => {
+    expect(resolveAxisPadding({})).toEqual(ZERO_PADDING);
+  });
+});

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

@@ -0,0 +1,65 @@
+import type { ChartInset } from '../../utils/types';
+import type { CartesianChartProps } from './types';
+
+export const DEFAULT_HEIGHT = 160;
+
+/**
+ * Internal buffer that prevents SVG content (labels, points, ticks) from being
+ * clipped at the edge of the container. Compensated by negative margins on the
+ * wrapper so the chart's visual footprint stays unchanged.
+ */
+export const OVERFLOW_BUFFER: ChartInset = {
+  top: 30,
+  right: 20,
+  bottom: 30,
+  left: 20,
+};
+export const OVERFLOW_NEGATIVE_MARGIN = {
+  marginTop: -OVERFLOW_BUFFER.top,
+  marginRight: -OVERFLOW_BUFFER.right,
+  marginBottom: -OVERFLOW_BUFFER.bottom,
+  marginLeft: -OVERFLOW_BUFFER.left,
+};
+export const ZERO_PADDING: ChartInset = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+};
+
+export const resolveInset = (
+  inset: CartesianChartProps['inset'],
+): ChartInset => {
+  let consumer: ChartInset;
+  if (inset === undefined) {
+    consumer = ZERO_PADDING;
+  } else if (typeof inset === 'number') {
+    consumer = { top: inset, right: inset, bottom: inset, left: inset };
+  } else {
+    consumer = {
+      top: inset.top ?? 0,
+      right: inset.right ?? 0,
+      bottom: inset.bottom ?? 0,
+      left: inset.left ?? 0,
+    };
+  }
+
+  return {
+    top: consumer.top + OVERFLOW_BUFFER.top,
+    right: consumer.right + OVERFLOW_BUFFER.right,
+    bottom: consumer.bottom + OVERFLOW_BUFFER.bottom,
+    left: consumer.left + OVERFLOW_BUFFER.left,
+  };
+};
+
+export 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,
+  };
+};

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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { View } from 'react-native';
-import { StoryDecorator } from '../../../../.storybook/StoryDecorator.tsx';
 
+import { StoryDecorator } from '../../../../.storybook/StoryDecorator.tsx';
 import { LineChart } from './LineChart';
 
 const meta = {

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

@@ -0,0 +1,152 @@
+import { useTheme } from '@ledgerhq/lumen-ui-rnative';
+import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
+import { View } from 'react-native';
+import { G } from 'react-native-svg';
+
+import { StoryDecorator } from '../../../../.storybook/StoryDecorator.tsx';
+import { LineChart } from '../LineChart';
+import { Point, PointLabel } from './Point';
+
+const sampleSeries = [
+  {
+    id: 'prices',
+    stroke: '#7B61FF',
+    data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+  },
+];
+
+const meta = {
+  component: Point,
+  title: 'Visualization/Point',
+  tags: ['experimental'],
+  decorators: [
+    (Story, context) => {
+      return (
+        <StoryDecorator context={context}>
+          <View style={{ width: 600, padding: 16 }}>
+            <Story />
+          </View>
+        </StoryDecorator>
+      );
+    },
+  ],
+} satisfies Meta<typeof Point>;
+
+export default meta;
+type Story = StoryObj<typeof Point>;
+
+export const Base: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  render: () => {
+    const { theme } = useTheme();
+    return (
+      <LineChart series={sampleSeries} height={250} showArea>
+        <Point
+          dataX={9}
+          dataY={4}
+          label='$4.00'
+          color={theme.colors.bg.errorStrong}
+          labelPosition='bottom'
+        />
+        <Point
+          dataX={4}
+          dataY={98}
+          label='$98.00'
+          color={theme.colors.bg.successStrong}
+          labelPosition='top'
+        />
+      </LineChart>
+    );
+  },
+};
+
+export const WithCustomLabelComponent: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  render: () => {
+    const { theme } = useTheme();
+    return (
+      <LineChart
+        series={sampleSeries}
+        height={250}
+        inset={{ top: 15 }}
+        showArea
+      >
+        <Point
+          dataX={9}
+          dataY={4}
+          label='$4.00'
+          color={theme.colors.bg.errorStrong}
+          labelPosition='bottom'
+          LabelComponent={({ children, ...props }) => (
+            <PointLabel {...props}>{children}</PointLabel>
+          )}
+        />
+        <Point
+          dataX={4}
+          dataY={98}
+          label='$98.00'
+          color={theme.colors.bg.successStrong}
+          labelPosition='top'
+          LabelComponent={({ x, y, children }) => (
+            <G>
+              <PointLabel x={x} y={y - 16}>
+                {children}
+              </PointLabel>
+              <PointLabel x={x} y={y} fontSize={10}>
+                +5.2%
+              </PointLabel>
+            </G>
+          )}
+        />
+      </LineChart>
+    );
+  },
+};
+
+export const NoPoint: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  render: () => (
+    <LineChart series={sampleSeries} height={250} showArea>
+      <Point dataX={4} dataY={98} label='ATH' hidePoint />
+      <Point dataX={9} dataY={4} label='Low' hidePoint labelPosition='bottom' />
+    </LineChart>
+  ),
+};
+
+export const CustomSize: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  render: () => {
+    const { theme } = useTheme();
+    return (
+      <LineChart series={sampleSeries} height={250} showArea>
+        <Point
+          dataX={4}
+          dataY={98}
+          size={16}
+          label={(i) => `Index ${i}`}
+          color={theme.colors.bg.successStrong}
+        />
+        <Point
+          dataX={9}
+          dataY={4}
+          size={6}
+          label='$4.00'
+          color={theme.colors.bg.errorStrong}
+          labelPosition='bottom'
+        />
+      </LineChart>
+    );
+  },
+};