Quickly add analytics

app/components/campaign/-analytics.js

@@ -0,0 +1,33 @@
+import Ember from 'ember';
+
+const { Component, inject: { service } } = Ember;
+
+export default Component.extend({
+  classNames: ['card', 'mb-3'],
+  campaignAnalytics: service(),
+
+  campaignId: null,
+  form: null,
+  loading: false,
+
+  report: null,
+
+  init() {
+    this._super(...arguments);
+    this.send('loadAnalytics');
+  },
+
+  actions: {
+    loadAnalytics() {
+      this.set('loading', true);
+      this.get('campaignAnalytics').retrieve(this.get('campaignId'), this.get('form.identifier'))
+        .then((report) => {
+          this.set('report', report);
+          console.info(report);
+        })
+        .finally(() => this.set('loading', false))
+      ;
+    },
+  },
+
+});

app/services/campaign-analytics.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+import promisify from 'admin/utils/wrap-ajax';
+
+const { Service, inject: { service }, $ } = Ember;
+
+export default Service.extend({
+  errorProcessor: service(),
+
+  retrieve(campaignId, formId) {
+    return promisify($.ajax(`/analytics/campaign/${campaignId}/${formId}`, {
+      method: 'GET',
+    }))
+    .then((response) => response.response.data)
+    .catch((json) => this.get('errorProcessor').notify(json.errors || []))
+  },
+});

app/services/field-loader.js

@@ -263,7 +263,7 @@ export default Service.extend({
   ],
 
   retrieve() {
-    const fields = this.get('fields');
+    const fields = this.get('fields').slice();
     fields.pushObject({ key: 'country', label: 'Country', fieldType: 'select', options: this.get('countryOptions') });
     return RSVP.resolve(fields);
   },

app/templates/components/campaign/-analytics.hbs

@@ -0,0 +1,64 @@
+<div class="card-header">
+  {{form.name}}
+</div>
+
+<div class="card-block">
+  {{#if loading}}
+    <small class="text-muted">Loading data, please wait...</small>
+    {{#-bs/progress}}
+      {{-bs/progress/bar value=100 animated=true}}
+    {{/-bs/progress}}
+  {{else}}
+    <div class="card-deck">
+      <div class="card mb-3">
+        <div class="card-block">
+          <p class="mb-0"><span class="display-4">{{ report.actions.render.count }}</span><br>Inserted</p>
+        </div>
+      </div>
+      <div class="card mb-3">
+        <div class="card-block">
+          <p class="mb-0"><span class="display-4">{{ report.actions.view.count }}</span><br>Viewed</p>
+        </div>
+      </div>
+      <div class="card mb-3">
+        <div class="card-block">
+          <p class="mb-0"><span class="display-4">{{ report.actions.focus.count }}</span><br>Focused</p>
+        </div>
+      </div>
+      <div class="card mb-3">
+        <div class="card-block">
+          <p class="mb-0"><span class="display-4">{{ report.actions.submit.count }}</span><br>Submitted</p>
+        </div>
+      </div>
+      {{!-- <div class="card mb-3">
+        <div class="card-block">
+          <p class="mb-0"><span class="display-4">{{ report.conversion }}</span> C/R</p>
+        </div>
+      </div> --}}
+    </div>
+    {{#if report.submissions.length}}
+      <div class="table-responsive">
+        <table class="table table-bordered table-sm mb-0">
+          <thead>
+            <tr>
+              <th>Date</th>
+              {{#each report.labels as |label|}}
+                <th>{{ label }}</th>
+              {{/each}}
+            </tr>
+          </thead>
+          <tbody>
+            {{#each report.submissions as |submission|}}
+              <tr>
+                <td>{{ submission.date }}</td>
+                {{#each report.labels as |label|}}
+                  <td>{{ get submission.values label }}</td>
+                {{/each}}
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    {{/if}}
+  {{/if}}
+</div>

app/templates/components/campaign/email-signup/manage.hbs

@@ -26,6 +26,11 @@
           Embed
         </a>
       </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#email-signup-analytics" data-toggle="pill" role="tab">
+          Analytics
+        </a>
+      </li>
     </ul>
   </div>
 
@@ -50,6 +55,11 @@
         type="campaign-email-signup"
       }}
     </div>
+    <div class="tab-pane" id="email-signup-analytics" role="tabpanel">
+      {{#each campaign.forms as |form|}}
+        {{campaign/-analytics form=form campaignId=campaign.id}}
+      {{/each}}
+    </div>
   </div>
 
   <div class="card-footer">

app/templates/components/campaign/gated-content/manage.hbs

@@ -26,6 +26,11 @@
           Embed
         </a>
       </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#gated-content-analytics" data-toggle="pill" role="tab">
+          Analytics
+        </a>
+      </li>
     </ul>
   </div>
 
@@ -50,6 +55,11 @@
         type="campaign-gated-content"
       }}
     </div>
+    <div class="tab-pane" id="gated-content-analytics" role="tabpanel">
+      {{#each campaign.forms as |form|}}
+        {{campaign/-analytics form=form campaignId=campaign.id}}
+      {{/each}}
+    </div>
   </div>
 
   <div class="card-footer">

bower.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "bootstrap": "v4.0.0-alpha.6",
     "Ionicons": "ionicons#^2.0.1",
-    "bootswatch": "https://github.com/thomaspark/bootswatch.git#v4"
+    "bootswatch": "https://github.com/thomaspark/bootswatch.git#v4",
+    "highcharts": "^5.0.12"
   }
 }

ember-cli-build.js

@@ -14,6 +14,8 @@ module.exports = function(defaults) {
   app.import(path.join(app.bowerDirectory, 'bootstrap/dist/js/bootstrap.min.js'));
   app.import(path.join(app.bowerDirectory, 'bootstrap/dist/css/bootstrap.min.css.map'), { destDir : 'assets' });
 
+  app.import(path.join(app.bowerDirectory, 'highcharts/highcharts.js'));
+
   var icons = new Funnel(path.join(app.bowerDirectory, 'Ionicons/fonts'), {
     srcDir: '/',
     include: ['**/*.svg', '**/*.eot', '**/*.ttf', '**/*.woff'],