Merge branch 'master' of https://github.com/danvk/dygraphs

diff --git a/auto_tests/misc/local.html b/auto_tests/misc/local.html
index ae0b6b3..34dcd5c 100644 (file)
--- a/auto_tests/misc/local.html
+++ b/auto_tests/misc/local.html
@@ -20,6 +20,7 @@
   <!-- Scripts for automated tests -->
   <script type="text/javascript" src="../tests/annotations.js"></script>
   <script type="text/javascript" src="../tests/axis_labels.js"></script>
+  <script type="text/javascript" src="../tests/axis_labels-deprecated.js"></script>
   <script type="text/javascript" src="../tests/callback.js"></script>
   <script type="text/javascript" src="../tests/css.js"></script>
   <script type="text/javascript" src="../tests/custom_bars.js"></script>

diff --git a/auto_tests/tests/axis_labels-deprecated.js b/auto_tests/tests/axis_labels-deprecated.js
new file mode 100644 (file)
index 0000000..34f37a5
--- /dev/null
+++ b/auto_tests/tests/axis_labels-deprecated.js
@@ -0,0 +1,289 @@
+/**
+ * @fileoverview Test cases for how axis labels are chosen and formatted,
+ * specializing on the deprecated xLabelFormatter, etc.
+ *
+ * @author dan@dygraphs.com (Dan Vanderkam)
+ */
+var DeprecatedAxisLabelsTestCase = TestCase("axis-labels-deprecated");
+
+DeprecatedAxisLabelsTestCase.prototype.setUp = function() {
+  document.body.innerHTML = "<div id='graph'></div>";
+};
+
+DeprecatedAxisLabelsTestCase.prototype.tearDown = function() {
+};
+
+// TODO(konigsberg): Scope these functions.
+
+function getYLabels() {
+  var y_labels = document.getElementsByClassName("dygraph-axis-label-y");
+  var ary = [];
+  for (var i = 0; i < y_labels.length; i++) {
+    ary.push(y_labels[i].innerHTML);
+  }
+  return ary;
+}
+
+function getXLabels() {
+  var x_labels = document.getElementsByClassName("dygraph-axis-label-x");
+  var ary = [];
+  for (var i = 0; i < x_labels.length; i++) {
+    ary.push(x_labels[i].innerHTML);
+  }
+  return ary;
+}
+
+function getLegend() {
+  var legend = document.getElementsByClassName("dygraph-legend")[0];
+  return legend.textContent;
+}
+
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDeprecatedXAxisTimeLabelFormatter = function() {
+  var opts = {
+    width: 480,
+    height: 320
+  };
+  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]];
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+  g.updateOptions({
+    xAxisLabelFormatter: function (totalMinutes) {
+      var hours   = Math.floor( totalMinutes / 60);
+      var minutes = Math.floor((totalMinutes - (hours * 60)));
+      var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
+
+      if (hours   < 10) hours   = "0" + hours;
+      if (minutes < 10) minutes = "0" + minutes;
+      if (seconds < 10) seconds = "0" + seconds;
+
+      return hours + ':' + minutes + ':' + seconds;
+    }
+  });
+
+  assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], getXLabels());
+
+  // The legend does not use the xAxisLabelFormatter:
+  g.setSelection(1);
+  assertEquals('5.1: Y1:1', getLegend());
+};
+
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatter = function () {
+  var opts = {
+    width: 480,
+    height: 320,
+    xAxisLabelFormatter: function(x, granularity, opts, dg) {
+      assertEquals('number', typeof(x));
+      assertEquals('number', typeof(granularity));
+      assertEquals('function', typeof(opts));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'x' + x;
+    },
+    yAxisLabelFormatter: function(y, granularity, opts, dg) {
+      assertEquals('number', typeof(y));
+      assertEquals('number', typeof(granularity));
+      assertEquals('function', typeof(opts));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'y' + y;
+    },
+    labels: ['x', 'y']
+  };
+  var data = [];
+  for (var i = 0; i < 10; i++) {
+    data.push([i, 2 * i]);
+  }
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
+  assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
+
+  g.setSelection(2);
+  assertEquals("2: y:4", getLegend());
+};
+
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateAxisLabelFormatter = function () {
+  var opts = {
+    width: 480,
+    height: 320,
+    xAxisLabelFormatter: function(x, granularity, opts, dg) {
+      assertTrue(Dygraph.isDateLike(x));
+      assertEquals('number', typeof(granularity));
+      assertEquals('function', typeof(opts));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'x' + x.strftime('%Y/%m/%d');
+    },
+    yAxisLabelFormatter: function(y, granularity, opts, dg) {
+      assertEquals('number', typeof(y));
+      assertEquals('number', typeof(granularity));
+      assertEquals('function', typeof(opts));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'y' + y;
+    },
+    labels: ['x', 'y']
+  };
+  var data = [];
+  for (var i = 1; i < 10; i++) {
+    data.push([new Date("2011/01/0" + i), 2 * i]);
+  }
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  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", "x2011/01/09"], getXLabels());
+  assertEquals(['y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
+
+  g.setSelection(0);
+  assertEquals("2011/01/01: y:2", getLegend());
+};
+
+// This test verifies that when a valueFormatter is set (but not an
+// axisLabelFormatter), then the valueFormatter is used to format the axis
+// labels.
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedValueFormatter = function () {
+  var opts = {
+    width: 480,
+    height: 320,
+    xValueFormatter: function(x, opts, series_name, dg) {
+      assertEquals('number', typeof(x));
+      assertEquals('function', typeof(opts));
+      assertEquals('string', typeof(series_name));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'x' + x;
+    },
+    yValueFormatter: function(y, opts, series_name, dg) {
+      assertEquals('number', typeof(y));
+      assertEquals('function', typeof(opts));
+      assertEquals('string', typeof(series_name));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'y' + y;
+    },
+    labels: ['x', 'y']
+  };
+  var data = [];
+  for (var i = 0; i < 10; i++) {
+    data.push([i, 2 * i]);
+  }
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  // the valueFormatter options do not affect the ticks.
+  assertEquals(['0','2','4','6','8'], getXLabels());
+  assertEquals(['0','2','4','6','8','10','12','14','16','18'],
+               getYLabels());
+
+  // they do affect the legend, however.
+  g.setSelection(2);
+  assertEquals("x2: y:y4", getLegend());
+};
+
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedDateValueFormatter = function () {
+  var opts = {
+    width: 480,
+    height: 320,
+    xValueFormatter: function(x, opts, series_name, dg) {
+      assertEquals('number', typeof(x));
+      assertEquals('function', typeof(opts));
+      assertEquals('string', typeof(series_name));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'x' + new Date(x).strftime('%Y/%m/%d');
+    },
+    yValueFormatter: function(y, opts, series_name, dg) {
+      assertEquals('number', typeof(y));
+      assertEquals('function', typeof(opts));
+      assertEquals('string', typeof(series_name));
+      assertEquals('[Dygraph graph]', dg.toString());
+      return 'y' + y;
+    },
+    labels: ['x', 'y']
+  };
+
+  var data = [];
+  for (var i = 1; i < 10; i++) {
+    data.push([new Date("2011/01/0" + i), 2 * i]);
+  }
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  // valueFormatters do not affect ticks.
+  assertEquals(['01Jan','02Jan','03Jan','04Jan','05Jan','06Jan','07Jan','08Jan','09Jan'], getXLabels());
+  assertEquals(['2','4','6','8','10','12','14','16','18'], getYLabels());
+
+  // the valueFormatter options also affect the legend.
+  g.setSelection(2);
+  assertEquals('x2011/01/03: y:y6', getLegend());
+};
+
+// This test verifies that when both a valueFormatter and an axisLabelFormatter
+// are specified, the axisLabelFormatter takes precedence.
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterPrecedence = function () {
+  var opts = {
+    width: 480,
+    height: 320,
+    xValueFormatter: function(x) {
+      return 'xvf' + x;
+    },
+    yValueFormatter: function(y) {
+      return 'yvf' + y;
+    },
+    xAxisLabelFormatter: function(x, granularity) {
+      return 'x' + x;
+    },
+    yAxisLabelFormatter: function(y) {
+      return 'y' + y;
+    },
+    labels: ['x', 'y']
+  };
+  var data = [];
+  for (var i = 0; i < 10; i++) {
+    data.push([i, 2 * i]);
+  }
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+
+  assertEquals(['x0','x2','x4','x6','x8'], getXLabels());
+  assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
+
+  g.setSelection(9);
+  assertEquals("xvf9: y:yvf18", getLegend());
+};
+
+// This is the same as the previous test, except that options are added
+// one-by-one.
+DeprecatedAxisLabelsTestCase.prototype.testDeprecatedAxisLabelFormatterIncremental = function () {
+  var opts = {
+    width: 480,
+    height: 320,
+    labels: ['x', 'y']
+  };
+  var data = [];
+  for (var i = 0; i < 10; i++) {
+    data.push([i, 2 * i]);
+  }
+  var graph = document.getElementById("graph");
+  var g = new Dygraph(graph, data, opts);
+  g.updateOptions({
+    xValueFormatter: function(x) {
+      return 'xvf' + x;
+    }
+  });
+  g.updateOptions({
+    yValueFormatter: function(y) {
+      return 'yvf' + y;
+    }
+  });
+  g.updateOptions({
+    xAxisLabelFormatter: function(x, granularity) {
+      return 'x' + x;
+    }
+  });
+  g.updateOptions({
+    yAxisLabelFormatter: function(y) {
+      return 'y' + y;
+    }
+  });
+
+  assertEquals(["x0","x2","x4","x6","x8"], getXLabels());
+  assertEquals(['y0','y2','y4','y6','y8','y10','y12','y14','y16','y18'], getYLabels());
+
+  g.setSelection(9);
+  assertEquals("xvf9: y:yvf18", getLegend());
+};

diff --git a/auto_tests/tests/axis_labels.js b/auto_tests/tests/axis_labels.js
index 7510a52..f9f7196 100644 (file)
--- a/auto_tests/tests/axis_labels.js
+++ b/auto_tests/tests/axis_labels.js
@@ -155,22 +155,26 @@ AxisLabelsTestCase.prototype.testXAxisTimeLabelFormatter = function() {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
   g.updateOptions({
-    xAxisLabelFormatter: function (totalMinutes) {
-      var hours   = Math.floor( totalMinutes / 60);
-      var minutes = Math.floor((totalMinutes - (hours * 60)));
-      var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
-
-      if (hours   < 10) hours   = "0" + hours;
-      if (minutes < 10) minutes = "0" + minutes;
-      if (seconds < 10) seconds = "0" + seconds;
-
-      return hours + ':' + minutes + ':' + seconds;
+    axes : {
+      x : {
+        axisLabelFormatter : function (totalMinutes) {
+          var hours   = Math.floor( totalMinutes / 60);
+          var minutes = Math.floor((totalMinutes - (hours * 60)));
+          var seconds = Math.round((totalMinutes * 60) - (hours * 3600) - (minutes * 60));
+
+          if (hours   < 10) hours   = "0" + hours;
+          if (minutes < 10) minutes = "0" + minutes;
+          if (seconds < 10) seconds = "0" + seconds;
+
+          return hours + ':' + minutes + ':' + seconds;
+        }
+      }
     }
   });
 
   assertEquals(["00:05:00","00:05:12","00:05:24","00:05:36","00:05:48"], getXLabels());
 
-  // The legend does not use the xAxisLabelFormatter:
+  // The legend does not use the axisLabelFormatter:
   g.setSelection(1);
   assertEquals('5.1: Y1:1', getLegend());
 };
@@ -179,19 +183,25 @@ AxisLabelsTestCase.prototype.testAxisLabelFormatter = function () {
   var opts = {
     width: 480,
     height: 320,
-    xAxisLabelFormatter: function(x, granularity, opts, dg) {
-      assertEquals('number', typeof(x));
-      assertEquals('number', typeof(granularity));
-      assertEquals('function', typeof(opts));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'x' + x;
-    },
-    yAxisLabelFormatter: function(y, granularity, opts, dg) {
-      assertEquals('number', typeof(y));
-      assertEquals('number', typeof(granularity));
-      assertEquals('function', typeof(opts));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'y' + y;
+    axes : {
+      x : {
+        axisLabelFormatter : function(x, granularity, opts, dg) {
+          assertEquals('number', typeof(x));
+          assertEquals('number', typeof(granularity));
+          assertEquals('function', typeof(opts));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'x' + x;
+        }
+      },
+      y : {
+        axisLabelFormatter : function(y, granularity, opts, dg) {
+          assertEquals('number', typeof(y));
+          assertEquals('number', typeof(granularity));
+          assertEquals('function', typeof(opts));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'y' + y;
+        }
+      }
     },
     labels: ['x', 'y']
   };
@@ -213,19 +223,25 @@ AxisLabelsTestCase.prototype.testDateAxisLabelFormatter = function () {
   var opts = {
     width: 480,
     height: 320,
-    xAxisLabelFormatter: function(x, granularity, opts, dg) {
-      assertTrue(Dygraph.isDateLike(x));
-      assertEquals('number', typeof(granularity));
-      assertEquals('function', typeof(opts));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'x' + x.strftime('%Y/%m/%d');
-    },
-    yAxisLabelFormatter: function(y, granularity, opts, dg) {
-      assertEquals('number', typeof(y));
-      assertEquals('number', typeof(granularity));
-      assertEquals('function', typeof(opts));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'y' + y;
+    axes : {
+      x : {
+        axisLabelFormatter : function(x, granularity, opts, dg) {
+          assertTrue(Dygraph.isDateLike(x));
+          assertEquals('number', typeof(granularity));
+          assertEquals('function', typeof(opts));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'x' + x.strftime('%Y/%m/%d');
+        }
+      },
+      y : {
+        axisLabelFormatter : function(y, granularity, opts, dg) {
+          assertEquals('number', typeof(y));
+          assertEquals('number', typeof(granularity));
+          assertEquals('function', typeof(opts));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'y' + y;
+        }
+      }
     },
     labels: ['x', 'y']
   };
@@ -250,19 +266,25 @@ AxisLabelsTestCase.prototype.testValueFormatter = function () {
   var opts = {
     width: 480,
     height: 320,
-    xValueFormatter: function(x, opts, series_name, dg) {
-      assertEquals('number', typeof(x));
-      assertEquals('function', typeof(opts));
-      assertEquals('string', typeof(series_name));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'x' + x;
-    },
-    yValueFormatter: function(y, opts, series_name, dg) {
-      assertEquals('number', typeof(y));
-      assertEquals('function', typeof(opts));
-      assertEquals('string', typeof(series_name));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'y' + y;
+    axes : {
+      x : {
+        valueFormatter: function(x, opts, series_name, dg) {
+          assertEquals('number', typeof(x));
+          assertEquals('function', typeof(opts));
+          assertEquals('string', typeof(series_name));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'x' + x;
+        }
+      },
+      y : {
+        valueFormatter: function(y, opts, series_name, dg) {
+          assertEquals('number', typeof(y));
+          assertEquals('function', typeof(opts));
+          assertEquals('string', typeof(series_name));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'y' + y;
+        }
+      }
     },
     labels: ['x', 'y']
   };
@@ -287,19 +309,25 @@ AxisLabelsTestCase.prototype.testDateValueFormatter = function () {
   var opts = {
     width: 480,
     height: 320,
-    xValueFormatter: function(x, opts, series_name, dg) {
-      assertEquals('number', typeof(x));
-      assertEquals('function', typeof(opts));
-      assertEquals('string', typeof(series_name));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'x' + new Date(x).strftime('%Y/%m/%d');
-    },
-    yValueFormatter: function(y, opts, series_name, dg) {
-      assertEquals('number', typeof(y));
-      assertEquals('function', typeof(opts));
-      assertEquals('string', typeof(series_name));
-      assertEquals('[Dygraph graph]', dg.toString());
-      return 'y' + y;
+    axes : {
+      x : {
+        valueFormatter: function(x, opts, series_name, dg) {
+          assertEquals('number', typeof(x));
+          assertEquals('function', typeof(opts));
+          assertEquals('string', typeof(series_name));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'x' + new Date(x).strftime('%Y/%m/%d');
+        }
+      },
+      y : {
+        valueFormatter: function(y, opts, series_name, dg) {
+          assertEquals('number', typeof(y));
+          assertEquals('function', typeof(opts));
+          assertEquals('string', typeof(series_name));
+          assertEquals('[Dygraph graph]', dg.toString());
+          return 'y' + y;
+        }
+      }
     },
     labels: ['x', 'y']
   };
@@ -326,17 +354,23 @@ AxisLabelsTestCase.prototype.testAxisLabelFormatterPrecedence = function () {
   var opts = {
     width: 480,
     height: 320,
-    xValueFormatter: function(x) {
-      return 'xvf' + x;
-    },
-    yValueFormatter: function(y) {
-      return 'yvf' + y;
-    },
-    xAxisLabelFormatter: function(x, granularity) {
-      return 'x' + x;
-    },
-    yAxisLabelFormatter: function(y) {
-      return 'y' + y;
+    axes : {
+      x : {
+        valueFormatter: function(x) {
+          return 'xvf' + x;
+        },
+        axisLabelFormatter: function(x, granularity) {
+          return 'x' + x;
+        }
+      },
+      y : {
+        valueFormatter: function(y) {
+          return 'yvf' + y;
+        },
+        axisLabelFormatter: function(y) {
+          return 'y' + y;
+        }
+      }
     },
     labels: ['x', 'y']
   };
@@ -369,23 +403,39 @@ AxisLabelsTestCase.prototype.testAxisLabelFormatterIncremental = function () {
   var graph = document.getElementById("graph");
   var g = new Dygraph(graph, data, opts);
   g.updateOptions({
-    xValueFormatter: function(x) {
-      return 'xvf' + x;
+    axes : {
+      x : {
+        valueFormatter: function(x) {
+          return 'xvf' + x;
+        }
+      }
     }
   });
   g.updateOptions({
-    yValueFormatter: function(y) {
-      return 'yvf' + y;
+    axes : {
+      y : {
+        valueFormatter: function(y) {
+          return 'yvf' + y;
+        }
+      }
     }
   });
   g.updateOptions({
-    xAxisLabelFormatter: function(x, granularity) {
-      return 'x' + x;
+    axes : {
+      x : {
+        axisLabelFormatter: function(x, granularity) {
+          return 'x' + x;
+        }
+      }
     }
   });
   g.updateOptions({
-    yAxisLabelFormatter: function(y) {
-      return 'y' + y;
+    axes : {
+      y : {
+        axisLabelFormatter: function(y) {
+          return 'y' + y;
+        }
+      }
     }
   });
 

diff --git a/dygraph.js b/dygraph.js
index 3783907..195f915 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -418,6 +418,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
     attrs.animatedZooms = false;
   }
 
+  // DEPRECATION WARNING: All option processing should be moved from
+  // attrs_ and user_attrs_ to options_, which holds all this information.
+  //
   // Dygraphs has many options, some of which interact with one another.
   // To keep track of everything, we maintain two sets of options:
   //
@@ -2509,7 +2512,6 @@ Dygraph.prototype.computeYAxes_ = function() {
     }
   }
 
-  // New axes options
   for (axis = 0; axis < this.axes_.length; axis++) {
     if (axis === 0) {
       opts = this.optionsViewForAxis_('y' + (axis ? '2' : ''));
@@ -3395,6 +3397,9 @@ Dygraph.mapLegacyOptions_ = function(attrs) {
   };
   var map = function(opt, axis, new_opt) {
     if (typeof(attrs[opt]) != 'undefined') {
+      Dygraph.warn("Option " + opt + " is deprecated. Use the " +
+          new_opt + " option for the " + axis + " axis instead. " +
+          "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } }");
       set(axis, new_opt, attrs[opt]);
       delete my_attrs[opt];
     }