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

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

@@ -0,0 +1,223 @@
+import type { Rect } from '@coinbase/cds-common/types';
+import type { Transition } from 'framer-motion';
+import type { BarComponent } from '../bar/Bar';
+import type { BarSeries } from '../bar/BarStack';
+import type { CartesianChartLayout } from './context';
+import type { GradientDefinition, GradientStop } from './gradient';
+import type { ChartScaleFunction } from './scale';
+/**
+ * A bar-specific transition that extends Transition with stagger support.
+ * When `staggerDelay` is provided, bars will animate with increasing delays
+ * based on their position along the category axis (vertical: left-to-right,
+ * horizontal: top-to-bottom).
+ *
+ * @example
+ * // Bars stagger in from left to right over 0.25s, each animating for 0.75s
+ * { type: 'tween', duration: 0.75, staggerDelay: 0.25 }
+ */
+export type BarTransition = Transition & {
+  /**
+   * Maximum stagger delay (seconds) distributed across bars by x position.
+   * Leftmost bar starts immediately, rightmost starts after this delay.
+   */
+  staggerDelay?: number;
+};
+/**
+ * Computes a bar's normalized [0, 1] position along the category axis, used for
+ * stagger-delay calculations.
+ *
+ * Vertical charts stagger left-to-right (x axis); horizontal charts stagger
+ * top-to-bottom (y axis). Returns 0 when the drawing area has no extent.
+ *
+ * @param layout - The layout of the chart
+ * @param x - Bar's left edge in pixels
+ * @param y - Bar's top edge in pixels
+ */
+export declare const getNormalizedStagger: (
+  layout: CartesianChartLayout,
+  x: number,
+  y: number,
+  drawingArea: Rect,
+) => number;
+/**
+ * Strips `staggerDelay` from a transition and computes a positional delay.
+ *
+ * @param transition - The transition config (may include staggerDelay)
+ * @param normalizedPosition - The bar's normalized position along the category axis (0–1)
+ * @returns A standard Transition with computed delay
+ */
+export declare const withStaggerDelayTransition: (
+  transition: BarTransition | null,
+  normalizedPosition: number,
+) => Transition | null;
+/**
+ * Default bar enter transition. Uses the default spring with a stagger delay
+ * so bars spring into place from left to right.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4, staggerDelay: 0.25 }`
+ */
+export declare const defaultBarEnterTransition: BarTransition;
+/**
+ * Default bar enter opacity transition.
+ * `{ type: 'tween', duration: 0.2 }`
+ */
+export declare const defaultBarEnterOpacityTransition: BarTransition;
+/**
+ * Calculates the size adjustment needed for bars when accounting for gaps between them.
+ * This function helps determine how much to reduce each bar's width to accommodate
+ * the specified gap size between multiple bars in a group.
+ *
+ * @param barCount - The number of bars in the group
+ * @param gapSize - The desired gap size between bars
+ * @returns The amount to reduce each bar's size by, or 0 if there's only one bar
+ *
+ * @example
+ * ```typescript
+ * // For 3 bars with 12px gaps, each bar should be reduced by 8px
+ * const adjustment = getBarSizeAdjustment(3, 12);
+ *
+ * // Single bar needs no adjustment
+ * const singleBarAdjustment = getBarSizeAdjustment(1, 10);
+ * ```
+ */
+export declare function getBarSizeAdjustment(barCount: number, gapSize: number): number;
+type StackGroup = {
+  stackId: string;
+  series: BarSeries[];
+  xAxisId?: string;
+  yAxisId?: string;
+};
+/**
+ * Groups bar series into stack groups scoped by stackId + axis IDs.
+ *
+ * Series with no `stackId` are treated as independent stacks keyed by series id.
+ * Axis IDs are included in the group key so series on different axes never stack together.
+ */
+export declare function getStackGroups(series: BarSeries[], defaultAxisId?: string): StackGroup[];
+/**
+ * Computes stack clip origin [start, end] that covers the bounding box
+ * of all bars at their stacked starting positions (as computed by `getBarOrigins`).
+ *
+ * This is passed to `DefaultBarStack` so the clip animation starts in sync with the
+ * individual bar animations — no bars leak outside the clip on frame 0.
+ *
+ * @param barOrigins - Per-bar initial origins from `getBarOrigins`
+ * @param barMinSizes - Per-bar minimum sizes in pixels (or a uniform value)
+ * @returns [originStart, originEnd] or undefined when barMinSize is 0 / no bars
+ */
+export declare function getStackOrigin(
+  barOrigins: number[],
+  barMinSizes: number[] | number,
+): [number, number] | undefined;
+/**
+ * Computes the initial clip rect used for stack enter animations.
+ */
+export declare function getStackInitialClipRect(
+  stackRect: Rect,
+  layout: CartesianChartLayout,
+  origin?: number | [number, number],
+): Rect;
+/**
+ * Threshold for treating a position as touching the baseline.
+ * Positions within this distance are considered at the baseline for rounding purposes.
+ */
+export declare const EPSILON = 0.0001;
+/**
+ * Computes and clamps the value-axis baseline position in pixels.
+ *
+ * When `baseline` (data space) is omitted, the baseline is chosen heuristically from the scale domain:
+ * - If the full domain is positive, use domain min.
+ * - If the full domain is negative, use domain max.
+ * - If the domain crosses zero, use `0`.
+ * When `baseline` is set, that value is used as the data-space baseline instead.
+ *
+ * @param valueScale - Scale for the value axis
+ * @param stackRect - Bounding rect of the stack in pixels
+ * @param layout - Chart layout
+ * @param baseline - Optional value-axis baseline in data space
+ */
+export declare function getBaselinePx(
+  valueScale: ChartScaleFunction,
+  stackRect: Rect,
+  layout: CartesianChartLayout,
+  baseline?: number,
+): number;
+type SeriesGradientEntry = {
+  seriesId: string;
+  gradient: GradientDefinition;
+  scale: ChartScaleFunction;
+  stops: GradientStop[];
+} | null;
+/**
+ * Computes the positioned bar entries and bounding rect for a single stack at one category index.
+ *
+ * This is the pure computation extracted from `BarStack`'s `useMemo` so it can be tested
+ * independently and reused across contexts.
+ *
+ * @param params.series - Series configs for this stack
+ * @param params.seriesData - Stacked data for each series, keyed by series id
+ * @param params.categoryIndex - Index of the category being rendered
+ * @param params.indexPos - Pixel position along the categorical axis
+ * @param params.thickness - Bar thickness in pixels
+ * @param params.valueScale - Scale function for the value axis
+ * @param params.seriesGradients - Precomputed gradient configs per series (null entries are skipped)
+ * @param params.roundBaseline - Whether to round the face touching the baseline
+ * @param params.layout - The layout of the chart
+ * @param params.baseline - Value-axis baseline in data space
+ * @param params.baselinePx - Pixel position of the value-axis baseline on the value axis
+ * @param params.stackGap - Gap between adjacent bars in pixels
+ * @param params.barMinSize - Minimum individual bar size in pixels
+ * @param params.stackMinSize - Minimum total stack size in pixels
+ * @param params.defaultFill - Fallback fill color when a series has no color or gradient
+ * @returns Positioned bar entries and the stack's bounding rect
+ */
+export declare function getBars(params: {
+  series: BarSeries[];
+  seriesData: Record<string, ([number, number] | null)[]>;
+  categoryIndex: number;
+  categoryValue: number;
+  indexPos: number;
+  thickness: number;
+  valueScale: ChartScaleFunction;
+  seriesGradients: SeriesGradientEntry[];
+  roundBaseline?: boolean;
+  layout: CartesianChartLayout;
+  baseline?: number;
+  baselinePx: number;
+  stackGap?: number;
+  barMinSize?: number;
+  stackMinSize?: number;
+  defaultFill: string;
+  borderRadius?: number;
+  defaultFillOpacity?: number;
+  defaultStroke?: string;
+  defaultStrokeWidth?: number;
+  defaultBarComponent?: BarComponent;
+}): {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  dataX: number | [number, number];
+  dataY: number | [number, number];
+  origin: number;
+  borderRadius: number | undefined;
+  fillOpacity: number | undefined;
+  stroke: string | undefined;
+  strokeWidth: number | undefined;
+  minSize: number;
+  BarComponent: BarComponent | undefined;
+  roundTop?: boolean;
+  roundBottom?: boolean;
+  seriesId: string;
+  fill?: string;
+  /** Position along the value axis in pixels (axis-agnostic, used by layout helpers). */
+  valuePos: number;
+  /** Size along the value axis in pixels (axis-agnostic, used by layout helpers). */
+  length: number;
+  /** The raw data value as [baseline, value], used by layout helpers for gap/rounding logic. */
+  dataValue: [number, number];
+  /** Whether gap distribution should be applied to this bar in a stack. */
+  shouldApplyGap?: boolean;
+}[];
+export {};
+//# sourceMappingURL=bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/bar.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,158 @@
+import { type CartesianAxisConfigProps } from './axis';
+import type { CartesianChartLayout } from './context';
+import type { GradientDefinition } from './gradient';
+export declare const defaultStackId = 'DEFAULT_STACK_ID';
+/**
+ * Shape variants available for legend items.
+ */
+export type LegendShapeVariant = 'circle' | 'square' | 'squircle' | 'pill';
+/**
+ * Shape for legend items. Can be a preset variant or a custom ReactNode.
+ */
+export type LegendShape = LegendShapeVariant | React.ReactNode;
+/**
+ * Position of the legend relative to the chart.
+ */
+export type LegendPosition = 'top' | 'bottom' | 'left' | 'right';
+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 of 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 x-axis this series uses.
+   * Defaults to defaultAxisId if not specified.
+   * @note Only used for axis selection when layout is 'horizontal'. Vertical layout uses a single x-axis.
+   */
+  xAxisId?: string;
+  /**
+   * Id of the y-axis this series uses.
+   * Defaults to defaultAxisId if not specified.
+   * @note Only used for axis selection when layout is 'vertical'. Horizontal layout supports a single y-axis.
+   */
+  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;
+  /**
+   * Shape of the legend item for this series.
+   * Can be a preset shape variant or a custom ReactNode.
+   * @default 'circle'
+   */
+  legendShape?: LegendShape;
+};
+/**
+ * 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
+ * @param layout - When set with axis configs, value-axis baselines are resolved for stacking
+ * @returns Map of series ID to stacked data arrays
+ */
+export declare const getStackedSeriesData: (
+  series: Series[],
+  layout: CartesianChartLayout,
+  xAxisConfigs: CartesianAxisConfigProps[],
+  yAxisConfigs: CartesianAxisConfigProps[],
+) => 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[],
+  layout: CartesianChartLayout,
+  xAxisConfigs: CartesianAxisConfigProps[],
+  yAxisConfigs: CartesianAxisConfigProps[],
+  min?: number,
+  max?: number,
+) => Partial<AxisBounds>;
+export type ChartInset = {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+};
+export declare const defaultVerticalLayoutChartInset: ChartInset;
+export declare const defaultHorizontalLayoutChartInset: ChartInset;
+/**
+ * @deprecated Use `defaultVerticalLayoutChartInset` for vertical layout charts or. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
+ * `defaultHorizontalLayoutChartInset` for horizontal layout charts.
+ */
+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/visualizations/chart/utils/chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/chart.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,117 @@
+import type { Rect } from '@coinbase/cds-common/types';
+import type { CartesianAxisConfig } from './axis';
+import type { Series } from './chart';
+import type { ChartScaleFunction } from './scale';
+/**
+ * Chart layout for Cartesian charts.
+ * Describes the direction bars/areas grow.
+ * - 'vertical': Bars grow vertically (up/down). X is category axis, Y is value axis.
+ * - 'horizontal': Bars grow horizontally (left/right). Y is category axis, X is value axis.
+ */
+export type CartesianChartLayout = 'horizontal' | 'vertical';
+/**
+ * Context value for Cartesian (X/Y) coordinate charts.
+ * Contains axis-specific methods and properties for rectangular coordinate systems.
+ */
+export type CartesianChartContextValue = {
+  /**
+   * Chart layout - describes the direction bars/areas grow.
+   * @default 'vertical'
+   * - 'vertical': Bars grow vertically (up/down). X is category axis, Y is value axis.
+   * - 'horizontal': Bars grow horizontally (left/right). Y is category axis, X is value axis.
+   */
+  layout: CartesianChartLayout;
+  /**
+   * 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 by ID.
+   * @param id - The axis ID. Defaults to defaultAxisId.
+   */
+  getXAxis: (id?: string) => CartesianAxisConfig | undefined;
+  /**
+   * Get y-axis configuration by ID.
+   * @param id - The axis ID. Defaults to defaultAxisId.
+   */
+  getYAxis: (id?: string) => CartesianAxisConfig | undefined;
+  /**
+   * Get x-axis scale function by ID.
+   * @param id - The axis ID. Defaults to defaultAxisId.
+   */
+  getXScale: (id?: string) => 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;
+  /**
+   * 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?: 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/visualizations/chart/utils/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7D;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG;IACvC;;;;;OAKG;IACH,MAAM,EAAE,oBAAoB,CAAC;IAC7B;;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,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,mBAAmB,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,mBAAmB,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;;OAGG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;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,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/visualizations/chart/utils/gradient.d.ts

@@ -0,0 +1,116 @@
+import type { AxisBounds } from './chart';
+import type { CartesianChartLayout } from './context';
+import { type ChartScaleFunction } 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 CSS 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' for vertical layout, 'x' for horizontal layout
+   */
+  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 the axis used for gradient processing.
+ */
+export declare const getGradientAxis: (
+  gradient: Pick<GradientDefinition, 'axis'>,
+  layout: CartesianChartLayout,
+) => 'x' | 'y';
+/**
+ * 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: ChartScaleFunction,
+) => string | undefined;
+/**
+ * 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
+ * @param xScale - X-axis scale
+ * @param yScale - Y-axis scale
+ * @param layout - Chart layout
+ * @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,
+  layout?: CartesianChartLayout,
+) => GradientStop[] | 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
+ * @param axis - The axis the gradient maps to ('y' for vertical, 'x' for horizontal layout)
+ * @returns A gradient definition with stops in ascending order
+ */
+export declare const createGradient: (
+  axisBounds: AxisBounds,
+  baselineValue: number,
+  fill: string,
+  peakOpacity: number,
+  baselineOpacity: number,
+  axis?: 'x' | 'y',
+) => GradientDefinition;
+//# sourceMappingURL=gradient.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/utils/gradient.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,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;;GAEG;AACH,eAAO,MAAM,eAAe,GAC1B,UAAU,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAC1C,QAAQ,oBAAoB,KAC3B,GAAG,GAAG,GAER,CAAC;AA8DF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAClC,OAAO,YAAY,EAAE,EACrB,WAAW,MAAM,EACjB,OAAO,kBAAkB,KACxB,MAAM,GAAG,SAiEX,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,iBAAiB,GAC5B,UAAU,kBAAkB,EAC5B,QAAQ,kBAAkB,EAC1B,QAAQ,kBAAkB,EAC1B,SAAQ,oBAAiC,KACxC,YAAY,EAAE,GAAG,SAsBnB,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,YAAY,UAAU,EAAE,WAAU,MAAU,KAAG,MAc1E,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,GACzB,YAAY,UAAU,EACtB,eAAe,MAAM,EACrB,MAAM,MAAM,EACZ,aAAa,MAAM,EACnB,iBAAiB,MAAM,EACvB,OAAM,GAAG,GAAG,GAAS,KACpB,kBA0BF,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/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,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}