Add support for hiding axis when all linked datasets are hidden (#5885)

When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.

diff --git a/docs/axes/README.md b/docs/axes/README.md
index 549732812c3891c96a0ee71c0692e252d02fdb4f..90b2525e79ecdfd2cd1391e9d7fe80aec5955bfa 100644 (file)
--- a/docs/axes/README.md
+++ b/docs/axes/README.md
@@ -16,7 +16,7 @@ The following properties are common to all axes provided by Chart.js.
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
-| `display` | `Boolean` | `true` | If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.
+| `display` | `Boolean`/`String` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
 | `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
 | `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
 

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 45ba93bd7391a2a447cd5278043e8714ba883087..5a777e658560684d095f8c5a67cde45f09e610c3 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -396,7 +396,7 @@ module.exports = Element.extend({
                var tickOpts = opts.ticks;
                var scaleLabelOpts = opts.scaleLabel;
                var gridLineOpts = opts.gridLines;
-               var display = opts.display;
+               var display = me._isVisible();
                var position = opts.position;
                var isHorizontal = me.isHorizontal();
 
@@ -678,12 +678,39 @@ module.exports = Element.extend({
                return result;
        },
 
+       /**
+        * @private
+        */
+       _isVisible: function() {
+               var me = this;
+               var chart = me.chart;
+               var display = me.options.display;
+               var i, ilen, meta;
+
+               if (display !== 'auto') {
+                       return !!display;
+               }
+
+               // When 'auto', the scale is visible if at least one associated dataset is visible.
+               for (i = 0, ilen = chart.data.datasets.length; i < ilen; ++i) {
+                       if (chart.isDatasetVisible(i)) {
+                               meta = chart.getDatasetMeta(i);
+                               if (meta.xAxisID === me.id || meta.yAxisID === me.id) {
+                                       return true;
+                               }
+                       }
+               }
+
+               return false;
+       },
+
        // Actually draw the scale on the canvas
        // @param {rectangle} chartArea : the area of the chart to draw full grid lines on
        draw: function(chartArea) {
                var me = this;
                var options = me.options;
-               if (!options.display) {
+
+               if (!me._isVisible()) {
                        return;
                }
 

diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js
index 35ef3d6babbf84c00db2b91080e61d36f6364a99..93545a21797a1e04980c26090a9d1f7a65d6ce5a 100644 (file)
--- a/test/specs/core.scale.tests.js
+++ b/test/specs/core.scale.tests.js
@@ -206,4 +206,138 @@ describe('Core.scale', function() {
                        })).toEqual(test.expected);
                });
        });
+
+       describe('given the axes display option is set to auto', function() {
+               describe('for the x axes', function() {
+                       it('should draw the axes if at least one associated dataset is visible', function() {
+                               var chart = window.acquireChart({
+                                       type: 'line',
+                                       data: {
+                                               datasets: [{
+                                                       data: [100, 200, 100, 50],
+                                                       xAxisId: 'foo',
+                                                       hidden: true,
+                                                       labels: ['Q1', 'Q2', 'Q3', 'Q4']
+                                               }, {
+                                                       data: [100, 200, 100, 50],
+                                                       xAxisId: 'foo',
+                                                       labels: ['Q1', 'Q2', 'Q3', 'Q4']
+                                               }]
+                                       },
+                                       options: {
+                                               scales: {
+                                                       xAxes: [{
+                                                               id: 'foo',
+                                                               display: 'auto'
+                                                       }],
+                                                       yAxes: [{
+                                                               type: 'category',
+                                                               id: 'yScale0'
+                                                       }]
+                                               }
+                                       }
+                               });
+
+                               var scale = chart.scales.foo;
+                               scale.ctx = window.createMockContext();
+                               chart.draw();
+
+                               expect(scale.ctx.getCalls().length).toBeGreaterThan(0);
+                               expect(scale.height).toBeGreaterThan(0);
+                       });
+
+                       it('should not draw the axes if no associated datasets are visible', function() {
+                               var chart = window.acquireChart({
+                                       type: 'line',
+                                       data: {
+                                               datasets: [{
+                                                       data: [100, 200, 100, 50],
+                                                       xAxisId: 'foo',
+                                                       hidden: true,
+                                                       labels: ['Q1', 'Q2', 'Q3', 'Q4']
+                                               }]
+                                       },
+                                       options: {
+                                               scales: {
+                                                       xAxes: [{
+                                                               id: 'foo',
+                                                               display: 'auto'
+                                                       }]
+                                               }
+                                       }
+                               });
+
+                               var scale = chart.scales.foo;
+                               scale.ctx = window.createMockContext();
+                               chart.draw();
+
+                               expect(scale.ctx.getCalls().length).toBe(0);
+                               expect(scale.height).toBe(0);
+                       });
+               });
+
+               describe('for the y axes', function() {
+                       it('should draw the axes if at least one associated dataset is visible', function() {
+                               var chart = window.acquireChart({
+                                       type: 'line',
+                                       data: {
+                                               datasets: [{
+                                                       data: [100, 200, 100, 50],
+                                                       yAxisId: 'foo',
+                                                       hidden: true,
+                                                       labels: ['Q1', 'Q2', 'Q3', 'Q4']
+                                               }, {
+                                                       data: [100, 200, 100, 50],
+                                                       yAxisId: 'foo',
+                                                       labels: ['Q1', 'Q2', 'Q3', 'Q4']
+                                               }]
+                                       },
+                                       options: {
+                                               scales: {
+                                                       yAxes: [{
+                                                               id: 'foo',
+                                                               display: 'auto'
+                                                       }]
+                                               }
+                                       }
+                               });
+
+                               var scale = chart.scales.foo;
+                               scale.ctx = window.createMockContext();
+                               chart.draw();
+
+                               expect(scale.ctx.getCalls().length).toBeGreaterThan(0);
+                               expect(scale.width).toBeGreaterThan(0);
+                       });
+
+                       it('should not draw the axes if no associated datasets are visible', function() {
+                               var chart = window.acquireChart({
+                                       type: 'line',
+                                       data: {
+                                               datasets: [{
+                                                       data: [100, 200, 100, 50],
+                                                       yAxisId: 'foo',
+                                                       hidden: true,
+                                                       labels: ['Q1', 'Q2', 'Q3', 'Q4']
+                                               }]
+                                       },
+                                       options: {
+                                               scales: {
+                                                       yAxes: [{
+                                                               id: 'foo',
+                                                               display: 'auto'
+                                                       }]
+                                               }
+                                       }
+                               });
+
+                               var scale = chart.scales.foo;
+                               scale.ctx = window.createMockContext();
+                               chart.draw();
+
+                               expect(scale.ctx.getCalls().length).toBe(0);
+                               expect(scale.width).toBe(0);
+                       });
+               });
+       });
 });