dashboard next: minor improvements

* rename route to dashboard-next
* better scaling of charts for large data sets
* adjust trend position to avoid overlap
* makes sure silenced/suspended is made on real users
* correctly format data when only one data point
* minor refactoring

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

@@ -20,14 +20,14 @@ export default Ember.Component.extend({
     this._super();
 
     loadScript("/javascripts/Chart.min.js").then(() => {
-      this.fetchReport.apply(this);
+      this.fetchReport();
     });
   },
 
   didUpdateAttrs() {
     this._super();
 
-    this.fetchReport.apply(this);
+    this.fetchReport();
   },
 
   @computed("dataSourceName")
@@ -45,6 +45,8 @@ export default Ember.Component.extend({
   },
 
   fetchReport() {
+    if (this.get("isLoading")) return;
+
     this.set("isLoading", true);
 
     let payload = {data: {}};
@@ -97,6 +99,23 @@ export default Ember.Component.extend({
   },
 
   _buildChartConfig(data) {
+    const values = this.get("chartData").map(d => d.y);
+    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";
+    }
+
     return {
       type: "line",
       data,
@@ -105,8 +124,22 @@ export default Ember.Component.extend({
         responsive: true,
         layout: { padding: { left: 0, top: 0, right: 0, bottom: 0 } },
         scales: {
-          yAxes: [{ display: true, ticks: { suggestedMin: 0 } }],
+          yAxes: [
-          xAxes: [{ display: true }],
+            {
+              display: true,
+              ticks: { suggestedMin: 0, stepSize, suggestedMax: max + stepSize }
+            }
+          ],
+          xAxes: [
+            {
+              display: true,
+              type: "time",
+              time: {
+                parser: "YYYY-MM-DD",
+                unit
+              }
+            }
+          ],
         }
       },
     };

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

@@ -17,7 +17,7 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super();
 
-    this.fetchReport.apply(this);
+    this.fetchReport();
   },
 
   @computed("dataSourceName")
@@ -26,6 +26,8 @@ export default Ember.Component.extend({
   },
 
   fetchReport() {
+    if (this.get("isLoading")) return;
+
     this.set("isLoading", true);
 
     ajax(this.get("dataSource"))

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

@@ -41,6 +41,6 @@ export default Ember.Controller.extend({
   },
 
   _reportsForPeriodURL(period) {
-    return `/admin/dashboard_next?period=${period}`;
+    return `/admin/dashboard-next?period=${period}`;
   }
 });

app/assets/javascripts/admin/routes/admin-route-map.js.es6

@@ -1,7 +1,7 @@
 export default function() {
   this.route('admin', { resetNamespace: true }, function() {
     this.route('dashboard', { path: '/' });
-    this.route('dashboard_next', { path: '/dashboard_next' });
+    this.route('dashboardNext', { path: '/dashboard-next' });
     this.route('adminSiteSettings', { path: '/site_settings', resetNamespace: true }, function() {
       this.route('adminSiteSettingsCategory', { path: 'category/:category_id', resetNamespace: true} );
     });

app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs

@@ -10,7 +10,7 @@
   <div class="chart-container">
     {{#if oneDataPoint}}
       <span class="data-point">
-        {{chartData.lastObject.y}}
+        {{number chartData.lastObject.y}}
       </span>
     {{else}}
       <div class="chart-trend {{trend}}">

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

@@ -91,6 +91,7 @@
 
       .d-icon-question-circle {
         cursor: pointer;
+        margin-left: .25em;
       }
 
       .chart-title {
@@ -139,7 +140,7 @@
     .chart-trend {
       font-size: $font-up-5;
       position: absolute;
-      left: 2em;
+      right: 1.5em;
       top: .5em;
       display: flex;
       justify-content: space-between;

app/models/report.rb

@@ -255,10 +255,10 @@ class Report
     moderators = User.real.where(moderator: true).count
     report.data << { x: label.call("moderator"), y: moderators } if moderators > 0
 
-    suspended = User.suspended.count
+    suspended = User.real.suspended.count
     report.data << { x: label.call("suspended"), y: suspended } if suspended > 0
 
-    silenced = User.silenced.count
+    silenced = User.real.silenced.count
     report.data << { x: label.call("silenced"), y: silenced } if silenced > 0
   end
 end

config/routes.rb

@@ -230,7 +230,7 @@ Discourse::Application.routes.draw do
 
     get "version_check" => "versions#show"
 
-    resources :dashboard_next, only: [:index]
+    get "dashboard-next" => "dashboard_next#index"
 
     resources :dashboard, only: [:index] do
       collection do