Simplify logic for player campaign detail page init

pull/34/head
HardiReady 2018-04-27 09:03:57 +02:00
parent 629f36e1e0
commit dd7bce59e3
4 changed files with 70 additions and 232 deletions

View File

@ -1,6 +1,6 @@
{
"name": "opt-cc",
"version": "1.7.3",
"version": "1.7.4",
"author": "Florian Hartwich <hardi@noarch.de>",
"private": true,
"scripts": {

View File

@ -41,12 +41,12 @@
</div>
<div class="charts-parent">
<div class="chart-container">
<div class="chart-container" *ngFor="let category of graphData">
<ngx-charts-line-chart
[results]="killData"
[results]="category.data"
[showRefLines]="showRefLines"
[showRefLabels]="showRefLabels"
[referenceLines]="killRefLines"
[referenceLines]="category.refLine"
[scheme]="colorScheme"
[gradient]="gradient"
[xAxis]="xAxis"
@ -54,167 +54,7 @@
[legend]="legend"
[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"
[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"
[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"
[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"
[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"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisCapture"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="chart-container">
<ngx-charts-line-chart
[results]="vehicleLightData"
[showRefLines]="showRefLines"
[showRefLabels]="showRefLabels"
[referenceLines]="killRefLines"
[scheme]="colorScheme"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisVehicleLight"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="chart-container">
<ngx-charts-line-chart
[results]="vehicleHeavyData"
[showRefLines]="showRefLines"
[showRefLabels]="showRefLabels"
[referenceLines]="killRefLines"
[scheme]="colorScheme"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisVehicleHeavy"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="chart-container">
<ngx-charts-line-chart
[results]="vehicleAirData"
[showRefLines]="showRefLines"
[showRefLabels]="showRefLabels"
[referenceLines]="killRefLines"
[scheme]="colorScheme"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisVehicleAir"
[yAxisLabel]="category.label"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">

View File

@ -20,16 +20,8 @@ export class CampaignPlayerDetailComponent implements OnInit {
campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
graphData: any[] = [];
sumData: any[] = [];
killData: any[] = [];
friendlyFireData: any[] = [];
vehicleLightData: any[] = [];
vehicleHeavyData: any[] = [];
vehicleAirData: any[] = [];
deathData: any[] = [];
respawnData: any[] = [];
reviveData: any[] = [];
captureData: any[] = [];
yAxisKill = 'Kills';
yAxisFriendlyFire = 'FriendlyFire';
@ -96,15 +88,63 @@ export class CampaignPlayerDetailComponent implements OnInit {
this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
.subscribe(campaignPlayer => {
this.campaignPlayer = campaignPlayer;
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.vehicleLightData = this.assignData(this.yAxisVehicleLight, 'vehicleLight');
this.vehicleHeavyData = this.assignData(this.yAxisVehicleHeavy, 'vehicleHeavy');
this.vehicleAirData = this.assignData(this.yAxisVehicleAir, 'vehicleAir');
this.graphData = [
{
data: this.assignData(this.yAxisKill, 'kill'),
refLine: this.killRefLines,
label: this.yAxisKill,
total: this.totalKills
},
{
data: this.assignData(this.yAxisFriendlyFire, 'friendlyFire'),
refLine: this.friendlyFireRefLines,
label: this.yAxisFriendlyFire,
total: this.totalFriendlyFire
},
{
data: this.assignData(this.yAxisDeath, 'death'),
refLine: this.deathRefLines,
label: this.yAxisDeath,
total: this.totalDeath
},
{
data: this.assignData(this.yAxisRespawn, 'respawn'),
refLine: this.respawnRefLines,
label: this.yAxisRespawn,
total: this.totalRespawn
},
{
data: this.assignData(this.yAxisRevive, 'revive'),
refLine: this.reviveRefLines,
label: this.yAxisRevive,
total: this.totalRevive
},
{
data: this.assignData(this.yAxisCapture, 'flagTouch'),
refLine: this.captureRefLines,
label: this.yAxisCapture,
total: this.totalCapture
},
{
data: this.assignData(this.yAxisVehicleLight, 'vehicleLight'),
refLine: this.vehicleLightRefLines,
label: this.yAxisVehicleLight,
total: this.totalVehicleLight
},
{
data: this.assignData(this.yAxisVehicleHeavy, 'vehicleHeavy'),
refLine: this.vehicleHeavyRefLines,
label: this.yAxisVehicleHeavy,
total: this.totalVehicleHeavy
},
{
data: this.assignData(this.yAxisVehicleAir, 'vehicleAir'),
refLine: this.vehicleAirRefLines,
label: this.yAxisVehicleAir,
total: this.totalVehicleAir
},
];
const totalDeathDiv = this.totalDeath === 0 ? 1 : this.totalDeath;
this.kdRatio = parseFloat((this.totalKills / totalDeathDiv).toFixed(2));
@ -114,48 +154,12 @@ export class CampaignPlayerDetailComponent implements OnInit {
this.respawnDeathRatio = parseFloat((this.totalRespawn / totalDeathDiv).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.totalRespawn
},
{
name: this.yAxisRevive,
value: this.totalRevive
},
{
name: this.yAxisCapture,
value: this.totalCapture
},
{
name: this.yAxisVehicleLight,
value: this.totalVehicleLight
},
{
name: this.yAxisVehicleHeavy,
value: this.totalVehicleHeavy
},
{
name: this.yAxisVehicleAir,
value: this.totalVehicleAir
},
];
Object.assign(this, [this.sumData, this.killData, this.friendlyFireData, this.vehicleLightData,
this.vehicleHeavyData, this.vehicleAirData, this.deathData, this.respawnData, this.reviveData,
this.captureData]);
// we can not directly push to target array, since only full reference changes trigger the refresh of data
const tmpSumData = [];
this.graphData.forEach(dataSet => {
tmpSumData.push({name: dataSet.label, value: dataSet.total})
});
this.sumData = tmpSumData;
});
}

View File

@ -29,18 +29,12 @@
<ng-template ngx-datatable-header-template let-sort="sortFn">
<span class="datatable-header-cell-wrapper">
<span class="datatable-header-cell-label text-truncate" title="{{column.head}}" (click)="sort()">
<img src="../../../../assets/scoreboard/{{column.prop}}.png">
<img src="../../../../assets/scoreboard/{{column.prop}}.png" alt="{{column.head}}">
</span>
</span>
</ng-template>
</ngx-datatable-column>
</div>
<!--<ngx-datatable-column [width]="80" name="" prop="name">-->
<!--<ng-template ngx-datatable-cell-template let-value="value">-->
<!--<span class="btn btn-sm btn-default in-table-btn disabled">Detail</span>-->
<!--</ng-template>-->
<!--</ngx-datatable-column>-->
<ngx-datatable-column [width]="80">
<ng-template ngx-datatable-cell-template let-row="row">
<span class="btn btn-sm btn-default in-table-btn"