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     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/01", "x2011/01/02", "x2011/01/03", "x2011/01/04", "x2011/01/05", "x2011/01/06", "x2011/01/07", "x2011/01/08"], Util.getXLabels());
 110   assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], 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','2','4','6','8','10','12','14','16','18'],
 149                Util.getYLabels());
 150
 151   // they do affect the legend, however.
 152   g.setSelection(2);
 153   assertEquals("x2: y: y4", Util.getLegend());
 154 };
 155
 156 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () {
 157   var opts = {
 158     width: 480,
 159     height: 320,
 160     xValueFormatter: function(x, opts, series_name, dg) {
 161       assertEquals('number', typeof(x));
 162       assertEquals('function', typeof(opts));
 163       assertEquals('string', typeof(series_name));
 164       assertEquals('[Dygraph graph]', dg.toString());
 165       return 'x' + Util.formatDate(x);
 166     },
 167     yValueFormatter: function(y, opts, series_name, dg) {
 168       assertEquals('number', typeof(y));
 169       assertEquals('function', typeof(opts));
 170       assertEquals('string', typeof(series_name));
 171       assertEquals('[Dygraph graph]', dg.toString());
 172       return 'y' + y;
 173     },
 174     axes: { x: { pixelsPerLabel: 60 } },
 175     labels: ['x', 'y']
 176   };
 177
 178   var data = [];
 179   for (var i = 1; i < 10; i++) {
 180     data.push([new Date("2011/01/0" + i), 2 * i]);
 181   }
 182   var graph = document.getElementById("graph");
 183   var g = new Dygraph(graph, data, opts);
 184
 185   // valueFormatters do not affect ticks.
 186   assertEquals(['01 Jan','02 Jan','03 Jan','04 Jan','05 Jan','06 Jan','07 Jan','08 Jan'], Util.getXLabels());
 187   assertEquals(['2','4','6','8','10','12','14','16','18'], Util.getYLabels());
 188
 189   // the valueFormatter options also affect the legend.
 190   g.setSelection(2);
 191   assertEquals('x2011/01/03: y: y6', Util.getLegend());
 192 };
 193
 194 // This test verifies that when both a valueFormatter and an axisLabelFormatter
 195 // are specified, the axisLabelFormatter takes precedence.
 196 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () {
 197   var opts = {
 198     width: 480,
 199     height: 320,
 200     xValueFormatter: function(x) {
 201       return 'xvf' + x;
 202     },
 203     yValueFormatter: function(y) {
 204       return 'yvf' + y;
 205     },
 206     xAxisLabelFormatter: function(x, granularity) {
 207       return 'x' + x;
 208     },
 209     yAxisLabelFormatter: function(y) {
 210       return 'y' + y;
 211     },
 212     labels: ['x', 'y']
 213   };
 214   var data = [];
 215   for (var i = 0; i < 10; i++) {
 216     data.push([i, 2 * i]);
 217   }
 218   var graph = document.getElementById("graph");
 219   var g = new Dygraph(graph, data, opts);
 220
 221   assertEquals(['x0','x2','x4','x6','x8'], Util.getXLabels());
 222   assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
 223
 224   g.setSelection(9);
 225   assertEquals("xvf9: y: yvf18", Util.getLegend());
 226 };
 227
 228 // This is the same as the previous test, except that options are added
 229 // one-by-one.
 230 DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () {
 231   var opts = {
 232     width: 480,
 233     height: 320,
 234     labels: ['x', 'y']
 235   };
 236   var data = [];
 237   for (var i = 0; i < 10; i++) {
 238     data.push([i, 2 * i]);
 239   }
 240   var graph = document.getElementById("graph");
 241   var g = new Dygraph(graph, data, opts);
 242   g.updateOptions({
 243     xValueFormatter: function(x) {
 244       return 'xvf' + x;
 245     }
 246   });
 247   g.updateOptions({
 248     yValueFormatter: function(y) {
 249       return 'yvf' + y;
 250     }
 251   });
 252   g.updateOptions({
 253     xAxisLabelFormatter: function(x, granularity) {
 254       return 'x' + x;
 255     }
 256   });
 257   g.updateOptions({
 258     yAxisLabelFormatter: function(y) {
 259       return 'y' + y;
 260     }
 261   });
 262
 263   assertEquals(["x0","x2","x4","x6","x8"], Util.getXLabels());
 264   assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], Util.getYLabels());
 265
 266   g.setSelection(9);
 267   assertEquals("xvf9: y: yvf18", Util.getLegend());
 268 };