refactor to use array of objects to map state data to chart update

This commit is contained in:
Jesse Lucas 2020-03-24 13:18:01 -04:00
parent 598dc991e8
commit f342a2a54b
2 changed files with 21 additions and 12 deletions

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>

View File

@ -12,11 +12,11 @@ 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: Map<string, number>; states: { label: string, count: number }[];
elevation: string = cardElevation; elevation: string = cardElevation;
constructor(private folderService: FolderService) { constructor(private folderService: FolderService) {
this.states = new Map(); this.states = [];
} }
ngOnInit(): void { ngOnInit(): void {
@ -28,19 +28,28 @@ export class FolderChartComponent implements OnInit {
ngAfterViewInit() { ngAfterViewInit() {
this.folderService.getAll().subscribe( this.folderService.getAll().subscribe(
folder => { folder => {
// TODO: Clear existing data
this.donutChart.data([40]);
// 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;
console.log("increase count", s.count);
}
});
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);
},
err => console.error('Observer got an error: ' + err),
() => {
} }
); );
} }