diff --git a/src/app/answer-statistics/answer-statistics.component.html b/src/app/answer-statistics/answer-statistics.component.html index a8dd5151c831ad1f877b3b041782d6a868854740..6fd6364064d2262ac851d885953698cad63ccd53 100644 --- a/src/app/answer-statistics/answer-statistics.component.html +++ b/src/app/answer-statistics/answer-statistics.component.html @@ -3,17 +3,23 @@ <mat-card> <mat-tab-group> <mat-tab label="Answer statistic"> - <mat-select placeholder="Answers" fxLayoutAlign="right"> + <mat-select placeholder="Answers" fxLayoutAlign="right" (change)="showStatistic($event.value)"> <mat-option *ngFor="let state of states" [value]="state.value"> - {{ state.value }} + {{ state.viewValue }} </mat-option> </mat-select> - <div class="bars"> - Answer 1 - <mat-progress-bar [value]="50" #col *ngIf="state.value === 'Responded' :"> + <div *ngIf="selected == 1"> + <!-- Add list of Question statistic --> + <mat-progress-bar [value]="50"> + </mat-progress-bar> + </div> + <div *ngIf="selected == 2"> + <!-- Add list of Question statistic --> + <mat-progress-bar [value]="50" color="warn"> </mat-progress-bar> </div> </mat-tab> + <!-- Add second tab with true false answers --> </mat-tab-group> </mat-card> </div> diff --git a/src/app/answer-statistics/answer-statistics.component.scss b/src/app/answer-statistics/answer-statistics.component.scss index 26bb809a01cc727273c3786c05c9ea0781b173f7..dc10908885a3b7f9317d2a5ae37a40e77417c87c 100644 --- a/src/app/answer-statistics/answer-statistics.component.scss +++ b/src/app/answer-statistics/answer-statistics.component.scss @@ -4,9 +4,9 @@ mat-card { } mat-select { - max-width: 100px; + max-width: 150px; margin-top: 10px; - margin-left: 675px; + margin-left: 625px; } .bars { diff --git a/src/app/answer-statistics/answer-statistics.component.ts b/src/app/answer-statistics/answer-statistics.component.ts index 07af3178d6c5f2b0b62d18d667ad38a5c676fb46..e52b560ac887f58a2889eab6a73e39df4056faa4 100644 --- a/src/app/answer-statistics/answer-statistics.component.ts +++ b/src/app/answer-statistics/answer-statistics.component.ts @@ -10,10 +10,14 @@ export class AnswerStatisticsComponent implements OnInit { { value: '1', viewValue: 'Responded' }, { value: '2', viewValue: 'Not responded' }, ]; + selected: number = null; constructor() { } ngOnInit() { } + showStatistic(value) { + this.selected = value; + } }