response-chart.component.ts

import {Component, HostListener, 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/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 currentYear = 0;
  public currentClassCode: String;
  private lecturerId: string;

  constructor(private lecturerInfoService: LecturerInfoService,
              private lecturerGraphService: LecturerResponseGraphService) {
  }

  ngOnInit(): void {
    this.lecturerId = sessionStorage.getItem('username');
    this.currentClassCode = undefined;
    this.isLoading = true;
    this.years = new Set();
    this.classCodes = new Set();
    this.classesByYear = [];
    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.isLoading = false;
    });
  }

  ngOnDestroy(): void {
    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) {
    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 {
    const pending = [];
    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[] {
    const xAxisHeaders = [];
    this.classesByYear[index].forEach(elem => {
      xAxisHeaders.push(elem.classCode.toString());
    });
    return xAxisHeaders;
  }

  private createPaperHeaders(index: number): string[] {
    const xAxisHeaders = [];
    this.papersByYear[index].forEach(elem => {
      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),
        title: {
          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++;
    });
  }
}