webapp: show precise data age for inverters

since we reduced the DTU polling interval minimum value, it is desirable to have the data age value increment at the right time point, which is dependent on the sub-second data age when the data was crafted.
hoylabs · Dec 7, 2024 · 4cfc891 · 4cfc891
1 parent 55a8ad5
commit 4cfc891
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/src/WebApi_ws_live.cpp b/src/WebApi_ws_live.cpp
@@ -235,7 +235,7 @@ void WebApiWsLiveClass::generateInverterCommonJsonResponse(JsonObject& root, std
     root["serial"] = inv->serialString();
     root["name"] = inv->name();
     root["order"] = inv_cfg->Order;
-    root["data_age"] = (millis() - inv->Statistics()->getLastUpdate()) / 1000;
+    root["data_age_ms"] = millis() - inv->Statistics()->getLastUpdate();
     root["poll_enabled"] = inv->getEnablePolling();
     root["reachable"] = inv->isReachable();
     root["producing"] = inv->isProducing();

diff --git a/webapp/src/types/LiveDataStatus.ts b/webapp/src/types/LiveDataStatus.ts
@@ -35,7 +35,7 @@ export interface Inverter {
     serial: string;
     name: string;
     order: number;
-    data_age: number;
+    data_age_ms: number;
     poll_enabled: boolean;
     reachable: boolean;
     producing: boolean;

diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
@@ -96,9 +96,9 @@
                                     </div>
                                     <div style="padding-right: 2em">
                                         {{ $t('home.DataAge') }}
-                                        {{ $t('home.Seconds', { val: $n(inverter.data_age) }) }}
-                                        <template v-if="inverter.data_age > 300">
-                                            / {{ calculateAbsoluteTime(inverter.data_age) }}
+                                        {{ $t('home.Seconds', { val: $n(Math.floor(inverter.data_age_ms / 1000)) }) }}
+                                        <template v-if="inverter.data_age_ms > 300000">
+                                            / {{ calculateAbsoluteTime(inverter.data_age_ms) }}
                                         </template>
                                     </div>
                                 </div>
@@ -574,7 +574,7 @@ export default defineComponent({
 
             socket: {} as WebSocket,
             heartInterval: 0,
-            dataAgeInterval: 0,
+            dataAgeTimers: {} as Record<string, number>,
             dataLoading: true,
             liveData: {} as LiveData,
             isFirstFetchAfterConnect: true,
@@ -619,7 +619,6 @@ export default defineComponent({
     created() {
         this.getInitialData();
         this.initSocket();
-        this.initDataAgeing();
         this.$emitter.on('logged-in', () => {
             this.isLogged = this.isLoggedIn();
         });
@@ -739,8 +738,10 @@ export default defineComponent({
                     );
                     if (foundIdx == -1) {
                         Object.assign(this.liveData.inverters, newData.inverters);
+                        this.liveData.inverters.forEach((inv) => this.resetDataAging(inv));
                     } else {
                         Object.assign(this.liveData.inverters[foundIdx], newData.inverters[0]);
+                        this.resetDataAging(this.liveData.inverters[foundIdx]);
                     }
                     this.dataLoading = false;
                     this.heartCheck(); // Reset heartbeat detection
@@ -767,13 +768,26 @@ export default defineComponent({
                 this.closeSocket();
             };
         },
-        initDataAgeing() {
-            this.dataAgeInterval = setInterval(() => {
-                if (this.inverterData) {
-                    this.inverterData.forEach((element) => {
-                        element.data_age++;
-                    });
-                }
+        resetDataAging(inv: Inverter) {
+            if (this.dataAgeTimers[inv.serial] !== undefined) {
+                clearTimeout(this.dataAgeTimers[inv.serial]);
+            }
+
+            const nextMs = 1000 - (inv.data_age_ms % 1000);
+            this.dataAgeTimers[inv.serial] = setTimeout(() => {
+                this.doDataAging(inv.serial);
+            }, nextMs);
+        },
+        doDataAging(serial: string) {
+            const inv = this.liveData?.inverters?.find((inv) => inv.serial === serial);
+            if (inv === undefined) {
+                return;
+            }
+
+            inv.data_age_ms += 1000;
+
+            this.dataAgeTimers[serial] = setTimeout(() => {
+                this.doDataAging(serial);
             }, 1000);
         },
         // Send heartbeat packets regularly * 59s Send a heartbeat
@@ -952,7 +966,7 @@ export default defineComponent({
                 });
         },
         calculateAbsoluteTime(lastTime: number): string {
-            const date = new Date(Date.now() - lastTime * 1000);
+            const date = new Date(Date.now() - lastTime);
             return this.$d(date, 'datetime');
         },
         getSumIrridiation(inv: Inverter): number {