diff --git a/assets/css/main.css b/assets/css/main.css
index 7a66d37..5b66c19 100644
--- a/assets/css/main.css
+++ b/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;
diff --git a/assets/js/graph.js b/assets/js/graph.js
index 9b5219a..d89b650 100644
--- a/assets/js/graph.js
+++ b/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 = '' + formatTimestampSeconds(this._graphTimestamps[id]) + '
'
+ 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 + '
'
- }
+ let serverName = serverRegistration.data.name
+ if (serverRegistration.isFavorite) {
+ serverName = ' ' + serverName
+ }
+
+ if (typeof point === 'number') {
+ return serverName + ': ' + formatNumber(point)
+ } else {
+ return serverName + ': -'
+ }
+ }).join('
')
+
+ text += '
' + formatTimestampSeconds(this._graphTimestamps[id]) + ''
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
} else {
diff --git a/assets/js/servers.js b/assets/js/servers.js
index 2fee655..e5387e6 100644
--- a/assets/js/servers.js
+++ b/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
' + formatTimestampSeconds(this._graphData[0][id])
- return
+ this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
}
-
- const text = formatNumber(playerCount) + ' Players
' + formatTimestampSeconds(plot.data[0][id])
-
- this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
} else {
this._app.tooltip.hide()
}
diff --git a/assets/js/tooltip.js b/assets/js/tooltip.js
index 431ad9e..0595d7d 100644
--- a/assets/js/tooltip.js
+++ b/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)
}
}
}