Add player transport stats to campaign detail view (CC-83)

static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.html

@@ -37,7 +37,8 @@
         [xAxis]="xAxis"
         [yAxis]="yAxis"
         [showXAxisLabel]="showXAxisLabel"
-        [showYAxisLabel]="showYAxisLabel">
+        [showYAxisLabel]="showYAxisLabel"
+        [animations]="animations">
       </ngx-charts-bar-horizontal>
     </div>
   </div>
@@ -59,6 +60,7 @@
         [yAxisLabel]="category.label"
         [autoScale]="autoscale"
         [timeline]="timeline"
+        [animations]="animations"
         [roundDomains]="roundDomains">
       </ngx-charts-line-chart>
     </div>

static/src/app/statistic/campaign/campaign-player-detail/campaign-player-detail.component.ts

@@ -9,7 +9,7 @@ import {TranslateService} from '@ngx-translate/core';
 @Component({
   selector: 'campaign-player-detail',
   templateUrl: './campaign-player-detail.component.html',
-  styleUrls: ['./campaign-player-detail.component.css', '../../../style/list-entry.css',
+  styleUrls: ['./campaign-player-detail.component.scss', '../../../style/list-entry.css',
     '../../../style/hide-scrollbar.css', '../../../style/overview.css']
 })
 export class CampaignPlayerDetailComponent implements OnInit {
@@ -46,6 +46,7 @@ export class CampaignPlayerDetailComponent implements OnInit {
   autoscale = false;
   timeline = false;
   roundDomains = true;
+  animations = false;
 
   kdRatio = 0;
   maxKd = 1.7;
@@ -53,7 +54,7 @@ export class CampaignPlayerDetailComponent implements OnInit {
   respawnDeathRatio = 0;
   maxRespawnDeathRatio = 1;
 
-  playerAttributeNameMap = PlayerUtils.tmpAttributeDisplayNames.slice(2, PlayerUtils.tmpAttributeDisplayNames.length);
+  playerAttributeNameMap = PlayerUtils.attributeDisplayNames.slice(2, PlayerUtils.attributeDisplayNames.length);
 
   constructor(private playerService: PlayerService,
               private translate: TranslateService) {
@@ -81,18 +82,18 @@ export class CampaignPlayerDetailComponent implements OnInit {
 
           this.initDataArray();
 
-          const totalDeathDiv = this.graphData[7].total === 0 ? 1 : this.graphData[7].total;
+          const totalDeathDiv = this.graphData[9].total === 0 ? 1 : this.graphData[9].total;
           this.kdRatio = parseFloat((this.graphData[0].total / totalDeathDiv).toFixed(2));
           if (this.kdRatio > 1) {
             this.maxKd = this.kdRatio * 1.7;
           }
 
-          this.respawnDeathRatio = parseFloat((this.graphData[8].total / totalDeathDiv).toFixed(2));
+          this.respawnDeathRatio = parseFloat((this.graphData[10].total / totalDeathDiv).toFixed(2));
 
           // we can not directly push to target array, since only full reference changes trigger the refresh of data
           const tmpSumData = [];
           this.graphData.forEach(dataSet => {
-            tmpSumData.push({name: dataSet.label, value: dataSet.total});
+            tmpSumData.push({name: dataSet.label, value: dataSet.total ? dataSet.total : 0});
           });
           this.sumData = tmpSumData;
         });
@@ -100,7 +101,7 @@ export class CampaignPlayerDetailComponent implements OnInit {
 
   private initDataArray() {
     this.graphData.forEach(dataSet => {
-      const killObj = {
+      const dataObj = {
         name: dataSet.label,
         series: []
       };
@@ -108,15 +109,21 @@ export class CampaignPlayerDetailComponent implements OnInit {
       let total = 0;
       for (let i = 0; i < playerLength; i++) {
         const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
-        const value = this.campaignPlayer.players[i][dataSet.key];
+
-        killObj.series.push({
+        const valueField = this.campaignPlayer.players[i][dataSet.key];
+        let value = valueField ? valueField : 0;
+        if (dataSet.key === 'travelDistance' || dataSet.key === 'driverDistance') {
+          value = Math.round(value / 1000); // meters to km
+        }
+
+        dataObj.series.push({
           name: warDateString,
           value: value
         });
         total += value;
       }
 
-      dataSet.data = [killObj];
+      dataSet.data = [dataObj];
       dataSet.refLine = [{value: total / playerLength, name: this.translations['stats.player.detail.graph.average']}];
       dataSet.total = total;
     });

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

@@ -8,7 +8,7 @@ import {TranslateService} from '@ngx-translate/core';
 @Component({
   selector: 'war-detail-fraction',
   templateUrl: './fraction-stats.component.html',
-  styleUrls: ['./fraction-stats.component.scss']
+  styleUrls: ['./fraction-stats.component.scss', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
 })
 export class FractionStatsComponent implements OnInit, OnChanges {
 

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

@@ -21,7 +21,6 @@
       [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.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.scss']
+  styleUrls: ['./server-stats.component.scss', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
 })
 export class ServerStatsComponent implements OnInit, OnChanges {
 
@@ -17,8 +17,6 @@ export class ServerStatsComponent implements OnInit, OnChanges {
 
   @Input() performanceData: any;
 
-  startDateObj: Date;
-
   public activeChartSelect: string;
 
   showBarChart = true;
@@ -42,7 +40,6 @@ export class ServerStatsComponent implements OnInit, OnChanges {
   };
   readonly labelsAsString = Object.keys(this.labels)
                                   .map((key) => this.labels[key]);
-  lineChartSeriesLabels: string[];
 
   gradient = false;
   yAxis = true;
@@ -54,7 +51,6 @@ export class ServerStatsComponent implements OnInit, OnChanges {
   autoscale = true;
   timeline = false;
   roundDomains = true;
-  barAnimations = false;
   barPadding = 2;
   colorScheme = {
     name: 'nightLights',

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.scss']
+  styleUrls: ['./war-header.component.scss', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
 })
 export class WarHeaderComponent implements OnInit {