import type { Datum } from "../shared/datumTypes";
import * as React from "react";
import type { StreamXYFrameProps, BandConfig } from "../../stream/types";
import type { RealtimeFrameHandle } from "../../realtime/types";
import type { LegendInteractionMode, LegendPosition } from "../shared/hooks";
import type { BaseChartProps, AxisConfig, ChartAccessor } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
import type { ForecastConfig, AnomalyConfig } from "../shared/statisticalOverlays";
export interface SemanticGradientStop {
    /** Percent from baseline to line/top. 0 = baseline, 100 = line/top. */
    at: number;
    color: string;
    /** Optional opacity applied to this stop. */
    opacity?: number;
}
/**
 * AreaChart component props
 */
export interface AreaChartProps<TDatum extends Datum = Datum> extends BaseChartProps, AxisConfig {
    /**
     * Array of data points, grouped by category.
     * @example
     * ```ts
     * // Multiple areas with grouping
     * [{x: 1, y: 10, category: 'A'}, {x: 2, y: 20, category: 'A'}, {x: 1, y: 15, category: 'B'}]
     * ```
     */
    data?: TDatum[];
    /**
     * Field name or function to access x values
     * @default "x"
     */
    xAccessor?: ChartAccessor<TDatum, number | Date | string>;
    /**
     * Field name or function to access y values
     * @default "y"
     */
    yAccessor?: ChartAccessor<TDatum, number>;
    /**
     * Field name or function to group data into multiple areas
     * @example
     * ```ts
     * areaBy="category"  // Group by category field
     * areaBy={d => d.group}  // Use function
     * ```
     */
    areaBy?: ChartAccessor<TDatum, string>;
    /**
     * Field name in area objects that contains coordinate arrays
     * Used when data is in area objects format
     * @default "coordinates"
     */
    lineDataAccessor?: string;
    /**
     * Field name or function to determine area color
     * @example
     * ```ts
     * colorBy="category"
     * colorBy={d => d.label}
     * ```
     */
    colorBy?: ChartAccessor<TDatum, string>;
    /**
     * Color scheme for categorical data or custom colors array
     * @default "category10"
     */
    colorScheme?: string | string[];
    /**
     * Curve interpolation type
     * @default "monotoneX"
     */
    curve?: "linear" | "monotoneX" | "monotoneY" | "step" | "stepAfter" | "stepBefore" | "basis" | "cardinal" | "catmullRom";
    /**
     * Per-point lower bound accessor for band/ribbon charts.
     * When set, the area fills between yAccessor (top) and y0Accessor (bottom)
     * instead of filling down to the axis. Use for percentile bands (p5–p95),
     * confidence intervals, or any ribbon visualization.
     * @example
     * ```ts
     * // Data: [{ x: 0, p95: 80, p5: 20 }, ...]
     * <AreaChart data={d} xAccessor="x" yAccessor="p95" y0Accessor="p5" />
     * ```
     */
    y0Accessor?: ChartAccessor<TDatum, number>;
    /**
     * Gradient fill from line to baseline. Set `true` for default opacity (80% → 5%),
     * `{ topOpacity, bottomOpacity }` for custom opacity, or
     * `{ colorStops: [{offset, color}] }` for multi-color gradients.
     * @default false
     */
    gradientFill?: boolean | {
        topOpacity: number;
        bottomOpacity: number;
    } | {
        colorStops: Array<{
            offset: number;
            color: string;
        }>;
    };
    /**
     * Semantic area gradient stops expressed in user-facing percentages:
     * `at: 0` is the baseline and `at: 100` is the line/top of the area.
     * This is converted to `gradientFill.colorStops`, whose raw offsets use
     * the renderer coordinate convention (`0` = top, `1` = baseline).
     * When set, this takes precedence over `gradientFill`.
     */
    semanticGradient?: SemanticGradientStop[];
    /**
     * Area opacity (flat fill, ignored when gradientFill is set)
     * @default 0.7
     */
    areaOpacity?: number;
    /**
     * Horizontal gradient for the line stroke. Color stops define a left-to-right gradient.
     */
    lineGradient?: {
        colorStops: Array<{
            offset: number;
            color: string;
        }>;
    };
    /**
     * Show line on top of area
     * @default true
     */
    showLine?: boolean;
    /**
     * Line stroke width when showLine is true
     * @default 2
     */
    lineWidth?: number;
    /**
     * Show data points on the area line.
     * Useful for sparse data or single-point series.
     * @default false
     */
    showPoints?: boolean;
    /**
     * Point radius when showPoints is true
     * @default 3
     */
    pointRadius?: number;
    /**
     * Enable hover annotations
     * @default true
     */
    enableHover?: boolean;
    /**
     * Show grid lines
     * @default false
     */
    showGrid?: boolean;
    /**
     * Show legend for multiple areas
     * @default true (when multiple areas)
     */
    showLegend?: boolean;
    /**
     * Legend interaction mode.
     * - "highlight": hover dims non-hovered categories to 30% opacity
     * - "isolate": click toggles category visibility with checkmark indicators
     * - "none": static legend (default)
     */
    legendInteraction?: LegendInteractionMode;
    /**
     * Legend position
     */
    legendPosition?: LegendPosition;
    /**
     * Tooltip configuration. Pass "multi" to show every area value at the
     * hovered x position.
     */
    tooltip?: TooltipProp;
    /**
     * Annotation objects to render on the chart
     */
    annotations?: Datum[];
    /**
     * Forecast overlay — extends the area with a tagged training /
     * observed / forecast region and (optionally) a confidence
     * envelope. Same shape as LineChart's `forecast` prop. Pair with
     * `anomaly` for combined anomaly + forecast visualization.
     *
     * @example
     * ```tsx
     * <AreaChart data={obs} xAccessor="t" yAccessor="value"
     *            forecast={{ trainEnd: 80, steps: 10, color: "#6366f1" }} />
     * ```
     */
    forecast?: ForecastConfig;
    /**
     * Anomaly overlay — adds a ±σ band and per-point anomaly dots.
     * Standalone (without forecast) gives raw anomaly detection.
     *
     * @example
     * ```tsx
     * <AreaChart data={obs} anomaly={{ threshold: 2 }} />
     * ```
     */
    anomaly?: AnomalyConfig;
    /**
     * Asymmetric min/max band(s) drawn under the area fill. Distinct from
     * `y0Accessor` (which replaces the area's baseline) — `band` is a
     * decorative envelope painted beneath the area, driven by independent
     * `y0Accessor` / `y1Accessor` per band. Pass an array for fan charts.
     *
     * The hovered datum gets `band: { y0, y1 }` and `bands: [...]` for
     * tooltip access. See the LineChart docs for full ergonomics.
     */
    band?: BandConfig<TDatum> | Array<BandConfig<TDatum>>;
    /**
     * Fixed x domain `[min, max]`. Either bound may be `undefined` to leave
     * that side data-derived. Useful for pinning a time axis to a known
     * window (e.g. last 24 hours) so streamed updates don't shift the
     * left/right edges as data flows in.
     */
    xExtent?: [number | undefined, number | undefined] | [number];
    /**
     * Fixed y domain `[min, max]`. Either bound may be `undefined` to leave
     * that side data-derived. The fill baseline is the y-domain minimum, so
     * setting `yExtent={[0, 100]}` anchors both the axis AND the area's
     * baseline at 0 — the typical "percentage / counter" shape.
     */
    yExtent?: [number | undefined, number | undefined] | [number];
    /**
     * Additional StreamXYFrame props for advanced customization
     * For full control, consider using StreamXYFrame directly
     * @see https://semiotic.nteract.io/guides/xy-frame
     */
    frameProps?: Partial<Omit<StreamXYFrameProps, "chartType" | "data" | "size">>;
}
/**
 * AreaChart - Visualize quantities over continuous intervals with overlapping filled areas
 *
 * Each series fills from its line down to the baseline. Multiple series overlap
 * with transparency so all shapes remain visible.
 *
 * For stacked areas use {@link StackedAreaChart}.
 *
 * @example
 * ```tsx
 * // Multi-series areas with overlap transparency
 * <AreaChart
 *   data={[
 *     {x: 1, y: 10, category: 'A'},
 *     {x: 2, y: 20, category: 'A'},
 *     {x: 1, y: 15, category: 'B'},
 *     {x: 2, y: 25, category: 'B'}
 *   ]}
 *   areaBy="category"
 *   colorBy="category"
 *   xLabel="Time"
 *   yLabel="Value"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Single series with a vertical opacity gradient (tip → baseline fade)
 * <AreaChart
 *   data={data}
 *   xAccessor="t"
 *   yAccessor="value"
 *   color="steelblue"
 *   gradientFill={{ topOpacity: 0.8, bottomOpacity: 0.05 }}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Push mode — omit `data`, drive the chart through a ref. Use a
 * // stable string id so `remove(id)` / `update(id, ...)` work later.
 * const ref = useRef<RealtimeFrameHandle>(null)
 * useEffect(() => {
 *   const id = setInterval(() => {
 *     const t = Date.now()
 *     ref.current?.push({ id: String(t), x: t, y: Math.random() })
 *   }, 200)
 *   return () => clearInterval(id)
 * }, [])
 * return <AreaChart ref={ref} xAccessor="x" yAccessor="y" pointIdAccessor="id" />
 * ```
 */
export declare const AreaChart: {
    <TDatum extends Datum = Datum>(props: AreaChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
