fix(skin): add ability to change background styles

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() {

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);
 }]);

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);
 }]);

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();

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) {

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));
       }

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();
+      }
+    };
+
+  }
+
+})();

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 {