wire uPlot tooltips into the existing tooltip system

This commit is contained in:
Nick Krecklow 2020-05-11 00:37:22 -05:00
parent 8d211434df
commit 1ff9478988
No known key found for this signature in database
GPG Key ID: 5F149FDE156FFA94
3 changed files with 46 additions and 6 deletions

@ -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

@ -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<br>' + 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)

32
assets/js/tooltip.js Normal file

@ -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]
})
}
}
}
}
}