impl updated graph tooltips
This commit is contained in:
parent
9d8dce716b
commit
8177c43d15
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user