369 lines
14 KiB
TypeScript
369 lines
14 KiB
TypeScript
import {Component, ElementRef, Input, SimpleChanges, ViewChild} from '@angular/core';
|
|
import * as d3 from 'd3';
|
|
import {ChartUtils} from '../../../utils/chart-utils';
|
|
import {Fraction} from '../../../utils/fraction.enum';
|
|
import {War} from '../../../models/model-interfaces';
|
|
|
|
|
|
@Component({
|
|
selector: 'war-detail-fraction',
|
|
templateUrl: './fraction-stats.component.html',
|
|
styleUrls: ['./fraction-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
|
|
})
|
|
export class FractionStatsComponent {
|
|
|
|
readonly fraction = Fraction;
|
|
|
|
@ViewChild('overview') private overviewContainer: ElementRef;
|
|
|
|
@Input() war: War;
|
|
|
|
@Input() logData: any;
|
|
|
|
startDateObj: Date;
|
|
|
|
initialized: any;
|
|
|
|
public chartSelectModel: string;
|
|
|
|
lineChartData: any[] = [];
|
|
areaChartData: any[] = [];
|
|
|
|
tmpPointData;
|
|
tmpBudgetData;
|
|
tmpKillData;
|
|
tmpFrienlyFireData;
|
|
tmpVehicleData;
|
|
tmpTransportData;
|
|
tmpReviveData;
|
|
tmpStabilizeData;
|
|
tmpFlagCaptureData;
|
|
|
|
colorScheme = {
|
|
domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
|
|
};
|
|
|
|
labelPoints = 'Punkte';
|
|
labelBudget = 'Budget';
|
|
labelKill = 'Kills';
|
|
labelFriendlyFire = 'FriendlyFire';
|
|
labelVehicle = 'Fahrzeug-Kills';
|
|
labelTransport = 'Lufttransport';
|
|
labelRevive = 'Revive';
|
|
labelStabilize = 'Stabilisiert';
|
|
labelFlag = 'Flaggenbesitz';
|
|
lineChartLabel: string = this.labelPoints;
|
|
|
|
showLineChart = true;
|
|
stepCurve = d3.curveStepAfter;
|
|
gradient = false;
|
|
yAxis = true;
|
|
xAxis = true;
|
|
legend = false;
|
|
legendTitle = false;
|
|
showXAxisLabel = false;
|
|
showYAxisLabel = true;
|
|
autoscale = true;
|
|
timeline = false;
|
|
roundDomains = true;
|
|
|
|
constructor() {
|
|
}
|
|
|
|
ngOnInit() {
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges) {
|
|
if (changes.war || changes.logData) {
|
|
this.initialized = {
|
|
budget: false,
|
|
kill: false,
|
|
revive: false,
|
|
transport: false,
|
|
flag: false
|
|
};
|
|
Object.assign(this, [this.lineChartData, this.areaChartData]);
|
|
this.chartSelectModel = this.labelPoints;
|
|
|
|
this.startDateObj = new Date(this.war.date);
|
|
this.startDateObj.setHours(0);
|
|
this.startDateObj.setMinutes(1);
|
|
this.loadFractionData();
|
|
}
|
|
}
|
|
|
|
selectChart() {
|
|
if (this.chartSelectModel !== this.labelFlag) {
|
|
this.showLineChart = true;
|
|
this.lineChartLabel = this.chartSelectModel;
|
|
switch (this.chartSelectModel) {
|
|
case this.labelPoints:
|
|
this.lineChartData = this.tmpPointData;
|
|
break;
|
|
case this.labelBudget:
|
|
this.initBudgetData();
|
|
this.lineChartData = this.tmpBudgetData;
|
|
break;
|
|
case this.labelKill:
|
|
this.initKillData();
|
|
this.lineChartData = this.tmpKillData;
|
|
break;
|
|
case this.labelFriendlyFire:
|
|
this.initKillData();
|
|
this.lineChartData = this.tmpFrienlyFireData;
|
|
break;
|
|
case this.labelVehicle:
|
|
this.initVehicleData();
|
|
this.lineChartData = this.tmpVehicleData;
|
|
break;
|
|
case this.labelRevive:
|
|
this.initRevive();
|
|
this.lineChartData = this.tmpReviveData;
|
|
break;
|
|
case this.labelStabilize:
|
|
this.initRevive();
|
|
this.lineChartData = this.tmpStabilizeData;
|
|
break;
|
|
case this.labelTransport:
|
|
this.initTransportData();
|
|
this.lineChartData = this.tmpTransportData;
|
|
break;
|
|
}
|
|
} else {
|
|
this.initFlagHoldData();
|
|
this.showLineChart = false;
|
|
this.areaChartData = this.tmpFlagCaptureData;
|
|
}
|
|
}
|
|
|
|
loadFractionData() {
|
|
this.initializeTempCollections();
|
|
this.initPointData();
|
|
this.showLineChart = true;
|
|
this.lineChartLabel = this.labelPoints;
|
|
this.lineChartData = this.tmpPointData;
|
|
}
|
|
|
|
initPointData() {
|
|
this.logData.points.forEach(pointEntry => {
|
|
this.tmpPointData[0].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptBlufor));
|
|
this.tmpPointData[1].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptOpfor));
|
|
});
|
|
this.addFinalTimeData(this.tmpPointData);
|
|
}
|
|
|
|
initBudgetData() {
|
|
if (this.initialized.budget) {
|
|
return;
|
|
}
|
|
this.logData.budget.forEach(budgetEntry => {
|
|
const budgetEntryDate = new Date(budgetEntry.time);
|
|
const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
|
|
const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
|
|
|
|
if (FractionStatsComponent.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
|
|
this.tmpBudgetData[fractionChange].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time), budgetEntry.newBudget));
|
|
this.tmpBudgetData[fractionOld].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time),
|
|
this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value));
|
|
}
|
|
});
|
|
this.addFinalTimeData(this.tmpBudgetData);
|
|
this.initialized.budget = true;
|
|
}
|
|
|
|
initKillData() {
|
|
if (this.initialized.kill) {
|
|
return;
|
|
}
|
|
let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0;
|
|
|
|
for (const {killEntry, index} of this.logData.kill.map((killEntry, index) => ({killEntry, index}))) {
|
|
const killEntryDate = new Date(killEntry.time);
|
|
if (killEntry.friendlyFire === false) {
|
|
if (killEntry.fraction === 'BLUFOR') {
|
|
killCountBlufor++;
|
|
}
|
|
if (killEntry.fraction === 'OPFOR') {
|
|
killCountOpfor++;
|
|
}
|
|
if (FractionStatsComponent.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
|
|
this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
|
|
this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
|
|
}
|
|
} else {
|
|
if (killEntry.fraction === 'BLUFOR') {
|
|
ffKillCountBlufor++;
|
|
}
|
|
if (killEntry.fraction === 'OPFOR') {
|
|
ffKillCountOpfor++;
|
|
}
|
|
if (FractionStatsComponent.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
|
|
this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
|
|
this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
|
|
}
|
|
}
|
|
if (index === this.logData.kill.length - 1) {
|
|
this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
|
|
this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
|
|
this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
|
|
this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
|
|
}
|
|
}
|
|
|
|
this.addFinalTimeData(this.tmpKillData);
|
|
this.addFinalTimeData(this.tmpFrienlyFireData);
|
|
this.initialized.kill = true;
|
|
}
|
|
|
|
initRevive() {
|
|
if (this.initialized.revive) {
|
|
return;
|
|
}
|
|
let reviveCountBlufor = 0, reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0;
|
|
for (const {reviveEntry, index} of this.logData.revive.map((reviveEntry, index) => ({reviveEntry, index}))) {
|
|
const reviveEntryDate = new Date(reviveEntry.time);
|
|
if (reviveEntry.stabilized === false) {
|
|
if (reviveEntry.fraction === 'BLUFOR') {
|
|
reviveCountBlufor++;
|
|
} else {
|
|
reviveCountOpfor++;
|
|
}
|
|
if (FractionStatsComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
|
|
this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
|
|
this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
|
|
}
|
|
} else {
|
|
if (reviveEntry.fraction === 'BLUFOR') {
|
|
stabilizeCountBlufor++;
|
|
} else {
|
|
stabilizeCountOpfor++;
|
|
}
|
|
if (FractionStatsComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
|
|
this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
|
|
this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
|
|
}
|
|
}
|
|
if (index === this.logData.revive.length - 1) {
|
|
this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
|
|
this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
|
|
this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
|
|
this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
|
|
}
|
|
}
|
|
this.addFinalTimeData(this.tmpReviveData);
|
|
this.addFinalTimeData(this.tmpStabilizeData);
|
|
this.initialized.revive = true;
|
|
}
|
|
|
|
initVehicleData() {
|
|
if (this.initialized.vehicle) {
|
|
return;
|
|
}
|
|
let vehicleKillCountBlufor = 0, vehicleKillCountOpfor = 0;
|
|
for (const {transportEntry: vehicleEntry, index} of this.logData.vehicle.map((transportEntry, index) => ({
|
|
transportEntry,
|
|
index
|
|
}))) {
|
|
const vehicleEntryDate = new Date(vehicleEntry.time);
|
|
if (vehicleEntry.fraction === 'BLUFOR') {
|
|
vehicleKillCountBlufor++;
|
|
} else {
|
|
vehicleKillCountOpfor++;
|
|
}
|
|
if (FractionStatsComponent.isTwoMinutesAhead(vehicleEntryDate, this.tmpVehicleData) || index === this.logData.vehicle.length - 1) {
|
|
this.tmpVehicleData[0].series.push(ChartUtils.getSeriesEntry(vehicleEntryDate, vehicleKillCountBlufor));
|
|
this.tmpVehicleData[1].series.push(ChartUtils.getSeriesEntry(vehicleEntryDate, vehicleKillCountOpfor));
|
|
}
|
|
}
|
|
this.addFinalTimeData(this.tmpVehicleData);
|
|
this.initialized.vehicle = true;
|
|
}
|
|
|
|
initTransportData() {
|
|
if (this.initialized.transport) {
|
|
return;
|
|
}
|
|
let transportCountBlufor = 0, transportCountOpfor = 0;
|
|
for (const {transportEntry, index} of this.logData.transport.map((transportEntry, index) => ({
|
|
transportEntry,
|
|
index
|
|
}))) {
|
|
const transportEntryDate = new Date(transportEntry.time);
|
|
if (transportEntry.fraction === 'BLUFOR') {
|
|
transportCountBlufor++;
|
|
} else {
|
|
transportCountOpfor++;
|
|
}
|
|
if (FractionStatsComponent.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
|
|
this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountBlufor));
|
|
this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountOpfor));
|
|
}
|
|
}
|
|
this.addFinalTimeData(this.tmpTransportData);
|
|
this.initialized.transport = true;
|
|
}
|
|
|
|
initFlagHoldData() {
|
|
if (this.initialized.flag) {
|
|
return;
|
|
}
|
|
let flagStatusBlufor = true;
|
|
let flagStatusOpfor = true;
|
|
this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusBlufor));
|
|
this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusOpfor));
|
|
|
|
this.logData.flag.forEach(flagEntry => {
|
|
if (flagEntry.flagFraction === 'BLUFOR') {
|
|
flagStatusBlufor = !flagEntry.capture;
|
|
} else {
|
|
flagStatusOpfor = !flagEntry.capture;
|
|
}
|
|
this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
|
|
ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
|
|
);
|
|
});
|
|
|
|
this.addFinalTimeData(this.tmpFlagCaptureData);
|
|
this.initialized.flag = true;
|
|
}
|
|
|
|
protected static isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
|
|
return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000);
|
|
}
|
|
|
|
initializeTempCollections() {
|
|
this.tmpPointData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpKillData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpVehicleData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpTransportData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpReviveData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpStabilizeData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
this.tmpFlagCaptureData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
|
|
|
|
[this.tmpKillData, this.tmpFrienlyFireData, this.tmpVehicleData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => {
|
|
[0, 1].forEach(index => {
|
|
tmp[index].series.push(ChartUtils.getSeriesEntry(this.startDateObj, 0));
|
|
});
|
|
});
|
|
this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetBlufor));
|
|
this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetOpfor));
|
|
}
|
|
|
|
addFinalTimeData(tmpCollection) {
|
|
const endDate = new Date(this.war.endDate);
|
|
if (tmpCollection === this.tmpBudgetData) {
|
|
this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetBlufor));
|
|
this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetOpfor));
|
|
} else {
|
|
for (const j in [0, 1]) {
|
|
if (tmpCollection[j].series[tmpCollection[j].series.length - 1].name < endDate) {
|
|
tmpCollection[j].series.push(ChartUtils.getSeriesEntry(endDate, tmpCollection[j].series[tmpCollection[j].series.length - 1].value));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|