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 } from "../shared/hooks";
import type { BaseChartProps, AxisConfig, ChartAccessor } from "../shared/types";
import { type TooltipProp } from "../../Tooltip/Tooltip";
import type { AnomalyConfig, ForecastConfig } from "../shared/statisticalOverlays";
/**
 * LineChart component props
 */
export interface LineChartProps<TDatum extends Datum = Datum> extends BaseChartProps, AxisConfig {
    /**
     * Array of data points or array of line objects with coordinates.
     * @example
     * ```ts
     * // Simple format (single line)
     * [{x: 1, y: 10}, {x: 2, y: 20}]
     *
     * // Multiple lines with grouping
     * [{x: 1, y: 10, series: 'A'}, {x: 2, y: 20, series: 'A'}, {x: 1, y: 15, series: 'B'}]
     *
     * // Line objects format
     * [{label: 'Series A', coordinates: [{x: 1, y: 10}, {x: 2, y: 20}]}]
     * ```
     */
    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>;
    /**
     * Scale type for the x-axis
     * @default "linear"
     */
    xScaleType?: "linear" | "log" | "time";
    /**
     * Scale type for the y-axis
     * @default "linear"
     */
    yScaleType?: "linear" | "log";
    /**
     * Field name or function to group data into multiple lines
     * @example
     * ```ts
     * lineBy="series"  // Group by series field
     * lineBy={d => d.category}  // Use function
     * ```
     */
    lineBy?: ChartAccessor<TDatum, string>;
    /**
     * Field name in line objects that contains coordinate arrays
     * Used when data is in line objects format
     * @default "coordinates"
     */
    lineDataAccessor?: string;
    /**
     * Field name or function to determine line color
     * @example
     * ```ts
     * colorBy="series"
     * 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 "linear"
     */
    curve?: "linear" | "monotoneX" | "monotoneY" | "step" | "stepAfter" | "stepBefore" | "basis" | "cardinal" | "catmullRom";
    /**
     * Show points on the line
     * @default false
     */
    showPoints?: boolean;
    /**
     * Point radius when showPoints is true
     * @default 3
     */
    pointRadius?: number;
    /**
     * Fill area under the line. `true` fills all series, `string[]` lists series
     * names (matching lineBy/colorBy group key) that get area fill while others stay as lines.
     * @default false
     */
    fillArea?: boolean | string[];
    /**
     * Area opacity when fillArea is true
     * @default 0.3
     */
    areaOpacity?: number;
    /**
     * Horizontal gradient for the line stroke. Color stops define a left-to-right gradient.
     * `{ colorStops: [{ offset: 0, color: "blue" }, { offset: 1, color: "red" }] }`
     */
    lineGradient?: {
        colorStops: Array<{
            offset: number;
            color: string;
        }>;
    };
    /**
     * Line stroke width
     * @default 2
     */
    lineWidth?: number;
    /**
     * Enable hover annotations
     * @default true
     */
    enableHover?: boolean;
    /**
     * Show grid lines
     * @default false
     */
    showGrid?: boolean;
    /**
     * Show legend for multiple lines
     * @default true (when multiple lines)
     */
    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 relative to the chart area
     * @default "right"
     */
    legendPosition?: "right" | "left" | "top" | "bottom";
    /**
     * Tooltip configuration
     */
    tooltip?: TooltipProp;
    /** Accessor for unique point IDs, used by point-anchored annotations (when showPoints is true) */
    pointIdAccessor?: ChartAccessor<TDatum, string>;
    /**
     * Annotation objects to render on the chart
     */
    annotations?: Datum[];
    /**
     * Place category labels directly at line endpoints instead of using a separate legend.
     * When true, auto-hides the legend (override with `showLegend: true`).
     * Pass an object for fine-grained control.
     */
    directLabel?: boolean | {
        /** Where to place labels relative to the line. @default "end" */
        position?: "end" | "start";
        /** Font size for labels. @default 11 */
        fontSize?: number;
    };
    /**
     * How to handle null/undefined/NaN values in the data.
     * - "break": break the line at gaps (default)
     * - "interpolate": connect across gaps (skip missing points)
     * - "zero": drop to zero at gap boundaries
     */
    gapStrategy?: "break" | "interpolate" | "zero";
    /**
     * Anomaly detection configuration. Highlights outlier points and shows
     * a shaded band representing the expected range (mean +/- threshold * stddev).
     */
    anomaly?: AnomalyConfig;
    /**
     * Forecast configuration. Splits the line into training (dashed),
     * observed (solid), and forecast (dotted) segments. Shows a confidence
     * envelope around the extrapolated forecast region.
     */
    forecast?: ForecastConfig;
    /**
     * Asymmetric min/max band(s) drawn under the line. Differs from
     * `forecast`/`anomaly` (computed envelopes around a series) by being
     * pure data passthrough — provide `y0Accessor` / `y1Accessor` and the
     * band is drawn between them at each x.
     *
     * Pass an array for percentile fans (e.g. p25/p75 on top of p10/p90).
     * Each band participates in y-extent auto-derivation, so a tall band
     * can never get clipped. The hovered datum is enriched with
     * `band: { y0, y1 }` (first band) and `bands: [...]` (all bands) so
     * tooltip functions can read the envelope without re-running the
     * accessors.
     *
     * @example
     * ```tsx
     * <LineChart
     *   data={[{ time, average, min, max }, ...]}
     *   xAccessor="time"
     *   yAccessor="average"
     *   band={{ y0Accessor: "min", y1Accessor: "max" }}
     * />
     * ```
     */
    band?: BandConfig<TDatum> | Array<BandConfig<TDatum>>;
    /**
     * Fixed x domain `[min, max]`. Either bound may be `undefined` to leave
     * that side data-derived.
     */
    xExtent?: [number | undefined, number | undefined] | [number];
    /**
     * Fixed y domain `[min, max]`. Either bound may be `undefined` to leave
     * that side data-derived. Wins over the auto-computed envelope extent
     * when forecast bounds are present, so explicit user intent stays
     * authoritative.
     */
    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">>;
}
/**
 * LineChart - Visualize trends and time series data with lines
 *
 * A simplified wrapper around StreamXYFrame for creating line charts. Perfect for
 * showing trends, comparisons, and temporal patterns in your data.
 *
 * @example
 * ```tsx
 * // Simple line chart
 * <LineChart
 *   data={[
 *     {x: 1, y: 10},
 *     {x: 2, y: 20},
 *     {x: 3, y: 15}
 *   ]}
 *   xLabel="Time"
 *   yLabel="Value"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Multiple lines with grouping
 * <LineChart
 *   data={[
 *     {x: 1, y: 10, series: 'A'},
 *     {x: 2, y: 20, series: 'A'},
 *     {x: 1, y: 15, series: 'B'},
 *     {x: 2, y: 25, series: 'B'}
 *   ]}
 *   lineBy="series"
 *   colorBy="series"
 *   xLabel="Time"
 *   yLabel="Value"
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Area chart with custom curve
 * <LineChart
 *   data={data}
 *   curve="monotoneX"
 *   fillArea={true}
 *   areaOpacity={0.3}
 *   showPoints={true}
 * />
 * ```
 *
 * @example
 * ```tsx
 * // Advanced: Override StreamXYFrame props
 * <LineChart
 *   data={data}
 *   frameProps={{
 *     lineType: { type: "line", interpolator: d3.curveCardinal },
 *     customLineMark: ({ d }) => <path stroke="red" />
 *   }}
 * />
 * ```
 *
 * @remarks
 * This component wraps {@link StreamXYFrame} with sensible defaults for line charts.
 * For more advanced features like custom marks, annotations, or complex interactions,
 * use StreamXYFrame directly.
 *
 * **Breadcrumb to advanced usage:**
 * - Use the `frameProps` prop to pass any StreamXYFrame prop
 * - See StreamXYFrame documentation: https://semiotic.nteract.io/guides/xy-frame
 * - All StreamXYFrame props are available via `frameProps`
 *
 * @param props - LineChart configuration
 * @returns Rendered line chart
 */
export declare const LineChart: {
    <TDatum extends Datum = Datum>(props: LineChartProps<TDatum> & React.RefAttributes<RealtimeFrameHandle>): React.ReactElement | null;
    displayName?: string;
};
