From 5ac4bf31c5dce75886f43c9e4ecd808c975fedc8 Mon Sep 17 00:00:00 2001
From: Emmanuel Darnis <emmanuel.darnis@maestrano.com>
Date: Sat, 3 Mar 2018 12:09:27 +0000
Subject: [PATCH] [IMPAC-698] Add widget average spend per customer

---
 ...verage-spend-per-customer.directive.coffee | 62 +++++++++++++++++++
 .../sales-average-spend-per-customer.less     | 15 +++++
 ...sales-average-spend-per-customer.tmpl.html | 25 ++++++++
 src/impac-angular.module.js                   |  3 +-
 4 files changed, 104 insertions(+), 1 deletion(-)
 create mode 100644 src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.directive.coffee
 create mode 100644 src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.less
 create mode 100644 src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.tmpl.html

diff --git a/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.directive.coffee b/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.directive.coffee
new file mode 100644
index 00000000..e760258b
--- /dev/null
+++ b/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.directive.coffee
@@ -0,0 +1,62 @@
+module = angular.module('impac.components.widgets.sales-average-spend-per-customer', [])
+module.controller('WidgetSalesAverageSpendPerCustomerCtrl', ($scope, $q, $filter, HighchartsFactory) ->
+
+  w = $scope.widget
+  $scope.isChartDisplayed = true
+
+  # Define settings
+  # --------------------------------------
+  $scope.orgDeferred = $q.defer();
+  settingsPromises = [$scope.orgDeferred.promise]
+
+  # Unique identifier for the chart object in the DOM
+  $scope.chartId = ->
+    "averageSpendPerCustomerChart-#{w.id}"
+
+  # # == Sub-Components =============================================================
+  $scope.chartDeferred = $q.defer()
+
+  # Widget specific methods
+  # --------------------------------------
+  w.initContext = ->
+    $scope.isDataFound = w.content?
+
+  w.format = ->
+    # Instantiate and render chart
+    options =
+      chartType: 'line'
+      chartOnClickCallbacks: []
+      currency: w.metadata.currency
+      showToday: true
+      showLegend: true
+
+    $scope.chart = new HighchartsFactory($scope.chartId(), w.content.chart, options)
+
+    $scope.chart.formatters = ->
+        currency = @options.currency
+        xAxisLabels =
+          labels:
+            formatter: ->
+              moment.utc(this.value).format('MMM YYYY')
+        yAxisLabels =
+          labels:
+            formatter: ->
+              $filter('mnoCurrency')(this.value, currency, false)
+        xAxis: angular.merge([w.content.chart.xAxis[0]], [xAxisLabels])
+        yAxis: angular.merge([w.content.chart.yAxis[0]], [yAxisLabels])
+        rangeSelector:
+          selected: 5
+
+    $scope.chart.render(w.content.chart, options)
+
+    # Notifies parent element that the chart is ready to be displayed
+    $scope.chartDeferred.notify($scope.chart)
+
+  $scope.widgetDeferred.resolve(settingsPromises)
+)
+module.directive('widgetSalesAverageSpendPerCustomer', ->
+  return {
+    restrict: 'A',
+    controller: 'WidgetSalesAverageSpendPerCustomerCtrl'
+  }
+)
diff --git a/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.less b/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.less
new file mode 100644
index 00000000..4e7b8e6d
--- /dev/null
+++ b/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.less
@@ -0,0 +1,15 @@
+.analytics .widget-item .content.sales-average-spend-per-customer {
+  .tall-widget();
+
+  .average-spend-per-customer-chart {
+    height: ~"calc(@{impac-big-widget-size} - 50px)";
+  }
+
+  .highcharts-y-primary {
+    fill: 'rgb(68, 208, 218)'
+  }
+
+  .highcharts-y-secondary {
+    fill: 'rgb(208, 68, 218)'
+  }
+}
diff --git a/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.tmpl.html b/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.tmpl.html
new file mode 100644
index 00000000..6f6b781f
--- /dev/null
+++ b/src/components/widgets/sales-average-spend-per-customer/sales-average-spend-per-customer.tmpl.html
@@ -0,0 +1,25 @@
+<div widget-sales-average-spend-per-customer>
+  <!-- Settings Panel -->
+  <div ng-show="widget.isEditMode" class="edit">
+    <h4>Widget settings</h4>
+
+    <div setting-organizations parent-widget="widget" class="part" deferred="::orgDeferred" />
+
+    <!-- Buttons displayed on the lower  -->
+    <div class="bottom-buttons" align="right">
+      <button class="btn btn-default" ng-click="initSettings()">Cancel</button>
+      <button class="btn btn-warning" ng-click="updateSettings()">Save</button>
+    </div>
+  </div>
+
+  <!-- Content Panel -->
+  <div ng-hide="widget.isEditMode">
+    <!-- Data found -->
+    <div ng-show="(isDataFound==true)" class="">
+      <div id="{{chartId()}}" class="average-spend-per-customer-chart"></div>
+    </div>
+
+    <!-- No data found -->
+    <div ng-if="(isDataFound==false)" common-data-not-found on-display-alerts="onDisplayAlerts()" endpoint="::widget.category" width="::widget.width" />
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/impac-angular.module.js b/src/impac-angular.module.js
index 6347dbe6..4e934a4b 100644
--- a/src/impac-angular.module.js
+++ b/src/impac-angular.module.js
@@ -92,7 +92,8 @@ angular.module('impac.components.widgets',
     'impac.components.widgets.sales-summary',
     'impac.components.widgets.sales-top-opportunities',
     'impac.components.widgets.sales-top-customers',
-    'impac.components.widgets.sales-new-vs-existing-customers'
+    'impac.components.widgets.sales-new-vs-existing-customers',
+    'impac.components.widgets.sales-average-spend-per-customer'
   ]
 );
 angular.module('impac.components.widgets-settings',