widgets/chart-widget.js

class ChartWidget extends HTMLElement {
    connectedCallback() {
        const config = JSON.parse(this.getAttribute('config') || '{}');
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: white;
                    border-radius: 0.75rem;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    padding: 1rem;
                }
                .title {
                    font-weight: 600;
                    margin-bottom: 1rem;
                }
                #chart {
                    height: ${config.height || '250px'};
                }
            </style>
            <div class="title">${config.title}</div>
            <div id="chart"></div>
        `;

        if (window.ApexCharts) {
            this.initChart(config);
        }
    }

    initChart(config) {
        const chart = new ApexCharts(this.shadowRoot.querySelector('#chart'), {
            chart: { type: config.type || 'line', height: '100%' },
            series: config.series || [],
            xaxis: config.xaxis || {},
        });
        chart.render();
    }
}
customElements.define('chart-widget', ChartWidget);