Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update device chart to use donut chart updateData

This commit is contained in:
Jesse Lucas 2020-03-25 09:27:19 -04:00
parent 9589f25e57
commit 2fe94736e6
3 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/charts/device-chart/device-chart.component.html
View File

@ -4,7 +4,7 @@
<div fxLayout="row" fxLayoutAlign="space-between start"> <div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart> <app-donut-chart [elementID]="chartID"></app-donut-chart>
<div class="items" fxLayout="column" fxLayoutAlign="space-evenly end"> <div class="items" fxLayout="column" fxLayoutAlign="space-evenly end">
<app-chart-item *ngFor="let state of states | keyvalue" [state]="state.key" [count]="state.value"> <app-chart-item *ngFor="let state of states" [state]="state.label" [count]="state.count">
</app-chart-item> </app-chart-item>
</div> </div>
</div> </div>

27
src/app/charts/device-chart/device-chart.component.ts
View File

@ -13,11 +13,9 @@ export class DeviceChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent; @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
chartID: string = 'devicesChart'; chartID: string = 'devicesChart';
elevation: string = cardElevation; elevation: string = cardElevation;
states: Map<string, number>; states: { label: string, count: number }[] = [];
constructor(private folderService: FolderService) { constructor(private folderService: FolderService) { }
this.states = new Map();
}
ngOnInit(): void { ngOnInit(): void {
@ -27,19 +25,24 @@ export class DeviceChartComponent implements OnInit {
// TODO switch to deviceService // TODO switch to deviceService
this.folderService.getAll().subscribe( this.folderService.getAll().subscribe(
folder => { folder => {
// TODO: Clear existing data
this.donutChart.data([10]);
// Get StateType and convert to string // Get StateType and convert to string
const stateType: Folder.StateType = Folder.getStateType(folder); const stateType: Folder.StateType = Folder.getStateType(folder);
const state: string = Folder.stateTypeToString(stateType); const state: string = Folder.stateTypeToString(stateType);
// Instantiate empty count states // Check if state exists
if (!this.states.has(state)) { let found: boolean = false;
this.states.set(state, 0); this.states.forEach(s => {
if (s.label === state) {
s.count = s.count + 1;
found = true;
}
});
if (!found) {
this.states.push({ label: state, count: 1 });
} }
const count: number = this.states.get(state) + 1;
this.states.set(state, count); this.donutChart.updateData(this.states);
} }
); );
} }

6
src/app/charts/folder-chart/folder-chart.component.ts
View File

@ -12,12 +12,10 @@ import { DonutChartComponent } from '../donut-chart/donut-chart.component';
export class FolderChartComponent implements OnInit { export class FolderChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent; @ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
chartID: string = 'foldersChart'; chartID: string = 'foldersChart';
states: { label: string, count: number }[]; states: { label: string, count: number }[] = [];
elevation: string = cardElevation; elevation: string = cardElevation;
constructor(private folderService: FolderService) { constructor(private folderService: FolderService) { }
this.states = [];
}
ngOnInit(): void { ngOnInit(): void {
for (let state in Folder.StateType) { for (let state in Folder.StateType) {