auto_tests/tests/annotations.js

   1 /**
   2  * @fileoverview Tests relating to annotations
   3  *
   4  * @author danvk@google.com (Dan Vanderkam)
   5  */
   6
   7 import Dygraph from '../../src/dygraph';
   8 import Util from './Util';
   9
  10 describe("annotations", function() {
  11
  12 cleanupAfterEach();
  13
  14 it('testAnnotationsDrawn', function() {
  15   var opts = {
  16     width: 480,
  17     height: 320
  18   };
  19   var data = "X,Y\n" +
  20       "0,-1\n" +
  21       "1,0\n" +
  22       "2,1\n" +
  23       "3,0\n"
  24   ;
  25
  26   var graph = document.getElementById("graph");
  27   var g = new Dygraph(graph, data, opts);
  28   g.setAnnotations([
  29     {
  30       series: 'Y',
  31       x: 1,
  32       shortText: 'A',
  33       text: 'Long A',
  34       cssClass: 'ann1'
  35     },
  36     {
  37       series: 'Y',
  38       x: 2,
  39       shortText: 'B',
  40       text: 'Long B',
  41       cssClass: 'ann2'
  42     }
  43   ]);
  44
  45   assert.equal(2, g.annotations().length);
  46   var a1 = document.getElementsByClassName('ann1');
  47   assert.equal(1, a1.length);
  48   a1 = a1[0];
  49   assert.equal('A', a1.textContent);
  50
  51   var a2 = document.getElementsByClassName('ann2');
  52   assert.equal(1, a2.length);
  53   a2 = a2[0];
  54   assert.equal('B', a2.textContent);
  55 });
  56
  57 // Some errors that should be flagged:
  58 // 1. Invalid series name (e.g. 'X' or 'non-existent')
  59 // 2. Passing a string as 'x' instead of a number (e.g. x: '1')
  60
  61 it('testAnnotationsDontDisappearOnResize', function() {
  62   var opts = {
  63   };
  64   var data = "X,Y\n" +
  65       "0,-1\n" +
  66       "1,0\n" +
  67       "2,1\n" +
  68       "3,0\n"
  69   ;
  70
  71   var graph = document.getElementById("graph");
  72   var g = new Dygraph(graph, data, opts);
  73   g.setAnnotations([
  74     {
  75       series: 'Y',
  76       x: 1,
  77       shortText: 'A',
  78       text: 'Long A',
  79       cssClass: 'ann1'
  80     }
  81   ]);
  82
  83   // Check that it displays at all
  84   assert.equal(1, g.annotations().length);
  85   var a1 = document.getElementsByClassName('ann1');
  86   assert.equal(1, a1.length);
  87   a1 = a1[0];
  88   assert.equal('A', a1.textContent);
  89
  90   // ... and that resizing doesn't kill it.
  91   g.resize(400, 300);
  92   assert.equal(1, g.annotations().length);
  93   var a1 = document.getElementsByClassName('ann1');
  94   assert.equal(1, a1.length);
  95   a1 = a1[0];
  96   assert.equal('A', a1.textContent);
  97 });
  98
  99 // Verify that annotations outside of the visible x-range are not shown.
 100 it('testAnnotationsOutOfRangeX', function() {
 101   var opts = {
 102   };
 103   var data = "X,Y\n" +
 104       "0,-1\n" +
 105       "1,0\n" +
 106       "2,1\n" +
 107       "3,0\n"
 108   ;
 109
 110   var graph = document.getElementById("graph");
 111   var g = new Dygraph(graph, data, opts);
 112   g.setAnnotations([
 113     {
 114       series: 'Y',
 115       x: 1,
 116       shortText: 'A',
 117       text: 'Long A',
 118       cssClass: 'ann1'
 119     }
 120   ]);
 121
 122   // Check that it displays at all
 123   assert.equal(1, g.annotations().length);
 124   var a1 = document.getElementsByClassName('ann1');
 125   assert.equal(1, a1.length);
 126   a1 = a1[0];
 127   assert.equal('A', a1.textContent);
 128
 129   // ... and that panning right removes the annotation.
 130   g.updateOptions({dateWindow: [2, 6]});
 131   assert.equal(1, g.annotations().length);
 132   a1 = document.getElementsByClassName('ann1');
 133   assert.equal(0, a1.length);
 134
 135   // ... and that panning left brings it back.
 136   g.updateOptions({dateWindow: [0, 4]});
 137   assert.equal(1, g.annotations().length);
 138   a1 = document.getElementsByClassName('ann1');
 139   assert.equal(1, a1.length);
 140 });
 141
 142 // Verify that annotations outside of the visible y-range are not shown.
 143 it('testAnnotationsOutOfRangeY', function() {
 144   var opts = {
 145   };
 146   var data = "X,Y\n" +
 147       "0,-1\n" +
 148       "1,0\n" +
 149       "2,1\n" +
 150       "3,0\n"
 151   ;
 152
 153   var graph = document.getElementById("graph");
 154   var g = new Dygraph(graph, data, opts);
 155   g.setAnnotations([
 156     {
 157       series: 'Y',
 158       x: 1,
 159       shortText: 'A',
 160       text: 'Long A',
 161       cssClass: 'ann1'
 162     }
 163   ]);
 164
 165   // ... check that panning up removes the annotation.
 166   g.updateOptions({valueRange: [0.5, 2.5]});
 167   assert.equal(1, g.annotations().length);
 168   var a1 = document.getElementsByClassName('ann1');
 169   assert.equal(0, a1.length);
 170
 171   // ... and that panning down brings it back.
 172   g.updateOptions({valueRange: [-1, 1]});
 173   assert.equal(1, g.annotations().length);
 174   a1 = document.getElementsByClassName('ann1');
 175   assert.equal(1, a1.length);
 176 });
 177
 178 it('testAnnotationsDrawnInDrawCallback', function() {
 179   var data = "X,Y\n" +
 180       "0,-1\n" +
 181       "1,0\n" +
 182       "2,1\n";
 183
 184   var graph = document.getElementById("graph");
 185
 186   var calls = [];
 187   var g = new Dygraph(graph, data, {
 188       width: 480,
 189       height: 320,
 190       drawCallback: function(g, initial) {
 191         calls.push(initial);
 192         if (initial) {
 193           g.setAnnotations([
 194             {
 195               series: 'Y',
 196               x: 1,
 197               shortText: 'A',
 198               text: 'Long A',
 199             },
 200           ]);
 201         }
 202       }
 203     });
 204
 205   assert.deepEqual([true, false], calls);
 206 });
 207
 208
 209 // Test that annotations on the same point are stacked.
 210 // Regression test for http://code.google.com/p/dygraphs/issues/detail?id=256
 211 it('testAnnotationsStacked', function() {
 212   var data = 'X,Y1,Y2\n' +
 213       '0,1,2\n' +
 214       '1,2,3\n';
 215   var graph = document.getElementById("graph");
 216   var annotations = [
 217     {
 218       series: 'Y1',
 219       x: 0,
 220       shortText: '1',
 221       attachAtBottom: true
 222     },
 223     {
 224       series: 'Y2',
 225       x: 0,
 226       shortText: '2',
 227       attachAtBottom: true
 228     }
 229   ];
 230   var g = new Dygraph(graph, data, {
 231     width: 480,
 232     height: 320
 233   });
 234   g.setAnnotations(annotations);
 235
 236   var annEls = document.getElementsByClassName('dygraphDefaultAnnotation');
 237   assert.equal(2, annEls.length);
 238
 239   assert.equal(annEls[0].offsetLeft, annEls[1].offsetLeft);
 240   assert(annEls[1].offsetTop < annEls[0].offsetTop - 10);
 241 });
 242
 243
 244 // Test the .ready() method, which is most often used with setAnnotations().
 245 it('testReady', function() {
 246   var data = 'X,Y1,Y2\n' +
 247       '0,1,2\n' +
 248       '1,2,3\n';
 249   var mockXhr = Util.overrideXMLHttpRequest(data);
 250
 251   var graph = document.getElementById("graph");
 252   var g = new Dygraph(graph, "data.csv", {
 253     width: 480,
 254     height: 320
 255   });
 256
 257   var ready_calls = 0;
 258   g.ready(function() { ready_calls++; });
 259
 260   assert.equal(0, ready_calls);
 261   mockXhr.respond();
 262   assert.equal(1, ready_calls);
 263
 264   // Make sure that ready isn't called on redraws.
 265   g.updateOptions({});
 266   assert.equal(1, ready_calls);
 267
 268   // Or data changes.
 269   g.updateOptions({file: data});
 270   assert.equal(1, ready_calls);
 271 });
 272
 273 });