feat(chart): change chart colors when skin is changed

src/app/pages/dashboard/widgets/amChart/amChart.js

@@ -3,7 +3,7 @@
 blurAdminApp.directive('amChart', function () {
   return {
     restrict: 'E',
-    controller: ['$scope', function ($scope) {
+    controller: ['$scope', 'tplSkinManager', function ($scope, tplSkinManager) {
       var chartData = [
         { date: new Date(2012, 11), value: 0, value0: 0 },
         { date: new Date(2013, 0), value: 15000, value0: 19000},
@@ -37,16 +37,36 @@ blurAdminApp.directive('amChart', function () {
         { date: new Date(2015, 1), value: 49800, value0: 13000}
       ];
 
+      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',
         marginTop: 15,
         marginRight: 15,
         dataProvider: chartData,
+        categoryField: 'date',
+        categoryAxis: {
+          parseDates: true,
+          gridAlpha: 0,
+          color: chartColorProfile.fontColors,
+          axisColor: chartColorProfile.axisColors
+        },
         valueAxes: [
           {
             minVerticalGap: 50,
-            gridAlpha: 0
+            gridAlpha: 0,
+            color: chartColorProfile.fontColors,
+            axisColor: chartColorProfile.axisColors
           }
         ],
         graphs: [
@@ -75,22 +95,6 @@ blurAdminApp.directive('amChart', function () {
             fillColorsField: 'lineColor'
           }
         ],
-/*        chartScrollbar: {
-          graph: 'g1',
-          gridAlpha: 0,
-          color: '#FF0000',
-          scrollbarHeight: 55,
-          backgroundAlpha: 0,
-          selectedBackgroundAlpha: 0.1,
-          selectedBackgroundColor: '#ffffff',
-          graphFillAlpha: 0,
-          autoGridCount: true,
-          selectedGraphFillAlpha: 0,
-          graphLineAlpha: 0.2,
-          graphLineColor: '#c2c2c2',
-          selectedGraphLineColor: '#888888',
-          selectedGraphLineAlpha: 1
-        },*/
         chartCursor: {
           categoryBalloonDateFormat: 'MM YYYY',
           categoryBalloonColor: '#4285F4',
@@ -101,11 +105,6 @@ blurAdminApp.directive('amChart', function () {
           valueLineAlpha: 0.5
         },
         dataDateFormat: 'MM YYYY',
-        categoryField: 'date',
-        categoryAxis: {
-          parseDates: true,
-          gridAlpha: 0
-        },
         export: {
           enabled: true
         },

src/app/tplSkin/tplSkin.constants.js

@@ -11,42 +11,61 @@
     {
       name: 'Default',
       bodyClass: '',
-      thumbnailUrl: 'img/01_default.jpg'
+      thumbnailUrl: 'img/01_default.jpg',
+      chartColorProfile: 'whitePanel'
     },
     {
       name: 'Transparent',
       bodyClass: SKIN_CLASS_PREFIX + '-transparent',
-      thumbnailUrl: 'img/02_transparent.jpg'
+      thumbnailUrl: 'img/02_transparent.jpg',
+      chartColorProfile: 'transparent'
     },
     {
       name: 'Blue',
       bodyClass: SKIN_CLASS_PREFIX + '-blue',
-      thumbnailUrl: 'img/03_blue.jpg'
+      thumbnailUrl: 'img/03_blue.jpg',
+      chartColorProfile: 'whitePanel'
     },
     {
       name: 'Peachy',
       bodyClass: SKIN_CLASS_PREFIX + '-peachy',
-      thumbnailUrl: 'img/04_peachy.jpg'
+      thumbnailUrl: 'img/04_peachy.jpg',
+      chartColorProfile: 'whitePanel'
     },
     {
       name: 'Material',
       bodyClass: SKIN_CLASS_PREFIX + '-material',
-      thumbnailUrl: 'img/05_material.jpg'
+      thumbnailUrl: 'img/05_material.jpg',
+      chartColorProfile: 'whitePanel'
     },
     {
       name: 'Transblue',
       bodyClass: SKIN_CLASS_PREFIX + '-transblue',
-      thumbnailUrl: 'img/06_transblue.jpg'
+      thumbnailUrl: 'img/06_transblue.jpg',
+      chartColorProfile: 'transparent'
     },
     {
       name: 'Grey',
       bodyClass: SKIN_CLASS_PREFIX + '-grey',
-      thumbnailUrl: 'img/07_grey.jpg'
+      thumbnailUrl: 'img/07_grey.jpg',
+      chartColorProfile: 'whitePanel'
     }
   ];
 
+  var SKIN_CHART_COLORS = {
+    whitePanel: {
+      fontColors: undefined,
+      axisColors: '#000000'
+    },
+    transparent: {
+      fontColors: '#FFFFFF',
+      axisColors: '#FFFFFF'
+    }
+  };
+
   blurAdminApp
       .constant('tplSkinClassPrefix', SKIN_CLASS_PREFIX)
-      .constant('tplSkinEnum', ADMIN_STYLES);
+      .constant('tplSkinEnum', ADMIN_STYLES)
+      .constant('tplSkinChartColors', SKIN_CHART_COLORS);
 
 })();

src/app/tplSkin/tplSkinManager.service.js

@@ -8,19 +8,24 @@
   blurAdminApp
       .service('tplSkinManager', tplSkinManager);
 
-  tplSkinManager.$inject = ['$document', 'tplSkinClassPrefix'];
+  tplSkinManager.$inject = ['$rootScope', '$document', 'tplSkinClassPrefix', 'tplSkinChartColors', 'tplSkinEnum'];
-  function tplSkinManager($document, tplSkinClassPrefix) {
+  function tplSkinManager($rootScope, $document, tplSkinClassPrefix, tplSkinChartColors, tplSkinEnum) {
 
-    var activeSkin = null;
+    var activeSkin = tplSkinEnum[0];
 
     this.setActiveSkin = function(skin) {
       activeSkin = skin;
       if (activeSkin) {
         _removeSkinBodyClassIfPresent();
         _addSkinBodyClass(activeSkin);
+        $rootScope.$broadcast('tplSkinChanged');
       }
     };
 
+    this.getChartColorProfile = function() {
+      return tplSkinChartColors[activeSkin.chartColorProfile];
+    };
+
     function _removeSkinBodyClassIfPresent() {
       var body = $document[0].body;
       var $body = angular.element(body);