opt-cc/static/src/app/statistic/war/server-stats/server-stats.component.ts

import {Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import {War} from '../../../models/model-interfaces';
import {TranslateService} from '@ngx-translate/core';


@Component({
  selector: 'cc-server-statistics',
  templateUrl: './server-stats.component.html',
  styleUrls: ['./server-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
})
export class ServerStatsComponent implements OnInit, OnChanges {

  @ViewChild('overview') private overviewContainer: ElementRef;

  @Input() war: War;

  @Input() performanceData: any;

  startDateObj: Date;

  public activeChartSelect: string;

  barChartData: any[] = [];

  lineChartData: any[] = [];

  showBarChart = true;

  tmpSingleAvg;
  tmpSingleMin;
  tmpAvgTimeline;
  tmpMinTimeline;
  tmpServerTimeline;

  readonly labels = {
    singleAvg: 'stats.performance.select.single.avg',
    singleMin: 'stats.performance.select.single.min',
    avgTimeline: 'stats.performance.select.timeline.avg',
    minTimeline: 'stats.performance.select.timeline.min',
    serverFps: 'stats.performance.select.timeline.server',
  };
  readonly labelsAsString = Object.keys(this.labels)
                                  .map((key) => this.labels[key]);

  barChartLabel: string;
  lineChartLabel: string;

  gradient = false;
  yAxis = true;
  xAxis = true;
  legend = false;
  legendTitle = false;
  showXAxisLabel = false;
  showYAxisLabel = true;
  autoscale = true;
  timeline = false;
  roundDomains = true;

  constructor(private translate: TranslateService) {
  }

  ngOnInit() {
    this.setBarChartLabel(this.labels.singleAvg);
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.war || changes.performanceData) {
      this.initializeChartData();
      Object.assign(this, [this.barChartData]);
      this.activeChartSelect = this.labels.singleAvg;
      this.startDateObj = new Date(this.war.date);
      this.startDateObj.setHours(0);
      this.startDateObj.setMinutes(1);
    }
  }

  selectChart(newSelection) {
    this.activeChartSelect = newSelection;
    if (this.activeChartSelect !== this.labels.serverFps) {
      this.showBarChart = true;
      this.setBarChartLabel(this.activeChartSelect);
      switch (this.activeChartSelect) {
        case this.labels.singleAvg:
          this.barChartData = this.tmpSingleAvg;
          break;
        case this.labels.singleMin:
          this.barChartData = this.tmpSingleMin;
          break;
      }
    } else {
      this.showBarChart = false;
      this.setLineChartLabel(this.activeChartSelect);
      switch (this.activeChartSelect) {
        case this.labels.avgTimeline:
          this.lineChartData = this.tmpAvgTimeline;
          break;
        case this.labels.minTimeline:
          this.lineChartData = this.tmpMinTimeline;
          break;
        case this.labels.serverFps:
          this.lineChartData = this.tmpServerTimeline;
      }
    }
  }

  initializeChartData() {
    this.tmpSingleAvg = [];
    this.tmpSingleMin = [];
    this.performanceData.forEach((entry) => {
      this.tmpSingleAvg.push({
        name: entry.entityName,
        value: entry.singleAvgFps
      });
      this.tmpSingleMin.push({
        name: entry.entityName,
        value: entry.singleMinFps
      });
    });
    this.tmpSingleAvg.sort((a, b) => a.value - b.value);
    this.tmpSingleMin.sort((a, b) => a.value - b.value);
    this.barChartData = this.tmpSingleAvg;
  }

  setLineChartLabel(i18n: string) {
    this.translate.get(i18n).subscribe((translated) => {
      this.lineChartLabel = translated;
    });
  }

  setBarChartLabel(i18n: string) {
    this.translate.get(i18n).subscribe((translated) => {
      this.barChartLabel = translated;
    });
  }
}