[IMPAC-613] Add legend icons to cashflow widgets

src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee

@@ -1,5 +1,5 @@
 module = angular.module('impac.components.widgets.accounts-cash-balance', [])
-module.controller('WidgetAccountsCashBalanceCtrl', ($scope, $q, $timeout, $filter, ImpacTheming, HighchartsFactory) ->
+module.controller('WidgetAccountsCashBalanceCtrl', ($scope, $q, $timeout, $filter, ImpacTheming, ImpacAssets, HighchartsFactory) ->
 
   w = $scope.widget
 
@@ -21,10 +21,8 @@ module.controller('WidgetAccountsCashBalanceCtrl', ($scope, $q, $timeout, $filte
 
     # Custom chart legend
     $scope.groupedTable = w.content.grouped_table
-
     # TODO: theming config for positive/negative hex codes (or move to API)
     # chartColors = ImpacTheming.get().chartColors
-
     # Set chart accounts series colors by account bias ('positive' / 'negative')
     setSeriesColors(w.content.chart.series, { positive: '#3FC4FF', negative: '#e50228'})
 
@@ -34,11 +32,15 @@ module.controller('WidgetAccountsCashBalanceCtrl', ($scope, $q, $timeout, $filte
     visibility = if serie.visible then false else true
     serie.setVisible(visibility)
 
-  $scope.getLegendItemIcon = (account)->
+  $scope.getLegendItemCheckBox = (account)->
     serie = $scope.chart? && $scope.chart.hc? && getSerieByAccount($scope.chart.hc.series, account)
     return 'fa-check-square-o' unless serie
     if serie.visible then 'fa-check-square-o' else 'fa-square-o'
 
+  $scope.getLegendItemIcon = (account)->
+    serie = $scope.chart? && $scope.chart.hc? && getSerieByAccount($scope.chart.hc.series, account)
+    if serie.type == 'area' then ImpacAssets.get('areaLegendIcon') else ImpacAssets.get('plotLineLegendIcon')
+
   $scope.getLegendItemColor = (account)->
     serie = $scope.chart? && $scope.chart.hc? && getSerieByAccount($scope.chart.hc.series, account)
     return '#000' unless serie
@@ -74,7 +76,6 @@ module.controller('WidgetAccountsCashBalanceCtrl', ($scope, $q, $timeout, $filte
       $scope.chart ||= new HighchartsFactory($scope.chartId(), w.content.chart, options)
       $scope.chart.render(w.content.chart, options)
 
-
   # Widget is ready: can trigger the "wait for settings to be ready"
   # --------------------------------------
   $scope.widgetDeferred.resolve(settingsPromises)

src/components/widgets/accounts-cash-balance/accounts-cash-balance.less

@@ -37,6 +37,11 @@
     }
   }
 
+  .legend-item-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   .right-panel {
     display: flex;
     flex-direction: column;

src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html

@@ -25,7 +25,10 @@ <h4>Widget settings</h4>
           <div class="header" ng-repeat="header in groupedTable.headers">
             <h4 ng-bind="header | titleize"></h4>
             <div class="group-item" ng-repeat="item in groupedTable.groups[$index]" ng-click="legendItemOnClick(item)">
-              <i ng-style="{'color': getLegendItemColor(item)}" class="fa {{getLegendItemIcon(item)}}" aria-hidden="true"></i>
+              <i ng-style="{'color': getLegendItemColor(item)}" class="fa" ng-class="getLegendItemCheckBox(item)" aria-hidden="true"></i>
+              <div>
+                <svg ng-include="getLegendItemIcon(item)" class="legend-item-icon" ng-style="{'fill': getLegendItemColor(item)}"></svg>
+              </div>&nbsp;
               <span ng-bind="item.name"></span>
             </div>
           </div>

src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee

@@ -1,5 +1,5 @@
 module = angular.module('impac.components.widgets.accounts-cash-projection', [])
-module.controller('WidgetAccountsCashProjectionCtrl', ($scope, $q, $filter, ImpacKpisSvc, HighchartsFactory) ->
+module.controller('WidgetAccountsCashProjectionCtrl', ($scope, $q, $filter, ImpacKpisSvc, ImpacAssets, HighchartsFactory) ->
 
   w = $scope.widget
 
@@ -64,8 +64,20 @@ module.controller('WidgetAccountsCashProjectionCtrl', ($scope, $q, $filter, Impa
       thresholds: getThresholds()
 
     $scope.chart ||= new HighchartsFactory($scope.chartId(), w.content.chart, options)
-    $scope.chart.render(w.content.chart, options)
+    # Extend default chart formatters to add custom legend img icon
+    defaultFormattersConfig = $scope.chart.formatters()
+    $scope.chart.formatters = ->
+      angular.merge(defaultFormattersConfig, {
+        legend:
+          useHTML: true
+          labelFormatter: ->
+            name = this.name
+            imgSrc = ImpacAssets.get(_.camelCase(name + 'LegendIcon'))
+            img = "<img src='#{imgSrc}'><br>"
+            return img + '	' + name
+      })
 
+    $scope.chart.render(w.content.chart, options)
     $scope.chartDeferred.notify($scope.chart.hc)
 
   $scope.chartId = ->

src/components/widgets/accounts-cash-projection/accounts-cash-projection.less

@@ -1,8 +1,25 @@
 .analytics .widget-item .content.accounts-cash-projection {
   .tall-widget();
 
-  .cash-projection-chart { 
-    height: ~"calc(@{impac-big-widget-size} - 50px)"; 
+  .cash-projection-chart {
+    height: ~"calc(@{impac-big-widget-size} - 50px)";
+  }
+
+  .highcharts-legend-item {
+
+    rect.highcharts-point {
+      display: none;
+    }
+
+    span {
+      width: 110px;
+      text-align: center;
+      img {
+        text-align: center;
+        width: 55px;
+        height: 25px;
+      }
+    }
   }
 
   .offset-box {

src/services/assets/assets.svc.coffee

@@ -15,6 +15,12 @@ angular
       impacTitleLogo: ':default/impac-title-logo.png'
       impacDashboardBackground: ':default/impac-dashboard-background.png'
       currencyConversionsIcon: ':default/currency-conversions.png'
+      cashFlowLegendIcon: ':default/cash-flow.png'
+      payablesLegendIcon: ':default/payables.png'
+      projectedCashLegendIcon: ':default/projected-cash.png'
+      receivablesLegendIcon: ':default/receivables.png'
+      plotLineLegendIcon: ':default/plot-line-icon.svg'
+      areaLegendIcon: ':default/area-icon.svg'
 
     #=======================================
     # Public methods available in config