added some additional options for styling the range selector plugin
[dygraphs.git] / auto_tests / tests / range_selector.js
index 9f83188..29a6709 100644 (file)
@@ -115,7 +115,37 @@ RangeSelectorTestCase.prototype.testRangeSelectorOptions = function() {
     showRangeSelector: true,
     rangeSelectorHeight: 30,
     rangeSelectorPlotFillColor: 'lightyellow',
-    rangeSelectorPlotStyleColor: 'yellow',
+    labels: ['X', 'Y']
+  };
+  var data = [
+               [1, 10],
+               [2, 15],
+               [3, 10],
+               [4, 15],
+               [5, 10],
+               [6, 15],
+               [7, 10],
+               [8, 15],
+               [9, 10]
+             ];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+  this.assertGraphExistence(g, graph);
+};
+
+RangeSelectorTestCase.prototype.testAdditionalRangeSelectorOptions = function() {
+  var opts = {
+    width: 480,
+    height: 320,
+    showRangeSelector: true,
+    rangeSelectorHeight: 30,
+    rangeSelectorBGStrokeColor: 'blue',
+    rangeSelectorBGLineWidth: 3,
+    rangeSelectorPlotLineWidth: 0.5,
+    rangeSelectorPlotGradientColor: 'gray',
+    rangeSelectorFGStrokeColor: 'red',
+    rangeSelectorFGLineWidth: 2,
+    rangeSelectorAlpha: 0.8,
     labels: ['X', 'Y']
   };
   var data = [
@@ -333,7 +363,7 @@ RangeSelectorTestCase.prototype.testRangeSelectorPositionIfXAxisNotDrawn = funct
     width: 480,
     height: 100,
     xAxisHeight: 30,
-    drawXAxis: false,
+    axes : { x : { drawAxis: false }},
     showRangeSelector: true,
     rangeSelectorHeight: 30,
     labels: ['X', 'Y']
@@ -344,7 +374,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);
@@ -371,7 +401,7 @@ RangeSelectorTestCase.prototype.testMiniPlotDrawn = function() {
     width: 480,
     height: 100,
     xAxisHeight: 30,
-    drawXAxis: false,
+    axes : { x : { drawAxis: false }},
     showRangeSelector: true,
     rangeSelectorHeight: 30,
     rangeSelectorPlotStrokeColor: '#ff0000',
@@ -451,6 +481,39 @@ RangeSelectorTestCase.prototype.testCombinedSeries = function() {
   }, combinedSeries);
 };
 
+// Tests selection of a specific series to average for the mini plot.
+RangeSelectorTestCase.prototype.testSelectedCombinedSeries = function() {
+  var opts = {
+    showRangeSelector: true,
+    labels: ['X', 'Y1', 'Y2', 'Y3', 'Y4'],
+    series: {
+      'Y1': { showInRangeSelector: true },
+      'Y3': { showInRangeSelector: true }
+    }
+  };
+  var data = [
+      [0, 5, 8, 13, 21],  // average (first and third) = 9
+      [5, 1, 3, 7, 14],   // average (first and third) = 4
+      [10, 0, 19, 10, 6]  // average (first and third) = 5
+    ];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  assertNotNull(rangeSelector);
+
+  var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
+  assertEquals({
+    yMin: 4 - 5 * 0.25,  // 25% padding on combined series range.
+    yMax: 9 + 5 * 0.25,
+    data: [
+      [0, 9],
+      [5, 4],
+      [10, 5]
+    ]
+  }, combinedSeries);
+};
+
 // Tests data computation for the mini plot with a single error bar series.
 RangeSelectorTestCase.prototype.testSingleCombinedSeriesCustomBars = function() {
   var opts = {