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