Add player kill chart

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

@@ -4,9 +4,17 @@
   overflow-x: hidden;
   border-left: thin solid lightgrey;
   bottom: 20px;
-  width: 100%;
+  width: 80%;
   padding-left: 50px;
+  padding-right: 5%;
   padding-top: 70px;
   margin-left: 10px;
   height: 100vh;
 }
+
+.chart-container {
+  width: 90%;
+  min-width: 600px;
+  height: 300px;
+  margin: auto;
+}

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

@@ -1,5 +1,27 @@
 <div class="overview" xmlns="http://www.w3.org/1999/html">
 
-  <h2>{{campaignPlayer.name}}</h2>
+  <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
+    [results]="killData"
+    [showRefLines]="showRefLines"
+    [showRefLabels]="showRefLabels"
+    [referenceLines]="refLines"
+    [scheme]="colorScheme"
+    [gradient]="gradient"
+    [xAxis]="xAxis"
+    [yAxis]="yAxis"
+    [legend]="legend"
+    [legendTitle]="legendTitle"
+    [showXAxisLabel]="showXAxisLabel"
+    [showYAxisLabel]="showYAxisLabel"
+    [yAxisLabel]="'Kills'"
+    [autoScale]="autoscale"
+    [timeline]="timeline"
+    [roundDomains]="roundDomains">
+  </ngx-charts-line-chart>
+   </div>
 
 </div>

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

@@ -2,6 +2,7 @@ import {Component} from "@angular/core";
 import {ActivatedRoute} from "@angular/router";
 import {CampaignPlayer} from "../../models/model-interfaces";
 import {PlayerService} from "../../services/player-service/player.service";
+import {ChartUtils} from "../../utils/chart-utils";
 
 
 @Component({
@@ -11,9 +12,26 @@ import {PlayerService} from "../../services/player-service/player.service";
 })
 export class CampaignPlayerDetailComponent {
 
-  campaignPlayer: CampaignPlayer = {};
+  campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
 
-  fractionRadioSelect: string;
+  killData: any[] = [];
+
+  colorScheme = {
+    domain: ['#00ce12']
+  };
+  showRefLines = true;
+  showRefLabels = true;
+  refLines = [];
+  gradient = false;
+  xAxis = true;
+  yAxis = true;
+  legend = false;
+  legendTitle = '';
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  autoscale = false;
+  timeline = false;
+  roundDomains = true;
 
 
   constructor(private route: ActivatedRoute,
@@ -26,7 +44,30 @@ export class CampaignPlayerDetailComponent {
       .flatMap(id => this.playerService.getCampaignPlayer(id[0], id[1]))
       .subscribe(campaignPlayer => {
         this.campaignPlayer = campaignPlayer;
+        this.assignKillData();
       });
   }
 
+  private assignKillData() {
+    let killObj = {
+      "name": "Kills",
+      "series": []
+    };
+    let total = 0;
+    for (let i = 0; i < this.campaignPlayer.players.length; i++) {
+      const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
+      const warKills = this.campaignPlayer.players[i].kill;
+      killObj.series.push({
+        name: warDateString,
+        value: warKills
+      });
+      total += warKills;
+    }
+
+    this.killData = [killObj];
+    Object.assign(this, this.killData);
+    this.refLines.push({value: total / this.campaignPlayer.players.length, name: 'Durchschnitt'});
+
+  }
+
 }

static/src/app/statistic/overview/stats-overview.component.ts

@@ -2,6 +2,7 @@ import {Component} from "@angular/core";
 import {ActivatedRoute} from "@angular/router";
 import {CarouselConfig} from "ngx-bootstrap";
 import {CampaignService} from "../../services/campaign-service/campaign.service";
+import {ChartUtils} from "../../utils/chart-utils";
 
 
 @Component({
@@ -94,11 +95,7 @@ export class StatisticOverviewComponent {
 
     for (let i = wars.length - 1; i >= 0; i--) {
       let j = wars.length - i - 1;
-      // const warDateString = new Date(wars[i].date); TODO: use ngx-chart timeline
+      const warDateString = ChartUtils.getShortDateString(wars[i].date);
-      const isoDate = wars[i].date.slice(0, 10);
-      const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
-      const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'
-        + isoDate.slice(5, 7) + '.' + isoDate.slice(2, 4);
 
       pointsObj[0].series.push({
         name: warDateString,

static/src/app/utils/chart-utils.ts

@@ -0,0 +1,10 @@
+export class ChartUtils {
+
+  public static getShortDateString(date) : string {
+    const isoDate = date.slice(0, 10);
+    const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
+    return (dayDate < 10 ? "0" + dayDate : dayDate) + '.'
+      + isoDate.slice(5, 7) + '.' + isoDate.slice(2, 4);
+  }
+
+}