dashboard next: minor quality improvements

* locale for title
* minimum chart/table while loading
* sort users by type
* more spacing in the UI
* minor refactoring

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

@@ -5,7 +5,7 @@ import loadScript from 'discourse/lib/load-script';
 export default Ember.Component.extend({
   classNames: ["dashboard-mini-chart"],
 
-  classNameBindings: ["trend", "oneDataPoint"],
+  classNameBindings: ["trend", "oneDataPoint", "isLoading"],
 
   isLoading: false,
   total: null,
@@ -13,11 +13,9 @@ export default Ember.Component.extend({
   title: null,
   chartData: null,
   oneDataPoint: false,
-
   backgroundColor: "rgba(200,220,240,0.3)",
   borderColor: "#08C",
 
-
   didInsertElement() {
     this._super();
 
@@ -46,17 +44,9 @@ export default Ember.Component.extend({
     }
   },
 
-  _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";
-  },
-
   fetchReport() {
+    this.set("isLoading", true);
+
     let payload = {data: {}};
 
     if (this.get("startDate")) {
@@ -67,8 +57,6 @@ export default Ember.Component.extend({
       payload.data.end_date = this.get("endDate").toISOString();
     }
 
-    this.set("isLoading", true);
-
     ajax(this.get("dataSource"), payload)
       .then((response) => {
         const report = response.report;
@@ -94,9 +82,9 @@ export default Ember.Component.extend({
   },
 
   drawChart() {
-    const ctx = this.$(".chart-canvas")[0].getContext("2d");
+    const context = this.$(".chart-canvas")[0].getContext("2d");
 
-    let data = {
+    const data = {
       labels: this.get("chartData").map(r => r.x),
       datasets: [{
         data: this.get("chartData").map(r => r.y),
@@ -105,25 +93,32 @@ export default Ember.Component.extend({
       }]
     };
 
-    const config = {
+    this._chart = new window.Chart(context, this._buildChartConfig(data));
+  },
+
+  _buildChartConfig(data) {
+    return {
       type: "line",
-      data: data,
+      data,
       options: {
         legend: { display: false },
         responsive: true,
-        layout: {
-          padding: { left: 0, top: 0, right: 0, bottom: 0 }
-        },
+        layout: { padding: { left: 0, top: 0, right: 0, bottom: 0 } },
         scales: {
-          yAxes: [{
-            display: true,
-            ticks: { suggestedMin: 0 }
-          }],
+          yAxes: [{ display: true, ticks: { suggestedMin: 0 } }],
           xAxes: [{ display: true }],
         }
       },
     };
+  },
 
-    this._chart = new window.Chart(ctx, config);
-  }
+  _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";
+  },
 });

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

@@ -4,6 +4,8 @@ import computed from 'ember-addons/ember-computed-decorators';
 export default Ember.Component.extend({
   classNames: ["dashboard-mini-table"],
 
+  classNameBindings: ["isLoading"],
+
   total: null,
   labels: null,
   title: null,
@@ -26,18 +28,20 @@ export default Ember.Component.extend({
   fetchReport() {
     this.set("isLoading", true);
 
-    ajax(this.get("dataSource")).then((response) => {
-      const report = response.report;
+    ajax(this.get("dataSource"))
+      .then((response) => {
+        const report = response.report;
+        const data = report.data.sort((a, b) => a.x >= b.x);
 
-      this.setProperties({
-        labels: report.data.map(r => r.x),
-        dataset: report.data.map(r => r.y),
-        total: report.total,
-        title: report.title,
-        chartData: report.data
+        this.setProperties({
+          labels: data.map(r => r.x),
+          dataset: data.map(r => r.y),
+          total: report.total,
+          title: report.title,
+          chartData: data
+        });
+      }).finally(() => {
+        this.set("isLoading", false);
       });
-    }).finally(() => {
-      this.set("isLoading", false);
-    });
   }
 });

app/assets/javascripts/admin/controllers/admin-dashboard-next.js.es6

@@ -8,8 +8,6 @@ export default Ember.Controller.extend({
 
   @computed("period")
   startDate(period) {
-    if (period === "all") return null;
-
     switch (period) {
       case "yearly":
         return moment().subtract(1, "year").startOf("day");
@@ -26,14 +24,14 @@ export default Ember.Controller.extend({
       case "daily":
         return moment().startOf("day");
         break;
+      default:
+        return null;
     }
   },
 
   @computed("period")
   endDate(period) {
-    if (period === "all") return null;
-
-    return moment().endOf("day");
+    return period === "all" ? null : moment().endOf("day");
   },
 
   actions: {

app/assets/javascripts/admin/templates/dashboard_next.hbs

@@ -3,7 +3,7 @@
 {{#conditional-loading-spinner condition=loading}}
   <div class="community-health section">
     <div class="section-title">
-      <h2>Community health</h2>
+      <h2>{{i18n "admin.dashboard.community_health"}}</h2>
       {{period-chooser period=period action="changePeriod"}}
     </div>
 
@@ -33,6 +33,4 @@
     <div class="section-column">
     </div>
   </div>
-
-
 {{/conditional-loading-spinner}}

app/assets/stylesheets/common/admin/dashboard_next.scss

@@ -36,14 +36,17 @@
   .dashboard-mini-table {
     margin-bottom: 1em;
 
+    &.is-loading {
+      height: 150px;
+    }
+
     .table-title {
       align-items: center;
       display: flex;
-      margin: .5em;
       justify-content: space-between;
 
       h3 {
-        margin: 0 .5em 0 0;
+        margin: .5em 0;
       }
     }
 
@@ -82,6 +85,10 @@
       width: calc(100% * (1/3) - 1px);
       margin-bottom: 1em;
 
+      &.is-loading {
+        height: 150px;
+      }
+
       .d-icon-question-circle {
         cursor: pointer;
       }
@@ -89,10 +96,9 @@
       .chart-title {
         align-items: center;
         display: flex;
-        margin: .5em;
 
         h3 {
-          margin: 0 .5em 0 0;
+          margin: .5em 0;
         }
       }
 

config/locales/client.en.yml

@@ -2733,6 +2733,7 @@ en:
         page_views: "Pageviews"
         page_views_short: "Pageviews"
         show_traffic_report: "Show Detailed Traffic Report"
+        community_health: Community health
 
         charts:
           signups: