X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=3502c312742873cd87e734e8da788b0db1fd4eca;hb=30b2bf7dd0177e04fa90ed82a27045cf967379dd;hp=735be8c180254a0c64f2c6ee305816876afbbb82;hpb=857a693198b506e516a541848491a0c160953b8e;p=dygraphs.git

diff --git a/dygraph.js b/dygraph.js
index 735be8c..3502c31 100644
--- 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: {
@@ -461,14 +460,16 @@ Dygraph.prototype.attr_ = function(name, seriesName) {
 
   var sources = [];
   sources.push(this.attrs_);
-  if (this.user_attrs_) sources.push(this.user_attrs_);
-  if (this.user_attrs_ && seriesName) {
-    if (this.user_attrs_.hasOwnProperty(seriesName)) {
-      sources.push(this.user_attrs_[seriesName]);
-    }
-    if (seriesName === this.highlightSet_ &&
-        this.user_attrs_.hasOwnProperty('highlightSeriesOpts')) {
-      sources.push(this.user_attrs_['highlightSeriesOpts']);
+  if (this.user_attrs_) {
+    sources.push(this.user_attrs_);
+    if (seriesName) {
+      if (this.user_attrs_.hasOwnProperty(seriesName)) {
+        sources.push(this.user_attrs_[seriesName]);
+      }
+      if (seriesName === this.highlightSet_ &&
+          this.user_attrs_.hasOwnProperty('highlightSeriesOpts')) {
+        sources.push(this.user_attrs_['highlightSeriesOpts']);
+      }
     }
   }
 
@@ -1020,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);
@@ -1520,7 +1525,12 @@ Dygraph.prototype.findClosestRow = function(domX) {
 };
 
 /**
- * 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}
@@ -1557,6 +1567,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}
@@ -1618,13 +1633,6 @@ Dygraph.prototype.mouseMove_ = function(event) {
   var canvasx = canvasCoords[0];
   var canvasy = canvasCoords[1];
 
-  var mouseoverCallback = this.attr_("mouseoverCallback");
-  if (mouseoverCallback) {
-    var highlightRow = this.idxToRow_(idx);
-    var ret = mouseoverCallback(this, event);
-    if (ret) return;
-  }
-
   var highlightSeriesOpts = this.attr_("highlightSeriesOpts");
   var selectionChanged = false;
   if (highlightSeriesOpts) {
@@ -1855,18 +1863,19 @@ Dygraph.prototype.animateSelection_ = function(direction) {
 
   var thisId = ++this.animateId;
   var that = this;
-  Dygraph.repeatAndCleanup(function(n) {
-        // ignore simultaneous animations
-        if (that.animateId != thisId) return;
-
-        that.fadeLevel += direction;
-        if (that.fadeLevel === 0) {
-          that.clearSelection();
-        } else {
-          that.updateSelection_(that.fadeLevel / totalSteps);
-        }
-      },
-      steps, millis, function() {});
+  Dygraph.repeatAndCleanup(
+    function(n) {
+      // ignore simultaneous animations
+      if (that.animateId != thisId) return;
+
+      that.fadeLevel += direction;
+      if (that.fadeLevel === 0) {
+        that.clearSelection();
+      } else {
+        that.updateSelection_(that.fadeLevel / totalSteps);
+      }
+    },
+    steps, millis, function() {});
 };
 
 /**
@@ -1880,9 +1889,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);
@@ -1894,8 +1907,6 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
       ctx.fillRect(0, 0, this.width_, this.height_);
     }
     var setIdx = this.datasetIndexFromSetName_(this.highlightSet_);
-    var underlay = this.attr_('highlightUnderlay');
-    if (underlay) underlay(this, ctx, setIdx);
     this.plotter_._drawLine(ctx, setIdx);
   } else if (this.previousVerticalX_ >= 0) {
     // Determine the maximum highlight circle size.
@@ -1928,10 +1939,16 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
       if (!Dygraph.isOK(pt.canvasy)) continue;
 
       var circleSize = this.attr_('highlightCircleSize', pt.name);
-      ctx.beginPath();
-      ctx.fillStyle = this.plotter_.colors[pt.name];
-      ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false);
-      ctx.fill();
+      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,
+          color, circleSize);
     }
     ctx.restore();