From b3ea340bbdee4c760d50f879684814843e19f4b1 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Sun, 9 Aug 2026 17:56:30 +0700
Subject: [PATCH] fix: fix chart reuse error and harden flood-bands plugin

---
 src/static/dashboard.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 941e393..8590509 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -320,6 +320,7 @@
         state.selectedStation = stationCode;
         $('history-title').textContent = `${stationCode} · PostgreSQL history`;
         $('history-status').textContent = 'Loading historical measurements…';
+        if (state.historyChart) { state.historyChart.destroy(); state.historyChart = null; }
         try {
             const response = await fetch(`/measurements/history/${encodeURIComponent(stationCode)}?hours=${$('history-range').value}`);
             if (!response.ok) throw new Error((await response.json()).detail || `HTTP ${response.status}`);
@@ -345,8 +346,6 @@
             };
 
             const sampled = rows.length > 2000 ? downsample(rows) : rows;
-
-            if (state.historyChart) state.historyChart.destroy();
             state.historyChart = new Chart($('history-chart'), {
                 type: 'line',
                 data: {
@@ -366,18 +365,19 @@
                     },
                     plugins: [{
                         id: 'flood-bands',
-                        beforeDraw(chart) {
-                            const { ctx, scales, chartArea } = chart;
-                            const levelScale = scales.level;
+                        beforeDraw(chart, _args, options) {
+                            const levelScale = chart.scales?.level;
+                            if (!levelScale || levelScale.min == null) return;
                             const zones = [
-                                { min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },   // normal
-                                { min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },           // warning
-                                { min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },  // danger
+                                { min: levelScale.min, max: 3.0, color: 'rgba(30,139,96,.08)' },
+                                { min: 3.0, max: 4.5, color: 'rgba(217,144,24,.12)' },
+                                { min: 4.5, max: levelScale.max, color: 'rgba(204,75,55,.15)' },
                             ];
                             zones.forEach((z) => {
                                 const top = levelScale.getPixelForValue(Math.min(z.max, levelScale.max));
                                 const bottom = levelScale.getPixelForValue(Math.max(z.min, levelScale.min));
-                                if (top < bottom) {
+                                if (bottom > top) {
+                                    const { ctx, chartArea } = chart;
                                     ctx.save();
                                     ctx.fillStyle = z.color;
                                     ctx.fillRect(chartArea.left, top, chartArea.right - chartArea.left, bottom - top);