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