diff --git a/dist/images/cash-flow.png b/dist/images/cash-flow.png new file mode 100644 index 00000000..97942916 Binary files /dev/null and b/dist/images/cash-flow.png differ diff --git a/dist/images/payables.png b/dist/images/payables.png new file mode 100644 index 00000000..07a25148 Binary files /dev/null and b/dist/images/payables.png differ diff --git a/dist/images/plot-line-icon.svg b/dist/images/plot-line-icon.svg new file mode 100644 index 00000000..4b1106d4 --- /dev/null +++ b/dist/images/plot-line-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/dist/images/projected-cash.png b/dist/images/projected-cash.png new file mode 100644 index 00000000..a83fbb36 Binary files /dev/null and b/dist/images/projected-cash.png differ diff --git a/dist/images/receivables.png b/dist/images/receivables.png new file mode 100644 index 00000000..e7e823d4 Binary files /dev/null and b/dist/images/receivables.png differ diff --git a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee b/src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee index 93a3176a..5f9fd1e9 100644 --- a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.directive.coffee +++ b/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) diff --git a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.less b/src/components/widgets/accounts-cash-balance/accounts-cash-balance.less index 74f7288c..ee14c60a 100644 --- a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.less +++ b/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; diff --git a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html b/src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html index 93c5556b..0c30b0b0 100644 --- a/src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html +++ b/src/components/widgets/accounts-cash-balance/accounts-cash-balance.tmpl.html @@ -25,7 +25,10 @@

Widget settings

- + +
+ +
 
diff --git a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee b/src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee index 7358a927..cd7acd81 100644 --- a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.directive.coffee +++ b/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 = "
" + return img + ' ' + name + }) + $scope.chart.render(w.content.chart, options) $scope.chartDeferred.notify($scope.chart.hc) $scope.chartId = -> diff --git a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.less b/src/components/widgets/accounts-cash-projection/accounts-cash-projection.less index 01dca88c..e2db2904 100644 --- a/src/components/widgets/accounts-cash-projection/accounts-cash-projection.less +++ b/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 { diff --git a/src/images/area-icon.svg b/src/images/area-icon.svg new file mode 100644 index 00000000..030687a5 --- /dev/null +++ b/src/images/area-icon.svg @@ -0,0 +1,18 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + diff --git a/src/images/cash-flow.png b/src/images/cash-flow.png new file mode 100644 index 00000000..210b30c2 Binary files /dev/null and b/src/images/cash-flow.png differ diff --git a/src/images/payables.png b/src/images/payables.png new file mode 100644 index 00000000..9661bee7 Binary files /dev/null and b/src/images/payables.png differ diff --git a/src/images/plot-line-icon.svg b/src/images/plot-line-icon.svg new file mode 100644 index 00000000..78413d33 --- /dev/null +++ b/src/images/plot-line-icon.svg @@ -0,0 +1,24 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/src/images/projected-cash.png b/src/images/projected-cash.png new file mode 100644 index 00000000..562339ab Binary files /dev/null and b/src/images/projected-cash.png differ diff --git a/src/images/receivables.png b/src/images/receivables.png new file mode 100644 index 00000000..8cd8ae8d Binary files /dev/null and b/src/images/receivables.png differ diff --git a/src/services/assets/assets.svc.coffee b/src/services/assets/assets.svc.coffee index 84bd7df1..1df49a01 100644 --- a/src/services/assets/assets.svc.coffee +++ b/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