Refactor charts to use @ViewChild instead of @Input

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

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

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

@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { cardElevation } from '../../style';
 import { SystemConfigService } from 'src/app/system-config.service';
+import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 
 @Component({
   selector: 'app-device-chart',
@@ -8,16 +9,21 @@ import { SystemConfigService } from 'src/app/system-config.service';
   styleUrls: ['./device-chart.component.scss']
 })
 export class DeviceChartComponent implements OnInit {
+  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
+
   chartID: string = 'devicesChart';
   elevation: string = cardElevation;
-  data: number[];
 
   constructor(private systemConfigService: SystemConfigService) { }
 
   ngOnInit(): void {
+
+  }
+
+  ngAfterViewInit(): void {
     this.systemConfigService.getDevices().subscribe(
-      data => {
+      devices => {
-        this.data = [0, 230, 32, 40];
+        this.donutChart.data([0, 230, 32, 40]);
       }
     );
   }

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

@@ -9,13 +9,6 @@ import { SystemConfigService } from 'src/app/system-config.service';
 })
 export class DonutChartComponent {
   @Input() elementID: string;
-  @Input() set data(val: number[]) {
-    if (this.chart) {
-      val.forEach((v) => {
-        this.addData(v)
-      });
-    }
-  };
 
   private canvas: any;
   private ctx: any;
@@ -23,6 +16,14 @@ export class DonutChartComponent {
 
   constructor() { }
 
+  data(val: number[]) {
+    if (this.chart) {
+      val.forEach((v) => {
+        this.addData(v)
+      });
+    }
+  }
+
   addData(data: number): void {
     //    this.chart.data.labels.push(label);
     this.chart.data.datasets.forEach((dataset) => {

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" [data]="data"></app-donut-chart>
+        <app-donut-chart [elementID]="chartID"></app-donut-chart>
     </mat-card-content>
 </mat-card>

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

@@ -1,7 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
-import { SystemConfigService } from 'src/app/system-config.service';
 import { Folder } from '../../folder'
 import { cardElevation } from '../../style'
+import { FolderService } from 'src/app/folder.service';
+import { SystemConfigService } from 'src/app/system-config.service';
+import { DbStatusService } from 'src/app/db-status.service';
+import { flatMap } from 'rxjs/operators';
+import { DonutChartComponent } from '../donut-chart/donut-chart.component';
 
 @Component({
   selector: 'app-folder-chart',
@@ -9,26 +13,29 @@ import { cardElevation } from '../../style'
   styleUrls: ['./folder-chart.component.scss']
 })
 export class FolderChartComponent implements OnInit {
+  @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
+
   chartID: string = 'foldersChart';
   elevation: string = cardElevation;
-  data: number[];
+  constructor(
-
+    private systemConfigService: SystemConfigService,
-  constructor(private systemConfigService: SystemConfigService) { }
+    private folderService: FolderService,
+    private dbStatusService: DbStatusService
+  ) { }
 
   ngOnInit(): void {
-    // Find total number of folders
+  }
-    this.systemConfigService.getFolders().subscribe(
+
-      data => {
+  ngAfterViewInit() {
-        this.data = [0, 1, 32, 40];
+    // TODO: Find total number of folders
+    this.folderService.getAll().subscribe(
+      folder => {
+
+        // TODO: Clear existing data
+        this.donutChart.data([0, 30, 32, 40]);
+        console.log("folder?", folder)
       }
     );
 
-    // Sequentially look up each folder to get status
-    // dbStatusService
   }
-  /*
-  ngAfterViewInit() {
-
-  }
-  */
 }