hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

implement user detail charts

pull/10/head
Florian Hartwich 2017-10-02 17:09:30 +02:00
parent 1bfa8ae539
commit aa74a0de9b
4 changed files with 315 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 {
width: 90%;
min-width: 600px;
height: 300px;
h2 {
padding: 10px;
}
.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;
}

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

@ -3,12 +3,50 @@
<h2 class="pull-left">Spielerstatistik - {{campaignPlayer.name}}</h2>
<h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
<div class="sum-container">
<div class="gauge-container pull-left">
<ngx-charts-linear-gauge
[view]="[200, 100]"
[scheme]="colorScheme"
[value]="kdRatio"
[previousValue]="1"
[max]="maxKd"
[min]="0"
[units]="'Kill/Death'">
</ngx-charts-linear-gauge>
<span style="height: 150px"></span>
<ngx-charts-linear-gauge
[view]="[200, 100]"
[scheme]="colorScheme"
[value]="respawnDeathRatio"
[previousValue]="0.5"
[max]="1"
[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]="refLines"
[referenceLines]="killRefLines"
[scheme]="colorScheme"
[gradient]="gradient"
[xAxis]="xAxis"
@ -17,11 +55,117 @@
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Kills'"
[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>

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

@ -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",
"series": []
name: label,
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;
}
this.killData = [killObj];
Object.assign(this, this.killData);
this.refLines.push({value: total / this.campaignPlayer.players.length, name: 'Durchschnitt'});
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;
}
return [killObj];
}
}

4
static/src/app/statistic/stats.module.ts
View File

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