Fix flag capture graph logic; Change initialization strategy

static/src/app/statistic/war-detail/war-detail.component.css

@@ -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 {
+/*.dropdown-menu > li > a {*/
-  cursor: pointer;
+  /*cursor: pointer;*/
-}
+/*}*/

static/src/app/statistic/war-detail/war-detail.component.html

@@ -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 btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
+        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
+        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
+        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
+        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
-        <label class="btn btn-default" [(ngModel)]="chartSelectModel"
+        <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">

static/src/app/statistic/war-detail/war-detail.component.ts

@@ -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.showLineChart = true;
-      this.initKillData();
+      this.lineChartLabel = this.labelPoints;
-      this.initRevive();
+      this.lineChartData = this.tmpPointData;
-      this.initTransportData();
+      this.initialized.basic = true;
-      this.initFlagHoldData();
-
-      this.addFinalTimeDataEntriesAndPopulate(new Date(this.war.endDate));
-
-      this.fractionChartsInitialized = 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) {
+  addFinalTimeData(tmpCollection) {
-    [this.tmpPointData, this.tmpTransportData, this.tmpReviveData, this.tmpStabilizeData,
+    const endDate = new Date(this.war.endDate);
-      this.tmpKillData, this.tmpFrienlyFireData, this.tmpFlagCaptureData].forEach(tmp => {
+    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 (let j in [0, 1]) {
-        if (tmp[j].series[tmp[j].series.length - 1].name < endDate) {
+        if (tmpCollection[j].series[tmpCollection[j].series.length - 1].name < endDate) {
-          tmp[j].series.push(ChartUtils.getSeriesEntry(endDate, tmp[j].series[tmp[j].series.length - 1].value));
+          tmpCollection[j].series.push(ChartUtils.getSeriesEntry(endDate, tmpCollection[j].series[tmpCollection[j].series.length - 1].value));
         }
       }
-    });
+    }
-    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;
   }
 
 }