diff --git a/assets/js/scale.js b/assets/js/scale.js index 5281151..47ee868 100644 --- a/assets/js/scale.js +++ b/assets/js/scale.js @@ -1,4 +1,4 @@ -class RelativeScale { +export class RelativeScale { static scale (data, tickCount) { const [min, max] = RelativeScale.calculateBounds(data) @@ -49,5 +49,3 @@ class RelativeScale { } } } - -module.exports = RelativeScale diff --git a/assets/js/servers.js b/assets/js/servers.js index e860741..a50c76d 100644 --- a/assets/js/servers.js +++ b/assets/js/servers.js @@ -1,8 +1,9 @@ import uPlot from '../lib/uPlot.esm' -import RelativeScale from './scale' +import { RelativeScale } from './scale' import { formatNumber, formatTimestamp, formatDate, formatMinecraftServerAddress, formatMinecraftVersions } from './util' +import { uPlotTooltipPlugin } from './tooltip' import MISSING_FAVICON from '../images/missing_favicon.svg' @@ -78,6 +79,17 @@ export class ServerRegistration { // eslint-disable-next-line new-cap this._plotInstance = new uPlot({ + plugins: [ + uPlotTooltipPlugin((pos, point) => { + if (pos) { + const text = formatNumber(point.y) + ' Players
' + formatTimestamp(point.x * 1000) + + this._app.tooltip.set(pos.left, pos.top, 10, 10, text) + } else { + this._app.tooltip.hide() + } + }) + ], height: 100, width: 400, cursor: { @@ -290,8 +302,6 @@ export class ServerRegistration { } initEventListeners () { - $('#chart_' + this.serverId).bind('plothover', this._app.graphDisplayManager.handlePlotHover) - document.getElementById('favorite-toggle_' + this.serverId).addEventListener('click', () => { this._app.favoritesManager.handleFavoriteButtonClick(this) }, false) diff --git a/assets/js/tooltip.js b/assets/js/tooltip.js new file mode 100644 index 0000000..a4fc78f --- /dev/null +++ b/assets/js/tooltip.js @@ -0,0 +1,32 @@ +export function uPlotTooltipPlugin (onHover) { + let element + + return { + hooks: { + init: u => { + element = u.root.querySelector('.over') + + element.onmouseenter = () => onHover() + element.onmouseleave = () => onHover() + }, + setCursor: u => { + const { left, top, idx } = u.cursor + + if (idx === null) { + onHover() + } else { + const bounds = element.getBoundingClientRect() + + onHover({ + left: bounds.left + left + window.pageXOffset, + top: bounds.top + top + window.pageYOffset + }, { + idx, + x: u.data[0][idx], + y: u.data[1][idx] + }) + } + } + } + } +}