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

@@ -97,6 +97,7 @@ 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, BsDropdownModule, ButtonsModule, TabsModule} from "ngx-bootstrap";
+import {AccordionModule, 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(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -42,6 +42,15 @@
   color: blue;
 }
 
+.chart-container {
+  width: 90%;
+  margin: 2%;
+  min-width: 900px;
+  height: 400px;
+  padding: 15px;
+  float: left;
+}
+
 /* ########### TABS ########### */
 
 :host /deep/ .nav-tabs {
@@ -98,25 +107,3 @@
   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,10 +25,8 @@
       </div>
 
       <div class="pull-left " style="padding-left: 150px; padding-top:15px">
-        <a class="btn btn-default" style="margin: 20px" target="_blank" onclick="window.open(this.href, 'logfileWindow',
+        <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
-'left=20,top=20,width=1100,height=600,toolbar=1,resizable=0'); return false;"
+          anzeigen</a>
-           href="resource/logs/{{war._id}}/clean.log">
-          Logfile anzeigen</a>
         <form class="form-group">
           <label class="radio-inline">
             <input type="radio" name="fractSelect"
@@ -96,43 +94,10 @@
       <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]="lineChartData"
+          [results]="pointData"
           [gradient]="gradient"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -140,17 +105,118 @@
           [legendTitle]="legendTitle"
           [showXAxisLabel]="showXAxisLabel"
           [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="lineChartLabel"
+          [yAxisLabel]="yAxisLabelPoints"
           [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-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">
         <ngx-charts-area-chart
           [scheme]="colorScheme"
-          [results]="areaChartData"
+          [results]="flagData"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           [curve]="stepCurve"
@@ -158,7 +224,7 @@
           [legendTitle]="legendTitle"
           [showXAxisLabel]="showXAxisLabel"
           [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="labelFlag"
+          [yAxisLabel]="yAxisLabelFlag"
           [autoScale]="autoscale"
           [timeline]="timeline"
           [roundDomains]="false">

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

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

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

@@ -13,25 +13,4 @@ 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
-    }];
-  }
 }