Style donut chart and add total count

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);

src/app/charts/donut-chart/donut-chart.component.html

@@ -1 +1,4 @@
-<canvas id={{elementID}} width="200%" height="100%"></canvas>
+<div class="chart-container">
+    <canvas id={{elementID}} width="100%" height="100%"></canvas>
+    <div class="center">{{count}}</div>
+</div>

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;
+}

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

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);