Declutter control diagnostics sections

public/assets/app.js

@@ -50,6 +50,9 @@
         dmesgToggle: $('#dmesgToggle'),
         dmesgOutput: $('#dmesgOutput'),
         dmesgMeta: $('#dmesgMeta'),
+        secondaryChartDetails: $('#secondaryChartDetails'),
+        processDetails: $('#processDetails'),
+        diagnosticDetails: $('#diagnosticDetails'),
     };
 
     const state = {
@@ -122,6 +125,7 @@
             batteryV: 'Battery V',
             batterySoc: 'Battery SOC',
             sensorHistory: 'Sensor History',
+            detailCharts: 'Detail Charts',
             temperature: 'Temperature',
             rp1Temp: 'RP1 Temp',
             fanEfficiency: 'Fan Efficiency',
@@ -137,6 +141,8 @@
             connected: 'Connected',
             inactive: 'Inactive',
             systemNotice: 'System Notice',
+            processDetails: 'Process Details',
+            diagnostics: 'Diagnostics',
             noticeHistory: 'Notice History',
             noNoticeHistory: 'No system notice history.',
             haNotifyHistory: 'HA Notify History',
@@ -250,6 +256,7 @@
             batteryV: '배터리 전압',
             batterySoc: '배터리 SOC',
             sensorHistory: '센서 이력',
+            detailCharts: '상세 차트',
             temperature: '온도',
             rp1Temp: 'RP1 온도',
             fanEfficiency: '팬 효율',
@@ -265,6 +272,8 @@
             connected: '연결 시간',
             inactive: '비활성',
             systemNotice: '시스템 알림',
+            processDetails: '프로세스 상세',
+            diagnostics: '진단',
             noticeHistory: '알림 이력',
             noNoticeHistory: '시스템 알림 이력이 없습니다.',
             haNotifyHistory: 'HA 알림 이력',
@@ -1002,8 +1011,9 @@
     function renderSpikeHistory(rows = []) {
         if (!els.spikeLogList) return;
 
-        els.spikeLogList.innerHTML = rows.length
-            ? rows.map((row, index) => {
+        const visibleRows = rows.slice(0, 3);
+        els.spikeLogList.innerHTML = visibleRows.length
+            ? visibleRows.map((row, index) => {
                 const processText = spikeProcessText(row);
 
                 return `
@@ -1388,6 +1398,17 @@
         chart('batteryVoltageChart', 'BATTERYV', rows, 'battery_voltage', '#14b8a6', 'V', dynamicScale(rows, 'battery_voltage', { minSpan: 0.2, padding: 0.06 }));
     }
 
+    function resizeChartsSoon() {
+        window.setTimeout(() => {
+            Object.values(state.charts).forEach(chartInstance => {
+                if (chartInstance && typeof chartInstance.resize === 'function') {
+                    chartInstance.resize();
+                    chartInstance.update('none');
+                }
+            });
+        }, 80);
+    }
+
     function render(data) {
         renderTop(data);
         renderSystemStatus(data);
@@ -1616,6 +1637,9 @@
     els.dmesgToggle?.addEventListener('click', () => {
         setDmesgOpen(!state.dmesgOpen);
     });
+    [els.secondaryChartDetails, els.processDetails, els.diagnosticDetails].forEach(node => {
+        node?.addEventListener('toggle', resizeChartsSoon);
+    });
     els.rebootBtn?.addEventListener('click', () => {
         requestReboot();
     });