Fix flag capture graph logic; Change initialization strategy

pull/17/head
HardiReady 2017-11-04 20:46:05 +01:00
parent e263ce050a
commit ee6dc8bc5b
3 changed files with 92 additions and 40 deletions

View File

@ -54,7 +54,7 @@
}
:host /deep/ .nav-link:hover {
background: #286090;
background: #afafaf;
color: #000;
}
@ -100,6 +100,21 @@
/* ########### CHART-TAB ######## */
.btn-dark {
background: #4b4b4b;
color: #f5f5f5;
border-color: #000;
}
.btn-dark:hover {
background: #afafaf;
color: #f5f5f5;
}
.btn-dark.active {
background: #222222;
}
.chart-container {
width: 95%;
margin: 2%;
@ -117,6 +132,6 @@
vertical-align: middle;
}
.dropdown-menu > li > a {
cursor: pointer;
}
/*.dropdown-menu > li > a {*/
/*cursor: pointer;*/
/*}*/

View File

@ -29,7 +29,7 @@
'left=20,top=20,width=1380,height=600,toolbar=1,resizable=0'); return false;"
href="resource/logs/{{war._id}}/clean.log">
Logfile anzeigen</a>
<form class="form-group">
<form *ngIf="staticTabs.tabs[0].active" class="form-group">
<label class="radio-inline">
<input type="radio" name="fractSelect"
[checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
@ -117,16 +117,16 @@
<!--</div>-->
<div class="chart-select-group btn-group" (click)="selectChart()">
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel"
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel"
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
btnRadio="{{labelTransport}}">{{labelTransport}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFlag}}">{{labelFlag}}</label>
<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFlag}}">{{labelFlag}}</label>
</div>
<div *ngIf="showLineChart" class="chart-container">

View File

@ -51,6 +51,8 @@ export class WarDetailComponent {
tmpStabilizeData;
tmpFlagCaptureData;
initialized;
colorScheme = {
domain: ['#0000FF', '#B22222']
};
@ -77,7 +79,6 @@ export class WarDetailComponent {
autoscale = true;
timeline = false;
roundDomains = true;
fractionChartsInitialized: boolean = false;
startDateObj;
@ -101,7 +102,14 @@ export class WarDetailComponent {
this.rows = war.players;
this.playerChart = ChartUtils.getSingleDataArray('CSAT', war.playersOpfor, 'NATO', war.playersBlufor);
this.fractionChartsInitialized = false;
this.initialized = {
basic: false,
budget: false,
kill: false,
revive: false,
transport: false,
flag: false
};
Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
this.chartSelectModel = this.labelPoints;
@ -134,25 +142,32 @@ export class WarDetailComponent {
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.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;
}
@ -180,7 +195,7 @@ export class WarDetailComponent {
}
loadFractionData() {
if (this.fractionChartsInitialized) {
if (this.initialized.basic) {
return;
}
@ -188,17 +203,11 @@ export class WarDetailComponent {
this.logsService.getFullLog(this.war._id).subscribe((data) => {
this.logData = data;
this.initPointData();
this.initBudgetData();
this.initKillData();
this.initRevive();
this.initTransportData();
this.initFlagHoldData();
this.addFinalTimeDataEntriesAndPopulate(new Date(this.war.endDate));
this.fractionChartsInitialized = true;
this.showLineChart = true;
this.lineChartLabel = this.labelPoints;
this.lineChartData = this.tmpPointData;
this.initialized.basic = true;
});
}
@ -207,9 +216,13 @@ export class WarDetailComponent {
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;
@ -221,9 +234,14 @@ export class WarDetailComponent {
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}))) {
@ -258,9 +276,16 @@ export class WarDetailComponent {
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);
@ -292,9 +317,15 @@ export class WarDetailComponent {
this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
}
}
this.addFinalTimeData(this.tmpReviveData);
this.addFinalTimeData(this.tmpStabilizeData);
this.initialized.revive = true;
}
initTransportData() {
if (this.initialized.transport) {
return;
}
let transportCountBlufor = 0, transportCountOpfor = 0;
for (const {transportEntry, index} of this.logData.transport.map((transportEntry, index) => ({
transportEntry,
@ -311,9 +342,15 @@ export class WarDetailComponent {
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));
@ -321,14 +358,17 @@ export class WarDetailComponent {
this.logData.flag.forEach(flagEntry => {
if (flagEntry.flagFraction === 'BLUFOR') {
flagStatusBlufor = !flagEntry.capture
flagStatusBlufor = !flagEntry.capture;
} else {
flagStatusOpfor = !flagEntry.capture;
}
this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.fraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
)
});
this.addFinalTimeData(this.tmpFlagCaptureData);
this.initialized.flag = true;
}
private static isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
@ -354,21 +394,18 @@ export class WarDetailComponent {
this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetOpfor));
}
addFinalTimeDataEntriesAndPopulate(endDate) {
[this.tmpPointData, this.tmpTransportData, this.tmpReviveData, this.tmpStabilizeData,
this.tmpKillData, this.tmpFrienlyFireData, this.tmpFlagCaptureData].forEach(tmp => {
for (let j in [0, 1]) {
if (tmp[j].series[tmp[j].series.length - 1].name < endDate) {
tmp[j].series.push(ChartUtils.getSeriesEntry(endDate, tmp[j].series[tmp[j].series.length - 1].value));
}
}
});
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));
this.showLineChart = true;
this.lineChartLabel = this.labelPoints;
this.lineChartData = this.tmpPointData;
} else {
for (let 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));
}
}
}
}
}