import { type PropertyValues, type TemplateResult } from "lit";
import { OrElement } from "@openremote/or-element";
import { type Asset, AssetDatapointIntervalQueryFormula, type AssetDatapointQueryUnion, type Attribute, type AttributeRef, DatapointInterval } from "@openremote/model";
import * as echarts from "echarts/core";
import { type DatasetComponentOption, type DataZoomComponentOption, type GridComponentOption, type TooltipComponentOption } from "echarts/components";
import { type BarSeriesOption } from "echarts/charts";
import moment from "moment";
import "@openremote/or-translate";
/**
 * Bar chart configuration with options for individual attributes.
 * For example, a list of attributes aligned to the axis on the right side.
 */
export interface BarChartAttributeConfig {
    rightAxisAttributes?: AttributeRef[];
    faintAttributes?: AttributeRef[];
    methodMaxAttributes?: AttributeRef[];
    methodMinAttributes?: AttributeRef[];
    methodAvgAttributes?: AttributeRef[];
    methodDifferenceAttributes?: AttributeRef[];
    methodMedianAttributes?: AttributeRef[];
    methodModeAttributes?: AttributeRef[];
    methodSumAttributes?: AttributeRef[];
    methodCountAttributes?: AttributeRef[];
}
/**
 * Interval configuration for a user to select from.
 * It contains a {@link displayName}, together with a step+interval like "6 hours".
 */
export interface IntervalConfig {
    displayName: string;
    steps: number;
    orFormat: DatapointInterval;
    momentFormat: moment.unitOfTime.DurationConstructor;
    millis: number;
}
/**
 * List of interval options
 */
export declare enum BarChartInterval {
    AUTO = "auto",
    NONE = "none",
    ONE_MINUTE = "1Minute",
    FIVE_MINUTES = "5Minutes",
    FIFTEEN_MINUTES = "15Minutes",
    THIRTY_MINUTES = "30Minutes",
    ONE_HOUR = "hour",
    ONE_DAY = "day",
    ONE_WEEK = "week",
    ONE_MONTH = "month",
    ONE_YEAR = "year"
}
/**
 * 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 BarChartData extends BarSeriesOption {
    index?: number;
    assetId?: string;
    attrName?: string;
    unit?: string;
    yAxisIndex?: number;
    color?: string;
}
export type ECChartOption = echarts.ComposeOption<BarSeriesOption | TooltipComponentOption | GridComponentOption | DatasetComponentOption | DataZoomComponentOption>;
export declare class OrAttributeBarChart extends OrElement {
    static readonly DEFAULT_COLORS: string[];
    /**
     * Asset data to display in the bar chart. This array needs to be populated.
     * Used for the chart legend, information about units, and retrieval of data points.
     */
    assets: Asset[];
    /**
     * List of attributes to display in the bar chart. This array needs to be populated.
     * Used for the chart legend, and the retrieval of data points.
     * Formatted as a JSON array of;
     *
     * ```[<index of {@link assets}>, {@link Attribute}]```
     */
    assetAttributes: [number, Attribute<any>][];
    /**
     * Realm name to associate all the chart data with.
     */
    realm: string | undefined;
    /**
     * 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'.
     */
    readonly attributeColors: [AttributeRef, string][];
    /**
     * The attribute configuration object with, for example, a list of right-axis attributes.
     * See {@link BarChartAttributeConfig} for full documentation on the options.
     */
    readonly attributeConfig?: BarChartAttributeConfig;
    /**
     * List of colors to display attributes values with inside the bar chart.
     * The array corresponds with {@link assetAttributes}, so the 1st color will be used for the 1st attribute.
     */
    readonly colors: string[];
    /**
     * The query object to request attribute data / data points with.
     * Normally, it's of type {@link AssetDatapointIntervalQuery}, including a start- and end time.
     */
    readonly datapointQuery: AssetDatapointQueryUnion;
    /**
     * Selected timeframe using a [start date, end date] array format.
     */
    timeframe?: [Date, Date];
    /**
     * Custom ECharts options object to configure the chart appearance.
     * See their documentation for more info: https://echarts.apache.org/en/option.html
     */
    chartOptions?: ECChartOption;
    /**
     * Shows a right-side legend with the list of visible attributes.
     */
    showLegend: boolean;
    /**
     * Shows the right-side legend (toggled with {@link showLegend}) in a compact / dense format.
     */
    denseLegend: boolean;
    /**
     * Displays the bar chart in a vertically "stacked" configuration.
     * It will display a cumulative effect of all data series on top of each other.
     */
    stacked: boolean;
    /**
     * Enables time control for the user, allowing them to customize the {@link timeframe} shown.
     * Leaving this disabled/unset will show them in a "read-only" state.
     */
    timestampControls: boolean;
    /**
     * Number of decimals to display for attributes.
     */
    decimals: number;
    /**
     * A JSON array list of strings that represent the prefix options in the UI, such as "current" or "last".
     * In combination with {@link timeWindowOptions}, it provides a timeframe like "current 1 hour" to display data of.
     */
    timePrefixOptions: string[];
    /**
     * The selected option from {@link timePrefixOptions}, such as "current" or "last".
     * In combination with {@link timeWindowOptions}, it provides a timeframe like "current 1 hour" to display data of.
     */
    timePrefixKey?: string;
    /**
     * A JSON object containing a list of time window options, like "1 day", "6 hours" or "52 weeks".
     * In combination with {@link timePrefixOptions}, it provides a timeframe like "last 6 hours" to display data of.
     * The input should contain a JavaScript {@link Map}, containing the following:
     * - A {@link string} with a unique key like "6hours",
     * - A combination of any {@link moment.unitOfTime.DurationConstructor} and {@link number}, like ["hours", 6]
     *
     * Example input: `{"6hours": ["hours", 6], "4weeks": ["weeks", 4]}`
     */
    timeWindowOptions: Map<string, [moment.unitOfTime.DurationConstructor, number]>;
    /**
     * The key value of the selected option from {@link timeWindowOptions}, such as "1day", "6hours" or "52weeks".
     * In combination with {@link timePrefixOptions}, it provides a timeframe like "last 6 hours" to display data of.
     */
    timeWindowKey?: string;
    /**
     * A JSON object containing a list of interval options, like "30minutes", "hour" or "day".
     * It determines the interval to display data in sections. For example, split the data every 5 minutes of the past hour.
     * In combination with the active formula in {@link datapointQuery}, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
     * The input should contain a JavaScript {@link Map}, containing the following:
     * - A {@link BarChartInterval} string with a unique key like "hour" or "day",
     * - A {@link IntervalConfig} object with details on the interval, such as the display name and the unit of time.
     *
     * Example input:
     * ```
     * {"30minutes": {
     *   displayName: "30Minutes", // translated automatically
     *   steps: 30,
     *   orFormat: "minute",
     *   momentFormat: "minutes", // using moment.js format
     *   millis: 1800000
     * }}
     * ```
     */
    intervalOptions: Map<BarChartInterval, IntervalConfig>;
    /**
     * The key value of the selected option from {@link intervalOptions}, such as "30minute", "hour" or "week".
     * In combination with the active formula in {@link datapointQuery}, such as AVG and MIN/MAX, it will show a '5 minute' average of the past hour.
     */
    interval?: BarChartInterval;
    /**
     * Whether a custom {@link timeframe} has been configured by the user or not.
     * If it's a default value provided by us, it will be `false`.
     * If a user customized the timeframe, it will be `true`.
     * @protected
     */
    protected _isCustomWindow: boolean;
    /**
     * Loading state when fetching data from a remote source.
     * Show a "loading indicator" in the UI when set to `true`.
     * @protected
     */
    protected _loading: boolean;
    /**
     * Cached array of {@link BarChartData} objects to display in the chart.
     * It contains custom data, but data from the ECharts library as well (see {@link BarSeriesOption} for details)
     * @protected
     */
    protected _data?: BarChartData[];
    protected _chartElem: HTMLDivElement;
    protected _chart?: echarts.ECharts;
    protected _style: CSSStyleDeclaration;
    protected _startOfPeriod?: number;
    protected _endOfPeriod?: number;
    protected _latestError?: string;
    protected _dataAbortController?: AbortController;
    protected _containerResizeObserver?: ResizeObserver;
    protected _intervalConfig?: IntervalConfig;
    static get styles(): import("lit").CSSResult[];
    connectedCallback(): void;
    disconnectedCallback(): void;
    willUpdate(changedProps: PropertyValues): void;
    updated(changedProps: PropertyValues): void;
    render(): TemplateResult<1>;
    protected _getTimeControlsTemplate(disabled: boolean): TemplateResult;
    protected _onTimeframeMenuSelect(ev: CustomEvent): void;
    protected _getTimeframeStatusTemplate(timeframe?: [Date, Date] | undefined): TemplateResult;
    protected _getLegendTemplate(): TemplateResult;
    protected _openTimeDialog(startTimestamp?: number, endTimestamp?: number): void;
    /**
     * Removes all active Chart bars color highlights, by reducing/increasing opacity.
     * @protected
     */
    protected _removeDatasetHighlights(chart?: echarts.ECharts | undefined): void;
    /**
     * Adds a Chart bar color highlight, by reducing/increasing opacity.
     * So the given bar (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.
     */
    protected _addDatasetHighlight(attrRef: AttributeRef, chart?: echarts.ECharts | undefined): void;
    protected _applyChartResponsiveness(): void;
    protected _cleanup(): void;
    protected _getTimeSelectionDates(timePrefixSelected: string, timeWindowSelected: string): [Date, Date];
    protected _shiftTimeframe(currentStart: Date, currentEnd: Date, timeWindowSelected: string, direction: string): void;
    protected _getInterval(start: number, end: number, selectedInterval: BarChartInterval, exact?: boolean): IntervalConfig;
    protected _loadData(): Promise<void>;
    protected _loadAttributeData(asset: Asset, attribute: Attribute<any>, color: string, from: number, to: number, formula: AssetDatapointIntervalQueryFormula, faint?: boolean, label?: string, options?: any, _unit?: any): Promise<BarChartData>;
    protected _updateChartData(): void;
    protected _toggleChartEventListeners(connect: boolean): void;
    protected _getDefaultChartOptions(): ECChartOption;
    protected _getDefaultDatasetOptions(name: string, formula: string, color: string, faint?: boolean): BarChartData;
    static getDefaultTimePrefixOptions(): string[];
    static getDefaultTimeWindowOptions(): Map<string, [moment.unitOfTime.DurationConstructor, number]>;
    static getDefaultIntervalOptions(): Map<BarChartInterval, IntervalConfig>;
}
//# sourceMappingURL=index.d.ts.map