import * as React from "react";
import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext } from "../../stream/types";
import type { RealtimeFrameHandle } from "../../realtime/types";
import type { ReactNode } from "react";
import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
import type { ChartMode, ChartAccessor, SelectionConfig } from "../shared/types";
import type { OnObservationCallback } from "../../store/ObservationStore";
import type { Datum } from "../shared/datumTypes";
import type { AutoPlaceAnnotations } from "../../recipes/annotationLayout";
export interface RealtimeWaterfallChartProps<TDatum extends Datum = Datum> {
    /** Display mode: "primary" (full chrome), "context" (compact), "sparkline" (inline) */
    mode?: ChartMode;
    /** Chart dimensions as [width, height] */
    size?: [number, number];
    /** Chart width (alternative to size) */
    width?: number;
    /** Chart height (alternative to size) */
    height?: number;
    /** Chart margins */
    margin?: {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
    /** CSS class name */
    className?: string;
    onObservation?: OnObservationCallback;
    chartId?: string;
    /** Direction time flows */
    arrowOfTime?: ArrowOfTime;
    /** Data retention strategy */
    windowMode?: WindowMode;
    /** Ring buffer capacity */
    windowSize?: number;
    /** Controlled data array */
    data?: Datum[];
    /** Time value accessor */
    timeAccessor?: ChartAccessor<TDatum, number>;
    /** Value accessor (positive = gain, negative = loss) */
    valueAccessor?: ChartAccessor<TDatum, number>;
    /** Fixed time domain */
    timeExtent?: [number, number];
    /** Fixed value domain */
    valueExtent?: [number, number];
    /** Extent padding factor */
    extentPadding?: number;
    /** Color for positive (gain) bars */
    positiveColor?: string;
    /** Color for negative (loss) bars */
    negativeColor?: string;
    /** Connector line stroke color (omit to hide connectors) */
    connectorStroke?: string;
    /** Connector line width */
    connectorWidth?: number;
    /** Gap between bars in pixels */
    gap?: number;
    /** Bar stroke color */
    stroke?: string;
    /** Bar stroke width */
    strokeWidth?: number;
    /** Uniform bar opacity (0–1). */
    opacity?: number;
    /** Show canvas-drawn axes */
    showAxes?: boolean;
    /** Background fill color */
    background?: string;
    /** Enable hover interaction */
    enableHover?: boolean | HoverAnnotationConfig;
    /** Custom tooltip renderer */
    tooltipContent?: (d: HoverData) => ReactNode;
    /** Callback on hover */
    onHover?: (d: HoverData | null) => void;
    /** Annotation objects */
    annotations?: Datum[];
    /** Opt into automatic placement for note-like annotations without manual offsets. */
    autoPlaceAnnotations?: AutoPlaceAnnotations;
    /** SVG annotation render function */
    svgAnnotationRules?: (annotation: Datum, index: number, context: AnnotationContext) => ReactNode;
    /** Custom formatter for time axis ticks */
    tickFormatTime?: (value: number) => string;
    /** Custom formatter for value axis ticks */
    tickFormatValue?: (value: number) => string;
    /** Custom tooltip renderer (alias for tooltipContent) */
    tooltip?: (d: HoverData) => ReactNode;
    /** Enable linked hover selection events for cross-chart highlighting */
    linkedHover?: boolean | string | {
        name?: string;
        fields: string[];
    };
    /** Consume a named selection — dims unselected elements */
    selection?: SelectionConfig;
    /** Show a loading skeleton placeholder */
    loading?: boolean;
    /** Custom content rendered in place of the default skeleton while `loading` is true. */
    loadingContent?: React.ReactNode | false;
    /** Custom content to render when data is empty. Set to `false` to disable empty state. */
    emptyContent?: ReactNode | false;
    /** Visual emphasis level for dashboard hierarchy. "primary" spans two columns in ChartGrid. */
    emphasis?: "primary" | "secondary";
    /** Show a legend */
    showLegend?: boolean;
    /** Legend position */
    legendPosition?: LegendPosition;
    /** Legend interaction mode */
    legendInteraction?: LegendInteractionMode;
    /** ID accessor for remove()/update() on the push API */
    pointIdAccessor?: string | ((d: Datum) => string);
}
/**
 * RealtimeWaterfallChart - Simplified wrapper for streaming waterfall charts.
 *
 * Wraps StreamXYFrame with `chartType="waterfall"` and `runtimeMode="streaming"`,
 * exposing waterfall styling as top-level props. Visualizes cumulative deltas as
 * connected bars rising and falling from a running baseline.
 *
 * @example
 * ```tsx
 * // Trade-flow waterfall — push each delta, the chart accumulates from baseline
 * <RealtimeWaterfallChart
 *   ref={ref}
 *   positiveColor="#28a745"
 *   negativeColor="#dc3545"
 *   connectorStroke="#999"
 *   windowSize={300}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Themed via CSS variables — same chart, brand colors via the theme provider
 * <ThemeProvider theme="bi-tool">
 *   <RealtimeWaterfallChart
 *     ref={ref}
 *     positiveColor="var(--semiotic-success)"
 *     negativeColor="var(--semiotic-danger)"
 *     stroke="var(--semiotic-border)"
 *   />
 * </ThemeProvider>
 * ```
 */
export declare const RealtimeWaterfallChart: {
    <TDatum extends Datum = Datum>(props: RealtimeWaterfallChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
