From 6158b20a8c6207c79415894b2ec0c7ee8c35e83d Mon Sep 17 00:00:00 2001
From: Jesse Lucas <jesse@jesselucas.com>
Date: Fri, 27 Mar 2020 21:52:13 -0400
Subject: [PATCH] Style donut chart and add total count

---
 .../charts/device-chart/device-chart.component.ts    |  5 ++++-
 .../charts/donut-chart/donut-chart.component.html    |  5 ++++-
 .../charts/donut-chart/donut-chart.component.scss    | 12 ++++++++++++
 src/app/charts/donut-chart/donut-chart.component.ts  |  3 ++-
 .../charts/folder-chart/folder-chart.component.ts    |  5 +++++
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/app/charts/device-chart/device-chart.component.ts b/src/app/charts/device-chart/device-chart.component.ts
index 7cc70be2b..eeba45c95 100644
--- a/src/app/charts/device-chart/device-chart.component.ts
+++ b/src/app/charts/device-chart/device-chart.component.ts
@@ -20,9 +20,12 @@ export class DeviceChartComponent implements OnInit {
   ngOnInit(): void { }
 
   ngAfterViewInit(): void {
+    let totalCount: number = 0;
     this.deviceService.getAll().subscribe(
       device => {
-        console.log("device", device);
+        // Count the number of folders and set chart
+        totalCount++;
+        this.donutChart.count = totalCount;
 
         // Get StateType and convert to string 
         const stateType: Device.StateType = Device.getStateType(device);
diff --git a/src/app/charts/donut-chart/donut-chart.component.html b/src/app/charts/donut-chart/donut-chart.component.html
index 8a3811eee..9decab29d 100644
--- a/src/app/charts/donut-chart/donut-chart.component.html
+++ b/src/app/charts/donut-chart/donut-chart.component.html
@@ -1 +1,4 @@
-<canvas id={{elementID}} width="200%" height="100%"></canvas>
\ No newline at end of file
+<div class="chart-container">
+    <canvas id={{elementID}} width="100%" height="100%"></canvas>
+    <div class="center">{{count}}</div>
+</div>
\ No newline at end of file
diff --git a/src/app/charts/donut-chart/donut-chart.component.scss b/src/app/charts/donut-chart/donut-chart.component.scss
index e69de29bb..74bdf8cde 100644
--- a/src/app/charts/donut-chart/donut-chart.component.scss
+++ b/src/app/charts/donut-chart/donut-chart.component.scss
@@ -0,0 +1,12 @@
+.chart-container {
+    position: relative;
+  }
+
+.center {
+    position: absolute;
+    left: 0;
+    top: 40%;
+    width: 100%;
+    text-align: center;
+    font-size: 18px;
+}
\ No newline at end of file
diff --git a/src/app/charts/donut-chart/donut-chart.component.ts b/src/app/charts/donut-chart/donut-chart.component.ts
index 296075141..25b483aa7 100644
--- a/src/app/charts/donut-chart/donut-chart.component.ts
+++ b/src/app/charts/donut-chart/donut-chart.component.ts
@@ -9,6 +9,7 @@ import { tooltip } from '../tooltip'
 })
 export class DonutChartComponent {
   @Input() elementID: string;
+  count: number;
 
   private canvas: any;
   private ctx: any;
@@ -56,7 +57,6 @@ export class DonutChartComponent {
     this.chart = new Chart(this.ctx, {
       type: 'doughnut',
       data: {
-        labels: ["Up to Date", "Syncing", "Waiting to Sync", "Out of Sync", "Failed Items"],
         datasets: [{
           data: [],
           backgroundColor: [
@@ -68,6 +68,7 @@ export class DonutChartComponent {
         }]
       },
       options: {
+        cutoutPercentage: 70,
         responsive: false,
         legend: {
           display: false
diff --git a/src/app/charts/folder-chart/folder-chart.component.ts b/src/app/charts/folder-chart/folder-chart.component.ts
index d3b184747..f34a52396 100644
--- a/src/app/charts/folder-chart/folder-chart.component.ts
+++ b/src/app/charts/folder-chart/folder-chart.component.ts
@@ -22,8 +22,13 @@ export class FolderChartComponent implements OnInit {
   }
 
   ngAfterViewInit() {
+    let totalCount: number = 0;
     this.folderService.getAll().subscribe(
       folder => {
+        // Count the number of folders and set chart
+        totalCount++;
+        this.donutChart.count = totalCount;
+
         // Get StateType and convert to string 
         const stateType: Folder.StateType = Folder.getStateType(folder);
         const state: string = Folder.stateTypeToString(stateType);