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