import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
import * as echarts from 'echarts/core';
import type { ChartData } from 'q2-tecton-common/lib/types/elements';
/**
 * @name Area Chart
 * @category Data Visualization
 * @summary Use for showing trends over time with filled areas under lines.
 */
export declare class Q2ChartArea implements ComponentInterface {
    chart: echarts.ECharts;
    chartContainer: HTMLDivElement;
    chartContainerStyles: CSSStyleDeclaration;
    hostElementStyles: CSSStyleDeclaration;
    resizeEventListener: EventListener;
    hostElement: HTMLElement;
    /** Controls alignment of the chart name when its visible. */
    alignChartName: 'left' | 'right' | 'center';
    /**
     * Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.
     *
     * **Examples:**
     * @snippet
     * element.areaColor = "#ff0000";
     * element.areaColor = "papayawhip";
     * element.areaColor = "var(--t-accent-1)";
     */
    areaColor: string;
    /**
     * 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;
    /** A subtitile to the chart name. Often used to provide a brief description of what the data represents. */
    chartSubTitle: string;
    /** An array of objects that contain the data to be displayed. */
    data: ChartData[];
    /**
     * Allows control of how labels on the name axis will be handled if the text length is wider than the available space.
     * Values will ellipsize if the truncate option is used.
     */
    dataNamesOverflow: 'break' | 'truncate';
    /**
     * Sets width available for labels on the name axis.
     * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.
     */
    dataNamesWidth: number;
    /** Controls whether values on the value axis are shown as numbers or as currency. */
    format: 'currency' | 'default';
    /**
     * Can be used in coordination with the currency format property to control decimal handling.
     * Accepts `Ndec` where N is a number. (e.g. `2dec`)
     */
    formatModifier: string;
    /** Controls the direction or viibility of grid lines on the chart. */
    gridLines: 'horizontal' | 'vertical' | 'off';
    /**
     * Sets chart padding around the grid.
     * Each value in the object will be interpreted as pixels.
     *
     * **Example:**
     * @snippet
     * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
     */
    gridPadding: {
        left?: number;
        right?: number;
        top?: number;
        bottom?: number;
    };
    /** Controls visibility of labels on the name axis. */
    hideNameAxisLabels: boolean;
    /** Controls visibility of labels on the value axis. */
    hideValueAxisLabels: boolean;
    /**
     * Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.
     *
     * **Examples:**
     * @snippet
     * element.areaColor = "#ff0000";
     * element.areaColor = "papayawhip";
     * element.areaColor = "var(--t-accent-1)";
     */
    lineColor: string;
    /**
     * Controls the position of text on the names axis by centering the text to the bar at a 45° angle.
     * Can be used when space is limited or with longer name labels.
     */
    offsetDataNames: boolean;
    /**
     * Controls the position of text on the values axis by centering the text to the bar at a 45° angle.
     * Can be used when space is limited or with longer name labels.
     */
    offsetDataValues: boolean;
    /**
     * Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.
     *
     * **Examples:**
     * @snippet
     * element.areaColor = "#ff0000";
     * element.areaColor = "papayawhip";
     * element.areaColor = "var(--t-accent-1)";
     */
    pointerLineColor: string;
    /** Controls the style of the vertical poiner line. */
    pointerLineStyle: 'solid' | 'dashed';
    /** Controls the visibility of the chart name at the top of the chart. */
    showChartName: boolean;
    /** Controls the visibility of a value label when a data point is shown on the chart. */
    showDatapointLabels: boolean;
    /**
     * Controls making the area fill color into a gradient.
     * The gradient starts at the top with the `areaColor` value, and fades to white.
     */
    showGradient: boolean;
    /** Controls the xAxis max value. */
    xMax: number;
    /** Controls the xAxis min value. */
    xMin: number;
    /** Controls the yAxis max value. */
    yMax: number;
    /** Controls the yAxis min value. */
    yMin: number;
    /**
     * Emitted when a data point is clicked.
     * @deprecated Use 'tctChange' instead
     */
    change: EventEmitter<{
        index: number;
        data: ChartData;
    }>;
    /**
     * Emitted when a data point is clicked.
     */
    tctChange: EventEmitter<{
        index: number;
        data: ChartData;
    }>;
    disconnectedCallback(): void;
    componentDidLoad(): void;
    /**
     * A method to fire change event on hover on a point.
     *
     * @testOnly
     */
    hoverDataPoint(index: number): Promise<void>;
    propsUpdates(): void;
    cacheComputedStyles(): void;
    getAreaFill(): any;
    getColor(color: string): any;
    resizeChart(): void;
    setupChartEvents(chart: echarts.ECharts): void;
    updateChart(chart: echarts.ECharts): void;
    render(): any;
}