import { PropertyValues } from 'lit';
import { Cre8Element } from '../cre8-element';
import { Chart, ChartOptions, ChartEvent, ActiveElement } from 'chart.js';
/**
 * Chart type definitions for all supported Chart.js types
 */
export type Cre8ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | 'bubble' | 'scatter';
/**
 * Chart dataset configuration with proper typing
 */
export interface Cre8ChartDataset {
    label?: string;
    data: number[] | {
        x: number;
        y: number;
        r?: number;
    }[];
    backgroundColor?: string | string[];
    borderColor?: string | string[];
    borderWidth?: number;
    fill?: boolean;
    tension?: number;
    pointRadius?: number;
    pointHoverRadius?: number;
    hoverBackgroundColor?: string | string[];
    hoverBorderColor?: string | string[];
    [key: string]: unknown;
}
/**
 * Chart data configuration
 */
export interface Cre8ChartData {
    labels?: string[];
    datasets: Cre8ChartDataset[];
}
/**
 * Event detail for chart interactions
 */
export interface Cre8ChartEventDetail {
    event: ChartEvent;
    elements: ActiveElement[];
    chart: Chart;
    dataIndex?: number;
    datasetIndex?: number;
    value?: number | {
        x: number;
        y: number;
        r?: number;
    };
    label?: string;
}
/**
 * A flexible chart component built on Chart.js that supports multiple chart types
 * including line, bar, pie, doughnut, radar, polar area, bubble, and scatter charts.
 *
 * ## Features
 * - Supports all major Chart.js chart types
 * - Reactive updates when data or options change
 * - Customizable colors that integrate with cre8 design tokens
 * - Responsive sizing
 * - Loading state indicator
 * - Event callbacks for click and hover interactions
 * - Accessible with ARIA labels
 *
 * ## Usage
 *
 * ```html
 * <cre8-chart
 *   type="bar"
 *   .data=${{ labels: ['A', 'B', 'C'], datasets: [{ label: 'Sales', data: [10, 20, 30] }] }}
 *   .options=${{ responsive: true }}
 * ></cre8-chart>
 * ```
 *
 * @fires cre8-chart-click - Fired when a chart element is clicked
 * @fires cre8-chart-hover - Fired when hovering over chart elements
 * @fires cre8-chart-ready - Fired when the chart is initialized
 */
export declare class Cre8Chart extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * The type of chart to render.
     * @attr type
     */
    type: Cre8ChartType;
    /**
     * The chart data including labels and datasets.
     * This should be an object with `labels` array and `datasets` array.
     */
    data: Cre8ChartData;
    /**
     * Chart.js configuration options.
     * See Chart.js documentation for all available options.
     */
    options: ChartOptions;
    /**
     * Width of the chart container in pixels.
     * If not set, the chart will be responsive.
     * @attr width
     */
    width?: number;
    /**
     * Height of the chart container in pixels.
     * If not set, defaults to 400px.
     * @attr height
     */
    height: number;
    /**
     * Whether the chart should maintain aspect ratio when resizing.
     * @attr maintain-aspect-ratio
     */
    maintainAspectRatio: boolean;
    /**
     * Whether the chart should be responsive to container size.
     * @attr responsive
     */
    responsive: boolean;
    /**
     * Display a loading indicator instead of the chart.
     * @attr loading
     */
    loading: boolean;
    /**
     * Accessible label for the chart.
     * @attr aria-label
     */
    ariaLabel: string;
    /**
     * Whether to show the legend.
     * @attr show-legend
     */
    showLegend: boolean;
    /**
     * Position of the legend.
     * @attr legend-position
     */
    legendPosition: 'top' | 'bottom' | 'left' | 'right';
    /**
     * Whether to animate chart updates.
     * @attr enable-animation
     */
    enableAnimation: boolean;
    /**
     * Animation duration in milliseconds.
     * @attr animation-duration
     */
    animationDuration: number;
    /**
     * Default colors for datasets (uses cre8 design token colors).
     */
    colors: string[];
    /**
     * Internal chart instance reference.
     */
    private _chartInstance;
    /**
     * Internal state tracking if component is connected.
     */
    private _isConnected;
    /**
     * Reference to the canvas element.
     */
    private _canvas;
    connectedCallback(): void;
    disconnectedCallback(): void;
    protected firstUpdated(_changedProperties: PropertyValues): void;
    protected updated(changedProperties: PropertyValues): void;
    /**
     * Initialize the Chart.js instance.
     */
    private _initializeChart;
    /**
     * Build the complete Chart.js configuration.
     */
    private _buildChartConfig;
    /**
     * Process chart data and apply default colors.
     */
    private _processData;
    /**
     * Merge user options with default options.
     */
    private _mergeOptions;
    /**
     * Deep merge two objects.
     */
    private _deepMerge;
    /**
     * Update the existing chart with new data/options.
     */
    private _updateChart;
    /**
     * Destroy the chart instance.
     */
    private _destroyChart;
    /**
     * Handle chart click events.
     */
    private _handleChartClick;
    /**
     * Handle chart hover events.
     */
    private _handleChartHover;
    /**
     * Public method to get the Chart.js instance.
     */
    getChartInstance(): Chart | null;
    /**
     * Public method to force refresh the chart.
     */
    refresh(): void;
    /**
     * Public method to download chart as image.
     */
    downloadImage(filename?: string): void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-chart': Cre8Chart;
    }
}
export default Cre8Chart;
//# sourceMappingURL=chart.d.ts.map