From: blcook223
Date: Mon, 9 Mar 2015 04:40:54 +0000 (-0500)
Subject: merging addition of range selector secondary gradient color (formerly PR 314) with...
X-Git-Tag: v2.0.0~69^2~3
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=804fd99934fcdbee8b50b79561af0583cd94d805;hp=be79d229c76946257d97e85cc2a0de9d293f1bae;p=dygraphs.git
merging addition of range selector secondary gradient color (formerly PR 314) with other range selector options
---
diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js
index 67d76cc..575cced 100644
--- a/auto_tests/tests/range_selector.js
+++ b/auto_tests/tests/range_selector.js
@@ -115,6 +115,7 @@ RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() {
showRangeSelector: true,
rangeSelectorHeight: 30,
rangeSelectorPlotFillColor: 'lightyellow',
+ rangeSelectorPlotFillGradientColor: 'rgba(200, 200, 42, 10)',
labels: ['X', 'Y']
};
var data = [
diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 26bb22b..57fbb97 100644
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -739,6 +739,12 @@ Dygraph.OPTIONS_REFERENCE = //
"type": "string",
"description": "The range selector mini plot fill color. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"yellow\". You can also specify null or \"\" to turn off fill."
},
+ "rangeSelectorPlotFillGradientColor": {
+ "default": "white",
+ "labels": ["Interactive Elements"],
+ "type": "string",
+ "description": "The top color for the range selector mini plot fill color gradient. This can be of the form \"#AABBCC\" or \"rgb(255,100,200)\" or \"rgba(255,100,200,42)\" or \"yellow\". You can also specify null or \"\" to disable the gradient and fill with one single color."
+ },
"rangeSelectorBGStrokeColor": {
"default": "gray",
"labels": ["Interactive Elements"],
diff --git a/dygraph-utils.js b/dygraph-utils.js
index 4f782b1..f712650 100644
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -902,6 +902,7 @@ var pixelSafeOptions = {
'pointClickCallback': true,
'pointSize': true,
'rangeSelectorPlotFillColor': true,
+ 'rangeSelectorPlotFillGradientColor': true,
'rangeSelectorPlotStrokeColor': true,
'rangeSelectorBGStrokeColor': true,
'rangeSelectorBGLineWidth': true,
diff --git a/dygraph.js b/dygraph.js
index 35f2b5f..1e1a270 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -336,6 +336,7 @@ Dygraph.DEFAULT_ATTRS = {
showRangeSelector: false,
rangeSelectorHeight: 40,
rangeSelectorPlotStrokeColor: "#808FAB",
+ rangeSelectorPlotFillGradientColor: "white",
rangeSelectorPlotFillColor: "#A7B1C4",
rangeSelectorBGStrokeColor: "gray",
rangeSelectorBGLineWidth: 1,
diff --git a/gallery/range-selector.js b/gallery/range-selector.js
index 3b13ebb..09bfd49 100644
--- a/gallery/range-selector.js
+++ b/gallery/range-selector.js
@@ -11,7 +11,12 @@ Gallery.register(
"",
"",
"Roll period of 14 timesteps, custom range selector height and plot color.
",
- ""].join("\n");
+ "",
+ "",
+ "",
+ "
Dark background, custom range selector gradient color.
",
+ "
",
+ "
"].join("\n");
},
run: function() {
new Dygraph(
@@ -41,6 +46,26 @@ Gallery.register(
rangeSelectorHeight: 30,
rangeSelectorPlotStrokeColor: 'yellow',
rangeSelectorPlotFillColor: 'lightyellow'
- });
+ }
+ );
+ new Dygraph(
+ document.getElementById("darkbg"),
+ data_temp,
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'Nightly Temperatures in New York vs. San Francisco',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+ showRangeSelector: true,
+ rangeSelectorPlotFillColor: 'MediumSlateBlue',
+ rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
+ axisLabelColor: 'white',
+ colorValue: 0.9,
+ fillAlpha: 0.4
+ }
+ );
}
});
diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index f9d4193..2f5cdb7 100644
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -543,6 +543,7 @@ rangeSelector.prototype.drawStaticLayer_ = function() {
*/
rangeSelector.prototype.drawMiniPlot_ = function() {
var fillStyle = this.getOption_('rangeSelectorPlotFillColor');
+ var fillGradientStyle = this.getOption_('rangeSelectorPlotFillGradientColor');
var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor');
if (!fillStyle && !strokeStyle) {
return;
@@ -608,7 +609,9 @@ rangeSelector.prototype.drawMiniPlot_ = function() {
if (fillStyle) {
var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
- lingrad.addColorStop(0, 'white');
+ if (fillGradientStyle) {
+ lingrad.addColorStop(0, fillGradientStyle);
+ }
lingrad.addColorStop(1, fillStyle);
this.bgcanvas_ctx_.fillStyle = lingrad;
ctx.fill();
diff --git a/tests/range-selector.html b/tests/range-selector.html
index 24a7acf..ade8a98 100644
--- a/tests/range-selector.html
+++ b/tests/range-selector.html
@@ -13,6 +13,10 @@
#bordered {
border: 1px solid red;
}
+ #dark-background {
+ background-color: #101015;
+ color: white;
+ }
@@ -34,6 +38,11 @@
Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
+
+
Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.
+
+
+
Demo of range selector with stepPlot
@@ -100,7 +109,44 @@
rangeSelectorHeight: 30
}
);
- g5 = new Dygraph(document.getElementById("stepplot"),
+ g5 = new Dygraph(
+ document.getElementById("darkbg1"),
+ data_temp,
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'Nightly Temperatures in NY vs. SF',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+ showRangeSelector: true,
+ rangeSelectorPlotFillColor: 'MediumSlateBlue',
+ rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
+ axisLabelColor: 'white',
+ colorValue: 0.9,
+ fillAlpha: 0.4
+ }
+ );
+ g6 = new Dygraph(
+ document.getElementById("darkbg2"),
+ data_temp,
+ {
+ rollPeriod: 14,
+ showRoller: true,
+ customBars: true,
+ title: 'Nightly Temperatures in NY vs. SF',
+ ylabel: 'Temperature (F)',
+ legend: 'always',
+ labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
+ showRangeSelector: true,
+ rangeSelectorPlotFillColor: 'MediumSlateBlue',
+ axisLabelColor: 'white',
+ colorValue: 0.9,
+ fillAlpha: 0.4
+ }
+ );
+ g7 = new Dygraph(document.getElementById("stepplot"),
"Date,Idle,Used\n" +
"2008-05-07,70,30\n" +
"2008-05-08,42,88\n" +