Fascinated/Minetrack
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

New hover tooltip layout, use template literals

Browse Source
This commit is contained in:
Nick Krecklow
2020-06-08 16:29:15 -05:00
parent 2336c9f78b
commit d48c5afc9b
9 changed files with 150 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
assets/js/graph.js
View File

@ -50,10 +50,7 @@ export class GraphDisplayManager {
}
// Paint updated data structure
this._plotInstance.setData([
this._graphTimestamps,
...this._graphData
])
this._plotInstance.setData(this.getGraphData())
}
loadLocalStorage () {
@ -127,6 +124,13 @@ export class GraphDisplayManager {
}
}
getGraphData () {
return [
this._graphTimestamps,
...this._graphData
]
}
getGraphDataPoint (serverId, index) {
const graphData = this._graphData[serverId]
if (graphData && index < graphData.length && typeof graphData[index] === 'number') {
@ -134,6 +138,37 @@ export class GraphDisplayManager {
}
}
getClosestPlotSeriesIndex (idx) {
let closestSeriesIndex = -1
let closestSeriesDist = Number.MAX_VALUE
for (let i = 1; i < this._plotInstance.series.length; i++) {
const series = this._plotInstance.series[i]
if (!series.show) {
continue
}
const point = this._plotInstance.data[i][idx]
if (typeof point === 'number') {
const scale = this._plotInstance.scales[series.scale]
const posY = (1 - ((point - scale.min) / (scale.max - scale.min))) * this._plotInstance.height
// +20 to offset some sort of strange calculation bug
// cursor.top does not seem to correctly align with the generated posY values
const dist = Math.abs(posY - (this._plotInstance.cursor.top + 20))
if (dist < closestSeriesDist) {
closestSeriesIndex = i
closestSeriesDist = dist
}
}
}
return closestSeriesIndex
}
buildPlotInstance (timestamps, data) {
// Lazy load settings from localStorage, if any and if enabled
if (!this._hasLoadedSettings) {
@ -150,7 +185,7 @@ export class GraphDisplayManager {
scale: 'Players',
stroke: serverRegistration.data.color,
width: 2,
value: (_, raw) => formatNumber(raw) + ' Players',
value: (_, raw) => `${formatNumber(raw)} Players`,
show: serverRegistration.isVisible,
spanGaps: true,
points: {
@ -165,44 +200,32 @@ export class GraphDisplayManager {
// eslint-disable-next-line new-cap
this._plotInstance = new uPlot({
plugins: [
uPlotTooltipPlugin((pos, id) => {
uPlotTooltipPlugin((pos, idx) => {
if (pos) {
let text = this._app.serverRegistry.getServerRegistrations()
const closestSeriesIndex = this.getClosestPlotSeriesIndex(idx)
const text = this._app.serverRegistry.getServerRegistrations()
.filter(serverRegistration => serverRegistration.isVisible)
.sort((a, b) => {
if (a.isFavorite !== b.isFavorite) {
return a.isFavorite ? -1 : 1
}
const aPoint = this.getGraphDataPoint(a.serverId, id)
const bPoint = this.getGraphDataPoint(b.serverId, id)
if (typeof aPoint === typeof bPoint) {
if (typeof aPoint === 'undefined') {
return 0
}
} else {
return typeof aPoint === 'number' ? -1 : 1
return a.data.name.localeCompare(b.data.name)
}
return bPoint - aPoint
})
.map(serverRegistration => {
const point = this.getGraphDataPoint(serverRegistration.serverId, id)
const point = this.getGraphDataPoint(serverRegistration.serverId, idx)
let serverName = serverRegistration.data.name
if (closestSeriesIndex === serverRegistration.getGraphDataIndex()) {
serverName = `<strong>${serverName}</strong>`
}
if (serverRegistration.isFavorite) {
serverName = '<span class="' + this._app.favoritesManager.getIconClass(true) + '"></span> ' + serverName
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>'
return `${serverName}: ${formatNumber(point)}`
}).join('<br>') + `<br><br><strong>${formatTimestampSeconds(this._graphTimestamps[idx])}</strong>`
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
} else {
@ -238,8 +261,8 @@ export class GraphDisplayManager {
},
split: () => {
const visibleGraphData = this.getVisibleGraphData()
const [, max, scale] = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
const ticks = RelativeScale.generateTicks(0, max, scale)
const { scaledMax, scale } = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
const ticks = RelativeScale.generateTicks(0, scaledMax, scale)
return ticks
}
}
@ -249,18 +272,15 @@ export class GraphDisplayManager {
auto: false,
range: () => {
const visibleGraphData = this.getVisibleGraphData()
const [, scaledMax] = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
return [0, scaledMax]
const { scaledMin, scaledMax } = RelativeScale.scaleMatrix(visibleGraphData, tickCount, maxFactor)
return [scaledMin, scaledMax]
}
}
},
legend: {
show: false
}
}, [
this._graphTimestamps,
...this._graphData
], document.getElementById('big-graph'))
}, this.getGraphData(), document.getElementById('big-graph'))
// Show the settings-toggle element
document.getElementById('settings-toggle').style.display = 'inline-block'
@ -273,7 +293,7 @@ export class GraphDisplayManager {
// Copy application state into the series data used by uPlot
for (const serverRegistration of this._app.serverRegistry.getServerRegistrations()) {
this._plotInstance.series[serverRegistration.serverId + 1].show = serverRegistration.isVisible
this._plotInstance.series[serverRegistration.getGraphDataIndex()].show = serverRegistration.isVisible
}
this._plotInstance.redraw()