student-response-chart.component.ts

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()]
    });
  }
}