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