Add description to timeseries

dashboard.py

@@ -126,13 +126,24 @@ class Widget:
                 log.debug("definitely fail")
                 return f"hsl(0, 100%, {brightness}%)"
 
+    @property
+    def description_formatted(self):
+        s = "<table class='description'>"
+        for d, v in self.lts.description.items():
+            if v:
+                s += render_template_string(
+                        "<tr><th>{{d}}:</th><td>{{v}}</td></tr>",
+                        d=d, v=v)
+        s += "</table>"
+        return Markup(s)
 
 class TimeSeries(Widget):
     def __init__(self, d):
         super().__init__(d)
         pass
 
-    def as_html(self):
+    @property
+    def graph(self):
         def t2x(t):
             x = n - math.log((t_last - t) / (n*dt) + 1) * n / k
             return x
@@ -270,6 +281,9 @@ class TimeSeries(Widget):
         html += "</svg>"
         return Markup(html)
 
+    def as_html(self):
+        return Markup(render_template("timeseries.html", widget=self))
+
 class Gauge(Widget):
     def __init__(self, d):
         super().__init__(d)
@@ -311,13 +325,3 @@ class Gauge(Widget):
         self.lastvalue_formatted = Markup(f"<span class='value'>{value:.2f}</span><span class='unit'>{unit}</unit>")
         return Markup(render_template("gauge.html", widget=self))
 
-    @property
-    def description_formatted(self):
-        s = "<table class='description'>"
-        for d, v in self.lts.description.items():
-            if v:
-                s += render_template_string(
-                        "<tr><th>{{d}}:</th><td>{{v}}</td></tr>",
-                        d=d, v=v)
-        s += "</table>"
-        return Markup(s)

templates/dashboard.html

@@ -15,6 +15,7 @@
         display: flex;
         flex-wrap: wrap;
         gap: 2rem;
+        align-items: end;
       }
       .widget {
         border: 1px solid #CCC;
@@ -45,6 +46,13 @@
         position: absolute;
         bottom: 0;
       }
+      .timeseries {
+        display: flex;
+        gap: 1rem;
+        align-items: end;
+        border: 1px solid #CCC;
+        padding: 0.5rem;
+      }
     </style>
 
   </head>

templates/timeseries.html

@@ -0,0 +1,4 @@
+<div class="timeseries">
+  {{ widget.graph }}
+  {{ widget.description_formatted }}
+</div>