UX: makes table report trend icons as charts

This commit will also reverse icon orientation if higher_is_better = false

app/assets/javascripts/admin/models/report.js.es6

@@ -80,20 +80,25 @@ const Report = Discourse.Model.extend({
     return Ember.makeArray(data).length === 0 ? 0 : parseFloat((total / parseFloat(data.length)).toFixed(1));
   },
 
-  @computed("trend")
+  @computed("trend", "higher_is_better")
-  trendIcon(trend) {
+  trendIcon(trend, higherIsBetter) {
-    switch (trend) {
+    return this._iconForTrend(trend, higherIsBetter);
-      case "trending-up":
+  },
-        return "angle-up";
+
-      case "trending-down":
+  @computed("sevenDaysTrend", "higher_is_better")
-        return "angle-down";
+  sevenDaysTrendIcon(sevenDaysTrend, higherIsBetter) {
-      case "high-trending-up":
+    return this._iconForTrend(sevenDaysTrend, higherIsBetter);
-        return "angle-double-up";
+  },
-      case "high-trending-down":
+
-        return "angle-double-down";
+  @computed("thirtyDaysTrend", "higher_is_better")
-      default:
+  thirtyDaysTrendIcon(thirtyDaysTrend, higherIsBetter) {
-        return null;
+    return this._iconForTrend(thirtyDaysTrend, higherIsBetter);
-    }
+  },
+
+  @computed("yesterdayTrend", "higher_is_better")
+  yesterdayTrendIcon(yesterdayTrend, higherIsBetter) {
+    console.log("yesterdayTrendIcon", yesterdayTrend, higherIsBetter, this._iconForTrend(yesterdayTrend, higherIsBetter))
+    return this._iconForTrend(yesterdayTrend, higherIsBetter);
   },
 
   @computed("prev_period", "currentTotal", "currentAverage")
@@ -216,6 +221,21 @@ const Report = Discourse.Model.extend({
     } else if (change < 0) {
       return higherIsBetter ? "trending-down" : "trending-up";
     }
+  },
+
+  _iconForTrend(trend, higherIsBetter) {
+    switch (trend) {
+      case "trending-up":
+        return higherIsBetter ? "angle-up" : "angle-down";
+      case "trending-down":
+        return higherIsBetter ? "angle-down" : "angle-up";
+      case "high-trending-up":
+        return higherIsBetter ? "angle-double-up" : "angle-double-down";
+      case "high-trending-down":
+        return higherIsBetter ? "angle-double-down" : "angle-double-up";
+      default:
+        return null;
+    }
   }
 });
 

app/assets/javascripts/admin/templates/components/admin-report-counts.hbs

@@ -8,15 +8,15 @@
 <td class="value">{{number report.todayCount}}</td>
 
 <td class="value {{report.yesterdayTrend}}" title={{report.yesterdayCountTitle}}>
-  {{number report.yesterdayCount}} {{d-icon "caret-up" class="up"}} {{d-icon "caret-down" class="down"}}
+  {{number report.yesterdayCount}} {{d-icon report.yesterdayTrendIcon}}
 </td>
 
 <td class="value {{report.sevenDaysTrend}}" title={{report.sevenDaysCountTitle}}>
-  {{number report.lastSevenDaysCount}} {{d-icon "caret-up" class="up"}} {{d-icon "caret-down" class="down"}}
+  {{number report.lastSevenDaysCount}} {{d-icon report.sevenDaysTrendIcon}}
 </td>
 
 <td class="value {{report.thirtyDaysTrend}}" title={{report.thirtyDaysCountTitle}}>
-  {{number report.lastThirtyDaysCount}} {{d-icon "caret-up" class="up"}} {{d-icon "caret-down" class="down"}}
+  {{number report.lastThirtyDaysCount}} {{d-icon report.thirtyDaysTrendIcon}}
 </td>
 
 {{#if allTime}}

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

@@ -339,7 +339,6 @@
             padding: 8px 12px 8px;
           }
           i {
-            display: none;
             margin-right: -12px; // align on caret
             @media screen and (max-width: 650px) {
               margin-right: -9px;
@@ -347,22 +346,10 @@
           }
 
           &.high-trending-up, &.trending-up {
-            i.up {
+            i { color: $success; }
-              color: $success;
-              display: inline;
-            }
           }
           &.high-trending-down, &.trending-down {
-            i.down {
+            i { color: $danger; }
-              color: $danger;
-              display: inline;
-            }
-          }
-          &.no-change {
-            i.down {
-              display: inline;
-              visibility: hidden;
-            }
           }
         }
       }