Create states map and set chart-items based on map

This commit is contained in:
Jesse Lucas 2020-03-20 12:32:10 -04:00
parent 02d14c7e9b
commit 7a657bf3c7
4 changed files with 19 additions and 9 deletions

View File

@ -1,4 +1,5 @@
<div fxLayout="row" fxLayoutAlign="space-between start">
<div></div>
<div>{{state}}</div>
<div>{{state}}: &nbsp;</div>
<div>{{count}}</div>
</div>

View File

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-chart-item',
@ -6,7 +6,8 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./chart-item.component.scss']
})
export class ChartItemComponent implements OnInit {
state: string = "test"
@Input() state: string;
@Input() count: number;
constructor() { }
ngOnInit(): void {

View File

@ -3,10 +3,9 @@
<mat-card-content>
<div fxLayout="row" fxLayoutAlign="space-between start">
<app-donut-chart [elementID]="chartID"></app-donut-chart>
<div fxLayout="column" fxLayoutAlign="space-evenly end">
<app-chart-item></app-chart-item>
<app-chart-item></app-chart-item>
<app-chart-item></app-chart-item>
<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>
</div>
</div>
</mat-card-content>

View File

@ -12,9 +12,12 @@ import { DonutChartComponent } from '../donut-chart/donut-chart.component';
export class FolderChartComponent implements OnInit {
@ViewChild(DonutChartComponent) donutChart: DonutChartComponent;
chartID: string = 'foldersChart';
states: Map<string, number>;
elevation: string = cardElevation;
constructor(private folderService: FolderService) { }
constructor(private folderService: FolderService) {
this.states = new Map();
}
ngOnInit(): void {
for (let state in Folder.StateType) {
@ -32,7 +35,13 @@ export class FolderChartComponent implements OnInit {
// Get StateType and convert to string
const stateType: Folder.StateType = Folder.getStateType(folder);
const state: string = Folder.stateTypeToString(stateType);
console.log("folder state?", state, folder);
// Instantiate empty count states
if (!this.states.has(state)) {
this.states.set(state, 0);
}
const count: number = this.states.get(state) + 1;
this.states.set(state, count);
}
);