Merge branch 'fix-chart-redraw-issue' of git://github.com/m0t0r/ng2-c…

…harts into m0t0r-fix-chart-redraw-issue
valor-software · Jan 17, 2017 · 96cda81 · 96cda81
2 parents ce5011c + 905183b
commit 96cda81
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/demo/src/app/components/charts/line-chart-demo.ts b/demo/src/app/components/charts/line-chart-demo.ts
@@ -13,7 +13,6 @@ export class LineChartDemoComponent {
   ];
   public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
   public lineChartOptions:any = {
-    animation: false,
     responsive: true
   };
   public lineChartColors:Array<any> = [

diff --git a/src/charts/charts.ts b/src/charts/charts.ts
@@ -31,7 +31,7 @@ export class BaseChartDirective implements OnDestroy, OnChanges, OnInit {
     [77, 83, 96]
   ];
 
-  @Input() public data:number[] | Array<number[]>;
+  @Input() public data:number[] | any[];
   @Input() public datasets:any[];
   @Input() public labels:Array<any> = [];
   @Input() public options:any = {};
@@ -62,14 +62,19 @@ export class BaseChartDirective implements OnDestroy, OnChanges, OnInit {
     }
   }
 
-  public ngOnChanges(changes:SimpleChanges):any {
+  public ngOnChanges(changes: SimpleChanges): void {
     if (this.initFlag) {
       // Check if the changes are in the data or datasets
-      if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets') || changes.hasOwnProperty('labels')) {
-        this.chart.data.datasets = this.getDatasets();
-        this.chart.data.labels = this.labels;
+      if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
+        if (changes['data']) {
+          this.updateChartData(changes['data'].currentValue);
+        } else {
+          this.updateChartData(changes['datasets'].currentValue);
+        }
+
         this.chart.update();
       } else {
+      // otherwise rebuild the chart
         this.refresh();
       }
     }
@@ -122,6 +127,20 @@ export class BaseChartDirective implements OnDestroy, OnChanges, OnInit {
     return new Chart(ctx, opts);
   }
 
+  private updateChartData(newDataValues: number[] | any[]): void {
+    if (Array.isArray(newDataValues[0].data)) {
+      this.chart.data.datasets.forEach((dataset: any, i: number) => {
+        dataset.data = newDataValues[i].data;
+
+        if (newDataValues[i].label) {
+          dataset.label = newDataValues[i].label;
+        }
+      });
+    } else {
+      this.chart.data.datasets[0].data = newDataValues;
+    }
+  }
+
   private getDatasets():any {
     let datasets:any = void 0;
     // in case if datasets is not provided, but data is present