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","y5","y10","y15"], 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     axes: {
  98       x: { pixelsPerLabel: 60 }
  99     },
 100     labels: ['x', 'y']
 101   };
 102   var data = [];
 103   for (var i = 1; i < 10; i++) {
 104     data.push([new Date("2011/01/0" + i), 2 * i]);
 105   }
 106   var graph = document.getElementById("graph");
 107   var g = new Dygraph(graph, data, opts);
 108
 109   assertEquals(["x2011/01/02","x2011/01/04","x2011/01/06","x2011/01/08"], Util.getXLabels());
 110   assertEquals(["y5","y10","y15"], Util.getYLabels());
 111
 112   g.setSelection(0);
 113   assertEquals("2011/01/01: y: 2", Util.getLegend());
 114 };
 115
 116 // This test verifies that when a valueFormatter is set (but not an
 117 // axisLabelFormatter), then the valueFormatter is used to format the axis
 118 // labels.
 119 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedValueFormatter = function () {
 120   var opts = {
 121     width: 480,
 122     height: 320,
 123     xValueFormatter: function(x, opts, series_name, dg) {
 124       assertEquals('number', typeof(x));
 125       assertEquals('function', typeof(opts));
 126       assertEquals('string', typeof(series_name));
 127       assertEquals('[Dygraph graph]', dg.toString());
 128       return 'x' + x;
 129     },
 130     yValueFormatter: function(y, opts, series_name, dg) {
 131       assertEquals('number', typeof(y));
 132       assertEquals('function', typeof(opts));
 133       assertEquals('string', typeof(series_name));
 134       assertEquals('[Dygraph graph]', dg.toString());
 135       return 'y' + y;
 136     },
 137     labels: ['x', 'y']
 138   };
 139   var data = [];
 140   for (var i = 0; i < 10; i++) {
 141     data.push([i, 2 * i]);
 142   }
 143   var graph = document.getElementById("graph");
 144   var g = new Dygraph(graph, data, opts);
 145
 146   // the valueFormatter options do not affect the ticks.
 147   assertEquals(['0','2','4','6','8'], Util.getXLabels());
 148   assertEquals(["0","5","10","15"], Util.getYLabels());
 149
 150   // they do affect the legend, however.
 151   g.setSelection(2);
 152   assertEquals("x2: y: y4", Util.getLegend());
 153 };
 154
 155 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () {
 156   var opts = {
 157     width: 480,
 158     height: 320,
 159     xValueFormatter: function(x, opts, series_name, dg) {
 160       assertEquals('number', typeof(x));
 161       assertEquals('function', typeof(opts));
 162       assertEquals('string', typeof(series_name));
 163       assertEquals('[Dygraph graph]', dg.toString());
 164       return 'x' + Util.formatDate(x);
 165     },
 166     yValueFormatter: function(y, opts, series_name, dg) {
 167       assertEquals('number', typeof(y));
 168       assertEquals('function', typeof(opts));
 169       assertEquals('string', typeof(series_name));
 170       assertEquals('[Dygraph graph]', dg.toString());
 171       return 'y' + y;
 172     },
 173     axes: { x: { pixelsPerLabel: 60 } },
 174     labels: ['x', 'y']
 175   };
 176
 177   var data = [];
 178   for (var i = 1; i < 10; i++) {
 179     data.push([new Date("2011/01/0" + i), 2 * i]);
 180   }
 181   var graph = document.getElementById("graph");
 182   var g = new Dygraph(graph, data, opts);
 183
 184   // valueFormatters do not affect ticks.
 185   assertEquals(["02 Jan","04 Jan","06 Jan","08 Jan"], Util.getXLabels());
 186   assertEquals(["5","10","15"], Util.getYLabels());
 187
 188   // the valueFormatter options also affect the legend.
 189   g.setSelection(2);
 190   assertEquals('x2011/01/03: y: y6', Util.getLegend());
 191 };
 192
 193 // This test verifies that when both a valueFormatter and an axisLabelFormatter
 194 // are specified, the axisLabelFormatter takes precedence.
 195 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () {
 196   var opts = {
 197     width: 480,
 198     height: 320,
 199     xValueFormatter: function(x) {
 200       return 'xvf' + x;
 201     },
 202     yValueFormatter: function(y) {
 203       return 'yvf' + y;
 204     },
 205     xAxisLabelFormatter: function(x, granularity) {
 206       return 'x' + x;
 207     },
 208     yAxisLabelFormatter: function(y) {
 209       return 'y' + y;
 210     },
 211     labels: ['x', 'y']
 212   };
 213   var data = [];
 214   for (var i = 0; i < 10; i++) {
 215     data.push([i, 2 * i]);
 216   }
 217   var graph = document.getElementById("graph");
 218   var g = new Dygraph(graph, data, opts);
 219
 220   assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
 221   assertEquals(["y0","y5","y10","y15"], Util.getYLabels());
 222
 223   g.setSelection(9);
 224   assertEquals("xvf9: y: yvf18", Util.getLegend());
 225 };
 226
 227 // This is the same as the previous test, except that options are added
 228 // one-by-one.
 229 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () {
 230   var opts = {
 231     width: 480,
 232     height: 320,
 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   g.updateOptions({
 242     xValueFormatter: function(x) {
 243       return 'xvf' + x;
 244     }
 245   });
 246   g.updateOptions({
 247     yValueFormatter: function(y) {
 248       return 'yvf' + y;
 249     }
 250   });
 251   g.updateOptions({
 252     xAxisLabelFormatter: function(x, granularity) {
 253       return 'x' + x;
 254     }
 255   });
 256   g.updateOptions({
 257     yAxisLabelFormatter: function(y) {
 258       return 'y' + y;
 259     }
 260   });
 261
 262   assertEquals(["x0","x2","x4","x6","x8"], Util.getXLabels());
 263   assertEquals(["y0","y5","y10","y15"], Util.getYLabels());
 264
 265   g.setSelection(9);
 266   assertEquals("xvf9: y: yvf18", Util.getLegend());
 267 };