import { jsx as _jsx } from "@stencil/core/jsx-runtime";
export class Chart {
    el;
    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('echarts/core');
        const { CanvasRenderer } = await import('echarts/renderers');
        const { GridComponent, TooltipComponent, LegendComponent } = await import('echarts/components');
        // 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('echarts/charts')).BarChart;
            case 'line':
                return (await import('echarts/charts')).LineChart;
            case 'pie':
                return (await import('echarts/charts')).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 is() { return "dds-chart"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["../reset.css", "chart.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["../reset.css", "chart.css"]
        };
    }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "\"bar\" | \"line\" | \"pie\"",
                    "resolved": "\"bar\" | \"line\" | \"pie\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "\"bar\""
            },
            "option": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "EChartsCoreOption",
                    "resolved": "ECBasicOption",
                    "references": {
                        "EChartsCoreOption": {
                            "location": "import",
                            "path": "echarts/core",
                            "id": "../../node_modules/.pnpm/echarts@6.1.0/node_modules/echarts/core.d.ts::ECBasicOption",
                            "referenceLocation": "EChartsCoreOption"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "type",
                "methodName": "onTypeChange"
            }];
    }
}
