From 79cb28dd681a26f9e7824f61d95c7458ca5104e7 Mon Sep 17 00:00:00 2001
From: blcook223 <benjamin.l.cook@gmail.com>
Date: Sun, 8 Mar 2015 23:34:52 -0500
Subject: [PATCH] added option for range selector gradient secondary color
 (formerly PR 314)

---
 auto_tests/tests/range_selector.js |  3 ++-
 dygraph-options-reference.js       |  6 +++++
 dygraph-utils.js                   |  5 ++--
 dygraph.js                         | 31 ++++++++++++------------
 gallery/range-selector.js          | 29 +++++++++++++++++++++--
 plugins/range-selector.js          |  9 ++++---
 tests/range-selector.html          | 48 +++++++++++++++++++++++++++++++++++++-
 7 files changed, 107 insertions(+), 24 deletions(-)

diff --git a/auto_tests/tests/range_selector.js b/auto_tests/tests/range_selector.js
index a145d7a..ddabac4 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 = [
@@ -343,7 +344,7 @@ RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = funct
              ];
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
-  
+
   //assert, that the range selector is at top position 70 since the 30px of the
   // xAxis shouldn't be reserved since it isn't drawn.
   this.assertGraphExistence(g, graph);
diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 596e541..3e13d85 100644
--- 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."
+  },
   "showInRangeSelector": {
     "default": "null",
     "labels": ["Interactive Elements"],
diff --git a/dygraph-utils.js b/dygraph-utils.js
index 992242d..9634a8b 100644
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -355,7 +355,7 @@ Dygraph.zeropad = function(x) {
 };
 
 /**
- * Date accessors to get the parts of a calendar date (year, month, 
+ * Date accessors to get the parts of a calendar date (year, month,
  * day, hour, minute, second and millisecond) according to local time,
  * and factory method to call the Date constructor with an array of arguments.
  */
@@ -374,7 +374,7 @@ Dygraph.DateAccessorsLocal = {
 };
 
 /**
- * Date accessors to get the parts of a calendar date (year, month, 
+ * Date accessors to get the parts of a calendar date (year, month,
  * day of month, hour, minute, second and millisecond) according to UTC time,
  * and factory method to call the Date constructor with an array of arguments.
  */
@@ -902,6 +902,7 @@ var pixelSafeOptions = {
   'pointClickCallback': true,
   'pointSize': true,
   'rangeSelectorPlotFillColor': true,
+  'rangeSelectorPlotFillGradientColor': true,
   'rangeSelectorPlotStrokeColor': true,
   'showLabelsOnHighlight': true,
   'showRoller': true,
diff --git a/dygraph.js b/dygraph.js
index 5f6e1e1..5b2b587 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -203,7 +203,7 @@ Dygraph.SHORT_MONTH_NAMES_ = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', '
 
 /**
  * Convert a JS date to a string appropriate to display on an axis that
- * is displaying values at the stated granularity. This respects the 
+ * is displaying values at the stated granularity. This respects the
  * labelsUTC option.
  * @param {Date} date The date to format
  * @param {number} granularity One of the Dygraph granularity constants
@@ -241,7 +241,7 @@ Dygraph.dateAxisLabelFormatter = function(date, granularity, opts) {
 Dygraph.dateAxisFormatter = Dygraph.dateAxisLabelFormatter;
 
 /**
- * Return a string version of a JS date for a value label. This respects the 
+ * Return a string version of a JS date for a value label. This respects the
  * labelsUTC option.
  * @param {Date} date The date to be formatted
  * @param {Dygraph} opts An options view
@@ -336,6 +336,7 @@ Dygraph.DEFAULT_ATTRS = {
   showRangeSelector: false,
   rangeSelectorHeight: 40,
   rangeSelectorPlotStrokeColor: "#808FAB",
+  rangeSelectorPlotFillGradientColor: "white",
   rangeSelectorPlotFillColor: "#A7B1C4",
   showInRangeSelector: null,
 
@@ -1986,7 +1987,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
 };
 
 /**
- * Fetch left offset from the specified set index or if not passed, the 
+ * Fetch left offset from the specified set index or if not passed, the
  * first defined boundaryIds record (see bug #236).
  * @private
  */
@@ -2323,7 +2324,7 @@ Dygraph.prototype.getHandlerClass_ = function() {
  */
 Dygraph.prototype.predraw_ = function() {
   var start = new Date();
-  
+
   // Create the correct dataHandler
   this.dataHandler_ = new (this.getHandlerClass_())();
 
@@ -2361,7 +2362,7 @@ Dygraph.prototype.predraw_ = function() {
     if (this.rollPeriod_ > 1) {
       series = this.dataHandler_.rollingAverage(series, this.rollPeriod_, this.attributes_);
     }
-    
+
     this.rolledSeries_.push(series);
   }
 
@@ -2520,7 +2521,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
   var seriesIdx, sampleIdx;
   var firstIdx, lastIdx;
   var axisIdx;
-  
+
   // Loop over the fields (series).  Go from the last to the first,
   // because if they're stacked that's how we accumulate the values.
   var num_series = rolledSeries.length - 1;
@@ -2538,7 +2539,7 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
 
       // TODO(danvk): do binary search instead of linear search.
       // TODO(danvk): pass firstIdx and lastIdx directly to the renderer.
-      firstIdx = null; 
+      firstIdx = null;
       lastIdx = null;
       for (sampleIdx = 0; sampleIdx < series.length; sampleIdx++) {
         if (series[sampleIdx][0] >= low && firstIdx === null) {
@@ -2572,9 +2573,9 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
       if (correctedLastIdx !== lastIdx) {
         lastIdx = correctedLastIdx;
       }
-      
+
       boundaryIds[seriesIdx-1] = [firstIdx, lastIdx];
-      
+
       // .slice's end is exclusive, we want to include lastIdx.
       series = series.slice(firstIdx, lastIdx + 1);
     } else {
@@ -2583,10 +2584,10 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) {
     }
 
     var seriesName = this.attr_("labels")[seriesIdx];
-    var seriesExtremes = this.dataHandler_.getExtremeYValues(series, 
+    var seriesExtremes = this.dataHandler_.getExtremeYValues(series,
         dateWindow, this.getBooleanOption("stepPlot",seriesName));
 
-    var seriesPoints = this.dataHandler_.seriesToPoints(series, 
+    var seriesPoints = this.dataHandler_.seriesToPoints(series,
         seriesName, boundaryIds[seriesIdx-1][0]);
 
     if (this.getBooleanOption("stackedGraph")) {
@@ -2801,7 +2802,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
   };
   var numAxes = this.attributes_.numAxes();
   var ypadCompat, span, series, ypad;
-  
+
   var p_axis;
 
   // Compute extreme values, a span and tick marks for each axis.
@@ -2927,8 +2928,8 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
     } else {
       axis.computedValueRange = axis.extremeRange;
     }
-    
-    
+
+
     if (independentTicks) {
       axis.independentTicks = independentTicks;
       var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
@@ -2950,7 +2951,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) {
   // independent ticks, then that is permissible as well.
   for (var i = 0; i < numAxes; i++) {
     var axis = this.axes_[i];
-    
+
     if (!axis.independentTicks) {
       var opts = this.optionsViewForAxis_('y' + (i ? '2' : ''));
       var ticker = opts('ticker');
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(
           "<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 0f72f95..6819eea 100644
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -176,7 +176,7 @@ rangeSelector.prototype.resize_ = function() {
   }
 
   var plotArea = this.dygraph_.layout_.getPlotArea();
-  
+
   var xAxisLabelHeight = 0;
   if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) {
     xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
@@ -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();
@@ -658,7 +661,7 @@ rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() {
     if (g.rollPeriod() > 1) {
       series = dataHandler.rollingAverage(series, g.rollPeriod(), options);
     }
-    
+
     rolledSeries.push(series);
   }
 
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;
+    }
     </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" +
-- 
2.7.4