import {Component, OnDestroy, OnInit} from '@angular/core'; import {Chart} from 'angular-highcharts'; import {LecturerInfoService} from 'src/app/services/lecturer-info.service'; import {ResponseGraphDetailsDao} from 'src/app/dao/ResponseGraphDetails.dao'; import {LecturerResponseGraphService} from 'src/app/services/lecturer-response-graph.service'; import {OmpClassDao} from 'src/app/dao/omp-class.dao'; import {StudentGraphDetailsDao} from 'src/app/dao/StudentGraphDetails.dao'; import {Subject} from 'rxjs'; @Component({ selector: 'app-student-response-chart', templateUrl: './student-response-chart.component.html', }) export class StudentResponseChartComponent implements OnInit, OnDestroy { public studentResponseChart: any; public isLoading: boolean; public currentClass: ResponseGraphDetailsDao; public responseGraphClasses: ResponseGraphDetailsDao[]; public studentResponses: StudentGraphDetailsDao[]; public currentlyViewedYear; private lecturerId: string; private generateGraphSubject = new Subject<Boolean>(); private generateGraph$ = this.generateGraphSubject.asObservable(); constructor(private lecturerInfoService: LecturerInfoService, private lecturerGraphService: LecturerResponseGraphService) { } ngOnInit(): void { this.lecturerId = sessionStorage.getItem('username'); this.responseGraphClasses = []; this.isLoading = true; this.lecturerGraphService.loadedYear$.subscribe(data => this.currentlyViewedYear = data); this.lecturerGraphService.loadedClasses$.subscribe((data: ResponseGraphDetailsDao[]) => { this.responseGraphClasses = data; this.generateGraphSubject.next(true); }); this.generateGraph$.subscribe(flag => { if (flag) { this.currentClass = this.responseGraphClasses[0]; this.getStudentResponseData(this.responseGraphClasses[0].classCode); } }); } ngOnDestroy(): void { } public switchClass() { this.getStudentResponseData(this.currentClass.classCode); } private getStudentResponseData(classCode: String): void { this.lecturerInfoService.getStudentResponseData(classCode) .subscribe((data: StudentGraphDetailsDao[]) => { this.studentResponses = data; this.buildChart(); this.isLoading = false; } ); } private createXAxisHeaders(): string[] { const xAxisHeaders = []; this.studentResponses.forEach(student => { xAxisHeaders.push(student.username); }); return xAxisHeaders; } private getStudentSeries(): any { const responses = []; this.studentResponses.forEach(elem => { responses.push(elem.numberOfResponses); }); return {name: 'Responses', data: responses}; } private buildChart(): void { this.studentResponseChart = new Chart({ chart: { type: 'column' }, title: { text: 'Individual Student Responses For ' + this.currentClass.classCode }, xAxis: { categories: this.createXAxisHeaders(), title: { text: 'Students In The Class' } }, yAxis: { min: 0, title: { text: 'Number of Responses' } }, credits: { enabled: false }, series: [this.getStudentSeries()] }); } }