Simplify logic for player campaign detail page init

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "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">
+    <div class="chart-container" *ngFor="let category of graphData">
       <ngx-charts-line-chart
-        [results]="killData"
+        [results]="category.data"
         [showRefLines]="showRefLines"
         [showRefLabels]="showRefLabels"
-        [referenceLines]="killRefLines"
+        [referenceLines]="category.refLine"
         [scheme]="colorScheme"
         [gradient]="gradient"
         [xAxis]="xAxis"
@@ -54,167 +54,7 @@
         [legend]="legend"
         [showXAxisLabel]="showXAxisLabel"
         [showYAxisLabel]="showYAxisLabel"
-        [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"
+        [yAxisLabel]="category.label"
         [autoScale]="autoscale"
         [timeline]="timeline"
         [roundDomains]="roundDomains">

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

@@ -20,26 +20,9 @@ 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 = {
@@ -52,16 +35,6 @@ export class CampaignPlayerDetailComponent implements OnInit {
   };
   showRefLines = true;
   showRefLabels = true;
-  killRefLines = [];
-  vehicleLightRefLines = [];
-  vehicleHeavyRefLines = [];
-  vehicleAirRefLines = [];
-  deathRefLines = [];
-  captureRefLines = [];
-  friendlyFireRefLines = [];
-  reviveRefLines = [];
-  respawnRefLines = [];
-
   gradient = false;
   xAxis = true;
   yAxis = true;
@@ -72,23 +45,12 @@ 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) {
   }
 
@@ -96,124 +58,61 @@ 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');
 
-          const totalDeathDiv = this.totalDeath === 0 ? 1 : this.totalDeath;
-          this.kdRatio = parseFloat((this.totalKills / totalDeathDiv).toFixed(2));
+          this.graphData = [
+            {key: 'kill', label: 'Kills',},
+            {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.totalRespawn / totalDeathDiv).toFixed(2));
+          this.respawnDeathRatio = parseFloat((this.graphData[3].total / totalDeathDiv).toFixed(2));
 
-          this.sumData = [
-            {
-              name: this.yAxisKill,
-              value: this.totalKills
-            },
-            {
-              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]);
+          // 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})
+          });
+          this.sumData = tmpSumData;
         });
   }
 
-  private assignData(label, field) {
-    const killObj = {
-      name: label,
-      series: []
-    };
-    const playerLength = this.campaignPlayer.players.length;
-    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][field];
-      killObj.series.push({
-        name: warDateString,
-        value: value
-      });
-      total += value;
-    }
-    switch (field) {
-      case 'kill':
-        this.killRefLines.push({value: total / playerLength, name: this.avgLabel});
-        this.totalKills = total;
-        break;
-      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];
+  private initDataArray() {
+
+    this.graphData.forEach(dataSet => {
+      const killObj = {
+        name: dataSet.label,
+        series: []
+      };
+      const playerLength = this.campaignPlayer.players.length;
+      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({
+          name: warDateString,
+          value: value
+        });
+        total += value;
+      }
+
+      dataSet.data = [killObj];
+      dataSet.refLine = [{value: total / playerLength, name: this.avgLabel}]
+      dataSet.total = total;
+    })
   }
 
   navigateBack() {

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

@@ -29,18 +29,12 @@
         <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">
+            <img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}">
           </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"