hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Improve fraction stats and scss usage

pull/54/head
HardiReady 2019-02-17 11:38:44 +01:00
parent 90510eac93
commit 821da505f9
12 changed files with 81 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/src/app/statistic/war/fraction-stats/fraction-stats.component.html
View File

@ -20,7 +20,7 @@
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="lineChartLabel"
[yAxisLabel]="chartYAxisLabel"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
@ -32,15 +32,15 @@
[scheme]="colorScheme"
[results]="barChartData"
[xAxis]="xAxis"
[yAxis]="barShowYAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="barShowXAxisLabel"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[animations]="barAnimations"
[barPadding]="barPadding"
[xAxisTickFormatting]="axisFormat"
[xAxisLabel]="'Minute'">
[xAxisTickFormatting]="axisFormatX"
[yAxisTickFormatting]="axisFormatY">
<ng-template #tooltipTemplate let-model="model">
<small>{{'stats.fraction.tooltip.flag.minute' | translate}} {{model.series}}</small>
<div>{{model.name}} {{'stats.fraction.tooltip.flag.flag' | translate}}</div>

28
static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss
View File

@ -7,24 +7,24 @@
:host /deep/ mat-button-toggle {
color: #666666;
background: #e7e7e7;
}
:host /deep/ mat-button-toggle:hover {
background: #afafaf;
}
:hover {
background: #afafaf;
}
:host /deep/ mat-button-toggle.mat-button-toggle-checked {
background: #ffffff;
}
&.mat-button-toggle-checked {
background: #ffffff;
}
:host /deep/ label.mat-button-toggle-label {
margin: 2px 0;
}
label.mat-button-toggle-label {
margin: 2px 0;
}
:host /deep/ div.mat-button-toggle-label-content {
line-height: 25px;
margin-bottom: 0;
font-weight: normal;
div.mat-button-toggle-label-content {
line-height: 25px;
margin-bottom: 0;
font-weight: normal;
}
}
.chart-container {

47
static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts
View File

@ -1,5 +1,4 @@
import {Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
import * as d3 from 'd3';
import {ChartUtils} from '../../../utils/chart-utils';
import {Fraction} from '../../../utils/fraction.enum';
import {War} from '../../../models/model-interfaces';
@ -9,7 +8,7 @@ import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'war-detail-fraction',
templateUrl: './fraction-stats.component.html',
styleUrls: ['./fraction-stats.component.scss', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
styleUrls: ['./fraction-stats.component.scss']
})
export class FractionStatsComponent implements OnInit, OnChanges {
@ -48,10 +47,10 @@ export class FractionStatsComponent implements OnInit, OnChanges {
labels;
labelsKeys;
lineChartLabel: string;
chartYAxisLabel: string;
// line chart
showLineChart = true;
stepCurve = d3.curveStepAfter;
gradient = false;
yAxis = true;
xAxis = true;
@ -63,16 +62,15 @@ export class FractionStatsComponent implements OnInit, OnChanges {
timeline = false;
roundDomains = true;
// bar chart
barPadding = 0;
barAnimations = false;
barShowYAxis = false;
barShowXAxisLabel = true;
constructor(private translate: TranslateService) {
}
ngOnInit() {
this.setLineChartLabel(this.labels.points);
this.setChartYAxisLabel(this.labels.points);
}
ngOnChanges(changes: SimpleChanges) {
@ -138,7 +136,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
this.activeChartSelect = newSelection;
if (this.activeChartSelect !== this.labels.flag) {
this.showLineChart = true;
this.setLineChartLabel(this.activeChartSelect);
this.setChartYAxisLabel(this.activeChartSelect);
switch (this.activeChartSelect) {
case this.labels.points:
this.lineChartData = this.tmpPointData;
@ -208,7 +206,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
if (this.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
if (ChartUtils.isOneMinuteAhead(budgetEntryDate, this.tmpBudgetData)) {
this.tmpBudgetData[fractionChange].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time), budgetEntry.newBudget));
this.tmpBudgetData[fractionOld].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time),
this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value));
@ -233,7 +231,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
if (killEntry.fraction === 'OPFOR') {
killCountOpfor++;
}
if (this.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
if (ChartUtils.isOneMinuteAhead(killEntryDate, this.tmpKillData)) {
this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
}
@ -244,7 +242,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
if (killEntry.fraction === 'OPFOR') {
ffKillCountOpfor++;
}
if (this.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
if (ChartUtils.isOneMinuteAhead(killEntryDate, this.tmpFrienlyFireData)) {
this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
}
@ -275,7 +273,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
} else {
reviveCountOpfor++;
}
if (this.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
if (ChartUtils.isOneMinuteAhead(reviveEntryDate, this.tmpReviveData)) {
this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
}
@ -285,7 +283,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
} else {
stabilizeCountOpfor++;
}
if (this.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
if (ChartUtils.isOneMinuteAhead(reviveEntryDate, this.tmpStabilizeData)) {
this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
}
@ -344,7 +342,7 @@ export class FractionStatsComponent implements OnInit, OnChanges {
}
}
}
if (this.isTwoMinutesAhead(vehicleEntryDate, this.tmpVehicleData) || index === this.logData.vehicle.length - 1) {
if (ChartUtils.isOneMinuteAhead(vehicleEntryDate, this.tmpVehicleData) || index === this.logData.vehicle.length - 1) {
this.tmpVehicleData[0].series.push(ChartUtils.getSeriesEntry(vehicleEntryDate, vehicleKillCountBlufor));
this.tmpVehicleData[1].series.push(ChartUtils.getSeriesEntry(vehicleEntryDate, vehicleKillCountOpfor));
if (vehicleEntry.vehicleClass) {
@ -376,7 +374,8 @@ export class FractionStatsComponent implements OnInit, OnChanges {
} else {
transportCountOpfor++;
}
if (this.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
if (ChartUtils.isOneMinuteAhead(transportEntryDate, this.tmpTransportData) ||
index === this.logData.transport.length - 1) {
this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountBlufor));
this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountOpfor));
}
@ -451,10 +450,6 @@ export class FractionStatsComponent implements OnInit, OnChanges {
this.initialized.flag = true;
}
protected isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000);
}
initializeTempCollections() {
this.tmpPointData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
@ -496,17 +491,21 @@ export class FractionStatsComponent implements OnInit, OnChanges {
}
}
setLineChartLabel(i18n: string) {
setChartYAxisLabel(i18n: string) {
this.translate.get(i18n).subscribe((translated) => {
this.lineChartLabel = translated;
this.chartYAxisLabel = translated;
});
}
axisFormat(val) {
axisFormatX(val) {
if (val % 10 === 0) {
return val
return val;
} else {
return ''
return '';
}
}
axisFormatY(val) {
return '';
}
}

2
static/src/app/statistic/war/scoreboard/scoreboard.component.css
View File

@ -4,7 +4,7 @@
height: 68vh;
overflow-x: hidden;
overflow-y: auto;
box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
border-bottom: 1px solid #dadada;
}

19
static/src/app/statistic/war/scoreboard/scoreboard.component.html
View File

@ -1,22 +1,25 @@
<div class="fade-in scoreboard-table">
<mat-table matSort
[dataSource]="sortedRows"
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
(matSortChange)="sortScoreboardData($event)"
class="mat-elevation-z8">
[dataSource]="sortedRows"
matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear
(matSortChange)="sortScoreboardData($event)"
class="mat-elevation-z8">
<ng-container matColumnDef="{{tableHead[0].prop}}">
<mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
<mat-header-cell *matHeaderCellDef
mat-sort-header="{{tableHead[0].prop}}">{{tableHead[0].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element"
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
[style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
{{element.name}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="{{tableHead[1].prop}}">
<mat-header-cell *matHeaderCellDef mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
<mat-header-cell *matHeaderCellDef
mat-sort-header="{{tableHead[1].prop}}">{{tableHead[1].head | translate}}</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.fraction ===
'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}</mat-cell>
</ng-container>
<ng-container *ngFor="let column of tableHead.slice(2, tableHead.length)" matColumnDef="{{column.prop}}">

1
static/src/app/statistic/war/server-stats/server-stats.component.html
View File

@ -21,6 +21,7 @@
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="barChartLabel"
[animations]="barAnimations"
[barPadding]="barPadding"
[roundDomains]="roundDomains">
</ngx-charts-bar-vertical>

12
static/src/app/statistic/war/server-stats/server-stats.component.css → static/src/app/statistic/war/server-stats/server-stats.component.scss
View File

@ -7,14 +7,14 @@
:host /deep/ mat-button-toggle {
color: #666666;
background: #e7e7e7;
}
:host /deep/ mat-button-toggle:hover {
background: #afafaf;
}
:hover {
background: #afafaf;
}
:host /deep/ mat-button-toggle.mat-button-toggle-checked {
background: #ffffff;
&.mat-button-toggle-checked {
background: #ffffff;
}
}
:host /deep/ label.mat-button-toggle-label {

25
static/src/app/statistic/war/server-stats/server-stats.component.ts
View File

@ -5,10 +5,10 @@ import {ChartUtils} from '../../../utils/chart-utils';
@Component({
selector: 'cc-server-statistics',
templateUrl: './server-stats.component.html',
styleUrls: ['./server-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
})
selector: 'cc-server-statistics',
templateUrl: './server-stats.component.html',
styleUrls: ['./server-stats.component.scss']
})
export class ServerStatsComponent implements OnInit, OnChanges {
@ViewChild('overview') private overviewContainer: ElementRef;
@ -54,6 +54,7 @@ export class ServerStatsComponent implements OnInit, OnChanges {
autoscale = true;
timeline = false;
roundDomains = true;
barAnimations = false;
barPadding = 2;
colorScheme = {
name: 'nightLights',
@ -75,8 +76,8 @@ export class ServerStatsComponent implements OnInit, OnChanges {
ngOnChanges(changes: SimpleChanges) {
if ((changes.war || changes.performanceData) && this.performanceData) {
this.translate.get(['stats.performance.select.timeline.label.minimum',
'stats.performance.select.timeline.label.average',
'stats.performance.select.timeline.label.maximum']).subscribe((res) => {
'stats.performance.select.timeline.label.average',
'stats.performance.select.timeline.label.maximum']).subscribe((res) => {
const resValues = Object.keys(res).map(val => res[val]);
this.initializeChartData(resValues[2], resValues[0], resValues[1]);
});
@ -162,13 +163,13 @@ export class ServerStatsComponent implements OnInit, OnChanges {
}
}
this.tmpSingleAvg.push({
name: entry.entityName,
value: entry.singleAvgFps
});
name: entry.entityName,
value: entry.singleAvgFps
});
this.tmpSingleMin.push({
name: entry.entityName,
value: entry.singleMinFps
});
name: entry.entityName,
value: entry.singleMinFps
});
});
tmpAvgArray = tmpAvgArray.map(x => Math.round(x / this.performanceData.length));

2
static/src/app/statistic/war/war-header/war-header.component.css
View File

@ -39,7 +39,7 @@ span.tab-control {
vertical-align: middle;
}
:host/deep/.mat-icon-stats-performance g {
:host /deep/ .mat-icon-stats-performance g {
stroke: #666666;
}

2
static/src/app/statistic/war/war-list/war-item.component.css
View File

@ -3,7 +3,7 @@
border-right: 1px solid #dadada;
}
.war-item:hover, .selected{
.war-item:hover, .selected {
background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
border-bottom: 1px solid #dadada;
}

2
static/src/app/statistic/war/war-list/war-list.component.css
View File

@ -9,7 +9,7 @@
cursor: pointer;
}
.list-header:hover, .selected{
.list-header:hover, .selected {
background: linear-gradient(80deg, white 0%, #e7e7e7 120%);
}

4
static/src/app/utils/chart-utils.ts
View File

@ -34,4 +34,8 @@ export class ChartUtils {
'value': value2
}];
}
public static isOneMinuteAhead(entryDate: Date, tmpData: any): boolean {
return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + 60000;
}
}