From 61b144efd235b0ea71651cb32e15cc301e090109 Mon Sep 17 00:00:00 2001
From: serversdown <brian@serversdown.net>
Date: Tue, 9 Jun 2026 19:07:42 +0000
Subject: [PATCH] feat(slm): plot L1/L10 lines on the live chart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The L1/L10 cards populated, but the chart only had Lp + Leq datasets, so
the percentiles weren't drawn. Add L1 (violet) and L10 (amber) lines —
pushed/shifted/cleared alongside Lp/Leq — so the chart shows all four.

(Legend labels are hardcoded L1/L10, matching the default percentile slots;
dynamic ln1_label/ln2_label on the chart is a follow-up if a job reconfigures
the device's Ln slots.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 templates/partials/slm_live_view.html | 33 ++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/templates/partials/slm_live_view.html b/templates/partials/slm_live_view.html
index aa19a3b..e9d8a0f 100644
--- a/templates/partials/slm_live_view.html
+++ b/templates/partials/slm_live_view.html
@@ -434,6 +434,24 @@ function initializeChart() {
                 tension: 0.3,
                 borderWidth: 2,
                 pointRadius: 0
+            },
+            {
+                label: 'L1',
+                data: [],
+                borderColor: 'rgb(139, 92, 246)',
+                backgroundColor: 'rgba(139, 92, 246, 0.1)',
+                tension: 0.3,
+                borderWidth: 2,
+                pointRadius: 0
+            },
+            {
+                label: 'L10',
+                data: [],
+                borderColor: 'rgb(245, 158, 11)',
+                backgroundColor: 'rgba(245, 158, 11, 0.1)',
+                tension: 0.3,
+                borderWidth: 2,
+                pointRadius: 0
             }
         ]
     },
@@ -506,11 +524,12 @@ function initLiveDataStream(unitId) {
         window.chartData.timestamps = [];
         window.chartData.lp = [];
         window.chartData.leq = [];
+        window.chartData.ln1 = [];
+        window.chartData.ln2 = [];
     }
     if (window.liveChart && window.liveChart.data && window.liveChart.data.datasets) {
         window.liveChart.data.labels = [];
-        window.liveChart.data.datasets[0].data = [];
-        window.liveChart.data.datasets[1].data = [];
+        window.liveChart.data.datasets.forEach(ds => ds.data = []);
         window.liveChart.update();
     }
 
@@ -615,7 +634,9 @@ if (typeof window.chartData === 'undefined') {
     window.chartData = {
         timestamps: [],
         lp: [],
-        leq: []
+        leq: [],
+        ln1: [],
+        ln2: []
     };
 }
 
@@ -625,12 +646,16 @@ function updateLiveChart(data) {
     window.chartData.timestamps.push(now.toLocaleTimeString());
     window.chartData.lp.push(parseFloat(data.lp || 0));
     window.chartData.leq.push(parseFloat(data.leq || 0));
+    window.chartData.ln1.push(parseFloat(data.ln1 || 0));
+    window.chartData.ln2.push(parseFloat(data.ln2 || 0));
 
     // Keep only last 60 data points
     if (window.chartData.timestamps.length > 60) {
         window.chartData.timestamps.shift();
         window.chartData.lp.shift();
         window.chartData.leq.shift();
+        window.chartData.ln1.shift();
+        window.chartData.ln2.shift();
     }
 
     // Update chart if available
@@ -638,6 +663,8 @@ function updateLiveChart(data) {
         window.liveChart.data.labels = window.chartData.timestamps;
         window.liveChart.data.datasets[0].data = window.chartData.lp;
         window.liveChart.data.datasets[1].data = window.chartData.leq;
+        window.liveChart.data.datasets[2].data = window.chartData.ln1;
+        window.liveChart.data.datasets[3].data = window.chartData.ln2;
         window.liveChart.update('none');
     }
 }