Add title tags to dashboard stats to show percent change from previous period

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

@@ -98,7 +98,41 @@ Discourse.Report = Discourse.Model.extend({
     default:
       return null;
     }
-  }.property('type')
+  }.property('type'),
+
+  percentChangeString: function(val1, val2) {
+    var val = ((val1 - val2) / val2) * 100;
+    if( isNaN(val) || !isFinite(val) ) {
+      return null;
+    } else if( val > 0 ) {
+      return '+' + val.toFixed(0) + '%';
+    } else {
+      return val.toFixed(0) + '%';
+    }
+  },
+
+  changeTitle: function(val1, val2, prevPeriodString) {
+    var title = '';
+    var percentChange = this.percentChangeString(val1, val2);
+    if( percentChange ) {
+      title += percentChange + ' change. ';
+    }
+    title += 'Was ' + val2 + ' ' + prevPeriodString + '.';
+    return title;
+  },
+
+  yesterdayCountTitle: function() {
+    return this.changeTitle( this.valueAt(1), this.valueAt(2),'two days ago');
+  }.property('data'),
+
+  sevenDayCountTitle: function() {
+    return this.changeTitle( this.sumDays(1,7), this.sumDays(8,14), 'two weeks ago');
+  }.property('data'),
+
+  thirtyDayCountTitle: function() {
+    return this.changeTitle( this.sumDays(1,30), this.get('prev30Days'), 'in the previous 30 day period');
+  }.property('data')
+
 });
 
 Discourse.Report.reopenClass({

app/assets/javascripts/admin/templates/reports/summed_counts_report.js.handlebars

@@ -6,8 +6,8 @@
     <a {{bindAttr href="reportUrl"}}>{{title}}</a>
   </td>
   <td class="value">{{todayCount}}</td>
-  <td {{bindAttr class=":value yesterdayTrend"}}>{{yesterdayCount}} <i class="icon up icon-caret-up"></i><i class="icon down icon-caret-down"></i></td>
-  <td {{bindAttr class=":value sevenDayTrend"}}>{{lastSevenDaysCount}} <i class="icon up icon-caret-up"></i><i class="icon down icon-caret-down"></i></td>
-  <td {{bindAttr class=":value thirtyDayTrend"}}>{{lastThirtyDaysCount}} <i class="icon up icon-caret-up"></i><i class="icon down icon-caret-down"></i></td>
+  <td {{bindAttr class=":value yesterdayTrend"}} {{bindAttr title="yesterdayCountTitle"}}>{{yesterdayCount}} <i class="icon up icon-caret-up"></i><i class="icon down icon-caret-down"></i></td>
+  <td {{bindAttr class=":value sevenDayTrend"}} {{bindAttr title="sevenDayCountTitle"}}>{{lastSevenDaysCount}} <i class="icon up icon-caret-up"></i><i class="icon down icon-caret-down"></i></td>
+  <td {{bindAttr class=":value thirtyDayTrend"}} {{bindAttr title="thirtyDayCountTitle"}}>{{lastThirtyDaysCount}} <i class="icon up icon-caret-up"></i><i class="icon down icon-caret-down"></i></td>
   <td class="value">{{total}}</td>
 </tr>

spec/javascripts/models/report_spec.js

@@ -15,13 +15,13 @@ describe("Discourse.Report", function() {
   }
 
   describe("todayCount", function() {
-    it("displays the correct value", function() {
+    it("returns the correct value", function() {
       expect( reportWithData([5,4,3,2,1]).get('todayCount') ).toBe(5);
     });
   });
 
   describe("yesterdayCount", function() {
-    it("displays the correct value", function() {
+    it("returns the correct value", function() {
       expect( reportWithData([5,4,3,2,1]).get('yesterdayCount') ).toBe(4);
     });
   });
@@ -33,9 +33,66 @@ describe("Discourse.Report", function() {
   });
 
   describe("lastSevenDaysCount", function() {
-    it("displays the correct value", function() {
+    it("returns the correct value", function() {
       expect( reportWithData([100,9,8,7,6,5,4,3,200,300,400]).get('lastSevenDaysCount') ).toBe(42);
     });
   });
 
+  describe("percentChangeString", function() {
+    it("returns correct value when value increased", function() {
+      expect( reportWithData([]).percentChangeString(8,5) ).toBe("+60%");
+    });
+
+    it("returns correct value when value decreased", function() {
+      expect( reportWithData([]).percentChangeString(2,8) ).toBe("-75%");
+    });
+
+    it("returns 0 when value is unchanged", function() {
+      expect( reportWithData([]).percentChangeString(8,8) ).toBe("0%");
+    });
+
+    it("returns Infinity when previous value was 0", function() {
+      expect( reportWithData([]).percentChangeString(8,0) ).toBe(null);
+    });
+
+    it("returns -100 when yesterday's value was 0", function() {
+      expect( reportWithData([]).percentChangeString(0,8) ).toBe('-100%');
+    });
+
+    it("returns NaN when both yesterday and the previous day were both 0", function() {
+      expect( reportWithData([]).percentChangeString(0,0) ).toBe(null);
+    });
+  });
+
+  describe("yesterdayCountTitle", function() {
+    it("displays percent change and previous value", function(){
+      var title = reportWithData([6,8,5,2,1]).get('yesterdayCountTitle')
+      expect( title.indexOf('+60%') ).not.toBe(-1);
+      expect( title ).toMatch("Was 5");
+    });
+
+    it("handles when two days ago was 0", function() {
+      var title = reportWithData([6,8,0,2,1]).get('yesterdayCountTitle')
+      expect( title ).toMatch("Was 0");
+      expect( title ).not.toMatch("%");
+    });
+  });
+
+  describe("sevenDayCountTitle", function() {
+    it("displays percent change and previous value", function(){
+      var title = reportWithData([100,1,1,1,1,1,1,1,2,2,2,2,2,2,2,100,100]).get('sevenDayCountTitle');
+      expect( title ).toMatch("-50%");
+      expect( title ).toMatch("Was 14");
+    });
+  });
+
+  describe("thirtyDayCountTitle", function() {
+    it("displays percent change and previous value", function(){
+      var report = reportWithData([5,5,5,5]);
+      report.set('prev30Days', 10);
+      var title = report.get('thirtyDayCountTitle');
+      expect( title.indexOf('+50%') ).not.toBe(-1);
+      expect( title ).toMatch("Was 10");
+    });
+  });
 });