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) } } }