wire uPlot tooltips into the existing tooltip system

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

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

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