Improve fraction stats and scss usage

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"
+      [xAxisTickFormatting]="axisFormatX"
-      [xAxisLabel]="'Minute'">
+      [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 {
+  :hover {
-  background: #afafaf;
+    background: #afafaf;
-}
+  }
 
-:host /deep/ mat-button-toggle.mat-button-toggle-checked {
+  &.mat-button-toggle-checked {
-  background: #ffffff;
+    background: #ffffff;
-}
+  }
 
-:host /deep/ label.mat-button-toggle-label {
+  label.mat-button-toggle-label {
-  margin: 2px 0;
+    margin: 2px 0;
-}
+  }
 
-:host /deep/ div.mat-button-toggle-label-content {
+  div.mat-button-toggle-label-content {
-  line-height: 25px;
+    line-height: 25px;
-  margin-bottom: 0;
+    margin-bottom: 0;
-  font-weight: normal;
+    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"
+             [dataSource]="sortedRows"
-         matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
+             matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
-         (matSortChange)="sortScoreboardData($event)"
+             (matSortChange)="sortScoreboardData($event)"
-         class="mat-elevation-z8">
+             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-header-cell *matHeaderCellDef
-      <mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
+                       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 {
+  :hover {
-  background: #afafaf;
+    background: #afafaf;
-}
+  }
 
-:host /deep/ mat-button-toggle.mat-button-toggle-checked {
+  &.mat-button-toggle-checked {
-  background: #ffffff;
+    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',
+  selector: 'cc-server-statistics',
-             templateUrl: './server-stats.component.html',
+  templateUrl: './server-stats.component.html',
-             styleUrls: ['./server-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
+  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.average',
-                          'stats.performance.select.timeline.label.maximum']).subscribe((res) => {
+        '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,
+        name: entry.entityName,
-                               value: entry.singleAvgFps
+        value: entry.singleAvgFps
-                             });
+      });
       this.tmpSingleMin.push({
-                               name: entry.entityName,
+        name: entry.entityName,
-                               value: entry.singleMinFps
+        value: entry.singleMinFps
-                             });
+      });
     });
 
     tmpAvgArray = tmpAvgArray.map(x => Math.round(x / this.performanceData.length));

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

@@ -39,7 +39,7 @@ span.tab-control {
   vertical-align: middle;
 }
 
-:host/deep/.mat-icon-stats-performance g {
+:host /deep/ .mat-icon-stats-performance g {
   stroke: #666666;
 }
 

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;
+  }
 }