import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
import type { ECElementEvent, ECharts, EChartsOption } from "echarts";
import { ReactElement, ReactNode } from "react";
import { BrushEvent, type EventName } from "../EChart/EChart";
export type ChartProps = CommonProps & Refable<HTMLDivElement> & Styleable & {
    /**
     * Option values for EChart.
     */
    options: EChartsOption;
    /**
     * Whether or not to show the preloader.
     */
    showLoading?: boolean;
    /**
     * onClick event handler.
     */
    onClick?: (event: ECElementEvent) => void;
    /**
     * Called when the chart instance is ready.
     */
    onChartReady?: (chart: ECharts) => void;
    /**
     * Event handlers for the chart.
     */
    onEvents?: Partial<Omit<Record<EventName, (event: ECElementEvent) => void>, "brush" | "brushselected"> & {
        brush: (event: BrushEvent) => void;
        brushselected: (event: BrushEvent) => void;
    }>;
    /**
     * Whether to merge with previous option.
     *
     * @deprecated Use notMerge in EChart directly. Will be removed in next major version.
     * @default true
     */
    merge?: boolean;
    /**
     * Values for the loading component.
     */
    loadingOption?: {
        text: string;
    };
    /**
     * Time-zone label.
     */
    timezoneLabel?: ReactNode;
    /**
     * Type of renderer used. Either "svg" or "canvas".
     *
     * @default "canvas"
     */
    renderer?: "svg" | "canvas";
    /**
     * Value used to find element by `data-testid` attribute.
     */
    "data-testid"?: string;
};
/**
 * The Chart component is a wrapper component for ECharts, providing a simplified API for rendering interactive charts.
 * It handles loading states, event callbacks, and timezone labels out of the box.
 *
 * ### When to use
 * - When you need full control over ECharts configuration options
 * - For custom or complex chart types not covered by specialized components (BarChart, DonutChart)
 *
 * ### When not to use
 * - For standard bar or donut charts, use the dedicated BarChart or DonutChart components
 *
 * @example Basic line chart
 * ```tsx
 * import { Chart } from "@trackunit/react-chart-components";
 *
 * const LineChart = () => (
 *   <Chart
 *     options={{
 *       xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri"] },
 *       yAxis: { type: "value" },
 *       series: [{ data: [150, 230, 224, 218, 135], type: "line" }],
 *     }}
 *     style={{ height: "300px" }}
 *   />
 * );
 * ```
 * @example Chart with loading state and click handler
 * ```tsx
 * import { Chart } from "@trackunit/react-chart-components";
 *
 * const InteractiveChart = ({ loading, data }) => (
 *   <Chart
 *     showLoading={loading}
 *     loadingOption={{ text: "Loading chart data..." }}
 *     onClick={(event) => console.log("Clicked:", event.data)}
 *     options={{
 *       xAxis: { type: "category", data: data.labels },
 *       yAxis: { type: "value" },
 *       series: [{ data: data.values, type: "bar" }],
 *     }}
 *   />
 * );
 * ```
 */
export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onEvents, merge, loadingOption, timezoneLabel, renderer, "data-testid": dataTestId, ref, }: ChartProps) => ReactElement;