dashboard next: minor tweaks

* help texts
* renaming of components to dashboard-*
* use number formatter
* adjust trend position

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"],
 

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,

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}}

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>

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">

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;

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"