dashboard next: trending search report

This commit also improves how data is loaded sync and async

app/assets/javascripts/admin/components/dashboard-inline-table.js.es6

@@ -2,7 +2,7 @@ import { ajax } from 'discourse/lib/ajax';
 import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
-  classNames: ["dashboard-mini-table"],
+  classNames: ["dashboard-table", "dashboard-inline-table"],
 
   classNameBindings: ["isLoading"],
 

app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6

@@ -11,22 +11,18 @@ export default Ember.Component.extend({
   total: null,
   trend: null,
   title: null,
-  chartData: null,
   oneDataPoint: false,
   backgroundColor: "rgba(200,220,240,0.3)",
   borderColor: "#08C",
 
+  didInsertElement() {
+    this._super();
+    this._initializeChart();
+  },
+
   didUpdateAttrs() {
     this._super();
-
-    loadScript("/javascripts/Chart.min.js").then(() => {
-      if (this.get("model") && !this.get("chartData")) {
-        this._setPropertiesFromModel(this.get("model"));
-        this._drawChart();
-      } else if (this.get("dataSource")) {
-        this._fetchReport();
-      }
-    });
+    this._initializeChart();
   },
 
   @computed("dataSourceName")
@@ -75,13 +71,27 @@ export default Ember.Component.extend({
       });
   },
 
+  _initializeChart() {
+    loadScript("/javascripts/Chart.min.js").then(() => {
+      if (this.get("model") && !this.get("values")) {
+        this._setPropertiesFromModel(this.get("model"));
+        this._drawChart();
+      } else if (this.get("dataSource")) {
+        this._fetchReport();
+      }
+    });
+  },
+
   _drawChart() {
-    const context = this.$(".chart-canvas")[0].getContext("2d");
+    const $chartCanvas = this.$(".chart-canvas");
+    if (!$chartCanvas.length) return;
+
+    const context = $chartCanvas[0].getContext("2d");
 
     const data = {
-      labels: this.get("chartData").map(r => r.x),
+      labels: this.get("labels"),
       datasets: [{
-        data: this.get("chartData").map(r => r.y),
+        data: this.get("values"),
         backgroundColor: this.get("backgroundColor"),
         borderColor: this.get("borderColor")
       }]
@@ -92,17 +102,18 @@ export default Ember.Component.extend({
 
   _setPropertiesFromModel(model) {
     this.setProperties({
+      labels: model.data.map(r => r.x),
+      values: model.data.map(r => r.y),
       oneDataPoint: (this.get("startDate") && this.get("endDate")) &&
                     this.get("startDate").isSame(this.get("endDate"), 'day'),
       total: model.total,
       title: model.title,
-      trend: this._computeTrend(model.total, model.prev30Days),
-      chartData: model.data
+      trend: this._computeTrend(model.total, model.prev30Days)
     });
   },
 
   _buildChartConfig(data) {
-    const values = this.get("chartData").map(d => d.y);
+    const values = this.get("values");
     const max = Math.max(...values);
     const min = Math.min(...values);
     const stepSize = Math.max(...[Math.ceil((max - min)/5), 20]);

app/assets/javascripts/admin/components/dashboard-table-trending-search.js.es6

@@ -0,0 +1,17 @@
+import DashboardTable from "admin/components/dashboard-table";
+import { number } from 'discourse/lib/formatter';
+
+export default DashboardTable.extend({
+  layoutName: "admin/templates/components/dashboard-table",
+
+  classNames: ["dashboard-table", "dashboard-table-trending-search"],
+
+  transformModel(model) {
+    return {
+      labels: model.labels,
+      values: model.data.map(data => {
+        return [data[0], number(data[1]), number(data[2])];
+      })
+    };
+  },
+});

app/assets/javascripts/admin/components/dashboard-table.js.es6

@@ -0,0 +1,83 @@
+import { ajax } from 'discourse/lib/ajax';
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  classNames: ["dashboard-table"],
+
+  classNameBindings: ["isLoading"],
+
+  total: null,
+  labels: null,
+  title: null,
+  chartData: null,
+  isLoading: false,
+  help: null,
+  helpPage: null,
+  model: null,
+
+  transformModel(model) {
+    const data = model.data.sort((a, b) => a.x >= b.x);
+
+    return {
+      labels: model.labels,
+      values: data
+    };
+  },
+
+  didInsertElement() {
+    this._super();
+    this._initializeTable();
+  },
+
+  didUpdateAttrs() {
+    this._super();
+    this._initializeTable();
+  },
+
+  @computed("dataSourceName")
+  dataSource(dataSourceName) {
+    return `/admin/reports/${dataSourceName}`;
+  },
+
+  _initializeTable() {
+    if (this.get("model") && !this.get("values")) {
+      this._setPropertiesFromModel(this.get("model"));
+    } else if (this.get("dataSource")) {
+      this._fetchReport();
+    }
+  },
+
+  _fetchReport() {
+    if (this.get("isLoading")) return;
+
+    this.set("isLoading", true);
+
+    let payload = {data: {}};
+
+    if (this.get("startDate")) {
+      payload.data.start_date = this.get("startDate").toISOString();
+    }
+
+    if (this.get("endDate")) {
+      payload.data.end_date = this.get("endDate").toISOString();
+    }
+
+    ajax(this.get("dataSource"), payload)
+      .then((response) => {
+        this._setPropertiesFromModel(response.report);
+      }).finally(() => {
+        this.set("isLoading", false);
+      });
+  },
+
+  _setPropertiesFromModel(model) {
+    const { labels, values } = this.transformModel(model);
+
+    this.setProperties({
+      labels,
+      values,
+      total: model.total,
+      title: model.title
+    });
+  }
+});