impl updated graph tooltips

assets/css/main.css

@@ -263,24 +263,6 @@ footer a:hover {
   display: inline-block;
 }
 
-.server .column-status .server-is-favorite {
-  cursor: pointer;
-  color: var(--color-gold);
-}
-
-.server .column-status .server-is-favorite:hover::before {
-  content: "\f006";
-}
-
-.server .column-status .server-is-not-favorite {
-  cursor: pointer;
-  color: var(--background-color);
-}
-
-.server .column-status .server-is-not-favorite:hover {
-  color: var(--color-gold);
-}
-
 .server .column-status .server-error {
   display: none;
   color: #e74c3c;
@@ -302,6 +284,25 @@ footer a:hover {
   width: 400px;
 }
 
+/* Favorite icons */
+.server-is-favorite {
+  cursor: pointer;
+  color: var(--color-gold);
+}
+
+.server-is-favorite:hover::before {
+  content: "\f006";
+}
+
+.server-is-not-favorite {
+  cursor: pointer;
+  color: var(--background-color);
+}
+
+.server-is-not-favorite:hover {
+  color: var(--color-gold);
+}
+
 /* Highlighted values */
 .server-highlighted-label {
   font-size: 18px;

assets/js/graph.js

@@ -115,6 +115,13 @@ export class GraphDisplayManager {
     }
   }
 
+  getGraphDataPoint (serverId, index) {
+    const graphData = this._graphData[serverId]
+    if (graphData && index < graphData.length && typeof graphData[index] === 'number') {
+      return graphData[index]
+    }
+  }
+
   buildPlotInstance (timestamps, data) {
     // Lazy load settings from localStorage, if any and if enabled
     if (!this._hasLoadedSettings) {
@@ -141,25 +148,44 @@ export class GraphDisplayManager {
     // eslint-disable-next-line new-cap
     this._plotInstance = new uPlot({
       plugins: [
-        uPlotTooltipPlugin((pos, id, plot) => {
+        uPlotTooltipPlugin((pos, id) => {
           if (pos) {
-            // FIXME
-            let text = '<strong>' + formatTimestampSeconds(this._graphTimestamps[id]) + '</strong><br><br>'
+            let text = this._app.serverRegistry.getServerRegistrations()
+              .filter(serverRegistration => serverRegistration.isVisible)
+              .sort((a, b) => {
+                if (a.isFavorite !== b.isFavorite) {
+                  return a.isFavorite ? -1 : 1
+                }
 
-            for (let i = 1; i < plot.series.length; i++) {
-              const serverRegistration = this._app.serverRegistry.getServerRegistration(i - 1)
-              const serverGraphData = this._graphData[serverRegistration.serverId]
+                const aPoint = this.getGraphDataPoint(a.serverId, id)
+                const bPoint = this.getGraphDataPoint(b.serverId, id)
 
-              let playerCount
+                if (typeof aPoint === typeof bPoint) {
+                  if (typeof aPoint === 'undefined') {
+                    return 0
+                  }
+                } else {
+                  return typeof aPoint === 'number' ? -1 : 1
+                }
 
-              if (id >= serverGraphData.length || typeof serverGraphData[id] !== 'number') {
-                playerCount = '-'
-              } else {
-                playerCount = formatNumber(serverGraphData[id])
-              }
+                return bPoint - aPoint
+              })
+              .map(serverRegistration => {
+                const point = this.getGraphDataPoint(serverRegistration.serverId, id)
 
-              text += serverRegistration.data.name + ': ' + playerCount + '<br>'
-            }
+                let serverName = serverRegistration.data.name
+                if (serverRegistration.isFavorite) {
+                  serverName = '<span class="' + this._app.favoritesManager.getIconClass(true) + '"></span> ' + serverName
+                }
+
+                if (typeof point === 'number') {
+                  return serverName + ': ' + formatNumber(point)
+                } else {
+                  return serverName + ': -'
+                }
+              }).join('<br>')
+
+            text += '<br><br><strong>' + formatTimestampSeconds(this._graphTimestamps[id]) + '</strong>'
 
             this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
           } else {

assets/js/servers.js

@@ -80,19 +80,17 @@ export class ServerRegistration {
     // eslint-disable-next-line new-cap
     this._plotInstance = new uPlot({
       plugins: [
-        uPlotTooltipPlugin((pos, id, plot) => {
+        uPlotTooltipPlugin((pos, id) => {
           if (pos) {
-            const playerCount = plot.data[1][id]
+            const playerCount = this._graphData[1][id]
 
             if (typeof playerCount !== 'number') {
               this._app.tooltip.hide()
+            } else {
+              const text = formatNumber(playerCount) + ' Players<br>' + formatTimestampSeconds(this._graphData[0][id])
 
-              return
+              this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
             }
-
-            const text = formatNumber(playerCount) + ' Players<br>' + formatTimestampSeconds(plot.data[0][id])
-
-            this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
           } else {
             this._app.tooltip.hide()
           }

assets/js/tooltip.js

@@ -20,7 +20,7 @@ export function uPlotTooltipPlugin (onHover) {
           onHover({
             left: bounds.left + left + window.pageXOffset,
             top: bounds.top + top + window.pageYOffset
-          }, idx, u)
+          }, idx)
         }
       }
     }