ChartWidget: extend (non-aggregated) graphs to current time

mhthies · Dec 25, 2023 · f4c98a4 · f4c98a4
1 parent 80d6abd
commit f4c98a4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/shc/web/log_widgets.py b/shc/web/log_widgets.py
@@ -215,10 +215,12 @@ def __init__(self, interval: datetime.timedelta,  data_spec: List[ChartDataSpec]
                                          include_previous=True)
             self.connectors.append(connector)
             self.row_specs.append({'id': id(connector),
-                                   'is_aggregated': is_aggregated,
+                                   'stepped_graph': is_aggregated,
+                                   'show_points': is_aggregated,
                                    'color': spec.color if spec.color is not None else self.COLORS[i % len(self.COLORS)],
                                    'label': spec.label,
-                                   'unit_symbol': spec.unit_symbol})
+                                   'unit_symbol': spec.unit_symbol,
+                                   'extend_graph_to_now': not is_aggregated})
 
     async def render(self) -> str:
         return await jinja_env.get_template('log/chart.htm').render_async(

diff --git a/web_ui_src/widgets/log_widgets.js b/web_ui_src/widgets/log_widgets.js
@@ -160,12 +160,12 @@ function LineChartWidget(domElement, _writeValue) {
             borderColor: `rgba(${spec.color[0]}, ${spec.color[1]}, ${spec.color[2]}, .5)`,
             pointBackgroundColor: `rgba(${spec.color[0]}, ${spec.color[1]}, ${spec.color[2]}, 0.5)`,
             pointBorderColor: `rgba(${spec.color[0]}, ${spec.color[1]}, ${spec.color[2]}, 0.5)`,
-            stepped: spec.is_aggregated ? undefined : 'before',
-            pointRadius: spec.is_aggregated ? 3 : 0,
+            stepped: spec.stepped_graph ? undefined : 'before',
+            pointRadius: spec.show_points ? 3 : 0,
             pointHitRadius: 3,
             tension: 0.2,
         });
-        dataMap.set(spec.id, data);
+        dataMap.set(spec.id, [data, spec]);
     }
 
     // Initialize chart
@@ -231,6 +231,12 @@ function LineChartWidget(domElement, _writeValue) {
         }
         theChart.data.labels = ticks;
 
+        for ([i, dataset] of theChart.data.datasets.entries()) {
+            if (seriesSpec[i].extend_graph_to_now && dataset.data.length > 0) {
+                dataset.data[dataset.data.length - 1].x = new Date(new Date().getTime() + 10000);
+            }
+        }
+
         theChart.update();
     }
 
@@ -272,7 +278,7 @@ function LineChartWidget(domElement, _writeValue) {
     }, Math.max(interval / 500, 5000));
 
     this.update = function(value, for_id) {
-        let data = dataMap.get(for_id);
+        let [data, spec] = dataMap.get(for_id);
 
         // Full initialization after (re)connect
         if (value['init']) {
@@ -283,9 +289,18 @@ function LineChartWidget(domElement, _writeValue) {
                     y: row[1]
                 });
             }
+            if (spec.extend_graph_to_now && data.length > 0) {
+                data.push({
+                    x: new Date(new Date().getTime() + 10000),
+                    y: data[data.length - 1].y
+                });
+            }
 
         // Incremental update
         } else {
+            if (data.length && spec.extend_graph_to_now) {
+                data.pop();
+            }
             let lastEntry = data.length ? data[data.length - 1] : null;
             for (let row of value['data']) {
                 let timestamp = Date.parse(row[0]);
@@ -305,6 +320,12 @@ function LineChartWidget(domElement, _writeValue) {
                     console.warn(`chart update ${row} ignored, since it is older than the current last row`);
                 }
             }
+            if (spec.extend_graph_to_now && data.length > 0) {
+                data.push({
+                    x: new Date(new Date().getTime() + 10000),
+                    y: data[data.length - 1].y
+                });
+            }
         }
         shiftAndUpdate();
     };