table.html: improve average-speed calculation

It now calculates the average over the entire timespan instead of over the timespan in which a
server/client has been seen within the entire timespan. This makes the numbers more comparable to each other.

1 files changed, 34 insertions, 13 deletions

diff --git a/static/table.html b/static/table.html
index 3ff7a0c..c9fd8f6 100644
--- a/static/table.html
+++ b/static/table.html
@@ -103,6 +103,7 @@ var app = new Vue({
     rawData: {},
     serverMap: {},
     timespan: 120,
+    firstTimestamp: undefined,
     peak: false,
     ports: false,
     canvasWidth: 0,
@@ -125,10 +126,33 @@ var app = new Vue({
         }
       })
       return servers
+    },
+    timespanStartTime () {
+      return Math.min(this.firstTimestamp, this.rawData.timestamp - this.timespan * 1000)
     }
   },
   watch: {
     rawData () {
+      if (!this.firstTimestamp) this.firstTimestamp = this.rawData.timestamp
+
+      // Remove outdated values
+      for (let serverIp in this.serverMap) {
+        const server = this.serverMap[serverIp]
+        server.log = server.log.filter(x => x.timestamp > this.timespanStartTime)
+        if (server.log.length === 0) {
+          this.smoothie.removeTimeSeries(server.graphLine)
+          this.graphColors.unshift(server.graphColor)
+          Vue.delete(this.serverMap, serverIp)
+        } else {
+          for (let clientIp in server.clientMap) {
+            const client = server.clientMap[clientIp]
+            client.log = client.log.filter(x => x.timestamp > this.timespanStartTime)
+            if (client.log.length === 0) Vue.delete(server.clientMap, clientIp)
+          }
+        }
+      }
+
+      // Process new data
       if (this.rawData.servers) {
         this.rawData.servers.forEach(serverData => {
           // Update server
@@ -146,6 +170,7 @@ var app = new Vue({
           }
           server.log.push(serverData)
           this.calcSpeed(server, serverData)
+          server.updated = true
           server.graphLine.append(server.timestamp, server.uploadSpeed)
 
           // Update clients
@@ -156,24 +181,20 @@ var app = new Vue({
             client = server.clientMap[clientData.address]
             client.log.push(clientData)
             this.calcSpeed(client, clientData)
+            client.updated = true
           })
         })
       }
 
-      // Remove outdated values
+      // Calculate speed of servers/clients not included in the latest data
       for (let serverIp in this.serverMap) {
         const server = this.serverMap[serverIp]
-        server.log = server.log.filter(x => x.timestamp > this.rawData.timestamp - this.timespan * 1000)
-        if (server.log.length === 0) {
-          this.smoothie.removeTimeSeries(server.graphLine)
-          this.graphColors.unshift(server.graphColor)
-          Vue.delete(this.serverMap, serverIp)
-        } else {
-          for (let clientIp in server.clientMap) {
-            const client = server.clientMap[clientIp]
-            client.log = client.log.filter(x => x.timestamp > this.rawData.timestamp - this.timespan * 1000)
-            if (client.log.length === 0) Vue.delete(server.clientMap, clientIp)
-          }
+        if (server.updated) server.updated = false
+        else this.calcSpeed(server, {})
+        for (let clientIp in server.clientMap) {
+          const client = server.clientMap[clientIp]
+          if (client.updated) client.updated = false
+          else this.calcSpeed(client, {})
         }
       }
     }
@@ -200,8 +221,8 @@ var app = new Vue({
       objData.peakDownloadSpeed = Math.max(...obj.log.map(x => x.downloadSpeed || 0))
 
       // Calculate average speeds
+      time = (this.rawData.timestamp - this.timespanStartTime) / 1000
       a = obj.log[0]
-      time = (b.timestamp - a.timestamp) / 1000
       objData.avgUploadSpeed = (b.bytesSent - a.bytesSent) / time
       objData.avgDownloadSpeed = (b.bytesReceived - a.bytesReceived) / time