Add raf + minichart speedups

- @see http://npm.im/raf
- Add function names to make flame graphs easier to  read
- date minicharts were each always re-listing weekdays which are a const
- date mini charts embed two other mini charts, each of which can be
rendered on their own animation frames
- defer rendering of minichart subviews and defer again before calling
d3

Author: imlucas

package.json

@@ -85,6 +85,7 @@
     "phantomjs-polyfill": "0.0.1",
     "pluralize": "^1.1.2",
     "qs": "^3.1.0",
+    "raf": "^3.0.0",
     "scout-brain": "http://bin.mongodb.org/js/scout-brain/v0.0.2/scout-brain-0.0.2.tar.gz",
     "scout-client": "http://bin.mongodb.org/js/scout-client/v0.0.3/scout-client-0.0.3.tar.gz",
     "scout-server": "http://bin.mongodb.org/js/scout-server/v0.0.4/scout-server-0.0.4.tar.gz",

src/minicharts/d3fns/boolean.js

@@ -3,7 +3,7 @@ var _ = require('lodash');
 var few = require('./few');
 var shared = require('./shared');
 
-module.exports = function(opts) {
+var minicharts_d3fns_boolean = function(opts) {
   var values = opts.data.values.toJSON();
 
   // group by true/false
@@ -41,3 +41,4 @@ module.exports = function(opts) {
   few(data, g, width, height);
 };
 
+module.exports = minicharts_d3fns_boolean;

src/minicharts/d3fns/date.js

@@ -3,6 +3,7 @@ var _ = require('lodash');
 var moment = require('moment');
 var shared = require('./shared');
 var many = require('./many');
+var raf = require('raf');
 
 require('../d3-tip')(d3);
 
@@ -14,7 +15,9 @@ function generateDefaults(n) {
   return doc;
 }
 
-module.exports = function(opts) {
+var weekdayLabels = moment.weekdays();
+
+var minicharts_d3fns_date = function(opts) {
   var values = opts.data.values.toJSON();
 
   // distinguish ObjectIDs from real dates
@@ -46,7 +49,6 @@ module.exports = function(opts) {
   var upperMargin = 20;
 
   // group by weekdays
-  var weekdayLabels = moment.weekdays();
   var weekdays = _(values)
     .groupBy(function(d) {
       return moment(d).weekday();
@@ -131,14 +133,16 @@ module.exports = function(opts) {
 
   var weekdayContainer = svg.append('g');
 
-  many(weekdays, weekdayContainer, width / (upperRatio + 1) - upperMargin, upperBarBottom, {
-    bgbars: true,
-    labels: {
-      'text-anchor': 'middle',
-      text: function(d) {
-        return d.label[0];
+  raf(function() {
+    many(weekdays, weekdayContainer, width / (upperRatio + 1) - upperMargin, upperBarBottom, {
+      bgbars: true,
+      labels: {
+        'text-anchor': 'middle',
+        text: function(d) {
+          return d.label[0];
+        }
       }
-    }
+    });
   });
 
   // calendar icon
@@ -154,14 +158,15 @@ module.exports = function(opts) {
 
   var hourContainer = svg.append('g')
     .attr('transform', 'translate(' + (width / (upperRatio + 1) + upperMargin) + ', 0)');
-
-  many(hours, hourContainer, width / (upperRatio + 1) * upperRatio - upperMargin, upperBarBottom, {
-    bgbars: true,
-    labels: {
-      text: function(d, i) {
-        return i % 6 === 0 || i === 23 ? d.label : '';
+  raf(function() {
+    many(hours, hourContainer, width / (upperRatio + 1) * upperRatio - upperMargin, upperBarBottom, {
+      bgbars: true,
+      labels: {
+        text: function(d, i) {
+          return i % 6 === 0 || i === 23 ? d.label : '';
+        }
       }
-    }
+    });
   });
 
   // clock icon
@@ -175,3 +180,5 @@ module.exports = function(opts) {
     .attr('font-family', 'FontAwesome')
     .text('\uf017');
 };
+
+module.exports = minicharts_d3fns_date;

src/minicharts/d3fns/many.js

@@ -5,7 +5,7 @@ var shared = require('./shared');
 
 require('../d3-tip')(d3);
 
-module.exports = function(data, g, width, height, options) {
+var minicharts_d3fns_many = function(data, g, width, height, options) {
   options = _.defaults(options || {}, {
     bgbars: false,
     scale: false,
@@ -156,3 +156,4 @@ module.exports = function(data, g, width, height, options) {
       .text(labels.text);
   }
 };
+module.exports = minicharts_d3fns_many;

src/minicharts/d3fns/shared.js

@@ -5,7 +5,7 @@ function decimalPlaces(number) {
   return ((+number).toFixed(20)).replace(/^-?\d*\.?|0+$/g, '').length;
 }
 
-module.exports = {
+var minicharts_d3fns_shared = {
 
   margin: {
     top: 10,
@@ -33,3 +33,4 @@ module.exports = {
     };
   }
 };
+module.exports = minicharts_d3fns_shared;

src/minicharts/index.js

@@ -3,6 +3,7 @@ var AmpersandView = require('ampersand-view');
 var UniqueMinichartView = require('./unique');
 var vizFns = require('./d3fns');
 var _ = require('lodash');
+var raf = require('raf');
 
 // a wrapper around VizView to set common default values
 module.exports = AmpersandView.extend({
@@ -33,7 +34,8 @@ module.exports = AmpersandView.extend({
     } else {
       this.subview = new VizView(this.viewOptions);
     }
-
-    this.renderSubview(this.subview, this.queryByHook('minichart'));
+    raf(function() {
+      this.renderSubview(this.subview, this.queryByHook('minichart'));
+    }.bind(this));
   }
 });

src/minicharts/viz.js

@@ -1,5 +1,6 @@
 var AmpersandView = require('ampersand-view');
 var _ = require('lodash');
+var raf = require('raf');
 var $ = require('jquery');
 
 var VizView = AmpersandView.extend({
@@ -121,30 +122,19 @@ var VizView = AmpersandView.extend({
 
     // call viz function
     if (this.vizFn) {
-      this.vizFn({
+      var opts = {
         width: this.width,
         height: this.height,
         data: this.data,
         el: this.el
+      };
+      var vizFn = this.vizFn.bind(this, opts);
+      raf(function minicharts_viz_call_vizfn() {
+        vizFn();
       });
     }
     return this;
   }
-  // redraw: function() {
-  //   this._chooseDataSource();
-  //   this.data = this.transform(this.data);
-  //
-  //   this._measure();
-  //
-  //   if (this.vizFn) {
-  //     this.vizFn({
-  //       width: this.width,
-  //       height: this.height,
-  //       data: this.data,
-  //       el: this.el,
-  //     });
-  //   }
-  // }
 });
 
 module.exports = VizView;