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 000000000..e55489d07
--- /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 6bff1e35f..1088edbbf 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 edf07fcf7..7a5a3aadf 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 826de9a00..70c44ea9d 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 {