Merge tag '2.0.0-beta.11' into develop

2.0.0 beta 11
dc-js · Jun 1, 2015 · 55f8b5c · 55f8b5c
2 parents d18f09b + dcd69ff
commit 55f8b5c
Show file tree

Hide file tree

Showing 33 changed files with 152 additions and 74 deletions.
diff --git a/AUTHORS b/AUTHORS
@@ -54,3 +54,4 @@ Mihai Hodorogea <mihaihodorogea@gmail.com>
 Enrico Spinielli <enrico.spinielli+github@gmail.com>
 Timothy Ruhle <timothy.ruhle@gmail.com>
 Shobhit Gupta <shobhitg@vmware.com>
+Alan Kavanagh <akavanagh208@gmail.com>
diff --git a/Changelog.md b/Changelog.md
@@ -3,6 +3,10 @@
  * Front page stable version automatically read from GitHub, by Enrico Spinielli ([#865](https://github.com/dc-js/dc.js/pull/865))
 
 # 2.0 Series
+## 2.0.0 beta 11
+ * pretransition event ([#806](https://github.com/dc-js/dc.js/issues/806))
+ * replace `.renderlet(...)` with `.on("renderlet", ...)` in test and examples, by Alan Kavanagh ([#906](https://github.com/dc-js/dc.js/issues/906) / ([#917](https://github.com/dc-js/dc.js/pull/917))
+
 ## 2.0.0 beta 10
  * component package manager support, by Shobhit Gupta ([#860](https://github.com/dc-js/dc.js/pull/860))
  * add sourcemaps (*.map) to distributions ([#866](https://github.com/dc-js/dc.js/issues/866))

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "dcjs",
-  "version": "2.0.0-beta.10",
+  "version": "2.1.0-dev",
   "main": ["dc.js", "dc.css"],
   "keywords": [
     "visualization",

diff --git a/component.json b/component.json
@@ -2,7 +2,7 @@
   "name": "dc.js",
   "repository": "dc-js/dc.js",
   "description": "Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js",
-  "version": "2.0.0-beta.10",
+  "version": "2.1.0-dev",
   "keywords": [
     "visualization",
     "svg",

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/spec/bar-chart-spec.js b/spec/bar-chart-spec.js
@@ -255,7 +255,7 @@ describe('dc.barChart', function() {
             describe('with a custom click handler', function() {
                 beforeEach(function() {
                     chart.brushOn(false)
-                        .renderlet(function(_chart) {
+                        .on('renderlet', function(_chart) {
                             _chart.selectAll("rect.bar").on("click", _chart.onClick);
                         })
                         .render();

diff --git a/spec/base-mixin-spec.js b/spec/base-mixin-spec.js
@@ -1,5 +1,5 @@
 describe("dc.baseMixin", function () {
-    var chart, dimension, group, addFilterHandler, removeFilterHandler, hasFilterHandler, resetFilterHandler;
+    var id, chart, dimension, group, addFilterHandler, removeFilterHandler, hasFilterHandler, resetFilterHandler;
 
     beforeEach(function () {
         var data = crossfilter(loadDateFixture());
@@ -14,8 +14,12 @@ describe("dc.baseMixin", function () {
             .options({
                 dimension: dimension,
                 group: group,
-                transitionDuration: 0
+                transitionDuration: 100
             });
+        id = 'base-chart';
+        appendChartID(id);
+        chart.anchor('#' + id)
+            .resetSvg(); // so that renderlets can fire
         addFilterHandler = chart.addFilterHandler();
         hasFilterHandler = chart.hasFilterHandler();
         removeFilterHandler = chart.removeFilterHandler();
@@ -24,51 +28,85 @@ describe("dc.baseMixin", function () {
 
     describe('renderlets', function () {
         var firstRenderlet, secondRenderlet, thirdRenderlet,
-            third = 'renderlet.third';
+            pretransition;
         beforeEach(function () {
             var expectedCallbackSignature = function (callbackChart) {
                 expect(callbackChart).toBe(chart);
             };
             firstRenderlet = jasmine.createSpy().and.callFake(expectedCallbackSignature);
             secondRenderlet = jasmine.createSpy().and.callFake(expectedCallbackSignature);
             thirdRenderlet = jasmine.createSpy().and.callFake(expectedCallbackSignature);
-            chart.renderlet(firstRenderlet);
+            pretransition = jasmine.createSpy().and.callFake(expectedCallbackSignature);
+            chart.renderlet(firstRenderlet); // still testing renderlet event-namespace generation here
             chart.renderlet(secondRenderlet);
-            chart.on(third, thirdRenderlet);
+            chart.on('renderlet.third', thirdRenderlet);
+            chart.on('pretransition.pret', pretransition);
+        });
+
+        it('should not execute a renderlet until after the render transitions', function() {
+            chart.render();
+            expect(firstRenderlet).not.toHaveBeenCalled();
+            flushAllD3Transitions();
+            expect(firstRenderlet).toHaveBeenCalled();
+        });
+
+        it('should not execute a renderlet until after the redraw transitions', function() {
+            chart.redraw();
+            expect(firstRenderlet).not.toHaveBeenCalled();
+            flushAllD3Transitions();
+            expect(firstRenderlet).toHaveBeenCalled();
+        });
+
+        it('should execute pretransition event before the render transitions', function() {
+            chart.render();
+            expect(pretransition).toHaveBeenCalled();
+            flushAllD3Transitions();
+        });
+
+        it('should execute pretransition event before the redraw transitions', function() {
+            chart.redraw();
+            expect(pretransition).toHaveBeenCalled();
+            flushAllD3Transitions();
         });
 
         it('should execute each renderlet after a render', function () {
             chart.render();
+            flushAllD3Transitions();
             expect(firstRenderlet).toHaveBeenCalled();
             expect(secondRenderlet).toHaveBeenCalled();
         });
 
         it('should execute each renderlet after a redraw', function () {
             chart.redraw();
+            flushAllD3Transitions();
             expect(firstRenderlet).toHaveBeenCalled();
             expect(secondRenderlet).toHaveBeenCalled();
         });
 
         it('should execute a named renderlet after a render', function () {
             chart.render();
+            flushAllD3Transitions();
             expect(thirdRenderlet).toHaveBeenCalled();
         });
 
         it('should execute a named renderlet after a redraw', function () {
             chart.redraw();
+            flushAllD3Transitions();
             expect(thirdRenderlet).toHaveBeenCalled();
         });
 
         it('should remove a named renderlet expect no call after a redraw', function () {
-            chart.on(third);
+            chart.on('renderlet.third');
             chart.redraw();
+            flushAllD3Transitions();
             expect(secondRenderlet).toHaveBeenCalled();
             expect(thirdRenderlet).not.toHaveBeenCalled();
         });
 
         it('should remove a named renderlet and expect no call after a redraw', function () {
-            chart.on(third);
+            chart.on('renderlet.third');
             chart.render();
+            flushAllD3Transitions();
             expect(secondRenderlet).toHaveBeenCalled();
             expect(thirdRenderlet).not.toHaveBeenCalled();
         });
@@ -87,14 +125,17 @@ describe("dc.baseMixin", function () {
 
                 chart.on('preRender', preRenderSpy);
                 chart.on('postRender', postRenderSpy);
-                chart.render();
             });
 
             it('should execute the preRender callback', function () {
+                chart.render();
+                flushAllD3Transitions();
                 expect(preRenderSpy).toHaveBeenCalled();
             });
 
             it('should execute the postRender callback', function () {
+                chart.render();
+                flushAllD3Transitions();
                 expect(postRenderSpy).toHaveBeenCalled();
             });
         });
@@ -168,14 +209,18 @@ describe("dc.baseMixin", function () {
 
                 chart.on("preRedraw", preRedrawSpy);
                 chart.on("postRedraw", postRedrawSpy);
-                chart.redraw();
             });
 
-            it('should execute the preRedraw callback', function () {
+            it('should execute the preRedraw callback before transitions', function () {
+                chart.redraw();
                 expect(preRedrawSpy).toHaveBeenCalled();
+                flushAllD3Transitions();
             });
 
-            it('should execute the postRedraw callback', function () {
+            it('should execute the postRedraw callback after transitions', function () {
+                chart.redraw();
+                expect(postRedrawSpy).not.toHaveBeenCalled();
+                flushAllD3Transitions();
                 expect(postRedrawSpy).toHaveBeenCalled();
             });
         });

diff --git a/spec/bubble-chart-spec.js b/spec/bubble-chart-spec.js
@@ -285,7 +285,7 @@ describe('dc.bubbleChart', function() {
                 chart.selectAll("circle").attr("fill", "red");
             });
             renderlet.and.callThrough();
-            chart.renderlet(renderlet);
+            chart.on("renderlet", renderlet);
         });
 
         it('is invoked with render', function () {

diff --git a/spec/composite-chart-spec.js b/spec/composite-chart-spec.js
@@ -354,7 +354,7 @@ describe('dc.compositeChart', function() {
 
     describe('subchart renderlets', function () {
         beforeEach(function () {
-            chart.children()[0].renderlet(function(chart) {
+            chart.children()[0].on("renderlet", function(chart) {
                 chart.selectAll('rect.bar').attr('width', function(d) {
                     return 10;
                 });

diff --git a/spec/coordinate-grid-chart-spec.js b/spec/coordinate-grid-chart-spec.js
@@ -117,7 +117,7 @@ describe('dc.coordinateGridChart', function() {
 
         describe('renderlets', function () {
             beforeEach(function () {
-                chart.renderlet(function (chart) {
+                chart.on("renderlet", function (chart) {
                     chart.selectAll("path").attr("fill", "red");
                 });
             });

diff --git a/spec/data-grid-spec.js b/spec/data-grid-spec.js
@@ -84,7 +84,7 @@ describe('dc.dataGrid', function() {
                 chart.selectAll(".dc-grid-label").text("changed");
             });
             derlet.and.callThrough();
-            chart.renderlet(derlet);
+            chart.on("renderlet", derlet);
         });
         it('custom renderlet should be invoked with render', function() {
             chart.render();

diff --git a/spec/data-table-spec.js b/spec/data-table-spec.js
@@ -87,7 +87,7 @@ describe('dc.dataTable', function() {
                 chart.selectAll("td.dc-table-label").text("changed");
             });
             derlet.and.callThrough();
-            chart.renderlet(derlet);
+            chart.on("renderlet", derlet);
         });
         it('custom renderlet should be invoked with render', function() {
             chart.render();

diff --git a/spec/helpers/spec-helper.js b/spec/helpers/spec-helper.js
@@ -32,3 +32,11 @@ function makeDate(year, month, day) {
         throw new Error("makeDate takes year, month, day");
     return new Date(Date.UTC(year, month, day, 0, 0, 0, 0));
 }
+
+// http://stackoverflow.com/questions/20068497/d3-transition-in-unit-testing
+function flushAllD3Transitions() {
+    var now = Date.now;
+    Date.now = function() { return Infinity; };
+    d3.timer.flush();
+    Date.now = now;
+}
diff --git a/spec/pie-chart-spec.js b/spec/pie-chart-spec.js
@@ -478,7 +478,7 @@ describe('dc.pieChart', function() {
         var chart;
         beforeEach(function() {
             chart = buildChart("chart-renderlet");
-            chart.renderlet(function() {
+            chart.on("renderlet", function() {
                 chart.selectAll("path").attr("fill", "red");
             });
         });

diff --git a/src/base-mixin.js b/src/base-mixin.js
@@ -58,7 +58,8 @@ dc.baseMixin = function (_chart) {
         'postRedraw',
         'filtered',
         'zoomed',
-        'renderlet');
+        'renderlet',
+        'pretransition');
 
     var _legend;
 
@@ -476,6 +477,7 @@ dc.baseMixin = function (_chart) {
     };
 
     _chart._activateRenderlets = function (event) {
+        _listeners.pretransition(_chart);
         if (_chart.transitionDuration() > 0 && _svg) {
             _svg.transition().duration(_chart.transitionDuration())
                 .each('end', function () {
@@ -980,15 +982,15 @@ dc.baseMixin = function (_chart) {
     #### .renderlet(renderletFunction)
     A renderlet is similar to an event listener on rendering event. Multiple renderlets can be added
     to an individual chart.  Each time a chart is rerendered or redrawn the renderlets are invoked
-    right after the chart finishes its own drawing routine, giving you a way to modify the svg
+    right after the chart finishes its transitions, giving you a way to modify the svg
     elements. Renderlet functions take the chart instance as the only input parameter and you can
     use the dc API or use raw d3 to achieve pretty much any effect.
 
     @Deprecated - Use [Listeners](#Listeners) with a 'renderlet' prefix
-    Generates a random key for the renderlet, which makes it hard for removal.
+    Generates a random key for the renderlet, which makes it hard to remove.
     ```js
-    // renderlet function
-    chart.renderlet(function(chart){
+    // do this instead of .renderlet(function(chart) { ... })
+    chart.on("renderlet", function(chart){
         // mix of dc API and d3 manipulation
         chart.select('g.y').style('display', 'none');
         // its a closure so you can also access other chart variable available in the closure scope
@@ -1107,6 +1109,9 @@ dc.baseMixin = function (_chart) {
     This listener function will be invoked after transitions after redraw and render. Replaces the
     deprecated `.renderlet()` method.
 
+    #### .on('pretransition', function(chart, filter){...})
+    Like `.on('renderlet', ...)` but the event is fired before transitions start.
+
     #### .on('preRender', function(chart){...})
     This listener function will be invoked before chart rendering.
 

diff --git a/src/coordinate-grid-mixin.js b/src/coordinate-grid-mixin.js
@@ -1056,7 +1056,7 @@ dc.coordinateGridMixin = function (_chart) {
     to null, then the zoom will be reset. _For focus to work elasticX has to be turned off;
     otherwise focus will be ignored._
     ```js
-    chart.renderlet(function(chart){
+    chart.on('renderlet', function(chart) {
         // smooth the rendering through event throttling
         dc.events.trigger(function(){
             // focus some other chart to the range selected by user on this chart

diff --git a/src/events.js b/src/events.js
@@ -11,7 +11,7 @@ function allows the library to smooth out the rendering by throttling events and
 the most recent event.
 
 ```js
-    chart.renderlet(function(chart){
+    chart.on('renderlet', function(chart) {
         // smooth the rendering through event throttling
         dc.events.trigger(function(){
             // focus some other chart to the range selected by user on this chart