load theme for amcharts through the amchart component

src/app/pages/dashboard/lineChart/lineChart.service.ts

@@ -10,7 +10,7 @@ export class LineChartService {
     marginTop: 15,
     marginRight: 15,
     responsive: {
-      "enabled": true
+      'enabled': true
     },
     dataProvider: [
       { date: new Date(2012, 11), value: 0, value0: 0 },

src/app/theme/components/baAmChart/baAmChart.component.ts

@@ -2,12 +2,14 @@ import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} f
 
 import './baAmChart.loader.ts';
 import {DOM} from "angular2/src/platform/dom/dom_adapter";
+import {BaAmChartThemeService} from './baAmChartTheme.service';
 
 @Component({
   selector: 'ba-am-chart',
   styles: [require('./baAmChart.scss')],
   template: require('./baAmChart.html'),
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  providers: [BaAmChartThemeService],
 })
 export class BaAmChart {
 
@@ -15,7 +17,11 @@ export class BaAmChart {
   @Input() baAmChartClass:string;
   @Output() onChartReady = new EventEmitter<any>();
 
-  constructor (private _elementRef:ElementRef) {
+  constructor (private _elementRef:ElementRef, private _baAmChartThemeService:BaAmChartThemeService) {
+  }
+
+  ngOnInit() {
+    AmCharts.themes.blur = this._baAmChartThemeService.getTheme();
   }
 
   ngAfterViewInit() {

src/app/theme/components/baAmChart/baAmChartTheme.service.ts

@@ -0,0 +1,210 @@
+import {Injectable} from 'angular2/core';
+
+import {layoutColors} from '../../../theme/theme.constants';
+
+
+@Injectable()
+export class BaAmChartThemeService {
+
+  theme = {
+
+    themeName: "blur",
+
+    AmChart: {
+      color: layoutColors.defaultText,
+      backgroundColor: "#FFFFFF"
+    },
+
+    AmCoordinateChart: {
+      colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
+    },
+
+    AmStockChart: {
+      colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg]
+    },
+
+    AmSlicedChart: {
+      colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg],
+      labelTickColor: "#FFFFFF",
+      labelTickAlpha: 0.3
+    },
+
+    AmRectangularChart: {
+      zoomOutButtonColor: '#FFFFFF',
+      zoomOutButtonRollOverAlpha: 0.15,
+      zoomOutButtonImage: "lens.png"
+    },
+
+    AxisBase: {
+      axisColor: "#FFFFFF",
+      axisAlpha: 0.3,
+      gridAlpha: 0.1,
+      gridColor: "#FFFFFF"
+    },
+
+    ChartScrollbar: {
+      backgroundColor: "#FFFFFF",
+      backgroundAlpha: 0.12,
+      graphFillAlpha: 0.5,
+      graphLineAlpha: 0,
+      selectedBackgroundColor: "#FFFFFF",
+      selectedBackgroundAlpha: 0.4,
+      gridAlpha: 0.15
+    },
+
+    ChartCursor: {
+      cursorColor: layoutColors.primary,
+      color: "#FFFFFF",
+      cursorAlpha: 0.5
+    },
+
+    AmLegend: {
+      color: "#FFFFFF"
+    },
+
+    AmGraph: {
+      lineAlpha: 0.9
+    },
+    GaugeArrow: {
+      color: "#FFFFFF",
+      alpha: 0.8,
+      nailAlpha: 0,
+      innerRadius: "40%",
+      nailRadius: 15,
+      startWidth: 15,
+      borderAlpha: 0.8,
+      nailBorderAlpha: 0
+    },
+
+    GaugeAxis: {
+      tickColor: "#FFFFFF",
+      tickAlpha: 1,
+      tickLength: 15,
+      minorTickLength: 8,
+      axisThickness: 3,
+      axisColor: '#FFFFFF',
+      axisAlpha: 1,
+      bandAlpha: 0.8
+    },
+
+    TrendLine: {
+      lineColor: '#FFFFFF',
+      lineAlpha: 0.8
+    },
+
+    // ammap
+    AreasSettings: {
+      alpha: 0.8,
+      color: layoutColors.info,
+      colorSolid: layoutColors.primaryDark,
+      unlistedAreasAlpha: 0.4,
+      unlistedAreasColor: "#FFFFFF",
+      outlineColor: "#FFFFFF",
+      outlineAlpha: 0.5,
+      outlineThickness: 0.5,
+      rollOverColor: layoutColors.primary,
+      rollOverOutlineColor: "#FFFFFF",
+      selectedOutlineColor: "#FFFFFF",
+      selectedColor: "#f15135",
+      unlistedAreasOutlineColor: "#FFFFFF",
+      unlistedAreasOutlineAlpha: 0.5
+    },
+
+    LinesSettings: {
+      color: "#FFFFFF",
+      alpha: 0.8
+    },
+
+    ImagesSettings: {
+      alpha: 0.8,
+      labelColor: "#FFFFFF",
+      color: "#FFFFFF",
+      labelRollOverColor: layoutColors.primaryDark
+    },
+
+    ZoomControl: {
+      buttonFillAlpha: 0.8,
+      buttonIconColor: layoutColors.default,
+      buttonRollOverColor: layoutColors.danger,
+      buttonFillColor: layoutColors.primaryDark,
+      buttonBorderColor: layoutColors.primaryDark,
+      buttonBorderAlpha: 0,
+      buttonCornerRadius: 0,
+      gridColor: "#FFFFFF",
+      gridBackgroundColor: "#FFFFFF",
+      buttonIconAlpha: 0.6,
+      gridAlpha: 0.6,
+      buttonSize: 20
+    },
+
+    SmallMap: {
+      mapColor: "#000000",
+      rectangleColor: layoutColors.danger,
+      backgroundColor: "#FFFFFF",
+      backgroundAlpha: 0.7,
+      borderThickness: 1,
+      borderAlpha: 0.8
+    },
+
+    // the defaults below are set using CSS syntax, you can use any existing css property
+    // if you don't use Stock chart, you can delete lines below
+    PeriodSelector: {
+      color: "#FFFFFF"
+    },
+
+    PeriodButton: {
+      color: "#FFFFFF",
+      background: "transparent",
+      opacity: 0.7,
+      border: "1px solid rgba(0, 0, 0, .3)",
+      MozBorderRadius: "5px",
+      borderRadius: "5px",
+      margin: "1px",
+      outline: "none",
+      boxSizing: "border-box"
+    },
+
+    PeriodButtonSelected: {
+      color: "#FFFFFF",
+      backgroundColor: "#b9cdf5",
+      border: "1px solid rgba(0, 0, 0, .3)",
+      MozBorderRadius: "5px",
+      borderRadius: "5px",
+      margin: "1px",
+      outline: "none",
+      opacity: 1,
+      boxSizing: "border-box"
+    },
+
+    PeriodInputField: {
+      color: "#FFFFFF",
+      background: "transparent",
+      border: "1px solid rgba(0, 0, 0, .3)",
+      outline: "none"
+    },
+
+    DataSetSelector: {
+      color: "#FFFFFF",
+      selectedBackgroundColor: "#b9cdf5",
+      rollOverBackgroundColor: "#a8b0e4"
+    },
+
+    DataSetCompareList: {
+      color: "#FFFFFF",
+      lineHeight: "100%",
+      boxSizing: "initial",
+      webkitBoxSizing: "initial",
+      border: "1px solid rgba(0, 0, 0, .3)"
+    },
+
+    DataSetSelect: {
+      border: "1px solid rgba(0, 0, 0, .3)",
+      outline: "none"
+    }
+  };
+
+  getTheme() {
+    return this.theme;
+  }
+
+}