Brush animation

spec/bar-chart-spec.js

@@ -716,7 +716,8 @@ describe('dc.barChart', function () {
                 });
 
                 it('should create a fancy brush resize handle', function () {
-                    var selectAll = chart.select('g.brush').selectAll('path.handle--custom');
+                    var selectAll = chart.select('g.brush').selectAll('path.custom-brush-handle');
+                    expect(selectAll.size()).toBe(2);
                     selectAll.each(function (d, i) {
                         if (i === 0) {
                             expect(d3.select(this).attr('d'))

spec/composite-chart-spec.js

@@ -4,6 +4,8 @@ describe('dc.compositeChart', function () {
         dateIdSumGroup, dateIdNegativeSumGroup, dateGroup;
 
     beforeEach(function () {
+        dc.constants.EVENT_DELAY = 0; // so that dc.events.trigger executes immediately
+
         data = crossfilter(loadDateFixture());
         dateDimension = data.dimension(function (d) { return d3.utcDay(d.dd); });
         dateValueSumGroup = dateDimension.group().reduceSum(function (d) { return d.value; });
@@ -236,8 +238,9 @@ describe('dc.compositeChart', function () {
             });
 
             it('should have a resize handle', function () {
-                expect(chart.selectAll('g.brush path.handle--custom').size()).not.toBe(0);
-                chart.selectAll('g.brush path.handle--custom').each(function (d, i) {
+                var selectAll = chart.select('g.brush').selectAll('path.custom-brush-handle');
+                expect(selectAll.size()).toBe(2);
+                selectAll.each(function (d, i) {
                     if (i === 0) {
                         expect(d3.select(this).attr('d'))
                             .toMatchPath('M-0.5,36.666666666666664A6,6 0 0 0 -6.5,42.666666666666664V67.33333333333333A6,' +

spec/coordinate-grid-chart-spec.js

@@ -741,7 +741,7 @@ describe('dc.coordinateGridChart', function () {
                 });
 
                 it('should update its range chart\'s filter', function () {
-                    expect(chart.rangeChart().filter()).toEqual(chart.filter());
+                    expect(dc.utils.arraysEqual(chart.rangeChart().filter(), chart.filter())).toEqual(true);
                 });
 
                 it('should trigger redraw on its range chart', function () {

spec/line-chart-spec.js

@@ -673,7 +673,8 @@ describe('dc.lineChart', function () {
                 });
 
                 it('should create a fancy brush resize handle', function () {
-                    var selectAll = chart.select('g.brush').selectAll('path.handle--custom');
+                    var selectAll = chart.select('g.brush').selectAll('path.custom-brush-handle');
+                    expect(selectAll.size()).toBe(2);
                     selectAll.each(function (d, i) {
                         if (i === 0) {
                             expect(d3.select(this).attr('d'))

spec/utils-spec.js

@@ -130,4 +130,61 @@ describe('dc utils', function () {
             expect(date.toString()).toEqual(makeDate(2012, 0, 1).toString());
         });
     });
+    describe('dc.utils.arraysEqual', function () {
+        it('nulls should be equal', function () {
+            var a1 = null;
+            var a2 = null;
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(true);
+        });
+        it('null should not be equal to any array', function () {
+            var a1 = null;
+            var a2 = [];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(false);
+        });
+        it('any array should not be equal to null', function () {
+            var a1 = null;
+            var a2 = [];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(false);
+        });
+        it('empty arrays should be', function () {
+            var a1 = [];
+            var a2 = [];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(true);
+        });
+        it('should identify equal arrays - numbers', function () {
+            var a1 = [1, 2, 3];
+            var a2 = [1, 2, 3];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(true);
+        });
+        it('should identify equal arrays - strings', function () {
+            var a1 = ['apple', 'mangoes', 'oranges', 'bananas'];
+            var a2 = ['apple', 'mangoes', 'oranges', 'bananas'];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(true);
+        });
+        it('should identify equal arrays - dates', function () {
+            var a1 = [makeDate(2012, 1, 1), makeDate(2013, 10, 15)];
+            var a2 = [makeDate(2012, 1, 1), makeDate(2013, 10, 15)];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(true);
+        });
+        it('should identify unequal arrays - numbers', function () {
+            var a1 = [4, 2, 3];
+            var a2 = [1, 2, 3];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(false);
+        });
+        it('should identify unequal arrays - strings', function () {
+            var a1 = ['apple', 'cherries', 'oranges', 'bananas'];
+            var a2 = ['apple', 'mangoes', 'oranges', 'bananas'];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(false);
+        });
+        it('should identify unequal arrays - dates', function () {
+            var a1 = [makeDate(2012, 1, 1), makeDate(2013, 10, 15)];
+            var a2 = [makeDate(2012, 1, 1), makeDate(2013, 10, 16)];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(false);
+        });
+        it('should identify equal arrays with one of the elements as 0', function () {
+            var a1 = [0, 20];
+            var a2 = [0, 20];
+            expect(dc.utils.arraysEqual(a1, a2)).toBe(true);
+        });
+    });
 });

src/bubble-chart.js

@@ -128,7 +128,7 @@ dc.bubbleChart = function (parent, chartGroup) {
         // override default x axis brush from parent chart
     };
 
-    _chart.redrawBrush = function (g, selection, doTransition) {
+    _chart.redrawBrush = function (selection, doTransition) {
         // override default x axis brush from parent chart
         _chart.fadeDeselectedArea(selection);
     };

src/composite-chart.js

@@ -60,40 +60,21 @@ dc.compositeChart = function (parent, chartGroup) {
             child.svg(_chart.svg());
             child.xUnits(_chart.xUnits());
             child.transitionDuration(_chart.transitionDuration(), _chart.transitionDelay());
-            child.brushOn(_chart.brushOn());
+            child.parentBrushOn(_chart.brushOn());
+            child.brushOn(false);
             child.renderTitle(_chart.renderTitle());
             child.elasticX(_chart.elasticX());
         }
 
         return g;
     });
 
-    _chart._brushing = function () {
-        // Avoids infinite recursion (mutual recursion between range and focus operations)
-        // Source Event will be null when brush.move is called programmatically (see below as well).
-        if (!d3.event.sourceEvent) { return; }
-
-        // Ignore event if recursive event - i.e. not directly generated by user action (like mouse/touch etc.)
-        // In this case we are more worried about this handler causing brush move programmatically which will
-        // cause this handler to be invoked again with a new d3.event (and current event set as sourceEvent)
-        // This check avoids recursive calls
-        if (d3.event.sourceEvent.type && ['start', 'brush', 'end'].indexOf(d3.event.sourceEvent.type) !== -1) {
-            return;
-        }
-
-        var selection = d3.event.selection;
-        if (selection) {
-            selection = selection.map(_chart.x().invert);
-        }
-        selection = _chart.extendBrush(selection);
-
-        _chart.redrawBrush(selection);
-
-        var brushIsEmpty = _chart.brushIsEmpty(selection);
-
+    _chart.applyBrushSelection = function (rangedFilter) {
+        _chart.replaceFilter(rangedFilter);
         for (var i = 0; i < _children.length; ++i) {
-            _children[i].replaceFilter(brushIsEmpty ? null : selection);
+            _children[i].replaceFilter(rangedFilter);
         }
+        _chart.redrawGroup();
     };
 
     _chart._prepareYAxis = function () {
@@ -285,7 +266,6 @@ dc.compositeChart = function (parent, chartGroup) {
     _chart.fadeDeselectedArea = function (selection) {
         for (var i = 0; i < _children.length; ++i) {
             var child = _children[i];
-            child.brush(_chart.brush());
             child.fadeDeselectedArea(selection);
         }
     };