From 035d92d2e128f2aaeffe67c3213f19754bfb2d96 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 16 Apr 2018 12:00:49 +0200
Subject: [PATCH] dashboard next: minor tweaks

* help texts
* renaming of components to dashboard-*
* use number formatter
* adjust trend position
---
 ...i-chart.js.es6 => dashboard-mini-chart.js.es6} |  2 +-
 ...i-table.js.es6 => dashboard-mini-table.js.es6} |  2 +-
 .../{mini-chart.hbs => dashboard-mini-chart.hbs}  |  7 ++++---
 .../{mini-table.hbs => dashboard-mini-table.hbs}  |  2 +-
 .../admin/templates/dashboard_next.hbs            | 15 ++++++++++++---
 .../stylesheets/common/admin/dashboard_next.scss  | 10 +++++++---
 config/locales/client.en.yml                      |  6 ++++++
 7 files changed, 32 insertions(+), 12 deletions(-)
 rename app/assets/javascripts/admin/components/{mini-chart.js.es6 => dashboard-mini-chart.js.es6} (98%)
 rename app/assets/javascripts/admin/components/{mini-table.js.es6 => dashboard-mini-table.js.es6} (95%)
 rename app/assets/javascripts/admin/templates/components/{mini-chart.hbs => dashboard-mini-chart.hbs} (81%)
 rename app/assets/javascripts/admin/templates/components/{mini-table.hbs => dashboard-mini-table.hbs} (93%)

diff --git a/app/assets/javascripts/admin/components/mini-chart.js.es6 b/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6
similarity index 98%
rename from app/assets/javascripts/admin/components/mini-chart.js.es6
rename to app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6
index e55e684c734..bd2087be79b 100644
--- a/app/assets/javascripts/admin/components/mini-chart.js.es6
+++ b/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6
@@ -3,7 +3,7 @@ import computed from 'ember-addons/ember-computed-decorators';
 import loadScript from 'discourse/lib/load-script';
 
 export default Ember.Component.extend({
-  classNames: ["mini-chart"],
+  classNames: ["dashboard-mini-chart"],
 
   classNameBindings: ["trend", "oneDataPoint"],
 
diff --git a/app/assets/javascripts/admin/components/mini-table.js.es6 b/app/assets/javascripts/admin/components/dashboard-mini-table.js.es6
similarity index 95%
rename from app/assets/javascripts/admin/components/mini-table.js.es6
rename to app/assets/javascripts/admin/components/dashboard-mini-table.js.es6
index 7a1b0552d91..3ac28b5baed 100644
--- a/app/assets/javascripts/admin/components/mini-table.js.es6
+++ b/app/assets/javascripts/admin/components/dashboard-mini-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: ["mini-table"],
+  classNames: ["dashboard-mini-table"],
 
   total: null,
   labels: null,
diff --git a/app/assets/javascripts/admin/templates/components/mini-chart.hbs b/app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs
similarity index 81%
rename from app/assets/javascripts/admin/templates/components/mini-chart.hbs
rename to app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs
index 5b30980bbdd..f2728c6d6db 100644
--- a/app/assets/javascripts/admin/templates/components/mini-chart.hbs
+++ b/app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs
@@ -2,18 +2,19 @@
   <div class="chart-title">
     <h3>{{title}}</h3>
 
-    {{d-icon "question-circle"}}
+    {{#if help}}
+      {{d-icon "question-circle" title=help}}
+    {{/if}}
   </div>
 
   <div class="chart-container">
-
     {{#if oneDataPoint}}
       <span class="data-point">
         {{chartData.lastObject.y}}
       </span>
     {{else}}
       <div class="chart-trend {{trend}}">
-        <span>{{total}}</span>
+        <span>{{number total}}</span>
 
         {{#if trendIcon}}
           {{d-icon trendIcon}}
diff --git a/app/assets/javascripts/admin/templates/components/mini-table.hbs b/app/assets/javascripts/admin/templates/components/dashboard-mini-table.hbs
similarity index 93%
rename from app/assets/javascripts/admin/templates/components/mini-table.hbs
rename to app/assets/javascripts/admin/templates/components/dashboard-mini-table.hbs
index 4c75f25902e..b7b0bdc61eb 100644
--- a/app/assets/javascripts/admin/templates/components/mini-table.hbs
+++ b/app/assets/javascripts/admin/templates/components/dashboard-mini-table.hbs
@@ -19,7 +19,7 @@
       <tbody>
         <tr>
           {{#each dataset as |data|}}
-            <td>{{data}}</td>
+            <td>{{number data}}</td>
           {{/each}}
         </tr>
       </tbody>
diff --git a/app/assets/javascripts/admin/templates/dashboard_next.hbs b/app/assets/javascripts/admin/templates/dashboard_next.hbs
index 4e1c243e60d..a683ba27db8 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next.hbs
@@ -9,15 +9,24 @@
 
     <div class="section-body">
       <div class="charts">
-        {{mini-chart dataSourceName="signups" startDate=startDate endDate=endDate}}
-        {{mini-chart dataSourceName="topics" startDate=startDate endDate=endDate}}
+        {{dashboard-mini-chart
+          dataSourceName="signups"
+          startDate=startDate
+          endDate=endDate
+          help="admin.dashboard.charts.signups.help"}}
+
+        {{dashboard-mini-chart
+          dataSourceName="topics"
+          startDate=startDate
+          endDate=endDate
+          help="admin.dashboard.charts.topics.help"}}
       </div>
     </div>
   </div>
 
   <div class="section-columns">
     <div class="section-column">
-      {{mini-table dataSourceName="users_by_trust_level"}}
+      {{dashboard-mini-table dataSourceName="users_by_trust_level"}}
     </div>
 
     <div class="section-column">
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index c0331ea784b..138085885f1 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -33,7 +33,7 @@
     }
   }
 
-  .mini-table {
+  .dashboard-mini-table {
     .table-title {
       align-items: center;
       display: flex;
@@ -75,11 +75,15 @@
     justify-content: space-between;
     flex-wrap: wrap;
 
-    .mini-chart {
+    .dashboard-mini-chart {
       flex-grow: 1;
       width: calc(100% * (1/3) - 1px);
       margin-bottom: 1em;
 
+      .d-icon-question-circle {
+        cursor: pointer;
+      }
+
       .chart-title {
         align-items: center;
         display: flex;
@@ -127,7 +131,7 @@
     .chart-trend {
       font-size: $font-up-5;
       position: absolute;
-      left: 1.5em;
+      left: 2em;
       top: .5em;
       display: flex;
       justify-content: space-between;
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 0ce42828d3e..592af7dacbf 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2737,6 +2737,12 @@ en:
         page_views_short: "Pageviews"
         show_traffic_report: "Show Detailed Traffic Report"
 
+        charts:
+          signups:
+            help: Users created for this period
+          topics:
+            help: Topics created for this period
+
         reports:
           today: "Today"
           yesterday: "Yesterday"