import * as React from "react";
import type { ArrowOfTime, WindowMode, HoverAnnotationConfig, HoverData, AnnotationContext, DecayConfig, PulseConfig, StalenessConfig } 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 RealtimeHeatmapProps<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/x value accessor */
    timeAccessor?: ChartAccessor<TDatum, number>;
    /** Value/y accessor */
    valueAccessor?: ChartAccessor<TDatum, number>;
    /** Category accessor for colored cells */
    categoryAccessor?: ChartAccessor<TDatum, string>;
    /** Fixed time domain */
    timeExtent?: [number, number];
    /** Fixed value domain */
    valueExtent?: [number, number];
    /** Extent padding factor */
    extentPadding?: number;
    /** Number of x-axis bins (default: 20) */
    heatmapXBins?: number;
    /** Number of y-axis bins (default: 20) */
    heatmapYBins?: number;
    /** Aggregation mode: "count", "sum", or "mean" (default: "count") */
    aggregation?: "count" | "sum" | "mean";
    /** 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;
    /** Configurable opacity decay for older data */
    decay?: DecayConfig;
    /** Flash effect on newly inserted data */
    pulse?: PulseConfig;
    /** Frame-level data liveness indicator */
    staleness?: StalenessConfig;
    /** 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);
}
/**
 * RealtimeHeatmap - Streaming heatmap with 2D grid binning.
 *
 * Wraps StreamXYFrame with `chartType="heatmap"` and `runtimeMode="streaming"`,
 * providing configurable bin counts and aggregation modes.
 *
 * @example
 * ```tsx
 * // Count-aggregated heatmap — each push lands in a (time-bin × value-bin) cell
 * const ref = useRef<RealtimeFrameHandle>(null)
 * useEffect(() => {
 *   const id = setInterval(() => ref.current?.push({ time: Date.now(), y: Math.random() * 10 }), 50)
 *   return () => clearInterval(id)
 * }, [])
 * return (
 *   <RealtimeHeatmap
 *     ref={ref}
 *     timeAccessor="time"
 *     valueAccessor="y"
 *     heatmapXBins={30}
 *     heatmapYBins={20}
 *     aggregation="count"
 *   />
 * )
 * ```
 *
 * @example
 * ```tsx
 * // Mean aggregation with a sequential color scheme; useful for sensor density maps
 * <RealtimeHeatmap
 *   ref={ref}
 *   timeAccessor="time"
 *   valueAccessor="y"
 *   aggregation="mean"
 *   colorScheme="viridis"
 *   windowSize={500}
 * />
 * ```
 */
export declare const RealtimeHeatmap: {
    <TDatum extends Datum = Datum>(props: RealtimeHeatmapProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
