diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html index f6e829a..c171625 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.html @@ -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"> {{'stats.fraction.tooltip.flag.minute' | translate}} {{model.series}}
{{model.name}} {{'stats.fraction.tooltip.flag.flag' | translate}}
diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss index 8b96911..268fc92 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.scss @@ -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 { diff --git a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts index 29e1baf..7173bf5 100644 --- a/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts +++ b/static/src/app/statistic/war/fraction-stats/fraction-stats.component.ts @@ -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 ''; + } } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.css b/static/src/app/statistic/war/scoreboard/scoreboard.component.css index 425e024..4e85888 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.css +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.css @@ -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; } diff --git a/static/src/app/statistic/war/scoreboard/scoreboard.component.html b/static/src/app/statistic/war/scoreboard/scoreboard.component.html index 09fe393..b8bb8db 100644 --- a/static/src/app/statistic/war/scoreboard/scoreboard.component.html +++ b/static/src/app/statistic/war/scoreboard/scoreboard.component.html @@ -1,22 +1,25 @@
+ [dataSource]="sortedRows" + matSortActive="{{tableHead[2].prop}}" matSortDirection="asc" matSortDisableClear + (matSortChange)="sortScoreboardData($event)" + class="mat-elevation-z8"> - {{tableHead[0].head | translate}} + {{tableHead[0].head | translate}} + [style.color]="element['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR"> {{element.name}} - {{tableHead[1].head | translate}} - {{element.fraction === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} + {{tableHead[1].head | translate}} + {{element.fraction === + 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}} diff --git a/static/src/app/statistic/war/server-stats/server-stats.component.html b/static/src/app/statistic/war/server-stats/server-stats.component.html index 6fe3135..df22543 100644 --- a/static/src/app/statistic/war/server-stats/server-stats.component.html +++ b/static/src/app/statistic/war/server-stats/server-stats.component.html @@ -21,6 +21,7 @@ [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [yAxisLabel]="barChartLabel" + [animations]="barAnimations" [barPadding]="barPadding" [roundDomains]="roundDomains"> diff --git a/static/src/app/statistic/war/server-stats/server-stats.component.css b/static/src/app/statistic/war/server-stats/server-stats.component.scss similarity index 75% rename from static/src/app/statistic/war/server-stats/server-stats.component.css rename to static/src/app/statistic/war/server-stats/server-stats.component.scss index 8b96911..11092fb 100644 --- a/static/src/app/statistic/war/server-stats/server-stats.component.css +++ b/static/src/app/statistic/war/server-stats/server-stats.component.scss @@ -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 { diff --git a/static/src/app/statistic/war/server-stats/server-stats.component.ts b/static/src/app/statistic/war/server-stats/server-stats.component.ts index c9a424c..69aebce 100644 --- a/static/src/app/statistic/war/server-stats/server-stats.component.ts +++ b/static/src/app/statistic/war/server-stats/server-stats.component.ts @@ -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)); diff --git a/static/src/app/statistic/war/war-header/war-header.component.css b/static/src/app/statistic/war/war-header/war-header.component.css index 62a4d06..9d1fb07 100644 --- a/static/src/app/statistic/war/war-header/war-header.component.css +++ b/static/src/app/statistic/war/war-header/war-header.component.css @@ -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; } diff --git a/static/src/app/statistic/war/war-list/war-item.component.css b/static/src/app/statistic/war/war-list/war-item.component.css index b863a03..5d936d2 100644 --- a/static/src/app/statistic/war/war-list/war-item.component.css +++ b/static/src/app/statistic/war/war-list/war-item.component.css @@ -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; } diff --git a/static/src/app/statistic/war/war-list/war-list.component.css b/static/src/app/statistic/war/war-list/war-list.component.css index ac840c5..a840a37 100644 --- a/static/src/app/statistic/war/war-list/war-list.component.css +++ b/static/src/app/statistic/war/war-list/war-list.component.css @@ -9,7 +9,7 @@ cursor: pointer; } -.list-header:hover, .selected{ +.list-header:hover, .selected { background: linear-gradient(80deg, white 0%, #e7e7e7 120%); } diff --git a/static/src/app/utils/chart-utils.ts b/static/src/app/utils/chart-utils.ts index 10cf40b..099b4bd 100644 --- a/static/src/app/utils/chart-utils.ts +++ b/static/src/app/utils/chart-utils.ts @@ -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; + } }