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 RealtimeSwarmChartProps<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;
    /** Category accessor for color-coding dots */
    categoryAccessor?: ChartAccessor<TDatum, string>;
    /** Category-to-color map */
    colors?: Record<string, string>;
    /** Dot radius */
    radius?: number;
    /** Dot fill color (when no categoryAccessor) */
    fill?: string;
    /** Dot opacity */
    opacity?: number;
    /** Dot stroke color */
    stroke?: string;
    /** Dot stroke width */
    strokeWidth?: 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 (including threshold coloring) */
    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);
}
/**
 * RealtimeSwarmChart - Simplified wrapper for streaming dot/swarm charts.
 *
 * Wraps StreamXYFrame with `chartType="swarm"` and `runtimeMode="streaming"`,
 * exposing dot styling as top-level props. Each data point renders as an individual
 * dot at its (time, value) coordinates.
 *
 * Supports threshold coloring via annotations to recolor dots that cross
 * value boundaries.
 *
 * @example
 * ```tsx
 * // Per-sensor swarm — each push is a discrete dot, color by category
 * <RealtimeSwarmChart
 *   ref={ref}
 *   radius={4}
 *   opacity={0.8}
 *   categoryAccessor="sensor"
 *   colors={{ sensor1: "#007bff", sensor2: "#28a745" }}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Threshold-coloured outliers via a y-threshold annotation
 * <RealtimeSwarmChart
 *   ref={ref}
 *   radius={3}
 *   annotations={[{ type: "y-threshold", value: 0.9, color: "#dc3545", label: "alert" }]}
 *   windowSize={300}
 * />
 * ```
 */
export declare const RealtimeSwarmChart: {
    <TDatum extends Datum = Datum>(props: RealtimeSwarmChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
