[IMPAC-740] Widget transaction by time of day

src/components/widgets/sales-transaction-by-time-of-day/sales-transaction-by-time-of-day.directive.coffee

@@ -0,0 +1,69 @@
+module = angular.module('impac.components.widgets.sales-transaction-by-time-of-day', [])
+module.controller('WidgetSalesTransactionByTimeOfDayCtrl', ($scope, $q, HighchartsFactory) ->
+
+  w = $scope.widget
+
+  # Define settings
+  # --------------------------------------
+  $scope.orgDeferred = $q.defer();
+  settingsPromises = [$scope.orgDeferred.promise]
+
+  # Unique identifier for the chart object in the DOM
+  $scope.chartId = ->
+    "averageTransactionTimeChart-#{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: ->
+              "#{this.value} %"
+        xAxis: angular.merge([w.content.chart.xAxis[0]], [xAxisLabels])
+        yAxis: angular.merge([w.content.chart.yAxis[0]], [yAxisLabels])
+        rangeSelector:
+          selected: 3
+        tooltip:
+          shared: false
+          backgroundColor: '#FBF7E6'
+          formatter: ->
+            date = moment.utc(this.x).format('MMMM YYYY')
+            name = this.series.name
+            "<strong>#{date}</strong><br>#{name}: #{this.y}%"
+
+    $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('widgetSalesTransactionByTimeOfDay', ->
+  return {
+    restrict: 'A',
+    controller: 'WidgetSalesTransactionByTimeOfDayCtrl'
+  }
+)

src/components/widgets/sales-transaction-by-time-of-day/sales-transaction-by-time-of-day.less

@@ -0,0 +1,7 @@
+.analytics .widget-item .content.sales-transaction-by-time-of-day {
+  .tall-widget();
+
+  .transaction-chart {
+    height: ~"calc(@{impac-big-widget-size} - 50px)";
+  }
+}

src/components/widgets/sales-transaction-by-time-of-day/sales-transaction-by-time-of-day.tmpl.html

@@ -0,0 +1,25 @@
+<div widget-sales-transaction-by-time-of-day>
+  <!-- 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="transaction-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>

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-transaction-by-time-of-day'
   ]
 );
 angular.module('impac.components.widgets-settings',