implement user detail charts
parent
1bfa8ae539
commit
aa74a0de9b
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
[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 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]="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>
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue