Merge pull request #53 from codeforamerica/most-popular-pages

Most popular pages

karma.conf.js

@@ -1,7 +1,7 @@
 module.exports = function(config) {
   config.set({
     basePath: '',
-    frameworks: ['mocha', 'chai-jquery', 'jquery-1.11.0', 'sinon-chai', 'chai', 'fixture'],
+    frameworks: ['mocha', 'chai-jquery', 'jquery-1.11.0', 'chai-changes', 'sinon-chai', 'chai', 'fixture'],
     files: [
       'public/javascripts/vendor/xhr.min.js',
       'public/javascripts/vendor/time.min.js',
@@ -11,9 +11,11 @@ module.exports = function(config) {
       'public/javascripts/vendor/morris.min.js',
       'public/javascripts/helpers/helper.js',
       'public/javascripts/helpers/templateHelper.js',
+      'public/javascripts/helpers/dataHelper.js',
       'public/javascripts/landing-pages.js',
       'public/javascripts/search.js',
       'public/javascripts/traffic.js',
+      'public/javascripts/content.js',
       'tests/**/*Spec.js',
       'tests/fixtures/**/*'
     ],

karma.saucelabs.js

@@ -26,7 +26,7 @@ module.exports = function(config) {
   };
   config.set({
     basePath: '',
-    frameworks: ['mocha', 'chai-jquery', 'jquery-1.11.0', 'sinon-chai', 'chai', 'fixture'],
+    frameworks: ['mocha', 'chai-jquery', 'jquery-1.11.0', 'chai-changes', 'sinon-chai', 'chai', 'fixture'],
     files: [
       'public/javascripts/vendor/xhr.min.js',
       'public/javascripts/vendor/time.min.js',
@@ -36,9 +36,11 @@ module.exports = function(config) {
       'public/javascripts/vendor/morris.min.js',
       'public/javascripts/helpers/helper.js',
       'public/javascripts/helpers/templateHelper.js',
+      'public/javascripts/helpers/dataHelper.js',
       'public/javascripts/landing-pages.js',
       'public/javascripts/search.js',
       'public/javascripts/traffic.js',
+      'public/javascripts/content.js',
       'tests/**/*Spec.js',
       'tests/fixtures/**/*'
     ],

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "karma": "^0.13.2",
     "karma-chai": "0.1.0",
+    "karma-chai-changes": "0.0.1",
     "karma-chai-jquery": "^1.0.0",
     "karma-coverage": "^0.4.2",
     "karma-coveralls": "^1.1.2",

public/index.html

@@ -81,6 +81,7 @@ <h2 class="brick-heading">Most popular pages</h2>
     <script src="javascripts/vendor/pretty.js"></script>
     <script src="javascripts/vendor/bezier.js"></script>
 
+    <script src="javascripts/helpers/dataHelper.js"></script>
     <script src="javascripts/helpers/templateHelper.js"></script>
     <script src="javascripts/helpers/helper.js"></script>
     <script src="javascripts/landing-pages.js"></script>
@@ -116,7 +117,12 @@ <h2 class="brick-heading">Most popular pages</h2>
         <li>
           <a href="http://{{ url }}" target="_blank">{{ title }}</a>
           <em>
-          visits: {{ visits }}
+          <div class="visitor-types mobile">
+            <i class="icon mobile icon-mobile-phone"></i> {{ numberFormat visits.mobile }}
+          </div>
+          <div class="visitor-types desktop">
+            <i class="icon desktop icon-desktop"></i> {{ numberFormat visits.desktop }}
+          </div>
           </em>
         </li>
       {{/pages}}

public/javascripts/content.js

@@ -7,29 +7,58 @@
     pages: [],
     el: false,
 
-    endpoint: function(){
-      return "/realtime?ids=ga:"+matrix.settings.profileId+"&metrics=rt%3Apageviews&dimensions=rt%3ApageTitle,rt:pagePath&max-results=10&sort=-rt%3Apageviews"
+  endpoint: function(){
+    return "/historic?"+
+    "ids=ga:"+matrix.settings.profileId+"&"+
+    "metrics=ga:pageviews&"+
+    "dimensions=ga:pageTitle,ga:pagePath,ga:deviceCategory&"+
+    "start-date=yesterday&end-date=today&"+
+    "max-results=1000&"+
+    "sort=-ga%3Apageviews"
     },
-    parseResponse: function(data){
-      var i, _i;
-
-      content.pages = [];
+    reorderData: function() {
+      var overallVisits = function(visits) {
+        return (parseInt(visits.mobile) + parseInt(visits.desktop));
+      }
+      var visitSort = function(a,b) {
+        if(overallVisits(a.visits) < overallVisits(b.visits)) return 1;
+        if(overallVisits(a.visits) > overallVisits(b.visits)) return -1;
+        return 0;
+      }
+      content.pages = content.pages.sort(visitSort);
+    },
+    parseData: function(data) {
+      var i, _i,
+      row, url, device, oldRow, visits, visitsDevice,
+      titleColumn = 0, urlColumn= 1, deviceColumn = 2, visitsColumn = 3;
       for(i=0,_i=data.rows.length; i<_i; i++){
-        content.pages.push({
-          title: data.rows[i][0],//.split(' — ').slice(0,-1).join(' - '),
-          url: data.rows[i][1],
-          visits: data.rows[i][2]
-          //displayHits: root.matrix.numberWithCommas(data.rows[i].week2),
-          //percentageUp: root.matrix.numberWithCommas(Math.round(data.rows[i].percent_change)) + "%"
-        });
+        row = data.rows[i];
+        url = row[urlColumn];
+        device = window.dataHelper.deviceType(row[deviceColumn]);
+        visits = parseInt(row[visitsColumn]);
+        if(oldRow = window.dataHelper.findWithUrl(content.pages, url)) {
+          oldRow.visits[device] += visits;
+        }else {
+          visitsDevice = { desktop: 0, mobile: 0 };
+          visitsDevice[device] += visits;
+          content.pages.push({
+            title: data.rows[i][titleColumn],
+            url: data.rows[i][urlColumn],
+            visits: visitsDevice
+          });
+        }
       }
-
+    },
+    parseResponse: function(error, data){
+      if(error) { return -1; }
+      if(!data.hasOwnProperty("rows")) { return -1; }
+      content.pages = [];
+      content.parseData(data);
+      content.reorderData();
       content.displayResults();
     },
     displayResults: function(){
-      matrix.template(content.el,
-                      'content-results',
-                      { pages: content.pages.slice(0,10) }
+      window.templateHelper.renderTemplate(content.el, 'content-results', { pages: content.pages.slice(0,10) }
       );
     },
     init: function(){

public/javascripts/helpers/dataHelper.js

@@ -0,0 +1,17 @@
+window.dataHelper = {
+  findWithUrl: function(data, url) {
+    var i, dataLength = data.length;
+    for(i=0;i<dataLength;i++) {
+      result = data[i];
+      if(result.url === url) {
+        return result;
+      }
+    }
+    return undefined;
+  },
+  deviceType: function(device) {
+    device = device.toLowerCase();
+    if(device === "tablet") { device = "mobile"; }
+    return device;
+  }
+}

public/javascripts/helpers/templateHelper.js

@@ -4,14 +4,18 @@ window.templateHelper = {
     'mobile': 'icon-mobile-phone',
     'desktop': 'icon-desktop'
   },
+  deviceCategoryClass: function(deviceCategory) {
+    return this.deviceClasses[deviceCategory];
+  },
   compileTemplate: function(sourceHtml) {
     return Handlebars.compile(sourceHtml);
   },
+  numberFormat: function(number) {
+    return number.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,').split(".")[0];
+  },
   registerHelpers: function() {
-    var deviceClasses = this.deviceClasses;
-    Handlebars.registerHelper('deviceClass', function(deviceCategory) {
-      return deviceClasses[deviceCategory];
-    });
+    Handlebars.registerHelper('deviceClass', this.deviceCategoryClass);
+    Handlebars.registerHelper('numberFormat', this.numberFormat);
   },
   getTemplate: function(id) {
     var templ = this.templates[id];

public/stylesheets/base.scss

@@ -166,6 +166,32 @@ h2{
     &:nth-child(1) { opacity: 1.0; }
     &:nth-child(2) { opacity: 0.7; }
   }
+  .popular {
+    li {
+      clear: both;
+      em {
+        margin-top: 5px;
+        .visitor-types {
+          float: left;
+          color: #fff;
+          padding: 0.3em;
+          margin: 0 0.4em 0 0;
+          &.mobile {
+            background: $mobile-color;
+          }
+          &.desktop{
+            background: $desktop-color;
+          }
+        }
+        .device-type {
+          width: 5px;
+          height: 1em;
+          float: left;
+          margin: 0 0.4em 0 0;
+        }
+      }
+    }
+  }
 }
 
 .top-bar {