dashboard next: activity metrics and new contributors

This commit also introduces a better grouping of data points.

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

@@ -1,6 +1,7 @@
-import { ajax } from 'discourse/lib/ajax';
-import computed from 'ember-addons/ember-computed-decorators';
-import loadScript from 'discourse/lib/load-script';
+import { ajax } from "discourse/lib/ajax";
+import computed from "ember-addons/ember-computed-decorators";
+import loadScript from "discourse/lib/load-script";
+import Report from "admin/models/report";
 
 export default Ember.Component.extend({
   classNames: ["dashboard-mini-chart"],
@@ -17,12 +18,26 @@ export default Ember.Component.extend({
 
   didInsertElement() {
     this._super();
-    this._initializeChart();
+
+    if (this.get("model")) {
+      loadScript("/javascripts/Chart.min.js").then(() => {
+        this._setPropertiesFromModel(this.get("model"));
+        this._drawChart();
+      });
+    }
   },
 
   didUpdateAttrs() {
     this._super();
-    this._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();
+      }
+    });
   },
 
   @computed("dataSourceName")
@@ -34,10 +49,17 @@ export default Ember.Component.extend({
 
   @computed("trend")
   trendIcon(trend) {
-    if (trend === "stable") {
-      return null;
-    } else {
-      return `angle-${trend}`;
+    switch (trend) {
+      case "trending-up":
+        return "angle-up";
+      case "trending-down":
+        return "angle-down";
+      case "high-trending-up":
+        return "angle-double-up";
+      case "high-trending-down":
+        return "angle-double-down";
+      default:
+        return null;
     }
   },
 
@@ -46,7 +68,9 @@ export default Ember.Component.extend({
 
     this.set("isLoading", true);
 
-    let payload = {data: {}};
+    let payload = {
+      data: {}
+    };
 
     if (this.get("startDate")) {
       payload.data.start_date = this.get("startDate").toISOString();
@@ -58,7 +82,7 @@ export default Ember.Component.extend({
 
     ajax(this.get("dataSource"), payload)
       .then((response) => {
-        this._setPropertiesFromModel(response.report);
+        this._setPropertiesFromModel(Report.create(response.report));
       })
       .finally(() => {
         this.set("isLoading", false);
@@ -71,17 +95,6 @@ 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 $chartCanvas = this.$(".chart-canvas");
     if (!$chartCanvas.length) return;
@@ -91,7 +104,7 @@ export default Ember.Component.extend({
     const data = {
       labels: this.get("labels"),
       datasets: [{
-        data: this.get("values"),
+        data: Ember.makeArray(this.get("values")),
         backgroundColor: this.get("backgroundColor"),
         borderColor: this.get("borderColor")
       }]
@@ -100,72 +113,64 @@ export default Ember.Component.extend({
     this._chart = new window.Chart(context, this._buildChartConfig(data));
   },
 
-  _setPropertiesFromModel(model) {
+  _setPropertiesFromModel(report) {
+    const oneDataPoint = (this.get("startDate") && this.get("endDate")) &&
+      this.get("startDate").isSame(this.get("endDate"), "day");
+
     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)
+      oneDataPoint,
+      labels: report.get("data").map(r => r.x),
+      values: report.get("data").map(r => r.y),
+      total: report.get("total"),
+      description: report.get("description"),
+      title: report.get("title"),
+      trend: report.get("sevenDayTrend"),
+      prev30Days: report.get("prev30Days"),
     });
   },
 
   _buildChartConfig(data) {
-    const values = this.get("values");
+    const values = data.datasets[0].data;
     const max = Math.max(...values);
     const min = Math.min(...values);
-    const stepSize = Math.max(...[Math.ceil((max - min)/5), 20]);
 
-    const startDate = this.get("startDate") || moment();
-    const endDate = this.get("endDate") || moment();
-    const datesDifference = startDate.diff(endDate, "days");
-    let unit = "day";
-    if (datesDifference >= 366) {
-      unit = "quarter";
-    } else if (datesDifference >= 61) {
-      unit = "month";
-    } else if (datesDifference >= 14) {
-      unit = "week";
-    }
+    const stepSize = Math.max(...[Math.ceil((max - min) / 5) * 5, 20]);
 
     return {
       type: "line",
       data,
       options: {
-        legend: { display: false },
+        legend: {
+          display: false
+        },
         responsive: true,
-        layout: { padding: { left: 0, top: 0, right: 0, bottom: 0 } },
+        maintainAspectRatio: false,
+        layout: {
+          padding: {
+            left: 0,
+            top: 0,
+            right: 0,
+            bottom: 0
+          }
+        },
         scales: {
-          yAxes: [
-            {
-              display: true,
-              ticks: { suggestedMin: 0, stepSize, suggestedMax: max + stepSize }
+          yAxes: [{
+            display: true,
+            ticks: {
+              suggestedMin: 0,
+              stepSize,
+              suggestedMax: max + stepSize
             }
-          ],
-          xAxes: [
-            {
-              display: true,
-              type: "time",
-              time: {
-                parser: "YYYY-MM-DD",
-                unit
-              }
+          }],
+          xAxes: [{
+            display: true,
+            type: "time",
+            time: {
+              parser: "YYYY-MM-DD"
             }
-          ],
+          }],
         }
       },
     };
-  },
-
-  _computeTrend(total, prevTotal) {
-    const percentChange = ((total - prevTotal) / prevTotal) * 100;
-
-    if (percentChange > 50) return "double-up";
-    if (percentChange > 0) return "up";
-    if (percentChange === 0) return "stable";
-    if (percentChange < 50) return "double-down";
-    if (percentChange < 0) return "down";
-  },
+  }
 });