Simplify logic for player campaign detail page init
parent
629f36e1e0
commit
dd7bce59e3
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "opt-cc",
|
||||
"version": "1.7.3",
|
||||
"version": "1.7.4",
|
||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue