import { r as registerInstance, g as getElement, j as jsx } from './index-C7YNCRgy.js';

const resetCss = () => `@layer reset, base, variants, states, sizes;  @layer reset {   :host {     display: contents;     -moz-text-size-adjust: none;     -webkit-text-size-adjust: none;     text-size-adjust: none;     font-family: var(--dds-font-family-sans);     font-feature-settings: var(--dds-font-features-sans);     text-rendering: optimizeLegibility;     -webkit-font-smoothing: antialiased;      *,     *::after,     *::before,     *::backdrop,     *::file-selector-button {       box-sizing: border-box;       margin: 0;       padding: 0;       min-inline-size: 0;       min-block-size: 0;     }      * {       scrollbar-width: thin;       scrollbar-color: color-mix(gray 50%, transparent);     }      *:focus-visible {       z-index: 1;     }      > * {       interpolate-size: allow-keywords;       -webkit-tap-highlight-color: transparent;     }   } } `;

const chartCss = () => ``;

const Chart = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    get el() { return getElement(this); }
    type = "bar";
    option;
    chartInstance = null;
    async componentDidLoad() {
        await this.initChart();
    }
    async onTypeChange() {
        this.chartInstance?.dispose();
        await this.initChart();
    }
    async initChart() {
        const container = this.el.shadowRoot?.querySelector('.chart');
        if (!container)
            return;
        // Core is always needed - but loaded once
        const echarts = await import('./core-9ZHD3J-1.js');
        const { CanvasRenderer } = await import('./renderers-Db1mwOcV.js');
        const { GridComponent, TooltipComponent, LegendComponent } = await import('./components-qjWQRJCi.js');
        // Only load the chart module you actually need
        const chartModule = await this.loadChartModule();
        echarts.use([CanvasRenderer, GridComponent, TooltipComponent,
            LegendComponent, chartModule]);
        this.chartInstance = echarts.init(container);
        this.chartInstance.setOption(this.option);
    }
    async loadChartModule() {
        switch (this.type) {
            case 'bar':
                return (await import('./charts-jdCevJQK.js')).BarChart;
            case 'line':
                return (await import('./charts-jdCevJQK.js')).LineChart;
            case 'pie':
                return (await import('./charts-jdCevJQK.js')).PieChart;
            default:
                throw new Error(`Unknown chart type: ${this.type}`);
        }
    }
    disconnectedCallback() {
        this.chartInstance?.dispose();
    }
    render() {
        return jsx("div", { class: "chart", style: { width: '100%', height: '100%' } }, '8463ec1ac51060691875a0372a9562984cc2c5c7');
    }
    static get watchers() { return {
        "type": [{
                "onTypeChange": 0
            }]
    }; }
};
Chart.style = resetCss() + chartCss();

export { Chart as dds_chart };
