Brush animation

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

@@ -87,7 +87,7 @@ dc.compositeChart = function (parent, chartGroup) {
         }
         selection = _chart.extendBrush(selection);
 
-        _chart.redrawBrush(selection);
+        _chart.redrawBrush(selection, false);
 
         var brushIsEmpty = _chart.brushIsEmpty(selection);
 

src/coordinate-grid-mixin.js

@@ -456,11 +456,6 @@ dc.coordinateGridMixin = function (_chart) {
         return groups.map(_chart.keyAccessor());
     };
 
-    function compareDomains (d1, d2) {
-        return !d1 || !d2 || d1.length !== d2.length ||
-            d1.some(function (elem, i) { return (elem && d2[i]) ? elem.toString() !== d2[i].toString() : elem === d2[i]; });
-    }
-
     function prepareXAxis (g, render) {
         if (!_chart.isOrdinal()) {
             if (_chart.elasticX()) {
@@ -483,7 +478,7 @@ dc.coordinateGridMixin = function (_chart) {
 
         // has the domain changed?
         var xdom = _x.domain();
-        if (render || compareDomains(_lastXDomain, xdom)) {
+        if (render || !dc.utils.arraysEqual(_lastXDomain, xdom)) {
             _chart.rescale();
         }
         _lastXDomain = xdom;
@@ -978,7 +973,7 @@ dc.coordinateGridMixin = function (_chart) {
 
         _chart._filter(_);
 
-        _chart.redrawBrush(_);
+        _chart.redrawBrush(_, false);
 
         return _chart;
     });
@@ -1023,6 +1018,8 @@ dc.coordinateGridMixin = function (_chart) {
                 .attr('class', 'brush')
                 .attr('transform', 'translate(' + _chart.margins().left + ',' + _chart.margins().top + ')');
 
+            _chart.setBrushExtents();
+
             _chart.redrawBrush(_chart.filter(), doTransition);
         }
     };
@@ -1089,15 +1086,21 @@ dc.coordinateGridMixin = function (_chart) {
         }
     };
 
-    _chart.redrawBrush = function (selection, doTransition) {
-        if (_brushOn && _gBrush) {
-            // Set boundaries of the brush, must set it before applying to _gBrush
-            _brush.extent([[0, 0], [brushWidth(), brushHeight()]]);
+    _chart.setBrushExtents = function () {
+        // Set boundaries of the brush, must set it before applying to _gBrush
+        _brush.extent([[0, 0], [brushWidth(), brushHeight()]]);
 
-            _gBrush
-                .call(_brush);
+        _gBrush
+            .call(_brush);
 
-            _chart.setHandlePaths(_gBrush);
+        _chart.setHandlePaths(_gBrush);
+    };
+
+    _chart.redrawBrush = function (selection, doTransition) {
+        if (_brushOn && _gBrush) {
+            if (_resizing) {
+                _chart.setBrushExtents();
+            }
 
             if (!selection) {
                 _brush.move(_gBrush, null);

src/scatter-plot.js

@@ -432,7 +432,7 @@ dc.scatterPlot = function (parent, chartGroup) {
         }
         selection = _chart.extendBrush(selection);
 
-        _chart.redrawBrush(selection);
+        _chart.redrawBrush(selection, false);
 
         if (brushIsEmpty) {
             dc.events.trigger(function () {
@@ -451,7 +451,7 @@ dc.scatterPlot = function (parent, chartGroup) {
         }
     };
 
-    _chart.redrawBrush = function (selection) {
+    _chart.redrawBrush = function (selection, doTransition) {
         // override default x axis brush from parent chart
         var _brush = _chart.brush();
         var _gBrush = _chart.gBrush();

src/utils.js

@@ -311,3 +311,24 @@ dc.utils.appendOrSelect = function (parent, selector, tag) {
  * @returns {Number}
  */
 dc.utils.safeNumber = function (n) { return dc.utils.isNumber(+n) ? +n : 0;};
+
+/**
+ * Return true if both arrays are equal, if both array are null these are considered equal
+ * @method arraysEqual
+ * @memberof dc.utils
+ * @param {Array|null} a1
+ * @param {Array|null} a2
+ * @returns {Boolean}
+ */
+dc.utils.arraysEqual = function (a1, a2) {
+    if (!a1 || !a2) {
+        return a1 === a2;
+    }
+
+    return a1.length === a2.length &&
+        // If elements are not integers/strings, we hope that it will match because of toString
+        // Test cases cover dates as well.
+        a1.every(function (elem, i) {
+            return elem === a2[i] || elem.toString() === a2[i].toString();
+        });
+};

web/examples/range-series.html

@@ -84,7 +84,9 @@
                 });
             } else if (!rangesEqual(chart.filter(), overviewChart.focusChart().filter())) {
                 dc.events.trigger(function () {
-                    overviewChart.focusChart().focus(chart.filter());
+                    // The second parameter is quite important. It asks the focus operation not to propagate events
+                    // In absence of that it will cause infinite mutual recursion
+                    overviewChart.focusChart().focus(chart.filter(), true);
                 });
             }
         });
@@ -98,7 +100,7 @@
     .group(runGroup)
     .seriesAccessor(function(d) {return "Expt: " + d.key[0];})
     .keyAccessor(function(d) {return +d.key[1];})
-    .valueAccessor(function(d) {return +d.value - 500;})
+    .valueAccessor(function(d) {return +d.value - 500;});
 
   dc.renderAll();