resize brush handles on chart redraw

for #971 also, transition the brush and optionalTransition helper also enables brush for resize-right-axis for testing purposes
dc-js · Aug 5, 2015 · 354b890 · 354b890
1 parent a83e621
commit 354b890
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 23 deletions.
diff --git a/dc.js b/dc.js
diff --git a/dc.js.map b/dc.js.map
diff --git a/dc.min.js b/dc.min.js
diff --git a/dc.min.js.map b/dc.min.js.map
diff --git a/src/coordinate-grid-mixin.js b/src/coordinate-grid-mixin.js
@@ -871,7 +871,7 @@ dc.coordinateGridMixin = function (_chart) {
                 .attr('class', 'brush')
                 .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')')
                 .call(_brush.x(_chart.x()));
-            _chart.setBrushY(gBrush);
+            _chart.setBrushY(gBrush, false);
             _chart.setHandlePaths(gBrush);
 
             if (_chart.hasFilter()) {
@@ -884,8 +884,10 @@ dc.coordinateGridMixin = function (_chart) {
         gBrush.selectAll('.resize').append('path').attr('d', _chart.resizeHandlePath);
     };
 
-    _chart.setBrushY = function (gBrush) {
-        gBrush.selectAll('rect').attr('height', brushHeight());
+    _chart.setBrushY = function (gBrush, doTransition) {
+        var transition = dc.optionalTransition(doTransition, _chart.transitionDuration());
+        transition(gBrush.selectAll('.brush rect')).attr('height', brushHeight());
+        transition(gBrush.selectAll('.resize path')).attr('d', _chart.resizeHandlePath);
     };
 
     _chart.extendBrush = function () {
@@ -932,7 +934,7 @@ dc.coordinateGridMixin = function (_chart) {
 
             var gBrush = g.select('g.brush');
             gBrush.call(_chart.brush().x(_chart.x()));
-            _chart.setBrushY(gBrush);
+            _chart.setBrushY(gBrush, true);
         }
 
         _chart.fadeDeselectedArea();

diff --git a/src/core.js b/src/core.js
@@ -197,6 +197,20 @@ dc.transition = function (selections, duration, callback) {
     return s;
 };
 
+/* somewhat silly, but to avoid duplicating logic */
+dc.optionalTransition = function (enable, duration, callback) {
+    if (enable) {
+        return function (selection) {
+            return dc.transition(selection, duration, callback);
+        };
+    }
+    else {
+        return function (selection) {
+            return selection;
+        };
+    }
+};
+
 dc.units = {};
 
 /**

diff --git a/web/js/dc.js b/web/js/dc.js
diff --git a/web/js/dc.js.map b/web/js/dc.js.map
diff --git a/web/js/dc.min.js b/web/js/dc.min.js
diff --git a/web/js/dc.min.js.map b/web/js/dc.min.js.map
diff --git a/web/resizing/resizing-right-axis.html b/web/resizing/resizing-right-axis.html
@@ -68,7 +68,7 @@
                 .elasticY(true)
                 .renderHorizontalGridLines(true)
                 .legend(dc.legend().x(90).y(10).itemHeight(13).gap(5))
-                .brushOn(false)
+                .brushOn(true)
                 .compose([
                     dc.lineChart(moveChart)
                             .group(indexAvgByMonthGroup, "Monthly Index Average")