diff --git a/src/app/pages/charts/widgets/areaChart/areaChart.js b/src/app/pages/charts/widgets/areaChart/areaChart.js index 17f91ba..7c2b2d8 100644 --- a/src/app/pages/charts/widgets/areaChart/areaChart.js +++ b/src/app/pages/charts/widgets/areaChart/areaChart.js @@ -1,6 +1,6 @@ 'use strict'; -blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) { +blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { var id = $element[0].getAttribute('id'); var areaChart = AmCharts.makeChart(id, { type: 'serial', @@ -125,6 +125,8 @@ blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', func pathToImages: 'img/' }); + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart); + areaChart.addListener('dataUpdated', zoomAreaChart); function zoomAreaChart() { diff --git a/src/app/pages/charts/widgets/barChart/barChart.js b/src/app/pages/charts/widgets/barChart/barChart.js index fc7a57f..5a4306e 100644 --- a/src/app/pages/charts/widgets/barChart/barChart.js +++ b/src/app/pages/charts/widgets/barChart/barChart.js @@ -1,6 +1,6 @@ 'use strict'; -blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) { +blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { var id = $element[0].getAttribute('id'); var barChart = AmCharts.makeChart(id, { type: 'serial', @@ -72,4 +72,6 @@ blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', funct creditsPosition: 'top-right', pathToImages: 'img/' }); + + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart); }]); \ No newline at end of file diff --git a/src/app/pages/charts/widgets/funnelChart/funnelChart.js b/src/app/pages/charts/widgets/funnelChart/funnelChart.js index 72ce893..1a12d99 100644 --- a/src/app/pages/charts/widgets/funnelChart/funnelChart.js +++ b/src/app/pages/charts/widgets/funnelChart/funnelChart.js @@ -1,6 +1,6 @@ 'use strict'; -blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) { +blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { var id = $element[0].getAttribute('id'); var funnelChart = AmCharts.makeChart(id, { type: 'funnel', @@ -53,4 +53,6 @@ blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', fu creditsPosition: 'bottom-left', pathToImages: 'img/' }); + + tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart); }]); \ No newline at end of file diff --git a/src/app/pages/charts/widgets/lineChart/lineChart.js b/src/app/pages/charts/widgets/lineChart/lineChart.js index 09a9b22..817f3c3 100644 --- a/src/app/pages/charts/widgets/lineChart/lineChart.js +++ b/src/app/pages/charts/widgets/lineChart/lineChart.js @@ -1,6 +1,6 @@ 'use strict'; -blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) { +blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { var id = $element[0].getAttribute('id'); var lineChart = AmCharts.makeChart(id, { type: 'serial', @@ -131,6 +131,8 @@ blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', func pathToImages: 'img/' }); + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart); + lineChart.addListener('rendered', zoomChart); if (lineChart.zoomChart) { lineChart.zoomChart(); diff --git a/src/app/pages/charts/widgets/pieChart/pieChart.js b/src/app/pages/charts/widgets/pieChart/pieChart.js index 2a3f90c..0aa0f3d 100644 --- a/src/app/pages/charts/widgets/pieChart/pieChart.js +++ b/src/app/pages/charts/widgets/pieChart/pieChart.js @@ -1,6 +1,6 @@ 'use strict'; -blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', function($scope, $timeout, $element) { +blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { var id = $element[0].getAttribute('id'); var pieChart = AmCharts.makeChart(id, { type: 'pie', @@ -116,6 +116,8 @@ blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', funct } }); + tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart); + pieChart.addListener('init', handleInit); pieChart.addListener('rollOverSlice', function (e) { diff --git a/src/app/pages/dashboard/widgets/amChart/amChart.js b/src/app/pages/dashboard/widgets/amChart/amChart.js index c42030b..97a1dc4 100644 --- a/src/app/pages/dashboard/widgets/amChart/amChart.js +++ b/src/app/pages/dashboard/widgets/amChart/amChart.js @@ -3,7 +3,7 @@ blurAdminApp.directive('amChart', function () { return { restrict: 'E', - controller: ['$scope', 'tplSkinManager', function ($scope, tplSkinManager) { + controller: ['$scope', 'tplSkinManager', 'tplSkinChartWatcherHelper', function ($scope, tplSkinManager, tplSkinChartWatcherHelper) { var chartData = [ { date: new Date(2012, 11), value: 0, value0: 0 }, { date: new Date(2013, 0), value: 15000, value0: 19000}, @@ -39,15 +39,6 @@ blurAdminApp.directive('amChart', function () { var chartColorProfile = tplSkinManager.getChartColorProfile(); - $scope.$on('tplSkinChanged', function() { - chartColorProfile = tplSkinManager.getChartColorProfile(); - chart.categoryAxis.color = chartColorProfile.fontColors; - chart.categoryAxis.axisColor = chartColorProfile.axisColors; - chart.valueAxes[0].color = chartColorProfile.fontColors; - chart.valueAxes[0].axisColor = chartColorProfile.axisColors; - chart.drawChart(); - }); - var chart = AmCharts.makeChart('amchart', { type: 'serial', theme: 'blur', @@ -117,6 +108,8 @@ blurAdminApp.directive('amChart', function () { pathToImages: 'img/' }); + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, chart); + function zoomChart() { chart.zoomToDates(new Date(2013, 3), new Date(2014, 0)); } diff --git a/src/app/tplSkin/tplSkinChartWatcherHelper.service.js b/src/app/tplSkin/tplSkinChartWatcherHelper.service.js new file mode 100644 index 0000000..1c9e679 --- /dev/null +++ b/src/app/tplSkin/tplSkinChartWatcherHelper.service.js @@ -0,0 +1,67 @@ +/** + * @author v.lugovsky + * created on 27.11.2015 + */ +(function() { + 'use strict'; + + blurAdminApp + .service('tplSkinChartWatcherHelper', tplSkinChartWatcherHelper); + + tplSkinChartWatcherHelper.$inject = ['tplSkinManager']; + function tplSkinChartWatcherHelper(tplSkinManager) { + + this.watchAxisChartStyleChanges = function(scope, chart) { + _doUpdateStyles(); + scope.$on('tplSkinChanged', _doUpdateStyles); + + function _doUpdateStyles() { + var chartColorProfile = tplSkinManager.getChartColorProfile(); + chart.color = chartColorProfile.fontColors; + chart.categoryAxis.color = chartColorProfile.fontColors; + chart.categoryAxis.axisColor = chartColorProfile.axisColors; + chart.valueAxes[0].color = chartColorProfile.fontColors; + chart.valueAxes[0].axisColor = chartColorProfile.axisColors; + chart.validateNow(); + } + }; + + this.watchChartColorChanges = function(scope, chart) { + _doUpdateStyles(); + scope.$on('tplSkinChanged', _doUpdateStyles); + + function _doUpdateStyles() { + var chartColorProfile = tplSkinManager.getChartColorProfile(); + chart.color = chartColorProfile.fontColors; + chart.validateNow(); + } + }; + + this.watchDonutChanges = function(scope, chart) { + _doUpdateStyles(); + scope.$on('tplSkinChanged', _doUpdateStyles); + + function _doUpdateStyles() { + var chartColorProfile = tplSkinManager.getChartColorProfile(); + chart.color = chartColorProfile.fontColors; + chart.legend.color = chartColorProfile.fontColors; + chart.labelTickColor = chartColorProfile.axisColors; + chart.validateNow(); + } + }; + + this.watchFunnelChanges = function(scope, chart) { + _doUpdateStyles(); + scope.$on('tplSkinChanged', _doUpdateStyles); + + function _doUpdateStyles() { + var chartColorProfile = tplSkinManager.getChartColorProfile(); + chart.color = chartColorProfile.fontColors; + chart.labelTickColor = chartColorProfile.axisColors; + chart.validateNow(); + } + }; + + } + +})(); diff --git a/src/assets/css/skins/skins.scss b/src/assets/css/skins/skins.scss index 5cca13f..b312c49 100644 --- a/src/assets/css/skins/skins.scss +++ b/src/assets/css/skins/skins.scss @@ -1,7 +1,7 @@ @mixin overrideColors($color) { color: $color; - p,.pie-charts,.panel-heading>.dropdown .dropdown-toggle, .panel-title, .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a,.traffic-text span { + p,.pie-charts,.panel-heading>.dropdown .dropdown-toggle, .panel-title, .panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a,.traffic-text span, .form-group label { color: $color; } .traffic-text {