span plot gaps, change selection color, hide points

assets/css/main.css

@@ -451,3 +451,9 @@ footer a:hover {
     margin-bottom: 20px;
   }
 }
+
+/* uPlot.css overrides */
+.uplot .select {
+  background: var(--color-blue);
+  opacity: 0.3;
+}

assets/js/graph.js

@@ -151,7 +151,11 @@ export class GraphDisplayManager {
         stroke: serverRegistration.data.color,
         width: 2,
         value: (_, raw) => formatNumber(raw) + ' Players',
-        show: serverRegistration.isVisible
+        show: serverRegistration.isVisible,
+        spanGaps: true,
+        points: {
+          show: false
+        }
       }
     })
 
@@ -397,9 +401,15 @@ export class GraphDisplayManager {
   }
 
   reset () {
+    // Destroy graphs and unload references
+    // uPlot#destroy handles listener de-registration, DOM reset, etc
+    if (this._plotInstance) {
+      this._plotInstance.destroy()
+      this._plotInstance = undefined
+    }
+
     this._graphTimestamps = []
     this._graphData = []
-    this._plotInstance = undefined
     this._hasLoadedSettings = false
 
     // Fire #clearTimeout if the timeout is currently defined
@@ -410,7 +420,6 @@ export class GraphDisplayManager {
     }
 
     // Reset modified DOM structures
-    document.getElementById('big-graph').innerHTML = ''
     document.getElementById('big-graph-checkboxes').innerHTML = ''
     document.getElementById('big-graph-controls').style.display = 'none'
 

assets/js/servers.js

@@ -116,7 +116,10 @@ export class ServerRegistration {
           scale: 'Players',
           stroke: '#E9E581',
           width: 2,
-          value: (_, raw) => formatNumber(raw) + ' Players'
+          value: (_, raw) => formatNumber(raw) + ' Players',
+          points: {
+            show: false
+          }
         }
       ],
       axes: [