Simplify logic for player campaign detail page init
parent
629f36e1e0
commit
dd7bce59e3
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "opt-cc",
|
"name": "opt-cc",
|
||||||
"version": "1.7.3",
|
"version": "1.7.4",
|
||||||
"author": "Florian Hartwich <hardi@noarch.de>",
|
"author": "Florian Hartwich <hardi@noarch.de>",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -41,12 +41,12 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="charts-parent">
|
<div class="charts-parent">
|
||||||
<div class="chart-container">
|
<div class="chart-container" *ngFor="let category of graphData">
|
||||||
<ngx-charts-line-chart
|
<ngx-charts-line-chart
|
||||||
[results]="killData"
|
[results]="category.data"
|
||||||
[showRefLines]="showRefLines"
|
[showRefLines]="showRefLines"
|
||||||
[showRefLabels]="showRefLabels"
|
[showRefLabels]="showRefLabels"
|
||||||
[referenceLines]="killRefLines"
|
[referenceLines]="category.refLine"
|
||||||
[scheme]="colorScheme"
|
[scheme]="colorScheme"
|
||||||
[gradient]="gradient"
|
[gradient]="gradient"
|
||||||
[xAxis]="xAxis"
|
[xAxis]="xAxis"
|
||||||
|
|
@ -54,167 +54,7 @@
|
||||||
[legend]="legend"
|
[legend]="legend"
|
||||||
[showXAxisLabel]="showXAxisLabel"
|
[showXAxisLabel]="showXAxisLabel"
|
||||||
[showYAxisLabel]="showYAxisLabel"
|
[showYAxisLabel]="showYAxisLabel"
|
||||||
[yAxisLabel]="yAxisKill"
|
[yAxisLabel]="category.label"
|
||||||
[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"
|
|
||||||
[autoScale]="autoscale"
|
[autoScale]="autoscale"
|
||||||
[timeline]="timeline"
|
[timeline]="timeline"
|
||||||
[roundDomains]="roundDomains">
|
[roundDomains]="roundDomains">
|
||||||
|
|
|
||||||
|
|
@ -20,16 +20,8 @@ export class CampaignPlayerDetailComponent implements OnInit {
|
||||||
|
|
||||||
campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
|
campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
|
||||||
|
|
||||||
|
graphData: any[] = [];
|
||||||
sumData: any[] = [];
|
sumData: any[] = [];
|
||||||
killData: any[] = [];
|
|
||||||
friendlyFireData: any[] = [];
|
|
||||||
vehicleLightData: any[] = [];
|
|
||||||
vehicleHeavyData: any[] = [];
|
|
||||||
vehicleAirData: any[] = [];
|
|
||||||
deathData: any[] = [];
|
|
||||||
respawnData: any[] = [];
|
|
||||||
reviveData: any[] = [];
|
|
||||||
captureData: any[] = [];
|
|
||||||
|
|
||||||
yAxisKill = 'Kills';
|
yAxisKill = 'Kills';
|
||||||
yAxisFriendlyFire = 'FriendlyFire';
|
yAxisFriendlyFire = 'FriendlyFire';
|
||||||
|
|
@ -96,15 +88,63 @@ export class CampaignPlayerDetailComponent implements OnInit {
|
||||||
this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
|
this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
|
||||||
.subscribe(campaignPlayer => {
|
.subscribe(campaignPlayer => {
|
||||||
this.campaignPlayer = campaignPlayer;
|
this.campaignPlayer = campaignPlayer;
|
||||||
this.killData = this.assignData(this.yAxisKill, 'kill');
|
|
||||||
this.friendlyFireData = this.assignData(this.yAxisFriendlyFire, 'friendlyFire');
|
this.graphData = [
|
||||||
this.deathData = this.assignData(this.yAxisDeath, 'death');
|
{
|
||||||
this.respawnData = this.assignData(this.yAxisRespawn, 'respawn');
|
data: this.assignData(this.yAxisKill, 'kill'),
|
||||||
this.reviveData = this.assignData(this.yAxisRevive, 'revive');
|
refLine: this.killRefLines,
|
||||||
this.captureData = this.assignData(this.yAxisCapture, 'flagTouch');
|
label: this.yAxisKill,
|
||||||
this.vehicleLightData = this.assignData(this.yAxisVehicleLight, 'vehicleLight');
|
total: this.totalKills
|
||||||
this.vehicleHeavyData = this.assignData(this.yAxisVehicleHeavy, 'vehicleHeavy');
|
},
|
||||||
this.vehicleAirData = this.assignData(this.yAxisVehicleAir, 'vehicleAir');
|
{
|
||||||
|
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;
|
const totalDeathDiv = this.totalDeath === 0 ? 1 : this.totalDeath;
|
||||||
this.kdRatio = parseFloat((this.totalKills / totalDeathDiv).toFixed(2));
|
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.respawnDeathRatio = parseFloat((this.totalRespawn / totalDeathDiv).toFixed(2));
|
||||||
|
|
||||||
this.sumData = [
|
// we can not directly push to target array, since only full reference changes trigger the refresh of data
|
||||||
{
|
const tmpSumData = [];
|
||||||
name: this.yAxisKill,
|
this.graphData.forEach(dataSet => {
|
||||||
value: this.totalKills
|
tmpSumData.push({name: dataSet.label, value: dataSet.total})
|
||||||
},
|
});
|
||||||
{
|
this.sumData = tmpSumData;
|
||||||
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]);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -29,18 +29,12 @@
|
||||||
<ng-template ngx-datatable-header-template let-sort="sortFn">
|
<ng-template ngx-datatable-header-template let-sort="sortFn">
|
||||||
<span class="datatable-header-cell-wrapper">
|
<span class="datatable-header-cell-wrapper">
|
||||||
<span class="datatable-header-cell-label text-truncate" title="{{column.head}}" (click)="sort()">
|
<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>
|
||||||
</span>
|
</span>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</ngx-datatable-column>
|
</ngx-datatable-column>
|
||||||
</div>
|
</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">
|
<ngx-datatable-column [width]="80">
|
||||||
<ng-template ngx-datatable-cell-template let-row="row">
|
<ng-template ngx-datatable-cell-template let-row="row">
|
||||||
<span class="btn btn-sm btn-default in-table-btn"
|
<span class="btn btn-sm btn-default in-table-btn"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue