Add a "highlightSeriesBackgroundColor" option

This allows customization of the semi-transparent overlay that is shown
on series highlight.

See #602

diff --git a/auto_tests/tests/highlight_series_background.js b/auto_tests/tests/highlight_series_background.js
new file mode 100644 (file)
index 0000000..aedc8ed
--- /dev/null
+++ b/auto_tests/tests/highlight_series_background.js
@@ -0,0 +1,109 @@
+/**
+ * @fileoverview Tests for the highlightSeriesBackgroundAlpha and highlightSeriesBackgroundColor options.
+ * @author sergeyslepian@gmail.com
+ */
+
+describe("highlight-series-background", function() {
+
+  beforeEach(function () {
+    document.body.innerHTML = "<div id='graph'></div>";
+  });
+
+  afterEach(function () {
+  });
+
+  function setupGraph(highlightSeriesBackgroundAlpha, highlightSeriesBackgroundColor) {
+    var opts = {
+      width: 480,
+      height: 320,
+      labels: ['x', 'y'],
+      legend: 'always',
+      highlightSeriesOpts: {
+        strokeWidth: 1,
+        strokeBorderWidth: 1,
+        highlightCircleSize: 1
+      }
+    };
+
+    if(highlightSeriesBackgroundAlpha !== undefined) opts.highlightSeriesBackgroundAlpha = highlightSeriesBackgroundAlpha;
+    if(highlightSeriesBackgroundColor !== undefined) opts.highlightSeriesBackgroundColor = highlightSeriesBackgroundColor;
+
+    var data = [];
+    for (var j = 0; j < 10; j++) {
+      data.push([j, 0]);
+    }
+
+    var graph = document.getElementById("graph");
+    return new Dygraph(graph, data, opts);
+  }
+
+  it('testDefaultHighlight', function(done) {
+    var graph = setupGraph();
+
+    assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+
+    graph.setSelection(0, 'y', true);
+
+    // handle background color fade-in time
+    setTimeout(function() {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [255,255,255,127]);
+      done();
+    }, 1000);
+  });
+
+  it('testNoHighlight', function(done) {
+    var graph = setupGraph(1);
+
+    assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+
+    graph.setSelection(0, 'y', true);
+
+    // handle background color fade-in time
+    setTimeout(function() {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+      done();
+    }, 1000);
+  });
+
+  it('testCustomHighlightColor', function(done) {
+    var graph = setupGraph(undefined, 'rgb(0,255,255)');
+
+    assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+
+    graph.setSelection(0, 'y', true);
+
+    // handle background color fade-in time
+    setTimeout(function() {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,255,255,127]);
+      done();
+    }, 1000);
+  });
+
+  it('testCustomHighlightAlpha', function(done) {
+    var graph = setupGraph(0.3);
+
+    assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+
+    graph.setSelection(0, 'y', true);
+
+    // handle background color fade-in time
+    setTimeout(function() {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [255,255,255,179]);
+      done();
+    }, 1000);
+  });
+
+  it('testCustomHighlightColorAndAlpha', function(done) {
+    var graph = setupGraph(0.7,'rgb(255,0,0)');
+
+    assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+
+    graph.setSelection(0, 'y', true);
+
+    // handle background color fade-in time
+    setTimeout(function() {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [255,0,0,76]);
+      done();
+    }, 1000);
+  });
+});
\ No newline at end of file

diff --git a/src/dygraph-default-attrs.js b/src/dygraph-default-attrs.js
index 5740a49..5b7cb32 100644 (file)
--- a/src/dygraph-default-attrs.js
+++ b/src/dygraph-default-attrs.js
@@ -10,6 +10,7 @@ var DEFAULT_ATTRS = {
   highlightCircleSize: 3,
   highlightSeriesOpts: null,
   highlightSeriesBackgroundAlpha: 0.5,
+  highlightSeriesBackgroundColor: 'rgb(255, 255, 255)',
 
   labelsDivWidth: 250,
   labelsDivStyles: {

diff --git a/src/dygraph-options-reference.js b/src/dygraph-options-reference.js
index 3f9a640..0f3ebfa 100644 (file)
--- a/src/dygraph-options-reference.js
+++ b/src/dygraph-options-reference.js
@@ -164,6 +164,12 @@ OPTIONS_REFERENCE =  // <JSON>
     "type": "float",
     "description": "Fade the background while highlighting series. 1=fully visible background (disable fading), 0=hiddden background (show highlighted series only)."
   },
+  "highlightSeriesBackgroundColor": {
+    "default": "rgb(255, 255, 255)",
+    "labels": ["Interactive Elements"],
+    "type": "string",
+    "description": "Sets the background color used to fade out the series in conjunction with 'highlightSeriesBackgroundAlpha'."
+  },
   "includeZero": {
     "default": "false",
     "labels": ["Axis display"],

diff --git a/src/dygraph.js b/src/dygraph.js
index d166f03..62c482d 100644 (file)
--- a/src/dygraph.js
+++ b/src/dygraph.js
@@ -1774,6 +1774,8 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
   if (this.getOption('highlightSeriesOpts')) {
     ctx.clearRect(0, 0, this.width_, this.height_);
     var alpha = 1.0 - this.getNumericOption('highlightSeriesBackgroundAlpha');
+    var backgroundColor = Dygraph.toRGB_(this.getOption('highlightSeriesBackgroundColor'));
+
     if (alpha) {
       // Activating background fade includes an animation effect for a gradual
       // fade. TODO(klausw): make this independently configurable if it causes
@@ -1787,7 +1789,7 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
         }
         alpha *= opt_animFraction;
       }
-      ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')';
+      ctx.fillStyle = 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + alpha + ')';
       ctx.fillRect(0, 0, this.width_, this.height_);
     }