142 lines
3.7 KiB
TypeScript
142 lines
3.7 KiB
TypeScript
import {Component, 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';
|
|
import {WarService} from '../../../services/logs/war.service';
|
|
|
|
|
|
@Component({
|
|
selector: 'cc-campaign-overview',
|
|
templateUrl: './campaign-overview.component.html',
|
|
styleUrls: ['./campaign-overview.component.css']
|
|
})
|
|
export class StatisticOverviewComponent implements OnInit {
|
|
|
|
id: string;
|
|
|
|
initialized = false;
|
|
|
|
pointData: any[] = [];
|
|
pointSumData: any[] = [];
|
|
playerData: any[] = [];
|
|
currentData: any[] = [];
|
|
|
|
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,
|
|
private warService: WarService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.route.params
|
|
.map(params => params['id'])
|
|
.subscribe((id) => {
|
|
this.id = id;
|
|
this.initWars();
|
|
});
|
|
}
|
|
|
|
initWars() {
|
|
if (this.id === 'all') {
|
|
this.warService.getAllWars().subscribe((wars) => {
|
|
this.initChart(wars);
|
|
});
|
|
this.timeline = true;
|
|
} else {
|
|
this.warService.wars$.subscribe((wars) => {
|
|
this.initChart(wars);
|
|
})
|
|
}
|
|
}
|
|
|
|
goToSlide(index) {
|
|
switch (parseInt(index, 10)) {
|
|
case 0:
|
|
this.currentData = this.pointSumData;
|
|
this.yAxisLabel = 'stats.graph.select.sum.points';
|
|
break;
|
|
case 1:
|
|
this.currentData = this.pointData;
|
|
this.yAxisLabel = 'stats.graph.select.battle.points';
|
|
break;
|
|
case 2:
|
|
this.currentData = this.playerData;
|
|
this.yAxisLabel = 'stats.graph.select.player.count';
|
|
break;
|
|
}
|
|
}
|
|
|
|
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 war = wars[i];
|
|
if (!war) {
|
|
continue;
|
|
}
|
|
const j = wars.length - i - 1;
|
|
const warDate = (this.id === 'all') ? new Date(war.date) : ChartUtils.getShortDateString(war.date);
|
|
|
|
pointsObj[0].series.push({
|
|
name: warDate,
|
|
value: war.ptBlufor
|
|
});
|
|
pointsObj[1].series.push({
|
|
name: warDate,
|
|
value: war.ptOpfor
|
|
});
|
|
pointsSumObj[0].series.push({
|
|
name: warDate,
|
|
value: pointsSumObj[0].series[j - 1] ?
|
|
pointsSumObj[0].series[j - 1].value + war.ptBlufor :
|
|
war.ptBlufor
|
|
});
|
|
pointsSumObj[1].series.push({
|
|
name: warDate,
|
|
value: pointsSumObj[1].series[j - 1]
|
|
? pointsSumObj[1].series[j - 1].value + war.ptOpfor :
|
|
war.ptOpfor
|
|
});
|
|
playersObj[0].series.push({
|
|
name: warDate,
|
|
value: war.playersBlufor
|
|
});
|
|
playersObj[1].series.push({
|
|
name: warDate,
|
|
value: war.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);
|
|
|
|
setTimeout(() => {
|
|
this.initialized = true;
|
|
}, 250);
|
|
}
|
|
}
|