Color data points in timeseries according to their criticality

This commit is contained in:
Peter J. Holzer 2022-12-30 20:48:39 +01:00 committed by Peter J. Holzer
parent 5dec92d736
commit f272b1ba95
3 changed files with 25 additions and 17 deletions

View File

@ -74,26 +74,27 @@ class Widget:
self.lastvalue = self.lts.data[-1][1] self.lastvalue = self.lts.data[-1][1]
return Markup(render_template("widget.html", widget=self)) return Markup(render_template("widget.html", widget=self))
@property def criticalcolor(self, value=None):
def criticalcolor(self): if value == None:
value = self.lastvalue
log.debug("stops = %s", self.stops) log.debug("stops = %s", self.stops)
brightness = 30 brightness = 30
if self.stops[0] < self.stops[2]: if self.stops[0] < self.stops[2]:
if self.lastvalue < self.stops[0]: if value < self.stops[0]:
log.debug("definitely ok") log.debug("definitely ok")
return f"hsl(120, 100%, {brightness}%)" return f"hsl(120, 100%, {brightness}%)"
elif self.lastvalue < self.stops[1]: elif value < self.stops[1]:
log.debug("mostly ok") log.debug("mostly ok")
hue = 120 - round( hue = 120 - round(
(self.lastvalue - self.stops[0]) (value - self.stops[0])
/ (self.stops[1] - self.stops[0]) / (self.stops[1] - self.stops[0])
* 60 * 60
) )
return f"hsl({hue}, 100%, {brightness}%)" return f"hsl({hue}, 100%, {brightness}%)"
elif self.lastvalue < self.stops[2]: elif value < self.stops[2]:
log.debug("maybe fail") log.debug("maybe fail")
hue = 60 - round( hue = 60 - round(
(self.lastvalue - self.stops[1]) (value - self.stops[1])
/ (self.stops[2] - self.stops[1]) / (self.stops[2] - self.stops[1])
* 60 * 60
) )
@ -103,21 +104,21 @@ class Widget:
return f"hsl(0, 100%, {brightness}%)" return f"hsl(0, 100%, {brightness}%)"
else: else:
log.debug("the other side") log.debug("the other side")
if self.lastvalue > self.stops[0]: if value > self.stops[0]:
log.debug("definitely ok") log.debug("definitely ok")
return f"hsl(120, 100%, {brightness}%)" return f"hsl(120, 100%, {brightness}%)"
elif self.lastvalue > self.stops[1]: elif value > self.stops[1]:
log.debug("mostly ok") log.debug("mostly ok")
hue = 120 - round( hue = 120 - round(
(self.lastvalue - self.stops[0]) (value - self.stops[0])
/ (self.stops[1] - self.stops[0]) / (self.stops[1] - self.stops[0])
* 60 * 60
) )
return f"hsl({hue}, 100%, {brightness}%)" return f"hsl({hue}, 100%, {brightness}%)"
elif self.lastvalue > self.stops[2]: elif value > self.stops[2]:
log.debug("maybe fail") log.debug("maybe fail")
hue = 60 - round( hue = 60 - round(
(self.lastvalue - self.stops[1]) (value - self.stops[1])
/ (self.stops[2] - self.stops[1]) / (self.stops[2] - self.stops[1])
* 60 * 60
) )
@ -162,7 +163,14 @@ class TimeSeries(Widget):
x = t2x(t) x = t2x(t)
t_h = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(t)) t_h = time.strftime("%Y-%m-%d %H:%M:%S", time.localtime(t))
#print(t, t_h, x) #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 = [] tickmarks = []
t = v_data[-1]["t"] 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"<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>" html += f"<text x=1005 y={tm['y']} fill='#888'>{tm['v_h']}</text>"
for v in v_data: 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>" html += "</svg>"
return Markup(html) return Markup(html)

View File

@ -3,11 +3,11 @@
style="height: {{widget.gaugesize}}px"> style="height: {{widget.gaugesize}}px">
<div class="gauge-indicator" <div class="gauge-indicator"
style="height: {{widget.gaugepos}}px; style="height: {{widget.gaugepos}}px;
background-color: {{widget.criticalcolor}}"> background-color: {{widget.criticalcolor()}}">
</div> </div>
</div> </div>
<div> <div>
<span style="color: {{widget.criticalcolor}}"> <span style="color: {{widget.criticalcolor()}}">
{{ widget.lastvalue_formatted}} {{ widget.lastvalue_formatted}}
</span> </span>
</div> </div>

View File

@ -2,7 +2,7 @@
<p>Unknown widget type {{ widget.type }}.</p> <p>Unknown widget type {{ widget.type }}.</p>
<p> <p>
Last value: Last value:
<span class="value" style="color: {{widget.criticalcolor}}">{{ widget.lastvalue}}</span> <span class="value" style="color: {{widget.criticalcolor()}}">{{ widget.lastvalue}}</span>
</p> </p>
</div> </div>