Auto merge of #3234 - Turbo87:downloads-prop, r=locks

Move download data processing code into `DownloadGraph` component

This code is only needed inside the `DownloadGraph` component, so that's where the code should live. This also gives us the opportunity to simplify the code a little bit, since the Chart.js library needs to data in a different layout than the previous implementation that was based on Google Charts. Visually the results should still be identical to the previous state though :)

r? `@locks`

Author: bors

app/components/download-graph.js

@@ -3,6 +3,7 @@ import { inject as service } from '@ember/service';
 import { waitForPromise } from '@ember/test-waiters';
 import Component from '@glimmer/component';
 
+import subDays from 'date-fns/subDays';
 import window from 'ember-window-mock';
 
 // Colors by http://colorbrewer2.org/#type=diverging&scheme=RdBu&n=10
@@ -65,10 +66,53 @@ export default class DownloadGraph extends Component {
   }
 
   get data() {
-    let [labels, ...rows] = this.args.data;
+    let downloads = this.args.data;
+    if (!downloads) {
+      return { datasets: [] };
+    }
+
+    let extra = downloads.content?.meta?.extra_downloads ?? [];
+
+    let dates = {};
+    let versions = new Set([]);
+
+    let now = new Date();
+    for (let i = 0; i < 90; i++) {
+      let date = subDays(now, i);
+      dates[date.toISOString().slice(0, 10)] = { date, cnt: {} };
+    }
+
+    downloads.forEach(d => {
+      let version_num = d.version.num;
+
+      versions.add(version_num);
+
+      let key = d.date;
+      if (dates[key]) {
+        let prev = dates[key].cnt[version_num] || 0;
+        dates[key].cnt[version_num] = prev + d.downloads;
+      }
+    });
+
+    extra.forEach(d => {
+      let key = d.date;
+      if (dates[key]) {
+        let prev = dates[key].cnt['Other'] || 0;
+        dates[key].cnt['Other'] = prev + d.downloads;
+      }
+    });
+
+    let versionsList = [...versions].sort();
+    if (extra.length !== 0) {
+      versionsList.unshift('Other');
+    }
+
+    let rows = Object.keys(dates).map(date => [
+      dates[date].date,
+      ...versionsList.map(version => dates[date].cnt[version] || 0),
+    ]);
 
-    let datasets = labels
-      .slice(1)
+    let datasets = versionsList
       .map((label, index) => ({
         data: rows.map(row => ({ x: row[0], y: row[index + 1] })),
         label: label,

app/controllers/crate/version.js

@@ -1,13 +1,10 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
-import { alias, readOnly } from '@ember/object/computed';
+import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 
-import subDays from 'date-fns/subDays';
 import { task } from 'ember-concurrency';
 
-const NUM_VERSIONS = 5;
-
 export default class CrateVersionController extends Controller {
   @service session;
 
@@ -17,7 +14,6 @@ export default class CrateVersionController extends Controller {
   }
 
   @alias('downloadsContext.version_downloads') downloads;
-  @alias('downloads.content.meta.extra_downloads') extraDownloads;
   @alias('model.crate') crate;
   @alias('model.requestedVersion') requestedVersion;
   @alias('model.version') currentVersion;
@@ -27,78 +23,6 @@ export default class CrateVersionController extends Controller {
     return this.crate.owner_user.findBy('id', this.session.currentUser?.id);
   }
 
-  @readOnly('crate.versions') sortedVersions;
-
-  @computed('sortedVersions')
-  get smallSortedVersions() {
-    return this.sortedVersions.slice(0, NUM_VERSIONS);
-  }
-
-  @computed('downloads', 'extraDownloads', 'requestedVersion')
-  get downloadData() {
-    let downloads = this.downloads;
-    if (!downloads) {
-      return;
-    }
-
-    let extra = this.extraDownloads || [];
-
-    let dates = {};
-    let versions = [];
-
-    let now = new Date();
-    for (let i = 0; i < 90; i++) {
-      let date = subDays(now, i);
-      dates[date.toISOString().slice(0, 10)] = { date, cnt: {} };
-    }
-
-    downloads.forEach(d => {
-      let version_id = d.version.id;
-      let key = d.date;
-      if (dates[key]) {
-        let prev = dates[key].cnt[version_id] || 0;
-        dates[key].cnt[version_id] = prev + d.downloads;
-      }
-    });
-
-    extra.forEach(d => {
-      let key = d.date;
-      if (dates[key]) {
-        let prev = dates[key].cnt[null] || 0;
-        dates[key].cnt[null] = prev + d.downloads;
-      }
-    });
-    if (this.requestedVersion) {
-      versions.push(this.currentVersion.getProperties('id', 'num'));
-    } else {
-      this.smallSortedVersions.forEach(version => {
-        versions.push(version.getProperties('id', 'num'));
-      });
-    }
-    if (extra.length !== 0) {
-      versions.push({
-        id: null,
-        num: 'Other',
-      });
-    }
-
-    let headers = ['Date'];
-    versions.sort(b => b.num).reverse();
-    for (let version of versions) {
-      headers.push(version.num);
-    }
-    let data = [headers];
-    for (let date in dates) {
-      let row = [dates[date].date];
-      for (let version of versions) {
-        row.push(dates[date].cnt[version.id] || 0);
-      }
-      data.push(row);
-    }
-
-    return data;
-  }
-
   @alias('loadReadmeTask.last.value') readme;
 
   @task(function* () {

app/templates/crate/version.hbs

@@ -100,7 +100,7 @@
     </div>
     <div local-class='graph'>
       <h4>Downloads over the last 90 days</h4>
-      <DownloadGraph @data={{this.downloadData}} local-class="graph-data" />
+      <DownloadGraph @data={{this.downloads}} local-class="graph-data" />
     </div>
   </div>
 {{/unless}}

tests/components/download-graph-test.js

@@ -78,11 +78,39 @@ module('Component | DownloadGraph', function (hooks) {
 });
 
 function exampleData() {
-  return [
-    ['Date', 'Other', '1.0.52', '1.0.53', '1.0.54', '1.0.55', '1.0.56'],
-    [new Date('2020-12-30'), 36745, 201, 2228, 4298, 3702, 30520],
-    [new Date('2020-12-29'), 33242, 261, 1650, 4277, 4157, 31631],
-    [new Date('2020-12-28'), 19981, 181, 968, 2786, 2414, 23616],
-    [new Date('2020-12-27'), 19064, 186, 873, 2477, 15713, 3815],
+  let downloads = [
+    { version: { num: '1.0.52' }, date: '2020-12-30', downloads: 201 },
+    { version: { num: '1.0.53' }, date: '2020-12-30', downloads: 2228 },
+    { version: { num: '1.0.54' }, date: '2020-12-30', downloads: 4298 },
+    { version: { num: '1.0.55' }, date: '2020-12-30', downloads: 3702 },
+    { version: { num: '1.0.56' }, date: '2020-12-30', downloads: 30520 },
+    { version: { num: '1.0.52' }, date: '2020-12-29', downloads: 261 },
+    { version: { num: '1.0.53' }, date: '2020-12-29', downloads: 1650 },
+    { version: { num: '1.0.54' }, date: '2020-12-29', downloads: 4277 },
+    { version: { num: '1.0.55' }, date: '2020-12-29', downloads: 4157 },
+    { version: { num: '1.0.56' }, date: '2020-12-29', downloads: 31631 },
+    { version: { num: '1.0.52' }, date: '2020-12-28', downloads: 181 },
+    { version: { num: '1.0.53' }, date: '2020-12-28', downloads: 968 },
+    { version: { num: '1.0.54' }, date: '2020-12-28', downloads: 2786 },
+    { version: { num: '1.0.55' }, date: '2020-12-28', downloads: 2414 },
+    { version: { num: '1.0.56' }, date: '2020-12-28', downloads: 23616 },
+    { version: { num: '1.0.52' }, date: '2020-12-27', downloads: 186 },
+    { version: { num: '1.0.53' }, date: '2020-12-27', downloads: 873 },
+    { version: { num: '1.0.54' }, date: '2020-12-27', downloads: 2477 },
+    { version: { num: '1.0.55' }, date: '2020-12-27', downloads: 15713 },
+    { version: { num: '1.0.56' }, date: '2020-12-27', downloads: 3815 },
   ];
+
+  downloads.content = {
+    meta: {
+      extra_downloads: [
+        { date: '2020-12-30', downloads: 36745 },
+        { date: '2020-12-29', downloads: 33242 },
+        { date: '2020-12-28', downloads: 19981 },
+        { date: '2020-12-27', downloads: 19064 },
+      ],
+    },
+  };
+
+  return downloads;
 }