import {Component} from "@angular/core"; import {ActivatedRoute} from "@angular/router"; import {CarouselConfig} from "ngx-bootstrap"; import {CampaignService} from "../../services/campaign-service/campaign.service"; import {ChartUtils} from "../../utils/chart-utils"; @Component({ selector: 'stats-overview', templateUrl: './stats-overview.component.html', styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css'], inputs: ['campaigns'], providers: [{provide: CarouselConfig, useValue: {interval: false}}] }) export class StatisticOverviewComponent { id = ""; title = ""; pointData: any[] = []; pointSumData: any[] = []; playerData: any[] = []; currentData: any[] = []; activeSlideIndex; colorScheme = { domain: ['#0000FF', '#B22222'] }; 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[]) { let pointsObj = [ { "name": "NATO", "series": [] }, { "name": "CSAT", "series": [] }]; let pointsSumObj = JSON.parse(JSON.stringify(pointsObj)); let playersObj = JSON.parse(JSON.stringify(pointsObj)); for (let i = wars.length - 1; i >= 0; i--) { let 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' } }