FEATURE: add graph support to admin reports

thanks to graph js, this runs latest beta cause we needed support for
smarter X axis legend

app/assets/javascripts/admin/components/admin-graph.js.es6

@@ -0,0 +1,43 @@
+import loadScript from 'discourse/lib/load-script';
+
+export default Ember.Component.extend({
+  tagName: 'canvas',
+
+  refreshChart(){
+    const ctx = this.$()[0].getContext("2d");
+    const model = this.get("model");
+    const rawData = this.get("model.data");
+
+    var data = {
+      labels: rawData.map(r => r.x),
+      datasets: [{
+        data: rawData.map(r => r.y),
+        label: model.get('title'),
+        backgroundColor: "rgba(200,220,240,0.3)",
+        borderColor: "#08C"
+      }]
+    };
+
+    const config = {
+      type: 'line',
+      data: data,
+      options: {
+        responsive: true,
+        scales: {
+          yAxes: [{
+            display: true,
+            ticks: {
+              suggestedMin: 0
+            }
+          }]
+        }
+      },
+    };
+
+    this._chart = new Chart(ctx, config);
+  },
+
+  didInsertElement(){
+    loadScript("/javascripts/Chart.min.js").then(() => this.refreshChart.apply(this));
+  }
+})

app/assets/javascripts/admin/controllers/admin-reports.js.es6

@@ -4,9 +4,10 @@ import Report from 'admin/models/report';
 import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Controller.extend({
-  viewMode: 'table',
+  queryParams: ["mode", "start-date", "end-date", "category-id", "group-id"],
+  viewMode: 'graph',
   viewingTable: Em.computed.equal('viewMode', 'table'),
-  viewingBarChart: Em.computed.equal('viewMode', 'barChart'),
+  viewingGraph: Em.computed.equal('viewMode', 'graph'),
   startDate: null,
   endDate: null,
   categoryId: null,
@@ -35,6 +36,16 @@ export default Ember.Controller.extend({
       var q;
       this.set("refreshing", true);
 
+      this.setProperties({
+        'start-date': this.get('startDate'),
+        'end-date': this.get('endDate'),
+        'category-id': this.get('categoryId'),
+      });
+
+      if (this.get('groupId')){
+        this.set('group-id', this.get('groupId'));
+      }
+
       q = Report.find(this.get("model.type"), this.get("startDate"), this.get("endDate"), this.get("categoryId"), this.get("groupId"));
       q.then(m => this.set("model", m)).finally(() => this.set("refreshing", false));
     },
@@ -43,8 +54,8 @@ export default Ember.Controller.extend({
       this.set('viewMode', 'table');
     },
 
-    viewAsBarChart() {
-      this.set('viewMode', 'barChart');
+    viewAsGraph() {
+      this.set('viewMode', 'graph');
     },
 
     exportCsv() {

app/assets/javascripts/admin/routes/admin-reports.js.es6

@@ -7,15 +7,18 @@
   @module Discourse
 **/
 export default Discourse.Route.extend({
+  queryParams: { mode: {}, "start-date": {}, "end-date": {}, "category-id": {}, "group-id": {}},
+
   model: function(params) {
     const Report = require('admin/models/report').default;
-    return Report.find(params.type);
+    return Report.find(params.type, params['start-date'], params['end-date'], params['category-id'], params['group-id'])
   },
 
   setupController: function(controller, model) {
     controller.setProperties({
       model: model,
-      categoryId: 'all',
+      categoryId: (model.get('category_id') || 'all'),
+      groupId: model.get('group_id'),
       startDate: moment(model.get('start_date')).format('YYYY-MM-DD'),
       endDate: moment(model.get('end_date')).format('YYYY-MM-DD')
     });

app/assets/javascripts/admin/templates/reports.hbs

@@ -18,14 +18,17 @@
     <a href {{action "viewAsTable"}}>{{i18n 'admin.dashboard.reports.view_table'}}</a>
   {{/if}}
   |
-  {{#if viewingBarChart}}
-    {{i18n 'admin.dashboard.reports.view_chart'}}
+  {{#if viewingGraph}}
+    {{i18n 'admin.dashboard.reports.view_graph'}}
   {{else}}
-    <a href {{action "viewAsBarChart"}}>{{i18n 'admin.dashboard.reports.view_chart'}}</a>
+    <a href {{action "viewAsGraph"}}>{{i18n 'admin.dashboard.reports.view_graph'}}</a>
   {{/if}}
 </div>
 
 {{#conditional-loading-spinner condition=refreshing}}
+  {{#if viewingGraph}}
+    {{admin-graph model=model}}
+  {{else}}
   <table class='table report'>
     <tr>
       <th>{{model.xaxis}}</th>
@@ -36,16 +39,10 @@
       <tr>
         <td>{{row.x}}</td>
         <td>
-          {{#if viewingTable}}
-            {{row.y}}
-          {{/if}}
-          {{#if viewingBarChart}}
-            <div class='bar-container'>
-              <div class='bar' style="width: {{unbound row.percentage}}%">{{row.y}}</div>
-            </div>
-          {{/if}}
+          {{row.y}}
         </td>
       </tr>
     {{/each}}
   </table>
+  {{/if}}
 {{/conditional-loading-spinner}}

config/locales/client.en.yml

@@ -1986,7 +1986,7 @@ en:
           30_days_ago: "30 Days Ago"
           all: "All"
           view_table: "table"
-          view_chart: "bar chart"
+          view_graph: "graph"
           refresh_report: "Refresh Report"
           start_date: "Start Date"
           end_date: "End Date"