components/dashboard.js

class CustomDashboard extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .dashboard-container {
                    @apply space-y-6;
                }
                .section-title {
                    @apply text-2xl font-semibold text-white mb-4;
                }
                .section-description {
                    @apply text-gray-400 mb-6;
                }
                .chart-grid {
                    @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
                }
                .chart-card {
                    @apply p-6 bg-gray-800 rounded-lg shadow-lg border border-gray-700;
                }
                .chart-title {
                    @apply text-lg font-semibold text-white mb-4 text-center;
                }
                .chart-container {
                    @apply relative w-full h-64;
                }
                .full-width {
                    @apply lg:col-span-2;
                }
            </style>
            <div class="dashboard-container">
                <div>
                    <h2 class="section-title">Performance Dashboard</h2>
                    <p class="section-description">Visual insights into solar panel performance metrics</p>
                </div>
                <div class="chart-grid">
                    <div class="chart-card">
                        <h3 class="chart-title">Efficiency Distribution</h3>
                        <div class="chart-container">
                            <canvas id="eficienciaChart"></canvas>
                        </div>
                    </div>
                    <div class="chart-card">
                        <h3 class="chart-title">Top Manufacturers by Power</h3>
                        <div class="chart-container">
                            <canvas id="potenciaChart"></canvas>
                        </div>
                    </div>
                    <div class="chart-card full-width">
                        <h3 class="chart-title">Efficiency vs. Power</h3>
                        <div class="chart-container">
                            <canvas id="scatterChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-dashboard', CustomDashboard);