dashboard next: caching, mobile support and new charts

app/assets/javascripts/admin/mixins/async-report.js.es6

@@ -0,0 +1,68 @@
+import computed from 'ember-addons/ember-computed-decorators';
+import Report from "admin/models/report";
+
+export default Ember.Mixin.create({
+  classNameBindings: ["isLoading"],
+
+  report: null,
+
+  init() {
+    this._super();
+
+    this.messageBus.subscribe(this.get("dataSource"), report => {
+      const formatDate = (date) => moment(date).format("YYYYMMDD");
+
+      // this check is done to avoid loading a chart after period has changed
+      if (
+          (this.get("startDate") && formatDate(report.start_date) === formatDate(this.get("startDate"))) &&
+          (this.get("endDate") && formatDate(report.end_date) === formatDate(this.get("endDate")))
+         ) {
+        this._setPropertiesFromReport(Report.create(report));
+        this.set("isLoading", false);
+        this.renderReport();
+      } else {
+        this._setPropertiesFromReport(Report.create(report));
+        this.set("isLoading", false);
+        this.renderReport();
+      }
+    });
+  },
+
+  didInsertElement() {
+    this._super();
+
+    Ember.run.later(this, function() {
+      this.fetchReport();
+    }, 500);
+  },
+
+  didUpdateAttrs() {
+    this._super();
+
+    this.fetchReport();
+  },
+
+  renderReport() {},
+
+  @computed("dataSourceName")
+  dataSource(dataSourceName) {
+    return `/admin/reports/${dataSourceName}`;
+  },
+
+  @computed("report")
+  labels(report) {
+    if (!report) return;
+    return Ember.makeArray(report.data).map(r => r.x);
+  },
+
+  @computed("report")
+  values(report) {
+    if (!report) return;
+    return Ember.makeArray(report.data).map(r => r.y);
+  },
+
+  _setPropertiesFromReport(report) {
+    if (!this.element || this.isDestroying || this.isDestroyed) { return; }
+    this.setProperties({ report });
+  }
+});