From f272b1ba95863ad621483b266b954e50082665c3 Mon Sep 17 00:00:00 2001
From: "Peter J. Holzer" <hjp@hjp.at>
Date: Fri, 30 Dec 2022 20:48:39 +0100
Subject: [PATCH] Color data points in timeseries according to their
 criticality

---
 dashboard.py          | 36 ++++++++++++++++++++++--------------
 templates/gauge.html  |  4 ++--
 templates/widget.html |  2 +-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/dashboard.py b/dashboard.py
index 816e375..6fea2f2 100644
--- a/dashboard.py
+++ b/dashboard.py
@@ -74,26 +74,27 @@ class Widget:
         self.lastvalue = self.lts.data[-1][1]
         return Markup(render_template("widget.html", widget=self))
 
-    @property
-    def criticalcolor(self):
+    def criticalcolor(self, value=None):
+        if value == None:
+            value = self.lastvalue
         log.debug("stops = %s", self.stops)
         brightness = 30
         if self.stops[0] < self.stops[2]:
-            if self.lastvalue < self.stops[0]:
+            if value < self.stops[0]:
                 log.debug("definitely ok")
                 return f"hsl(120, 100%, {brightness}%)"
-            elif self.lastvalue < self.stops[1]:
+            elif value < self.stops[1]:
                 log.debug("mostly ok")
                 hue = 120 - round(
-                                (self.lastvalue - self.stops[0])
+                                (value - self.stops[0])
                               / (self.stops[1] - self.stops[0])
                               * 60
                             )
                 return f"hsl({hue}, 100%, {brightness}%)"
-            elif self.lastvalue < self.stops[2]:
+            elif value < self.stops[2]:
                 log.debug("maybe fail")
                 hue =  60 - round(
-                                (self.lastvalue - self.stops[1])
+                                (value - self.stops[1])
                               / (self.stops[2] - self.stops[1])
                               * 60
                             )
@@ -103,21 +104,21 @@ class Widget:
                 return f"hsl(0, 100%, {brightness}%)"
         else:
             log.debug("the other side")
-            if self.lastvalue > self.stops[0]:
+            if value > self.stops[0]:
                 log.debug("definitely ok")
                 return f"hsl(120, 100%, {brightness}%)"
-            elif self.lastvalue > self.stops[1]:
+            elif value > self.stops[1]:
                 log.debug("mostly ok")
                 hue = 120 - round(
-                                (self.lastvalue - self.stops[0])
+                                (value - self.stops[0])
                               / (self.stops[1] - self.stops[0])
                               * 60
                             )
                 return f"hsl({hue}, 100%, {brightness}%)"
-            elif self.lastvalue > self.stops[2]:
+            elif value > self.stops[2]:
                 log.debug("maybe fail")
                 hue =  60 - round(
-                                (self.lastvalue - self.stops[1])
+                                (value - self.stops[1])
                               / (self.stops[2] - self.stops[1])
                               * 60
                             )
@@ -162,7 +163,14 @@ class TimeSeries(Widget):
             x = t2x(t)
             t_h = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(t))
             #print(t, t_h, x)
-            v_data.append({"t": t, "v": data[i][1], "x": x, "y": (1 - data[i][1]/max_value) * 200})
+            v_data.append(
+                    {
+                        "t": t,
+                        "v": data[i][1],
+                        "x": x,
+                        "y": (1 - data[i][1]/max_value) * 200,
+                        "color": self.criticalcolor(data[i][1]),
+                    })
 
         tickmarks = []
         t = v_data[-1]["t"]
@@ -317,7 +325,7 @@ class TimeSeries(Widget):
             html += f"<line x1=0 y1={tm['y']} x2=1000 y2={tm['y']} stroke='#CCC' />"
             html += f"<text x=1005 y={tm['y']} fill='#888'>{tm['v_h']}</text>"
         for v in v_data:
-            html += f"<circle cx={v['x']} cy={v['y']} r=3 fill='#00F' />"
+            html += f"<circle cx={v['x']} cy={v['y']} r=3 fill='{v['color']}' />"
         html += "</svg>"
         return Markup(html)
 
diff --git a/templates/gauge.html b/templates/gauge.html
index 9deb2d7..c263c1e 100644
--- a/templates/gauge.html
+++ b/templates/gauge.html
@@ -3,11 +3,11 @@
        style="height: {{widget.gaugesize}}px">
     <div class="gauge-indicator"
          style="height: {{widget.gaugepos}}px;
-                background-color: {{widget.criticalcolor}}">
+                background-color: {{widget.criticalcolor()}}">
     </div>
   </div>
   <div>
-    <span style="color: {{widget.criticalcolor}}">
+    <span style="color: {{widget.criticalcolor()}}">
       {{ widget.lastvalue_formatted}}
     </span>
   </div>
diff --git a/templates/widget.html b/templates/widget.html
index d3736dc..cb1f799 100644
--- a/templates/widget.html
+++ b/templates/widget.html
@@ -2,7 +2,7 @@
   <p>Unknown widget type {{ widget.type }}.</p>
   <p>
     Last value:
-    <span class="value" style="color: {{widget.criticalcolor}}">{{ widget.lastvalue}}</span>
+    <span class="value" style="color: {{widget.criticalcolor()}}">{{ widget.lastvalue}}</span>
   </p>
 
 </div>