@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/dts/chart/utils/chart.d.ts

@@ -0,0 +1,124 @@
+import type { AnimatedProp } from '@shopify/react-native-skia';
+import type { GradientDefinition } from './gradient';
+export declare const defaultStackId = 'DEFAULT_STACK_ID';
+export type AxisBounds = {
+  min: number;
+  max: number;
+};
+/**
+ * Type guard to check if bounds are complete with both min and max values.
+ * @param bounds - The bounds to validate
+ * @returns True if bounds has both min and max defined
+ */
+export declare const isValidBounds: (bounds: Partial<AxisBounds>) => bounds is AxisBounds;
+export type Series = {
+  /**
+   * Id of the series.
+   */
+  id: string;
+  /**
+   * Data array for this series. Use null values to create gaps in the visualization.
+   *
+   * Can be either:
+   * - Array of numbers: `[10, -5, 20]`
+   * - Array of tuples: `[[0, 10], [0, -5], [0, 20]]` [baseline, value] pairs
+   */
+  data?: Array<number | null> | Array<[number, number] | null>;
+  /**
+   * Label of the series.
+   * Used for scrubber beacon labels.
+   */
+  label?: string;
+  /**
+   * Color for the series.
+   * If gradient is provided, that will be used for chart components
+   * Color will still be used by scrubber beacon labels
+   */
+  color?: string;
+  /**
+   * Color gradient configuration.
+   * Takes precedence over color except for scrubber beacon labels.
+   */
+  gradient?: GradientDefinition;
+  /**
+   * Id of the y-axis this series uses.
+   * Defaults to defaultAxisId if not specified.
+   */
+  yAxisId?: string;
+  /**
+   * Id of the stack group this series belongs to.
+   * Series with the same stackId value will be stacked together.
+   * If not specified, the series will not be stacked.
+   */
+  stackId?: string;
+};
+/**
+ * Calculates the domain of a chart from series data.
+ * Domain represents the range of x-values from the data.
+ */
+export declare const getChartDomain: (
+  series: Series[],
+  min?: number,
+  max?: number,
+) => Partial<AxisBounds>;
+/**
+ * Transforms series data into stacked data using D3's stack algorithm.
+ * Returns a map of series ID to transformed [baseline, value] tuples.
+ *
+ * @param series - Array of series with potential stack properties
+ * @returns Map of series ID to stacked data arrays
+ */
+export declare const getStackedSeriesData: (
+  series: Series[],
+) => Map<string, Array<[number, number] | null>>;
+/**
+ * Extracts line data values from series data that may contain tuples.
+ * For tuple data [[baseline, value]], extracts the last value.
+ * For numeric data [value], returns as-is.
+ *
+ * @param data - Array of numbers, tuples, or null values
+ * @returns Array of numbers or null values
+ */
+export declare const getLineData: (
+  data?: Array<number | null> | Array<[number, number] | null>,
+) => Array<number | null>;
+/**
+ * Calculates the range of a chart from series data.
+ * Range represents the range of y-values from the data.
+ * Handles stacking by transforming data when series have stack properties.
+ */
+export declare const getChartRange: (
+  series: Series[],
+  min?: number,
+  max?: number,
+) => Partial<AxisBounds>;
+export type ChartInset = {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+};
+export declare const defaultChartInset: ChartInset;
+/**
+ * Normalize padding to include all sides with a value.
+ * @param padding - The padding to get.
+ * @param defaults - Optional complete default values to use instead of 0.
+ * @returns The calculated padding.
+ */
+/**
+ * Normalize inset to include all sides with a value.
+ * @param inset - The inset to get.
+ * @param defaults - Optional complete default values to use instead of 0.
+ * @returns The calculated inset.
+ */
+export declare const getChartInset: (
+  inset?: number | Partial<ChartInset>,
+  defaults?: ChartInset,
+) => ChartInset;
+/**
+ * Unwraps an optionally animated value to get the raw value.
+ * @param value - The value to unwrap.
+ * @returns The raw value.
+ */
+export declare const unwrapAnimatedValue: <T>(value: AnimatedProp<T>) => T;
+//# sourceMappingURL=chart.d.ts.map

package/dts/chart/utils/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/chart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAG/D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,eAAO,MAAM,cAAc,qBAAqB,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,QAAQ,OAAO,CAAC,UAAU,CAAC,KAAG,MAAM,IAAI,UAChB,CAAC;AAEvD,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IAC7D;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,EAAE,EAChB,MAAM,MAAM,EACZ,MAAM,MAAM,KACX,OAAO,CAAC,UAAU,CAoBpB,CAAC;AAcF;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,MAAM,EAAE,KACf,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CA0E5C,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GACtB,OAAO,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,KAC3D,KAAK,CAAC,MAAM,GAAG,IAAI,CAerB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,EAAE,EAChB,MAAM,MAAM,EACZ,MAAM,MAAM,KACX,OAAO,CAAC,UAAU,CA2EpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;;;;GAKG;AACH;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,QAAQ,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,EACpC,WAAW,UAAU,KACpB,UAuBF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,EAAE,OAAO,YAAY,CAAC,CAAC,CAAC,KAAG,CAM/D,CAAC"}

package/dts/chart/utils/context.d.ts

@@ -0,0 +1,116 @@
+import type { SharedValue } from 'react-native-reanimated';
+import type { Rect } from '@coinbase/cds-common/types';
+import type { SkTypefaceFontProvider } from '@shopify/react-native-skia';
+import type { AxisConfig } from './axis';
+import type { Series } from './chart';
+import type { ChartScaleFunction, SerializableScale } from './scale';
+/**
+ * Context value for Cartesian (X/Y) coordinate charts.
+ * Contains axis-specific methods and properties for rectangular coordinate systems.
+ */
+export type CartesianChartContextValue = {
+  /**
+   * The series data for the chart.
+   */
+  series: Series[];
+  /**
+   * Returns the series which matches the seriesId or undefined.
+   * @param seriesId - A series' id
+   */
+  getSeries: (seriesId?: string) => Series | undefined;
+  /**
+   * Returns the data for a series
+   * @param seriesId - A series' id
+   * @returns data for series, if series exists
+   */
+  getSeriesData: (seriesId?: string) => Array<[number, number] | null> | undefined;
+  /**
+   * Whether to animate the chart.
+   */
+  animate: boolean;
+  /**
+   * Width of the chart SVG.
+   */
+  width: number;
+  /**
+   * Height of the chart SVG.
+   */
+  height: number;
+  /**
+   * Default font families to use within ChartText.
+   * When not set, should use the default for the system.
+   */
+  fontFamilies?: string[];
+  /**
+   * Skia font provider.
+   */
+  fontProvider: SkTypefaceFontProvider;
+  /**
+   * Get x-axis configuration.
+   */
+  getXAxis: () => AxisConfig | undefined;
+  /**
+   * Get y-axis configuration by ID.
+   * @param id - The axis ID. Defaults to defaultAxisId.
+   */
+  getYAxis: (id?: string) => AxisConfig | undefined;
+  /**
+   * Get x-axis scale function.
+   */
+  getXScale: () => ChartScaleFunction | undefined;
+  /**
+   * Get y-axis scale function by ID.
+   * @param id - The axis ID. Defaults to defaultAxisId.
+   */
+  getYScale: (id?: string) => ChartScaleFunction | undefined;
+  /**
+   * Get x-axis serializable scale function that can be used in worklets.
+   */
+  getXSerializableScale: () => SerializableScale | undefined;
+  /**
+   * Get y-axis serializable scale function by ID that can be used in worklets.
+   * @param id - The axis ID. Defaults to defaultAxisId.
+   */
+  getYSerializableScale: (id?: string) => SerializableScale | undefined;
+  /**
+   * Drawing area of the chart.
+   */
+  drawingArea: Rect;
+  /**
+   * Length of the data domain.
+   * This is equal to the length of xAxis.data or the longest series data length
+   * This equals the number of possible scrubber positions
+   */
+  dataLength: number;
+  /**
+   * Registers an axis.
+   * Used by axis components to reserve space in the chart, preventing overlap with the drawing area.
+   * @param id - The axis ID
+   * @param position - The axis position ('top'/'bottom' for x-axis, 'left'/'right' for y-axis)
+   * @param size - The size of the axis in pixels
+   */
+  registerAxis: (id: string, position: 'top' | 'bottom' | 'left' | 'right', size: number) => void;
+  /**
+   * Unregisters an axis.
+   */
+  unregisterAxis: (id: string) => void;
+  /**
+   * Gets the rectangle bounds of a requested axis.
+   * Computes the bounds of the axis based on the chart's drawing area chart/axis config, and axis position.
+   */
+  getAxisBounds: (id: string) => Rect | undefined;
+};
+export type ScrubberContextValue = {
+  /**
+   * Enables scrubbing interactions.
+   * When true, allows scrubbing and makes scrubber components interactive.
+   */
+  enableScrubbing: boolean;
+  /**
+   * The current position of the scrubber.
+   */
+  scrubberPosition: SharedValue<number | undefined>;
+};
+export declare const ScrubberContext: import('react').Context<ScrubberContextValue | undefined>;
+export declare const useScrubberContext: () => ScrubberContextValue;
+//# sourceMappingURL=context.d.ts.map

package/dts/chart/utils/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,SAAS,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IACrD;;;;OAIG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACjF;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;OAEG;IACH,YAAY,EAAE,sBAAsB,CAAC;IACrC;;OAEG;IACH,QAAQ,EAAE,MAAM,UAAU,GAAG,SAAS,CAAC;IACvC;;;OAGG;IACH,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,UAAU,GAAG,SAAS,CAAC;IAClD;;OAEG;IACH,SAAS,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;IAChD;;;OAGG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,qBAAqB,EAAE,MAAM,iBAAiB,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,qBAAqB,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,iBAAiB,GAAG,SAAS,CAAC;IACtE;;OAEG;IACH,WAAW,EAAE,IAAI,CAAC;IAClB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,GAAG,SAAS,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACnD,CAAC;AAEF,eAAO,MAAM,eAAe,2DAA6D,CAAC;AAE1F,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,CAAC"}

package/dts/chart/utils/gradient.d.ts

@@ -0,0 +1,117 @@
+import type { AxisBounds } from './chart';
+import { type ChartScaleFunction, type SerializableScale } from './scale';
+/**
+ * Defines a color transition point in the gradient
+ */
+export type GradientStop = {
+  /**
+   * Position in data space.
+   * Multiple stops at the same offset create hard color transitions.
+   */
+  offset: number;
+  /**  Color at the stop (any valid Skia color) */
+  color: string;
+  /** Optional opacity (0-1). Defaults to 1. */
+  opacity?: number;
+};
+/**
+ * Defines a gradient.
+ */
+export type GradientDefinition = {
+  /**
+   * Axis that the gradient maps to.
+   * @default 'y'
+   */
+  axis?: 'x' | 'y';
+  /**
+   * Gradient stops with colors and positions.
+   * Can be an array of stop objects or a function that receives domain bounds.
+   */
+  stops: GradientStop[] | ((domain: AxisBounds) => GradientStop[]);
+};
+/**
+ * Resolves gradient stops, handling both static arrays and function forms.
+ * When stops is a function, calls it with the domain bounds.
+ */
+export declare const getGradientStops: (
+  stops: GradientStop[] | ((domain: AxisBounds) => GradientStop[]),
+  domain: AxisBounds,
+) => GradientStop[];
+/**
+ * Adds an opacity to a color
+ * Returns an rgba string.
+ */
+export declare const getColorWithOpacity: (color1: string, opacity: number) => string;
+/**
+ * Creates a gradient configuration for SVG components.
+ * Processes a GradientDefinition into a renderable GradientConfig.
+ * Supports both numeric scales (linear, log) and categorical scales (band).
+ *
+ * @param gradient - GradientDefinition configuration (required)
+ * @param xScale - X-axis scale (required)
+ * @param yScale - Y-axis scale (required)
+ * @returns GradientConfig or null if gradient processing fails
+ *
+ * @example
+ * const gradientConfig = useMemo(() => {
+ *   if (!gradient || !xScale || !yScale) return;
+ *   return getGradientConfig(gradient, xScale, yScale);
+ * }, [gradient, xScale, yScale]);
+ *
+ * if (gradientConfig) {
+ *   return (
+ *     <defs>
+ *       <Gradient
+ *         config={gradientConfig}
+ *         direction={gradient.axis === 'x' ? 'horizontal' : 'vertical'}
+ *         id={gradientId}
+ *       />
+ *     </defs>
+ *   );
+ * }
+ */
+export declare const getGradientConfig: (
+  gradient: GradientDefinition,
+  xScale: ChartScaleFunction,
+  yScale: ChartScaleFunction,
+) => GradientStop[] | undefined;
+/**
+ * Evaluates the color at a specific data value based on the gradient stops, ignoring opacity.
+ * @param stops - The gradient stops configuration
+ * @param dataValue - The data value to evaluate (for band scales, this is the index)
+ * @param scale - The scale to use for value mapping (handles log scales correctly)
+ * @returns The color string at this data value, or undefined if invalid
+ */
+export declare const evaluateGradientAtValue: (
+  stops: GradientStop[],
+  dataValue: number,
+  scale: SerializableScale | ChartScaleFunction,
+) => string | undefined;
+/**
+ * Determines the baseline value for the gradient area by finding the value
+ * within the axis bounds that is closest to the target baseline.
+ *
+ * @param axisBounds - The min and max bounds of the axis
+ * @param baseline - The target baseline value (defaults to 0)
+ * @returns The value within bounds closest to the baseline
+ */
+export declare const getBaseline: (axisBounds: AxisBounds, baseline?: number) => number;
+/**
+ * Generates a gradient definition for the area chart based on the axis bounds
+ * and styling parameters. Ensures gradient stops are in ascending order.
+ *
+ * @param axisBounds - The min and max bounds of the axis
+ * @param baselineValue - The baseline value for the gradient
+ * @param fill - The color to use for the gradient
+ * @param peakOpacity - Opacity at the peak of the gradient
+ * @param baselineOpacity - Opacity at the baseline
+ * @returns A gradient definition with y-axis stops in ascending order
+ */
+export declare const createGradient: (
+  axisBounds: AxisBounds,
+  baselineValue: number,
+  fill: string,
+  peakOpacity: number,
+  baselineOpacity: number,
+) => GradientDefinition;
+//# sourceMappingURL=gradient.d.ts.map

package/dts/chart/utils/gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/gradient.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB;;;OAGG;IACH,KAAK,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,CAAC;CAClE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,YAAY,EAAE,CAAC,EAChE,QAAQ,UAAU,KACjB,YAAY,EAKd,CAAC;AAiEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,MAAM,EAAE,SAAS,MAAM,KAAG,MAGrE,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,KACzB,YAAY,EAAE,GAAG,SAqBnB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,iBAAiB,GAAG,kBAAkB,KAC5C,MAAM,GAAG,SAyFX,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,KACtB,kBA0BF,CAAC"}

package/dts/chart/utils/index.d.ts

@@ -0,0 +1,11 @@
+export * from './axis';
+export * from './bar';
+export * from './chart';
+export * from './context';
+export * from './gradient';
+export * from './path';
+export * from './point';
+export * from './scale';
+export * from './scrubber';
+export * from './transition';
+//# sourceMappingURL=index.d.ts.map

package/dts/chart/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dts/chart/utils/path.d.ts

@@ -0,0 +1,160 @@
+import { type ChartScaleFunction } from './scale';
+export type ChartPathCurveType =
+  | 'bump'
+  | 'catmullRom'
+  | 'linear'
+  | 'linearClosed'
+  | 'monotone'
+  | 'natural'
+  | 'step'
+  | 'stepBefore'
+  | 'stepAfter';
+/**
+ * Get the d3 curve function for a path.
+ * See https://d3js.org/d3-shape/curve
+ * @param curve - The curve type. Defaults to 'linear'.
+ * @returns The d3 curve function.
+ */
+export declare const getPathCurveFunction: (
+  curve?: ChartPathCurveType,
+) => import('d3-shape').CurveFactory;
+/**
+ * Generates an SVG line path string from data using chart scale functions.
+ *
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'linear' });
+ * ```
+ */
+export declare const getLinePath: ({
+  data,
+  curve,
+  xScale,
+  yScale,
+  xData,
+  connectNulls,
+}: {
+  data: (
+    | number
+    | null
+    | {
+        x: number;
+        y: number;
+      }
+  )[];
+  curve?: ChartPathCurveType;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  xData?: number[];
+  /**
+   * When true, null values are skipped and the line connects across gaps.
+   * When false, null values create gaps in the line.
+   * @default false
+   */
+  connectNulls?: boolean;
+}) => string;
+/**
+ * Generates an SVG area path string from data using chart scale functions.
+ * Supports both single values (area from baseline to value) and tuples ([baseline, value]).
+ *
+ * @example
+ * ```typescript
+ * // Single values - area from baseline to value
+ * const area = getAreaPath({
+ *   data: [1, 2, 3],
+ *   xScale,
+ *   yScale,
+ * });
+ *
+ * // Range values - area from low to high
+ * const rangeArea = getAreaPath({
+ *   data: [[0, 3], [2, 4], [1, 5]],
+ *   xScale,
+ *   yScale,
+ *   curve: 'monotone'
+ * });
+ * ```
+ */
+export declare const getAreaPath: ({
+  data,
+  curve,
+  xScale,
+  yScale,
+  xData,
+  connectNulls,
+}: {
+  data: (number | null)[] | Array<[number, number] | null>;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  curve: ChartPathCurveType;
+  xData?: number[];
+  /**
+   * When true, null values are skipped and the area connects across gaps.
+   * When false, null values create gaps in the area.
+   * @default false
+   */
+  connectNulls?: boolean;
+}) => string;
+/**
+ * Converts line coordinates to an SVG path string.
+ * Useful for rendering axis lines and tick marks.
+ *
+ * @example
+ * ```typescript
+ * const path = lineToPath(0, 0, 100, 100);
+ * // Returns: "M 0 0 L 100 100"
+ * ```
+ */
+export declare const lineToPath: (x1: number, y1: number, x2: number, y2: number) => string;
+/**
+ * Creates an SVG path string for a rectangle with selective corner rounding.
+ * Useful for creating bars in charts with optional rounded corners.
+ *
+ * @example
+ * ```typescript
+ * // Simple rectangle bar
+ * const barPath = getBarPath(10, 20, 50, 100, 0, false, false);
+ *
+ * // Bar with rounded top corners
+ * const roundedPath = getBarPath(10, 20, 50, 100, 8, true, false);
+ * ```
+ */
+export declare const getBarPath: (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+  roundTop: boolean,
+  roundBottom: boolean,
+) => string;
+/**
+ * Generates an SVG path string with circles arranged in a dotted pattern within a bounding area.
+ * Creates circles at regular intervals based on the pattern size and dot size parameters.
+ *
+ * @param bounds - The bounding rectangle to fill with dots
+ * @param patternSize - Size of the pattern unit (spacing between dots)
+ * @param dotSize - Radius of each dot
+ * @returns SVG path string containing all the circles
+ *
+ * @example
+ * ```typescript
+ * const dotsPath = getDottedAreaPath(
+ *   { x: 0, y: 0, width: 100, height: 50 },
+ *   8, // 8px spacing
+ *   2  // 2px radius dots
+ * );
+ * ```
+ */
+export declare const getDottedAreaPath: (
+  bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  },
+  patternSize: number,
+  dotSize: number,
+) => string;
+//# sourceMappingURL=path.d.ts.map

package/dts/chart/utils/path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/path.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,MAAM,GACN,YAAY,GACZ,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAO,kBAA6B,oCAsBxE,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoFH,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,MAE3E,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,MAAM,EACT,GAAG,MAAM,EACT,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,UAAU,OAAO,EACjB,aAAa,OAAO,KACnB,MA0BF,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,iBAAiB,GAC5B,QAAQ;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC/D,aAAa,MAAM,EACnB,SAAS,MAAM,KACd,MAgCF,CAAC"}

package/dts/chart/utils/point.d.ts

@@ -0,0 +1,134 @@
+import type { TextHorizontalAlignment, TextVerticalAlignment } from '../text';
+import { type ChartScaleFunction, type SerializableScale } from './scale';
+/**
+ * Position a label should be placed relative to the point
+ *
+ * @example
+ * 'top' would have the label be located above the point itself,
+ * and thus the vertical alignment of that text would be bottom.
+ */
+export type PointLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
+/**
+ * Get a point from a data value and a scale.
+ * @note for categorical scales, the point will be centered within the band.
+ * @note for log scales, zero and negative values are clamped to a small positive value.
+ * @param data - the data value.
+ * @param scale - the scale function.
+ * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ */
+export declare const getPointOnScale: (dataValue: number, scale: ChartScaleFunction) => number;
+/**
+ * Get a point from a data value and a serializable scale (worklet-compatible).
+ * @note for categorical scales, the point will be centered within the band.
+ * @note for log scales, zero and negative values are clamped to a small positive value.
+ * @param dataValue - the data value.
+ * @param scale - the serializable scale object.
+ * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ */
+export declare function getPointOnSerializableScale(
+  dataValue: number,
+  scale: SerializableScale,
+): number;
+/**
+ * Projects a single data point to pixel coordinates using serializable scales.
+ * This is the worklet-compatible version for use in react-native-reanimated.
+ */
+export declare function projectPointWithSerializableScale({
+  x,
+  y,
+  xScale,
+  yScale,
+}: {
+  x: number;
+  y: number;
+  xScale: SerializableScale;
+  yScale: SerializableScale;
+}): {
+  x: number;
+  y: number;
+};
+/**
+ * Projects a data point to pixel coordinates using the chart scale.
+ * Automatically handles log scale transformations for zero/negative values.
+ *
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const pixelCoord = projectPoint({ x: 5, y: 10, chartScale });
+ * ```
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const pixelCoord = projectPoint({ x: 2, y: 10, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
+ * ```
+ */
+export declare const projectPoint: ({
+  x,
+  y,
+  xScale,
+  yScale,
+}: {
+  x: number;
+  y: number;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+}) => {
+  x: number;
+  y: number;
+};
+/**
+ * Projects multiple data points to pixel coordinates using chart scale functions.
+ * Handles both numeric and band scales automatically.
+ *
+ * @example
+ * ```typescript
+ * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
+ * const pixelPoints = projectPoints({ data, chartScale });
+ * // For mixed scales
+ * const pixelPoints = projectPoints({ data, chartScale, xData: ['Jan', 'Feb', 'Mar'] });
+ * ```
+ */
+export declare const projectPoints: ({
+  data,
+  xScale,
+  yScale,
+  xData,
+  yData,
+}: {
+  data: (
+    | number
+    | null
+    | {
+        x: number;
+        y: number;
+      }
+  )[];
+  xData?: number[];
+  yData?: number[];
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+}) => Array<{
+  x: number;
+  y: number;
+} | null>;
+/**
+ * Determines text alignment based on label position.
+ * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
+ */
+export declare const getAlignmentFromPosition: (position: PointLabelPosition) => {
+  horizontalAlignment: TextHorizontalAlignment;
+  verticalAlignment: TextVerticalAlignment;
+};
+/**
+ * Calculates the final label coordinates by applying offset based on position.
+ */
+export declare const getLabelCoordinates: (
+  x: number,
+  y: number,
+  position: PointLabelPosition,
+  offset: number,
+) => {
+  x: number;
+  y: number;
+};
+//# sourceMappingURL=point.d.ts.map