For Evil Trout blog part 2: switch between bar chart and table

app/assets/javascripts/admin/controllers/admin_reports_controller.js

@@ -0,0 +1,24 @@
+Discourse.AdminReportsController = Ember.ObjectController.extend({
+  viewMode: 'table',
+
+  // true if we're viewing the table mode
+  viewingTable: function() {
+    return this.get('viewMode') === 'table';
+  }.property('viewMode'),
+
+  // true if we're viewing the bar chart mode
+  viewingBarChart: function() {
+    return this.get('viewMode') === 'barChart';
+  }.property('viewMode'),
+
+  // Changes the current view mode to 'table'
+  viewAsTable: function() {
+    this.set('viewMode', 'table');
+  },
+
+  // Changes the current view mode to 'barChart'
+  viewAsBarChart: function() {
+    this.set('viewMode', 'barChart');
+  }
+
+});

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

@@ -6,6 +6,18 @@ Discourse.Report.reopenClass({
     $.ajax("/admin/reports/" + type, {
       type: 'GET',
       success: function(json) {
+
+        // Add a percent field to each tuple
+        var maxY = 0;
+        json.report.data.forEach(function (row) {
+          if (row.y > maxY) maxY = row.y;
+        });
+        if (maxY > 0) {
+          json.report.data.forEach(function (row) {
+            row.percentage = Math.round((row.y / maxY) * 100);
+          });
+        }
+
         model.mergeAttributes(json.report);
         model.set('loaded', true);
       }

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

@@ -1,7 +1,15 @@
 {{#if loaded}}
   <h3>{{title}}</h3>
 
-  <table class='table'>
+  <button class='btn'
+          {{action viewAsTable}}
+          {{bindAttr disabled="viewingTable"}}>View as Table</button>
+
+  <button class='btn'
+          {{action viewAsBarChart}}
+          {{bindAttr disabled="viewingBarChart"}}>View as Bar Chart</button>
+
+  <table class='table report'>
     <tr>
       <th>{{xaxis}}</th>
       <th>{{yaxis}}</th>
@@ -10,7 +18,16 @@
     {{#each data}}
       <tr>
         <td>{{x}}</td>
-        <td>{{y}}</td>
+        <td>
+          {{#if controller.viewingTable}}
+            {{y}}
+          {{/if}}
+          {{#if controller.viewingBarChart}}
+            <div class='bar-container'>
+              <div class='bar' style="width: {{unbound percentage}}%">{{y}}</div>
+            </div>
+          {{/if}}
+        </td>
       </tr>
     {{/each}}
   </table>

app/assets/stylesheets/admin/admin_base.scss

@@ -8,6 +8,31 @@
   .admin-contents {
     padding: 8px;
   }
+
+  table.report {
+    tr {
+      th:nth-of-type(1) {
+        width: 20%;
+      }
+    }
+
+    .bar-container {
+      float: left;
+      width: 300px;
+      margin-right: 15px;
+      margin-bottom: 5px;
+      display: inline-block;
+
+      .bar {
+        margin-top: 5px;
+        background-color: $blue;
+        display: inline-block;
+        text-align: right;
+        padding-right: 8px;
+        color: $white;
+      }
+    }
+  }
 }
 
 .admin-loading {