Implement login to check dataSource update in ngDoCheck hook

Author: rohitkr

dist/src/fusioncharts.component.d.ts

@@ -1,14 +1,16 @@
-import { ElementRef, AfterViewInit } from '@angular/core';
-export declare class FusionChartsComponent implements AfterViewInit {
+import { ElementRef, OnInit, KeyValueDiffers } from '@angular/core';
+export declare class FusionChartsComponent implements OnInit {
+    private differs;
     element: ElementRef;
     chartObj: any;
+    dataSource: any;
+    private oldDataSource;
     type: string;
     id: string;
     width: string;
     height: string;
     renderAt: string;
     dataFormat: string;
-    dataSource: string;
     events: string;
     link: string;
     showDataLoadingMessage: boolean;
@@ -59,6 +61,14 @@ export declare class FusionChartsComponent implements AfterViewInit {
     loadMessageImageAlpha: number;
     loadMessageImageScale: number;
     chartConfig: string;
-    constructor(element: ElementRef);
+    constructor(differs: KeyValueDiffers, element: ElementRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: any): void;
+    ngDoCheck(): void;
+    updateChartData(): void;
+    updateWidth(): void;
+    updateHeight(): void;
     ngAfterViewInit(): void;
+    getDataSource(): any;
+    ngOnDestroy(): void;
 }

dist/src/fusioncharts.component.js

@@ -1,21 +1,30 @@
-import {Component, Input, ElementRef, AfterViewInit} from '@angular/core';
+// import {Component, Input, ElementRef, AfterViewInit, OnInit, KeyValueDiffers, SimpleChange} from '@angular/core';
+import {Component, Input, ElementRef, OnInit, KeyValueDiffers} from '@angular/core';
+// import {Observable} from 'rxjs/Observable';
+// import {Observer} from 'rxjs/Observer';
+
 import * as FusionCharts from 'fusioncharts';
 
+
 @Component({
     selector: 'fusioncharts',
-    template: `<div>FusionCharts will render here</div>`
+    template: `<div>FusionCharts will render here</div>
+    `
 })
-export class FusionChartsComponent implements AfterViewInit {
+export class FusionChartsComponent implements OnInit {
 
     chartObj: any;
 
+    @Input() dataSource: any;
+
+    private oldDataSource:any = this.dataSource;
+
     @Input() type: string;
     @Input() id: string;
     @Input() width: string;
     @Input() height: string;
     @Input() renderAt: string;
     @Input() dataFormat: string;
-    @Input() dataSource: string;
     @Input() events: string;
     @Input() link: string;
     @Input() showDataLoadingMessage: boolean;
@@ -67,7 +76,48 @@ export class FusionChartsComponent implements AfterViewInit {
     @Input() loadMessageImageScale: number;
     @Input() chartConfig: string;
 
-    constructor(public element: ElementRef) {
+    constructor(private differs: KeyValueDiffers, public element: ElementRef) {
+
+    }
+
+
+    ngOnInit() {
+        this.oldDataSource = (JSON.stringify(this.dataSource));
+    }
+
+
+    // ngOnChanges(changes: {[propName: string]: SimpleChange}, hi) {
+    ngOnChanges(changes: any) {
+        for (let i in changes) {
+            let key = i.charAt(0).toUpperCase() + i.slice(1);
+            this[`update${key}`] && this[`update${key}`]();
+        }
+    }
+
+
+    ngDoCheck() {
+        let data = JSON.stringify(this.dataSource);
+        if (this.oldDataSource === data) {
+        } else {
+            this.updateChartData();
+            this.oldDataSource = data;
+        }
+    }
+
+    updateChartData() {
+        this.chartObj && this.chartObj.setJSONData(this.dataSource);
+    }
+
+    updateWidth() {
+        this.chartObj && this.chartObj.resizeTo({
+            w: this.width
+        })
+    }
+
+    updateHeight() {
+        this.chartObj && this.chartObj.resizeTo({
+            h: this.height
+        })
     }
 
     ngAfterViewInit() {
@@ -97,4 +147,15 @@ export class FusionChartsComponent implements AfterViewInit {
         }
     }
 
+    getDataSource() {
+        if(this.dataSource && this.dataSource.data) {
+            return this.dataSource.data;
+        }
+    }
+
+    ngOnDestroy() {
+        console.log('Destroy: ', this.chartObj);
+        this.chartObj.dispose();
+    }
+
 }