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   };
  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   assert.deepEqual(["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   assert.equal('5.1: Y1: 1', Util.getLegend());
  47 });
  48
  49 it('testDeprecatedAxisLabelFormatter', function() {
  50   var opts = {
  51     width: 480,
  52     height: 320,
  53     axes : {
  54       x : {
  55         axisLabelFormatter: function(x, granularity, opts, dg) {
  56           assert.equal('number', typeof(x));
  57           assert.equal('number', typeof(granularity));
  58           assert.equal('function', typeof(opts));
  59           assert.equal('[Dygraph graph]', dg.toString());
  60           return 'x' + x;
  61         }
  62       },
  63       y : {
  64         axisLabelFormatter: function(y, granularity, opts, dg) {
  65           assert.equal('number', typeof(y));
  66           assert.equal('number', typeof(granularity));
  67           assert.equal('function', typeof(opts));
  68           assert.equal('[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   assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels());
  83   assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels());
  84
  85   g.setSelection(2);
  86   assert.equal("2: y: 4", Util.getLegend());
  87 });
  88
  89 it('testDeprecatedDateAxisLabelFormatter', function() {
  90   var opts = {
  91     width: 480,
  92     height: 320,
  93     axes : {
  94       x : {
  95         axisLabelFormatter: function(x, granularity, opts, dg) {
  96           assert.isTrue(Dygraph.isDateLike(x));
  97           assert.equal('number', typeof(granularity));
  98           assert.equal('function', typeof(opts));
  99           assert.equal('[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           assert.equal('number', typeof(y));
 107           assert.equal('number', typeof(granularity));
 108           assert.equal('function', typeof(opts));
 109           assert.equal('[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   assert.deepEqual(["x2011/01/02","x2011/01/04","x2011/01/06","x2011/01/08"], Util.getXLabels());
 124   assert.deepEqual(["y5","y10","y15"], Util.getYLabels());
 125
 126   g.setSelection(0);
 127   assert.equal("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 it('testDeprecatedValueFormatter', function() {
 134   var opts = {
 135     width: 480,
 136     height: 320,
 137     axes : {
 138       x : {
 139         valueFormatter: function(x, opts, series_name, dg) {
 140           assert.equal('number', typeof(x));
 141           assert.equal('function', typeof(opts));
 142           assert.equal('string', typeof(series_name));
 143           assert.equal('[Dygraph graph]', dg.toString());
 144           return 'x' + x;
 145         }
 146       },
 147       y : {
 148         valueFormatter: function(y, opts, series_name, dg) {
 149           assert.equal('number', typeof(y));
 150           assert.equal('function', typeof(opts));
 151           assert.equal('string', typeof(series_name));
 152           assert.equal('[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   assert.deepEqual(['0','2','4','6','8'], Util.getXLabels());
 168   assert.deepEqual(["0","5","10","15"], Util.getYLabels());
 169
 170   // they do affect the legend, however.
 171   g.setSelection(2);
 172   assert.equal("x2: y: y4", Util.getLegend());
 173 });
 174
 175 it('testDeprecatedDateValueFormatter', function() {
 176   var opts = {
 177     width: 480,
 178     height: 320,
 179     axes : {
 180       x : {
 181         valueFormatter: function(x, opts, series_name, dg) {
 182           assert.equal('number', typeof(x));
 183           assert.equal('function', typeof(opts));
 184           assert.equal('string', typeof(series_name));
 185           assert.equal('[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           assert.equal('number', typeof(y));
 193           assert.equal('function', typeof(opts));
 194           assert.equal('string', typeof(series_name));
 195           assert.equal('[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   assert.deepEqual(["02 Jan","04 Jan","06 Jan","08 Jan"], Util.getXLabels());
 212   assert.deepEqual(["5","10","15"], Util.getYLabels());
 213
 214   // the valueFormatter options also affect the legend.
 215   g.setSelection(2);
 216   assert.equal('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 it('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   assert.deepEqual(['x0','x2','x4','x6','x8'], Util.getXLabels());
 253   assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels());
 254
 255   g.setSelection(9);
 256   assert.equal("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 it('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   assert.deepEqual(["x0","x2","x4","x6","x8"], Util.getXLabels());
 311   assert.deepEqual(["y0","y5","y10","y15"], Util.getYLabels());
 312
 313   g.setSelection(9);
 314   assert.equal("xvf9: y: yvf18", Util.getLegend());
 315 });
 316
 317 });