import { LitElement, PropertyValues, TemplateResult } from "lit";
import { Asset, AssetDatapointQueryUnion, Attribute, AttributeRef, DatapointInterval } from "@openremote/model";
import "@openremote/or-asset-tree";
import "@openremote/or-mwc-components/or-mwc-input";
import "@openremote/or-components/or-panel";
import "@openremote/or-translate";
import * as echarts from "echarts/core";
import { DatasetComponentOption, DataZoomComponentOption, GridComponentOption, TooltipComponentOption } from "echarts/components";
import { LineSeriesOption } from "echarts/charts";
import "@openremote/or-components/or-loading-indicator";
import moment from "moment";
import { OrAssetTreeSelectionEvent } from "@openremote/or-asset-tree";
export type ECChartOption = echarts.ComposeOption<LineSeriesOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption | DataZoomComponentOption>;
export declare class OrChartEvent extends CustomEvent<OrChartEventDetail> {
    static readonly NAME = "or-chart-event";
    constructor(value?: any, previousValue?: any);
}
export interface ChartViewConfig {
    attributeRefs?: AttributeRef[];
    fromTimestamp?: number;
    toTimestamp?: number;
    period?: moment.unitOfTime.Base;
    deltaFormat?: "absolute" | "percentage";
    decimals?: number;
}
export interface ChartAttributeConfig {
    rightAxisAttributes?: AttributeRef[];
    smoothAttributes?: AttributeRef[];
    steppedAttributes?: AttributeRef[];
    areaAttributes?: AttributeRef[];
    faintAttributes?: AttributeRef[];
    extendedAttributes?: AttributeRef[];
}
export interface OrChartEventDetail {
    value?: any;
    previousValue?: any;
}
declare global {
    export interface HTMLElementEventMap {
        [OrChartEvent.NAME]: OrChartEvent;
    }
}
export interface ChartConfig {
    xLabel?: string;
    yLabel?: string;
}
export interface OrChartConfig {
    chart?: ChartConfig;
    realm?: string;
    views: {
        [name: string]: {
            [panelName: string]: ChartViewConfig;
        };
    };
}
/**
 * ECharts dataset object with additional optional fields for visualization purposes.
 * For example, {@link assetId} and {@link attrName} can be specified, so their information can be shown alongside the data itself.
 */
export interface LineChartData extends LineSeriesOption {
    assetId?: string;
    attrName?: string;
    unit?: string;
    extended?: boolean;
    predicted?: boolean;
}
declare const OrChart_base: (new (...args: any[]) => {
    _i18nextJustInitialized: boolean;
    _language: string;
    connectedCallback(): void;
    disconnectedCallback(): void;
    shouldUpdate(changedProps: PropertyValues): any;
    initCallback: (options: import("i18next").InitOptions) => void;
    langChangedCallback: () => void;
    readonly isConnected: boolean;
}) & typeof LitElement;
export declare class OrChart extends OrChart_base {
    static readonly DEFAULT_COLORS: string[];
    static get styles(): import("lit").CSSResult[];
    assets: Asset[];
    private activeAsset?;
    assetAttributes: [number, Attribute<any>][];
    /**
     * The list of HEX colors representing the line color for each {@link AttributeRef}.
     * Acts as an override, and will fall back to the {@link colors} attribute if not specified.
     * The {@link AttributeRef} object with Asset ID and Attribute name need to be present in the Chart to work.
     * The HEX color should be put in without '#' prefix. For example, you'd use '4d9d2a' instead of '#4d9d2a'.
     */
    attributeColors: [AttributeRef, string][];
    /**
     * Chart attribute configuration object, specifying characteristics for each Chart line.
     * For example, what {@link AttributeRef} is aligned to the right side, or what {@link AttributeRef} is using a fill.
     * Check for {@link ChartAttributeConfig} for specification. This HTML attribute expects JSON string input.
     */
    attributeConfig: ChartAttributeConfig;
    dataProvider?: (startOfPeriod: number, endOfPeriod: number) => Promise<LineChartData[]>;
    colors: string[];
    readonly datapointQuery: AssetDatapointQueryUnion;
    config?: OrChartConfig;
    chartOptions?: ECChartOption;
    realm?: string;
    panelName?: string;
    attributeControls: boolean;
    timeframe?: [Date, Date];
    timestampControls: boolean;
    /**
     * List of 'time prefix' options like 'this' or 'last', for the user to select from.
     * In combination with the {@link timeWindowOptions} attribute, it becomes a string like 'last 6 hours'.
     * @protected
     */
    timePrefixOptions?: string[];
    /**
     * Selected 'time prefix' of the available {@link timePrefixOptions}.
     * This string attribute will only accept keys of the {@link timeWindowOptions} Array.
     */
    timePrefixKey?: string;
    /**
     * List of timeframe options like '6 hours' for the user to select from.
     * In combination with the {@link timePrefixKey} attribute, it becomes a string like 'last 6 hours'.
     * Expects a JSON string input, that is formatted as an JavaScript {@link Map} object.
     * The map is identified with a unique key, and a combination of `[duration, length]`.
     * For example `['6hours', ['hours', 6]]`.
     */
    timeWindowOptions?: Map<string, [moment.unitOfTime.DurationConstructor, number]>;
    /**
     * Selected 'time window' of the available {@link timeWindowOptions}.
     * This string attribute will only accept keys of the {@link timeWindowOptions} Map.
     */
    timeWindowKey?: string;
    /**
     * Boolean attribute to enable/disable stacking the data vertically. (compound line chart)
     * On the same axis, it will display a cumulative effect of all data series on top of each other.
     */
    stacked: boolean;
    showLegend: boolean;
    denseLegend: boolean;
    showZoomBar: boolean;
    protected _loading: boolean;
    protected _data?: LineChartData[];
    protected _tableTemplate?: TemplateResult;
    protected _zoomChanged: boolean;
    protected _isCustomWindow: boolean;
    protected _chartElem: HTMLDivElement;
    protected _chart?: echarts.ECharts;
    protected _style: CSSStyleDeclaration;
    protected _startOfPeriod?: number;
    protected _endOfPeriod?: number;
    protected _zoomStartOfPeriod?: number;
    protected _zoomEndOfPeriod?: number;
    protected _latestError?: string;
    protected _dataAbortController?: AbortController;
    protected _zoomHandler?: any;
    protected _containerResizeObserver?: ResizeObserver;
    protected _tooltipCache: [xTime: number, content: string];
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    updated(changedProperties: PropertyValues): void;
    applyChartResponsiveness(): void;
    render(): TemplateResult<1>;
    protected _onTreeSelectionChanged(event: OrAssetTreeSelectionEvent): Promise<void>;
    /**
     * Removes all active Chart line color highlights, by reducing/increasing opacity.
     * @protected
     */
    protected _removeDatasetHighlights(chart?: echarts.ECharts | undefined): void;
    /**
     * Adds a Chart line color highlight, by reducing/increasing opacity.
     * So the given line (represented by {@link assetId} and {@link attrName} will be emphasized, while others are less visible.
     * @param attrRef - Asset ID and attribute name to be highlighted
     * @param chart - ECharts instance to add the highlight to.
     */
    _addDatasetHighlight(attrRef: AttributeRef, chart?: echarts.ECharts | undefined): void;
    loadSettings(reset: boolean): Promise<void>;
    saveSettings(): Promise<void>;
    protected _openDialog(): void;
    protected _openTimeDialog(startTimestamp?: number, endTimestamp?: number): void;
    protected _addAttribute(selectedAttrs?: AttributeRef[]): Promise<void>;
    protected _getSelectedAttributes(): {
        id: string | undefined;
        name: string | undefined;
    }[];
    protected _cleanup(): void;
    protected _getDefaultTimePrefixOptions(): string[];
    protected _getDefaultTimeWindowOptions(): Map<string, [moment.unitOfTime.DurationConstructor, number]>;
    /**
     * Internal function for retrieving a start/end date, based on the selected time frame.
     * Given the {@link selectedTimePrefix} (say 'last') and the {@link selectedTimeWindow} (say '6 hours'),
     * it will return the respected JavaScript {@link Date} objects.
     * @param selectedTimePrefix - Time prefix string, for example 'last'.
     * @param selectedTimeWindow - Time window string, for example '6 hours'.
     * @protected
     */
    protected _getTimeSelectionDates(selectedTimePrefix: string, selectedTimeWindow: string): [Date, Date];
    /**
     * Internal function for shifting a timeframe in a specific {@link direction}.
     * Based on the given {@link currentStart} and {@link currentEnd} dates, it will move forward/backwards for the {@link selectedTimeWindow}.
     * For example, when viewing '1 week' of data, and calling this function with the 'previous' direction, it will update {@link timeframe} with dates one week in advance.
     *
     * @param currentStart - Start date of the current viewport
     * @param currentEnd - End date of the current viewport
     * @param selectedTimeWindow - Time window to subtract/add from the viewport
     * @param direction - Whether to advance or reverse the viewport (whether to add or remove time)
     * @protected
     */
    protected _shiftTimeframe(currentStart: Date, currentEnd: Date, selectedTimeWindow: string, direction: "previous" | "next"): void;
    protected _getInterval(diffInHours: number): [number, DatapointInterval];
    protected _loadData(): Promise<void>;
    protected _loadAttributeData(asset: Asset, attribute: Attribute<any>, color: string, predicted: boolean, smooth: boolean, stacked: boolean, stepped: boolean, area: boolean, faint: boolean, extended: boolean, label?: string, options?: any, unit?: any): Promise<LineChartData>;
    /**
     * Callback event for the 'datazoom' event of ECharts.
     * Whenever a user zooms in the chart, we update the start/end time, and refetch chart data.
     * So, if user is zooming in from a year of data, to only view data of September, we refetch the data of September.
     * This is also to improve data accuracy, since we're using the LTTB algorithm by default.
     *
     * @param event - Payload of the 'datazoom' event
     * @protected
     */
    protected _onZoomChange(event: any): void;
    /**
     * Updates the data in the chart. It will replace existing data.
     * @param data - Time series data to insert
     * @param start - Start timestamp
     * @param end - End timestamp
     * @protected
     */
    protected _updateChartData(data?: LineChartData[] | undefined, start?: number | undefined, end?: number | undefined): void;
    /**
     * Adds/removes the event listeners for the Chart element.
     * For example, subscribing / unsubscribing from the element resize or zoom event.
     *
     * @param connect - Whether to connect or disconnect event listeners.
     * @protected
     */
    protected _toggleChartEventListeners(connect: boolean): void;
    /**
     * Internal function to retrieve a string for the time series data tooltip.
     * Based on {@link xTime}, it will retrieve data from the dataset, and display the correct value in a tooltip.
     * It uses the format `{asset + attribute name}: {value} {unit}`. For example, "Light 1 brightness: 30 %"
     *
     * @param xTime - Timestamp to use for generating the tooltip
     * @protected
     */
    protected _getTooltipData(xTime: number): string;
    /**
     * Internal function to get the default Chart attribute config.
     * @protected
     */
    protected _getDefaultAttributeConfig(): ChartAttributeConfig;
}
export {};
