import { SetOptionOpts } from 'echarts';
import { TimeseriesMarker } from './timeseries-markers';
import { TimeseriesThreshold } from './timeseries-thresholds';
import type * as echarts from "echarts/core";
export type { TimeseriesMarker } from './timeseries-markers';
export type { TimeseriesThreshold } from './timeseries-thresholds';
/** 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[];
    /** Vertical reference markers rendered on the time axis. */
    markers?: TimeseriesMarker[];
    /** Horizontal threshold lines rendered on the value axis. */
    thresholds?: TimeseriesThreshold[];
    /** Label for the x-axis (time axis) */
    xAxisName?: string;
    /** Number of ticks to display on the x-axis */
    xAxisTickCount?: number;
    /**
     * Custom formatter for x-axis tick labels.
     * Receives the raw timestamp in milliseconds and returns a display string,
     * overriding ECharts' built-in time formatting.
     */
    xAxisTickFormat?: (value: number) => string;
    /**
     * Custom formatter for y-axis tick labels.
     * Receives the raw value and returns a display string.
     * When omitted, ECharts' built-in formatter is used.
     */
    yAxisTickFormat?: (value: number) => string;
    /**
     * @deprecated Use `tooltipValueFormat` instead. This prop formats tooltip
     * values, not y-axis tick labels. It will be removed in a future major version.
     */
    yAxisTickLabelFormat?: (value: number) => string;
    /** Label for the y-axis (value axis) */
    yAxisName?: string;
    /** Number of ticks to display on the y-axis */
    yAxisTickCount?: number;
    /**
     * Custom formatter for tooltip values.
     * Receives the raw y-value and returns a display string.
     * When omitted, the raw value is shown. Takes precedence over the
     * deprecated `yAxisTickLabelFormat` prop.
     */
    tooltipValueFormat?: (value: number) => string;
    /**
     * Controls which series are shown in the tooltip.
     * - `"all"` — show all series at the hovered timestamp (default)
     * - `"single"` — show only the series whose value is closest to the cursor
     */
    tooltipMode?: "all" | "single";
    /**
     * Maximum number of series rows shown in the tooltip when `tooltipMode` is `"all"`.
     * Additional series are hidden with a `+N more` footer. Defaults to `10`.
     */
    tooltipMaxItems?: number;
    /**
     * Constrains the tooltip to stay within a specific element or region.
     * By default the tooltip avoids overflowing any clipping ancestor
     * (scroll containers, viewports, etc.).
     *
     * Pass an `Element` or array of elements to restrict the tooltip to a
     * specific container.
     *
     * @default "clipping-ancestors"
     */
    tooltipBoundary?: "clipping-ancestors" | Element | Element[];
    /**
     * Which axis the tooltip follows the cursor on.
     *
     * - `"both"` — tooltip tracks the cursor on both axes, staying near the
     *   pointer at all times. This is the default and matches the behaviour of
     *   ECharts' built-in tooltip.
     * - `"x"` — tooltip follows the cursor horizontally but is locked to a
     *   fixed vertical position relative to the chart. This keeps the tooltip
     *   out of the way of the data and avoids vertical jitter as series values
     *   change — the same approach used by Recharts and many dashboard UIs.
     *
     * Only these two modes are offered because the x-axis is always time in a
     * `TimeseriesChart`: y-only tracking and fully-fixed positioning don't
     * produce useful tooltip behaviour for time-series data.
     *
     * Powered by Base UI Tooltip's `trackCursorAxis` under the hood.
     *
     * @default "both"
     */
    tooltipFollowCursor?: "both" | "x";
    /** Indicates incomplete data periods with optional before/after timestamps in ms */
    incomplete?: {
        before?: number;
        after?: number;
    };
    /**
     * When `true`, adds a hidden ECharts legend so consumers can drive series
     * visibility imperatively via the `legendSelect` / `legendUnSelect` /
     * `legendToggleSelect` actions (e.g. to build a custom interactive legend).
     * Toggled-off series are also excluded from the tooltip.
     *
     * Requires the consumer to register ECharts' `LegendComponent`
     * (`echarts.use([LegendComponent])`); otherwise the legend actions no-op and,
     * in development, ECharts logs a "component legend is used but not imported"
     * warning.
     *
     * @default false
     */
    enableLegendSelection?: boolean;
    /** 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;
    /**
     * Accessible description for screen readers. When provided, it is passed to
     * ECharts' `aria.label.description` and announced when the chart receives
     * focus. Consumers are responsible for writing a meaningful description —
     * see the W3C guidance on complex images for recommendations.
     *
     * @see https://www.w3.org/WAI/tutorials/images/complex/
     * @see https://echarts.apache.org/handbook/en/best-practices/aria/
     */
    ariaDescription?: string;
    /**
     * Additional options passed as the second argument to `chart.setOption()`.
     * Defaults to `{ notMerge: false, lazyUpdate: true }`.
     */
    optionUpdateBehavior?: SetOptionOpts;
}
/**
 * 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"
 *   xAxisTickFormat={(ts) => new Date(ts).toLocaleTimeString()}
 *   yAxisName="Count"
 *   yAxisTickFormat={(value) => `${value / 1000}k`}
 *   tooltipValueFormat={(value) => `${value.toFixed(2)} req/s`}
 *   onTimeRangeChange={(from, to) => setRange([from, to])}
 * />
 * ```
 */
export declare const TimeseriesChart: import('react').ForwardRefExoticComponent<TimeseriesChartProps & import('react').RefAttributes<echarts.ECharts | null>>;
//# sourceMappingURL=TimeseriesChart.d.ts.map