Fix stuck fading animation for series highlighting

[dygraphs.git] / dygraph.js

diff --git a/dygraph.js b/dygraph.js
index 1d97bda..d79fa88 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -187,8 +187,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) {
 Dygraph.DEFAULT_ATTRS = {
   highlightCircleSize: 3,
   highlightSeriesOpts: null,
-  highlightSeriesBackgroundFade: 0,
-  highlightSeriesAnimated: false,
+  highlightSeriesBackgroundAlpha: 0.5,
 
   labelsDivWidth: 250,
   labelsDivStyles: {
@@ -1022,7 +1021,11 @@ Dygraph.prototype.createStatusMessage_ = function() {
     div.className = "dygraph-legend";
     for (var name in messagestyle) {
       if (messagestyle.hasOwnProperty(name)) {
-        div.style[name] = messagestyle[name];
+        try {
+          div.style[name] = messagestyle[name];
+        } catch (e) {
+          this.warn("You are using unsupported css properties for your browser in labelsDivStyles");
+        }
       }
     }
     this.graphDiv.appendChild(div);
@@ -1514,15 +1517,21 @@ Dygraph.prototype.findClosestRow = function(domX) {
     var point = points[i];
     if (point === null) continue;
     var dist = Math.abs(point.canvasx - domX);
-    if (minDistX !== null && dist >= minDistX) continue;
-    minDistX = dist;
-    idx = i;
+    if (minDistX === null || dist < minDistX) {
+      minDistX = dist;
+      idx = i;
+    }
   }
   return this.idxToRow_(idx);
 };
 
 /**
- * Given canvas X,Y coordinates, find the closest point
+ * Given canvas X,Y coordinates, find the closest point.
+ *
+ * This finds the individual data point across all visible series
+ * that's closest to the supplied DOM coordinates using the standard
+ * Euclidean X,Y distance.
+ *
  * @param {Number} domX graph-relative DOM X coordinate
  * @param {Number} domY graph-relative DOM Y coordinate
  * Returns: {row, seriesName, point}
@@ -1542,11 +1551,12 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) {
       dx = point.canvasx - domX;
       dy = point.canvasy - domY;
       dist = dx * dx + dy * dy;
-      if (minDist !== null && dist >= minDist) continue;
-      minDist = dist;
-      closestPoint = point;
-      closestSeries = setIdx;
-      idx = i;
+      if (minDist === null || dist < minDist) {
+        minDist = dist;
+        closestPoint = point;
+        closestSeries = setIdx;
+        idx = i;
+      }
     }
   }
   var name = this.layout_.setNames[closestSeries];
@@ -1559,6 +1569,11 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) {
 
 /**
  * Given canvas X,Y coordinates, find the touched area in a stacked graph.
+ *
+ * This first finds the X data point closest to the supplied DOM X coordinate,
+ * then finds the series which puts the Y coordinate on top of its filled area,
+ * using linear interpolation between adjacent point pairs.
+ *
  * @param {Number} domX graph-relative DOM X coordinate
  * @param {Number} domY graph-relative DOM Y coordinate
  * Returns: {row, seriesName, point}
@@ -1592,9 +1607,10 @@ Dygraph.prototype.findStackedPoint = function(domX, domY) {
       }
     }
     // Stop if the point (domX, py) is above this series' upper edge
-    if (setIdx > 0 && py >= domY) break;
-    closestPoint = p1;
-    closestSeries = setIdx;
+    if (setIdx == 0 || py < domY) {
+      closestPoint = p1;
+      closestSeries = setIdx;
+    }
   }
   var name = this.layout_.setNames[closestSeries];
   return {
@@ -1835,10 +1851,8 @@ Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
 Dygraph.prototype.animateSelection_ = function(direction) {
   var totalSteps = 10;
   var millis = 30;
-  if (this.fadeLevel === undefined) {
-    this.fadeLevel = 0;
-    this.animateId = 0;
-  }
+  if (this.fadeLevel === undefined) this.fadeLevel = 0;
+  if (this.animateId === undefined) this.animateId = 0;
   var start = this.fadeLevel;
   var steps = direction < 0 ? start : totalSteps - start;
   if (steps <= 0) {
@@ -1876,9 +1890,13 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
   var ctx = this.canvas_ctx_;
   if (this.attr_('highlightSeriesOpts')) {
     ctx.clearRect(0, 0, this.width_, this.height_);
-    var alpha = this.attr_('highlightSeriesBackgroundFade');
+    var alpha = 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
     if (alpha) {
-      if (this.attr_('highlightSeriesAnimate')) {
+      // Activating background fade includes an animation effect for a gradual
+      // fade. TODO(klausw): make this independently configurable if it causes
+      // issues? Use a shared preference to control animations?
+      var animateBackgroundFade = true;
+      if (animateBackgroundFade) {
         if (opt_animFraction === undefined) {
           // start a new animation
           this.animateSelection_(1);
@@ -1923,11 +1941,15 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
 
       var circleSize = this.attr_('highlightCircleSize', pt.name);
       var callback = this.attr_("drawHighlightPointCallback", pt.name);
+      var color = this.plotter_.colors[pt.name];
       if (!callback) {
         callback = Dygraph.Circles.DEFAULT;
       }
+      ctx.lineWidth = this.attr_('strokeWidth', pt.name);
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
       callback(this.g, pt.name, ctx, canvasx, pt.canvasy,
-          this.plotter_.colors[pt.name], circleSize);
+          color, circleSize);
     }
     ctx.restore();