merging addition of range selector secondary gradient color (formerly PR 314) with...

diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js
index 67d76cc..575cced 100644 (file)
--- 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 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -739,6 +739,12 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "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 (file)
--- 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 (file)
--- 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 (file)
--- a/gallery/range-selector.js
+++ b/gallery/range-selector.js
@@ -11,7 +11,12 @@ Gallery.register(
           "<div id='noroll' style='width:600px; height:300px;'></div>",
           "",
           "<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>",
-          "<div id='roll14' style='width:600px; height:300px;'></div>"].join("\n");
+          "<div id='roll14' style='width:600px; height:300px;'></div>",
+          "",
+          "<div style='background-color: #101015; color: white'>",
+          "<p>Dark background, custom range selector gradient color.</p>",
+          "<div id='darkbg' style='width:600px; height:300px;'></div>",
+          "</div>"].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 (file)
--- 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 (file)
--- 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;
+    }
     </style>
   </head>
   <body>
@@ -34,6 +38,11 @@
       Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
     </p>
     <div id="nochart" style="width:800px; height:30px;"></div>
+    <div id="dark-background">
+      <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
+      <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
+      <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
+    </div>
     <p>Demo of range selector with stepPlot</p>
     <div id="stepplot" style="width:800px; height:320px;"></div>
 
@@ -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" +