Color data points in timeseries according to their criticality
This commit is contained in:
parent
5dec92d736
commit
f272b1ba95
36
dashboard.py
36
dashboard.py
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue