Propagate filters on composite chart to children fixes #677 and #706

Changelog.md

@@ -1,3 +1,6 @@
+## 3.0.4
+* Propagate filters on composite chart to children, by Deepak Kumar ([#1435](https://github.com/dc-js/dc.js/pull/1435)). Fixes remaining parts of ([#390](https://github.com/dc-js/dc.js/issues/390) / [#706](https://github.com/dc-js/dc.js/issues/706)).
+
 ## 3.0.3
 * Update versions and release new fiddles and blocks pegged to dc@3 and d3@5
 

spec/composite-chart-spec.js

@@ -262,8 +262,12 @@ describe('dc.compositeChart', function () {
             });
 
             describe('when filtering the chart', function () {
+                var filter1, filter2;
+
                 beforeEach(function () {
-                    chart.filter([makeDate(2012, 5, 1), makeDate(2012, 5, 30)]).redraw();
+                    filter1 = [makeDate(2012, 5, 1), makeDate(2012, 5, 30)];
+                    filter2 = [makeDate(2012, 6, 10), makeDate(2012, 6, 20)];
+                    chart.filter(filter1).redraw();
                 });
 
                 it('should set the extent height to chart height', function () {
@@ -277,6 +281,26 @@ describe('dc.compositeChart', function () {
                 it('should fade filtered bars into the background', function () {
                     expect(chart.selectAll('g.sub rect.deselected').size()).toBe(4);
                 });
+
+                it('should set the same filter for each children', function () {
+                    for (var i = 0; i < chart.children().length; ++i) {
+                        expect(chart.children()[i].filter()).toEqual(filter1);
+                    }
+                });
+
+                it('should reset filters for each children', function () {
+                    chart.filter(null);
+                    for (var i = 0; i < chart.children().length; ++i) {
+                        expect(chart.children()[i].filter()).toEqual(null);
+                    }
+                });
+
+                it('should replace filters for each children', function () {
+                    chart.replaceFilter(filter2);
+                    for (var i = 0; i < chart.children().length; ++i) {
+                        expect(chart.children()[i].filter()).toEqual(filter2);
+                    }
+                });
             });
 
             describe('after filtering all', function () {
@@ -708,6 +732,15 @@ describe('dc.compositeChart', function () {
                 expect(otherDimension.top(Infinity).length).toBe(4);
             });
 
+            it('should set correct filters in scatter plots', function () {
+                jasmine.clock().tick(100);
+                for (var i = 0; i < 2; ++i) {
+                    var filter = chart.children()[i].filter();
+                    expect(filter.filterType).toEqual('RangedTwoDimensionalFilter');
+                    expect(dc.utils.arraysEqual(filter, [22, 35])).toEqual(true);
+                }
+            });
+
             describe('brush decreases in size', function () {
                 beforeEach(function () {
                     simulateChartBrushing(chart, [22, 33]);
@@ -719,6 +752,14 @@ describe('dc.compositeChart', function () {
                     expect(otherDimension.top(Infinity).length).toBe(2);
                 });
 
+                it('should set correct filters in scatter plots', function () {
+                    jasmine.clock().tick(100);
+                    for (var i = 0; i < 2; ++i) {
+                        var filter = chart.children()[i].filter();
+                        expect(filter.filterType).toEqual('RangedTwoDimensionalFilter');
+                        expect(dc.utils.arraysEqual(filter, [22, 33])).toEqual(true);
+                    }
+                });
             });
 
             describe('brush disappears', function () {
@@ -731,6 +772,12 @@ describe('dc.compositeChart', function () {
                     expect(otherDimension.top(Infinity).length).toBe(10);
                 });
             });
+
+            it('should set clear filters in all children', function () {
+                for (var i = 0; i < chart.children().length; ++i) {
+                    expect(chart.children()[i].filter()).toEqual(null);
+                }
+            });
         });
     });
 });

src/composite-chart.js

@@ -69,13 +69,14 @@ dc.compositeChart = function (parent, chartGroup) {
         return g;
     });
 
-    _chart.applyBrushSelection = function (rangedFilter) {
-        _chart.replaceFilter(rangedFilter);
+    _chart.on('filtered.' + dc.utils.uniqueId(), function (chart) {
+        // Propagate the filters onto the children
+        // Notice that on children the call is .replaceFilter and not .filter
+        //   the reason is that _chart.filter() returns the entire current set of filters not just the last added one
         for (var i = 0; i < _children.length; ++i) {
-            _children[i].replaceFilter(rangedFilter);
+            _children[i].replaceFilter(_chart.filter());
         }
-        _chart.redrawGroup();
-    };
+    });
 
     _chart._prepareYAxis = function () {
         var left = (leftYAxisChildren().length !== 0);

src/coordinate-grid-mixin.js

@@ -1413,7 +1413,7 @@ dc.coordinateGridMixin = function (_chart) {
             return _focusChart;
         }
         _focusChart = c;
-        _chart.on('filtered', function (chart) {
+        _chart.on('filtered.' + dc.utils.uniqueId(), function (chart) {
             if (!chart.filter()) {
                 dc.events.trigger(function () {
                     _focusChart.x().domain(_focusChart.xOriginalDomain(), true);