@coinbase/cds-web-visualization 3.3.0 → 3.4.0-beta.1

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

@@ -0,0 +1,97 @@
+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 = {
+  /**
+   * The id of the series.
+   */
+  id: string;
+  /**
+   * The 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>;
+  /**
+   * The label of the series. Can be a React node or a function that receives the data index and returns a React node.
+   */
+  label?: string | ((dataIndex: number) => string);
+  /**
+   * The color of the series.
+   */
+  color?: string;
+  /**
+   * The ID of the y-axis this series uses.
+   * Defaults to defaultAxisId if not specified.
+   */
+  yAxisId?: string;
+  /**
+   * 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>>;
+/**
+ * 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;
+//# 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":"AAEA,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;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;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;;;;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"}

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

@@ -0,0 +1,95 @@
+import type { Rect } from '@coinbase/cds-common/types';
+import type { AxisConfig } from './axis';
+import type { Series } from './chart';
+import type { ChartScaleFunction } 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;
+  /**
+   * 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;
+  /**
+   * Drawing area of the chart.
+   */
+  drawingArea: Rect;
+  /**
+   * 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?: number;
+  /**
+   * Callback fired when the scrubber position changes.
+   * Receives the dataIndex of the scrubber or undefined when not scrubbing.
+   */
+  onScrubberPositionChange: (index: number | undefined) => void;
+};
+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,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;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;;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,WAAW,EAAE,IAAI,CAAC;IAClB;;;;;;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,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAC/D,CAAC;AAEF,eAAO,MAAM,eAAe,2DAA6D,CAAC;AAE1F,eAAO,MAAM,kBAAkB,QAAO,oBAMrC,CAAC"}

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

@@ -0,0 +1,8 @@
+export * from './axis';
+export * from './bar';
+export * from './chart';
+export * from './context';
+export * from './path';
+export * from './point';
+export * from './scale';
+//# 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,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,107 @@
+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,
+}: {
+  data: (
+    | number
+    | null
+    | {
+        x: number;
+        y: number;
+      }
+  )[];
+  curve?: ChartPathCurveType;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  xData?: number[];
+}) => 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,
+}: {
+  data: (number | null)[] | Array<[number, number] | null>;
+  xScale: ChartScaleFunction;
+  yScale: ChartScaleFunction;
+  curve: ChartPathCurveType;
+  xData?: 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;
+//# 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,yCAMzB;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;CAClB,KAAG,MAgBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,yCAMzB;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;CAClB,KAAG,MAgFH,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"}

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

@@ -0,0 +1,75 @@
+import { type ChartScaleFunction } from './scale';
+/**
+ * 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;
+/**
+ * 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>;
+//# sourceMappingURL=point.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAkD,MAAM,SAAS,CAAC;AAElG;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,kBAAkB,KAAG,MAc9E,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,yCAM3B;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;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC"}

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

@@ -0,0 +1,43 @@
+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;
+//# sourceMappingURL=scale.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/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,gBAOH,CAAC"}

package/dts/index.d.ts

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

package/dts/index.d.ts.map

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

package/dts/sparkline/Counter.d.ts

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

package/dts/sparkline/Sparkline.d.ts

@@ -1,22 +1,67 @@
 import React from 'react';
 import type { ElementChildren, SharedProps } from '@coinbase/cds-common/types';
 import type { SparklineAreaBaseProps } from './SparklineArea';
+import type { SparklinePathRef } from './SparklinePath';
+export type SparklineStrokeType = 'gradient' | 'solid';
+export type SparklineFillType = 'dotted' | 'gradient' | 'gradientDotted';
 export type SparklineBaseProps = SharedProps & {
-    /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
-    background?: string;
-    /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables.  */
-    color: string;
-    /** Height of the Sparkline */
-    height: number;
-    /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
-    path?: string;
-    /** Width of the Sparkline */
-    width: number;
-    /** an optional SparklineArea that can be used to fill in the Sparkline */
-    children?: ElementChildren<SparklineAreaBaseProps>;
-    /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
-    yAxisScalingFactor?: number;
+  /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
+  background?: string;
+  /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables.  */
+  color: string;
+  /** Height of the Sparkline */
+  height: number;
+  /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
+  path?: string;
+  /** Width of the Sparkline */
+  width: number;
+  /** an optional SparklineArea that can be used to fill in the Sparkline */
+  children?: ElementChildren<SparklineAreaBaseProps>;
+  /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
+  yAxisScalingFactor?: number;
+  /**
+   * Type of stroke to use for the line
+   * @default 'solid'
+   */
+  strokeType?: SparklineStrokeType;
+  /**
+   * Type of fill to use for the area
+   * @default 'dotted'
+   */
+  fillType?: SparklineFillType;
 };
 export type SparklineProps = SparklineBaseProps;
-export declare const Sparkline: React.MemoExoticComponent<({ background, color, height, path, width, yAxisScalingFactor, children, }: SparklineBaseProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=Sparkline.d.ts.map
+/**
+ * @deprecated Use LineChart instead.
+ */
+export declare const Sparkline: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps & {
+      /** @danger Use this only if the background color beneath the Sparkline is a non-CDS color. It ensures an accessible contrast by returning either white or black when color is set to 'auto'. Accepts any valid color format (hex, RGB, RGBA). */
+      background?: string;
+      /** The color of the Sparkline graph's line. Accepts any raw color value (hex, rgba, hsl, etc) or 'auto'. Using 'auto' dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like 'fgPrimary' or CSS variables.  */
+      color: string;
+      /** Height of the Sparkline */
+      height: number;
+      /** Svg path as string. CDS offers a `useSparklinePath` which is useful to generate this string. This is accessible via `import { useSparklinePath } from '@coinbase/cds-common/visualizations/useSparklinePath';`. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. */
+      path?: string;
+      /** Width of the Sparkline */
+      width: number;
+      /** an optional SparklineArea that can be used to fill in the Sparkline */
+      children?: ElementChildren<SparklineAreaBaseProps>;
+      /** Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. */
+      yAxisScalingFactor?: number;
+      /**
+       * Type of stroke to use for the line
+       * @default 'solid'
+       */
+      strokeType?: SparklineStrokeType;
+      /**
+       * Type of fill to use for the area
+       * @default 'dotted'
+       */
+      fillType?: SparklineFillType;
+    } & React.RefAttributes<SparklinePathRef>
+  >
+>;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dts/sparkline/Sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuB,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAO/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD,eAAO,MAAM,SAAS,wGASjB,kBAAkB,6CA6BtB,CAAC"}
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,SAAS;IA/BpB,iPAAiP;iBACpO,MAAM;IACnB,oQAAoQ;WAC7P,MAAM;IACb,8BAA8B;YACtB,MAAM;IACd,kWAAkW;WAC3V,MAAM;IACb,6BAA6B;WACtB,MAAM;IACb,0EAA0E;eAC/D,eAAe,CAAC,sBAAsB,CAAC;IAClD,oOAAoO;yBAC/M,MAAM;IAC3B;;;OAGG;iBACU,mBAAmB;IAChC;;;OAGG;eACQ,iBAAiB;2CA4J7B,CAAC"}

package/dts/sparkline/SparklineArea.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
 export type SparklineAreaBaseProps = {
-    area?: string;
-    patternId?: string;
+  area?: string;
+  patternId?: string;
+  maskId?: string;
 };
-export declare const SparklineArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<SparklineAreaBaseProps & React.RefAttributes<SVGPathElement | null>>>;
-//# sourceMappingURL=SparklineArea.d.ts.map
+/**
+ * @deprecated Use AreaChart instead.
+ */
+export declare const SparklineArea: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SparklineAreaBaseProps & React.RefAttributes<SVGPathElement | null>
+  >
+>;
+//# sourceMappingURL=SparklineArea.d.ts.map

package/dts/sparkline/SparklineArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,aAAa,iIAMzB,CAAC"}
+{"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,iIAazB,CAAC"}

package/dts/sparkline/SparklineAreaPattern.d.ts

@@ -1,6 +1,14 @@
 export type SparklineAreaPatternBaseProps = {
-    color: string;
-    id: string;
+  color: string;
+  id: string;
+  /**
+   * Opacity for the pattern. If not provided, uses theme-based opacity from useSparklineAreaOpacity.
+   */
+  opacity?: number;
 };
-export declare const SparklineAreaPattern: ({ color, id }: SparklineAreaPatternBaseProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SparklineAreaPattern.d.ts.map
+export declare const SparklineAreaPattern: ({
+  color,
+  id,
+  opacity,
+}: SparklineAreaPatternBaseProps) => import('react/jsx-runtime').JSX.Element;
+//# sourceMappingURL=SparklineAreaPattern.d.ts.map

package/dts/sparkline/SparklineAreaPattern.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,eAAe,6BAA6B,4CAWhF,CAAC"}
+{"version":3,"file":"SparklineAreaPattern.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineAreaPattern.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,wBAAwB,6BAA6B,4CAazF,CAAC"}

package/dts/sparkline/SparklineGradient.d.ts

@@ -1,12 +1,23 @@
 import React from 'react';
 import type { SparklinePathRef } from './SparklinePath';
-export declare const SparklineGradient: React.MemoExoticComponent<React.ForwardRefExoticComponent<import("@coinbase/cds-common").SharedProps & {
-    background?: string;
-    color: string;
-    height: number;
-    path?: string;
-    width: number;
-    children?: import("@coinbase/cds-common").ElementChildren<import("./SparklineArea").SparklineAreaBaseProps>;
-    yAxisScalingFactor?: number;
-} & React.RefAttributes<SparklinePathRef>>>;
-//# sourceMappingURL=SparklineGradient.d.ts.map
+/**
+ * @deprecated Use LineChart instead.
+ */
+export declare const SparklineGradient: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    import('@coinbase/cds-common').SharedProps & {
+      background?: string;
+      color: string;
+      height: number;
+      path?: string;
+      width: number;
+      children?: import('@coinbase/cds-common').ElementChildren<
+        import('./SparklineArea').SparklineAreaBaseProps
+      >;
+      yAxisScalingFactor?: number;
+      strokeType?: import('./Sparkline').SparklineStrokeType;
+      fillType?: import('./Sparkline').SparklineFillType;
+    } & React.RefAttributes<SparklinePathRef>
+  >
+>;
+//# sourceMappingURL=SparklineGradient.d.ts.map