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) {
|
static scale (data, tickCount) {
|
||||||
const [min, max] = RelativeScale.calculateBounds(data)
|
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 uPlot from '../lib/uPlot.esm'
|
||||||
|
|
||||||
import RelativeScale from './scale'
|
import { RelativeScale } from './scale'
|
||||||
|
|
||||||
import { formatNumber, formatTimestamp, formatDate, formatMinecraftServerAddress, formatMinecraftVersions } from './util'
|
import { formatNumber, formatTimestamp, formatDate, formatMinecraftServerAddress, formatMinecraftVersions } from './util'
|
||||||
|
import { uPlotTooltipPlugin } from './tooltip'
|
||||||
|
|
||||||
import MISSING_FAVICON from '../images/missing_favicon.svg'
|
import MISSING_FAVICON from '../images/missing_favicon.svg'
|
||||||
|
|
||||||
@ -78,6 +79,17 @@ export class ServerRegistration {
|
|||||||
|
|
||||||
// eslint-disable-next-line new-cap
|
// eslint-disable-next-line new-cap
|
||||||
this._plotInstance = new uPlot({
|
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,
|
height: 100,
|
||||||
width: 400,
|
width: 400,
|
||||||
cursor: {
|
cursor: {
|
||||||
@ -290,8 +302,6 @@ export class ServerRegistration {
|
|||||||
}
|
}
|
||||||
|
|
||||||
initEventListeners () {
|
initEventListeners () {
|
||||||
$('#chart_' + this.serverId).bind('plothover', this._app.graphDisplayManager.handlePlotHover)
|
|
||||||
|
|
||||||
document.getElementById('favorite-toggle_' + this.serverId).addEventListener('click', () => {
|
document.getElementById('favorite-toggle_' + this.serverId).addEventListener('click', () => {
|
||||||
this._app.favoritesManager.handleFavoriteButtonClick(this)
|
this._app.favoritesManager.handleFavoriteButtonClick(this)
|
||||||
}, false)
|
}, 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