opt-cc/static/src/app/statistic/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';


@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 = {campaign: {}, players: []};

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

  yAxisKill = 'Kills';
  yAxisFriendlyFire = 'FriendlyFire';
  yAxisVehicleLight = 'Fahrzeug (Light)';
  yAxisVehicleHeavy = 'Fahrzeug (Heavy)';
  yAxisVehicleAir = 'Fahrzeug (Air)';
  yAxisDeath = 'Tode';
  yAxisRespawn = 'Respawn';
  yAxisRevive = 'Revive';
  yAxisCapture = 'Eroberungen';
  avgLabel = 'Durchschnitt';

  colorScheme = {
    domain: ['#00ce12']
  };
  colorSchemeBar = {
    domain: [
      '#2d5a00', '#455600', '#00561f', '#3f3b00', '#003c19', '#083c00'
    ]
  };
  showRefLines = true;
  showRefLabels = true;
  killRefLines = [];
  vehicleLightRefLines = [];
  vehicleHeavyRefLines = [];
  vehicleAirRefLines = [];
  deathRefLines = [];
  captureRefLines = [];
  friendlyFireRefLines = [];
  reviveRefLines = [];
  respawnRefLines = [];

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

  totalKills;
  totalFriendlyFire;
  totalVehicleLight;
  totalVehicleHeavy;
  totalVehicleAir;
  totalDeath;
  totalRespawn;
  totalRevive;
  totalCapture;

  kdRatio = 0;
  maxKd = 1.7;

  respawnDeathRatio = 0;
  maxRespawnDeathRatio = 1;


  constructor(private playerService: PlayerService) {
  }

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

          this.graphData = [
            {
              data: this.assignData(this.yAxisKill, 'kill'),
              refLine: this.killRefLines,
              label: this.yAxisKill,
              total: this.totalKills
            },
            {
              data: this.assignData(this.yAxisFriendlyFire, 'friendlyFire'),
              refLine: this.friendlyFireRefLines,
              label: this.yAxisFriendlyFire,
              total: this.totalFriendlyFire
            },
            {
              data: this.assignData(this.yAxisDeath, 'death'),
              refLine: this.deathRefLines,
              label: this.yAxisDeath,
              total: this.totalDeath
            },
            {
              data: this.assignData(this.yAxisRespawn, 'respawn'),
              refLine: this.respawnRefLines,
              label: this.yAxisRespawn,
              total: this.totalRespawn
            },
            {
              data: this.assignData(this.yAxisRevive, 'revive'),
              refLine: this.reviveRefLines,
              label: this.yAxisRevive,
              total: this.totalRevive
            },
            {
              data: this.assignData(this.yAxisCapture, 'flagTouch'),
              refLine: this.captureRefLines,
              label: this.yAxisCapture,
              total: this.totalCapture
            },
            {
              data: this.assignData(this.yAxisVehicleLight, 'vehicleLight'),
              refLine: this.vehicleLightRefLines,
              label: this.yAxisVehicleLight,
              total: this.totalVehicleLight
            },
            {
              data: this.assignData(this.yAxisVehicleHeavy, 'vehicleHeavy'),
              refLine: this.vehicleHeavyRefLines,
              label: this.yAxisVehicleHeavy,
              total: this.totalVehicleHeavy
            },
            {
              data: this.assignData(this.yAxisVehicleAir, 'vehicleAir'),
              refLine: this.vehicleAirRefLines,
              label: this.yAxisVehicleAir,
              total: this.totalVehicleAir
            },
          ];

          const totalDeathDiv = this.totalDeath === 0 ? 1 : this.totalDeath;
          this.kdRatio = parseFloat((this.totalKills / totalDeathDiv).toFixed(2));
          if (this.kdRatio > 1) {
            this.maxKd = this.kdRatio * 1.7;
          }

          this.respawnDeathRatio = parseFloat((this.totalRespawn / 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 assignData(label, field) {
    const killObj = {
      name: 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][field];
      killObj.series.push({
        name: warDateString,
        value: value
      });
      total += value;
    }
    switch (field) {
      case 'kill':
        this.killRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalKills = total;
        break;
      case 'friendlyFire':
        this.friendlyFireRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalFriendlyFire = total;
        break;
      case 'death':
        this.deathRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalDeath = total;
        break;
      case 'respawn':
        this.respawnRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalRespawn = total;
        break;
      case 'revive':
        this.reviveRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalRevive = total;
        break;
      case 'flagTouch':
        this.captureRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalCapture = total;
        break;
      case 'vehicleLight':
        this.vehicleLightRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalVehicleLight = total;
        break;
      case 'vehicleHeavy':
        this.vehicleHeavyRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalVehicleHeavy = total;
        break;
      case 'vehicleAir':
        this.vehicleAirRefLines.push({value: total / playerLength, name: this.avgLabel});
        this.totalVehicleAir = total;
        break;
    }
    return [killObj];
  }

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

}