import {Component, ElementRef, Input, OnChanges, OnInit, 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 implements OnInit, OnChanges { 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 (this.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((kill, pos) => ({killEntry: kill, index: pos}))) { const killEntryDate = new Date(killEntry.time); if (killEntry.friendlyFire === false) { if (killEntry.fraction === 'BLUFOR') { killCountBlufor++; } if (killEntry.fraction === 'OPFOR') { killCountOpfor++; } if (this.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 (this.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((revive, pos) => ({reviveEntry: revive, index: pos}))) { const reviveEntryDate = new Date(reviveEntry.time); if (reviveEntry.stabilized === false) { if (reviveEntry.fraction === 'BLUFOR') { reviveCountBlufor++; } else { reviveCountOpfor++; } if (this.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 (this.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((transport, pos) => ({ transportEntry: transport, index: pos }))) { const vehicleEntryDate = new Date(vehicleEntry.time); if (vehicleEntry.fraction === 'BLUFOR') { vehicleKillCountBlufor++; } else { vehicleKillCountOpfor++; } if (this.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((transport, pos) => ({ transportEntry: transport, index: pos }))) { const transportEntryDate = new Date(transportEntry.time); if (transportEntry.fraction === 'BLUFOR') { transportCountBlufor++; } else { transportCountOpfor++; } if (this.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 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) ); } } } } }