From 4fb259e3acbecf83e7c9db285f5aac333cf4e706 Mon Sep 17 00:00:00 2001 From: Dave Salomon Date: Tue, 18 Dec 2018 08:33:03 +0000 Subject: [PATCH] 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. --- docs/axes/README.md | 2 +- src/core/core.scale.js | 31 +++++++- test/specs/core.scale.tests.js | 134 +++++++++++++++++++++++++++++++++ 3 files changed, 164 insertions(+), 3 deletions(-) diff --git a/docs/axes/README.md b/docs/axes/README.md index 549732812c3..90b2525e79e 100644 --- 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 45ba93bd739..5a777e65856 100644 --- 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 35ef3d6babb..93545a21797 100644 --- 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); + }); + }); + }); });