From 09d498bb8018f5d93d1e5e106255c9596d110fc9 Mon Sep 17 00:00:00 2001
From: Jesse Lucas <jesse@jesselucas.com>
Date: Tue, 17 Mar 2020 22:39:06 -0400
Subject: [PATCH] Refactor charts to use @ViewChild instead of @Input

---
 .../device-chart/device-chart.component.html  |  2 +-
 .../device-chart/device-chart.component.ts    | 14 +++++--
 .../donut-chart/donut-chart.component.ts      | 15 +++----
 .../folder-chart/folder-chart.component.html  |  2 +-
 .../folder-chart/folder-chart.component.ts    | 39 +++++++++++--------
 5 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/app/chart/device-chart/device-chart.component.html b/src/app/chart/device-chart/device-chart.component.html
index 49e7f814b..05e1b4422 100644
--- a/src/app/chart/device-chart/device-chart.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/chart/device-chart/device-chart.component.ts b/src/app/chart/device-chart/device-chart.component.ts
index cf8bccac1..7f47023e3 100644
--- a/src/app/chart/device-chart/device-chart.component.ts
+++ b/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 => {
-        this.data = [0, 230, 32, 40];
+      devices => {
+        this.donutChart.data([0, 230, 32, 40]);
       }
     );
   }
diff --git a/src/app/chart/donut-chart/donut-chart.component.ts b/src/app/chart/donut-chart/donut-chart.component.ts
index 19fa01147..fd29c4577 100644
--- a/src/app/chart/donut-chart/donut-chart.component.ts
+++ b/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) => {
diff --git a/src/app/chart/folder-chart/folder-chart.component.html b/src/app/chart/folder-chart/folder-chart.component.html
index 18f070027..a589a32aa 100644
--- a/src/app/chart/folder-chart/folder-chart.component.html
+++ b/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>
\ No newline at end of file
diff --git a/src/app/chart/folder-chart/folder-chart.component.ts b/src/app/chart/folder-chart/folder-chart.component.ts
index cc1aedffa..33cfe3b6f 100644
--- a/src/app/chart/folder-chart/folder-chart.component.ts
+++ b/src/app/chart/folder-chart/folder-chart.component.ts
@@ -1,7 +1,11 @@
-import { Component, OnInit } from '@angular/core';
-import { SystemConfigService } from 'src/app/system-config.service';
+import { Component, OnInit, ViewChild } from '@angular/core';
 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 => {
-        this.data = [0, 1, 32, 40];
+  }
+
+  ngAfterViewInit() {
+    // 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() {
-
-  }
-  */
 }