diff --git a/app/scripts/dashboard/controllers.js b/app/scripts/dashboard/controllers.js index 84720b24..fdb45d8d 100644 --- a/app/scripts/dashboard/controllers.js +++ b/app/scripts/dashboard/controllers.js @@ -1,180 +1,219 @@ angular.module("dashboardModule") -.controller("dashboardMenuController", ["$scope", "$menuService", "$loginLoginService", function ($scope, $menuService, $loginLoginService) { - $scope.avatar = $loginLoginService.getAvatar(); - $scope.userName = $loginLoginService.getFullName() || "root"; - $scope.items = $menuService; -}]) +.controller("dashboardMenuController", ["$scope", "$menuService", "$loginLoginService", + function($scope, $menuService, $loginLoginService) { + $scope.avatar = $loginLoginService.getAvatar(); + $scope.userName = $loginLoginService.getFullName() || "root"; + $scope.items = $menuService; + } +]) .controller("dashboardController", [ -"$scope", -"$location", -"$dashboardStatisticService", -"$designImageService", -"$dashboardUtilsService", -"$timeout", -"moment", -function ($scope, $location, $statistic, $designImageService, $dashboardUtilsService, $timeout, moment) { - - //TODO: delete this when images are attached to products - $scope.getProductImage = function (image) { - return $designImageService.getFullImagePath("", image); - }; - - /* - Static Data Points - */ - - // TOP REFERRERS - $statistic.getReferrers().then(function (data) { - if (angular.isArray(data)) { - $scope.referrers = data; - } - }); - - // Website Conversions - $statistic.getConversions().then(function (data) { - $scope.conversions = data; - }); - - // TOP SELLERS - $statistic.getTopSellers().then(function (data) { - $scope.topSellers = data; - }); - - - /* - Live Data Points - */ - var pollingRate = 10 * 1000; // 10s - - - // Visit Stats - (function tick(){ - $statistic.getVisits().then(function (data) { - $scope.visitStats = data; - $scope.visitTimeout = $timeout(tick, pollingRate); - }); - })(); - $scope.$on('$locationChangeStart', function() { - $timeout.cancel($scope.visitTimeout); - }); - - // Sales Stats - (function tick(){ - $statistic.getSales().then(function (data) { - $scope.salesStats = data; - $scope.salesTimeout = $timeout(tick, pollingRate); - }); - })(); - $scope.$on('$locationChangeStart', function() { - $timeout.cancel($scope.salesTimeout); - }); - - // Highcharts settings that we can't adjust from ngHighcharts - Highcharts.setOptions({ - global: { - timezoneOffset: 0 //default - }, - chart: { - spacingLeft: 15, - spacingRight: 0, - backgroundColor: 'rgba(0,0,0,0)' - }, - plotOptions: { - series: { - marker: { - enabled: false - } - } - }, - yAxis: { - labels: { - style: { - color: '#98978B' - } + "$scope", + "$location", + "$dashboardStatisticService", + "$designImageService", + "$dashboardUtilsService", + "$timeout", + "moment", + function( + $scope, + $location, + $statistic, + $designImageService, + $dashboardUtilsService, + $timeout, + moment + ) { + + var pollingRate = 10 * 1000; // 10s + var visitTimeout; + var salesTimeout; + var visitsDetailTimeout; + var salesDetailTimeout; + + // Stats tables + $scope.visitStats; + $scope.salesStats; + + // Graphs + $scope.visitorGraph; + $scope.salesGraph; + + // Other Widgets + $scope.referrers = []; + $scope.conversions = {}; + $scope.topSellers = {} + + // REFACTOR OUT + $scope.getProductImage = getProductImage; + + activate(); + + /////////////////////////////////// + + function activate() { + // Referrers + $statistic.getReferrers().then(function(data) { + if (angular.isArray(data)) { + $scope.referrers = data; + } + }); + + // Conversions + $statistic.getConversions().then(function(data) { + $scope.conversions = data; + }); + + // Best Sellers + $statistic.getTopSellers().then(function(data) { + $scope.topSellers = data; + }); + + // Clear polling when we navigate + $scope.$on('$locationChangeStart', function() { + $timeout.cancel(visitTimeout); + $timeout.cancel(salesTimeout); + $timeout.cancel(visitsDetailTimeout); + $timeout.cancel(salesDetailTimeout); + }); + + configGraphs(); + startPolling(); } - }, - colors: [ - '#325D88', - '#DFD7CA' - ], - legend: { enabled: false }, - tooltip: { - formatter: function() { - return this.series.name + ' @ ' + moment.utc(this.x).format('ha') + ': ' + this.y; - } - } - }); - - var graphSettings = { - options: { - chart: { - events: { - load: function() { - var self = this; - setTimeout(function() { - self.reflow(); - }, 0); + + function configGraphs() { + // Highcharts settings that we can't adjust from ngHighcharts + Highcharts.setOptions({ + global: { + timezoneOffset: 0 //default + }, + chart: { + spacingLeft: 15, + spacingRight: 0, + backgroundColor: 'rgba(0,0,0,0)' + }, + plotOptions: { + series: { + marker: { + enabled: false + } + } + }, + yAxis: { + labels: { + style: { + color: '#98978B' + } } }, - type: 'line', - style: { - width: '100%' + colors: [ + '#325D88', + '#DFD7CA' + ], + legend: { + enabled: false + }, + tooltip: { + formatter: function() { + return this.series.name + ' @ ' + moment.utc(this.x).format('ha') + ': ' + this.y; + } } - } - }, - xAxis: { - type: 'datetime', - tickInterval: moment.duration(2, 'hour').asMilliseconds(), - tickAmount: 24, - labels: { - formatter: function () { - // return moment(this.value).format('ha'); - // console.log('moment',this.value, moment(this.value).format('HH:mm') ); - return moment.utc(this.value).format('ha') + }); + + var graphSettings = { + options: { + chart: { + events: { + load: function() { // add a reflow after load + var self = this; + setTimeout(function() { + self.reflow(); + }, 0); + } + }, + type: 'line', + style: { + width: '100%' + } + } + }, + xAxis: { + type: 'datetime', + tickInterval: moment.duration(2, 'hour').asMilliseconds(), + tickAmount: 24, + labels: { + formatter: function() { + return moment.utc(this.value).format('ha') + } + } + }, + yAxis: { + min: 0, + minRange: 3, + allowDecimals: false, + title: { + enabled: false + }, + labels: {} + }, + series: [], + title: { + text: '' + }, + loading: false, + size: { + height: 260 } } - }, - yAxis: { - min: 0, - minRange: 3, - allowDecimals: false, - title: { enabled: false }, - }, - series: [], - title: { text: '' }, - loading: false, - size: { - height: 260 - } - } - - // Copy these settings over - $scope.salesGraph = angular.copy(graphSettings); - $scope.visitorGraph = angular.copy(graphSettings); - // Sales is in dollars, so update that label - $scope.salesGraph.yAxis.labels = {format : '${value}'}; + // Copy these settings over + $scope.salesGraph = angular.copy(graphSettings); + $scope.visitorGraph = angular.copy(graphSettings); + // Sales is in dollars, so update that label + $scope.salesGraph.yAxis.labels.format = '${value}'; + } - // TODO: Poll for data, commented out for now until we are sure we are reporting on - // good data, maybe we want to only poll for today too... + function startPolling() { + // Visit Stats + (function tick() { + $statistic.getVisits().then(function(data) { + $scope.visitStats = data; + visitTimeout = $timeout(tick, pollingRate); + }); + })(); + + // Sales Stats + (function tick() { + $statistic.getSales().then(function(data) { + $scope.salesStats = data; + salesTimeout = $timeout(tick, pollingRate); + }); + })(); + + // Visit Detail Stats + (function tick() { + $statistic.getVisitsDetail().then(function(dataSets) { + $scope.visitorGraph.series = dataSets; + visitsDetailTimeout = $timeout(tick, pollingRate); + }); + })(); + + // Sales Detail Stats + (function tick() { + $statistic.getSalesDetail().then(function(dataSets) { + $scope.salesGraph.series = dataSets; + salesDetailTimeout = $timeout(tick, pollingRate); + }); + })(); + } - // (function tick(){ - $statistic.getSalesDetail().then(function(dataSets){ - $scope.salesGraph.series = dataSets; - // console.log('SALES DATA', dataSets); - // $timeout(tick, pollingRate); - }); - // })(); + //TODO: delete this when images are attached to products + function getProductImage(image) { + return $designImageService.getFullImagePath("", image); + }; - // (function tick(){ - $statistic.getVisitsDetail().then(function(dataSets){ - $scope.visitorGraph.series = dataSets; - // console.log('VISITOR DATA', dataSets); - // $timeout(tick, pollingRate); - }); - // })(); + } +]); -}]); diff --git a/app/themes/styles/dashboard/dashboard-table.scss b/app/themes/styles/dashboard/dashboard-table.scss index 27d4350d..50bbd560 100644 --- a/app/themes/styles/dashboard/dashboard-table.scss +++ b/app/themes/styles/dashboard/dashboard-table.scss @@ -1,10 +1,15 @@ .table-dashboard { - color: $gray; -} -.table-dashboard th { - font-weight: normal; + color: $gray; + + th { + font-weight: normal; + } + tbody th { + white-space: nowrap; + } } + .table-dashboard__highlight { - font-size: 20px; - color: $brand-primary; -} \ No newline at end of file + font-size: 20px; + color: $brand-primary; +} diff --git a/app/themes/views/dashboard/welcome.html b/app/themes/views/dashboard/welcome.html index a6a00ea8..26133526 100644 --- a/app/themes/views/dashboard/welcome.html +++ b/app/themes/views/dashboard/welcome.html @@ -7,8 +7,12 @@

+ +
-

Sales

+
+

Sales

+
@@ -29,10 +33,15 @@

- + + + + + +
{{salesStats.orders.yesterday}}
Last 7 DaysLast 7 days {{salesStats.sales.week | currency}} {{salesStats.orders.week}}
Month to date{{salesStats.sales.monthToDate | currency}}{{salesStats.orders.monthToDate}}
@@ -41,9 +50,14 @@

+
+ +
-

Visits

+
+

Visits

+
@@ -64,19 +78,24 @@

- + + + + + +
{{visitStats.unique.yesterday}}
Last 7 DaysLast 7 days {{visitStats.total.week}} {{visitStats.unique.week}}
Month to date{{visitStats.total.monthToDate}}{{visitStats.unique.monthToDate}}
- +
- +