auto_tests/tests/axis_labels.js

   1 /**
   2  * @fileoverview Test cases for how axis labels are chosen and formatted.
   3  *
   4  * @author dan@dygraphs.com (Dan Vanderkam)
   5  */
   6 var AxisLabelsTestCase = TestCase("axis-labels");
   7
   8 AxisLabelsTestCase.prototype.setUp = function() {
   9   document.body.innerHTML = "<div id='graph'></div>";
  10 };
  11
  12 AxisLabelsTestCase.prototype.tearDown = function() {
  13 };
  14
  15 function getYLabels() {
  16   var y_labels = document.getElementsByClassName("dygraph-axis-label-y");
  17   var ary = [];
  18   for (var i = 0; i < y_labels.length; i++) {
  19     ary.push(y_labels[i].innerHTML);
  20   }
  21   return ary;
  22 }
  23
  24 function getXLabels() {
  25   var x_labels = document.getElementsByClassName("dygraph-axis-label-x");
  26   var ary = [];
  27   for (var i = 0; i < x_labels.length; i++) {
  28     ary.push(x_labels[i].innerHTML);
  29   }
  30   return ary;
  31 }
  32
  33 AxisLabelsTestCase.prototype.testMinusOneToOne = function() {
  34   var opts = {
  35     width: 480,
  36     height: 320
  37   };
  38   var data = "X,Y\n" +
  39       "0,-1\n" +
  40       "1,0\n" +
  41       "2,1\n" +
  42       "3,0\n"
  43   ;
  44
  45   var graph = document.getElementById("graph");
  46   var g = new Dygraph(graph, data, opts);
  47
  48   // TODO(danvk): would ['-1.0','-0.5','0.0','0.5','1.0'] be better?
  49   assertEquals(['-1','-0.5','0','0.5','1'], getYLabels());
  50
  51   // Go up to 2
  52   data += "4,2\n";
  53   g.updateOptions({file: data});
  54   assertEquals(['-1','-0.5','0','0.5','1','1.5','2'], getYLabels());
  55
  56   // Now 10
  57   data += "5,10\n";
  58   g.updateOptions({file: data});
  59   assertEquals(['-2','0','2','4','6','8','10'], getYLabels());
  60
  61   // Now 100
  62   data += "6,100\n";
  63   g.updateOptions({file: data});
  64   assertEquals(['0','20','40','60','80','100'], getYLabels());
  65 };
  66
  67 AxisLabelsTestCase.prototype.testSmallRangeNearZero = function() {
  68   var opts = {
  69     width: 480,
  70     height: 320
  71   };
  72   var data = "X,Y\n" +
  73       "0,-1\n" +
  74       "1,0\n" +
  75       "2,1\n" +
  76       "3,0\n"
  77   ;
  78   opts.valueRange = [-0.1, 0.1];
  79
  80   var graph = document.getElementById("graph");
  81   var g = new Dygraph(graph, data, opts);
  82   assertEquals(["-0.1","-0.08","-0.06","-0.04","-0.02","0","0.02","0.04","0.06","0.08"], getYLabels());
  83
  84   opts.valueRange = [-0.05, 0.05];
  85   g.updateOptions(opts);
  86   // TODO(danvk): why '1.00e-2' and not '0.01'?
  87   assertEquals(["-0.05","-0.04","-0.03","-0.02","-0.01","0","1.00e-2","0.02","0.03","0.04"], getYLabels());
  88
  89   opts.valueRange = [-0.01, 0.01];
  90   g.updateOptions(opts);
  91   assertEquals(["-0.01","-8.00e-3","-6.00e-3","-4.00e-3","-2.00e-3","0","2.00e-3","4.00e-3","6.00e-3","8.00e-3"], getYLabels());
  92 };
  93
  94 AxisLabelsTestCase.prototype.testSmallRangeAwayFromZero = function() {
  95   var opts = {
  96     width: 480,
  97     height: 320
  98   };
  99   var data = "X,Y\n" +
 100       "0,-1\n" +
 101       "1,0\n" +
 102       "2,1\n" +
 103       "3,0\n"
 104   ;
 105   var graph = document.getElementById("graph");
 106
 107   opts.valueRange = [9.9, 10.1];
 108   var g = new Dygraph(graph, data, opts);
 109   assertEquals(["9.9","9.92","9.94","9.96","9.98","10","10.02","10.04","10.06","10.08"], getYLabels());
 110
 111   opts.valueRange = [9.99, 10.01];
 112   g.updateOptions(opts);
 113   // TODO(danvk): this is bad
 114   assertEquals(["9.99","9.99","9.99","10","10","10","10","10","10.01","10.01"], getYLabels());
 115
 116   opts.valueRange = [9.999, 10.001];
 117   g.updateOptions(opts);
 118   // TODO(danvk): this is even worse!
 119   assertEquals(["10","10","10","10","10","10","10","10","10","10"], getYLabels());
 120 };
 121
 122 AxisLabelsTestCase.prototype.testXAxisTimeLabelFormatter = function() {
 123     var opts = {
 124         width: 480,
 125         height: 320
 126     };
 127     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]];
 128     var graph = document.getElementById("graph");
 129     var g = new Dygraph(graph, data, opts);
 130     g.updateOptions({
 131         xAxisLabelFormatter: function (totalMinutes) {
 132             var hours   = Math.floor( totalMinutes / 60);
 133             var minutes = Math.floor((totalMinutes - (hours * 60)));
 134             var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
 135
 136             if (hours   < 10) {
 137                 hours   = "0"+hours;
 138             }
 139             if (minutes < 10) {
 140                 minutes = "0"+minutes;
 141             }
 142             if (seconds < 10) {
 143                 seconds = "0"+seconds;
 144             }
 145
 146             var time = hours+':'+minutes+':'+seconds;
 147             return time;
 148         }
 149     });
 150
 151     assertEquals(["00:05:00", "00:05:06", "00:05:12", "00:05:18", "00:05:24", "00:05:30", "00:05:36", "00:05:42", "00:05:48", "00:05:54"], getXLabels());
 152         // assertEquals(['5','5.1','5.2','5.3','5.4','5.5', '5.6', '5.7', '5.8', '5.9'], getXLabels());
 153
 154 };
 155
 156