feat: add aggregated resource usage chart to dashboard

routes/web.php

@@ -21,6 +21,7 @@ $router->get('/', [DashboardController::class, 'index'], [AuthMiddleware::class]
 $router->get('/dashboard', [DashboardController::class, 'index'], [AuthMiddleware::class]);
 $router->get('/dashboard/stats', [DashboardController::class, 'stats'], [AuthMiddleware::class]);
 $router->get('/dashboard/refresh-metrics', [DashboardController::class, 'refreshMetrics'], [AuthMiddleware::class]);
+$router->get('/dashboard/chart-data', [DashboardController::class, 'chartData'], [AuthMiddleware::class]);
 
 $router->get('/login', [AuthController::class, 'loginForm']);
 $router->post('/login', [AuthController::class, 'login'], [CSRFMiddleware::class, RateLimitMiddleware::class]);

src/Controllers/DashboardController.php

@@ -34,12 +34,15 @@ class DashboardController
             return in_array((int) $s['id'], $accessibleIds, true);
         })) : [];
 
+        $aggregatedMetrics = $this->monitoringService->getAggregatedHistoricalMetrics($accessibleIds ?? []);
+
         $recentActivity = $this->auditService->getRecentActivity(10, $userId);
 
         $this->view->display('dashboard.index', [
             'title' => 'Dashboard - ServerManager',
             'stats' => $stats,
             'servers' => $servers,
+            'aggregatedMetrics' => $aggregatedMetrics,
             'recentActivity' => $recentActivity,
         ]);
     }
@@ -65,4 +68,16 @@ class DashboardController
             'message' => 'Metrics refreshed',
         ]);
     }
+
+    public function chartData(): void
+    {
+        $serverModel = new Server();
+        $accessibleIds = $serverModel->getAccessibleServerIds((int) Session::get('user_id'));
+        $data = $this->monitoringService->getAggregatedHistoricalMetrics($accessibleIds ?? []);
+
+        $this->view->json([
+            'success' => true,
+            'data' => $data,
+        ]);
+    }
 }

src/Services/MonitoringService.php

@@ -173,6 +173,29 @@ class MonitoringService
         );
     }
 
+    public function getAggregatedHistoricalMetrics(array $serverIds, int $hours = 24): array
+    {
+        if (empty($serverIds)) {
+            return [];
+        }
+        $placeholders = implode(',', array_fill(0, count($serverIds), '?'));
+        $params = $serverIds;
+        $params[] = $hours;
+        return $this->db->fetchAll(
+            "SELECT
+                DATE_FORMAT(created_at, '%Y-%m-%d %H:%i:00') as time_bucket,
+                AVG(cpu_usage) as avg_cpu,
+                AVG(ram_usage) as avg_ram,
+                AVG(disk_usage) as avg_disk
+             FROM monitoring_history
+             WHERE server_id IN ({$placeholders})
+               AND created_at >= DATE_SUB(NOW(), INTERVAL ? HOUR)
+             GROUP BY time_bucket
+             ORDER BY time_bucket ASC",
+            $params
+        );
+    }
+
     public function getDashboardStats(?array $serverIds = null): array
     {
         $where = '';

views/dashboard/index.php

@@ -2,6 +2,7 @@
 $stats = $stats ?? [];
 $servers = $servers ?? [];
 $recentActivity = $recentActivity ?? [];
+$aggregatedMetrics = $aggregatedMetrics ?? [];
 ?>
 
 <div class="page-header">
@@ -54,6 +55,15 @@ $recentActivity = $recentActivity ?? [];
     </div>
 </div>
 
+<div class="card" style="margin-bottom:1.5rem">
+    <div class="card-header">
+        <h2><i class="fas fa-chart-line"></i> Recursos Agregados (24h)</h2>
+    </div>
+    <div class="card-body">
+        <canvas id="aggregatedChart" height="300"></canvas>
+    </div>
+</div>
+
 <div class="dashboard-grid">
     <div class="dashboard-card">
         <div class="card-header">
@@ -146,6 +156,148 @@ $recentActivity = $recentActivity ?? [];
                                 </span>
     </div>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<script>
+const aggregatedData = <?= json_encode($aggregatedMetrics) ?>;
+
+let aggregatedChart = null;
+
+function initAggregatedChart(data) {
+    const container = document.getElementById('aggregatedChart').parentNode;
+    const oldCanvas = document.getElementById('aggregatedChart');
+    const newCanvas = document.createElement('canvas');
+    newCanvas.id = 'aggregatedChart';
+    newCanvas.height = 300;
+    container.replaceChild(newCanvas, oldCanvas);
+    const ctx = newCanvas.getContext('2d');
+    const labels = data.map(m => {
+        const d = new Date(m.time_bucket);
+        return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0');
+    });
+
+    aggregatedChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: [
+                {
+                    label: 'CPU',
+                    data: data.map(m => parseFloat(m.avg_cpu)),
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 1,
+                },
+                {
+                    label: 'RAM',
+                    data: data.map(m => parseFloat(m.avg_ram)),
+                    borderColor: '#22c55e',
+                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 1,
+                },
+                {
+                    label: 'Disk',
+                    data: data.map(m => parseFloat(m.avg_disk)),
+                    borderColor: '#8b5cf6',
+                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                    fill: true,
+                    tension: 0.3,
+                    pointRadius: 1,
+                },
+            ],
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            interaction: {
+                intersect: false,
+                mode: 'index',
+            },
+            plugins: {
+                legend: {
+                    labels: {
+                        color: '#9ca3af',
+                        font: { family: "'Inter', sans-serif" },
+                        boxWidth: 12,
+                        padding: 16,
+                    },
+                },
+                tooltip: {
+                    backgroundColor: '#1a1d2b',
+                    borderColor: '#2a2d3d',
+                    borderWidth: 1,
+                    titleColor: '#e1e4ed',
+                    bodyColor: '#9ca3af',
+                    padding: 10,
+                    cornerRadius: 8,
+                    callbacks: {
+                        label: function(ctx) {
+                            return ctx.dataset.label + ': ' + ctx.parsed.y.toFixed(1) + '%';
+                        },
+                    },
+                },
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: '#6b7280',
+                        maxTicksLimit: 12,
+                        font: { size: 11 },
+                    },
+                    grid: {
+                        color: 'rgba(255,255,255,0.04)',
+                    },
+                },
+                y: {
+                    min: 0,
+                    max: 100,
+                    ticks: {
+                        color: '#6b7280',
+                        font: { size: 11 },
+                        callback: function(v) { return v + '%'; },
+                    },
+                    grid: {
+                        color: 'rgba(255,255,255,0.04)',
+                    },
+                },
+            },
+        },
+    });
+}
+
+function refreshAggregatedChart() {
+    fetch('/dashboard/chart-data')
+        .then(r => r.json())
+        .then(response => {
+            if (response.success && response.data) {
+                const data = response.data;
+                const labels = data.map(m => {
+                    const d = new Date(m.time_bucket);
+                    return d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0');
+                });
+                if (aggregatedChart) {
+                    aggregatedChart.data.labels = labels;
+                    aggregatedChart.data.datasets[0].data = data.map(m => parseFloat(m.avg_cpu));
+                    aggregatedChart.data.datasets[1].data = data.map(m => parseFloat(m.avg_ram));
+                    aggregatedChart.data.datasets[2].data = data.map(m => parseFloat(m.avg_disk));
+                    aggregatedChart.update('none');
+                } else if (data.length > 0) {
+                    initAggregatedChart(data);
+                }
+            }
+        });
+}
+
+if (aggregatedData.length > 0) {
+    initAggregatedChart(aggregatedData);
+}
+
+setInterval(refreshAggregatedChart, 30000);
+</script>
                     <?php endforeach; ?>
                 </div>
             <?php endif; ?>