import type * as echarts from "echarts/core";
/** A single data series rendered on a `TimeseriesChart` */
export interface TimeseriesData {
    /** Display name shown in tooltips and legends */
    name: string;
    /** Array of `[timestamp_ms, value]` tuples ordered by time */
    data: [number, number][];
    /** Hex color string used for this series' line, bars, and legend dot */
    color: string;
}
/** Props for `TimeseriesChart` */
export interface TimeseriesChartProps {
    /**
     * The ECharts core instance imported by the consumer.
     * Passed in rather than imported directly so the consumer controls which
     * ECharts modules are bundled (tree-shaking).
     */
    echarts: typeof echarts;
    /** Visual style of each series. Defaults to `"line"`. */
    type?: "line" | "bar";
    /** Array of time series data to display on the chart */
    data: TimeseriesData[];
    /** Label for the x-axis (time axis) */
    xAxisName?: string;
    /** Number of ticks to display on the x-axis */
    xAxisTickCount?: number;
    /**
     * Custom formatter for y-axis tick labels.
     * Receives the raw value and returns a display string.
     * When omitted, ECharts' built-in formatter is used.
     *
     * @example
     * ```ts
     * yAxisTickLabelFormat={(value) => `${value}%`}
     * ```
     */
    yAxisTickLabelFormat?: (value: number) => string;
    /** Label for the y-axis (value axis) */
    yAxisName?: string;
    /** Number of ticks to display on the y-axis */
    yAxisTickCount?: number;
    /** Indicates incomplete data periods with optional before/after timestamps in ms */
    incomplete?: {
        before?: number;
        after?: number;
    };
    /** Height of the chart in pixels. Defaults to `350`. */
    height?: number;
    /** Callback fired when user selects a time range via brush selection */
    onTimeRangeChange?: (from: number, to: number) => void;
    /** When `true`, switches the chart to ECharts' built-in dark theme */
    isDarkMode?: boolean;
    /**
     * When `true`, renders a vertical gradient fill beneath each line series.
     * The gradient fades from the series' color at the top to transparent at the bottom.
     * Has no effect when `type` is `"bar"`.
     */
    gradient?: boolean;
    /**
     * When `true`, hides the chart and displays an animated sine-wave skeleton
     * that oscillates back and forth to indicate that data is being fetched.
     */
    loading?: boolean;
}
/**
 * TimeseriesChart — a time-series line or bar chart.
 *
 * Built on `Chart` (Apache ECharts) with opinionated defaults for time-series data:
 * a time-typed x-axis, dashed lines for incomplete data periods, brush-based
 * time range selection, and automatic tooltip deduplication.
 *
 * @example
 * ```tsx
 * import * as echarts from "echarts/core";
 * import { LineChart } from "echarts/charts";
 * import { GridComponent, TooltipComponent, BrushComponent, ToolboxComponent } from "echarts/components";
 * import { CanvasRenderer } from "echarts/renderers";
 *
 * echarts.use([LineChart, GridComponent, TooltipComponent, BrushComponent, ToolboxComponent, CanvasRenderer]);
 *
 * const [range, setRange] = useState<[number, number]>();
 *
 * <TimeseriesChart
 *   echarts={echarts}
 *   data={[{ name: "Requests", data: [[Date.now(), 42]], color: "#086FFF" }]}
 *   xAxisName="Time"
 *   xAxisTickLabelFormat={(value) => new Date(value).toLocaleTimeString()}
 *   yAxisName="Count"
 *   onTimeRangeChange={(from, to) => setRange([from, to])}
 * />
 * ```
 */
export declare function TimeseriesChart({ echarts, type, data, xAxisName, xAxisTickCount, yAxisTickLabelFormat, yAxisName, yAxisTickCount, onTimeRangeChange, height, incomplete, isDarkMode, gradient, loading, }: TimeseriesChartProps): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=TimeseriesChart.d.ts.map