import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import * as echarts from 'echarts/core';
import type { DonutChartData } from 'q2-tecton-common/lib/types/elements';
/**
 * @name Donut Chart
 * @category Data Visualization
 * @summary Use for showing proportions of a whole as segments in a ring.
 */
export declare class Q2ChartDonut implements ComponentInterface {
    btnElement: HTMLDivElement;
    centerButtonElement: HTMLButtonElement;
    chart: echarts.ECharts;
    chartContainer: HTMLDivElement;
    chartContainerStyles: CSSStyleDeclaration;
    colors: string[];
    defaultRecord: {
        id: any;
        value: any;
        name: any;
    };
    hostElementStyles: CSSStyleDeclaration;
    isInChangeEvent: boolean;
    resizeObserver: ResizeObserver;
    hostElement: HTMLElement;
    hoveredId: string;
    legendData: DonutChartData[];
    /**
     * The title of the chart. We recommend always including this for accessibility purposes.
     *
     * It is hidden by default, but can be made visible with the `showChartName` variable.
     * @localizable
     */
    chartName: string;
    /** Controls when numbers displayed as currency, if they are whole numbers, they will not include the .00. */
    currencyRound: boolean;
    /** An array of objects that contain the data to be displayed. */
    data: DonutChartData[];
    /** Controls whether values on the value axis are shown as numbers or as currency. */
    format: 'currency' | 'default';
    /** The amount which the slice will scale when hovered. */
    hoverScaleSize: number;
    /**
     * The inner radius of the chart slices which is represeted by a percentage of the radius.
     *
     * @warning
     * If you update this property to be greater than or equal to the `outerRadius`,
     * we automatically set it to be 15% less than the current `outerRadius` to prevent display issues.
     */
    innerRadius: string;
    /**
     * Determine whether the data in the center renders inside a button element.
     *
     * @info
     * This also enables extra keyboard controls when the button is focused.
     */
    isClickable: boolean;
    /** The minimum size of the chart slizes which is represented as a percentage of the circumferences. */
    minSliceSize: string;
    /**
     * The outer radius of the chart slices which is represented by a percentage of the radius.
     *
     * @warning
     * If you update this property to be less than or equal to the `innerRadius`,
     * we automatically set it to be 15% greater than the current `innerRadius` to prevent display issues.
     */
    outerRadius: string;
    /** The id of the data point that is currently selected in the chart. You may set this to pre-select a data point on render, or force a selection change. */
    selectedId: string;
    /** The amount which the slice will separate from the chart when selected. */
    selectedOffset: number;
    /**
     * Determines whether the legend is displayed.
     *
     * @info
     * The legend is a list of the data points in the chart and their colors.
     */
    showLegend: boolean;
    /** The icon that displays by default when no slices are selected. */
    summaryIcon: string;
    /**
     * The name that displays by default when no slices are selected.
     * @localizable
     */
    summaryName: string;
    /**
     * Emitted when a slice is selected.
     * @deprecated Use 'tctChange' instead
     */
    change: EventEmitter<DonutChartData>;
    /**
     * Emitted when the center button is clicked.
     *
     * Requires the `isClickable` prop to be set to `true`.
     * @deprecated Use 'tctClick' instead
     */
    click: EventEmitter<DonutChartData>;
    /**
     * Emitted when a slice is selected.
     */
    tctChange: EventEmitter<DonutChartData>;
    /**
     * Emitted when the center button is clicked.
     *
     * Requires the `isClickable` prop to be set to `true`.
     */
    tctClick: EventEmitter<DonutChartData>;
    disconnectedCallback(): void;
    componentDidLoad(): void;
    delegateFocus(event: FocusEvent): void;
    /**
     * Clears any selected slice.
     */
    clearSelection(): Promise<void>;
    /**
     * Returns the chart instance for e2e testing.
     *
     * @testOnly
     */
    getChartOptions(): Promise<any>;
    /**
     * Selects a slice by its provided `id` in the provided `data`.
     */
    selectById(id: string): Promise<void>;
    /**
     * Selects a slice by its index in the provided `data`.
     */
    selectByIndex(index: number): Promise<void>;
    /**
     * A method to select a slice with index.
     *
     * @testOnly
     */
    selectDataPoint(index: number): Promise<void>;
    propsUpdates(): void;
    dataUpdated(): void;
    innerRadiusUpdated(): void;
    outerRadiusUpdated(): void;
    /**
     * Function to detect and set a data range (category) as selected
     * Logic for when legends are present, and can set selectedId when ledgend category is clicked
     * Also can be used by dev to preset
     */
    checkSelectedId(): void;
    get centerData(): {
        color: string;
        icon?: string;
        itemStyle?: any;
        id: string;
        value: number;
        name: string;
    } | {
        name: string;
        icon: string;
        value: number;
        color: any;
    };
    get isMobile(): boolean;
    get legendHoveredId(): string;
    cacheComputedStyles(): void;
    displayValue(value: string | number): string;
    getColors(): any[];
    getCSSProperty(name: string): any;
    getDataById(id: string): DonutChartData;
    getDataByIndex(index: number): DonutChartData;
    getDataIndexForId(id: string): number;
    getIndexById(id: string): number;
    getMinSliceSizeAsAngle(): number;
    onButtonClick: (event: MouseEvent) => void;
    onButtonKeyDown: (event: KeyboardEvent) => void;
    onClickElsewhere: (event: Event) => void;
    onContainerClick: (event: Event) => void;
    onLegendClick: (event: any) => void;
    onLegendMouseenter: (event: any) => void;
    onLegendMouseleave: (event: any) => void;
    resizeChart(): void;
    setLegendData(): void;
    setupChartEvents(chart: echarts.ECharts): void;
    updateChart(chart: echarts.ECharts): void;
    validateColor(): void;
    renderCenterBlock(): any;
    render(): any;
}