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 @@
-
\ No newline at end of file
+
\ 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);