From 1715eee9eec72048d8fd94ce19127c330be3033e Mon Sep 17 00:00:00 2001 From: Sergey Slepian Date: Tue, 27 Oct 2015 09:25:39 -0400 Subject: [PATCH 1/1] Add a "highlightSeriesBackgroundColor" option This allows customization of the semi-transparent overlay that is shown on series highlight. See #602 --- auto_tests/tests/highlight_series_background.js | 109 ++++++++++++++++++++++++ src/dygraph-default-attrs.js | 1 + src/dygraph-options-reference.js | 6 ++ src/dygraph.js | 4 +- 4 files changed, 119 insertions(+), 1 deletion(-) create mode 100644 auto_tests/tests/highlight_series_background.js diff --git a/auto_tests/tests/highlight_series_background.js b/auto_tests/tests/highlight_series_background.js new file mode 100644 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 = "
"; + }); + + 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 --- 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 --- a/src/dygraph-options-reference.js +++ b/src/dygraph-options-reference.js @@ -164,6 +164,12 @@ OPTIONS_REFERENCE = // "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 --- 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_); } -- 2.7.4