[IMPAC-736] Widget new customers

src/components/widgets-settings/hist-mode/hist-mode.directive.coffee

@@ -10,6 +10,9 @@ module.controller('SettingHistModeCtrl', ($scope, $translate, $timeout, ImpacWid
       $scope.accountingBehaviour
   }
 
+  $scope.isCommonTimeHidden = ->
+    $scope.endDate == 'not-displayed'
+
   $scope.toggleHistMode = (mode) ->
     return if (w.isHistoryMode && mode == 'history') || (!w.isHistoryMode && mode =='current')
     w.isHistoryMode = !w.isHistoryMode

src/components/widgets-settings/hist-mode/hist-mode.tmpl.html

@@ -1,5 +1,5 @@
 <div class="settings hist-mode-choser">
-  <div common-time-period-info context="forwardParams" />
+  <div common-time-period-info context="forwardParams" ng-hide="isCommonTimeHidden()"/>
 
   <div align="center" class="options">
     <a ng-click="toggleHistMode('current')" ng-class="!parentWidget.isHistoryMode ? 'active' : 'inactive'">{{currentLabel}} </a> |

src/components/widgets/sales-new-customers/sales-new-customers.directive.coffee

@@ -0,0 +1,61 @@
+module = angular.module('impac.components.widgets.sales-new-customers', [])
+module.controller('WidgetSalesNewCustomersCtrl', ($scope, $q, $filter, ChartFormatterSvc) ->
+
+  w = $scope.widget
+
+  # Define settings
+  # --------------------------------------
+  $scope.orgDeferred = $q.defer()
+  $scope.chartDeferred = $q.defer()
+  $scope.histModeDeferred = $q.defer()
+  settingsPromises = [
+    $scope.orgDeferred.promise
+    $scope.chartDeferred.promise
+    $scope.histModeDeferred.promise
+  ]
+
+  # Widget specific methods
+  # --------------------------------------
+  w.initContext = ->
+    $scope.isDataFound = w.content?
+
+
+  $scope.getColorByIndex = (index) ->
+    ChartFormatterSvc.getColor(index)
+
+  # Chart formating function
+  # --------------------------------------
+  $scope.drawTrigger = $q.defer()
+  w.format = ->
+    if $scope.isDataFound
+      dates = _.map w.content.small_chart.dates, (date) ->
+        $filter('date')(date, 'MMM yy')
+
+      lineOptions = {
+        scaleBeginAtZero: true,
+        showXLabels: false,
+        currency: 'hide'
+      }
+
+      lineData = [
+        {title: 'Merchant', labels: dates, values: w.content.small_chart.merchant_values},
+        {title: 'Competitive Set', labels: dates, values: w.content.small_chart.competitive_values},
+        {title: 'Industry', labels: dates, values: w.content.small_chart.industry_values}
+      ]
+
+      # init chartData after transletion chages
+      chartData = ChartFormatterSvc.lineChart(lineData,lineOptions)
+
+      # calls chart.draw()
+      $scope.drawTrigger.notify(chartData)
+
+  # Widget is ready: can trigger the "wait for settings to be ready"
+  # --------------------------------------
+  $scope.widgetDeferred.resolve(settingsPromises)
+)
+module.directive('widgetSalesNewCustomers', ->
+  return {
+    restrict: 'A',
+    controller: 'WidgetSalesNewCustomersCtrl'
+  }
+)

src/components/widgets/sales-new-customers/sales-new-customers.less

@@ -0,0 +1,11 @@
+.analytics .widget-item .content.sales-new-customers {
+  h6 {
+    text-align: center;
+    .font(11px, 300, @impac-widget-text-color);
+    margin-top: 2px;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+  }
+}

src/components/widgets/sales-new-customers/sales-new-customers.tmpl.html

@@ -0,0 +1,39 @@
+<div widget-sales-new-customers>
+  <!-- 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="">
+      <h6>Percentage of customers visiting for the first time</h6>
+      <div setting-hist-mode parent-widget="widget" deferred="::histModeDeferred" end-date="'not-displayed'"/>
+
+      <div ng-hide="widget.isHistoryMode">
+        <impac-figure-layout content="widget.content.figure"/>
+      </div>
+
+      <div ng-show="widget.isHistoryMode">
+        <div impac-chart draw-trigger="drawTrigger.promise" deferred="chartDeferred"></div>
+        <div class="legend">
+          <span ng-style="{ 'color': getColorByIndex(0) }">Merchant</span> -
+          <span ng-style="{ 'color': getColorByIndex(1) }">Competitive Set</span> -
+          <span ng-style="{ 'color': getColorByIndex(2) }">Industry</span>
+        </div>
+      </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>

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-new-customers'
   ]
 );
 angular.module('impac.components.widgets-settings',