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]
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)

View File

@ -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>

View File

@ -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>