[IMPAC-613] Add legend icons to cashflow widgets

[rheasunshine]

@xaun @cesar-tonnoir

[xaun]

FYI @cesar-tonnoir, @rheasunshine is working on some changes before I review this. Thanks

[rheasunshine]

Hey @xaun, ready for review

[xaun]

Looks good @rheasunshine, just a couple of changes 👍

[xaun]

Use ng-style, I've learnt recently that binding expressions into the style does not work on some versions of IE. So now I try use all the angular directives for this sort of thing.

ng-style="{ 'fill': getLegendItemColor(item) }"

Also while you're here, can you change the class on the line above to use ng-class, as the getLegendItemCheckBox method returns a string of class names, we can apply it directly.

class="fa" ng-class="getLegendItemCheckBox(item)"

[rheasunshine]

Done

[xaun]

What's the reason the cash-projection widget icons cannot be svg agian?

[rheasunshine]

@cesar-tonnoir I think we were going to wait for Tristan's review. I can make them svg today so that the decision can be made. There is also the question of whether to use a custom legend for the cash-projection widget like the cash-balance widget.

[xaun]

True @rheasunshine, ok no worries sounds good.

[xaun]

The idea of the templates object here is just to reduce the need to define the boilerplate for each chart type, e.g 'line', 'column' etc.

The configuration you've done here is defining a formatter, so therefore should be apart of the formatters instance method of the Chart class.

But, as this configuration is specific to the cash-projection widget, we can override the formatters instance method from the cash-projection component.

accounts-cash-projection.directive.coffee:

w.format = ->
    ...
    $scope.chart ||= new HighchartsFactory($scope.chartId(), 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
            img = "<img src='dist/images/#{name.replace(' ', '-').toLowerCase()}.png' width = '55px' height = '25px'><br>"
            console.log 'formatter! ', options
            return img + '  ' + name
      })

[rheasunshine]

This is a lot better. Thanks! Fixed :)

[xaun]

Not sure if you need the plotOptions here? I have tested and it seems to work the same without it, and I can't find the API for it here: http://api.highcharts.com/highcharts/legend

[rheasunshine]

Removed

[xaun]

LGTM @rheasunshine, just remove the ImpacAssets DI I have flagged. @cesar-tonnoir are continuing to merge owner dashboard into 1.5 or is it 1.6 now?

[xaun]

ImpacAssets D.I can be removed