replace rest of .renderlet( with .on('renderlet',

fixes #906
closes #917

Author: gordonwoodhull

AUTHORS

@@ -53,3 +53,4 @@ hhravn <[email protected]>
 Mihai Hodorogea <[email protected]>
 Timothy Ruhle <[email protected]>
 Shobhit Gupta <[email protected]>
+Alan Kavanagh <[email protected]>

Changelog.md

@@ -1,4 +1,6 @@
 # 2.0 Series
+ * 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))

dc.js

@@ -32,8 +32,8 @@ describe("dc.baseMixin", function () {
             firstRenderlet = jasmine.createSpy().and.callFake(expectedCallbackSignature);
             secondRenderlet = jasmine.createSpy().and.callFake(expectedCallbackSignature);
             thirdRenderlet = jasmine.createSpy().and.callFake(expectedCallbackSignature);
-            chart.renderlet(firstRenderlet);
-            chart.renderlet(secondRenderlet);
+            chart.on("renderlet.firstRenderlet", firstRenderlet);
+            chart.on("renderlet.secondRenderlet", secondRenderlet);
             chart.on(third, thirdRenderlet);
         });
 

dc.js.map

@@ -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 () {

spec/base-mixin-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;
                 });

spec/bubble-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");
                 });
             });

spec/composite-chart-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();

spec/coordinate-grid-chart-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();

spec/data-grid-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");
             });
         });

spec/data-table-spec.js

@@ -980,15 +980,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

spec/pie-chart-spec.js

@@ -492,15 +492,15 @@ given.
 #### .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

src/base-mixin.js

@@ -513,13 +513,13 @@ <h4 id="-rendertitle-boolean-">.renderTitle(boolean)</h4>
 <h4 id="-renderlet-renderletfunction-">.renderlet(renderletFunction)</h4>
 <p>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.</p>
 <p>@Deprecated - Use <a href="#Listeners">Listeners</a> with a ‘renderlet’ prefix
-Generates a random key for the renderlet, which makes it hard for removal.</p>
-<pre><code class="lang-js"><span class="hljs-comment">// renderlet function</span>
-chart.renderlet(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(chart)</span></span>{
+Generates a random key for the renderlet, which makes it hard to remove.</p>
+<pre><code class="lang-js"><span class="hljs-comment">// do this instead of .renderlet(function(chart) { ... })</span>
+chart.on(<span class="hljs-string">"renderlet"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(chart)</span></span>{
     <span class="hljs-comment">// mix of dc API and d3 manipulation</span>
     chart.select(<span class="hljs-string">'g.y'</span>).style(<span class="hljs-string">'display'</span>, <span class="hljs-string">'none'</span>);
     <span class="hljs-comment">// its a closure so you can also access other chart variable available in the closure scope</span>

web/docs/api-latest.md

@@ -40,7 +40,7 @@
               .yAxisLabel("This is the Y Axis!")
               .dimension(runDimension)
               .group(speedSumGroup)
-              .renderlet(function(chart) {
+              .on("renderlet", function(chart) {
                   chart.selectAll('rect').on("click", function(d) {
                       console.log("click!", d);
                   });