Only include visible series in range selector (#785)
[dygraphs.git] / auto_tests / tests / range_selector.js
index 0c7c8dc..1bba353 100644 (file)
@@ -4,13 +4,28 @@
  * @fileoverview Regression tests for range selector.
  * @author paul.eric.felix@gmail.com (Paul Felix)
  */
+
+import Dygraph from '../../src/dygraph';
+import * as utils from '../../src/dygraph-utils';
+import RangeSelectorPlugin from '../../src/plugins/range-selector';
+
+import Util from './Util';
+import DygraphOps from './DygraphOps';
+import CanvasAssertions from './CanvasAssertions';
+import Proxy from './Proxy';
+
 describe("range-selector", function() {
 
+cleanupAfterEach();
+
+var restoreConsole;
+var logs = {};
 beforeEach(function() {
-  document.body.innerHTML = "<div id='graph'></div>";
+  restoreConsole = Util.captureConsole(logs);
 });
 
 afterEach(function() {
+  restoreConsole();
 });
 
 it('testRangeSelector', function() {
@@ -183,8 +198,13 @@ it('testRangeSelectorEnablingAfterCreation', function() {
              ];
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
+  var initialChartHeight = g.getArea().h;
   g.updateOptions({showRangeSelector: true});
   assertGraphExistence(g, graph);
+  assert(g.getArea().h < initialChartHeight);  // range selector shown
+
+  g.updateOptions({showRangeSelector: false});
+  assert.equal(g.getArea().h, initialChartHeight);  // range selector hidden
 });
 
 // The animatedZooms option does not work with the range selector. Make sure it gets turned off.
@@ -211,6 +231,10 @@ it('testRangeSelectorWithAnimatedZoomsOption', function() {
   var g = new Dygraph(graph, data, opts);
   assertGraphExistence(g, graph);
   assert.isFalse(g.getOption('animatedZooms'));
+  assert.deepEqual(logs, {
+    log: [], error: [],
+    warn: ["Animated zooms and range selector are not compatible; disabling animatedZooms."]
+  });
 });
 
 it('testRangeSelectorWithAnimatedZoomsOption2', function() {
@@ -236,6 +260,10 @@ it('testRangeSelectorWithAnimatedZoomsOption2', function() {
   g.updateOptions({showRangeSelector: true});
   assertGraphExistence(g, graph);
   assert.isFalse(g.getOption('animatedZooms'));
+  assert.deepEqual(logs, {
+    log: [], error: [],
+    warn: ["Animated zooms and range selector are not compatible; disabling animatedZooms."]
+  });
 });
 
 it('testRangeSelectorInteraction', function() {
@@ -288,8 +316,8 @@ it('testRangeSelectorInteraction', function() {
   zoomhandles[0].dispatchEvent(mouseUpEvent);
 
   var newXRange = g.xAxisRange().slice();
-  assert('left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0], newXRange[0] > xRange[0]);
-  assert.equal('right zoomhandle should not have moved', xRange[1], newXRange[1]);
+  assert(newXRange[0] > xRange[0], 'left zoomhandle should have moved: '+newXRange[0]+'>'+xRange[0]);
+  assert.equal(xRange[1], newXRange[1], 'right zoomhandle should not have moved');
 
   // Move right zoomhandle in
   xRange = newXRange;
@@ -318,8 +346,8 @@ it('testRangeSelectorInteraction', function() {
   zoomhandles[1].dispatchEvent(mouseUpEvent);
 
   var newXRange = g.xAxisRange().slice();
-  assert('right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
-  assert.equal('left zoomhandle should not have moved', xRange[0], newXRange[0]);
+  assert(newXRange[1] < xRange[1], 'right zoomhandle should have moved: '+newXRange[1]+'<'+xRange[1]);
+  assert.equal(xRange[0], newXRange[0], 'left zoomhandle should not have moved');
 
   // Pan left
   xRange = newXRange;
@@ -353,8 +381,8 @@ it('testRangeSelectorInteraction', function() {
   fgcanvas.dispatchEvent(mouseUpEvent);
 
   var newXRange = g.xAxisRange().slice();
-  assert(newXRange[0]+'<'+xRange[0], newXRange[0] < xRange[0]);
-  assert(newXRange[1]+'<'+xRange[1], newXRange[1] < xRange[1]);
+  assert(newXRange[0] < xRange[0], newXRange[0]+'<'+xRange[0]);
+  assert(newXRange[1] < xRange[1], newXRange[1]+'<'+xRange[1]);
 });
 
 
@@ -379,17 +407,16 @@ it('testRangeSelectorPositionIfXAxisNotDrawn', function() {
   // xAxis shouldn't be reserved since it isn't drawn.
   assertGraphExistence(g, graph);
   var bgcanvas = graph.getElementsByClassName('dygraph-rangesel-bgcanvas')[0];
-  assert.equal("Range selector is not at the expected position.","70px", bgcanvas.style.top);
+  assert.equal("70px", bgcanvas.style.top, "Range selector is not at the expected position.");
   var fgcanvas = graph.getElementsByClassName('dygraph-rangesel-fgcanvas')[0];
-  assert.equal("Range selector is not at the expected position.","70px", fgcanvas.style.top);
+  assert.equal("70px", fgcanvas.style.top, "Range selector is not at the expected position.");
 });
 
 it('testMiniPlotDrawn', function() {
   // Install Proxy to track canvas calls.
-  var origFunc = Dygraph.getContext;
+  var origFunc = utils.getContext;
   var miniHtx;
-  Dygraph.getContext = function(canvas) {
-    console.log(canvas.className);
+  utils.getContext = function(canvas) {
     if (canvas.className != 'dygraph-rangesel-bgcanvas') {
       return origFunc(canvas);
     }
@@ -419,7 +446,7 @@ it('testMiniPlotDrawn', function() {
   assert.isNotNull(miniHtx);
   assert.isTrue(0 < CanvasAssertions.numLinesDrawn(miniHtx, '#ff0000'));
 
-  Dygraph.getContext = origFunc;
+  utils.getContext = origFunc;
 });
 
 // Tests data computation for the mini plot with a single series.
@@ -436,7 +463,7 @@ it('testSingleCombinedSeries', function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
 
-  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
   assert.isNotNull(rangeSelector);
 
   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
@@ -466,7 +493,7 @@ it('testCombinedSeries', function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
 
-  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
   assert.isNotNull(rangeSelector);
 
   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
@@ -499,7 +526,7 @@ it('testSelectedCombinedSeries', function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
 
-  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
   assert.isNotNull(rangeSelector);
 
   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
@@ -529,7 +556,7 @@ it('testSingleCombinedSeriesCustomBars', function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
 
-  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
   assert.isNotNull(rangeSelector);
 
   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
@@ -558,7 +585,7 @@ it('testSingleCombinedSeriesErrorBars', function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
 
-  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
   assert.isNotNull(rangeSelector);
 
   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
@@ -588,7 +615,7 @@ it('testTwoCombinedSeriesCustomBars', function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
 
-  var rangeSelector = g.getPluginInstance_(Dygraph.Plugins.RangeSelector);
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
   assert.isNotNull(rangeSelector);
 
   var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
@@ -603,6 +630,73 @@ it('testTwoCombinedSeriesCustomBars', function() {
   }, combinedSeries);
 });
 
+it('testHiddenSeriesExcludedFromMiniplot', function() {
+  var opts = {
+    showRangeSelector: true,
+    labels: ['X', 'Y1', 'Y2'],
+    visibility: [true, false]
+  };
+  var data = [
+      [0, 1, 3],  // average = 2
+      [5, 4, 6],  // average = 5
+      [10, 7, 9]  // average = 8
+    ];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  var rangeSelector = g.getPluginInstance_(RangeSelectorPlugin);
+  assert.isNotNull(rangeSelector);
+
+  // Invisible series (e.g. Y2) are not included in the combined series.
+  var combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
+  assert.deepEqual({
+    yMin: 1 - 6 * 0.25,  // 25% padding on single series range.
+    yMax: 7 + 6 * 0.25,
+    data: [
+      [0, 1],
+      [5, 4],
+      [10, 7]
+    ]
+  }, combinedSeries);
+
+  // If Y2 is explicitly marked to be included in the range selector,
+  // then it will be (even if it's not visible). Since we've started being
+  // explicit about marking series for inclusion, this means that Y1 is no
+  // longer included.
+  g.updateOptions({
+    series: {
+      Y2: { showInRangeSelector: true },
+    }
+  });
+  combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
+  assert.deepEqual({
+    yMin: 3 - 6 * 0.25,  // 25% padding on combined series range.
+    yMax: 9 + 6 * 0.25,
+    data: [
+      [0, 3],
+      [5, 6],
+      [10, 9]
+    ]
+  }, combinedSeries);
+
+  // If we explicitly mark Y1, too, then it also gets included.
+  g.updateOptions({
+    series: {
+      Y1: { showInRangeSelector: true },
+      Y2: { showInRangeSelector: true },
+    }
+  });
+  combinedSeries = rangeSelector.computeCombinedSeriesAndLimits_();
+  assert.deepEqual({
+    yMin: 2 - 6 * 0.25,  // 25% padding on combined series range.
+    yMax: 8 + 6 * 0.25,
+    data: [
+      [0, 2],
+      [5, 5],
+      [10, 8]
+    ]
+  }, combinedSeries);
+});
 
 var assertGraphExistence = function(g, graph) {
   assert.isNotNull(g);