remove graph smoothing behavior, add null playerCount support

assets/js/graph.js

@@ -149,7 +149,7 @@ export class GraphDisplayManager {
 
               let playerCount
 
-              if (id >= serverGraphData.length) {
+              if (id >= serverGraphData.length || typeof serverGraphData[id] !== 'number') {
                 playerCount = '-'
               } else {
                 playerCount = formatNumber(serverGraphData[id])

assets/js/scale.js

@@ -38,6 +38,10 @@ export class RelativeScale {
       }
     }
 
+    if (max === Number.MAX_VALUE) {
+      max = 0
+    }
+
     return RelativeScale.scale([0, max], tickCount)
   }
 
@@ -57,14 +61,23 @@ export class RelativeScale {
       let max = Number.MIN_VALUE
 
       for (const point of data) {
-        if (point > max) {
-          max = point
-        }
-        if (point < min) {
-          min = point
+        if (typeof point === 'number') {
+          if (point > max) {
+            max = point
+          }
+          if (point < min) {
+            min = point
+          }
         }
       }
 
+      if (min === Number.MAX_VALUE) {
+        min = 0
+      }
+      if (max === Number.MIN_VALUE) {
+        max = 0
+      }
+
       return [min, max]
     }
   }

assets/js/servers.js

@@ -63,7 +63,7 @@ export class ServerRegistration {
     this._app = app
     this.serverId = serverId
     this.data = data
-    this._graphData = []
+    this._graphData = [[], []]
     this._failedSequentialPings = 0
   }
 
@@ -82,7 +82,16 @@ export class ServerRegistration {
       plugins: [
         uPlotTooltipPlugin((pos, id, plot) => {
           if (pos) {
-            const text = formatNumber(plot.data[1][id]) + ' Players<br>' + formatTimestamp(plot.data[0][id] * 1000)
+            const playerCount = plot.data[1][id]
+
+            if (typeof playerCount !== 'number') {
+              this._app.tooltip.hide()
+
+              return
+            }
+
+            // FIXME: update timestamp schema
+            const text = formatNumber(playerCount) + ' Players<br>' + formatTimestamp(plot.data[0][id] * 1000)
 
             this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
           } else {
@@ -147,23 +156,9 @@ export class ServerRegistration {
   }
 
   handlePing (payload, timestamp) {
-    if (typeof payload.playerCount !== 'undefined') {
+    if (typeof payload.playerCount === 'number') {
       this.playerCount = payload.playerCount
 
-      // Only update graph for successful pings
-      // This intentionally pauses the server graph when pings begin to fail
-      this._graphData[0].push(Math.floor(timestamp / 1000))
-      this._graphData[1].push(this.playerCount)
-
-      // Trim graphData to within the max length by shifting out the leading elements
-      for (const series of this._graphData) {
-        if (series.length > this._app.publicConfig.serverGraphMaxLength) {
-          series.shift()
-        }
-      }
-
-      this.redraw()
-
       // Reset failed ping counter to ensure the next connection error
       // doesn't instantly retrigger a layout change
       this._failedSequentialPings = 0
@@ -174,6 +169,34 @@ export class ServerRegistration {
         this.playerCount = 0
       }
     }
+
+    // Use payload.playerCount so nulls WILL be pushed into the graphing data
+    this._graphData[0].push(Math.floor(timestamp / 1000))
+    this._graphData[1].push(payload.playerCount)
+
+    // Trim graphData to within the max length by shifting out the leading elements
+    for (const series of this._graphData) {
+      if (series.length > this._app.publicConfig.serverGraphMaxLength) {
+        series.shift()
+      }
+    }
+
+    this.redraw()
+
+    if (typeof payload.playerCount !== 'undefined') {
+      this.playerCount = payload.playerCount || 0
+
+      // Use payload.playerCount so nulls WILL be pushed into the graphing data
+      this._graphData[0].push(Math.floor(timestamp / 1000))
+      this._graphData[1].push(payload.playerCount)
+
+      // Trim graphData to within the max length by shifting out the leading elements
+      for (const series of this._graphData) {
+        if (series.length > this._app.publicConfig.serverGraphMaxLength) {
+          series.shift()
+        }
+      }
+    }
   }
 
   redraw () {
@@ -237,13 +260,23 @@ export class ServerRegistration {
     const playerCountLabelElement = document.getElementById('player-count_' + this.serverId)
     const errorElement = document.getElementById('error_' + this.serverId)
 
-    if (ping.error) {
+    if (ping.error || typeof ping.playerCount !== 'number') {
       // Hide any visible player-count and show the error element
       playerCountLabelElement.style.display = 'none'
       errorElement.style.display = 'block'
 
-      errorElement.innerText = ping.error.message
-    } else if (typeof ping.playerCount !== 'undefined') {
+      let errorMessage
+
+      if (ping.error) {
+        errorMessage = ping.error.message
+      } else if (typeof ping.playerCount !== 'number') {
+        // If the frontend has freshly connection, and the server's last ping was in error, it may not contain an error object
+        // In this case playerCount will safely be null, so provide a generic error message instead
+        errorMessage = 'Failed to ping'
+      }
+
+      errorElement.innerText = errorMessage
+    } else if (typeof ping.playerCount === 'number') {
       // Ensure the player-count element is visible and hide the error element
       playerCountLabelElement.style.display = 'block'
       errorElement.style.display = 'none'