Improve how category stats are rendered

app/assets/javascripts/discourse/models/category.js

@@ -144,23 +144,22 @@ Discourse.Category = Discourse.Model.extend({
     return I18n.t('categories.total_posts', {count: this.get('post_count')});
   }.property('post_count'),
 
-  topicCountStatsStrings: function() {
+  topicCountStats: function() {
-    return this.countStatsStrings('topics');
+    return this.countStats('topics');
   }.property('posts_year', 'posts_month', 'posts_week', 'posts_day'),
 
-  postCountStatsStrings: function() {
+  postCountStats: function() {
-    return this.countStatsStrings('posts');
+    return this.countStats('posts');
   }.property('posts_year', 'posts_month', 'posts_week', 'posts_day'),
 
-  countStatsStrings: function(prefix) {
+  countStats: function(prefix) {
-    var sep = ' / ';
+    var stats = [], val;
-    if (this.get(prefix + '_day') > 1) {
+    _.each(['day', 'week', 'month', 'year'], function(unit) {
-      return [this.get(prefix + '_day') + sep + I18n.t('day'), this.get(prefix + '_week') + sep + I18n.t('week')];
+      val = this.get(prefix + '_' + unit);
-    } else if (this.get(prefix + '_week') > 1) {
+      if (val > 0) stats.pushObject({value: val, unit: I18n.t(unit)});
-      return [this.get(prefix + '_week') + sep + I18n.t('week'), this.get(prefix + '_month') + sep + I18n.t('month')];
+      if (stats.length === 2) return false;
-    } else {
+    }, this);
-      return [this.get(prefix + '_month') + sep + I18n.t('month'), this.get(prefix + '_year') + sep + I18n.t('year')];
+    return stats;
-    }
   }
 
 });

app/assets/javascripts/discourse/templates/list/wide_categories.js.handlebars

@@ -80,14 +80,24 @@
           {{/each}}
         </td>
         <td class='stats' {{bindAttr title="totalTopicsTitle"}}>
-          {{#each stat in topicCountStatsStrings}}
+          <table class="categoryStats">
-            {{stat}}<br/>
+            {{#each topicCountStats}}
+              <tr>
+                <td class="value">{{value}}</td>
+                <td class="unit">{{unit}}</td>
+              </tr>
             {{/each}}
+          </table>
         </td>
         <td class='stats' {{bindAttr title="totalPostsTitle"}}>
-          {{#each stat in postCountStatsStrings}}
+          <table class="categoryStats">
-            {{stat}}<br/>
+            {{#each postCountStats}}
+              <tr>
+                <td class="value">{{value}}</td>
+                <td class="unit">{{unit}}</td>
+              </tr>
             {{/each}}
+          </table>
         </td>
       </tr>
       {{/each}}

app/assets/stylesheets/desktop/topic-list.scss

@@ -65,7 +65,7 @@
   border-spacing: 0;
   a.title:visited:not(.badge-notification) {color: #888;}
 
-  tbody tr {
+  > tbody > tr {
     &:nth-child(even) {
       background-color: #f8f8f8;
     }
@@ -253,6 +253,20 @@
   th.stats {
     width: 90px;
   }
+  td.stats {
+    .unit {
+      font-size: 11px;
+    }
+  }
+  table.categoryStats {
+    td {
+      padding: 2px;
+      vertical-align: bottom;
+      line-height: 17px;
+      &.value { text-align: right; }
+      &.unit  { text-align: left; }
+    }
+  }
   .last-user-info {
     font-size: 12px;
   }

test/javascripts/models/category_test.js

@@ -39,29 +39,39 @@ test('findBySlug', function() {
   blank(Discourse.Category.findBySlug('luke', 'leia'), 'luke is blank with an incorrect parent');
 });
 
-test('postCountStatsStrings', function() {
+test('postCountStats', function() {
   var category1 = Discourse.Category.create({id: 1, slug: 'unloved', posts_year: 2, posts_month: 0, posts_week: 0, posts_day: 0}),
       category2 = Discourse.Category.create({id: 2, slug: 'hasbeen', posts_year: 50, posts_month: 4, posts_week: 0, posts_day: 0}),
       category3 = Discourse.Category.create({id: 3, slug: 'solastweek', posts_year: 250, posts_month: 200, posts_week: 50, posts_day: 0}),
-      category4 = Discourse.Category.create({id: 4, slug: 'hotstuff', posts_year: 500, posts_month: 280, posts_week: 100, posts_day: 22});
+      category4 = Discourse.Category.create({id: 4, slug: 'hotstuff', posts_year: 500, posts_month: 280, posts_week: 100, posts_day: 22}),
+      category5 = Discourse.Category.create({id: 6, slug: 'empty', posts_year: 0, posts_month: 0, posts_week: 0, posts_day: 0});
 
-  var result = category1.get('postCountStatsStrings');
+  var result = category1.get('postCountStats');
+  equal(result.length, 1, "should only show year");
+  equal(result[0].value, 2);
+  equal(result[0].unit, 'year');
+
+  result = category2.get('postCountStats');
   equal(result.length, 2, "should show month and year");
-  equal(result[0], '0 / month', "should show month and year");
+  equal(result[0].value, 4);
-  equal(result[1], '2 / year', "should show month and year");
+  equal(result[0].unit, 'month');
+  equal(result[1].value, 50);
+  equal(result[1].unit, 'year');
 
-  result = category2.get('postCountStatsStrings');
+  result = category3.get('postCountStats');
-  equal(result.length, 2, "should show month and year");
-  equal(result[0], '4 / month', "should show month and year");
-  equal(result[1], '50 / year', "should show month and year");
-
-  result = category3.get('postCountStatsStrings');
   equal(result.length, 2, "should show week and month");
-  equal(result[0], '50 / week', "should show week and month");
+  equal(result[0].value, 50);
-  equal(result[1], '200 / month', "should show week and month");
+  equal(result[0].unit, 'week');
+  equal(result[1].value, 200);
+  equal(result[1].unit, 'month');
 
-  result = category4.get('postCountStatsStrings');
+  result = category4.get('postCountStats');
   equal(result.length, 2, "should show day and week");
-  equal(result[0], '22 / day', "should show day and week");
+  equal(result[0].value, 22);
-  equal(result[1], '100 / week', "should show day and week");
+  equal(result[0].unit, 'day');
+  equal(result[1].value, 100);
+  equal(result[1].unit, 'week');
+
+  result = category5.get('postCountStats');
+  equal(result.length, 0, "should show nothing");
 });