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

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.html

@@ -7,7 +7,8 @@
              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">
         {{element.name}}
@@ -15,8 +16,10 @@
     </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,15 +7,15 @@
 :host /deep/ mat-button-toggle {
   color: #666666;
   background: #e7e7e7;
-}
 
-:host /deep/ mat-button-toggle:hover {
+  :hover {
     background: #afafaf;
   }
 
-:host /deep/ mat-button-toggle.mat-button-toggle-checked {
+  &.mat-button-toggle-checked {
     background: #ffffff;
   }
+}
 
 :host /deep/ label.mat-button-toggle-label {
   margin: 2px 0;

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

@@ -7,7 +7,7 @@ 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']
+  styleUrls: ['./server-stats.component.scss']
 })
 export class ServerStatsComponent implements OnInit, OnChanges {
 
@@ -54,6 +54,7 @@ export class ServerStatsComponent implements OnInit, OnChanges {
   autoscale = true;
   timeline = false;
   roundDomains = true;
+  barAnimations = false;
   barPadding = 2;
   colorScheme = {
     name: 'nightLights',

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