import { CommonProps, Refable, type Styleable } from "@trackunit/react-components";
import { ReactElement } from "react";
type Size = "compact" | "full";
export interface ChartData<TProps extends object = object> {
    /**
     * Unique ID for this entry. Not visible for the user
     */
    id: string;
    /**
     * The text to show for to the user
     */
    name: string;
    /**
     * Numeric value for this item
     */
    value?: number;
    /**
     * The color to use in the chart and legends for this item
     */
    color?: string;
    /**
     * If selected, it'll be highlighted
     */
    selected?: boolean;
    /**
     * Supply the original object that this chart data item was constructed from. It'll be available on callbacks
     */
    original?: TProps;
}
export interface DonutChartProps<TProps extends object> extends CommonProps, Refable<HTMLDivElement>, Styleable {
    /**
     * Array of data points to show
     */
    data: Array<ChartData<TProps>> | undefined;
    /**
     * onClick handler which includes the data object clicked on
     */
    onClick?: (data: ChartData<TProps>) => void;
    /**
     * Show chart as loading
     */
    loading?: boolean;
    /**
     * When compact, the chart is smaller and legends are hidden.
     */
    size?: Size;
    /**
     * Maximum number of data points to show in the chart.
     * The remaining will be grouped into a catogory called "others".
     *
     * @default 6
     */
    maxDataPoints?: number;
    /**
     * Show the "others" category in the chart, if it's available.
     * Setting this to false, will not hide it in the legend.
     *
     * @default true
     */
    showOthers?: boolean;
    /**
     * The unit of the chart.
     *
     */
    unit?: "%";
    /**
     * The value to use as the total value of the chart.
     * Example of use case:
     * - If the data is a progress percentage, the total should display the value of the progress instead of 100%.
     *
     * If not provided, the total value will be calculated from the data.
     */
    overrideTotal?: number;
    /**
     * If true, the data will be sorted by value in descending order.
     *
     * @default true
     */
    autoSortData?: boolean;
    /**
     * If true, the value will not be shown in the legend.
     *
     * @default false
     */
    hideLegendValues?: boolean;
    /**
     * The name to use for the "others" category. If not provided, the default name "Others" will be used. Main use if you want to translate the "others" category.
     *
     * @default "Others"
     */
    othersName?: string;
}
/**
 * Create a DonutChart with interactive legends. Shows proportional data with a center total
 * and hover-to-highlight interactions between chart segments and legend items.
 *
 * ### When to use
 * - To show parts of a whole (percentages, distributions)
 * - When you have a limited number of categories (ideally 6 or fewer)
 * - To display summary metrics with categorical breakdowns
 *
 * ### When not to use
 * - For comparing values across many categories (use BarChart)
 * - For time-series data (use line or bar charts)
 *
 * @example Basic donut chart with categories
 * ```tsx
 * import { DonutChart } from "@trackunit/react-chart-components";
 *
 * const AssetDistribution = () => (
 *   <DonutChart
 *     data={[
 *       { id: "excavators", name: "Excavators", value: 45, color: "#3b82f6" },
 *       { id: "loaders", name: "Loaders", value: 30, color: "#10b981" },
 *       { id: "trucks", name: "Trucks", value: 25, color: "#f59e0b" },
 *     ]}
 *     onClick={(item) => console.log("Selected:", item.name)}
 *   />
 * );
 * ```
 * @example Compact donut chart for dashboards
 * ```tsx
 * import { DonutChart } from "@trackunit/react-chart-components";
 *
 * const UtilizationDonut = () => (
 *   <DonutChart
 *     data={[
 *       { id: "active", name: "Active", value: 75 },
 *       { id: "idle", name: "Idle", value: 25 },
 *     ]}
 *     size="compact"
 *     unit="%"
 *     overrideTotal={75}
 *   />
 * );
 * ```
 * @param {DonutChartProps} props - The props for the Chart component
 * @returns {ReactElement} Chart component
 */
export declare const DonutChart: <TProps extends object>({ data, size, loading, onClick, className, style, "data-testid": dataTestId, maxDataPoints, showOthers, unit, overrideTotal, autoSortData, hideLegendValues, othersName, ref, }: DonutChartProps<TProps>) => ReactElement;
export {};