Add drawAxis option, deprecating drawXAxis and drawYAxis. Added tests for that and...

diff --git a/auto_tests/misc/local.html b/auto_tests/misc/local.html
index 1297072..f85b0ff 100644 (file)
--- a/auto_tests/misc/local.html
+++ b/auto_tests/misc/local.html
@@ -40,6 +40,7 @@
   <script type="text/javascript" src="../tests/no_hours.js"></script>
   <script type="text/javascript" src="../tests/parser.js"></script>
   <script type="text/javascript" src="../tests/pathological_cases.js"></script>
+  <script type="text/javascript" src="../tests/per_axis.js"></script>
   <script type="text/javascript" src="../tests/per_series.js"></script>
   <script type="text/javascript" src="../tests/plugins.js"></script>
   <script type="text/javascript" src="../tests/range_selector.js"></script>

diff --git a/auto_tests/tests/grid_per_axis.js b/auto_tests/tests/grid_per_axis.js
index 9731514..8e2c41a 100644 (file)
--- a/auto_tests/tests/grid_per_axis.js
+++ b/auto_tests/tests/grid_per_axis.js
@@ -249,6 +249,7 @@ GridPerAxisTestCase.prototype.testPerAxisGridWidth = function() {
         emptyColor, Util.samplePixel(g.hidden_, x + 2, y).slice(0, 3));
   }
 };
+
 GridPerAxisTestCase.prototype.testGridLinePattern = function() {
   var opts = {
     width : 120,

diff --git a/auto_tests/tests/per_axis.js b/auto_tests/tests/per_axis.js
new file mode 100644 (file)
index 0000000..add852d
--- /dev/null
+++ b/auto_tests/tests/per_axis.js
@@ -0,0 +1,96 @@
+/**
+ * @fileoverview Tests for per-axis options.
+ *
+ * @author konigsberg@google.com (Robert Konigsberg)
+ */
+var perAxisTestCase = TestCase("per-axis");
+
+perAxisTestCase._origGetContext = Dygraph.getContext;
+
+perAxisTestCase.prototype.setUp = function() {
+  document.body.innerHTML = "<div id='graph'></div>";
+  Dygraph.getContext = function(canvas) {
+    return new Proxy(perAxisTestCase._origGetContext(canvas));
+  }
+
+  this.xAxisLineColor = "#00ffff";
+  this.yAxisLineColor = "#ffff00";
+
+  var opts = {
+    axes : {
+      x : {
+        drawAxis : false,
+        drawGrid : false,
+        gridLineColor : this.xAxisLineColor
+      },
+      y : {
+        drawAxis : false,
+        drawGrid : false,
+        gridLineColor : this.yAxisLineColor
+      }
+    },
+    colors: [ '#ff0000', '#0000ff' ]
+  };
+
+  var data = "X,Y,Z\n" +
+      "1,1,0\n" +
+      "8,0,1\n"
+  ;
+  this.graph = document.getElementById('graph');
+  this.g = new Dygraph(this.graph, data, opts);
+};
+
+perAxisTestCase.prototype.tearDown = function() {
+  Dygraph.getContext = perAxisTestCase._origGetContext;
+};
+
+perAxisTestCase.prototype.testDrawXAxis = function() {
+  this.g.updateOptions({ drawXAxis : true });
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length > 0);
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length == 0);
+}
+
+perAxisTestCase.prototype.testDrawYAxis = function() {
+  this.g.updateOptions({ drawYAxis : true });
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length ==0);
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length > 0);
+}
+
+perAxisTestCase.prototype.testDrawAxisX = function() {
+  this.g.updateOptions({ axes : { x : { drawAxis : true }}});
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length > 0);
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length == 0);
+}
+
+perAxisTestCase.prototype.testDrawAxisY = function() {
+  this.g.updateOptions({ axes : { y : { drawAxis : true }}});
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-x').length ==0);
+  assertTrue(this.graph.getElementsByClassName('dygraph-axis-label-y').length > 0);
+}
+perAxisTestCase.prototype.testDrawXGrid = function() {
+  this.g.updateOptions({ drawXGrid : true });
+  var htx = this.g.hidden_ctx_;
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) > 0);
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) == 0);
+}
+
+perAxisTestCase.prototype.testDrawYGrid = function() {
+  this.g.updateOptions({ drawYGrid : true });
+  var htx = this.g.hidden_ctx_;
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) == 0);
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) > 0);
+}
+
+perAxisTestCase.prototype.testDrawGridX = function() {
+  this.g.updateOptions({ axes : { x : { drawGrid : true }}});
+  var htx = this.g.hidden_ctx_;
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) > 0);
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) == 0);
+}
+
+perAxisTestCase.prototype.testDrawGridY = function() {
+  this.g.updateOptions({ axes : { y : { drawGrid : true }}});
+  var htx = this.g.hidden_ctx_;
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.xAxisLineColor) == 0);
+  assertTrue(CanvasAssertions.numLinesDrawn(htx, this.yAxisLineColor) > 0);
+}

diff --git a/auto_tests/tests/to_dom_coords.js b/auto_tests/tests/to_dom_coords.js
index fd766f7..22ee3fe 100644 (file)
--- a/auto_tests/tests/to_dom_coords.js
+++ b/auto_tests/tests/to_dom_coords.js
@@ -34,10 +34,16 @@ ToDomCoordsTestCase.prototype.checkForInverses = function(g) {
 
 ToDomCoordsTestCase.prototype.testPlainChart = function() {
   var opts = {
-    drawXAxis: false,
-    drawYAxis: false,
-    drawXGrid: false,
-    drawYGrid: false,
+    axes : {
+      x : {
+        drawAxis : false,
+        drawGrid : false,
+      },
+      y : {
+        drawAxis : false,
+        drawGrid : false,
+      }
+    },
     rightGap: 0,
     valueRange: [0, 100],
     dateWindow: [0, 100],

diff --git a/dygraph-options-reference.js b/dygraph-options-reference.js
index 770b531..3ecc531 100644 (file)
--- a/dygraph-options-reference.js
+++ b/dygraph-options-reference.js
@@ -689,13 +689,19 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "default": "true",
     "labels": ["Axis display"],
     "type": "boolean",
-    "description" : "Whether to draw the x-axis. Setting this to false also prevents x-axis ticks from being drawn and reclaims the space for the chart grid/lines."
+    "description" : "Deprecated. Use axes : { x : { drawAxis } }."
   },
   "drawYAxis": {
     "default": "true",
     "labels": ["Axis display"],
     "type": "boolean",
-    "description" : "Whether to draw the y-axis. Setting this to false also prevents y-axis ticks from being drawn and reclaims the space for the chart grid/lines."
+    "description" : "Deprecated. Use axes : { y : { drawAxis } }."
+  },
+  "drawAxis": {
+    "default": "true for x and y, false for y2",
+    "labels": ["Axis display"],
+    "type": "boolean",
+    "description" : "Whether to draw the specified axis. This may be set on a per-axis basis to define the visibility of each axis separately. Setting this to false also prevents axis ticks from being drawn and reclaims the space for the chart grid/lines."
   },
   "gridLineWidth": {
     "default": "0.3",

diff --git a/dygraph.js b/dygraph.js
index cee63e8..6e52555 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -352,6 +352,7 @@ Dygraph.DEFAULT_ATTRS = {
       axisLabelFormatter: Dygraph.dateAxisFormatter,
       valueFormatter: Dygraph.dateString_,
       drawGrid: true,
+      drawAxis: true,
       independentTicks: true,
       ticker: null  // will be set in dygraph-tickers.js
     },
@@ -360,6 +361,7 @@ Dygraph.DEFAULT_ATTRS = {
       valueFormatter: Dygraph.numberValueFormatter,
       axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
       drawGrid: true,
+      drawAxis: true,
       independentTicks: true,
       ticker: null  // will be set in dygraph-tickers.js
     },
@@ -367,6 +369,7 @@ Dygraph.DEFAULT_ATTRS = {
       pixelsPerLabel: 30,
       valueFormatter: Dygraph.numberValueFormatter,
       axisLabelFormatter: Dygraph.numberAxisLabelFormatter,
+      drawAxis: false,
       drawGrid: false,
       independentTicks: false,
       ticker: null  // will be set in dygraph-tickers.js
@@ -3425,6 +3428,10 @@ Dygraph.mapLegacyOptions_ = function(attrs) {
   map('pixelsPerYLabel', 'y', 'pixelsPerLabel');
   map('yAxisLabelFormatter', 'y', 'axisLabelFormatter');
   map('yTicker', 'y', 'ticker');
+  map('drawXGrid', 'x', 'drawGrid');
+  map('drawXAxis', 'x', 'drawAxis');
+  map('drawYGrid', 'y', 'drawGrid');
+  map('drawYAxis', 'y', 'drawAxis');
   return my_attrs;
 };
 

diff --git a/plugins/axes.js b/plugins/axes.js
index cacda86..6623a0b 100644 (file)
--- a/plugins/axes.js
+++ b/plugins/axes.js
@@ -52,12 +52,12 @@ axes.prototype.activate = function(g) {
 axes.prototype.layout = function(e) {
   var g = e.dygraph;
 
-  if (g.getOption('drawYAxis')) {
+  if (g.getOptionForAxis('drawAxis', 'y')) {
     var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize');
     e.reserveSpaceLeft(w);
   }
 
-  if (g.getOption('drawXAxis')) {
+  if (g.getOptionForAxis('drawAxis', 'x')) {
     var h;
     // NOTE: I think this is probably broken now, since g.getOption() now
     // hits the dictionary. (That is, g.getOption('xAxisHeight') now always
@@ -72,7 +72,7 @@ axes.prototype.layout = function(e) {
 
   if (g.numAxes() == 2) {
     // TODO(danvk): introduce a 'drawAxis' per-axis property.
-    if (g.getOption('drawYAxis')) {
+    if (g.getOptionForAxis('drawAxis', 'y')) {
       // TODO(danvk): per-axis setting.
       var w = g.getOption('yAxisLabelWidth') + 2 * g.getOption('axisTickSize');
       e.reserveSpaceRight(w);
@@ -103,7 +103,8 @@ axes.prototype.clearChart = function(e) {
 
 axes.prototype.willDrawChart = function(e) {
   var g = e.dygraph;
-  if (!g.getOption('drawXAxis') && !g.getOption('drawYAxis')) return;
+
+  if (!g.getOptionForAxis('drawAxis', 'x') && !g.getOptionForAxis('drawAxis', 'y')) return;
   
   // Round pixels to half-integer boundaries for crisper drawing.
   function halfUp(x)  { return Math.round(x) + 0.5; }
@@ -164,7 +165,7 @@ axes.prototype.willDrawChart = function(e) {
   var layout = g.layout_;
   var area = e.dygraph.plotter_.area;
 
-  if (g.getOption('drawYAxis')) {
+  if (g.getOptionForAxis('drawAxis', 'y')) {
     if (layout.yticks && layout.yticks.length > 0) {
       var num_axes = g.numAxes();
       for (i = 0; i < layout.yticks.length; i++) {
@@ -255,7 +256,7 @@ axes.prototype.willDrawChart = function(e) {
     }
   }
 
-  if (g.getOption('drawXAxis')) {
+  if (g.getOptionForAxis('drawAxis', 'x')) {
     if (layout.xticks) {
       for (i = 0; i < layout.xticks.length; i++) {
         tick = layout.xticks[i];

diff --git a/plugins/grid.js b/plugins/grid.js
index 425d93f..db1b42d 100644 (file)
--- a/plugins/grid.js
+++ b/plugins/grid.js
@@ -49,11 +49,11 @@ grid.prototype.willDrawChart = function(e) {
   function halfDown(y){ return Math.round(y) - 0.5; }
 
   var x, y, i, ticks;
-  if (g.getOption('drawYGrid')) {
+  if (g.getOptionForAxis('drawGrid', 'y')) {
     var axes = ["y", "y2"];
     var strokeStyles = [], lineWidths = [], drawGrid = [], stroking = [], strokePattern = [];
     for (var i = 0; i < axes.length; i++) {
-      drawGrid[i] = g.getOptionForAxis("drawGrid", axes[i]);
+      drawGrid[i] = g.getOptionForAxis('drawGrid', axes[i]);
       if (drawGrid[i]) {
         strokeStyles[i] = g.getOptionForAxis('gridLineColor', axes[i]);
         lineWidths[i] = g.getOptionForAxis('gridLineWidth', axes[i]);
@@ -90,7 +90,7 @@ grid.prototype.willDrawChart = function(e) {
   }
 
   // draw grid for x axis
-  if (g.getOption('drawXGrid') && g.getOptionForAxis("drawGrid", 'x')) {
+  if (g.getOptionForAxis('drawGrid', 'x')) {
     ticks = layout.xticks;
     ctx.save();
     var strokePattern = g.getOptionForAxis('gridLinePattern', 'x');

diff --git a/plugins/range-selector.js b/plugins/range-selector.js
index 089e64a..d8b4285 100644 (file)
--- a/plugins/range-selector.js
+++ b/plugins/range-selector.js
@@ -178,7 +178,7 @@ rangeSelector.prototype.resize_ = function() {
   var plotArea = this.dygraph_.layout_.getPlotArea();
   
   var xAxisLabelHeight = 0;
-  if(this.getOption_('drawXAxis')){
+  if(this.dygraph_.getOptionForAxis('drawAxis', 'x')) {
     xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
   }
   this.canvasRect_ = {