From 43b17689874c42a8d30637caeb87fcaf75ed1dd5 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 30 May 2018 16:32:43 +0200
Subject: [PATCH] UX: ceil dahsboard values

---
 .../admin/components/dashboard-mini-chart.js.es6          | 4 ++--
 .../admin/templates/components/admin-report-counts.hbs    | 8 ++++----
 .../admin/templates/components/dashboard-mini-chart.hbs   | 4 ++--
 .../javascripts/discourse/helpers/application.js.es6      | 4 ++++
 app/assets/javascripts/discourse/lib/formatter.js.es6     | 6 +++++-
 test/javascripts/lib/formatter-test.js.es6                | 2 ++
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6 b/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6
index 2dae747fad3..5992e47953d 100644
--- a/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6
+++ b/app/assets/javascripts/admin/components/dashboard-mini-chart.js.es6
@@ -100,7 +100,7 @@ export default Ember.Component.extend(AsyncReport, {
         labels,
         datasets: reportsForPeriod.map(report => {
           return {
-            data: Ember.makeArray(report.data).map(d => d.y),
+            data: Ember.makeArray(report.data).map(d => number(d.y, { ceil: true })),
             backgroundColor: "rgba(200,220,240,0.3)",
             borderColor: report.color
           };
@@ -147,7 +147,7 @@ export default Ember.Component.extend(AsyncReport, {
         scales: {
           yAxes: [{
             display: true,
-            ticks: { callback: (label) => number(label) }
+            ticks: { callback: (label) => number(label, { ceil: true }) }
           }],
           xAxes: [{
             display: true,
diff --git a/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs b/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs
index 4b4a406c597..d7f37040f67 100644
--- a/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-report-counts.hbs
@@ -5,18 +5,18 @@
   <a href="{{report.reportUrl}}">{{report.title}}</a>
 </td>
 
-<td class="value">{{number report.todayCount}}</td>
+<td class="value">{{number report.todayCount ceil=true}}</td>
 
 <td class="value {{report.yesterdayTrend}}" title={{report.yesterdayCountTitle}}>
-  {{number report.yesterdayCount}} {{d-icon report.yesterdayTrendIcon}}
+  {{number report.yesterdayCount ceil=true}} {{d-icon report.yesterdayTrendIcon}}
 </td>
 
 <td class="value {{report.sevenDaysTrend}}" title={{report.sevenDaysCountTitle}}>
-  {{number report.lastSevenDaysCount}} {{d-icon report.sevenDaysTrendIcon}}
+  {{number report.lastSevenDaysCount ceil=true}} {{d-icon report.sevenDaysTrendIcon}}
 </td>
 
 <td class="value {{report.thirtyDaysTrend}}" title={{report.thirtyDaysCountTitle}}>
-  {{number report.lastThirtyDaysCount}} {{d-icon report.thirtyDaysTrendIcon}}
+  {{number report.lastThirtyDaysCount ceil=true}} {{d-icon report.thirtyDaysTrendIcon}}
 </td>
 
 {{#if allTime}}
diff --git a/app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs b/app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs
index 328e0829ff5..62e956cd8ca 100644
--- a/app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs
+++ b/app/assets/javascripts/admin/templates/components/dashboard-mini-chart.hbs
@@ -14,9 +14,9 @@
       <div class="trend {{report.trend}}">
         <span class="trend-value" title="{{report.trendTitle}}">
           {{#if report.average}}
-            {{number report.currentAverage}}{{#if report.percent}}%{{/if}}
+            {{number report.currentAverage ceil=true}}{{#if report.percent}}%{{/if}}
           {{else}}
-            {{number report.currentTotal noTitle="true"}}{{#if report.percent}}%{{/if}}
+            {{number report.currentTotal ceil=true noTitle="true"}}{{#if report.percent}}%{{/if}}
           {{/if}}
         </span>
 
diff --git a/app/assets/javascripts/discourse/helpers/application.js.es6 b/app/assets/javascripts/discourse/helpers/application.js.es6
index 5686e07d6b4..d43c1a77915 100644
--- a/app/assets/javascripts/discourse/helpers/application.js.es6
+++ b/app/assets/javascripts/discourse/helpers/application.js.es6
@@ -8,6 +8,10 @@ registerUnbound('raw-date', dt => longDate(new Date(dt)));
 registerUnbound('age-with-tooltip', dt => new safe(autoUpdatingRelativeAge(new Date(dt), {title: true})));
 
 registerUnbound('number', (orig, params) => {
+  if (params.ceil) {
+    orig = Math.ceil(orig);
+  }
+
   orig = parseInt(orig, 10);
   if (isNaN(orig)) { orig = 0; }
 
diff --git a/app/assets/javascripts/discourse/lib/formatter.js.es6 b/app/assets/javascripts/discourse/lib/formatter.js.es6
index 76e2ab44eb3..3eed7e3d97f 100644
--- a/app/assets/javascripts/discourse/lib/formatter.js.es6
+++ b/app/assets/javascripts/discourse/lib/formatter.js.es6
@@ -301,9 +301,13 @@ export function relativeAge(date, options) {
   return "UNKNOWN FORMAT";
 }
 
-export function number(val) {
+export function number(val, options = {}) {
   let formattedNumber;
 
+  if (options.ceil) {
+    val = Math.ceil(val);
+  }
+
   val = parseInt(val, 10);
   if (isNaN(val)) val = 0;
 
diff --git a/test/javascripts/lib/formatter-test.js.es6 b/test/javascripts/lib/formatter-test.js.es6
index ddb97c83ff9..e7299cb464a 100644
--- a/test/javascripts/lib/formatter-test.js.es6
+++ b/test/javascripts/lib/formatter-test.js.es6
@@ -213,6 +213,8 @@ QUnit.test("number", assert => {
   assert.equal(number(2499999), "2.5M", "it abbreviates millions");
   assert.equal(number(1000000), "1.0M", "it abbreviates a million");
   assert.equal(number(999999), "999k", "it abbreviates hundreds of thousands");
+  assert.equal(number(18.2), "18", "it returns a float number converted to an integer as a string");
+  assert.equal(number(18.6, { ceil: true }), "19", "it ceils the value if requested");
 });
 
 QUnit.test("durationTiny", assert => {