Merge pull request #682 from danvk/revive-602

Add highlightSeriesBackgroundColor option

diff --git a/DEVELOP.md b/DEVELOP.md
index 7436326..9a13888 100644 (file)
--- a/DEVELOP.md
+++ b/DEVELOP.md
@@ -28,6 +28,12 @@ To iterate on a unit test, run the `watch` command above and open
 in your browser. You can use the Mocha UI to run just a single test or suite.
 Or you can change `it` to `it.only` to do run just one test in code.
 
+To run a single test from the command line, you can use:
+
+  npm run test -- --grep highlight-series-background
+
+(Note the extra `--`.)
+
 ### dygraphs style
 
 When making a change, please try to follow the style of the existing dygraphs code. This will make the review process go much more smoothly.

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..d2a09f0
--- /dev/null
+++ b/auto_tests/tests/highlight_series_background.js
@@ -0,0 +1,125 @@
+/**
+ * @fileoverview Tests for the highlightSeriesBackgroundAlpha and
+ * highlightSeriesBackgroundColor options.
+ * @author sergeyslepian@gmail.com
+ */
+
+import Dygraph from '../../src/dygraph';
+import * as utils from '../../src/dygraph-utils';
+import Util from './Util';
+
+describe("highlight-series-background", function() {
+
+  cleanupAfterEach();
+
+  var origRepeatAndCleanup;
+
+  beforeEach(function() {
+    // A "fast" version of repeatAndCleanup
+    origRepeatAndCleanup = utils.repeatAndCleanup;
+    // utils.repeatAndCleanup = function(repeatFn, maxFrames, framePeriodInMillis, cleanupFn) {
+    //   repeatFn(0);
+    //   if (maxFrames > 1) repeatFn(maxFrames - 1);
+    //   cleanupFn();
+    // };
+  });
+
+  afterEach(function() {
+    utils.repeatAndCleanup = origRepeatAndCleanup;
+  });
+
+  function setupGraph(highlightSeriesBackgroundAlpha,
+                      highlightSeriesBackgroundColor) {
+    var opts = {
+      width: 480,
+      height: 320,
+      labels: ['x', 'y'],
+      legend: 'always',
+      highlightSeriesOpts: {
+        strokeWidth: 1,
+        strokeBorderWidth: 1,
+        highlightCircleSize: 1
+      }
+    };
+
+    if (highlightSeriesBackgroundAlpha) utils.update(opts, {highlightSeriesBackgroundAlpha});
+    if (highlightSeriesBackgroundColor) utils.update(opts, {highlightSeriesBackgroundColor});
+
+    var data = [];
+    for (var j = 0; j < 10; j++) {
+      data.push([j, 0]);
+    }
+
+    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
+    window.setTimeout(() => {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [255,255,255,127]);
+      done();
+    }, 500);
+  });
+
+  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
+    window.setTimeout(() => {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,0,0,0]);
+      done();
+    }, 500);
+  });
+
+  it('testCustomHighlightColor', function(done) {
+    var graph = setupGraph(null, '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
+    window.setTimeout(() => {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [0,255,255,127]);
+      done();
+    }, 500);
+  });
+
+  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
+    window.setTimeout(() => {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [255,255,255,179]);
+      done();
+    }, 500);
+  });
+
+  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
+    window.setTimeout(() => {
+      assert.deepEqual(Util.samplePixel(graph.canvas_, 100, 100), [255,0,0,76]);
+      done();
+    }, 500);
+  });
+});

diff --git a/scripts/run-tests.sh b/scripts/run-tests.sh
index 4b1c77f..4bc0718 100755 (executable)
--- a/scripts/run-tests.sh
+++ b/scripts/run-tests.sh
@@ -18,4 +18,4 @@ trap finish EXIT
 sleep 1
 
 # Start the tests
-mocha-phantomjs http://localhost:8081/auto_tests/runner.html
+mocha-phantomjs http://localhost:8081/auto_tests/runner.html "$@"

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..bc75fef 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 = utils.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_);
     }