4 changed files with 320 additions and 53 deletions
--- a/package.json
+++ b/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": {
--- a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html
+++ b/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">
--- a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts
+++ b/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 = [
-            {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));
+          const totalDeathDiv = this.totalDeath === 0 ? 1 : this.totalDeath;
+          this.kdRatio = parseFloat((this.totalKills / 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
-          const tmpSumData = [];
-          this.graphData.forEach(dataSet => {
-            tmpSumData.push({name: dataSet.label, value: dataSet.total})
-          });
-          this.sumData = tmpSumData;
+          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]);
        });
  }

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

  navigateBack() {
--- a/static/src/app/statistic/war-detail/scoreboard/scoreboard.component.html
+++ b/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"