From 9198d59fa51642bc8ae1e9ef698c3671fb0f9076 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Fri, 3 Nov 2017 12:51:58 +0100 Subject: [PATCH] Switch to single fraction graph view --- .../overview/stats-overview.component.ts | 1 - static/src/app/statistic/stats.module.ts | 4 +- .../war-detail/war-detail.component.css | 31 +++-- .../war-detail/war-detail.component.html | 127 +++--------------- .../war-detail/war-detail.component.ts | 119 ++++++++-------- static/src/app/utils/chart-utils.ts | 21 +++ 6 files changed, 127 insertions(+), 176 deletions(-) diff --git a/static/src/app/statistic/overview/stats-overview.component.ts b/static/src/app/statistic/overview/stats-overview.component.ts index a5395a1..e39ccdc 100644 --- a/static/src/app/statistic/overview/stats-overview.component.ts +++ b/static/src/app/statistic/overview/stats-overview.component.ts @@ -97,7 +97,6 @@ export class StatisticOverviewComponent { break; } this.activeSlideIndex = index; - } initChart(wars: any[]) { diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 8311f4e..2cd250a 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -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 { diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css index 00eaf09..e1739d3 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.css +++ b/static/src/app/statistic/war-detail/war-detail.component.css @@ -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; +} diff --git a/static/src/app/statistic/war-detail/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html index 60f28d9..0d253cd 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -94,10 +94,22 @@ Fraktionen -
+ +
+ + + + + + + + +
+ +
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
+ +
diff --git a/static/src/app/statistic/war-detail/war-detail.component.ts b/static/src/app/statistic/war-detail/war-detail.component.ts index 7385fd9..26eac41 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -1,3 +1,4 @@ +/// 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; } } diff --git a/static/src/app/utils/chart-utils.ts b/static/src/app/utils/chart-utils.ts index 261c06c..33ccc13 100644 --- a/static/src/app/utils/chart-utils.ts +++ b/static/src/app/utils/chart-utils.ts @@ -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 + }]; + } }