Dashboard web FastAPI + Chart.js

- 4 vues : spectre temps reel, historique detections, background, timeline CPS - API REST : /api/status, /api/spectrum/current, /api/spectrum/difference, /api/background, /api/background/spectrum, /api/history, /api/cps/timeline - Frontend vanilla JS + Chart.js (pas de Node.js, leger pour Pi 4) - Moniteur modifie pour exporter son etat dans /data/monitor_state.json et le CPS dans /data/cps_log.jsonl chaque cycle - Nouveau conteneur Docker 'web' sur port 8080 - Theme sombre, calibration energie (E = 0.33 + 2.97 * canal) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-05-19 13:33:07 +02:00
parent 27ef0727e8
commit 1e0c1a5ea5
22 changed files with 1031 additions and 2 deletions
--- a/web/static/js/background.js
+++ b/web/static/js/background.js
@ -0,0 +1,103 @@
+let bgChart = null;
+
+async function refreshBackground() {
+    try {
+        const [infoResp, specResp] = await Promise.all([
+            fetch(`${API_BASE}/api/background`),
+            fetch(`${API_BASE}/api/background/spectrum`)
+        ]);
+
+        if (!infoResp.ok || !specResp.ok) {
+            document.getElementById('bg-stats').innerHTML = '<p style="color:#888">Background non disponible</p>';
+            return;
+        }
+
+        const info = await infoResp.json();
+        const spec = await specResp.json();
+
+        // Stats
+        document.getElementById('bg-stats').innerHTML = `
+            <div class="bg-stat"><div class="bg-stat-value">${info.elapsed_hours.toFixed(1)}h</div><div class="bg-stat-label">Durée</div></div>
+            <div class="bg-stat"><div class="bg-stat-value">${info.live_time_s.toFixed(0)}s</div><div class="bg-stat-label">Live time</div></div>
+            <div class="bg-stat"><div class="bg-stat-value">${info.total_counts.toFixed(0)}</div><div class="bg-stat-label">Coups</div></div>
+            <div class="bg-stat"><div class="bg-stat-value">${info.cps.toFixed(2)}</div><div class="bg-stat-label">CPS</div></div>
+        `;
+
+        // Chart
+        updateBackgroundChart(spec);
+
+        // Peaks table
+        updatePeaksTable(info.top_peaks || []);
+    } catch {}
+}
+
+function updateBackgroundChart(spec) {
+    const ctx = document.getElementById('background-chart').getContext('2d');
+
+    const chartData = {
+        labels: spec.energy_kev,
+        datasets: [{
+            label: 'Background',
+            data: spec.counts,
+            borderColor: '#ff9800',
+            backgroundColor: 'rgba(255, 152, 0, 0.1)',
+            borderWidth: 1,
+            pointRadius: 0,
+            fill: true,
+        }]
+    };
+
+    const options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: { labels: { color: '#e0e0e0' } },
+            tooltip: {
+                callbacks: {
+                    title: (items) => `${spec.energy_kev[items[0].dataIndex]} keV`,
+                    label: (item) => `${item.raw.toFixed(1)} counts`
+                }
+            }
+        },
+        scales: {
+            x: {
+                type: 'linear',
+                title: { display: true, text: 'Énergie (keV)', color: '#888' },
+                ticks: { color: '#888', maxTicksLimit: 20 },
+                grid: { color: '#333' },
+            },
+            y: {
+                title: { display: true, text: 'Comptages', color: '#888' },
+                ticks: { color: '#888' },
+                grid: { color: '#333' },
+            }
+        }
+    };
+
+    if (bgChart) {
+        bgChart.data = chartData;
+        bgChart.options = options;
+        bgChart.update();
+    } else {
+        bgChart = new Chart(ctx, { type: 'line', data: chartData, options });
+    }
+}
+
+function updatePeaksTable(peaks) {
+    const container = document.getElementById('peaks-table');
+    if (!peaks || peaks.length === 0) {
+        container.innerHTML = '<p style="color:#888;text-align:center;padding:8px;">Pas assez de données pour identifier les pics</p>';
+        return;
+    }
+
+    let html = '<h3 style="margin-bottom:8px;color:#ff9800;">Pics détectés</h3>';
+    peaks.forEach(p => {
+        html += `<div class="peak-row">
+            <span style="color:#4fc3f7">${p.energy_kev.toFixed(1)} keV</span>
+            <span>${p.counts.toFixed(0)} cts</span>
+        </div>`;
+    });
+    container.innerHTML = html;
+}
+
+document.querySelector('[data-tab="background"]').addEventListener('click', refreshBackground);