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")
-  trendIcon(trend) {
-    switch (trend) {
-      case "trending-up":
-        return "angle-up";
-      case "trending-down":
-        return "angle-down";
-      case "high-trending-up":
-        return "angle-double-up";
-      case "high-trending-down":
-        return "angle-double-down";
-      default:
-        return null;
-    }
+  @computed("trend", "higher_is_better")
+  trendIcon(trend, higherIsBetter) {
+    return this._iconForTrend(trend, higherIsBetter);
+  },
+
+  @computed("sevenDaysTrend", "higher_is_better")
+  sevenDaysTrendIcon(sevenDaysTrend, higherIsBetter) {
+    return this._iconForTrend(sevenDaysTrend, higherIsBetter);
+  },
+
+  @computed("thirtyDaysTrend", "higher_is_better")
+  thirtyDaysTrendIcon(thirtyDaysTrend, higherIsBetter) {
+    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 {
-              color: $success;
-              display: inline;
-            }
+            i { color: $success; }
           }
           &.high-trending-down, &.trending-down {
-            i.down {
-              color: $danger;
-              display: inline;
-            }
-          }
-          &.no-change {
-            i.down {
-              display: inline;
-              visibility: hidden;
-            }
+            i { color: $danger; }
           }
         }
       }
@@ -371,11 +358,11 @@
 }
 
 .user-metrics {
-  display: flex; 
+  display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-left: -5%;
-  margin: 2em 0 .75em -5%;   // Negative margin allows for a margin when in 2-columns, 
+  margin: 2em 0 .75em -5%;   // Negative margin allows for a margin when in 2-columns,
   .dashboard-inline-table { //  and "hides" margin when the item spans 100% width
     flex: 1 0 auto;
     max-width: 95%;
@@ -394,7 +381,7 @@
       justify-content: center;
       border-radius: 9px 0 0 9px;
       padding: 0 5px 0 8px;
-      
+
       .d-icon {
         margin-right: 5px;
         font-size: $font-down-1;
@@ -412,24 +399,24 @@
     &.user-basic , &.user-member {
       border-color: $bronze;
       .label {
-        border-color: $bronze;        
+        border-color: $bronze;
         background: $bronze;
         color: $secondary;
-      } 
+      }
     }
     &.user-regular {
       border-color: $silver;
       .label {
-        border-color: $silver;        
+        border-color: $silver;
         background: $silver;
         color: $secondary;
-      } 
+      }
     }
-    &.user-leader { 
+    &.user-leader {
       border-color: $gold;
       .label {
         background: $gold;
-        border-color: $gold;      
+        border-color: $gold;
         color: $secondary;
       }
     }