wire uPlot tooltips into the existing tooltip system
This commit is contained in:
parent
8d211434df
commit
1ff9478988
@ -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
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]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user