fix(charts): Make charts dynamic and avoid re-rendering full chart on…

… data change
valor-software · Jan 10, 2017 · 905183b · 905183b
1 parent 8d24ea5
commit 905183b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/components/charts/charts.ts b/components/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

diff --git a/demo/components/charts/line-chart-demo.ts b/demo/components/charts/line-chart-demo.ts
@@ -16,7 +16,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> = [