controlsUseVisibility

cherry-picking functionality from dev to master
and reversing the default for backward compatibility

fixes #888
fixes #1016

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

Changelog.md

@@ -1,4 +1,9 @@
 # 2.0 Series
+## 2.0.0 beta 21
+* Ability to use non-crossfilter backend with asynchronous connection (callback), via `commitHandler`.
+* Domain comparison was failing for undefined/null domain values.
+* Option `controlsUseVisibility` to use `visibility` attribute instead of `display` for `filter` and `reset` controls, to reduce disruption to the layout. Was originally on 2.1 branch with default true, now on 2.0 branch with default false. ([#888](https://github.com/dc-js/dc.js/issues/888), [#1016](https://github.com/dc-js/dc.js/issues/1016))
+
 ## 2.0.0 beta 20
 * Slicing functionality for basic data table paging, based on Chris Alvino's feature for the data grid ([#101](https://github.com/dc-js/dc.js/issues/101))
 * Ability to customize the legend text, by Chris Alvino ([#982](https://github.com/dc-js/dc.js/pull/982))

spec/bar-chart-spec.js

@@ -15,7 +15,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(true);
     });
 
     describe('rendering', function () {
@@ -576,8 +577,8 @@ describe('dc.barChart', function () {
 
         describe('filtering', function () {
             beforeEach(function () {
-                d3.select('#' + id).append('span').attr('class', 'filter').style('display', 'none');
-                d3.select('#' + id).append('a').attr('class', 'reset').style('display', 'none');
+                d3.select('#' + id).append('span').attr('class', 'filter').style('visibility', 'hidden');
+                d3.select('#' + id).append('a').attr('class', 'reset').style('visibility', 'hidden');
                 chart.filter([makeDate(2012, 5, 1), makeDate(2012, 5, 30)]).redraw();
                 dc.dateFormat = d3.time.format.utc('%m/%d/%Y');
                 chart.redraw();
@@ -588,15 +589,15 @@ describe('dc.barChart', function () {
             });
 
             it('should enable the reset link after rendering', function () {
-                expect(chart.select('a.reset').style('display')).not.toBe('none');
+                expect(chart.select('a.reset').style('visibility')).not.toBe('none');
             });
 
             it('should set the filter printer', function () {
                 expect(chart.filterPrinter()).not.toBeNull();
             });
 
-            it('should turn the filter info on', function () {
-                expect(chart.select('span.filter').style('display')).not.toBe('none');
+            it('should show the filter info', function () {
+                expect(chart.select('span.filter').style('visibility')).toBe('visible');
             });
 
             it('should set filter text after slice selection', function () {

spec/pie-chart-spec.js

@@ -289,11 +289,11 @@ 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');
             });
-            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');

src/base-mixin.js

@@ -46,6 +46,7 @@ dc.baseMixin = function (_chart) {
         return _chart.keyAccessor()(d) + ': ' + _chart.valueAccessor()(d);
     };
     var _renderTitle = true;
+    var _controlsUseVisibility = false;
 
     var _transitionDuration = 750;
 
@@ -521,6 +522,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: false.
+     **/
+    _chart.controlsUseVisibility = function (_) {
+        if (!arguments.length) {
+            return _controlsUseVisibility;
+        }
+        _controlsUseVisibility = _;
+        return _chart;
+    };
+
     /**
      * Turn on optional control elements within the root element. dc currently supports the
      * following html control elements.
@@ -537,8 +551,9 @@ dc.baseMixin = function (_chart) {
      */
     _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;
     };
@@ -553,8 +568,10 @@ dc.baseMixin = function (_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>