Merge pull request #263 from Turbo87/chart-component

Ember: Extract download graph component

Author: alexcrichton

app/components/download-graph.js

@@ -0,0 +1,51 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+    classNames: 'graph-data',
+
+    didInsertElement() {
+        this._super(...arguments);
+
+        Ember.$(window).on('resize.chart', () => this.rerender());
+        Ember.$(document).on('googleChartsLoaded', () => this.rerender());
+    },
+
+    willDestroyElement() {
+        Ember.$(window).off('resize.chart');
+        Ember.$(document).off('googleChartsLoaded');
+    },
+
+    didRender() {
+        this._super(...arguments);
+
+        let data = this.get('data');
+
+        if (!data || !window.google || !window.googleChartsLoaded) {
+            this.$().hide();
+            return;
+        } else {
+            this.$().show();
+        }
+
+        var myData = window.google.visualization.arrayToDataTable(data);
+
+        var fmt = new window.google.visualization.DateFormat({
+            pattern: 'LLL d, yyyy',
+        });
+        fmt.format(myData, 0);
+
+        var chart = new window.google.visualization.AreaChart(this.get('element'));
+        chart.draw(myData, {
+            chartArea: { 'left': 85, 'width': '77%', 'height': '80%' },
+            hAxis: {
+                minorGridlines: { count: 8 },
+            },
+            vAxis: {
+                minorGridlines: { count: 5 },
+                viewWindow: { min: 0, },
+            },
+            isStacked: true,
+            focusTarget: 'category',
+        });
+    },
+});

app/controllers/crate/version.js

@@ -9,7 +9,10 @@ const { computed } = Ember;
 export default Ember.Controller.extend({
     isDownloading: false,
 
-    fetchingDownloads: true,
+    extraDownloads: Ember.computed('downloads.meta.extra_downloads', function() {
+        return this.get('downloads.meta.extra_downloads') || [];
+    }),
+
     fetchingFollowing: true,
     following: false,
     currentVersion: computed.alias('model'),
@@ -112,104 +115,65 @@ export default Ember.Controller.extend({
                 url
             }).finally(() => this.set('fetchingFollowing', false));
         },
+    },
 
-        renderChart(model, downloads, extra) {
-            var dates = {};
-            var versions = [];
-            for (var i = 0; i < 90; i++) {
-                var now = moment().subtract(i, 'days');
-                dates[now.format('MMM D')] = { date: now, cnt: {} };
-            }
+    downloadData: Ember.computed('downloads', 'extraDownloads', function() {
+        let { downloads, extraDownloads: extra } = this.getProperties('downloads', 'extraDownloads');
+        if (!downloads || !extra) {
+            return;
+        }
 
-            downloads.forEach((d) => {
-                var version_id = d.get('version.id');
-                var key = moment(d.get('date')).utc().format('MMM D');
-                if (dates[key]) {
-                    var prev = dates[key].cnt[version_id] || 0;
-                    dates[key].cnt[version_id] = prev + d.get('downloads');
-                }
-            });
+        var dates = {};
+        var versions = [];
+        for (var i = 0; i < 90; i++) {
+            var now = moment().subtract(i, 'days');
+            dates[now.format('MMM D')] = { date: now, cnt: {} };
+        }
 
-            extra.forEach((d) => {
-                var key = moment(d.date).utc().format('MMM D');
-                if (dates[key]) {
-                    var prev = dates[key].cnt[null] || 0;
-                    dates[key].cnt[null] = prev + d.downloads;
-                }
-            });
-            if (this.get('requestedVersion')) {
-                versions.push({
-                    id: model.get('id'),
-                    num: model.get('num'),
-                });
-            } else {
-                var tmp = this.get('smallSortedVersions');
-                for (i = 0; i < tmp.length; i++) {
-                    versions.push({
-                        id: tmp[i].get('id'),
-                        num: tmp[i].get('num')
-                    });
-                }
-            }
-            if (extra.length > 0) {
-                versions.push({
-                    id: null,
-                    num: 'Other'
-                });
+        downloads.forEach((d) => {
+            var version_id = d.get('version.id');
+            var key = moment(d.get('date')).utc().format('MMM D');
+            if (dates[key]) {
+                var prev = dates[key].cnt[version_id] || 0;
+                dates[key].cnt[version_id] = prev + d.get('downloads');
             }
+        });
 
-            var headers = ['Date'];
-            versions.sort((b) => b.num).reverse();
-            for (i = 0; i < versions.length; i++) {
-                headers.push(versions[i].num);
+        extra.forEach((d) => {
+            var key = moment(d.date).utc().format('MMM D');
+            if (dates[key]) {
+                var prev = dates[key].cnt[null] || 0;
+                dates[key].cnt[null] = prev + d.downloads;
             }
-            var data = [headers];
-            for (var date in dates) {
-                var row = [dates[date].date.toDate()];
-                for (i = 0; i < versions.length; i++) {
-                    row.push(dates[date].cnt[versions[i].id] || 0);
-                }
-                data.push(row);
-            }
-
-            // TODO: move this to a component
-            function drawChart() {
-                if (!window.google || !window.googleChartsLoaded) {
-                    Ember.$('.graph').hide();
-                    return;
-                } else {
-                    Ember.$('.graph').show();
-                }
-                var myData = window.google.visualization.arrayToDataTable(data);
+        });
+        if (this.get('requestedVersion')) {
+            versions.push(this.get('model').getProperties('id', 'num'));
+        } else {
+            this.get('smallSortedVersions').forEach(version => {
+                versions.push(version.getProperties('id', 'num'));
+            });
+        }
+        if (extra.length > 0) {
+            versions.push({
+                id: null,
+                num: 'Other'
+            });
+        }
 
-                var fmt = new window.google.visualization.DateFormat({
-                    pattern: 'LLL d, yyyy',
-                });
-                fmt.format(myData, 0);
-                var el = document.getElementById('graph-data');
-                if (!el) {
-                    return;
-                }
-                var chart = new window.google.visualization.AreaChart(el);
-                chart.draw(myData, {
-                    chartArea: { 'left': 85, 'width': '77%', 'height': '80%' },
-                    hAxis: {
-                        minorGridlines: { count: 8 },
-                    },
-                    vAxis: {
-                        minorGridlines: { count: 5 },
-                        viewWindow: { min: 0, },
-                    },
-                    isStacked: true,
-                    focusTarget: 'category',
-                });
+        var headers = ['Date'];
+        versions.sort((b) => b.num).reverse();
+        for (i = 0; i < versions.length; i++) {
+            headers.push(versions[i].num);
+        }
+        var data = [headers];
+        for (var date in dates) {
+            var row = [dates[date].date.toDate()];
+            for (i = 0; i < versions.length; i++) {
+                row.push(dates[date].cnt[versions[i].id] || 0);
             }
+            data.push(row);
+        }
 
-            Ember.run.scheduleOnce('afterRender', this, drawChart);
-            Ember.$(window).off('resize.chart');
-            Ember.$(window).on('resize.chart', drawChart);
-            Ember.$(document).off('googleChartsLoaded');
-            Ember.$(document).on('googleChartsLoaded', drawChart);
-        },
-    },
+        return data;
+    }),
 });

app/routes/crate/version.js

@@ -17,7 +17,6 @@ export default Ember.Route.extend({
 
         controller.set('crate', crate);
         controller.set('requestedVersion', requestedVersion);
-        controller.set('fetchingDownloads', true);
         controller.set('fetchingFollowing', true);
 
         crate.get('keywords')
@@ -53,10 +52,7 @@ export default Ember.Route.extend({
         const context = controller.get('requestedVersion') ? model : this.modelFor('crate');
 
         context.get('version_downloads').then(downloads => {
-            controller.set('fetchingDownloads', false);
-
-            // make sure to pass the new `model` here because the controller's model won't have been updated yet
-            controller.send('renderChart', model, downloads, downloads.get('meta.extra_downloads') || []);
+            controller.set('downloads', downloads);
         });
     },
 

app/styles/crate.scss

@@ -269,7 +269,7 @@
 
         h4 { color: $main-color-light; }
     }
-    #graph-data {
+    .graph-data {
         width: 100%;
         height: 500px;
     }

app/templates/components/download-graph.hbs

@@ -231,7 +231,7 @@
     </div>
     <div class='graph'>
         <h4>Downloads over the last 90 days</h4>
-        <div id='graph-data'></div>
+        {{download-graph data=downloadData}}
     </div>
 </div>
 {{/if}}

app/templates/crate/version.hbs

@@ -21,10 +21,10 @@ module.exports = function(environment) {
 
   if (environment === 'development') {
     // ENV.APP.LOG_RESOLVER = true;
-    ENV.APP.LOG_ACTIVE_GENERATION = true;
+    //ENV.APP.LOG_ACTIVE_GENERATION = true;
     // ENV.APP.LOG_TRANSITIONS = true;
     // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
-    ENV.APP.LOG_VIEW_LOOKUPS = true;
+    //ENV.APP.LOG_VIEW_LOOKUPS = true;
   }
 
   if (environment === 'test') {