auto_tests/tests/axis_labels-deprecated.js

   1 /**
   2  * @fileoverview Test cases for how axis labels are chosen and formatted,
   3  * specializing on the deprecated xLabelFormatter, etc.
   4  *
   5  * @author dan@dygraphs.com (Dan Vanderkam)
   6  */
   7 var DeprecatedAxisLabelsTestCase = TestCase("axis-labels-deprecated");
   8
   9 DeprecatedAxisLabelsTestCase.prototype.setUp = function() {
  10   document.body.innerHTML = "<div id='graph'></div>";
  11 };
  12
  13 DeprecatedAxisLabelsTestCase.prototype.tearDown = function() {
  14 };
  15
  16 // TODO(konigsberg): Scope these functions.
  17
  18 function getYLabels() {
  19   var y_labels = document.getElementsByClassName("dygraph-axis-label-y");
  20   var ary = [];
  21   for (var i = 0; i < y_labels.length; i++) {
  22     ary.push(y_labels[i].innerHTML);
  23   }
  24   return ary;
  25 }
  26
  27 function getXLabels() {
  28   var x_labels = document.getElementsByClassName("dygraph-axis-label-x");
  29   var ary = [];
  30   for (var i = 0; i < x_labels.length; i++) {
  31     ary.push(x_labels[i].innerHTML);
  32   }
  33   return ary;
  34 }
  35
  36 function getLegend() {
  37   var legend = document.getElementsByClassName("dygraph-legend")[0];
  38   return legend.textContent;
  39 }
  40
  41 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDeprecatedXAxisTimeLabelFormatter = function() {
  42   var opts = {
  43     width: 480,
  44     height: 320
  45   };
  46   var data = [[5.0,0],[5.1,1],[5.2,2],[5.3,3],[5.4,4],[5.5,5],[5.6,6],[5.7,7],[5.8,8],[5.9,9]];
  47   var graph = document.getElementById("graph");
  48   var g = new Dygraph(graph, data, opts);
  49   g.updateOptions({
  50     xAxisLabelFormatter: function (totalMinutes) {
  51       var hours   = Math.floor( totalMinutes / 60);
  52       var minutes = Math.floor((totalMinutes - (hours * 60)));
  53       var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
  54
  55       if (hours   < 10) hours   = "0" + hours;
  56       if (minutes < 10) minutes = "0" + minutes;
  57       if (seconds < 10) seconds = "0" + seconds;
  58
  59       return hours + ':' + minutes + ':' + seconds;
  60     }
  61   });
  62
  63   assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], getXLabels());
  64
  65   // The legend does not use the xAxisLabelFormatter:
  66   g.setSelection(1);
  67   assertEquals('5.1: Y1:1', getLegend());
  68 };
  69
  70 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatter = function () {
  71   var opts = {
  72     width: 480,
  73     height: 320,
  74     xAxisLabelFormatter: function(x, granularity, opts, dg) {
  75       assertEquals('number', typeof(x));
  76       assertEquals('number', typeof(granularity));
  77       assertEquals('function', typeof(opts));
  78       assertEquals('[Dygraph graph]', dg.toString());
  79       return 'x' + x;
  80     },
  81     yAxisLabelFormatter: function(y, granularity, opts, dg) {
  82       assertEquals('number', typeof(y));
  83       assertEquals('number', typeof(granularity));
  84       assertEquals('function', typeof(opts));
  85       assertEquals('[Dygraph graph]', dg.toString());
  86       return 'y' + y;
  87     },
  88     labels: ['x', 'y']
  89   };
  90   var data = [];
  91   for (var i = 0; i < 10; i++) {
  92     data.push([i, 2 * i]);
  93   }
  94   var graph = document.getElementById("graph");
  95   var g = new Dygraph(graph, data, opts);
  96
  97   assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
  98   assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
  99
 100   g.setSelection(2);
 101   assertEquals("2: y:4", getLegend());
 102 };
 103
 104 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateAxisLabelFormatter = function () {
 105   var opts = {
 106     width: 480,
 107     height: 320,
 108     xAxisLabelFormatter: function(x, granularity, opts, dg) {
 109       assertTrue(Dygraph.isDateLike(x));
 110       assertEquals('number', typeof(granularity));
 111       assertEquals('function', typeof(opts));
 112       assertEquals('[Dygraph graph]', dg.toString());
 113       return 'x' + x.strftime('%Y/%m/%d');
 114     },
 115     yAxisLabelFormatter: function(y, granularity, opts, dg) {
 116       assertEquals('number', typeof(y));
 117       assertEquals('number', typeof(granularity));
 118       assertEquals('function', typeof(opts));
 119       assertEquals('[Dygraph graph]', dg.toString());
 120       return 'y' + y;
 121     },
 122     labels: ['x', 'y']
 123   };
 124   var data = [];
 125   for (var i = 1; i < 10; i++) {
 126     data.push([new Date("2011/01/0" + i), 2 * i]);
 127   }
 128   var graph = document.getElementById("graph");
 129   var g = new Dygraph(graph, data, opts);
 130
 131   assertEquals(["x2011/01/01", "x2011/01/02", "x2011/01/03", "x2011/01/04", "x2011/01/05", "x2011/01/06", "x2011/01/07", "x2011/01/08", "x2011/01/09"], getXLabels());
 132   assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
 133
 134   g.setSelection(0);
 135   assertEquals("2011/01/01: y:2", getLegend());
 136 };
 137
 138 // This test verifies that when a valueFormatter is set (but not an
 139 // axisLabelFormatter), then the valueFormatter is used to format the axis
 140 // labels.
 141 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedValueFormatter = function () {
 142   var opts = {
 143     width: 480,
 144     height: 320,
 145     xValueFormatter: function(x, opts, series_name, dg) {
 146       assertEquals('number', typeof(x));
 147       assertEquals('function', typeof(opts));
 148       assertEquals('string', typeof(series_name));
 149       assertEquals('[Dygraph graph]', dg.toString());
 150       return 'x' + x;
 151     },
 152     yValueFormatter: function(y, opts, series_name, dg) {
 153       assertEquals('number', typeof(y));
 154       assertEquals('function', typeof(opts));
 155       assertEquals('string', typeof(series_name));
 156       assertEquals('[Dygraph graph]', dg.toString());
 157       return 'y' + y;
 158     },
 159     labels: ['x', 'y']
 160   };
 161   var data = [];
 162   for (var i = 0; i < 10; i++) {
 163     data.push([i, 2 * i]);
 164   }
 165   var graph = document.getElementById("graph");
 166   var g = new Dygraph(graph, data, opts);
 167
 168   // the valueFormatter options do not affect the ticks.
 169   assertEquals(['0','2','4','6','8'], getXLabels());
 170   assertEquals(['0','2','4','6','8','10','12','14','16','18'],
 171                getYLabels());
 172
 173   // they do affect the legend, however.
 174   g.setSelection(2);
 175   assertEquals("x2: y:y4", getLegend());
 176 };
 177
 178 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () {
 179   var opts = {
 180     width: 480,
 181     height: 320,
 182     xValueFormatter: function(x, opts, series_name, dg) {
 183       assertEquals('number', typeof(x));
 184       assertEquals('function', typeof(opts));
 185       assertEquals('string', typeof(series_name));
 186       assertEquals('[Dygraph graph]', dg.toString());
 187       return 'x' + new Date(x).strftime('%Y/%m/%d');
 188     },
 189     yValueFormatter: function(y, opts, series_name, dg) {
 190       assertEquals('number', typeof(y));
 191       assertEquals('function', typeof(opts));
 192       assertEquals('string', typeof(series_name));
 193       assertEquals('[Dygraph graph]', dg.toString());
 194       return 'y' + y;
 195     },
 196     labels: ['x', 'y']
 197   };
 198
 199   var data = [];
 200   for (var i = 1; i < 10; i++) {
 201     data.push([new Date("2011/01/0" + i), 2 * i]);
 202   }
 203   var graph = document.getElementById("graph");
 204   var g = new Dygraph(graph, data, opts);
 205
 206   // valueFormatters do not affect ticks.
 207   assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan','09Jan'], getXLabels());
 208   assertEquals(['2','4','6','8','10','12','14','16','18'], getYLabels());
 209
 210   // the valueFormatter options also affect the legend.
 211   g.setSelection(2);
 212   assertEquals('x2011/01/03: y:y6', getLegend());
 213 };
 214
 215 // This test verifies that when both a valueFormatter and an axisLabelFormatter
 216 // are specified, the axisLabelFormatter takes precedence.
 217 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () {
 218   var opts = {
 219     width: 480,
 220     height: 320,
 221     xValueFormatter: function(x) {
 222       return 'xvf' + x;
 223     },
 224     yValueFormatter: function(y) {
 225       return 'yvf' + y;
 226     },
 227     xAxisLabelFormatter: function(x, granularity) {
 228       return 'x' + x;
 229     },
 230     yAxisLabelFormatter: function(y) {
 231       return 'y' + y;
 232     },
 233     labels: ['x', 'y']
 234   };
 235   var data = [];
 236   for (var i = 0; i < 10; i++) {
 237     data.push([i, 2 * i]);
 238   }
 239   var graph = document.getElementById("graph");
 240   var g = new Dygraph(graph, data, opts);
 241
 242   assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
 243   assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
 244
 245   g.setSelection(9);
 246   assertEquals("xvf9: y:yvf18", getLegend());
 247 };
 248
 249 // This is the same as the previous test, except that options are added
 250 // one-by-one.
 251 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () {
 252   var opts = {
 253     width: 480,
 254     height: 320,
 255     labels: ['x', 'y']
 256   };
 257   var data = [];
 258   for (var i = 0; i < 10; i++) {
 259     data.push([i, 2 * i]);
 260   }
 261   var graph = document.getElementById("graph");
 262   var g = new Dygraph(graph, data, opts);
 263   g.updateOptions({
 264     xValueFormatter: function(x) {
 265       return 'xvf' + x;
 266     }
 267   });
 268   g.updateOptions({
 269     yValueFormatter: function(y) {
 270       return 'yvf' + y;
 271     }
 272   });
 273   g.updateOptions({
 274     xAxisLabelFormatter: function(x, granularity) {
 275       return 'x' + x;
 276     }
 277   });
 278   g.updateOptions({
 279     yAxisLabelFormatter: function(y) {
 280       return 'y' + y;
 281     }
 282   });
 283
 284   assertEquals(["x0","x2","x4","x6","x8"], getXLabels());
 285   assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
 286
 287   g.setSelection(9);
 288   assertEquals("xvf9: y:yvf18", getLegend());
 289 };