controlsUseVisibility

fixes #888

changing pie chart spec to use the new functionality;
bar chart spec explicitly uses the old functionality

Author: gordonwoodhull

spec/bar-chart-spec.js

@@ -14,7 +14,8 @@ describe('dc.barChart', function() {
         chart.dimension(dimension).group(group)
             .width(1100).height(200)
             .x(d3.time.scale.utc().domain([makeDate(2012, 0, 1), makeDate(2012, 11, 31)]))
-            .transitionDuration(0);
+            .transitionDuration(0)
+            .controlsUseVisibility(false);
     });
 
     describe('rendering', function () {

spec/pie-chart-spec.js

@@ -51,8 +51,8 @@ describe('dc.pieChart', function() {
 
     function buildChart(id) {
         var div = appendChartID(id);
-        div.append("a").attr("class", "reset").style("display", "none");
-        div.append("span").attr("class", "filter").style("display", "none");
+        div.append("a").attr("class", "reset").style("visibility", "hidden");
+        div.append("span").attr("class", "filter").style("visibility", "hidden");
         var chart = dc.pieChart("#" + id);
         chart.dimension(valueDimension).group(valueGroup)
             .width(width)
@@ -163,13 +163,13 @@ describe('dc.pieChart', function() {
             });
         });
         it('reset link hidden after init rendering', function() {
-            expect(chart.select("a.reset").style("display")).toEqual("none");
+            expect(chart.select("a.reset").style("visibility")).toEqual("hidden");
         });
         it('filter printer should be set', function() {
             expect(chart.filterPrinter()).not.toBeNull();
         });
         it('filter info should be hidden after init rendering', function() {
-            expect(chart.select("span.filter").style("display")).toEqual("none");
+            expect(chart.select("span.filter").style("visibility")).toEqual("hidden");
         });
         describe('center positioning', function() {
             beforeEach(function() {
@@ -287,14 +287,14 @@ describe('dc.pieChart', function() {
                 });
                 chart.filterAll();
             });
-            it('reset link generated after slice selection', function() {
+            it('reset link shown after slice selection', function() {
                 chart.filter("66");
-                expect(chart.select("a.reset").style("display")).not.toEqual('none');
+                expect(chart.select("a.reset").style("visibility")).not.toEqual('hidden');
             });
-            it('filter info generated after slice selection', function() {
+            it('filter info shown after slice selection', function() {
                 chart.filter(null);
                 chart.filter("66");
-                expect(chart.select("span.filter").style("display")).not.toEqual('none');
+                expect(chart.select("span.filter").style("visibility")).not.toEqual('hidden');
                 expect(chart.select("span.filter").text()).toEqual("66");
             });
             it('should remove highlight if no slice selected', function() {

src/base-mixin.js

@@ -42,6 +42,7 @@ dc.baseMixin = function (_chart) {
         return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d);
     };
     var _renderTitle = true;
+    var _controlsUseVisibility = true;
 
     var _transitionDuration = 750;
 
@@ -399,6 +400,19 @@ dc.baseMixin = function (_chart) {
         return _chart;
     };
 
+    /**
+     #### .controlsUseVisibility
+     If set, use the `visibility` attribute instead of the `display` attribute, for less disruption
+     to layout. Default: true.
+     **/
+    _chart.controlsUseVisibility = function (_) {
+        if (!arguments.length) {
+            return _controlsUseVisibility;
+        }
+        _controlsUseVisibility = _;
+        return _chart;
+    };
+
     /**
     #### .turnOnControls() & .turnOffControls()
     Turn on/off optional control elements within the root element. dc currently supports the
@@ -411,19 +425,25 @@ dc.baseMixin = function (_chart) {
      content of this element is then replaced with the current filter value using the filter printer
      function. This type of element will be turned off automatically if the filter is cleared.
 
+     The method (display or visibility) for turning on/off the controls depends on the
+     `controlsUseVisibility` flag.
+
     **/
     _chart.turnOnControls = function () {
         if (_root) {
-            _chart.selectAll('.reset').style('display', null);
-            _chart.selectAll('.filter').text(_filterPrinter(_chart.filters())).style('display', null);
+            var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
+            _chart.selectAll('.reset').style(attribute, null);
+            _chart.selectAll('.filter').text(_filterPrinter(_chart.filters())).style(attribute, null);
         }
         return _chart;
     };
 
     _chart.turnOffControls = function () {
         if (_root) {
-            _chart.selectAll('.reset').style('display', 'none');
-            _chart.selectAll('.filter').style('display', 'none').text(_chart.filter());
+            var attribute = _chart.controlsUseVisibility() ? 'visibility' : 'display';
+            var value = _chart.controlsUseVisibility() ? 'hidden' : 'none';
+            _chart.selectAll('.reset').style(attribute, value);
+            _chart.selectAll('.filter').style(attribute, value).text(_chart.filter());
         }
         return _chart;
     };

web/stock.js

@@ -31,15 +31,19 @@ var nasdaqTable = dc.dataTable('.dc-data-table');
 // will automatically hide/show it based on whether there is a filter
 // set on the chart (e.g. slice selection for pie chart and brush
 // selection for bar chart). Enable this with `chart.turnOnControls(true)`
+
+// dc.js >=2.1 uses `visibility: hidden` to hide/show controls without
+// disrupting the layout. To return the old `display: none` behavior,
+// set `chart.controlsUseVisibility(false)` and use that style instead.
     <div id='chart'>
        <a class='reset'
           href='javascript:myChart.filterAll();dc.redrawAll();'
-          style='display: none;'>reset</a>
+          style='visibility: hidden;'>reset</a>
     </div>
 // dc.js will also automatically inject the current filter value into
 // any html element with its css class set to `filter`
     <div id='chart'>
-        <span class='reset' style='display: none;'>
+        <span class='reset' style='visibility: hidden;'>
           Current filter: <span class='filter'></span>
         </span>
     </div>