diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css
index 039c8c0..7afe078 100644
--- a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css
+++ b/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;
+}
diff --git 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
index 803341a..5b3d47f 100644
--- 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
@@ -1,5 +1,27 @@
-
{{campaignPlayer.name}}
+
Spielerstatistik - {{campaignPlayer.name}}
+
{{campaignPlayer.campaign.title}} Kampagne
+
+
+
+
+
diff --git 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
index 95fdf41..ce9a989 100644
--- 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
@@ -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'});
+
+ }
+
}
diff --git a/static/src/app/statistic/overview/stats-overview.component.ts b/static/src/app/statistic/overview/stats-overview.component.ts
index 2b624aa..8af5c9e 100644
--- a/static/src/app/statistic/overview/stats-overview.component.ts
+++ b/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 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);
+ const warDateString = ChartUtils.getShortDateString(wars[i].date);
pointsObj[0].series.push({
name: warDateString,
diff --git a/static/src/app/utils/chart-utils.ts b/static/src/app/utils/chart-utils.ts
new file mode 100644
index 0000000..0761dca
--- /dev/null
+++ b/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);
+ }
+
+}