opt-cc/static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.ts

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {CampaignPlayer} from '../../../models/model-interfaces';
import {PlayerService} from '../../../services/logs/player.service';
import {ChartUtils} from '../../../utils/chart-utils';
import {PlayerUtils} from '../../../utils/player-utils';
import {TranslateService} from '@ngx-translate/core';


@Component({
  selector: 'campaign-player-detail',
  templateUrl: './campaign-player-detail.component.html',
  styleUrls: ['./campaign-player-detail.component.css', '../../../style/list-entry.css',
    '../../../style/hide-scrollbar.css', '../../../style/overview.css']
})
export class CampaignPlayerDetailComponent implements OnInit {

  @Input() campaignId: string;

  @Input() playerName: string;

  @Output() switchTab = new EventEmitter();

  campaignPlayer: CampaignPlayer = {name: '', campaign: {}, players: []};

  graphData: any[] = [];
  sumData: any[] = [];

  translations = {};

  colorScheme = {
    domain: ['#00ce12']
  };
  colorSchemeBar = {
    domain: [
      '#2d5a00', '#455600', '#00561f', '#3f3b00', '#003c19', '#083c00'
    ]
  };
  showRefLines = true;
  showRefLabels = true;
  gradient = false;
  xAxis = true;
  yAxis = true;
  legend = false;
  showXAxisLabel = true;
  showYAxisLabel = true;
  autoscale = false;
  timeline = false;
  roundDomains = true;

  kdRatio = 0;
  maxKd = 1.7;

  respawnDeathRatio = 0;
  maxRespawnDeathRatio = 1;

  playerAttributeNameMap = PlayerUtils.tmpAttributeDisplayNames.slice(2, PlayerUtils.tmpAttributeDisplayNames.length);

  constructor(private playerService: PlayerService,
              private translate: TranslateService) {
  }

  ngOnInit() {
    ['stats.player.detail.graph.average',
      'stats.player.detail.kill.death.ratio',
      'stats.player.detail.respawn.death.ratio'].forEach((i18n) => {
      this.translate.get(i18n).subscribe((translated) => {
        this.translations[i18n] = translated;
      });
    });

    this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
        .subscribe(campaignPlayer => {
          this.campaignPlayer = campaignPlayer;

          for (let i = 0; i < this.playerAttributeNameMap.length; i++) {
            const attr = this.playerAttributeNameMap[i];
            this.translate.get(attr.head).subscribe((translated) => {
              this.graphData.push({key: attr.prop, label: translated});
            });
          }

          this.initDataArray();

          const totalDeathDiv = this.graphData[7].total === 0 ? 1 : this.graphData[7].total;
          this.kdRatio = parseFloat((this.graphData[0].total / totalDeathDiv).toFixed(2));
          if (this.kdRatio > 1) {
            this.maxKd = this.kdRatio * 1.7;
          }

          this.respawnDeathRatio = parseFloat((this.graphData[8].total / totalDeathDiv).toFixed(2));

          // we can not directly push to target array, since only full reference changes trigger the refresh of data
          const tmpSumData = [];
          this.graphData.forEach(dataSet => {
            tmpSumData.push({name: dataSet.label, value: dataSet.total});
          });
          this.sumData = tmpSumData;
        });
  }

  private initDataArray() {
    this.graphData.forEach(dataSet => {
      const killObj = {
        name: dataSet.label,
        series: []
      };
      const playerLength = this.campaignPlayer.players.length;
      let total = 0;
      for (let i = 0; i < playerLength; i++) {
        const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
        const value = this.campaignPlayer.players[i][dataSet.key];
        killObj.series.push({
          name: warDateString,
          value: value
        });
        total += value;
      }

      dataSet.data = [killObj];
      dataSet.refLine = [{value: total / playerLength, name: this.translations['stats.player.detail.graph.average']}];
      dataSet.total = total;
    });
  }

  navigateBack() {
    this.switchTab.emit(0);
  }
}