From 0b4339c103bc9b388c637cff5928c79be2e8ab5d Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Sun, 17 Mar 2013 15:02:36 -0400
Subject: [PATCH] For Evil Trout blog part 2: switch between bar chart and
 table

---
 .../controllers/admin_reports_controller.js   | 24 ++++++++++++++++++
 app/assets/javascripts/admin/models/report.js | 12 +++++++++
 .../admin/templates/reports.js.handlebars     | 21 ++++++++++++++--
 app/assets/stylesheets/admin/admin_base.scss  | 25 +++++++++++++++++++
 4 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/admin/controllers/admin_reports_controller.js

diff --git a/app/assets/javascripts/admin/controllers/admin_reports_controller.js b/app/assets/javascripts/admin/controllers/admin_reports_controller.js
new file mode 100644
index 00000000000..e55489d07e7
--- /dev/null
+++ b/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');
+  }
+
+});
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/models/report.js b/app/assets/javascripts/admin/models/report.js
index 6bff1e35fc4..1088edbbf21 100644
--- a/app/assets/javascripts/admin/models/report.js
+++ b/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);
       }
diff --git a/app/assets/javascripts/admin/templates/reports.js.handlebars b/app/assets/javascripts/admin/templates/reports.js.handlebars
index edf07fcf71a..7a5a3aadf0b 100644
--- a/app/assets/javascripts/admin/templates/reports.js.handlebars
+++ b/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>
diff --git a/app/assets/stylesheets/admin/admin_base.scss b/app/assets/stylesheets/admin/admin_base.scss
index 826de9a001c..70c44ea9dc0 100644
--- a/app/assets/stylesheets/admin/admin_base.scss
+++ b/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 {