diff --git a/package-lock.json b/package-lock.json
index 8711b8d0b..31a6d9536 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2776,6 +2776,32 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
+ "chart.js": {
+ "version": "2.9.3",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+ "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
+ "requires": {
+ "chartjs-color": "^2.1.0",
+ "moment": "^2.10.2"
+ }
+ },
+ "chartjs-color": {
+ "version": "2.4.1",
+ "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+ "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
+ "requires": {
+ "chartjs-color-string": "^0.6.0",
+ "color-convert": "^1.9.3"
+ }
+ },
+ "chartjs-color-string": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz",
+ "integrity": "sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==",
+ "requires": {
+ "color-name": "^1.0.0"
+ }
+ },
"chokidar": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
@@ -3040,7 +3066,6 @@
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
"integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
- "dev": true,
"requires": {
"color-name": "1.1.3"
}
@@ -3048,8 +3073,7 @@
"color-name": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
- "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
- "dev": true
+ "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.3",
@@ -8083,6 +8107,11 @@
}
}
},
+ "moment": {
+ "version": "2.24.0",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+ "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+ },
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/package.json b/package.json
index 1f74c691e..fb4298a64 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
"@angular/platform-browser-dynamic": "~9.0.5",
"@angular/router": "~9.0.5",
"angular-in-memory-web-api": "^0.10.0",
+ "chart.js": "^2.9.3",
"component": "^1.1.0",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 61c8165a7..7a1f4d72b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { environment } from '../environments/environment';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MatCardModule } from '@angular/material/card';
import { FlexLayoutModule } from '@angular/flex-layout';
+import { DonutChartComponent } from './donut-chart/donut-chart.component';
@NgModule({
declarations: [
@@ -30,6 +31,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
DeviceListComponent,
StatusToggleComponent,
DashboardComponent,
+ DonutChartComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index d8a9ed489..f5fbdf2ee 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -6,13 +6,17 @@
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
index 270957fd0..b0b544e68 100644
--- a/src/app/dashboard/dashboard.component.ts
+++ b/src/app/dashboard/dashboard.component.ts
@@ -7,6 +7,9 @@ import { SystemConfigService } from '../system-config.service';
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent {
+ foldersChart = 'foldersChart';
+ devicesChart = 'devicesChart';
+
constructor(private systemConfigService: SystemConfigService) { }
ngOnInit() {
diff --git a/src/app/donut-chart/donut-chart.component.html b/src/app/donut-chart/donut-chart.component.html
new file mode 100644
index 000000000..8a3811eee
--- /dev/null
+++ b/src/app/donut-chart/donut-chart.component.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/app/donut-chart/donut-chart.component.scss b/src/app/donut-chart/donut-chart.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/donut-chart/donut-chart.component.spec.ts b/src/app/donut-chart/donut-chart.component.spec.ts
new file mode 100644
index 000000000..8c299a9ec
--- /dev/null
+++ b/src/app/donut-chart/donut-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DonutChartComponent } from './donut-chart.component';
+
+describe('DonutChartComponent', () => {
+ let component: DonutChartComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DonutChartComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DonutChartComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/donut-chart/donut-chart.component.ts b/src/app/donut-chart/donut-chart.component.ts
new file mode 100644
index 000000000..8c6eeb2c9
--- /dev/null
+++ b/src/app/donut-chart/donut-chart.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
+import { Chart } from 'chart.js'
+import { flatMap } from 'rxjs/operators';
+
+@Component({
+ selector: 'app-donut-chart',
+ templateUrl: './donut-chart.component.html',
+ styleUrls: ['./donut-chart.component.scss']
+})
+export class DonutChartComponent implements OnInit {
+ @Input() elementID: string;
+
+ private canvas: any;
+ private ctx: any;
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ ngAfterViewInit(): void {
+ console.log("elementID?", this.elementID)
+ this.canvas = document.getElementById(this.elementID);
+ this.ctx = this.canvas.getContext('2d');
+ const myChart = new Chart(this.ctx, {
+ type: 'doughnut',
+ data: {
+ labels: ["Up to Date", "Syncing", "Waiting to Sync", "Out of Sync", "Failed Items"],
+ datasets: [{
+ data: [1, 2, 3, 0, 0],
+ backgroundColor: [
+ '#56C568',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: false,
+ display: false,
+ legend: {
+ display: false
+ }
+ }
+ });
+ }
+}
diff --git a/src/app/system-config.service.ts b/src/app/system-config.service.ts
index 365d66078..dea7bd963 100644
--- a/src/app/system-config.service.ts
+++ b/src/app/system-config.service.ts
@@ -24,7 +24,7 @@ export class SystemConfigService {
private systemConfigUrl = environment.production ? apiURL + 'rest/system/config' : 'api/config';
private httpOptions;
- private checkInterval: number = 200;
+ private checkInterval: number = 500;
constructor(private http: HttpClient, private cookieService: CookieService) {
this.httpOptions = { headers: new HttpHeaders(this.cookieService.getCSRFHeader()) };
@@ -52,19 +52,11 @@ export class SystemConfigService {
observer.next(this.folders);
} else {
// create timer to keep checking for folders
- let check = (): Boolean => {
- if (this.folders) {
- observer.next(this.folders);
- return true;
- }
- return false;
- }
let t = setInterval(() => {
- if (check())
+ if (check(this.folders))
clearInterval(t);
+ observer.next(this.folders);
}, this.checkInterval);
-
- check(); // try right away
}
});
return folderObservable;
@@ -75,22 +67,21 @@ export class SystemConfigService {
if (this.folders) {
observer.next(this.devices);
} else {
- // create timer to keep checking for devices
- let check = (): Boolean => {
- if (this.devices) {
- observer.next(this.devices);
- return true;
- }
- return false;
- }
let t = setInterval(() => {
- if (check())
+ if (check(this.devices)) {
clearInterval(t);
+ observer.next(this.devices);
+ }
}, this.checkInterval);
-
- check() // try right away
}
});
return deviceObserverable;
}
+}
+
+const check = (target: any): Boolean => {
+ if (target) {
+ return true;
+ }
+ return false;
}
\ No newline at end of file