Merge branch 'hotfix/2.0.0-beta.33'

AUTHORS

@@ -82,3 +82,5 @@ Wei Ding <weiding8911@gmail.com>
 Michael Dougherty <maackle.d@gmail.com>
 Paul Mach <paulmach@gmail.com>
 Fil <fil@rezo.net>
+Mauricio Bustos <m@bustos.org>
+Anders Dalvander <github@dalvander.com>

Changelog.md

@@ -1,6 +1,11 @@
 # 2.0 Series
+## 2.0.0 beta 33
+* Use keyAccessor for box plots; fix ordinal boxplot brushing and whisker widths, by Matt Traynham ([#1022](https://github.com/dc-js/dc.js/pull/1022))
+* `transitionDelay` allows staggered transitions, by Mauricio Bustos ([#1116](https://github.com/dc-js/dc.js/pull/1116))
+* Removed the confusing callback from dc.transition and documented the function
+
 ## 2.0.0 beta 32
-* elasticY and elasticX did not work if all values were negative (coordinate grid and row charts, respectively), by Sebastian Gröhn ([#879](https://github.com/dc-js/dc.js/issues/879) / [#1156](https://github.com/dc-js/dc.js/pull/1156))
+* `elasticY` and `elasticX` did not work if all values were negative (coordinate grid and row charts, respectively), by Sebastian Gröhn ([#879](https://github.com/dc-js/dc.js/issues/879) / [#1156](https://github.com/dc-js/dc.js/pull/1156))
 * Improved implementation of alignYAxes, by Mohamed Gazal and Gordon Woodhull ([#1033](https://github.com/dc-js/dc.js/pull/1033))
 * Examples of downloading the table data as it's formatted, and formatting legend items.
 * `legend.legendText` documentation was missing.

Gruntfile.js

@@ -209,7 +209,7 @@ module.exports = function (grunt) {
                         },
                         {
                             browserName: 'MicrosoftEdge',
-                            version: '20.10240',
+                            version: '14',
                             platform: 'Windows 10'
                         }
                     ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dc",
-  "version": "2.0.0-beta.32",
+  "version": "2.0.0-beta.33",
   "license": "Apache-2.0",
   "copyright": "2016",
   "description": "A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js ",

spec/box-plot-spec.js

@@ -25,6 +25,7 @@ describe('dc.boxPlot', function () {
             .margins({top: 0, right: 0, bottom: 0, left: 0})
             .boxPadding(0)
             .transitionDuration(0)
+            .transitionDelay(0)
             .y(d3.scale.linear().domain([0, 144]))
             .ordinalColors(['#01','#02']);
     });

spec/coordinate-grid-chart-spec.js

@@ -17,6 +17,7 @@ describe('dc.coordinateGridChart', function () {
             .dimension(dimension)
             .group(group)
             .transitionDuration(0)
+            .transitionDelay(0)
             .brushOn(false)
             .margins({top: 20, bottom: 0, right: 10, left: 0})
             .x(d3.time.scale.utc().domain([makeDate(2012, 4, 20), makeDate(2012, 7, 15)]));
@@ -63,6 +64,10 @@ describe('dc.coordinateGridChart', function () {
             expect(chart.transitionDuration()).toBe(0);
         });
 
+        it('should have zero transition delay', function () {
+            expect(chart.transitionDelay()).toBe(0);
+        });
+
         it('should set the margins of the chart', function () {
             expect(chart.margins()).not.toBeNull();
         });
@@ -197,6 +202,7 @@ describe('dc.coordinateGridChart', function () {
                         .dimension(dimension)
                         .group(group)
                         .transitionDuration(0)
+                        .transitionDelay(0)
                         .brushOn(false)
                         .margins({top: 20, bottom: 0, right: 10, left: 0})
                         .x(d3.time.scale.utc().domain([makeDate(2012, 4, 20), makeDate(2012, 7, 15)]));
@@ -217,6 +223,7 @@ describe('dc.coordinateGridChart', function () {
                         .dimension(dimension)
                         .group(group)
                         .transitionDuration(0)
+                        .transitionDelay(0)
                         .brushOn(false)
                         .margins({top: 20, bottom: 0, right: 10, left: 0})
                         .x(d3.time.scale.utc().domain([makeDate(2012, 4, 20), makeDate(2012, 7, 15)]));

spec/core-spec.js

@@ -107,41 +107,61 @@ describe('dc.core', function () {
                 },
                 duration: function () {
                     return this;
+                },
+                delay: function () {
+                    return this;
                 }
             };
             spyOn(selections, 'transition').and.callThrough();
             spyOn(selections, 'duration').and.callThrough();
+            spyOn(selections, 'delay').and.callThrough();
         });
 
         describe('normal', function () {
             it('transition should be activated with duration', function () {
-                dc.transition(selections, 100);
+                dc.transition(selections, 100, 100);
                 expect(selections.transition).toHaveBeenCalled();
                 expect(selections.duration).toHaveBeenCalled();
+                expect(selections.delay).toHaveBeenCalled();
+                expect(selections.duration).toHaveBeenCalledWith(100);
+                expect(selections.delay).toHaveBeenCalledWith(100);
             });
-
-            it('transition callback should be triggered', function () {
-                var triggered = false;
-                dc.transition(selections, 100, function () {
-                    triggered = true;
-                });
-                expect(triggered).toBeTruthy();
+            it('with name', function () {
+                dc.transition(selections, 100, 100, 'transition-name');
+                expect(selections.transition).toHaveBeenCalled();
+                expect(selections.transition).toHaveBeenCalledWith('transition-name');
             });
         });
 
         describe('skip', function () {
             it('transition should not be activated with 0 duration', function () {
-                dc.transition(selections, 0);
+                dc.transition(selections, 0, 0);
                 expect(selections.transition).not.toHaveBeenCalled();
                 expect(selections.duration).not.toHaveBeenCalled();
+                expect(selections.delay).not.toHaveBeenCalled();
             });
 
-            it('transition callback should not be triggered', function () {
-                var triggered = false;
-                dc.transition(selections, 0, function () {
-                    triggered = true;
-                });
-                expect(triggered).toBeFalsy();
+            it('transition should not be activated with dc.disableTransitions', function () {
+                dc.disableTransitions = true;
+                dc.transition(selections, 100);
+                expect(selections.transition).not.toHaveBeenCalled();
+                expect(selections.duration).not.toHaveBeenCalled();
+            });
+
+            afterEach(function () {
+                dc.disableTransitions = false;
+            });
+        });
+
+        describe('parameters', function () {
+            it('duration should not be called if skipped', function () {
+                dc.transition(selections);
+                expect(selections.duration).not.toHaveBeenCalled();
+            });
+
+            it('delay should not be called if skipped', function () {
+                dc.transition(selections, 100);
+                expect(selections.delay).not.toHaveBeenCalled();
             });
         });
     });

spec/line-chart-spec.js

@@ -117,9 +117,36 @@ describe('dc.lineChart', function () {
                 chart.render();
             });
 
-            it('should not render tooltips when boolean flag is false', function () {
-                expect(chart.select('.sub._0 .dc-tooltip._0 .dot').empty()).toBeTruthy();
-                expect(chart.select('.sub._1 .dc-tooltip._0 .dot').empty()).toBeTruthy();
+            it('should not render dots and tips when boolean flag is false', function () {
+                expect(chart.select('.dc-tooltip._0 .dot').empty()).toBeTruthy();
+                expect(chart.select('.dc-tooltip._0 .dot title').empty()).toBeTruthy();
+            });
+
+        });
+
+        describe('title rendering with brushOn', function () {
+            beforeEach(function () {
+                chart.brushOn(true)
+                    .xyTipsOn(true); // default, for exposition
+                chart.render();
+            });
+
+            it('should not render tips', function () {
+                expect(chart.select('.dc-tooltip._0 .dot').empty()).toBeTruthy();
+                expect(chart.select('.dc-tooltip._0 .dot title').empty()).toBeTruthy();
+            });
+
+            describe('with xyTipsOn always', function () {
+                beforeEach(function () {
+                    chart.brushOn(true)
+                        .xyTipsOn('always');
+                    chart.render();
+                });
+
+                it('should render dots', function () {
+                    expect(chart.select('.dc-tooltip._0 .dot').empty()).toBeFalsy();
+                    expect(chart.select('.dc-tooltip._0 .dot title').empty()).toBeFalsy();
+                });
             });
         });
 

spec/utils-spec.js

@@ -79,6 +79,18 @@ describe('dc utils', function () {
             var date = add(makeDate(2012, 0, 1), '10%');
             expect(date.toString()).toEqual(makeDate(2012, 0, 11).toString());
         });
+        it('should be able to add hours to dates', function () {
+            var date = add(makeDate(2012, 0, 1), '24', 'hour');
+            expect(date.toString()).toEqual(makeDate(2012, 0, 2).toString());
+        });
+        it('should be able to add weeks to dates', function () {
+            var date = add(makeDate(2012, 0, 1), '1', 'week');
+            expect(date.toString()).toEqual(makeDate(2012, 0, 8).toString());
+        });
+        it('should be able to add month to dates', function () {
+            var date = add(makeDate(2012, 0, 1), '1', 'month');
+            expect(date.toString()).toEqual(makeDate(2012, 1, 1).toString());
+        });
     });
     describe('dc.utils.subtract', function () {
         var subtract;
@@ -105,6 +117,17 @@ describe('dc utils', function () {
             var date = subtract(makeDate(2012, 0, 11), '10%');
             expect(date.toString()).toEqual(makeDate(2012, 0, 1).toString());
         });
+        it('should be able to subtract hours from dates', function () {
+            var date = subtract(makeDate(2012, 0, 2), '24', 'hour');
+            expect(date.toString()).toEqual(makeDate(2012, 0, 1).toString());
+        });
+        it('should be able to subtract week from dates', function () {
+            var date = subtract(makeDate(2012, 0, 8), '1', 'week');
+            expect(date.toString()).toEqual(makeDate(2012, 0, 1).toString());
+        });
+        it('should be able to subtract month from dates', function () {
+            var date = subtract(makeDate(2012,1,1), '1', 'month');
+            expect(date.toString()).toEqual(makeDate(2012, 0, 1).toString());
+        });
     });
 });
-

src/bar-chart.js

@@ -99,7 +99,7 @@ dc.barChart = function (parent, chartGroup) {
             labels.attr('cursor', 'pointer');
         }
 
-        dc.transition(labels, _chart.transitionDuration())
+        dc.transition(labels, _chart.transitionDuration(), _chart.transitionDelay())
             .attr('x', function (d) {
                 var x = _chart.x()(d.x);
                 if (!_centerBar) {
@@ -120,7 +120,7 @@ dc.barChart = function (parent, chartGroup) {
                 return _chart.label()(d);
             });
 
-        dc.transition(labels.exit(), _chart.transitionDuration())
+        dc.transition(labels.exit(), _chart.transitionDuration(), _chart.transitionDelay())
             .attr('height', 0)
             .remove();
     }
@@ -144,7 +144,7 @@ dc.barChart = function (parent, chartGroup) {
             bars.on('click', _chart.onClick);
         }
 
-        dc.transition(bars, _chart.transitionDuration())
+        dc.transition(bars, _chart.transitionDuration(), _chart.transitionDelay())
             .attr('x', function (d) {
                 var x = _chart.x()(d.x);
                 if (_centerBar) {
@@ -171,7 +171,7 @@ dc.barChart = function (parent, chartGroup) {
             .attr('fill', dc.pluck('data', _chart.getColor))
             .select('title').text(dc.pluck('data', _chart.title(d.name)));
 
-        dc.transition(bars.exit(), _chart.transitionDuration())
+        dc.transition(bars.exit(), _chart.transitionDuration(), _chart.transitionDelay())
             .attr('x', function (d) { return _chart.x()(d.x); })
             .attr('width', _barWidth * 0.9)
             .remove();

src/base-mixin.js

@@ -51,6 +51,8 @@ dc.baseMixin = function (_chart) {
 
     var _transitionDuration = 750;
 
+    var _transitionDelay = 0;
+
     var _filterPrinter = dc.printers.filters;
 
     var _mandatoryAttributes = ['dimension', 'group'];
@@ -609,6 +611,23 @@ dc.baseMixin = function (_chart) {
         return _chart;
     };
 
+    /**
+     * Set or get the animation transition delay (in milliseconds) for this chart instance.
+     * @method transitionDelay
+     * @memberof dc.baseMixin
+     * @instance
+     * @param {Number} [delay=0]
+     * @return {Number}
+     * @return {dc.baseMixin}
+     */
+    _chart.transitionDelay = function (delay) {
+        if (!arguments.length) {
+            return _transitionDelay;
+        }
+        _transitionDelay = delay;
+        return _chart;
+    };
+
     _chart._mandatoryAttributes = function (_) {
         if (!arguments.length) {
             return _mandatoryAttributes;
@@ -656,7 +675,7 @@ dc.baseMixin = function (_chart) {
     _chart._activateRenderlets = function (event) {
         _listeners.pretransition(_chart);
         if (_chart.transitionDuration() > 0 && _svg) {
-            _svg.transition().duration(_chart.transitionDuration())
+            _svg.transition().duration(_chart.transitionDuration()).delay(_chart.transitionDelay())
                 .each('end', function () {
                     _listeners.renderlet(_chart);
                     if (event) {

src/box-plot.js

@@ -1,3 +1,4 @@
+
 /**
  * A box plot is a chart that depicts numerical data via their quartile ranges.
  *
@@ -146,7 +147,7 @@ dc.boxPlot = function (parent, chartGroup) {
             .duration(_chart.transitionDuration())
             .tickFormat(_tickFormat);
 
-        var boxesG = _chart.chartBodyG().selectAll('g.box').data(_chart.data(), function (d) { return d.key; });
+        var boxesG = _chart.chartBodyG().selectAll('g.box').data(_chart.data(), _chart.keyAccessor());
 
         renderBoxes(boxesG);
         updateBoxes(boxesG);
@@ -163,13 +164,13 @@ dc.boxPlot = function (parent, chartGroup) {
             .attr('transform', boxTransform)
             .call(_box)
             .on('click', function (d) {
-                _chart.filter(d.key);
+                _chart.filter(_chart.keyAccessor()(d));
                 _chart.redrawGroup();
             });
     }
 
     function updateBoxes (boxesG) {
-        dc.transition(boxesG, _chart.transitionDuration())
+        dc.transition(boxesG, _chart.transitionDuration(), _chart.transitionDelay())
             .attr('transform', boxTransform)
             .call(_box)
             .each(function () {
@@ -183,13 +184,28 @@ dc.boxPlot = function (parent, chartGroup) {
 
     _chart.fadeDeselectedArea = function () {
         if (_chart.hasFilter()) {
-            _chart.g().selectAll('g.box').each(function (d) {
-                if (_chart.isSelectedNode(d)) {
-                    _chart.highlightSelected(this);
-                } else {
-                    _chart.fadeDeselected(this);
-                }
-            });
+            if (_chart.isOrdinal()) {
+                _chart.g().selectAll('g.box').each(function (d) {
+                    if (_chart.isSelectedNode(d)) {
+                        _chart.highlightSelected(this);
+                    } else {
+                        _chart.fadeDeselected(this);
+                    }
+                });
+            } else {
+                var extent = _chart.brush().extent();
+                var start = extent[0];
+                var end = extent[1];
+                var keyAccessor = _chart.keyAccessor();
+                _chart.g().selectAll('g.box').each(function (d) {
+                    var key = keyAccessor(d);
+                    if (key < start || key >= end) {
+                        _chart.fadeDeselected(this);
+                    } else {
+                        _chart.highlightSelected(this);
+                    }
+                });
+            }
         } else {
             _chart.g().selectAll('g.box').each(function () {
                 _chart.resetHighlight(this);
@@ -198,7 +214,7 @@ dc.boxPlot = function (parent, chartGroup) {
     };
 
     _chart.isSelectedNode = function (d) {
-        return _chart.hasFilter(d.key);
+        return _chart.hasFilter(_chart.keyAccessor()(d));
     };
 
     _chart.yAxisMin = function () {