From 1cc807d7339ef6cc61280c1b24783b4c1cab0480 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Fri, 6 May 2016 13:28:11 +0300
Subject: [PATCH] amchart moved to own component

---
 .../lineChart/lineChart.component.ts          | 24 ++++++++---------
 .../pages/dashboard/lineChart/lineChart.html  |  2 +-
 .../baAmChart/baAmChart.component.ts          | 27 +++++++++++++++++++
 .../theme/components/baAmChart/baAmChart.html |  1 +
 .../components/baAmChart/baAmChart.loader.ts  |  6 +++++
 .../theme/components/baAmChart/baAmChart.scss |  0
 src/app/theme/components/baAmChart/index.ts   |  1 +
 src/app/theme/components/index.ts             |  1 +
 8 files changed, 48 insertions(+), 14 deletions(-)
 create mode 100644 src/app/theme/components/baAmChart/baAmChart.component.ts
 create mode 100644 src/app/theme/components/baAmChart/baAmChart.html
 create mode 100644 src/app/theme/components/baAmChart/baAmChart.loader.ts
 create mode 100644 src/app/theme/components/baAmChart/baAmChart.scss
 create mode 100644 src/app/theme/components/baAmChart/index.ts

diff --git a/src/app/pages/dashboard/lineChart/lineChart.component.ts b/src/app/pages/dashboard/lineChart/lineChart.component.ts
index 42bf0e6d..04282d87 100644
--- a/src/app/pages/dashboard/lineChart/lineChart.component.ts
+++ b/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();
+    // }
   }
 }
diff --git a/src/app/pages/dashboard/lineChart/lineChart.html b/src/app/pages/dashboard/lineChart/lineChart.html
index 0ba3a7a0..143e219e 100644
--- a/src/app/pages/dashboard/lineChart/lineChart.html
+++ b/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>
diff --git a/src/app/theme/components/baAmChart/baAmChart.component.ts b/src/app/theme/components/baAmChart/baAmChart.component.ts
new file mode 100644
index 00000000..51348442
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/app/theme/components/baAmChart/baAmChart.html b/src/app/theme/components/baAmChart/baAmChart.html
new file mode 100644
index 00000000..f8fb2873
--- /dev/null
+++ b/src/app/theme/components/baAmChart/baAmChart.html
@@ -0,0 +1 @@
+<div id="amchart" class="ba-am-chart {{baAmChartClass || ''}}"></div>
diff --git a/src/app/theme/components/baAmChart/baAmChart.loader.ts b/src/app/theme/components/baAmChart/baAmChart.loader.ts
new file mode 100644
index 00000000..4d7df3f6
--- /dev/null
+++ b/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');
diff --git a/src/app/theme/components/baAmChart/baAmChart.scss b/src/app/theme/components/baAmChart/baAmChart.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/theme/components/baAmChart/index.ts b/src/app/theme/components/baAmChart/index.ts
new file mode 100644
index 00000000..9a979834
--- /dev/null
+++ b/src/app/theme/components/baAmChart/index.ts
@@ -0,0 +1 @@
+export * from './baAmChart.component.ts';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 859510c7..0a862979 100644
--- a/src/app/theme/components/index.ts
+++ b/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';