created basic analytics dashboard

app/controllers/forms.server.controller.js

@@ -19,13 +19,6 @@ var mongoose = require('mongoose'),
  */
 exports.uploadPDF = function(req, res, next) {
 
-	//console.log('inside uploadPDF');
-
-	// console.log('\n\nProperty Descriptor\n-----------');
-	// console.log(Object.getOwnPropertyDescriptor(req.files.file, 'path'));
-
-	//console.log(req.file);
-
 	if(req.file){
 		var pdfFile = req.file;
 		var _user = req.user;
@@ -376,7 +369,7 @@ exports.formByID = function(req, res, next, id) {
 			message: 'Form is invalid'
 		});
 	} else {
-		Form.findById(id).populate('admin').exec(function(err, form) {
+		Form.findById(id).populate('admin').populate('submissions').exec(function(err, form) {
 			if (err) {
 				return next(err);
 			} else if (form === undefined || form === null) {

app/models/form.server.model.js

@@ -48,17 +48,37 @@ var ButtonSchema = new Schema({
 
 var VisitorDataSchema = new Schema({
 	referrer: {
-		type: String
+		type: String,
+		required: true
 	},
 	lastActiveField: {
 		type: Schema.Types.ObjectId
 	},
 	timeElapsed: {
-		type: Number
+		type: Number,
+		required: true
 	},
 	isSubmitted: {
-		type: Boolean
+		type: Boolean,
+		required: true
+	},
+	language: {
+		type: String
+	},
+	ipAddr: {
+		type: String,
+		default: ''
+	},
+	deviceType: {
+		type: String,
+		enum: ['desktop', 'phone', 'tablet', 'other'],
+		default: 'other',
+		required: true
+	},
+	userAgent: {
+		type: String
 	}
+
 });
 
 /**

bower.json

@@ -35,7 +35,8 @@
     "tableExport.jquery.plugin": "^1.5.1",
     "js-yaml": "^3.6.1",
     "angular-ui-select": "whitef0x0/ui-select#compiled",
-    "angular-translate": "~2.11.0"
+    "angular-translate": "~2.11.0",
+    "ng-device-detector": "^3.0.1"
   },
   "resolutions": {
     "angular-bootstrap": "^0.14.0",

public/config.js

@@ -4,7 +4,7 @@
 var ApplicationConfiguration = (function() {
 	// Init module configuration options
 	var applicationModuleName = 'NodeForm';
-	var applicationModuleVendorDependencies = ['duScroll', 'ui.select', 'cgBusy', 'ngSanitize', 'vButton', 'ngResource', 'NodeForm.templates', 'ui.router', 'ui.bootstrap', 'ui.utils', 'pascalprecht.translate'];
+	var applicationModuleVendorDependencies = ['duScroll', 'ui.select', 'cgBusy', 'ngSanitize', 'vButton', 'ngResource', 'NodeForm.templates', 'ui.router', 'ui.bootstrap', 'ui.utils', 'pascalprecht.translate', 'ng.deviceDetector'];
 
 	// Add a new vertical module
 	var registerModule = function(moduleName, dependencies) {

public/modules/forms/admin/config/i18n/english.js

@@ -61,9 +61,17 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
 		CLICK_FIELDS_FOOTER: 'Click on fields to add them here',
 
 		//Edit Submissions View
-		TOTAL_VIEWS: 'Total Views',
-		SUBMISSIONS: 'Submissions',
-		CONVERSION_RATE: 'Conversion Rate',
+		TOTAL_VIEWS: 'total unique visits',
+		RESPONSES: 'responses',
+		COMPLETION_RATE: 'completion rate',
+		AVERAGE_TIME_TO_COMPLETE: 'avg. completion time',
+
+		DESKTOP_AND_LAPTOP: 'Desktops/Laptops',
+		TABLETS: 'Tablets',
+		PHONES: 'Phones',
+		OTHER: 'Other',
+		UNIQUE_VISITS: 'Unique Visits',
+
 		FIELD_TITLE: 'Field Title',
 		FIELD_VIEWS: 'Field Views',
 		FIELD_DROPOFF: 'User dropoff rate at this field',

public/modules/forms/admin/css/edit-submissions-view.css

@@ -0,0 +1,28 @@
+.analytics .header-title {
+	font-size: 1em;
+	color: #bab8b8;
+}
+
+.analytics .header-numbers {
+	font-size: 4em;
+	padding-bottom: 0.1em;
+	margin-bottom: 0.5em;
+	border-bottom: #fafafa solid 1px;
+}
+
+.analytics .detailed-title {
+	font-size: 1.8em;
+	margin-bottom: 1.1em;
+}
+
+.analytics .detailed-row {
+	padding-bottom: 0.8em;
+}
+.analytics .detailed-row .row {
+	font-size: 1.3em;
+}
+.analytics .detailed-row .row.header {
+	font-size: 0.8em;
+	color: #bab8b8;
+	text-transform: uppercase;
+}

public/modules/forms/admin/directives/edit-submissions-form.client.directive.js

@@ -15,6 +15,87 @@ angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope',
                     rows: []
                 };
 
+				(function initController(){
+
+					var defaultFormFields = _.cloneDeep($scope.myform.form_fields);
+
+					//Iterate through form's submissions
+
+					var submissions = _.cloneDeep($scope.myform.submissions);
+					for(var i = 0; i < submissions.length; i++){
+						for(var x = 0; x < submissions[i].form_fields; x++){
+							var oldValue = submissions[i].form_fields[x].fieldValue || '';
+							submissions[i].form_fields[x] =  _.merge(defaultFormFields, submissions[i].form_fields);
+							submissions[i].form_fields[x].fieldValue = oldValue;
+						}
+						submissions[i].selected = false;
+					}
+					// console.log('after textField2: '+data[0].form_fields[1].fieldValue);
+
+					$scope.table.rows = submissions;
+
+					// console.log('form submissions successfully fetched');
+					// console.log( JSON.parse(JSON.stringify($scope.submissions)) ) ;
+					// console.log( JSON.parse(JSON.stringify($scope.myform.form_fields)) );
+
+				})();
+
+				/*
+				** Analytics Functions
+				*/
+				$scope.AverageTimeElapsed = (function(){
+					var totalTime = 0;
+					var numSubmissions = $scope.table.rows.length;
+
+					for(var i=0; i<$scope.table.rows.length; i++){
+						totalTime += $scope.table.rows[i].timeElapsed;
+					}
+
+					console.log(totalTime/numSubmissions);
+					return totalTime/numSubmissions;
+				})();
+
+				$scope.DeviceStatistics = (function(){
+					var stats = {
+						desktop: null,
+						tablet: null,
+						phone: null,
+						other: null
+					};
+					var newStatItem = function(){
+						return {
+							visits: 0,
+							responses: 0,
+							completion: 0,
+							average_time: 0,
+							total_time: 0
+						}
+					};
+
+					var visitors = $scope.myform.analytics.visitors;
+
+					console.log(visitors);
+					for(var i=0; i<visitors.length; i++){
+						var visitor = visitors[i];
+						var deviceType = visitor.deviceType;
+
+						if(!stats[deviceType]){
+							stats[deviceType] = newStatItem();
+						}
+						stats[deviceType].visits++;
+
+						stats[deviceType].total_time =+ visitor.timeElapsed;
+						stats[deviceType].average_time = stats[deviceType].total_time/stats[deviceType].visits;
+
+						if(stats[deviceType].isSubmitted) stats[deviceType].responses++;
+
+						stats[deviceType].completion = stats[deviceType].response/stats[deviceType].visits;
+					}
+
+					console.log(stats);
+					return stats;
+				})();
+
                 /*
                 ** Table Functions
                 */
@@ -41,36 +122,6 @@ angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope',
                 */
 
                 //Fetch and display submissions of Form
-                $scope.initFormSubmissions = function(){
-                    $http.get('/forms/'+$scope.myform._id+'/submissions')
-                        .success(function(data, status, headers){
-
-                            var _tmpSubFormFields,
-                                defaultFormFields = _.cloneDeep($scope.myform.form_fields);
-
-                            // console.log('before textField2: '+data[0].form_fields[1].fieldValue);
-
-                            //Iterate through form's submissions
-                            for(var i=0; i<data.length; i++){
-                                for(var x=0; x<data[i].form_fields; x++){
-                                    var oldValue = data[i].form_fields[x].fieldValue || '';
-                                    data[i].form_fields[x] =  _.merge(defaultFormFields, data[i].form_fields);
-                                    data[i].form_fields[x].fieldValue = oldValue;
-                                }
-                                data[i].selected = false;
-                            }
-                            // console.log('after textField2: '+data[0].form_fields[1].fieldValue);
-
-                            $scope.table.rows = data;
-
-                            // console.log('form submissions successfully fetched');
-                            // console.log( JSON.parse(JSON.stringify($scope.submissions)) ) ;
-                            // console.log( JSON.parse(JSON.stringify($scope.myform.form_fields)) );
-                        })
-                        .error(function(err){
-                            console.error('Could not fetch form submissions.\nError: '+err);
-                        });
-                };
 
                 //Delete selected submissions of Form
                 $scope.deleteSelectedSubmissions = function(){
@@ -109,7 +160,7 @@ angular.module('forms').directive('editSubmissionsFormDirective', ['$rootScope',
                     };
 
 					console.log($scope.table.rows);
-					
+
 					angular.element('#table-submission-data').tableExport({type: type, escape:false});
 
 					/*

public/modules/forms/admin/views/directiveViews/form/edit-submissions-form.client.view.html

@@ -1,43 +1,236 @@
-<div class="submissions-table row container" ng-init="initFormSubmissions()">
-	<div class="row">
-		<div class="col-xs-4">
-			{{ 'TOTAL_VIEWS' | translate }}: {{myform.analytics.views}}
-		</div>
-
-		<div class="col-xs-4">
-			{{ 'SUBMISSIONS' | translate }}: {{myform.analytics.submissions}}
-		</div>
-
-		<div class="col-xs-4">
-			{{ 'CONVERSION_RATE' | translate }}: {{myform.analytics.conversionRate}}%
-		</div>
-	</div>
-	<br>
-	<div class="row">
-		<div class="col-xs-12">
-
-			<div class="col-xs-2">
-				<strong>{{ 'FIELD_TITLE' | translate }}</strong>
-			</div>
-			<div class="col-xs-2">
-				<strong>{{ 'FIELD_VIEWS' | translate }}</strong>
+<div class="submissions-table row container">
+	<div class="row text-center analytics">
+		<div class="row col-xs-12 header-title">
+			<div class="col-xs-3">
+				{{ 'TOTAL_VIEWS' | translate }}
 			</div>
 
-			<div class="col-xs-4">
-				<strong>{{ 'FIELD_DROPOFF' | translate }}</strong>
+			<div class="col-xs-3">
+				{{ 'RESPONSES' | translate }}
+			</div>
+
+			<div class="col-xs-3">
+				{{ 'COMPLETION_RATE' | translate }}
+			</div>
+
+			<div class="col-xs-3">
+				{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
 			</div>
 		</div>
-		<div class="col-xs-12" ng-repeat="fieldStats in myform.analytics.fields">
 
-			<div class="col-xs-2">
-				{{fieldStats.field.title}}
-			</div>
-			<div class="col-xs-2">
-				{{fieldStats.totalViews}}
+		<div class="row col-xs-12 header-numbers">
+			<div class="col-xs-3">
+				{{myform.analytics.views}}
 			</div>
 
-			<div class="col-xs-4">
-				{{fieldStats.dropoffRate}}%
+			<div class="col-xs-3">
+				{{myform.analytics.submissions}}
+			</div>
+
+			<div class="col-xs-3">
+				{{myform.analytics.conversionRate | number:0}}%
+			</div>
+
+			<div class="col-xs-3">
+				{{AverageTimeElapsed | secondsToDateTime | date:'mm:ss'}}
+			</div>
+		</div>
+
+		<div class="row col-xs-12 detailed-title">
+			<div class="col-xs-3">
+				{{ 'DESKTOP_AND_LAPTOP' | translate }}
+			</div>
+
+			<div class="col-xs-3">
+				{{ 'TABLETS' | translate }}
+			</div>
+
+			<div class="col-xs-3">
+				{{ 'PHONES' | translate }}
+			</div>
+
+			<div class="col-xs-3">
+				{{ 'OTHER' | translate }}
+			</div>
+		</div>
+
+		<div class="row col-xs-12 detailed-row">
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'UNIQUE_VISITS' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.desktop.visits}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'UNIQUE_VISITS' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.tablet.visits}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'UNIQUE_VISITS' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.tablet.visits}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'UNIQUE_VISITS' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.other.visits}}
+				</div>
+			</div>
+		</div>
+
+		<div class="row col-xs-12 detailed-row">
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'RESPONSES' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.desktop.responses}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'RESPONSES' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.tablet.responses}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'RESPONSES' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.phone.responses}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'RESPONSES' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.other.responses}}
+				</div>
+			</div>
+		</div>
+
+		<div class="row col-xs-12 detailed-row">
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'COMPLETION_RATE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.desktop.completion}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'COMPLETION_RATE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.tablet.completion}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'COMPLETION_RATE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.phone.completion}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'COMPLETION_RATE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.other.completion}}
+				</div>
+			</div>
+		</div>
+
+		<div class="row col-xs-12 detailed-row">
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.desktop.average_time | secondsToDateTime | date:'mm:ss'}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.tablet.average_time | secondsToDateTime | date:'mm:ss'}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.phone.average_time | secondsToDateTime | date:'mm:ss'}}
+				</div>
+			</div>
+
+			<div class="col-xs-3">
+				<div class="row header">
+					{{ 'AVERAGE_TIME_TO_COMPLETE' | translate }}
+				</div>
+				<div class="row">
+					{{DeviceStatistics.other.average_time | secondsToDateTime | date:'mm:ss'}}
+				</div>
+			</div>
+		</div>
+
+		<div class="row col-xs-12">
+
+				<div class="col-xs-2">
+					<strong>{{ 'FIELD_TITLE' | translate }}</strong>
+				</div>
+				<div class="col-xs-2">
+					<strong>{{ 'FIELD_VIEWS' | translate }}</strong>
+				</div>
+
+				<div class="col-xs-4">
+					<strong>{{ 'FIELD_DROPOFF' | translate }}</strong>
+				</div>
+			</div>
+			<div class="row col-xs-12" ng-repeat="fieldStats in myform.analytics.fields">
+
+				<div class="col-xs-2">
+					{{fieldStats.field.title}}
+				</div>
+				<div class="col-xs-2">
+					{{fieldStats.totalViews}}
+				</div>
+
+				<div class="col-xs-4">
+					{{fieldStats.dropoffRate}}%
+				</div>
 			</div>
 		</div>
 	</div>
@@ -116,7 +309,7 @@
 						{{row.percentageComplete}}%
 					</td>
 					<td>
-						{{row.timeElapsed}}
+						{{row.timeElapsed | secondsToDateTime | date:'mm:ss'}}
 					</td>
 					<td>
 						{{row.device.name}}, {{row.device.type}}

public/modules/forms/config/forms.client.config.js

@@ -6,7 +6,11 @@ angular.module('forms').run(['Menus',
 		// Set top bar menu items
 		Menus.addMenuItem('topbar', 'My Forms', 'forms', '', '/forms', false);
 	}
-]).filter('formValidity',
+]).filter('secondsToDateTime', [function() {
+	return function(seconds) {
+		return new Date(1970, 0, 1).setSeconds(seconds);
+	};
+}]).filter('formValidity',
     function(){
         return function(formObj){
         	if(formObj && formObj.form_fields && formObj.visible_form_fields){

public/modules/forms/directives/analytics-service.client.directive.js

@@ -6,22 +6,42 @@
 		.module('forms')
 		.factory('SendVisitorData', SendVisitorData);
 
-	SendVisitorData.$inject = ['Socket', '$state'];
+	SendVisitorData.$inject = ['Socket', '$state', '$http', 'deviceDetector'];
 
-	function SendVisitorData(Socket, $state) {
+	function SendVisitorData(Socket, $state, $http) {
 
 		// Create a controller method for sending visitor data
-		function send(form, lastActiveIndex, timeElapsed) {
-
+		function send(form, lastActiveIndex, timeElapsed, deviceDetector) {
 			// Create a new message object
 			var visitorData = {
 				referrer: document.referrer,
 				isSubmitted: form.submitted,
 				formId: form._id,
 				lastActiveField: form.form_fields[lastActiveIndex]._id,
-				timeElapsed: timeElapsed
+				timeElapsed: timeElapsed,
+				//@TODO @FIXME: David: Need to make this get the language from the HTTP Header instead
+				language: window.navigator.userLanguage || window.navigator.language
 			};
-			Socket.emit('form-visitor-data', visitorData);
+
+			$http.get('http://jsonip.com/').success(function(response) {
+					visitorData.ipAddr = response['ip']+'';
+				}).error(function(error) {
+					console.error('Could not get users\'s ip');
+					visitorData.ipAddr = '';
+				}).finally(function(){
+					visitorData.userAgent = deviceDetector.raw;
+
+					if(deviceDetector.isTablet()) {
+						visitorData.deviceType = 'tablet';
+					}else if(deviceDetector.isMobile()){
+						visitorData.deviceType = 'phone';
+					}else {
+						visitorData.deviceType = 'desktop';
+					}
+					Socket.emit('form-visitor-data', visitorData);
+
+				});
+
 		}
 
 		function init(){