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

View File

@ -4,7 +4,7 @@
<div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart>
<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>
</div>
</div>

View File

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

View File

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