Merge pull request #2052 from influxdata/feature/smoother-hovering

UI-IMPROVEMENT: Add custom findClosestPoint method

CHANGELOG.md

@@ -18,6 +18,7 @@
 1. [#2002](https://github.com/influxdata/chronograf/pull/2002): Improve usability of dashboard cell context menus
 1. [#2002](https://github.com/influxdata/chronograf/pull/2002): Move dashboard cell renaming UI into Cell Editor Overlay
 1. [#2040](https://github.com/influxdata/chronograf/pull/2040): Prevent the legend from overlapping graphs at the bottom of the screen
+1. [#2052](https://github.com/influxdata/chronograf/pull/2052): Make hovering over series smoother
 
 ## v1.3.8.1 [unreleased]
 ### Bug Fixes

ui/src/external/dygraph.js

@@ -248,6 +248,57 @@ function attachSelectionHandlers(gs, prevCallbacks) {
   }
 }
 
+function isValidPoint(p, opt_allowNaNY) {
+  if (!p) return false // null or undefined object
+  if (p.yval === null) return false // missing point
+  if (p.x === null || p.x === undefined) return false
+  if (p.y === null || p.y === undefined) return false
+  if (isNaN(p.x) || (!opt_allowNaNY && isNaN(p.y))) return false
+  return true
+}
+
+Dygraph.prototype.findClosestPoint = function(domX, domY) {
+  if (Dygraph.VERSION !== '2.0.0') {
+    console.error(
+      `Dygraph version changed to ${Dygraph.VERSION} - re-copy findClosestPoint`
+    )
+  }
+  var minXDist = Infinity
+  var minYDist = Infinity
+  var xdist, ydist, dx, dy, point, closestPoint, closestSeries, closestRow
+  for (var setIdx = this.layout_.points.length - 1; setIdx >= 0; --setIdx) {
+    var points = this.layout_.points[setIdx]
+    for (var i = 0; i < points.length; ++i) {
+      point = points[i]
+      if (!isValidPoint(point)) continue
+
+      dx = point.canvasx - domX
+      dy = point.canvasy - domY
+
+      xdist = dx * dx
+      ydist = dy * dy
+
+      if (xdist < minXDist) {
+        minXDist = xdist
+        minYDist = ydist
+        closestRow = point.idx
+        closestSeries = setIdx
+      } else if (xdist === minXDist && ydist < minYDist) {
+        minXDist = xdist
+        minYDist = ydist
+        closestRow = point.idx
+        closestSeries = setIdx
+      }
+    }
+  }
+  var name = this.layout_.setNames[closestSeries]
+  return {
+    row: closestRow,
+    seriesName: name,
+    point: closestPoint,
+  }
+}
+
 Dygraph.synchronize = synchronize
 
 Dygraph.Plugins.Crosshair = (function() {