Newer
Older
import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
ywb16155
committed
import {ResponseGraphDetailsDao} from 'src/app/dao/response-graph-details.dao';
import {LecturerResponseGraphService} from 'src/app/services/lecturer-response-graph.service';
import {forkJoin} from 'rxjs';
@Component({
selector: 'app-response-chart',
templateUrl: './response-chart.component.html',
})
export class ResponseChartComponent implements OnInit, OnDestroy {
public responseChart: any;
public classesByYear: ResponseGraphDetailsDao[][];
public papersByYear: ResponseGraphDetailsDao[][];
public isLoading: boolean;
public years;
public classCodes;
public currentClassCode: String;
private lecturerId: string;
constructor(private lecturerInfoService: LecturerInfoService,
private lecturerGraphService: LecturerResponseGraphService) {
this.lecturerId = sessionStorage.getItem('username');
this.currentClassCode = undefined;
this.isLoading = true;
this.years = new Set();
this.classCodes = new Set();
this.papersByYear = [];
forkJoin([
this.lecturerInfoService.getClassResponseData(this.lecturerId),
this.lecturerInfoService.getPaperBreakdown(this.lecturerId)
]).subscribe((res) => {
this.sortClassData(res[0]);
this.sortPaperData(res[1]);
this.getClassesForYear(this.classesByYear[0]);
this.lecturerGraphService.changeClasses(this.classesByYear[0]);
this.buildChart(0);
this.years.clear();
this.classesByYear = [];
}
private sortClassData(data: any) {
data.forEach(e => {
this.years.add(e.year);
});
this.currentYear = this.years[0];
this.years.forEach(year => {
this.classesByYear.push(data.filter((elem: ResponseGraphDetailsDao) => elem.year === year));
});
private sortPaperData(data: any) {
this.years.forEach(year => {
this.papersByYear.push(data.filter((elem: ResponseGraphDetailsDao) => elem.year === year));
});
}
private getClassesForYear(data: any) {
ywb16155
committed
this.classCodes = new Set();
data.forEach(rgd => {
this.classCodes.add(rgd.classCode);
}
private getSubmittedSeries(index: number): any {
const submitted = [];
if (this.currentClassCode) {
this.papersByYear[index].forEach(elem => {
if (elem.classCode === this.currentClassCode) {
submitted.push(elem.numberSubmitted);
}
});
} else {
this.classesByYear[index].forEach(elem => {
submitted.push(elem.numberSubmitted);
});
}
return {name: 'Submitted', data: submitted};
}
private getPendingSeries(index: number): any {
if (this.currentClassCode) {
this.papersByYear[index].forEach(elem => {
if (elem.classCode === this.currentClassCode) {
pending.push(elem.numberSubmitted);
}
});
} else {
this.classesByYear[index].forEach(elem => {
pending.push(elem.numberSubmitted);
});
}
return {name: 'Pending', data: pending};
}
private getXAxisHeaders(index: number) {
if (this.currentClassCode) {
return this.createPaperHeaders(index);
} else {
return this.createClassHeaders(index);
}
}
private createClassHeaders(index: number): string[] {
this.classesByYear[index].forEach(elem => {
xAxisHeaders.push(elem.classCode.toString());
});
return xAxisHeaders;
}
private createPaperHeaders(index: number): string[] {
const xAxisHeaders = [];
this.papersByYear[index].forEach(elem => {
ywb16155
committed
if (elem.classCode === this.currentClassCode && elem.year === this.currentYear) {
xAxisHeaders.push(elem.paperName.toString());
}
});
return xAxisHeaders;
}
private getTitle(): string {
if (this.currentClassCode) {
return 'Class Papers';
} else {
return 'Classes In The Year';
}
}
private buildChart(index: number): void {
this.responseChart = new Chart({
chart: {
type: 'column'
},
title: {
text: 'Total Student Responses For Each Class'
},
xAxis: {
categories: this.getXAxisHeaders(index),
text: this.getTitle()
},
yAxis: {
min: 0,
title: {
text: 'Number of Responses'
}
},
credits: {
enabled: false
},
series: [this.getSubmittedSeries(index), this.getPendingSeries(index)]
@HostListener('window:resize', ['$event'])
public onResize(event) {
const height = this.responseChart.height;
const width = this.responseChart.width / 2;
this.responseChart.height = height;
this.responseChart.width = width;
}
public switchYears() {
let i = 0;
this.classesByYear.forEach(elem => {
if (elem[0].year === this.currentYear) {
this.lecturerGraphService.changeYear(this.currentYear);
this.lecturerGraphService.changeClasses(this.classesByYear[i]);
this.getClassesForYear(this.classesByYear[i]);
this.currentClassCode = undefined;
this.buildChart(i);
return;
}
i++;
});
}
public switchClass() {
let i = 0;
if (this.currentYear === undefined) {
this.buildChart(0);
return;
}
this.classesByYear.forEach(elem => {
if (elem[0].year === this.currentYear) {
this.buildChart(i);
return;
}
i++;
});
}