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

Switch to single fraction graph view

pull/17/head
HardiReady 2017-11-03 12:51:58 +01:00
parent 2852445edf
commit 9198d59fa5
6 changed files with 127 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/src/app/statistic/overview/stats-overview.component.ts
View File

@ -97,7 +97,6 @@ export class StatisticOverviewComponent {
break;
}
this.activeSlideIndex = index;
}
initChart(wars: any[]) {

4
static/src/app/statistic/stats.module.ts
View File

@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
import {WarService} from "../services/logs/war.service";
import {NgxChartsModule} from "@swimlane/ngx-charts";
import {AccordionModule, TabsModule} from "ngx-bootstrap";
import {AccordionModule, ButtonsModule, TabsModule} from "ngx-bootstrap";
import {CampaignService} from "../services/logs/campaign.service";
import {NgxDatatableModule} from "@swimlane/ngx-datatable";
import {PlayerService} from "../services/logs/player.service";
@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
@NgModule({
declarations: statsRoutingComponents,
imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
AccordionModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
providers: [WarService, CampaignService, PlayerService, LogsService]
})
export class StatsModule {

31
static/src/app/statistic/war-detail/war-detail.component.css
View File

@ -42,19 +42,10 @@
color: blue;
}
.chart-container {
width: 90%;
margin: 2%;
min-width: 900px;
height: 400px;
padding: 15px;
float: left;
}
/* ########### TABS ########### */
:host /deep/ .nav-tabs {
padding-left: 35%!important;
padding-left: 35% !important;
}
:host /deep/ .nav-link {
@ -67,7 +58,7 @@
color: #000;
}
:host /deep/ .nav-tabs>li.active>a{
:host /deep/ .nav-tabs > li.active > a {
background: #222222;
color: white;
}
@ -107,3 +98,21 @@
background-color: #f7f7f7;
}
/* ########### CHART-TAB ######## */
.chart-container {
width: 90%;
margin: 2%;
min-width: 900px;
height: 600px;
padding: 15px;
float: left;
}
.chart-select-group {
width: 50%;
margin: auto;
position: inherit;
display: block;
vertical-align: middle;
}

127
static/src/app/statistic/war-detail/war-detail.component.html
View File

@ -94,10 +94,22 @@
<ng-template tabHeading>
<img src="../../../assets/fraction-btn.png"> Fraktionen
</ng-template>
<div class="fade-in chart-container">
<div class="chart-select-group btn-group" (click)="selectChart()">
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFlag}}">{{labelFlag}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
<label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelTransport}}">{{labelTransport}}</label>
</div>
<div *ngIf="showLineChart" class="chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="pointData"
[results]="lineChartData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
@ -105,118 +117,17 @@
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelPoints"
[yAxisLabel]="lineChartLabel"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="budgetData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelBudget"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="killData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelKill"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="friendlyFireData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelFriendlyFire"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="transportData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelTransport"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="reviveData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelRevive"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="stabilizedData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelStabilize"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="roundDomains">
</ngx-charts-line-chart>
</div>
<div class="fade-in chart-container">
<div *ngIf="!showLineChart" class="chart-container">
<ngx-charts-area-chart
[scheme]="colorScheme"
[results]="flagData"
[results]="areaChartData"
[xAxis]="xAxis"
[yAxis]="yAxis"
[curve]="stepCurve"
@ -224,7 +135,7 @@
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabelFlag"
[yAxisLabel]="labelFlag"
[autoScale]="autoscale"
[timeline]="timeline"
[roundDomains]="false">

119
static/src/app/statistic/war-detail/war-detail.component.ts
View File

@ -1,3 +1,4 @@
///<reference path="../../utils/chart-utils.ts"/>
import {Component, ElementRef, ViewChild} from "@angular/core";
import {ActivatedRoute, Router} from "@angular/router";
import {WarService} from "../../services/logs/war.service";
@ -21,6 +22,8 @@ export class WarDetailComponent {
war: War = {players: []};
public chartSelectModel: string;
fractionRadioSelect: string;
playerChart: any[] = [];
@ -36,14 +39,8 @@ export class WarDetailComponent {
sortDescending: 'glyphicon glyphicon-triangle-bottom',
};
pointData: any[] = [];
budgetData: any[] = [];
killData: any[] = [];
friendlyFireData: any[] = [];
transportData: any[] = [];
reviveData: any[] = [];
stabilizedData: any[] = [];
flagData: any[] = [];
lineChartData: any[] = [];
areaChartData: any[] = [];
tmpPointData;
tmpBudgetData;
@ -58,15 +55,17 @@ export class WarDetailComponent {
domain: ['#0000FF', '#B22222']
};
yAxisLabelPoints = 'Punkte';
yAxisLabelBudget = 'Budget';
yAxisLabelKill = 'Kills';
yAxisLabelFriendlyFire = 'FriendlyFire';
yAxisLabelTransport = 'Lufttransport';
yAxisLabelRevive = 'Revive';
yAxisLabelStabilize = 'Stabilisiert';
yAxisLabelFlag = 'Flaggenbesitz';
labelPoints = 'Punkte';
labelBudget = 'Budget';
labelKill = 'Kills';
labelFriendlyFire = 'FriendlyFire';
labelTransport = 'Lufttransport';
labelRevive = 'Revive';
labelStabilize = 'Stabilisiert';
labelFlag = 'Flaggenbesitz';
lineChartLabel = this.labelPoints;
showLineChart = true;
stepCurve = d3.curveStepAfter;
gradient = false;
yAxis = true;
@ -94,38 +93,12 @@ export class WarDetailComponent {
.subscribe(war => {
this.war = war;
this.rows = war.players;
this.playerChart = [
{
"name": "CSAT",
"value": war.playersOpfor
},
{
"name": "NATO",
"value": war.playersBlufor
}
];
this.tmpPointData = [
{
"name": "NATO",
"series": []
},
{
"name": "CSAT",
"series": []
}
];
this.tmpBudgetData = JSON.parse(JSON.stringify(this.tmpPointData));
this.tmpKillData = JSON.parse(JSON.stringify(this.tmpPointData));
this.tmpFrienlyFireData = JSON.parse(JSON.stringify(this.tmpPointData));
this.tmpTransportData = JSON.parse(JSON.stringify(this.tmpPointData));
this.tmpReviveData = JSON.parse(JSON.stringify(this.tmpPointData));
this.tmpStabilizeData = JSON.parse(JSON.stringify(this.tmpPointData));
this.tmpFlagCaptureData = JSON.parse(JSON.stringify(this.tmpPointData));
Object.assign(this, [this.playerChart, this.pointData, this.budgetData, this.killData,
this.friendlyFireData, this.transportData, this.reviveData, this.stabilizedData, this.flagData]);
this.playerChart = ChartUtils.getSingleDataArray('CSAT', war.playersOpfor, 'NATO', war.playersBlufor);
this.fractionChartsInitialized = false;
Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
this.chartSelectModel = this.labelPoints;
this.staticTabs.tabs[0].active = true;
this.scrollOverviewTop();
});
@ -141,6 +114,39 @@ export class WarDetailComponent {
}
}
selectChart() {
if (this.chartSelectModel !== this.labelFlag) {
this.showLineChart = true;
this.lineChartLabel = this.chartSelectModel;
switch (this.chartSelectModel) {
case this.labelPoints:
this.lineChartData = this.tmpPointData;
break;
case this.labelBudget:
this.lineChartData = this.tmpBudgetData;
break;
case this.labelKill:
this.lineChartData = this.tmpKillData;
break;
case this.labelFriendlyFire:
this.lineChartData = this.tmpFrienlyFireData;
break;
case this.labelRevive:
this.lineChartData = this.tmpReviveData;
break;
case this.labelStabilize:
this.lineChartData = this.tmpStabilizeData;
break;
case this.labelTransport:
this.lineChartData = this.tmpTransportData;
break;
}
} else {
this.showLineChart = false;
this.areaChartData = this.tmpFlagCaptureData;
}
}
selectPlayerDetail(player) {
if (player && player.selected && player.selected.length > 0) {
this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
@ -160,6 +166,15 @@ export class WarDetailComponent {
return;
}
this.tmpPointData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpBudgetData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpKillData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpFrienlyFireData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpTransportData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpReviveData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpStabilizeData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
this.tmpFlagCaptureData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
const newFractionGraphEntry = (entry: any, val1: any, val2: any) => {
return ChartUtils.getSeriesEntry(new Date(entry.time), entry.fraction === 'BLUFOR' ? val1 : val2);
};
@ -285,14 +300,10 @@ export class WarDetailComponent {
}
}
});
this.pointData = this.tmpPointData;
this.budgetData = this.tmpBudgetData;
this.transportData = this.tmpTransportData;
this.reviveData = this.tmpReviveData;
this.stabilizedData = this.tmpStabilizeData;
this.killData = this.tmpKillData;
this.friendlyFireData = this.tmpFrienlyFireData;
this.flagData = this.tmpFlagCaptureData;
this.showLineChart = true;
this.lineChartLabel = this.labelPoints;
this.lineChartData = this.tmpPointData;
}
}

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

@ -13,4 +13,25 @@ export class ChartUtils {
"value": value
};
}
public static getMultiDataArray(...args: string[]) : any[] {
const obj = [];
for (let i = 0, arg; arg = args[i]; i++) {
obj.push({
"name": arg,
"series": []
})
}
return obj;
}
public static getSingleDataArray(name1, value1, name2, value2): any[] {
return [{
"name": name1,
"value": value1
}, {
"name": name2,
"value": value2
}];
}
}