202 lines
7.5 KiB
TypeScript
202 lines
7.5 KiB
TypeScript
import {Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild} from '@angular/core';
|
|
import {War} from '../../../models/model-interfaces';
|
|
import {TranslateService} from '@ngx-translate/core';
|
|
import {ChartUtils} from '../../../utils/chart-utils';
|
|
|
|
|
|
@Component({
|
|
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;
|
|
|
|
@Input() war: War;
|
|
|
|
@Input() performanceData: any;
|
|
|
|
public activeChartSelect: string;
|
|
|
|
showBarChart = true;
|
|
barChartData: any[] = [];
|
|
lineChartData: any[] = [];
|
|
|
|
tmpSingleAvg;
|
|
tmpSingleMin;
|
|
tmpAvgTimeline;
|
|
tmpMinTimeline;
|
|
tmpServerTimeline;
|
|
|
|
barChartLabel: string;
|
|
lineChartLabel: string;
|
|
readonly labels = {
|
|
singleAvg: 'stats.performance.select.single.avg',
|
|
singleMin: 'stats.performance.select.single.min',
|
|
avgTimeline: 'stats.performance.select.timeline.avg',
|
|
minTimeline: 'stats.performance.select.timeline.min',
|
|
serverFps: 'stats.performance.select.timeline.server',
|
|
};
|
|
readonly labelsAsString = Object.keys(this.labels)
|
|
.map((key) => this.labels[key]);
|
|
|
|
gradient = false;
|
|
yAxis = true;
|
|
xAxis = true;
|
|
legend = false;
|
|
legendTitle = false;
|
|
showXAxisLabel = false;
|
|
showYAxisLabel = true;
|
|
autoscale = true;
|
|
timeline = false;
|
|
roundDomains = true;
|
|
barPadding = 2;
|
|
colorScheme = {
|
|
name: 'nightLights',
|
|
selectable: false,
|
|
group: 'Ordinal',
|
|
domain: [
|
|
'#4e31a5', '#9c25a7', '#3065ab', '#57468b', '#904497', '#46648b',
|
|
'#32118d', '#a00fb3', '#1052a2', '#6e51bd', '#b63cc3', '#6c97cb', '#8671c1', '#b455be', '#7496c3'
|
|
]
|
|
};
|
|
|
|
constructor(private translate: TranslateService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.setBarChartLabel(this.labels.singleAvg);
|
|
}
|
|
|
|
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) => {
|
|
const resValues = Object.keys(res).map(val => res[val]);
|
|
this.initializeChartData(resValues[2], resValues[0], resValues[1]);
|
|
});
|
|
Object.assign(this, [this.barChartData]);
|
|
this.activeChartSelect = this.labels.singleAvg;
|
|
}
|
|
}
|
|
|
|
selectChart(newSelection) {
|
|
this.activeChartSelect = newSelection;
|
|
if (this.activeChartSelect === this.labels.singleAvg || this.activeChartSelect === this.labels.singleMin) {
|
|
this.showBarChart = true;
|
|
this.setBarChartLabel(this.activeChartSelect);
|
|
switch (this.activeChartSelect) {
|
|
case this.labels.singleAvg:
|
|
this.barChartData = this.tmpSingleAvg;
|
|
break;
|
|
case this.labels.singleMin:
|
|
this.barChartData = this.tmpSingleMin;
|
|
break;
|
|
}
|
|
} else {
|
|
this.showBarChart = false;
|
|
this.setLineChartLabel(this.activeChartSelect);
|
|
switch (this.activeChartSelect) {
|
|
case this.labels.avgTimeline:
|
|
this.lineChartData = this.tmpAvgTimeline;
|
|
break;
|
|
case this.labels.minTimeline:
|
|
this.lineChartData = this.tmpMinTimeline;
|
|
break;
|
|
case this.labels.serverFps:
|
|
this.lineChartData = this.tmpServerTimeline;
|
|
}
|
|
}
|
|
}
|
|
|
|
initializeChartData(labelMax: string, labelMin: string, labelAvg: string) {
|
|
this.tmpAvgTimeline = ChartUtils.getMultiDataArray(labelMax, labelAvg, labelMin);
|
|
this.tmpMinTimeline = ChartUtils.getMultiDataArray(labelMax, labelAvg, labelMin);
|
|
this.tmpServerTimeline = ChartUtils.getMultiDataArray(labelAvg, labelMin);
|
|
|
|
const diffMs = (new Date(this.war.endDate).getTime() - new Date(this.war.date).getTime());
|
|
const warDurationMinutes = Math.round(diffMs / 60000);
|
|
|
|
const dateObj = new Date(this.war.date);
|
|
dateObj.setHours(0);
|
|
dateObj.setMinutes(1);
|
|
|
|
this.tmpSingleAvg = [];
|
|
this.tmpSingleMin = [];
|
|
const maxAvgIdx = Math.min(this.performanceData.map(p => p.avgFps.length)
|
|
.sort((a, b) => b - a)[0], warDurationMinutes);
|
|
const maxMinIdx = Math.min(this.performanceData.map(p => p.avgFps.length)
|
|
.sort((a, b) => b - a)[0], warDurationMinutes);
|
|
let tmpAvgArray = new Array(maxAvgIdx).fill(0);
|
|
const tmpAvgMin = new Array(maxAvgIdx).fill(1000);
|
|
const tmpAvgMax = new Array(maxAvgIdx).fill(0);
|
|
let tmpMinArray = new Array(maxMinIdx).fill(0);
|
|
const tmpMinMin = new Array(maxMinIdx).fill(1000);
|
|
const tmpMinMax = new Array(maxMinIdx).fill(0);
|
|
|
|
this.performanceData.forEach((entry) => {
|
|
if (entry.entityName !== 'SERVER') {
|
|
// PLAYER AVERAGE TIMELINE DATA
|
|
for (let i = 0; i < entry.avgFps.length && i < tmpAvgArray.length; i++) {
|
|
tmpAvgArray[i] = tmpAvgArray[i] + entry.avgFps[i];
|
|
tmpAvgMin[i] = Math.round(Math.min(tmpAvgMin[i], entry.avgFps[i]));
|
|
tmpAvgMax[i] = Math.round(Math.max(tmpAvgMax[i], entry.avgFps[i]));
|
|
}
|
|
// PLAYER MINIMUM TIMELINE DATA
|
|
for (let i = 0; i < entry.minFps.length && i < tmpMinArray.length; i++) {
|
|
tmpMinArray[i] = tmpMinArray[i] + entry.minFps[i];
|
|
tmpMinMin[i] = Math.round(Math.min(tmpMinMin[i], entry.minFps[i]));
|
|
tmpMinMax[i] = Math.round(Math.max(tmpMinMax[i], entry.minFps[i]));
|
|
}
|
|
} else {
|
|
// SERVER TIMELINE DATA
|
|
for (let i = 0; i < entry.avgFps.length && i < warDurationMinutes; i++) {
|
|
const currDate = new Date(dateObj.getTime() + i * 60000);
|
|
this.tmpServerTimeline[0].series.push(ChartUtils.getSeriesEntry(currDate, entry.avgFps[i]));
|
|
this.tmpServerTimeline[1].series.push(ChartUtils.getSeriesEntry(currDate, entry.minFps[i]));
|
|
}
|
|
}
|
|
this.tmpSingleAvg.push({
|
|
name: entry.entityName,
|
|
value: entry.singleAvgFps
|
|
});
|
|
this.tmpSingleMin.push({
|
|
name: entry.entityName,
|
|
value: entry.singleMinFps
|
|
});
|
|
});
|
|
|
|
tmpAvgArray = tmpAvgArray.map(x => Math.round(x / this.performanceData.length));
|
|
for (let i = 0; i < tmpAvgArray.length; i++) {
|
|
const currDate = new Date(dateObj.getTime() + i * 60000);
|
|
this.tmpAvgTimeline[0].series.push(ChartUtils.getSeriesEntry(currDate, tmpAvgMax[i]));
|
|
this.tmpAvgTimeline[1].series.push(ChartUtils.getSeriesEntry(currDate, tmpAvgArray[i]));
|
|
this.tmpAvgTimeline[2].series.push(ChartUtils.getSeriesEntry(currDate, tmpAvgMin[i]));
|
|
}
|
|
tmpMinArray = tmpMinArray.map(x => Math.round(x / this.performanceData.length));
|
|
for (let i = 0; i < tmpMinArray.length; i++) {
|
|
const currDate = new Date(dateObj.getTime() + i * 60000);
|
|
this.tmpMinTimeline[0].series.push(ChartUtils.getSeriesEntry(currDate, tmpMinMax[i]));
|
|
this.tmpMinTimeline[1].series.push(ChartUtils.getSeriesEntry(currDate, tmpMinArray[i]));
|
|
this.tmpMinTimeline[2].series.push(ChartUtils.getSeriesEntry(currDate, tmpMinMin[i]));
|
|
}
|
|
this.tmpSingleAvg.sort((a, b) => a.value - b.value);
|
|
this.tmpSingleMin.sort((a, b) => a.value - b.value);
|
|
this.barChartData = this.tmpSingleAvg;
|
|
}
|
|
|
|
setLineChartLabel(i18n: string) {
|
|
this.translate.get(i18n).subscribe((translated) => {
|
|
this.lineChartLabel = translated;
|
|
});
|
|
}
|
|
|
|
setBarChartLabel(i18n: string) {
|
|
this.translate.get(i18n).subscribe((translated) => {
|
|
this.barChartLabel = translated;
|
|
});
|
|
}
|
|
}
|