Add player kill chart

pull/10/head
Florian Hartwich 2017-10-02 14:41:17 +02:00
parent 0621d1d2bf
commit 1bfa8ae539
5 changed files with 87 additions and 9 deletions

View File

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

View File

@ -1,5 +1,27 @@
<div class="overview" xmlns="http://www.w3.org/1999/html"> <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> </div>

View File

@ -2,6 +2,7 @@ import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {CampaignPlayer} from "../../models/model-interfaces"; import {CampaignPlayer} from "../../models/model-interfaces";
import {PlayerService} from "../../services/player-service/player.service"; import {PlayerService} from "../../services/player-service/player.service";
import {ChartUtils} from "../../utils/chart-utils";
@Component({ @Component({
@ -11,9 +12,26 @@ import {PlayerService} from "../../services/player-service/player.service";
}) })
export class CampaignPlayerDetailComponent { 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, constructor(private route: ActivatedRoute,
@ -26,7 +44,30 @@ export class CampaignPlayerDetailComponent {
.flatMap(id => this.playerService.getCampaignPlayer(id[0], id[1])) .flatMap(id => this.playerService.getCampaignPlayer(id[0], id[1]))
.subscribe(campaignPlayer => { .subscribe(campaignPlayer => {
this.campaignPlayer = 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'});
}
} }

View File

@ -2,6 +2,7 @@ import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {CarouselConfig} from "ngx-bootstrap"; import {CarouselConfig} from "ngx-bootstrap";
import {CampaignService} from "../../services/campaign-service/campaign.service"; import {CampaignService} from "../../services/campaign-service/campaign.service";
import {ChartUtils} from "../../utils/chart-utils";
@Component({ @Component({
@ -94,11 +95,7 @@ export class StatisticOverviewComponent {
for (let i = wars.length - 1; i >= 0; i--) { for (let i = wars.length - 1; i >= 0; i--) {
let j = wars.length - i - 1; 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({ pointsObj[0].series.push({
name: warDateString, name: warDateString,

View File

@ -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);
}
}