From aa74a0de9b68f0556c3618c5867b8420f19c064d Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Mon, 2 Oct 2017 17:09:30 +0200 Subject: [PATCH] implement user detail charts --- .../campaign-player-detail.component.css | 43 +++- .../campaign-player-detail.component.html | 184 ++++++++++++++++-- .../campaign-player-detail.component.ts | 124 ++++++++++-- static/src/app/statistic/stats.module.ts | 4 +- 4 files changed, 315 insertions(+), 40 deletions(-) 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 7afe078..3733481 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 @@ -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; +} + 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 5b3d47f..ec93516 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 @@ -3,25 +3,169 @@

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 ce9a989..27840e7 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 @@ -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]; } } diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index ed3e8ab..58965d7 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -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] })