package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.7.4",
+  "version": "1.7.3",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
   "scripts": {

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

@@ -41,12 +41,12 @@
   </div>
 
   <div class="charts-parent">
-    <div class="chart-container" *ngFor="let category of graphData">
+    <div class="chart-container">
       <ngx-charts-line-chart
-        [results]="category.data"
+        [results]="killData"
         [showRefLines]="showRefLines"
         [showRefLabels]="showRefLabels"
-        [referenceLines]="category.refLine"
+        [referenceLines]="killRefLines"
         [scheme]="colorScheme"
         [gradient]="gradient"
         [xAxis]="xAxis"
@@ -54,7 +54,167 @@
         [legend]="legend"
         [showXAxisLabel]="showXAxisLabel"
         [showYAxisLabel]="showYAxisLabel"
-        [yAxisLabel]="category.label"
+        [yAxisLabel]="yAxisKill"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="friendlyFireData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="friendlyFireRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisFriendlyFire"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="deathData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="deathRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisDeath"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="respawnData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="respawnRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisRespawn"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="reviveData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="reviveRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisRevive"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="captureData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="captureRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisCapture"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="vehicleLightData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="killRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisVehicleLight"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="vehicleHeavyData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="killRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisVehicleHeavy"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="vehicleAirData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="killRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisVehicleAir"
         [autoScale]="autoscale"
         [timeline]="timeline"
         [roundDomains]="roundDomains">

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

@@ -20,9 +20,26 @@ export class CampaignPlayerDetailComponent implements OnInit {
 
   campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
 
-  graphData: any[] = [];
   sumData: any[] = [];
+  killData: any[] = [];
+  friendlyFireData: any[] = [];
+  vehicleLightData: any[] = [];
+  vehicleHeavyData: any[] = [];
+  vehicleAirData: any[] = [];
+  deathData: any[] = [];
+  respawnData: any[] = [];
+  reviveData: any[] = [];
+  captureData: any[] = [];
 
+  yAxisKill = 'Kills';
+  yAxisFriendlyFire = 'FriendlyFire';
+  yAxisVehicleLight = 'Fahrzeug (Light)';
+  yAxisVehicleHeavy = 'Fahrzeug (Heavy)';
+  yAxisVehicleAir = 'Fahrzeug (Air)';
+  yAxisDeath = 'Tode';
+  yAxisRespawn = 'Respawn';
+  yAxisRevive = 'Revive';
+  yAxisCapture = 'Eroberungen';
   avgLabel = 'Durchschnitt';
 
   colorScheme = {
@@ -35,6 +52,16 @@ export class CampaignPlayerDetailComponent implements OnInit {
   };
   showRefLines = true;
   showRefLabels = true;
+  killRefLines = [];
+  vehicleLightRefLines = [];
+  vehicleHeavyRefLines = [];
+  vehicleAirRefLines = [];
+  deathRefLines = [];
+  captureRefLines = [];
+  friendlyFireRefLines = [];
+  reviveRefLines = [];
+  respawnRefLines = [];
+
   gradient = false;
   xAxis = true;
   yAxis = true;
@@ -45,12 +72,23 @@ export class CampaignPlayerDetailComponent implements OnInit {
   timeline = false;
   roundDomains = true;
 
+  totalKills;
+  totalFriendlyFire;
+  totalVehicleLight;
+  totalVehicleHeavy;
+  totalVehicleAir;
+  totalDeath;
+  totalRespawn;
+  totalRevive;
+  totalCapture;
+
   kdRatio = 0;
   maxKd = 1.7;
 
   respawnDeathRatio = 0;
   maxRespawnDeathRatio = 1;
 
+
   constructor(private playerService: PlayerService) {
   }
 
@@ -58,61 +96,124 @@ export class CampaignPlayerDetailComponent implements OnInit {
     this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
         .subscribe(campaignPlayer => {
           this.campaignPlayer = campaignPlayer;
+          this.killData = this.assignData(this.yAxisKill, 'kill');
+          this.friendlyFireData = this.assignData(this.yAxisFriendlyFire, 'friendlyFire');
+          this.deathData = this.assignData(this.yAxisDeath, 'death');
+          this.respawnData = this.assignData(this.yAxisRespawn, 'respawn');
+          this.reviveData = this.assignData(this.yAxisRevive, 'revive');
+          this.captureData = this.assignData(this.yAxisCapture, 'flagTouch');
+          this.vehicleLightData = this.assignData(this.yAxisVehicleLight, 'vehicleLight');
+          this.vehicleHeavyData = this.assignData(this.yAxisVehicleHeavy, 'vehicleHeavy');
+          this.vehicleAirData = this.assignData(this.yAxisVehicleAir, 'vehicleAir');
 
-          this.graphData = [
+          const totalDeathDiv = this.totalDeath === 0 ? 1 : this.totalDeath;
-            {key: 'kill', label: 'Kills',},
+          this.kdRatio = parseFloat((this.totalKills / totalDeathDiv).toFixed(2));
-            {key: 'friendlyFire', label: 'Friendly Fire',},
-            {key: 'death', label: 'Tode',},
-            {key: 'respawn', label: 'Respawn',},
-            {key: 'revive', label: 'Revive',},
-            {key: 'flagTouch', label: 'Eroberungen',},
-            {key: 'vehicleLight', label: 'Fahrzeug (Leicht)',},
-            {key: 'vehicleHeavy', label: 'Fahrzeug (Schwer)',},
-            {key: 'vehicleAir', label: 'Fahrzeug (Luft)',},
-          ];
-
-          this.initDataArray();
-
-          const totalDeathDiv = this.graphData[2].total === 0 ? 1 : this.graphData[2].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[3].total / totalDeathDiv).toFixed(2));
+          this.respawnDeathRatio = parseFloat((this.totalRespawn / totalDeathDiv).toFixed(2));
 
-          // we can not directly push to target array, since only full reference changes trigger the refresh of data
+          this.sumData = [
-          const tmpSumData = [];
+            {
-          this.graphData.forEach(dataSet => {
+              name: this.yAxisKill,
-            tmpSumData.push({name: dataSet.label, value: dataSet.total})
+              value: this.totalKills
-          });
+            },
-          this.sumData = tmpSumData;
+            {
+              name: this.yAxisFriendlyFire,
+              value: this.totalFriendlyFire
+            },
+            {
+              name: this.yAxisDeath,
+              value: this.totalDeath
+            },
+            {
+              name: this.yAxisRespawn,
+              value: this.totalRespawn
+            },
+            {
+              name: this.yAxisRevive,
+              value: this.totalRevive
+            },
+            {
+              name: this.yAxisCapture,
+              value: this.totalCapture
+            },
+            {
+              name: this.yAxisVehicleLight,
+              value: this.totalVehicleLight
+            },
+            {
+              name: this.yAxisVehicleHeavy,
+              value: this.totalVehicleHeavy
+            },
+            {
+              name: this.yAxisVehicleAir,
+              value: this.totalVehicleAir
+            },
+          ];
+
+          Object.assign(this, [this.sumData, this.killData, this.friendlyFireData, this.vehicleLightData,
+            this.vehicleHeavyData, this.vehicleAirData, this.deathData, this.respawnData, this.reviveData,
+            this.captureData]);
         });
   }
 
-  private initDataArray() {
+  private assignData(label, field) {
-
+    const killObj = {
-    this.graphData.forEach(dataSet => {
+      name: label,
-      const killObj = {
+      series: []
-        name: dataSet.label,
+    };
-        series: []
+    const playerLength = this.campaignPlayer.players.length;
-      };
+    let total = 0;
-      const playerLength = this.campaignPlayer.players.length;
+    for (let i = 0; i < playerLength; i++) {
-      let total = 0;
+      const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
-      for (let i = 0; i < playerLength; i++) {
+      const value = this.campaignPlayer.players[i][field];
-        const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
+      killObj.series.push({
-        const value = this.campaignPlayer.players[i][dataSet.key];
+        name: warDateString,
-        killObj.series.push({
+        value: value
-          name: warDateString,
+      });
-          value: value
+      total += value;
-        });
+    }
-        total += value;
+    switch (field) {
-      }
+      case 'kill':
-
+        this.killRefLines.push({value: total / playerLength, name: this.avgLabel});
-      dataSet.data = [killObj];
+        this.totalKills = total;
-      dataSet.refLine = [{value: total / playerLength, name: this.avgLabel}]
+        break;
-      dataSet.total = total;
+      case 'friendlyFire':
-    })
+        this.friendlyFireRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalFriendlyFire = total;
+        break;
+      case 'death':
+        this.deathRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalDeath = total;
+        break;
+      case 'respawn':
+        this.respawnRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalRespawn = total;
+        break;
+      case 'revive':
+        this.reviveRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalRevive = total;
+        break;
+      case 'flagTouch':
+        this.captureRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalCapture = total;
+        break;
+      case 'vehicleLight':
+        this.vehicleLightRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalVehicleLight = total;
+        break;
+      case 'vehicleHeavy':
+        this.vehicleHeavyRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalVehicleHeavy = total;
+        break;
+      case 'vehicleAir':
+        this.vehicleAirRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalVehicleAir = total;
+        break;
+    }
+    return [killObj];
   }
 
   navigateBack() {

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

@@ -29,12 +29,18 @@
         <ng-template ngx-datatable-header-template let-sort="sortFn">
         <span class="datatable-header-cell-wrapper">
           <span class="datatable-header-cell-label text-truncate" title="{{column.head}}" (click)="sort()">
-            <img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}">
+            <img src="../../../../assets/scoreboard/{{column.prop}}.png">
           </span>
         </span>
         </ng-template>
       </ngx-datatable-column>
     </div>
+
+    <!--<ngx-datatable-column [width]="80" name="" prop="name">-->
+    <!--<ng-template ngx-datatable-cell-template let-value="value">-->
+    <!--<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>-->
+    <!--</ng-template>-->
+    <!--</ngx-datatable-column>-->
     <ngx-datatable-column [width]="80">
       <ng-template ngx-datatable-cell-template let-row="row">
         <span class="btn btn-sm btn-default in-table-btn"