import * as React from "react";
import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext, DecayConfig, PulseConfig, StalenessConfig, TransitionConfig } 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 RealtimeLineChartProps<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 */
    valueAccessor?: ChartAccessor<TDatum, number>;
    /** Fixed time domain */
    timeExtent?: [number, number];
    /** Fixed value domain */
    valueExtent?: [number, number];
    /** Extent padding factor */
    extentPadding?: number;
    /** Line color */
    stroke?: string;
    /** Line width */
    strokeWidth?: number;
    /** Dash pattern (e.g. "4,2") */
    strokeDasharray?: string;
    /** Uniform line opacity (0–1). Pairs with `stroke` / `strokeWidth` for the designer-facing primitive vocabulary. */
    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;
    /** Configurable opacity decay for older data */
    decay?: DecayConfig;
    /** Flash effect on newly inserted data */
    pulse?: PulseConfig;
    /** Frame-level data liveness indicator */
    staleness?: StalenessConfig;
    /** Smooth position interpolation on data change */
    transition?: TransitionConfig;
    /** 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);
}
/**
 * RealtimeLineChart - Simplified wrapper for streaming line charts.
 *
 * Wraps StreamXYFrame with `chartType="line"` and `runtimeMode="streaming"`,
 * exposing stroke/strokeWidth as top-level props instead of requiring a `lineStyle` object.
 *
 * @example
 * ```tsx
 * // Single streaming series — push each datum, the chart slides
 * const ref = useRef<RealtimeFrameHandle>(null)
 * useEffect(() => {
 *   const id = setInterval(() => ref.current?.push({ time: Date.now(), value: Math.random() }), 100)
 *   return () => clearInterval(id)
 * }, [])
 * return (
 *   <RealtimeLineChart
 *     ref={ref}
 *     stroke="#007bff"
 *     strokeWidth={2}
 *     windowSize={200}
 *     enableHover
 *   />
 * )
 * ```
 *
 * @example
 * ```tsx
 * // Decay + pulse — older points fade, newly-pushed points flash
 * <RealtimeLineChart
 *   ref={ref}
 *   timeAccessor="t"
 *   valueAccessor="v"
 *   stroke="#0b5fff"
 *   strokeWidth={2}
 *   decay={{ type: "linear" }}
 *   pulse={{ type: "fade", durationMs: 400 }}
 *   windowSize={500}
 * />
 * ```
 */
export declare const RealtimeLineChart: {
    <TDatum extends Datum = Datum>(props: RealtimeLineChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
