Fix lint

server/apib/data_structures/_log.apib

@@ -3,7 +3,6 @@
 + _id: `` (string, required) - log entry id
 + war: `` (string, required) - warId
 + time: `` (string, required) - logging timestamp
-+ __v: 0 (number, required) - object version number
 
 # LogPoints (Log)
 ## Properties
@@ -74,14 +73,14 @@
 #LogVehicle (Log)
 ## Properties
 + shooter: `HardiReady` (string, required) - name of player who shot the vehicle
-+ additionalShooter: [`[GNC]Paolo`, `Dominik`] (array[string], required) - additional crew members of shooter vehicle
++ additionalShooter: `[GNC]Paolo`, `Dominik` (array[string], required) - additional crew members of shooter vehicle
 + target: `T-100` (string, required) - name of the vehicle
 + fraction: `BLUFOR` (enum, required) - fraction of the shooter
         + Members
             + `BLUFOR`
             + `OPFOR`
             + `NONE`
-+ vehicleClass: `LIGHT` (enum, required) - class of shot vehicle
++ vehicleClass: `LIGHT` (enum[string], required) - class of shot vehicle
         + Members
             + `LIGHT`
             + `HEAVY`

server/models/logs/budget.js

@@ -3,37 +3,49 @@
 const mongoose = require('mongoose');
 const Schema = mongoose.Schema;
 
-const LogBudgetSchema = new Schema({
-  war: {
-    type: mongoose.Schema.Types.ObjectId,
-    ref: 'War',
-    required: true,
+const LogBudgetSchema = new Schema(
+  {
+    war: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: 'War',
+      required: true,
+    },
+    time: {
+      type: Date,
+      required: true,
+    },
+    fraction: {
+      type: String,
+      enum: ['BLUFOR', 'OPFOR'],
+      required: true,
+    },
+    oldBudget: {
+      type: Number,
+      get: (v) => Math.round(v),
+      set: (v) => Math.round(v),
+      required: true,
+    },
+    newBudget: {
+      type: Number,
+      get: (v) => Math.round(v),
+      set: (v) => Math.round(v),
+      required: true,
+    },
+    buy: {
+      type: Boolean,
+      required: true,
+    },
+    player: {
+      type: String,
+    },
+    item: {
+      type: String,
+    },
   },
-  time: {
-    type: Date,
-    required: true,
-  },
-  fraction: {
-    type: String,
-    enum: ['BLUFOR', 'OPFOR'],
-    required: true,
-  },
-  oldBudget: {
-    type: Number,
-    get: (v) => Math.round(v),
-    set: (v) => Math.round(v),
-    required: true,
-  },
-  newBudget: {
-    type: Number,
-    get: (v) => Math.round(v),
-    set: (v) => Math.round(v),
-    required: true,
-  },
-}, {
-  collection: 'logBudget',
-  versionKey: false,
-});
+  {
+    collection: 'logBudget',
+    versionKey: false,
+  });
 // optional more indices
 LogBudgetSchema.index({war: 1});
 

server/tools/log-parse-tool.js

@@ -13,6 +13,12 @@ const VehicleClasses = Object.freeze({
 
 const playerNameRegex = /(^|,\s)(.*?)\s\(/g;
 
+const budgetPlayerNameRegex = /\d*\.\s(.*)\s\(ver\)kaufte/;
+
+const budgetItemNameRegex = /\(ver\)kaufte\s(.*)\"$/;
+
+const budgetRespawnNameRegex = /Respawn\svon\s(.*)\"$/;
+
 const vehicleNameEndRegex = /\s\(\w+:/;
 
 const sideRegex = /(side:\s(.*?)\))/;
@@ -178,7 +184,7 @@ const parseWarLog = (lineArray, war) => {
           const playerName = line.substring(line.lastIndexOf('Respawn von ') + 12, line.lastIndexOf('"'));
           stats.respawn.push(getRespawnEntry(budg, playerName, war._id, war.date));
         }
-        stats.budget.push(getBudgetEntry(budg, war._id, war.date));
+        stats.budget.push(getBudgetEntry(line, budg, war._id, war.date));
       }
     } else if (line.includes('(Fahne)') && !line.includes('Dominator')) {
       /**
@@ -405,14 +411,37 @@ const getPointsEntry = (pt, line, warId, warDate) => {
   };
 };
 
-const getBudgetEntry = (budg, warId, warDate) => {
-  return {
+const getBudgetEntry = (line, budg, warId, warDate) => {
+  const timestamp = getFullTimeDate(warDate, budg[5]);
+  const oldBudget = transformMoneyString(budg[9]);
+  const newBudget = transformMoneyString(budg[12]);
+  const fraction = budg[7] === 'NATO' ? 'BLUFOR' : 'OPFOR';
+
+  const budgetEntry = {
     war: warId,
-    time: getFullTimeDate(warDate, budg[5]),
-    fraction: budg[7] === 'NATO' ? 'BLUFOR' : 'OPFOR',
-    oldBudget: transformMoneyString(budg[9]),
-    newBudget: transformMoneyString(budg[12]),
+    time: timestamp,
+    fraction: fraction,
+    oldBudget: oldBudget,
+    newBudget: newBudget,
+    buy: oldBudget <= newBudget,
   };
+
+  const budgetRespawnMatch = budgetRespawnNameRegex.exec(line);
+  if (budgetRespawnMatch && budgetRespawnMatch.length > 1) {
+    budgetEntry.player = budgetRespawnMatch[1];
+    budgetEntry.item = 'Respawn';
+  } else {
+    const itemNameMatch = budgetItemNameRegex.exec(line);
+    const playerNameMatch = budgetPlayerNameRegex.exec(line);
+    if (playerNameMatch && playerNameMatch.length > 1) {
+      budgetEntry.player = playerNameMatch[1];
+    }
+    if (itemNameMatch && itemNameMatch.length > 1) {
+      budgetEntry.item = itemNameMatch[1];
+    }
+  }
+
+  return budgetEntry;
 };
 
 const getPlayerInfoFromString = (inputString) => {

static/src/app/statistic/war/fraction-stats/fraction-stats.component.html

@@ -20,7 +20,7 @@
       [legendTitle]="legendTitle"
       [showXAxisLabel]="showXAxisLabel"
       [showYAxisLabel]="showYAxisLabel"
-      [yAxisLabel]="lineChartLabel"
+      [yAxisLabel]="chartYAxisLabel"
       [autoScale]="autoscale"
       [timeline]="timeline"
       [roundDomains]="roundDomains">
@@ -32,15 +32,15 @@
       [scheme]="colorScheme"
       [results]="barChartData"
       [xAxis]="xAxis"
-      [yAxis]="barShowYAxis"
+      [yAxis]="yAxis"
       [legend]="legend"
       [legendTitle]="legendTitle"
-      [showXAxisLabel]="barShowXAxisLabel"
+      [showXAxisLabel]="showXAxisLabel"
       [showYAxisLabel]="showYAxisLabel"
       [animations]="barAnimations"
       [barPadding]="barPadding"
-      [xAxisTickFormatting]="axisFormat"
-      [xAxisLabel]="'Minute'">
+      [xAxisTickFormatting]="axisFormatX"
+      [yAxisTickFormatting]="axisFormatY">
       <ng-template #tooltipTemplate let-model="model">
         <small>{{'stats.fraction.tooltip.flag.minute' | translate}} {{model.series}}</small>
         <div>{{model.name}} {{'stats.fraction.tooltip.flag.flag' | translate}}</div>

static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss

@@ -7,24 +7,24 @@
 :host /deep/ mat-button-toggle {
   color: #666666;
   background: #e7e7e7;
-}
 
-:host /deep/ mat-button-toggle:hover {
-  background: #afafaf;
-}
+  :hover {
+    background: #afafaf;
+  }
 
-:host /deep/ mat-button-toggle.mat-button-toggle-checked {
-  background: #ffffff;
-}
+  &.mat-button-toggle-checked {
+    background: #ffffff;
+  }
 
-:host /deep/ label.mat-button-toggle-label {
-  margin: 2px 0;
-}
+  label.mat-button-toggle-label {
+    margin: 2px 0;
+  }
 
-:host /deep/ div.mat-button-toggle-label-content {
-  line-height: 25px;
-  margin-bottom: 0;
-  font-weight: normal;
+  div.mat-button-toggle-label-content {
+    line-height: 25px;
+    margin-bottom: 0;
+    font-weight: normal;
+  }
 }
 
 .chart-container {

static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts

@@ -1,5 +1,4 @@
 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';
@@ -9,7 +8,7 @@ import {TranslateService} from '@ngx-translate/core';
 @Component({
   selector: 'war-detail-fraction',
   templateUrl: './fraction-stats.component.html',
-  styleUrls: ['./fraction-stats.component.scss', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
+  styleUrls: ['./fraction-stats.component.scss']
 })
 export class FractionStatsComponent implements OnInit, OnChanges {
 
@@ -48,10 +47,10 @@ export class FractionStatsComponent implements OnInit, OnChanges {
   labels;
   labelsKeys;
 
-  lineChartLabel: string;
+  chartYAxisLabel: string;
 
+  // line chart
   showLineChart = true;
-  stepCurve = d3.curveStepAfter;
   gradient = false;
   yAxis = true;
   xAxis = true;
@@ -63,16 +62,15 @@ export class FractionStatsComponent implements OnInit, OnChanges {
   timeline = false;
   roundDomains = true;
 
+  // bar chart
   barPadding = 0;
   barAnimations = false;
-  barShowYAxis = false;
-  barShowXAxisLabel = true;
 
   constructor(private translate: TranslateService) {
   }
 
   ngOnInit() {
-    this.setLineChartLabel(this.labels.points);
+    this.setChartYAxisLabel(this.labels.points);
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -138,7 +136,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
     this.activeChartSelect = newSelection;
     if (this.activeChartSelect !== this.labels.flag) {
       this.showLineChart = true;
-      this.setLineChartLabel(this.activeChartSelect);
+      this.setChartYAxisLabel(this.activeChartSelect);
       switch (this.activeChartSelect) {
         case this.labels.points:
           this.lineChartData = this.tmpPointData;
@@ -208,7 +206,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
       const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
       const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
 
-      if (this.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
+      if (ChartUtils.isOneMinuteAhead(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));
@@ -233,7 +231,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
         if (killEntry.fraction === 'OPFOR') {
           killCountOpfor++;
         }
-        if (this.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
+        if (ChartUtils.isOneMinuteAhead(killEntryDate, this.tmpKillData)) {
           this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
           this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
         }
@@ -244,7 +242,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
         if (killEntry.fraction === 'OPFOR') {
           ffKillCountOpfor++;
         }
-        if (this.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
+        if (ChartUtils.isOneMinuteAhead(killEntryDate, this.tmpFrienlyFireData)) {
           this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
           this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
         }
@@ -275,7 +273,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
         } else {
           reviveCountOpfor++;
         }
-        if (this.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
+        if (ChartUtils.isOneMinuteAhead(reviveEntryDate, this.tmpReviveData)) {
           this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
           this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
         }
@@ -285,7 +283,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
         } else {
           stabilizeCountOpfor++;
         }
-        if (this.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
+        if (ChartUtils.isOneMinuteAhead(reviveEntryDate, this.tmpStabilizeData)) {
           this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
           this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
         }
@@ -344,7 +342,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
           }
         }
       }
-      if (this.isTwoMinutesAhead(vehicleEntryDate, this.tmpVehicleData) || index === this.logData.vehicle.length - 1) {
+      if (ChartUtils.isOneMinuteAhead(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));
         if (vehicleEntry.vehicleClass) {
@@ -376,7 +374,8 @@ export class FractionStatsComponent implements OnInit, OnChanges {
       } else {
         transportCountOpfor++;
       }
-      if (this.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
+      if (ChartUtils.isOneMinuteAhead(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));
       }
@@ -451,10 +450,6 @@ export class FractionStatsComponent implements OnInit, OnChanges {
     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);
@@ -496,17 +491,21 @@ export class FractionStatsComponent implements OnInit, OnChanges {
     }
   }
 
-  setLineChartLabel(i18n: string) {
+  setChartYAxisLabel(i18n: string) {
     this.translate.get(i18n).subscribe((translated) => {
-      this.lineChartLabel = translated;
+      this.chartYAxisLabel = translated;
     });
   }
 
-  axisFormat(val) {
+  axisFormatX(val) {
     if (val % 10 === 0) {
-      return val
+      return val;
     } else {
-      return ''
+      return '';
     }
   }
+
+  axisFormatY(val) {
+    return '';
+  }
 }

static/src/app/statistic/war/scoreboard/scoreboard.component.css

@@ -4,7 +4,7 @@
   height: 68vh;
   overflow-x: hidden;
   overflow-y: auto;
-  box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
   border-bottom: 1px solid #dadada;
 }
 

static/src/app/statistic/war/scoreboard/scoreboard.component.html

@@ -1,22 +1,25 @@
 <div class="fade-in scoreboard-table">
 
   <mat-table matSort
-         [dataSource]="sortedRows"
-         matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
-         (matSortChange)="sortScoreboardData($event)"
-         class="mat-elevation-z8">
+             [dataSource]="sortedRows"
+             matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
+             (matSortChange)="sortScoreboardData($event)"
+             class="mat-elevation-z8">
 
     <ng-container matColumnDef="{{tableHead[0].prop}}">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef
+                       mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
       <mat-cell *matCellDef="let element"
-          [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+                [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
         {{element.name}}
       </mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="{{tableHead[1].prop}}">
-      <mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
-      <mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
+      <mat-header-cell *matHeaderCellDef
+                       mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
+      <mat-cell *matCellDef="let element">{{element.fraction ===
+      'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
     </ng-container>
 
     <ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">

static/src/app/statistic/war/server-stats/server-stats.component.html

@@ -21,6 +21,7 @@
       [showXAxisLabel]="showXAxisLabel"
       [showYAxisLabel]="showYAxisLabel"
       [yAxisLabel]="barChartLabel"
+      [animations]="barAnimations"
       [barPadding]="barPadding"
       [roundDomains]="roundDomains">
     </ngx-charts-bar-vertical>

static/src/app/statistic/war/server-stats/server-stats.component.scss

@@ -7,14 +7,14 @@
 :host /deep/ mat-button-toggle {
   color: #666666;
   background: #e7e7e7;
-}
 
-:host /deep/ mat-button-toggle:hover {
-  background: #afafaf;
-}
+  :hover {
+    background: #afafaf;
+  }
 
-:host /deep/ mat-button-toggle.mat-button-toggle-checked {
-  background: #ffffff;
+  &.mat-button-toggle-checked {
+    background: #ffffff;
+  }
 }
 
 :host /deep/ label.mat-button-toggle-label {

static/src/app/statistic/war/server-stats/server-stats.component.ts

@@ -5,10 +5,10 @@ import {ChartUtils} from '../../../utils/chart-utils';
 
 
 @Component({
-             selector: 'cc-server-statistics',
-             templateUrl: './server-stats.component.html',
-             styleUrls: ['./server-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
-           })
+  selector: 'cc-server-statistics',
+  templateUrl: './server-stats.component.html',
+  styleUrls: ['./server-stats.component.scss']
+})
 export class ServerStatsComponent implements OnInit, OnChanges {
 
   @ViewChild('overview') private overviewContainer: ElementRef;
@@ -54,6 +54,7 @@ export class ServerStatsComponent implements OnInit, OnChanges {
   autoscale = true;
   timeline = false;
   roundDomains = true;
+  barAnimations = false;
   barPadding = 2;
   colorScheme = {
     name: 'nightLights',
@@ -75,8 +76,8 @@ export class ServerStatsComponent implements OnInit, OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     if ((changes.war || changes.performanceData) && this.performanceData) {
       this.translate.get(['stats.performance.select.timeline.label.minimum',
-                          'stats.performance.select.timeline.label.average',
-                          'stats.performance.select.timeline.label.maximum']).subscribe((res) => {
+        'stats.performance.select.timeline.label.average',
+        'stats.performance.select.timeline.label.maximum']).subscribe((res) => {
         const resValues = Object.keys(res).map(val => res[val]);
         this.initializeChartData(resValues[2], resValues[0], resValues[1]);
       });
@@ -162,13 +163,13 @@ export class ServerStatsComponent implements OnInit, OnChanges {
         }
       }
       this.tmpSingleAvg.push({
-                               name: entry.entityName,
-                               value: entry.singleAvgFps
-                             });
+        name: entry.entityName,
+        value: entry.singleAvgFps
+      });
       this.tmpSingleMin.push({
-                               name: entry.entityName,
-                               value: entry.singleMinFps
-                             });
+        name: entry.entityName,
+        value: entry.singleMinFps
+      });
     });
 
     tmpAvgArray = tmpAvgArray.map(x => Math.round(x / this.performanceData.length));

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

@@ -1,77 +0,0 @@
-.war-header-container {
-  width: 920px;
-  min-height: 165px;
-  padding-top: 12px;
-  margin: auto;
-}
-
-.head-field {
-  font-size: 22px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-form.tab-control {
-  padding: 10px;
-}
-
-span.tab-control {
-  margin: 4px 30px 4px 55px;
-  padding: 4px 16px;
-}
-
-.nav-tabs > li.active > a {
-  background: #ffffff;
-  border-bottom: none;
-}
-
-.nav-tabs > li.active {
-  position: relative;
-  top: 1px;
-  z-index: 10;
-}
-
-.nav-tabs mat-icon {
-  color: #666666;
-  height: 26px;
-  width: 26px;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-:host/deep/.mat-icon-stats-performance g {
-  stroke: #666666;
-}
-
-.nav-tabs {
-  width: 1000px;
-  margin: auto;
-  clear: both;
-  border-bottom: 0;
-}
-
-.nav-tab-hidden {
-  visibility: hidden;
-}
-
-.nav-tabs > li > a {
-  background: #e7e7e7;
-  border: 1px solid #dadada;
-}
-
-.nav-tabs > li:not(.active) > a:hover {
-  background: #afafaf;
-}
-
-.nav-tabs > li:last-child {
-  margin-left: 65px;
-}
-
-.nav-link {
-  cursor: pointer !important;
-  color: #666666 !important;
-}
-
-.nav-tabs > li.deactivated > a.nav-link {
-  cursor: not-allowed !important;
-}

static/src/app/statistic/war/war-header/war-header.component.scss

@@ -0,0 +1,79 @@
+.war-header-container {
+  width: 920px;
+  min-height: 165px;
+  padding-top: 12px;
+  margin: auto;
+}
+
+.head-field {
+  font-size: 22px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+form.tab-control {
+  padding: 10px;
+}
+
+span.tab-control {
+  margin: 4px 30px 4px 55px;
+  padding: 4px 16px;
+}
+
+:host /deep/ .mat-icon-stats-performance g {
+  stroke: #666666;
+}
+
+.nav-tabs {
+  width: 1000px;
+  margin: auto;
+  clear: both;
+  border-bottom: 0;
+
+  mat-icon {
+    color: #666666;
+    height: 26px;
+    width: 26px;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  > li {
+    > a {
+      background: #e7e7e7;
+      border: 1px solid #dadada;
+    }
+  }
+
+  > li.active {
+    position: relative;
+    top: 1px;
+    z-index: 10;
+
+    > a {
+      background: #ffffff;
+      border-bottom: none;
+    }
+  }
+
+  > li:not(.active) > a:hover {
+    background: #afafaf;
+  }
+
+  > li.deactivated > a.nav-link {
+    cursor: not-allowed !important;
+  }
+
+  > li:last-child {
+    margin-left: 65px;
+  }
+}
+
+.nav-tab-hidden {
+  visibility: hidden;
+}
+
+.nav-link {
+  cursor: pointer !important;
+  color: #666666 !important;
+}

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

@@ -11,7 +11,7 @@ import {ScoreboardComponent} from '../scoreboard/scoreboard.component';
 @Component({
   selector: 'war-detail',
   templateUrl: './war-header.component.html',
-  styleUrls: ['./war-header.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
+  styleUrls: ['./war-header.component.scss']
 })
 export class WarHeaderComponent implements OnInit {
 

static/src/app/statistic/war/war-list/war-item.component.css

@@ -3,7 +3,7 @@
   border-right: 1px solid #dadada;
 }
 
-.war-item:hover, .selected{
+.war-item:hover, .selected {
   background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
   border-bottom: 1px solid #dadada;
 }

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

@@ -9,7 +9,7 @@
   cursor: pointer;
 }
 
-.list-header:hover, .selected{
+.list-header:hover, .selected {
   background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
 }
 

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

@@ -34,4 +34,8 @@ export class ChartUtils {
       'value': value2
     }];
   }
+
+  public static isOneMinuteAhead(entryDate: Date, tmpData: any): boolean {
+    return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + 60000;
+  }
 }