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

merge graph timestamps into single array, use seconds

Browse Source
This commit is contained in:
Nick Krecklow
2020-05-11 04:12:46 -05:00
parent ef0c41ee1d
commit 84004f22be
9 changed files with 64 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
assets/js/graph.js
View File

@ -2,7 +2,7 @@ import uPlot from '../lib/uPlot.esm'
import { RelativeScale } from './scale'
import { formatNumber, formatTimestamp, isMobileBrowser } from './util'
import { formatNumber, formatTimestampSeconds, isMobileBrowser } from './util'
import { uPlotTooltipPlugin } from './tooltip'
import { FAVORITE_SERVERS_STORAGE_KEY } from './favorites'
@ -23,7 +23,7 @@ export class GraphDisplayManager {
this._showOnlyFavorites = false
}
addGraphPoint (serverId, timestamp, playerCount) {
addGraphPoint (timestamp, playerCounts) {
if (!this._hasLoadedSettings) {
// _hasLoadedSettings is controlled by #setGraphData
// It will only be true once the context has been loaded and initial payload received
@ -32,7 +32,11 @@ export class GraphDisplayManager {
return
}
// FIXME
this._graphTimestamps.push(timestamp)
for (let i = 0; i < playerCounts.length; i++) {
this._graphData[i].push(playerCounts[i])
}
}
loadLocalStorage () {
@ -106,7 +110,7 @@ export class GraphDisplayManager {
}
}
buildPlotInstance (graphData) {
buildPlotInstance (timestamps, data) {
// Lazy load settings from localStorage, if any and if enabled
if (!this._hasLoadedSettings) {
this._hasLoadedSettings = true
@ -114,14 +118,8 @@ export class GraphDisplayManager {
this.loadLocalStorage()
}
// FIXME: timestamps are not shared!
this._graphTimestamps = graphData[0].map(val => Math.floor(val[0] / 1000))
this._graphData = Object.values(graphData).map(val => {
return val.map(element => {
// Safely handle null data points, they represent gaps in the graph
return element === null ? null : element[1]
})
})
this._graphTimestamps = timestamps
this._graphData = data
const series = this._app.serverRegistry.getServerRegistrations().map(serverRegistration => {
return {
@ -141,7 +139,7 @@ export class GraphDisplayManager {
uPlotTooltipPlugin((pos, id, plot) => {
if (pos) {
// FIXME
let text = '<strong>' + formatTimestamp(this._graphTimestamps[id] * 1000) + '</strong><br><br>'
let text = '<strong>' + formatTimestampSeconds(this._graphTimestamps[id]) + '</strong><br><br>'
for (let i = 1; i < plot.series.length; i++) {
const serverRegistration = this._app.serverRegistry.getServerRegistration(i - 1)

28
assets/js/servers.js
View File

@ -2,7 +2,7 @@ import uPlot from '../lib/uPlot.esm'
import { RelativeScale } from './scale'
import { formatNumber, formatTimestamp, formatDate, formatMinecraftServerAddress, formatMinecraftVersions } from './util'
import { formatNumber, formatTimestampSeconds, formatDate, formatMinecraftServerAddress, formatMinecraftVersions } from './util'
import { uPlotTooltipPlugin } from './tooltip'
import MISSING_FAVICON from '../images/missing_favicon.svg'
@ -69,7 +69,7 @@ export class ServerRegistration {
addGraphPoints (points, timestampPoints) {
this._graphData = [
timestampPoints.map(val => Math.floor(val / 1000)),
timestampPoints.slice(),
points
]
}
@ -90,8 +90,7 @@ export class ServerRegistration {
return
}
// FIXME: update timestamp schema
const text = formatNumber(playerCount) + ' Players<br>' + formatTimestamp(plot.data[0][id] * 1000)
const text = formatNumber(playerCount) + ' Players<br>' + formatTimestampSeconds(plot.data[0][id])
this._app.tooltip.set(pos.left, pos.top, 10, 10, text)
} else {
@ -171,7 +170,7 @@ export class ServerRegistration {
}
// Use payload.playerCount so nulls WILL be pushed into the graphing data
this._graphData[0].push(Math.floor(timestamp / 1000))
this._graphData[0].push(timestamp)
this._graphData[1].push(payload.playerCount)
// Trim graphData to within the max length by shifting out the leading elements
@ -182,21 +181,6 @@ export class ServerRegistration {
}
this.redraw()
if (typeof payload.playerCount !== 'undefined') {
this.playerCount = payload.playerCount || 0
// Use payload.playerCount so nulls WILL be pushed into the graphing data
this._graphData[0].push(Math.floor(timestamp / 1000))
this._graphData[1].push(payload.playerCount)
// Trim graphData to within the max length by shifting out the leading elements
for (const series of this._graphData) {
if (series.length > this._app.publicConfig.serverGraphMaxLength) {
series.shift()
}
}
}
}
redraw () {
@ -219,7 +203,7 @@ export class ServerRegistration {
const peakValueElement = document.getElementById('peak-value_' + this.serverId)
peakValueElement.innerText = formatNumber(data.playerCount)
peakLabelElement.title = 'At ' + formatTimestamp(data.timestamp)
peakLabelElement.title = 'At ' + formatTimestampSeconds(data.timestamp)
this.lastPeakData = data
}
@ -245,7 +229,7 @@ export class ServerRegistration {
// Safely handle legacy recordData that may not include the timestamp payload
if (recordData.timestamp > 0) {
recordValueElement.innerHTML = formatNumber(recordData.playerCount) + ' (' + formatDate(recordData.timestamp) + ')'
recordLabelElement.title = 'At ' + formatDate(recordData.timestamp) + ' ' + formatTimestamp(recordData.timestamp)
recordLabelElement.title = 'At ' + formatDate(recordData.timestamp) + ' ' + formatTimestampSeconds(recordData.timestamp)
} else {
recordValueElement.innerText = formatNumber(recordData.playerCount)
}

30
assets/js/socket.js
View File

@ -81,8 +81,6 @@ export class SocketManager {
break
case 'updateServers': {
let requestGraphRedraw = false
for (let serverId = 0; serverId < payload.updates.length; serverId++) {
// The backend may send "update" events prior to receiving all "add" events
// A server has only been added once it's ServerRegistration is defined
@ -92,28 +90,18 @@ export class SocketManager {
if (serverRegistration) {
serverRegistration.handlePing(serverUpdate, payload.timestamp)
serverRegistration.updateServerStatus(serverUpdate, this._app.publicConfig.minecraftVersions)
}
// Use update payloads to conditionally append data to graph
// Skip any incoming updates if the graph is disabled
if (serverUpdate.updateHistoryGraph && this._app.graphDisplayManager.isVisible) {
// Update may not be successful, safely append 0 points
const playerCount = serverUpdate.playerCount || 0
this._app.graphDisplayManager.addGraphPoint(serverRegistration.serverId, payload.timestamp, playerCount)
// Only redraw the graph if not mutating hidden data
if (serverRegistration.isVisible) {
requestGraphRedraw = true
}
}
}
// Run redraw tasks after handling bulk updates
if (requestGraphRedraw) {
this._app.graphDisplayManager.redraw()
// Bulk add playerCounts into graph during #updateHistoryGraph
if (payload.updateHistoryGraph) {
this._app.graphDisplayManager.addGraphPoint(payload.timestamp, Object.values(payload.updates).map(update => update.playerCount))
// Run redraw tasks after handling bulk updates
if (this._app.graphDisplayManager.isVisible) {
this._app.graphDisplayManager.redraw()
}
}
this._app.percentageBar.redraw()
@ -132,7 +120,7 @@ export class SocketManager {
// This is used for the manual graph load request behavior
this._app.graphDisplayManager.isVisible = true
this._app.graphDisplayManager.buildPlotInstance(payload.graphData)
this._app.graphDisplayManager.buildPlotInstance(payload.timestamps, payload.graphData)
// Build checkbox elements for graph controls
let lastRowCounter = 0

8
assets/js/util.js
View File

@ -99,15 +99,15 @@ export function formatMinecraftVersions (versions, knownVersions) {
}).join(', ')
}
export function formatTimestamp (millis) {
export function formatTimestampSeconds (secs) {
const date = new Date(0)
date.setUTCSeconds(millis / 1000)
date.setUTCSeconds(secs)
return date.toLocaleTimeString()
}
export function formatDate (millis) {
export function formatDate (secs) {
const date = new Date(0)
date.setUTCSeconds(millis / 1000)
date.setUTCSeconds(secs)
return date.toLocaleDateString()
}