@coinbase/cds-web 8.66.2 → 9.0.0-rc.2

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

@@ -0,0 +1,112 @@
+type CommandType =
+  | 'M'
+  | 'L'
+  | 'H'
+  | 'V'
+  | 'C'
+  | 'S'
+  | 'Q'
+  | 'T'
+  | 'A'
+  | 'Z'
+  | 'm'
+  | 'l'
+  | 'h'
+  | 'v'
+  | 'c'
+  | 's'
+  | 'q'
+  | 't'
+  | 'a'
+  | 'z';
+type PathCommand = {
+  type: CommandType;
+  x?: number;
+  y?: number;
+  x1?: number;
+  y1?: number;
+  x2?: number;
+  y2?: number;
+  rx?: number;
+  ry?: number;
+  xAxisRotation?: number;
+  largeArcFlag?: number;
+  sweepFlag?: number;
+  [key: string]: any;
+};
+/**
+ * Convert command objects to arrays of points, run de Casteljau's algorithm on it
+ * to split into to the desired number of segments.
+ *
+ * @param {Object} commandStart The start command object
+ * @param {Object} commandEnd The end command object
+ * @param {Number} segmentCount The number of segments to create
+ * @return {Object[]} An array of commands representing the segments in sequence
+ */
+export declare function splitCurve(
+  commandStart: PathCommand,
+  commandEnd: PathCommand,
+  segmentCount?: number,
+): PathCommand[];
+type ExcludeSegmentFn = (commandStart: PathCommand, commandEnd: PathCommand) => boolean;
+/**
+ * Takes a path `d` string and converts it into an array of command
+ * objects. Drops the `Z` character.
+ *
+ * @param {String|null} d A path `d` string
+ */
+export declare function pathCommandsFromString(d: string | null | undefined): PathCommand[];
+type InterpolateOptions = {
+  excludeSegment?: ExcludeSegmentFn;
+  snapEndsToInput?: boolean;
+};
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` command in paths unless both A and B end with it.
+ *
+ * This function works directly with arrays of command objects instead of with
+ * path `d` strings (see interpolatePath for working with `d` strings).
+ *
+ * @param {Object[]} aCommandsInput Array of path commands
+ * @param {Object[]} bCommandsInput Array of path commands
+ * @param {(Function|Object)} interpolateOptions
+ * @param {Function} interpolateOptions.excludeSegment a function that takes a start command object and
+ *   end command object and returns true if the segment should be excluded from splitting.
+ * @param {Boolean} interpolateOptions.snapEndsToInput a boolean indicating whether end of input should
+ *   be sourced from input argument or computed.
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to an array of path commands.
+ */
+export declare function interpolatePathCommands(
+  aCommandsInput: PathCommand[] | null | undefined,
+  bCommandsInput: PathCommand[] | null | undefined,
+  interpolateOptions?: ExcludeSegmentFn | InterpolateOptions,
+): (t: number) => PathCommand[];
+/**
+ * Interpolate from A to B by extending A and B during interpolation to have
+ * the same number of points. This allows for a smooth transition when they
+ * have a different number of points.
+ *
+ * Ignores the `Z` character in paths unless both A and B end with it.
+ *
+ * @param {String} a The `d` attribute for a path
+ * @param {String} b The `d` attribute for a path
+ * @param {((command1, command2) => boolean|{
+ *   excludeSegment?: (command1, command2) => boolean;
+ *   snapEndsToInput?: boolean
+ * })} interpolateOptions The excludeSegment function or an options object
+ *    - interpolateOptions.excludeSegment a function that takes a start command object and
+ *      end command object and returns true if the segment should be excluded from splitting.
+ *    - interpolateOptions.snapEndsToInput a boolean indicating whether end of input should
+ *      be sourced from input argument or computed.
+ * @returns {Function} Interpolation function that maps t ([0, 1]) to a path `d` string.
+ */
+export declare function interpolatePath(
+  a: string | null | undefined,
+  b: string | null | undefined,
+  interpolateOptions?: ExcludeSegmentFn | InterpolateOptions,
+): (t: number) => string;
+export {};
+//# sourceMappingURL=interpolate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interpolate.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/interpolate.ts"],"names":[],"mappings":"AAIA,KAAK,WAAW,GACZ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,CAAC;AAER,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAoIF;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,YAAY,EAAE,WAAW,EACzB,UAAU,EAAE,WAAW,EACvB,YAAY,CAAC,EAAE,MAAM,GACpB,WAAW,EAAE,CAWf;AAkJD,KAAK,gBAAgB,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC;AAmHxF;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,EAAE,CA+BlF;AAED,KAAK,kBAAkB,GAAG;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,EAChD,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,EAChD,kBAAkB,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GACzD,CAAC,CAAC,EAAE,MAAM,KAAK,WAAW,EAAE,CAoG9B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC5B,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC5B,kBAAkB,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GACzD,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAgDvB"}

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

@@ -0,0 +1,156 @@
+import type { Transition } from 'framer-motion';
+import type { CartesianChartLayout } from './context';
+import { type ChartScaleFunction } from './scale';
+/**
+ * Default enter transition for path-based components (Line, Area).
+ * `{ type: 'tween', duration: 0.5 }`
+ */
+export declare const defaultPathEnterTransition: Transition;
+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'.
+ * @param layout - The chart layout. Defaults to 'vertical'.
+ * @returns The d3 curve function.
+ */
+export declare const getPathCurveFunction: (
+  curve?: ChartPathCurveType,
+  layout?: CartesianChartLayout,
+) => 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: 'bump' });
+ * ```
+ */
+export declare const getLinePath: ({
+  data,
+  curve,
+  xScale,
+  yScale,
+  xData,
+  yData,
+  connectNulls,
+  layout,
+}: {
+  data: (
+    | number
+    | null
+    | {
+        x: number;
+        y: number;
+      }
+  )[];
+  curve?: ChartPathCurveType;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  xData?: number[];
+  yData?: number[];
+  /**
+   * When true, null values are skipped and the line connects across gaps.
+   * By default, null values create gaps in the line.
+   */
+  connectNulls?: boolean;
+  /**
+   * Chart layout.
+   * @default 'horizontal'
+   */
+  layout?: CartesianChartLayout;
+}) => 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,
+  yData,
+  connectNulls,
+  layout,
+}: {
+  data: (number | null)[] | Array<[number, number] | null>;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  curve: ChartPathCurveType;
+  xData?: number[];
+  yData?: number[];
+  /**
+   * When true, null values are skipped and the area connects across gaps.
+   * By default null values create gaps in the area.
+   */
+  connectNulls?: boolean;
+  /**
+   * Chart layout.
+   * @default 'horizontal'
+   */
+  layout?: CartesianChartLayout;
+}) => 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,
+  layout?: CartesianChartLayout,
+) => string;
+//# sourceMappingURL=path.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/path.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAEtD,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE;;;GAGG;AACH,eAAO,MAAM,0BAA0B,EAAE,UAGxC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,MAAM,GACN,YAAY,GACZ,WAAW,CAAC;AAEhB;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAC/B,QAAO,kBAA6B,EACpC,SAAQ,oBAAiC,oCA2B1C,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,sEASzB;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,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B,KAAG,MAoBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,sEASzB;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,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B,KAAG,MA+FH,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,EACpB,SAAQ,oBAAiC,KACxC,MA0BF,CAAC"}

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

@@ -0,0 +1,115 @@
+import type { TextHorizontalAlignment, TextVerticalAlignment } from '../text';
+import type { CartesianChartLayout } from './context';
+import { type ChartScaleFunction, type PointAnchor } 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.
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
+ */
+export declare const getPointOnScale: (
+  dataValue: number,
+  scale: ChartScaleFunction,
+  anchor?: PointAnchor,
+) => 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,
+  layout,
+}: {
+  data: (
+    | number
+    | null
+    | {
+        x: number;
+        y: number;
+      }
+  )[];
+  xData?: number[];
+  yData?: number[];
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  /**
+   * Chart layout.
+   * @default 'vertical'
+   */
+  layout?: CartesianChartLayout;
+}) => 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAEL,KAAK,kBAAkB,EAGvB,KAAK,WAAW,EACjB,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,MAAM,EACjB,OAAO,kBAAkB,EACzB,SAAQ,WAAsB,KAC7B,MAgCF,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,iDAO3B;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,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,oBAAoB,CAAC;CAC/B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA4CxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}

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

@@ -0,0 +1,54 @@
+import type { ScaleBand, ScaleLinear, ScaleLogarithmic } from 'd3-scale';
+import type { AxisBounds } from './chart';
+export type ChartAxisScaleType = 'linear' | 'log' | 'band';
+export type NumericScale =
+  | ScaleLinear<number, number, never>
+  | ScaleLogarithmic<number, number, never>;
+export type CategoricalScale = ScaleBand<number>;
+export type ChartScaleFunction = NumericScale | CategoricalScale;
+export declare const isCategoricalScale: (scale: ChartScaleFunction) => scale is CategoricalScale;
+export declare const isNumericScale: (scale: ChartScaleFunction) => scale is NumericScale;
+/**
+ * Type guard to check if a scale is logarithmic.
+ */
+export declare const isLogScale: (
+  scale: ChartScaleFunction,
+) => scale is ScaleLogarithmic<number, number, never>;
+/**
+ * Create a numeric scale (linear or logarithmic)
+ * @returns A numeric scale function
+ */
+export declare const getNumericScale: ({
+  scaleType,
+  domain,
+  range,
+}: {
+  scaleType: 'linear' | 'log';
+  domain: AxisBounds;
+  range: AxisBounds;
+}) => NumericScale;
+/**
+ * Create a categorical scale (band)
+ * @returns A categorical scale function
+ */
+export declare const getCategoricalScale: ({
+  domain,
+  range,
+  padding,
+}: {
+  domain: AxisBounds;
+  range: AxisBounds;
+  padding?: number;
+}) => CategoricalScale;
+/**
+ * Anchor position for points on a scale. Currently used only for band scales.
+ *
+ * For band scales, this determines where within the band to position a point:
+ * - `'stepStart'` - At the start of the step
+ * - `'bandStart'` - At the start of the band
+ * - `'middle'` - At the center of the band
+ * - `'bandEnd'` - At the end of the band
+ * - `'stepEnd'` - At the end of the step
+ */
+export type PointAnchor = 'stepStart' | 'bandStart' | 'middle' | 'bandEnd' | 'stepEnd';
+//# sourceMappingURL=scale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/scale.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAGzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAG1C,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3D,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,GAClC,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,eAAO,MAAM,kBAAkB,GAAI,OAAO,kBAAkB,KAAG,KAAK,IAAI,gBAEvE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,kBAAkB,KAAG,KAAK,IAAI,YAEnE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GACrB,OAAO,kBAAkB,KACxB,KAAK,IAAI,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,CAEjD,CAAC;AAEF;;;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,YAGH,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,6BAIjC;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,gBAQH,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAC"}

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

@@ -0,0 +1,40 @@
+import type { Rect } from '@coinbase/cds-common/types';
+export type ScrubberLabelPosition = 'left' | 'right';
+export type LabelPosition = {
+  seriesId: string;
+  x: number;
+  y: number;
+};
+export type LabelDimensions = {
+  width: number;
+  height: number;
+};
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Honors the preferred side when there's enough space, otherwise switches to the opposite side.
+ */
+export declare const getLabelPosition: (
+  beaconX: number,
+  maxLabelWidth: number,
+  drawingArea: Rect,
+  xOffset?: number,
+  preferredSide?: ScrubberLabelPosition,
+) => ScrubberLabelPosition;
+type LabelDimension = {
+  seriesId: string;
+  width: number;
+  height: number;
+  preferredX: number;
+  preferredY: number;
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export declare const calculateLabelYPositions: (
+  dimensions: LabelDimension[],
+  drawingArea: Rect,
+  labelHeight: number,
+  minGap: number,
+) => Map<string, number>;
+export {};
+//# sourceMappingURL=scrubber.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scrubber.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/scrubber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,MAAM,EACf,eAAe,MAAM,EACrB,aAAa,IAAI,EACjB,UAAS,MAAW,EACpB,gBAAe,qBAA+B,KAC7C,qBAcF,CAAC;AAQF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,cAAc,EAAE,EAC5B,aAAa,IAAI,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,KACb,GAAG,CAAC,MAAM,EAAE,MAAM,CAoIpB,CAAC"}

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

@@ -0,0 +1,101 @@
+import { type MotionValue, type Transition } from 'framer-motion';
+/**
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4 }`
+ */
+export declare const defaultTransition: Transition;
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export declare const instantTransition: Transition;
+/**
+ * Duration in seconds for accessory elements to fade in.
+ */
+export declare const accessoryFadeTransitionDuration = 0.15;
+/**
+ * Delay in seconds before accessory elements fade in.
+ */
+export declare const accessoryFadeTransitionDelay = 0.35;
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'tween', duration: 0.15, delay: 0.35 }`
+ */
+export declare const defaultAccessoryEnterTransition: Transition;
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export declare const getTransition: (
+  value: Transition | null | undefined,
+  animate: boolean,
+  defaultValue: Transition,
+) => Transition | null;
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transitions - Transition configuration for enter and update animations
+ * @returns MotionValue containing the current interpolated path string
+ *
+ * @example
+ * // Simple path transition
+ * const animatedPath = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transitions: {
+ *     update: { type: 'spring', stiffness: 300, damping: 20 },
+ *   },
+ * });
+ *
+ * @example
+ * // Enter animation with different initial config (like DefaultBar)
+ * const animatedPath = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 0.5 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 },
+ *   },
+ * });
+ */
+export declare const usePathTransition: ({
+  currentPath,
+  initialPath,
+  transitions,
+  transition,
+}: {
+  /**
+   * Current target path to animate to.
+   */
+  currentPath: string;
+  /**
+   * Initial path for enter animation.
+   * When provided, the first animation will go from initialPath to currentPath.
+   * If not provided, defaults to currentPath (no enter animation).
+   */
+  initialPath?: string;
+  /**
+   * Transition configuration for enter and update animations.
+   */
+  transitions?: {
+    /**
+     * Transition for the initial enter animation (initialPath → currentPath).
+     * Only used when `initialPath` is provided.
+     * If not provided, falls back to `update`.
+     */
+    enter?: Transition | null;
+    /**
+     * Transition for subsequent data update animations.
+     * @default defaultTransition
+     */
+    update?: Transition | null;
+  };
+  /**
+   * Transition for updates.
+   * @deprecated Use `transitions.update` instead.
+   */
+  transition?: Transition;
+}) => MotionValue<string>;
+//# sourceMappingURL=transition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/transition.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,OAAO,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CA+CrB,CAAC"}

package/dts/visualizations/index.d.ts

@@ -1,3 +1,4 @@
+export * from './chart';
 export * from './DefaultProgressCircleContent';
 export * from './getProgressBarLabelParts';
 export * from './ProgressBar';
@@ -5,4 +6,5 @@ export * from './ProgressBarWithFixedLabels';
 export * from './ProgressBarWithFloatLabel';
 export * from './ProgressCircle';
 export * from './ProgressContainerWithButtons';
+export * from './sparkline';
 //# sourceMappingURL=index.d.ts.map

package/dts/visualizations/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visualizations/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visualizations/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kBAAkB,CAAC;AACjC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,aAAa,CAAC"}

package/dts/visualizations/sparkline/Counter.d.ts

@@ -0,0 +1,8 @@
+import type { CounterBaseProps } from '../Counter';
+export declare const Counter: ({
+  startNum,
+  endNum,
+  renderNum,
+  durationInMillis,
+}: CounterBaseProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=Counter.d.ts.map

package/dts/visualizations/sparkline/Counter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.d.ts","sourceRoot":"","sources":["../../../src/visualizations/sparkline/Counter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AA8BnD,eAAO,MAAM,OAAO,GAAI,mDAAmD,gBAAgB,4CAe1F,CAAC"}