import {Component, Input, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; import {CampaignService} from '../../../services/logs/campaign.service'; import {ChartUtils} from '../../../utils/chart-utils'; import {Fraction} from '../../../utils/fraction.enum'; @Component({ selector: 'stats-overview', templateUrl: './stats-overview.component.html', styleUrls: ['./stats-overview.component.css', '../../../style/list-entry.css', '../../../style/overview.css'] }) export class StatisticOverviewComponent implements OnInit { @Input() campaigns; id = ''; title = ''; pointData: any[] = []; pointSumData: any[] = []; playerData: any[] = []; currentData: any[] = []; activeSlideIndex; colorScheme = { domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR] }; gradient = false; xAxis = true; yAxis = true; roundDomains = true; legend = true; legendTitle = ''; showXAxisLabel = true; showYAxisLabel = true; yAxisLabel = ''; autoscale = true; timeline = false; constructor(private route: ActivatedRoute, private campaignService: CampaignService) { } ngOnInit() { this.route.params .map(params => params['id']) .subscribe((id) => { this.id = id; if (this.campaignService.campaigns) { this.initWars(this.campaignService.campaigns); } else { this.campaignService.getAllCampaigns().subscribe(campaigns => { this.initWars(campaigns); }); } }); } initWars(campaigns) { let wars = []; let itemsProcessed = 0; campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id); campaigns.forEach(campaign => { wars = wars.concat(campaign.wars); itemsProcessed++; if (itemsProcessed === campaigns.length) { if (this.id === 'all') { this.title = 'Gesamtübersicht'; wars.sort((a, b) => { // sort by dates, because older campaign can contain newer war if (a['date'] > (b['date'])) { return -1; } if (a['date'] < (b['date'])) { return 1; } return 0; }); } else { this.title = campaign.title; } this.initChart(wars); } }); } goToSlide(index: number) { switch (index) { case 0: this.currentData = this.pointSumData; this.yAxisLabel = 'Gesamtpunkte'; break; case 1: this.currentData = this.pointData; this.yAxisLabel = 'Punkte'; break; case 2: this.currentData = this.playerData; this.yAxisLabel = 'Anzahl Spieler'; break; } this.activeSlideIndex = index; } initChart(wars: any[]) { const pointsObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); const pointsSumObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); const playersObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR); for (let i = wars.length - 1; i >= 0; i--) { const j = wars.length - i - 1; const warDateString = ChartUtils.getShortDateString(wars[i].date); pointsObj[0].series.push({ name: warDateString, value: wars[i].ptBlufor }); pointsObj[1].series.push({ name: warDateString, value: wars[i].ptOpfor }); pointsSumObj[0].series.push({ name: warDateString, value: pointsSumObj[0].series[j - 1] ? pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor : wars[i].ptBlufor }); pointsSumObj[1].series.push({ name: warDateString, value: pointsSumObj[1].series[j - 1] ? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor : wars[i].ptOpfor }); playersObj[0].series.push({ name: warDateString, value: wars[i].playersBlufor }); playersObj[1].series.push({ name: warDateString, value: wars[i].playersOpfor }); } this.pointData = pointsObj; this.pointSumData = pointsSumObj; this.playerData = playersObj; if (this.id !== 'all') { this.goToSlide(0); } else { this.goToSlide(1); } Object.assign(this, this.currentData); } isActiveSlide(index) { return this.activeSlideIndex === index ? '#d9edf7' : 'white'; } }