Update graphing code

gui/components/common/Graph.svelte

@@ -16,7 +16,7 @@
   import 'chartjs-adapter-dayjs-4';
   import { _ } from 'svelte-i18n';
 
-  import { smoothing } from '../../helpers/graph-helpers';
+  import { smoothing, extendGraphData, convertTimestamps } from '../../helpers/graph-helpers';
   import { graphDefaultOpts, graphTypes } from '../../constants/graph';
   import { fetchGraphData } from '../../providers/api';
   import { graphs, updateSensor } from '../../stores/terrariumpi';
@@ -61,22 +61,15 @@
     }
 
     if (['wattage', 'magnetic', 'motion', 'ldr', 'remote'].indexOf(type) !== -1) {
-      // Add a duplicate record on the 'end' with the current time stamp. This will keep the graph updating at every refresh
-      let last_item = new_data[new_data.length - 1];
-      last_item.timestamp = new Date();
-      new_data.push(last_item);
+        new_data = extendGraphData(new_data);
     }
 
+    // if (['relays', 'buttons'].indexOf(mode) !== -1) {
+    //     new_data = extendGraphData(new_data);
+    // }
+
     if (mode === 'sensors' && settings.graph_smooth_value > 0) {
-      let smoothed_data = smoothing(
-        new_data.map((point) => {
-          return point.value;
-        }),
-        settings.graph_smooth_value,
-      );
-      for (let counter = 0; counter < new_data.length; counter++) {
-        new_data[counter].value = smoothed_data[counter];
-      }
+      new_data = smoothing(new_data, settings.graph_smooth_value);
     }
 
     if (init) {
@@ -192,10 +185,7 @@
           id,
           $graphs[id].period,
           (data) =>
-            (new_data = data.map((point) => {
-              point.timestamp *= 1000;
-              return point;
-            })),
+            (new_data = convertTimestamps(data)),
         );
         nodata = new_data.length === 0;
 
@@ -221,10 +211,7 @@
           id,
           $graphs[id].period,
           (data) =>
-            (new_data = data.map((point) => {
-              point.timestamp *= 1000;
-              return point;
-            })),
+            (new_data = convertTimestamps(data)),
         );
         nodata = new_data.length === 0;
 

gui/helpers/graph-helpers.js

@@ -3,16 +3,26 @@ import { get } from 'svelte/store';
 import { fetchExportData } from '../providers/api';
 
 // https://stackoverflow.com/a/63348486
-export const smoothing = (array, countBefore, countAfter) => {
-  countAfter = countAfter || 0;
-
-  const result = [];
-  for (let i = 0; i < array.length; i++) {
-    const subArr = array.slice(Math.max(i - countBefore, 0), Math.min(i + countAfter + 1, array.length));
-    const avg = subArr.reduce((a, b) => a + (isNaN(b) ? 0 : b), 0) / subArr.length;
-    result.push(avg);
+export const smoothing = (data, smoothingValue) => {
+  if (smoothingValue == 0) {
+    return data;
   }
-  return result;
+
+  const countBefore = Math.round(smoothingValue/2);
+  const countAfter = smoothingValue - countBefore;
+  const new_data = [];
+
+  for (let i = 0; i < data.length; i++) {
+
+    const range = data.slice(Math.max(i - countBefore, 0), Math.min(i + countAfter + 1, data.length));
+    const new_data_point = structuredClone(data[i]);
+
+    new_data_point.value = range.reduce((a, b) => a.value + (isNaN(b) ? a.value : b.value), 0) / range.length;
+    new_data.push(new_data_point);
+
+  }
+
+  return new_data;
 };
 
 export const toggleGraphPeriod = (graph, period) => {
@@ -24,6 +34,26 @@ export const toggleGraphPeriod = (graph, period) => {
   graphs.set(store);
 };
 
+export const convertTimestamps = (data) => {
+    return data.map((point) => {
+        point.timestamp *= 1000;
+        return point;
+      });
+}
+
+export const extendGraphData = (data) => {
+    let now = new Date();
+
+    let end = structuredClone(data[data.length-1]);
+    end.timestamp = Math.round(now.getTime() / 1000);
+
+    now.setDate(now.getDate() - 1);
+    let start = structuredClone(data[0]);
+    start.timestamp = Math.round(now.getTime() / 1000);
+
+    return [start,...data,end]
+}
+
 export const exportGraphPeriod = async (type, graph) => {
   const store = get(graphs);
   const filename = `terrariumpi_export_${type}_${graph}_${store[graph].period}.csv`;