implement user detail charts

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

@@ -5,16 +5,47 @@
   border-left: thin solid lightgrey;
   bottom: 20px;
   width: 80%;
-  padding-left: 50px;
+  padding-left: 20px;
   padding-right: 5%;
   padding-top: 70px;
-  margin-left: 10px;
   height: 100vh;
 }
 
-.chart-container {
+h2 {
-  width: 90%;
+  padding: 10px;
-  min-width: 600px;
+}
-  height: 300px;
+
+.sum-container {
+  width: 100%;
+  margin: auto;
+  clear: left;
+  padding: 2%;
+}
+
+.gauge-container {
+  padding: 35px;
+}
+
+.sum-bar-container {
+  width: 70%;
+  height: 400px;
+  margin: auto;
+  padding-left: 4%;
+}
+
+.charts-parent {
+  clear: left;
+  padding-top: 50px;
+  width: 100%;
   margin: auto;
 }
+
+.chart-container {
+  width: 42%;
+  min-width: 500px;
+  height: 300px;
+  padding: 15px;
+  margin: 2%;
+  float: left;
+}
+

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

@@ -3,25 +3,169 @@
   <h2 class="pull-left">Spielerstatistik - {{campaignPlayer.name}}</h2>
   <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
 
-  <div class="chart-container">
+
-  <ngx-charts-line-chart
+  <div class="sum-container">
-    [results]="killData"
+    <div class="gauge-container pull-left">
-    [showRefLines]="showRefLines"
+      <ngx-charts-linear-gauge
-    [showRefLabels]="showRefLabels"
+        [view]="[200, 100]"
-    [referenceLines]="refLines"
+        [scheme]="colorScheme"
-    [scheme]="colorScheme"
+        [value]="kdRatio"
-    [gradient]="gradient"
+        [previousValue]="1"
-    [xAxis]="xAxis"
+        [max]="maxKd"
-    [yAxis]="yAxis"
+        [min]="0"
-    [legend]="legend"
+        [units]="'Kill/Death'">
-    [legendTitle]="legendTitle"
+      </ngx-charts-linear-gauge>
-    [showXAxisLabel]="showXAxisLabel"
+      <span style="height: 150px"></span>
-    [showYAxisLabel]="showYAxisLabel"
+      <ngx-charts-linear-gauge
-    [yAxisLabel]="'Kills'"
+        [view]="[200, 100]"
-    [autoScale]="autoscale"
+        [scheme]="colorScheme"
-    [timeline]="timeline"
+        [value]="respawnDeathRatio"
-    [roundDomains]="roundDomains">
+        [previousValue]="0.5"
-  </ngx-charts-line-chart>
+        [max]="1"
-   </div>
+        [min]="0"
+        [units]="'Respawn/Death'">
+      </ngx-charts-linear-gauge>
+    </div>
+
+    <div class="sum-bar-container pull-left">
+      <ngx-charts-bar-horizontal
+        [scheme]="colorSchemeBar"
+        [results]="sumData"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel">
+      </ngx-charts-bar-horizontal>
+    </div>
+  </div>
+
+  <div class="charts-parent">
+    <div class="chart-container">
+      <ngx-charts-line-chart
+        [results]="killData"
+        [showRefLines]="showRefLines"
+        [showRefLabels]="showRefLabels"
+        [referenceLines]="killRefLines"
+        [scheme]="colorScheme"
+        [gradient]="gradient"
+        [xAxis]="xAxis"
+        [yAxis]="yAxis"
+        [legend]="legend"
+        [legendTitle]="legendTitle"
+        [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"
+        [legendTitle]="legendTitle"
+        [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"
+        [legendTitle]="legendTitle"
+        [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"
+        [legendTitle]="legendTitle"
+        [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"
+        [legendTitle]="legendTitle"
+        [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"
+        [legendTitle]="legendTitle"
+        [showXAxisLabel]="showXAxisLabel"
+        [showYAxisLabel]="showYAxisLabel"
+        [yAxisLabel]="yAxisCapture"
+        [autoScale]="autoscale"
+        [timeline]="timeline"
+        [roundDomains]="roundDomains">
+      </ngx-charts-line-chart>
+    </div>
+  </div>
 
 </div>

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

@@ -14,14 +14,39 @@ export class CampaignPlayerDetailComponent {
 
   campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
 
+  sumData: any[] = [];
   killData: any[] = [];
+  friendlyFireData: any[] = [];
+  deathData: any[] = [];
+  respawnData: any[] = [];
+  reviveData: any[] = [];
+  captureData: any[] = [];
+
+  yAxisKill = 'Kills';
+  yAxisFriendlyFire = 'FriendlyFire';
+  yAxisDeath = 'Tode';
+  yAxisRespawn = 'Respawn';
+  yAxisRevive = 'Revive';
+  yAxisCapture = 'Eroberungen';
+
 
   colorScheme = {
     domain: ['#00ce12']
   };
+  colorSchemeBar = {
+    domain: [
+      '#2d5a00', '#455600', '#00561f', '#3f3b00', '#003c19', '#083c00'
+    ]
+  };
   showRefLines = true;
   showRefLabels = true;
-  refLines = [];
+  killRefLines = [];
+  deathRefLines = [];
+  captureRefLines = [];
+  friendlyFireRefLines = [];
+  reviveRefLines = [];
+  respawnRefLines = [];
+
   gradient = false;
   xAxis = true;
   yAxis = true;
@@ -33,6 +58,19 @@ export class CampaignPlayerDetailComponent {
   timeline = false;
   roundDomains = true;
 
+  avgLabel = 'Durchschnitt';
+
+  totalKills;
+  totalFriendlyFire;
+  totalDeath;
+  totalRespawn;
+  totalRevive;
+  totalCapture;
+
+  kdRatio = 0;
+  maxKd = 1.7;
+  respawnDeathRatio = 0;
+
 
   constructor(private route: ActivatedRoute,
               private playerService: PlayerService) {
@@ -44,30 +82,92 @@ export class CampaignPlayerDetailComponent {
       .flatMap(id => this.playerService.getCampaignPlayer(id[0], id[1]))
       .subscribe(campaignPlayer => {
         this.campaignPlayer = campaignPlayer;
-        this.assignKillData();
+        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.kdRatio = parseFloat((this.totalKills / this.totalDeath).toFixed(2));
+        if (this.kdRatio > 1) this.maxKd = this.kdRatio * 1.7;
+
+        this.respawnDeathRatio = parseFloat((this.totalRespawn / this.totalDeath).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.totalDeath
+          },
+          {
+            name: this.yAxisRevive,
+            value: this.totalRevive
+          },
+          {
+            name: this.yAxisCapture,
+            value: this.totalCapture
+          }
+        ];
+
+        Object.assign(this, [this.sumData, this.killData, this.friendlyFireData, this.deathData, this.respawnData, this.reviveData, this.captureData]);
       });
   }
 
-  private assignKillData() {
+  private assignData(label, field) {
     let killObj = {
-      "name": "Kills",
+      name: label,
-      "series": []
+      series: []
     };
+    const playerLength = this.campaignPlayer.players.length;
     let total = 0;
-    for (let i = 0; i < this.campaignPlayer.players.length; i++) {
+    for (let i = 0; i < playerLength; i++) {
       const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
-      const warKills = this.campaignPlayer.players[i].kill;
+      const warKills = this.campaignPlayer.players[i][field];
       killObj.series.push({
         name: warDateString,
         value: warKills
       });
       total += warKills;
     }
-
+    switch (field) {
-    this.killData = [killObj];
+      case 'kill':
-    Object.assign(this, this.killData);
+        this.killRefLines.push({value: total / playerLength, name: this.avgLabel});
-    this.refLines.push({value: total / this.campaignPlayer.players.length, name: 'Durchschnitt'});
+        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;
+    }
+    return [killObj];
   }
 
 }

static/src/app/statistic/stats.module.ts

@@ -3,7 +3,7 @@ import {CommonModule} from "@angular/common";
 import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/war-service/war.service";
-import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts";
+import {GaugeModule, LineChartModule, NgxChartsModule, PieChartModule} from "@swimlane/ngx-charts";
 import {AccordionModule, CarouselModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/campaign-service/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
@@ -11,7 +11,7 @@ import {PlayerService} from "../services/player-service/player.service";
 
 @NgModule({
   declarations: statsRoutingComponents,
-  imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule,
+  imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
     AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService]
 })