import { JSXInterface } from '../../jsx';
import { Chart as ChartJS } from 'chart.js';
import type { ChartConfiguration, ChartDataset, ChartOptions, ChartType, LegendItem, UpdateMode } from 'chart.js';
import 'chartjs-adapter-date-fns';
import { BasicElement, CSSResultGroup, PropertyValues, TemplateResult, nothing } from '@refinitiv-ui/core';
import { Ref } from '@refinitiv-ui/core/directives/ref.js';
import '../../header/index.js';
import { DatasetColors } from '../helpers/index.js';
declare module 'chart.js' {
    interface PluginOptionsByType<TType extends ChartType = ChartType> {
        'ef-chart': object;
    }
}
/**
 * Charting component that uses ChartJS library
 */
export declare class Chart extends BasicElement {
    /**
     * Element version number
     * @returns version number
     */
    static get version(): string;
    /**
     * A `CSSResultGroup` that will be used
     * to style the host, slotted children
     * and the internal template of the element.
     * @return CSS template
     */
    static get styles(): CSSResultGroup;
    /**
     * Chart.js object
     * @type {ChartJS | null}
     */
    chart: ChartJS | null;
    /**
     * Chart configurations. Same configuration as ChartJS
     * @type {ChartConfiguration | null}
     */
    config: ChartConfiguration | null;
    /**
     * Canvas element used to render Chart
     */
    protected canvas: Ref<HTMLCanvasElement>;
    /**
     * Required properties, needed for chart to work correctly.
     * @returns config
     */
    protected get requiredConfig(): ChartOptions;
    /**
     * List of available colors for chart styling
     * @type {string[]}
     * @returns {string[]} List of available colors for chart styling
     */
    get colors(): string[];
    /**
     * Returns the chart title
     * @returns chart title
     */
    protected get chartTitle(): string;
    /**
     * Returns a dataset array
     * @returns dataset array
     */
    protected get datasets(): ChartDataset[];
    /**
     * Invoked whenever the element is updated
     * @param changedProperties Map of changed properties with old values
     * @returns {void}
     */
    protected updated(changedProperties: PropertyValues): void;
    /**
     * Element connected
     * @returns {void}
     */
    connectedCallback(): void;
    /**
     * Element disconnected
     * @returns {void}
     */
    disconnectedCallback(): void;
    /**
     * Create plugin to set our theme into ChartJS lifecycle
     * @returns Created plugin
     */
    private createPlugin;
    /**
     * Themable parts of the config.
     * This will be merged into the configuration object.
     * @returns Chart option with theme
     */
    protected get themableChartOption(): ChartOptions;
    /**
     * Set global configuration of ChartJS
     * @returns {void}
     */
    private setGlobalConfig;
    /**
     * Handles a change of configuration object.
     * This does not fire when a property of the config object changes,
     * for this use this.updateChart() to apply changes.
     * @returns {void}
     */
    protected onConfigChange(): void;
    /**
     * Get as CSS variable and tries to convert it into a usable number
     * @returns The value as a number, or, undefined if NaN.
     */
    protected cssVarAsNumber(...args: string[]): number | undefined;
    /**
     * Callback beforeUpdate event from Chartjs
     * @param chart Chart.js instance
     * @returns {void}
     */
    protected beforeUpdate: (chart: ChartJS) => void;
    /**
     * Set grid color in beforeUpdate event from Chartjs
     * @param chart Chart.js instance
     * @returns {void}
     */
    private decorateGridColors;
    /**
     * Inject theme color into each datasets
     * @param chart Chart.js instance
     * @returns {void}
     */
    protected decorateColors: (chart: ChartJS) => void;
    /**
     * Generates the legend labels specify on Arc chart (Pie and Doughnut).
     * @param legends Array of legend labels
     * @param chart Chart.js instance
     * @returns Array of label configurations
     */
    private generateArcLegendLabels;
    /**
     * Generates the legend labels on a given chart
     * @param chart Chart.js instance
     * @returns Array of label configurations
     */
    protected generateLegendLabels: (chart: ChartJS) => LegendItem[];
    /**
     * Merges all the different layers of the config.
     * @returns {void}
     */
    protected mergeConfigs(): void;
    /**
     * Generates internal solid and opaque color set for a dataset
     * @param isArray Flag to return result in array or not e.g. doughnut, pie, etc
     * @param amount Amount of colors required
     * @param shift Positional shift of the color start point
     * @returns Solid and opaque color values
     */
    protected generateColors(isArray: boolean, amount: number, shift: number): DatasetColors;
    /**
     * Creates a chart after config has changed,
     * or, the element has been connected to the DOM
     * @returns {void}
     */
    protected createChart(): void;
    /**
     * Destroys the chart.js object
     * @returns True if a chart object has been destroyed
     */
    protected destroyChart(): boolean;
    /**
     * Update all data, title, scales, legends and re-render the chart based on its config
     * @param {UpdateMode} updateMode  Additional configuration for control an animation in the update process.
     * @returns {void}
     */
    updateChart(updateMode?: UpdateMode): void;
    /**
     * Template for title
     * Rendered when `config.plugins.title.text` is set
     * @returns Header template from title of config
     */
    protected get titleTemplate(): TemplateResult | typeof nothing;
    /**
     * A `TemplateResult` that will be used
     * to render the updated internal template.
     * @return Render template
     */
    protected render(): TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'ef-chart': Chart;
    }
}

declare global {
  interface HTMLElementTagNameMap {
    'ef-chart': Chart;
  }

  namespace JSX {
    interface IntrinsicElements {
      'ef-chart': Partial<Chart> | JSXInterface.HTMLAttributes<Chart>;
    }
  }
}

export {};