impl updated graph tooltips
This commit is contained in:
parent
9d8dce716b
commit
8177c43d15
@ -263,24 +263,6 @@ footer a:hover {
|
|||||||
display: inline-block;
|
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 {
|
.server .column-status .server-error {
|
||||||
display: none;
|
display: none;
|
||||||
color: #e74c3c;
|
color: #e74c3c;
|
||||||
@ -302,6 +284,25 @@ footer a:hover {
|
|||||||
width: 400px;
|
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 */
|
/* Highlighted values */
|
||||||
.server-highlighted-label {
|
.server-highlighted-label {
|
||||||
font-size: 18px;
|
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) {
|
buildPlotInstance (timestamps, data) {
|
||||||
// Lazy load settings from localStorage, if any and if enabled
|
// Lazy load settings from localStorage, if any and if enabled
|
||||||
if (!this._hasLoadedSettings) {
|
if (!this._hasLoadedSettings) {
|
||||||
@ -141,25 +148,44 @@ export class GraphDisplayManager {
|
|||||||
// eslint-disable-next-line new-cap
|
// eslint-disable-next-line new-cap
|
||||||
this._plotInstance = new uPlot({
|
this._plotInstance = new uPlot({
|
||||||
plugins: [
|
plugins: [
|
||||||
uPlotTooltipPlugin((pos, id, plot) => {
|
uPlotTooltipPlugin((pos, id) => {
|
||||||
if (pos) {
|
if (pos) {
|
||||||
// FIXME
|
let text = this._app.serverRegistry.getServerRegistrations()
|
||||||
let text = '<strong>' + formatTimestampSeconds(this._graphTimestamps[id]) + '</strong><br><br>'
|
.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 aPoint = this.getGraphDataPoint(a.serverId, id)
|
||||||
const serverRegistration = this._app.serverRegistry.getServerRegistration(i - 1)
|
const bPoint = this.getGraphDataPoint(b.serverId, id)
|
||||||
const serverGraphData = this._graphData[serverRegistration.serverId]
|
|
||||||
|
|
||||||
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') {
|
return bPoint - aPoint
|
||||||
playerCount = '-'
|
})
|
||||||
} else {
|
.map(serverRegistration => {
|
||||||
playerCount = formatNumber(serverGraphData[id])
|
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)
|
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
|
||||||
} else {
|
} else {
|
||||||
|
@ -80,19 +80,17 @@ export class ServerRegistration {
|
|||||||
// eslint-disable-next-line new-cap
|
// eslint-disable-next-line new-cap
|
||||||
this._plotInstance = new uPlot({
|
this._plotInstance = new uPlot({
|
||||||
plugins: [
|
plugins: [
|
||||||
uPlotTooltipPlugin((pos, id, plot) => {
|
uPlotTooltipPlugin((pos, id) => {
|
||||||
if (pos) {
|
if (pos) {
|
||||||
const playerCount = plot.data[1][id]
|
const playerCount = this._graphData[1][id]
|
||||||
|
|
||||||
if (typeof playerCount !== 'number') {
|
if (typeof playerCount !== 'number') {
|
||||||
this._app.tooltip.hide()
|
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 {
|
} else {
|
||||||
this._app.tooltip.hide()
|
this._app.tooltip.hide()
|
||||||
}
|
}
|
||||||
|
@ -20,7 +20,7 @@ export function uPlotTooltipPlugin (onHover) {
|
|||||||
onHover({
|
onHover({
|
||||||
left: bounds.left + left + window.pageXOffset,
|
left: bounds.left + left + window.pageXOffset,
|
||||||
top: bounds.top + top + window.pageYOffset
|
top: bounds.top + top + window.pageYOffset
|
||||||
}, idx, u)
|
}, idx)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user