impl updated graph tooltips

This commit is contained in:
Nick Krecklow 2020-05-11 20:05:34 -05:00
parent 9d8dce716b
commit 8177c43d15
No known key found for this signature in database
GPG Key ID: 5F149FDE156FFA94
4 changed files with 65 additions and 40 deletions

@ -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;

@ -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 {

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

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