pass and add data to donut chart

src/app/chart/device-chart/device-chart.component.html

@@ -1,7 +1,6 @@
 <mat-card class="{{elevation}}">
     <mat-card-title>Devices</mat-card-title>
     <mat-card-content>
-        <app-donut-chart [elementID]=" chartID">
+        <app-donut-chart [elementID]="chartID" [data]="data"></app-donut-chart>
-        </app-donut-chart>
     </mat-card-content>
 </mat-card>

src/app/chart/device-chart/device-chart.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { cardElevation } from '../../style';
+import { SystemConfigService } from 'src/app/system-config.service';
 
 @Component({
   selector: 'app-device-chart',
@@ -9,10 +10,15 @@ import { cardElevation } from '../../style';
 export class DeviceChartComponent implements OnInit {
   chartID: string = 'devicesChart';
   elevation: string = cardElevation;
+  data: number[];
 
-  constructor() { }
+  constructor(private systemConfigService: SystemConfigService) { }
 
   ngOnInit(): void {
+    this.systemConfigService.getFolders().subscribe(
+      data => {
+        this.data = [0, 230, 32, 40];
+      }
+    );
   }
-
 }

src/app/chart/donut-chart/donut-chart.component.ts

@@ -1,32 +1,48 @@
-import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Chart } from 'chart.js'
-import { flatMap } from 'rxjs/operators';
+import { SystemConfigService } from 'src/app/system-config.service';
 
 @Component({
   selector: 'app-donut-chart',
   templateUrl: './donut-chart.component.html',
   styleUrls: ['./donut-chart.component.scss']
 })
-export class DonutChartComponent implements OnInit {
+export class DonutChartComponent {
   @Input() elementID: string;
+  @Input() set data(val: number[]) {
+    if (this.chart) {
+      val.forEach((v) => {
+        this.addData(v)
+      });
+      console.log("set the data?", val)
+    }
+  };
 
   private canvas: any;
   private ctx: any;
+  private chart: Chart;
 
   constructor() { }
 
-  ngOnInit(): void {
+  addData(data: number): void {
+    //    this.chart.data.labels.push(label);
+    this.chart.data.datasets.forEach((dataset) => {
+      dataset.data.push(data);
+    });
+    this.chart.update();
   }
 
+
   ngAfterViewInit(): void {
+    console.log("is the data set?", this.data, this.elementID);
     this.canvas = document.getElementById(this.elementID);
     this.ctx = this.canvas.getContext('2d');
-    const myChart = new Chart(this.ctx, {
+    this.chart = new Chart(this.ctx, {
       type: 'doughnut',
       data: {
         labels: ["Up to Date", "Syncing", "Waiting to Sync", "Out of Sync", "Failed Items"],
         datasets: [{
-          data: [100, 200, 300, 0, 0],
+          data: [],
           backgroundColor: [
             '#56C568',
             'rgba(54, 162, 235, 1)',
@@ -37,7 +53,6 @@ export class DonutChartComponent implements OnInit {
       },
       options: {
         responsive: false,
-        display: false,
         legend: {
           display: false
         }

src/app/chart/folder-chart/folder-chart.component.html

@@ -1,6 +1,6 @@
 <mat-card class="{{elevation}}">
     <mat-card-title>Folders</mat-card-title>
     <mat-card-content>
-        <app-donut-chart [elementID]="chartID"></app-donut-chart>
+        <app-donut-chart [elementID]="chartID" [data]="data"></app-donut-chart>
     </mat-card-content>
 </mat-card>

src/app/chart/folder-chart/folder-chart.component.ts

@@ -11,16 +11,20 @@ import { cardElevation } from '../../style'
 export class FolderChartComponent implements OnInit {
   chartID: string = 'foldersChart';
   elevation: string = cardElevation;
-  data: Folder[];
+  data: number[];
 
   constructor(private systemConfigService: SystemConfigService) { }
 
   ngOnInit(): void {
     this.systemConfigService.getFolders().subscribe(
       data => {
-        console.log("char folder data", data)
+        this.data = [0, 1, 32, 40];
       }
     );
   }
+  /*
+  ngAfterViewInit() {
 
+  }
+  */
 }