import type { Rect } from '@coinbase/cds-common/types/Rect'; 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, SerializableScale } from './scale'; import { type Transition } from './transition'; /** * 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 250ms, each animating for 750ms * { type: 'timing', duration: 750, staggerDelay: 250 } */ export type BarTransition = Transition & { /** * Maximum stagger delay (ms) 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, staggerDelay: 250 }` */ export declare const defaultBarEnterTransition: BarTransition; /** * Default bar enter opacity transition. * `{ type: 'timing', duration: 200 }` */ 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: SerializableScale | ChartScaleFunction; stops: GradientStop[]; } | undefined; /** * 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 (undefined 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; 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