amchart moved to own component

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

@@ -2,36 +2,34 @@ import {Component, ViewEncapsulation} from 'angular2/core';
 
 import './lineChart.loader.ts';
 import {LineChartService} from './lineChart.service';
+import {BaAmChart} from '../../../theme/components';
 
 @Component({
   selector: 'line-chart',
   encapsulation: ViewEncapsulation.None,
   providers: [LineChartService],
+  directives: [BaAmChart],
   styles: [require('./lineChart.scss')],
   template: require('./lineChart.html')
 })
 export class LineChart {
 
+  chartData:Object;
+
   constructor(private _lineChartService:LineChartService) {
+    this.chartData = this._lineChartService.getData();
   }
 
-  ngAfterViewInit() {
-    this._loadLineChart();
-  }
-
-  // TODO: load proper AmCharts theme
-  private _loadLineChart() {
-    let chart = AmCharts.makeChart('amchart', this._lineChartService.getData());
-
+  initChart(chart:any) {
     let zoomChart = () => {
       chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
     };
 
     chart.addListener('rendered', zoomChart);
-    zoomChart();
-    
-    if (chart.zoomChart) {
-      chart.zoomChart();
-    }
+    // zoomChart();
+    //
+    // if (chart.zoomChart) {
+    //   chart.zoomChart();
+    // }
   }
 }

src/app/pages/dashboard/lineChart/lineChart.html

@@ -1 +1 @@
-<div id="amchart"></div>
+<ba-am-chart baAmChartClass="hello-world" [baAmChartConfiguration]="chartData" (onChartReady)="initChart($event)"></ba-am-chart>

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

@@ -0,0 +1,27 @@
+import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from 'angular2/core';
+
+import './baAmChart.loader.ts';
+import {DOM} from "angular2/src/platform/dom/dom_adapter";
+
+@Component({
+  selector: 'ba-am-chart',
+  styles: [require('./baAmChart.scss')],
+  template: require('./baAmChart.html'),
+  encapsulation: ViewEncapsulation.None
+})
+export class BaAmChart {
+
+  @Input() baAmChartConfiguration:Object;
+  @Input() baAmChartClass:string;
+  @Output() onChartReady = new EventEmitter<any>();
+
+  constructor (private _elementRef:ElementRef) {
+  }
+
+  ngAfterViewInit() {
+    let el = DOM.querySelector(this._elementRef.nativeElement, '.ba-am-chart');
+
+    let chart = AmCharts.makeChart(el, this.baAmChartConfiguration);
+    this.onChartReady.emit(chart);
+  }
+}

src/app/theme/components/baAmChart/baAmChart.html

@@ -0,0 +1 @@
+<div id="amchart" class="ba-am-chart {{baAmChartClass || ''}}"></div>

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

@@ -0,0 +1,6 @@
+require('amcharts3');
+require('amcharts3/amcharts/plugins/responsive/responsive.js');
+require('amcharts3/amcharts/serial.js');
+
+require('ammap3');
+require('ammap3/ammap/maps/js/worldLow');

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

@@ -0,0 +1 @@
+export * from './baAmChart.component.ts';

src/app/theme/components/index.ts

@@ -3,3 +3,4 @@ export * from './msgCenter';
 export * from './sidebar';
 export * from './contentTop';
 export * from './baCard';
+export * from './baAmChart';