From 7f6a719056e1da51c5a27727ac5341d6664de428 Mon Sep 17 00:00:00 2001 From: Robert Konigsberg Date: Fri, 13 Sep 2013 18:16:33 -0400 Subject: [PATCH 1/1] Add drawAxis option, deprecating drawXAxis and drawYAxis. Added tests for that and drawGrid. --- auto_tests/misc/local.html | 1 + auto_tests/tests/grid_per_axis.js | 1 + auto_tests/tests/per_axis.js | 96 +++++++++++++++++++++++++++++++++++++++ auto_tests/tests/to_dom_coords.js | 14 ++++-- dygraph-options-reference.js | 10 +++- dygraph.js | 7 +++ plugins/axes.js | 13 +++--- plugins/grid.js | 6 +-- plugins/range-selector.js | 2 +- 9 files changed, 134 insertions(+), 16 deletions(-) create mode 100644 auto_tests/tests/per_axis.js diff --git a/auto_tests/misc/local.html b/auto_tests/misc/local.html index 1297072..f85b0ff 100644 --- a/auto_tests/misc/local.html +++ b/auto_tests/misc/local.html @@ -40,6 +40,7 @@ + diff --git a/auto_tests/tests/grid_per_axis.js b/auto_tests/tests/grid_per_axis.js index 9731514..8e2c41a 100644 --- 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 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 = "
"; + 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 --- 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 --- a/dygraph-options-reference.js +++ b/dygraph-options-reference.js @@ -689,13 +689,19 @@ Dygraph.OPTIONS_REFERENCE = // "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 --- 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 --- 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 --- 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 --- 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_ = { -- 2.7.4