implement user detail charts

2017-10-02 17:09:30 +02:00 · 2017-10-02 17:09:30 +02:00 · aa74a0de9b
parent 1bfa8ae539
commit aa74a0de9b
4 changed files with 315 additions and 40 deletions
--- 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;
+}
+
--- 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,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>
--- 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];
  }

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