Use min interval for fraction stats

static/src/app/statistic/overview/stats-overview.component.ts

@@ -97,7 +97,6 @@ export class StatisticOverviewComponent {
         break;
     }
     this.activeSlideIndex = index;
-
   }
 
   initChart(wars: any[]) {

static/src/app/statistic/stats.module.ts

@@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/logs/war.service";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
-import {AccordionModule, TabsModule} from "ngx-bootstrap";
+import {AccordionModule, BsDropdownModule, ButtonsModule, TabsModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/logs/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 import {PlayerService} from "../services/logs/player.service";
@@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -42,19 +42,10 @@
   color: blue;
 }
 
-.chart-container {
-  width: 90%;
-  margin: 2%;
-  min-width: 900px;
-  height: 400px;
-  padding: 15px;
-  float: left;
-}
-
 /* ########### TABS ########### */
 
 :host /deep/ .nav-tabs {
-  padding-left: 35%!important;
+  padding-left: 35% !important;
 }
 
 :host /deep/ .nav-link {
@@ -67,7 +58,7 @@
   color: #000;
 }
 
-:host /deep/ .nav-tabs>li.active>a{
+:host /deep/ .nav-tabs > li.active > a {
   background: #222222;
   color: white;
 }
@@ -107,3 +98,25 @@
   background-color: #f7f7f7;
 }
 
+/* ########### CHART-TAB ######## */
+
+.chart-container {
+  width: 95%;
+  margin: 2%;
+  min-width: 900px;
+  height: 600px;
+  padding: 15px;
+  float: left;
+}
+
+.chart-select-group {
+  width: 50%;
+  margin: auto;
+  position: inherit;
+  display: block;
+  vertical-align: middle;
+}
+
+.dropdown-menu > li > a {
+  cursor: pointer;
+}

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

@@ -25,8 +25,10 @@
       </div>
 
       <div class="pull-left " style="padding-left: 150px; padding-top:15px">
-        <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
-          anzeigen</a>
+        <a class="btn btn-default" style="margin: 20px" target="_blank" onclick="window.open(this.href, 'logfileWindow',
+'left=20,top=20,width=1100,height=600,toolbar=1,resizable=0'); return false;"
+           href="resource/logs/{{war._id}}/clean.log">
+          Logfile anzeigen</a>
         <form class="form-group">
           <label class="radio-inline">
             <input type="radio" name="fractSelect"
@@ -94,10 +96,43 @@
       <ng-template tabHeading>
         <img src="../../../assets/fraction-btn.png"> Fraktionen
       </ng-template>
-      <div class="fade-in chart-container">
+
+      <!--<div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>-->
+        <!--<button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">-->
+          <!--{{dataMode}} <span class="caret"></span>-->
+        <!--</button>-->
+        <!--<ul *dropdownMenu class="dropdown-menu" role="menu">-->
+          <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>-->
+          <!--<li class="divider dropdown-divider"></li>-->
+          <!--<li class="disabled" role="menuitem">-->
+            <!--<a class="dropdown-item" style="cursor: default!important;">Interval:</a>-->
+          <!--</li>-->
+          <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(1, '1 Minute')">1 Minute</a></li>-->
+          <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(5, '5 Minuten')">5 Minuten</a></li>-->
+          <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(10, '10 Minuten')">10 Minuten</a>-->
+          <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(20, '20 Minuten')">20 Minuten</a>-->
+          <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(40, '40 Minuten')">40 Minuten</a>-->
+          <!--</li>-->
+        <!--</ul>-->
+      <!--</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="{{labelFlag}}">{{labelFlag}}</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"
+               btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel"
+               btnRadio="{{labelTransport}}">{{labelTransport}}</label>
+      </div>
+
+      <div *ngIf="showLineChart" class="chart-container">
         <ngx-charts-line-chart
           [scheme]="colorScheme"
-          [results]="pointData"
+          [results]="lineChartData"
           [gradient]="gradient"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -105,118 +140,17 @@
           [legendTitle]="legendTitle"
           [showXAxisLabel]="showXAxisLabel"
           [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelPoints"
+          [yAxisLabel]="lineChartLabel"
           [autoScale]="autoscale"
           [timeline]="timeline"
           [roundDomains]="roundDomains">
         </ngx-charts-line-chart>
       </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="budgetData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelBudget"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="killData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelKill"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="friendlyFireData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelFriendlyFire"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="transportData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelTransport"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="reviveData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelRevive"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="stabilizedData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelStabilize"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
+
+      <div *ngIf="!showLineChart" class="chart-container">
         <ngx-charts-area-chart
           [scheme]="colorScheme"
-          [results]="flagData"
+          [results]="areaChartData"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           [curve]="stepCurve"
@@ -224,7 +158,7 @@
           [legendTitle]="legendTitle"
           [showXAxisLabel]="showXAxisLabel"
           [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelFlag"
+          [yAxisLabel]="labelFlag"
           [autoScale]="autoscale"
           [timeline]="timeline"
           [roundDomains]="false">

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

@@ -1,3 +1,4 @@
+///<reference path="../../utils/chart-utils.ts"/>
 import {Component, ElementRef, ViewChild} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
 import {WarService} from "../../services/logs/war.service";
@@ -21,6 +22,8 @@ export class WarDetailComponent {
 
   war: War = {players: []};
 
+  public chartSelectModel: string;
+
   fractionRadioSelect: string;
 
   playerChart: any[] = [];
@@ -36,14 +39,8 @@ export class WarDetailComponent {
     sortDescending: 'glyphicon glyphicon-triangle-bottom',
   };
 
-  pointData: any[] = [];
-  budgetData: any[] = [];
-  killData: any[] = [];
-  friendlyFireData: any[] = [];
-  transportData: any[] = [];
-  reviveData: any[] = [];
-  stabilizedData: any[] = [];
-  flagData: any[] = [];
+  lineChartData: any[] = [];
+  areaChartData: any[] = [];
 
   tmpPointData;
   tmpBudgetData;
@@ -58,15 +55,17 @@ export class WarDetailComponent {
     domain: ['#0000FF', '#B22222']
   };
 
-  yAxisLabelPoints = 'Punkte';
-  yAxisLabelBudget = 'Budget';
-  yAxisLabelKill = 'Kills';
-  yAxisLabelFriendlyFire = 'FriendlyFire';
-  yAxisLabelTransport = 'Lufttransport';
-  yAxisLabelRevive = 'Revive';
-  yAxisLabelStabilize = 'Stabilisiert';
-  yAxisLabelFlag = 'Flaggenbesitz';
+  labelPoints = 'Punkte';
+  labelBudget = 'Budget';
+  labelKill = 'Kills';
+  labelFriendlyFire = 'FriendlyFire';
+  labelTransport = 'Lufttransport';
+  labelRevive = 'Revive';
+  labelStabilize = 'Stabilisiert';
+  labelFlag = 'Flaggenbesitz';
+  lineChartLabel = this.labelPoints;
 
+  showLineChart = true;
   stepCurve = d3.curveStepAfter;
   gradient = false;
   yAxis = true;
@@ -80,6 +79,12 @@ export class WarDetailComponent {
   roundDomains = true;
   fractionChartsInitialized: boolean = false;
 
+  startDateObj;
+
+  dataMode: string = 'Summe';
+  dataInterval: number = 0;
+  logData;
+
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
@@ -94,38 +99,17 @@ export class WarDetailComponent {
       .subscribe(war => {
         this.war = war;
         this.rows = war.players;
-        this.playerChart = [
-          {
-            "name": "CSAT",
-            "value": war.playersOpfor
-          },
-          {
-            "name": "NATO",
-            "value": war.playersBlufor
-          }
-        ];
-        this.tmpPointData = [
-          {
-            "name": "NATO",
-            "series": []
-          },
-          {
-            "name": "CSAT",
-            "series": []
-          }
-        ];
-        this.tmpBudgetData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpKillData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpFrienlyFireData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpTransportData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpReviveData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpStabilizeData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpFlagCaptureData = JSON.parse(JSON.stringify(this.tmpPointData));
-
-        Object.assign(this, [this.playerChart, this.pointData, this.budgetData, this.killData,
-          this.friendlyFireData, this.transportData, this.reviveData, this.stabilizedData, this.flagData]);
+        this.playerChart = ChartUtils.getSingleDataArray('CSAT', war.playersOpfor, 'NATO', war.playersBlufor);
 
         this.fractionChartsInitialized = false;
+        Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
+        this.chartSelectModel = this.labelPoints;
+
+        this.startDateObj = new Date(this.war.date);
+        this.startDateObj.setHours(0);
+        this.startDateObj.setMinutes(1);
+
+        this.fractionRadioSelect = undefined;
         this.staticTabs.tabs[0].active = true;
         this.scrollOverviewTop();
       });
@@ -141,6 +125,39 @@ export class WarDetailComponent {
     }
   }
 
+  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.lineChartData = this.tmpBudgetData;
+          break;
+        case this.labelKill:
+          this.lineChartData = this.tmpKillData;
+          break;
+        case this.labelFriendlyFire:
+          this.lineChartData = this.tmpFrienlyFireData;
+          break;
+        case this.labelRevive:
+          this.lineChartData = this.tmpReviveData;
+          break;
+        case this.labelStabilize:
+          this.lineChartData = this.tmpStabilizeData;
+          break;
+        case this.labelTransport:
+          this.lineChartData = this.tmpTransportData;
+          break;
+      }
+    } else {
+      this.showLineChart = false;
+      this.areaChartData = this.tmpFlagCaptureData;
+    }
+  }
+
   selectPlayerDetail(player) {
     if (player && player.selected && player.selected.length > 0) {
       this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
@@ -155,125 +172,172 @@ export class WarDetailComponent {
     }
   }
 
+  toggleDataMode(interval, entryString) {
+    this.dataInterval = interval;
+    this.dataMode = entryString;
+    this.initTransportData();
+    this.lineChartData = this.tmpTransportData;
+  }
+
   loadFractionData() {
     if (this.fractionChartsInitialized) {
       return;
     }
 
-    const newFractionGraphEntry = (entry: any, val1: any, val2: any) => {
-      return ChartUtils.getSeriesEntry(new Date(entry.time), entry.fraction === 'BLUFOR' ? val1 : val2);
-    };
-
-    const startDateObj = new Date(this.war.date);
-    startDateObj.setHours(0);
-    startDateObj.setMinutes(1);
+    this.tmpPointData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpBudgetData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpKillData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpTransportData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpReviveData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpStabilizeData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpFlagCaptureData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
 
     [this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => {
       [0, 1].forEach(index => {
-        tmp[index].series.push(ChartUtils.getSeriesEntry(startDateObj, 0));
+        tmp[index].series.push(ChartUtils.getSeriesEntry(this.startDateObj, 0));
       })
     });
 
-    let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0, reviveCountBlufor = 0,
-      reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0, transportCountBlufor = 0,
-      transportCountOpfor = 0;
-
     this.logsService.getFullLog(this.war._id).subscribe((data) => {
-      // POINTS
-      data.points.forEach(pointEntry => {
+      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;
+    });
+  }
+
+  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));
     });
+  }
 
-      // BUDGET
-      this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(startDateObj, this.war.budgetBlufor));
-      this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(startDateObj, this.war.budgetOpfor));
+  initBudgetData() {
+    this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetBlufor));
+    this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetOpfor));
     // This adds an entry for both fractions on every event
-      for (let i = 0; i < data.budget.length; i++) {
-        const budgetEntry = data.budget[i];
+    for (let i = 0; i < this.logData.budget.length; i++) {
+      const budgetEntry = this.logData.budget[i];
       const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
       const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
 
+      if (WarDetailComponent.isTwoMinutesAhead(budgetEntry, this.tmpBudgetData, i, this.logData.budget.length)) {
         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.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(new Date(this.war.endDate), this.war.endBudgetBlufor));
+    this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(new Date(this.war.endDate), this.war.endBudgetOpfor));
+  }
 
-      // KILLS & FRIENDLY FIRE
-      data.kill.forEach(killEntry => {
+  initKillData() {
+    let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0
+    for (let i = 0; i < this.logData.kill.length; i++) {
+      const killEntry = this.logData.kill[i];
       if (killEntry.friendlyFire === false) {
         if (killEntry.fraction === 'BLUFOR') {
           killCountBlufor++;
         } else {
           killCountOpfor++;
         }
+        if (WarDetailComponent.isTwoMinutesAhead(killEntry, this.tmpKillData, i, this.logData.kill.length)) {
           this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), killCountBlufor));
           this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), killCountOpfor));
+        }
       } else {
         if (killEntry.fraction === 'BLUFOR') {
           ffKillCountBlufor++;
         } else {
           ffKillCountOpfor++;
         }
+        if (WarDetailComponent.isTwoMinutesAhead(killEntry, this.tmpFrienlyFireData, i, this.logData.kill.length)) {
           this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), ffKillCountBlufor));
           this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), ffKillCountOpfor));
         }
-      });
+      }
+    }
+  }
 
-
-      // REVIVE & STABILIZE
-      data.revive.forEach(reviveEntry => {
+  initRevive() {
+    let reviveCountBlufor = 0, reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0;
+    for (let i = 0; i < this.logData.revive.length; i++) {
+      const reviveEntry = this.logData.revive[i];
       if (reviveEntry.stabilized === false) {
         if (reviveEntry.fraction === 'BLUFOR') {
           reviveCountBlufor++;
         } else {
           reviveCountOpfor++;
         }
+        if (WarDetailComponent.isTwoMinutesAhead(reviveEntry, this.tmpReviveData, i, this.logData.revive.length)) {
           this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), reviveCountBlufor));
           this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), reviveCountOpfor));
+        }
       } else {
         if (reviveEntry.fraction === 'BLUFOR') {
           stabilizeCountBlufor++;
         } else {
           stabilizeCountOpfor++;
         }
+        if (WarDetailComponent.isTwoMinutesAhead(reviveEntry, this.tmpStabilizeData, i, this.logData.revive.length)) {
           this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), stabilizeCountBlufor));
           this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), stabilizeCountOpfor));
         }
-      });
+      }
+    }
+  }
 
-      // TRANSPORT
-      data.transport.forEach(transportEntry => {
+  initTransportData() {
+    let transportCountBlufor = 0, transportCountOpfor = 0;
+    for (let i = 0; i < this.logData.transport.length; i++) {
+      const transportEntry = this.logData.transport[i];
       if (transportEntry.fraction === 'BLUFOR') {
         transportCountBlufor++;
       } else {
         transportCountOpfor++;
       }
+      if (WarDetailComponent.isTwoMinutesAhead(transportEntry, this.tmpTransportData, i, this.logData.transport.length)) {
         this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(new Date(transportEntry.time), transportCountBlufor));
         this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(new Date(transportEntry.time), transportCountOpfor));
-      });
+      }
+    }
+  }
 
-      // FLAG
+  initFlagHoldData() {
     let flagStatusBlufor = true;
     let flagStatusOpfor = true;
-      this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(startDateObj, flagStatusBlufor));
-      this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(startDateObj, flagStatusOpfor));
+    this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusBlufor));
+    this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusOpfor));
 
-      data.flag.forEach(flagEntry => {
+    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(
-          newFractionGraphEntry(flagEntry, flagStatusBlufor, flagStatusOpfor)
-        );
+        ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.fraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
+      )
     });
+  }
 
-      this.addFinalTimeDataEntriesAndPopulate(new Date(this.war.endDate));
-
-      this.fractionChartsInitialized = true;
-    });
+  private static isTwoMinutesAhead(entry: any, tmpData: any, index: number, logDataLength: number): boolean {
+    return new Date(entry.time).getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000) || index === logDataLength - 1
   }
 
   addFinalTimeDataEntriesAndPopulate(endDate) {
@@ -285,14 +349,10 @@ export class WarDetailComponent {
         }
       }
     });
-    this.pointData = this.tmpPointData;
-    this.budgetData = this.tmpBudgetData;
-    this.transportData = this.tmpTransportData;
-    this.reviveData = this.tmpReviveData;
-    this.stabilizedData = this.tmpStabilizeData;
-    this.killData = this.tmpKillData;
-    this.friendlyFireData = this.tmpFrienlyFireData;
-    this.flagData = this.tmpFlagCaptureData;
+
+    this.showLineChart = true;
+    this.lineChartLabel = this.labelPoints;
+    this.lineChartData = this.tmpPointData;
   }
 
 }

static/src/app/utils/chart-utils.ts

@@ -13,4 +13,25 @@ export class ChartUtils {
       "value": value
     };
   }
+
+  public static getMultiDataArray(...args: string[]) : any[] {
+    const obj = [];
+    for (let i = 0, arg; arg = args[i]; i++) {
+      obj.push({
+        "name": arg,
+        "series": []
+      })
+    }
+    return obj;
+  }
+
+  public static getSingleDataArray(name1, value1, name2, value2): any[] {
+    return [{
+      "name": name1,
+      "value": value1
+    }, {
+      "name": name2,
+      "value": value2
+    }];
+  }
 }