From 54d2c257a7a1287bda65850913edde74977a6a6d Mon Sep 17 00:00:00 2001 From: HardiReady Date: Thu, 2 Nov 2017 18:54:26 +0100 Subject: [PATCH 1/8] wrap duplicated code and try to improve readability --- api/tools/log-parse-tool.js | 4 +- package.json | 2 +- .../war-detail/war-detail.component.ts | 336 ++++++++---------- 3 files changed, 149 insertions(+), 193 deletions(-) diff --git a/api/tools/log-parse-tool.js b/api/tools/log-parse-tool.js index ef07199..f780177 100644 --- a/api/tools/log-parse-tool.js +++ b/api/tools/log-parse-tool.js @@ -67,9 +67,10 @@ const parseWarLog = (lineArray, war) => { stats.war['endBudgetOpfor'] = transformMoneyString(budg[14]); stats.war.endDate = new Date(budg[0].substr(0, budg[0].length - 1).split('/').join('-') + 'T0' + budg[5]); } else if (line.includes('Startbudget')) { - stats.war.date = new Date(budg[0].substr(0, budg[0].length - 1).split('/').join('-') + 'T22:00:00'); stats.war['budgetBlufor'] = transformMoneyString(budg[11]); stats.war['budgetOpfor'] = transformMoneyString(budg[14]); + // this date needs to be assigned in first place !important + stats.war.date = new Date(budg[0].substr(0, budg[0].length - 1).split('/').join('-') + 'T22:00:00'); } else { stats.budget.push(getBudgetEntry(budg, war._id, war.date)); } @@ -103,6 +104,7 @@ const parseWarLog = (lineArray, war) => { if (line.includes('Endpunktestand')) { stats.war['ptBlufor'] = parseInt(pt[11]); stats.war['ptOpfor'] = parseInt(pt[14].slice(0, -1)); + // EXIT LOOP return true; } else { stats.points.push(getPointsEntry(pt, line, war._id, war.date)) diff --git a/package.json b/package.json index f4446c7..9d1d374 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "opt-cc", - "version": "1.6.1", + "version": "1.6.2", "license": "MIT", "author": "Florian Hartwich ", "private": true, 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 749496d..936f3a4 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -155,198 +155,152 @@ export class WarDetailComponent { } loadFractionData() { - if (!this.fractionChartsInitialized) { - const startDateObj = new Date(this.war.date); - startDateObj.setHours(0); - startDateObj.setMinutes(1); - - this.logsService.getFullLog(this.war._id).subscribe((data) => { - // POINTS - data.points.forEach(pointEntry => { - const dateObj = new Date(this.war.date); - const time = pointEntry.time.split(':'); - dateObj.setHours(time[0]); - dateObj.setMinutes(time[1]); - this.tmpPointData[0].series.push({ - "name": new Date(pointEntry.time), - "value": pointEntry.ptBlufor - }); - this.tmpPointData[1].series.push({ - "name": new Date(pointEntry.time), - "value": pointEntry.ptOpfor - }); - }); - - // BUDGET - this.tmpBudgetData[0].series.push({ - "name": startDateObj, - "value": this.war.budgetBlufor - }); - this.tmpBudgetData[1].series.push({ - "name": startDateObj, - "value": this.war.budgetOpfor - }); - // This adds an entry for both fractions on every event - for (let i = 0; i < data.budget.length; i++) { - const budgetEntry = data.budget[i]; - const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1; - const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1; - - this.tmpBudgetData[fractionChange].series.push({ - "name": new Date(budgetEntry.time), - "value": budgetEntry.newBudget - }); - - this.tmpBudgetData[fractionOld].series.push({ - "name": new Date(budgetEntry.time), - "value": this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length-1].value - }); - } - - // KILLS - let killCountBlufor = 0; - let killCountOpfor = 0; - let ffKillCountBlufor = 0; - let ffKillCountOpfor = 0; - this.tmpKillData[0].series.push({ - "name": startDateObj, - "value": killCountBlufor - }); - this.tmpKillData[1].series.push({ - "name": startDateObj, - "value": killCountOpfor - }); - this.tmpFrienlyFireData[0].series.push({ - "name": startDateObj, - "value": ffKillCountBlufor - }); - this.tmpFrienlyFireData[1].series.push({ - "name": startDateObj, - "value": ffKillCountOpfor - }); - - data.kill.forEach(killEntry => { - if (killEntry.fraction === 'BLUFOR') { - if (killEntry.friendlyFire === false) { - killCountBlufor++; - } else { - ffKillCountBlufor++; - } - } else { - if (killEntry.friendlyFire === false) { - killCountOpfor++; - } else { - ffKillCountOpfor++; - } - } - this.tmpKillData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({ - "name": new Date(killEntry.time), - "value": killEntry.fraction === 'BLUFOR' ? killCountBlufor : killCountOpfor - }); - this.tmpFrienlyFireData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({ - "name": new Date(killEntry.time), - "value": killEntry.fraction === 'BLUFOR' ? ffKillCountBlufor : ffKillCountOpfor - }); - }); - - // TRANSPORT - let transportCountBlufor = 0; - let transportCountOpfor = 0; - this.tmpTransportData[0].series.push({ - "name": startDateObj, - "value": transportCountBlufor - }); - this.tmpTransportData[1].series.push({ - "name": startDateObj, - "value": transportCountOpfor - }); - - data.transport.forEach(transportEntry => { - if (transportEntry.fraction === 'BLUFOR') { - transportCountBlufor++; - } else { - transportCountOpfor++; - } - this.tmpTransportData[transportEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({ - "name": new Date(transportEntry.time), - "value": transportEntry.fraction === 'BLUFOR' ? transportCountBlufor : transportCountOpfor - }); - }); - - // REVIVE & STABILIZE - let reviveCountBlufor = 0; - let reviveCountOpfor = 0; - let stabilizeCountBlufor = 0; - let stabilizeCountOpfor = 0; - this.tmpReviveData[0].series.push({ - "name": startDateObj, - "value": reviveCountBlufor - }); - this.tmpReviveData[1].series.push({ - "name": startDateObj, - "value": reviveCountOpfor - }); - this.tmpStabilizeData[0].series.push({ - "name": startDateObj, - "value": stabilizeCountBlufor - }); - this.tmpStabilizeData[1].series.push({ - "name": startDateObj, - "value": stabilizeCountOpfor - }); - data.revive.forEach(reviveEntry => { - if (reviveEntry.fraction === 'BLUFOR') { - if (reviveEntry.stabilized === false) { - reviveCountBlufor++; - } else { - stabilizeCountBlufor++; - } - } else { - if (reviveEntry.stabilized === false) { - reviveCountOpfor++; - } else { - stabilizeCountOpfor++; - } - } - this.tmpReviveData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({ - "name": new Date(reviveEntry.time), - "value": reviveEntry.fraction === 'BLUFOR' ? reviveCountBlufor : reviveCountOpfor - }); - this.tmpStabilizeData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push({ - "name": new Date(reviveEntry.time), - "value": reviveEntry.fraction === 'BLUFOR' ? stabilizeCountBlufor : stabilizeCountOpfor - }); - }); - - // FLAG - let flagStatusBlufor = true; - let flagStatusOpfor = true; - this.tmpFlagCaptureData[0].series.push({ - "name": startDateObj, - "value": flagStatusBlufor - }); - this.tmpFlagCaptureData[1].series.push({ - "name": startDateObj, - "value": flagStatusOpfor - }); - - data.flag.forEach(flagEntry => { - if (flagEntry.flagFraction === 'BLUFOR') { - flagStatusBlufor = !flagEntry.capture - } else { - flagStatusOpfor = !flagEntry.capture; - } - this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push({ - "name": new Date(flagEntry.time), - "value": flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor - }); - }); - - this.addFinalTimeDataEntriesAndPopulate(new Date(this.war.endDate)); - - this.fractionChartsInitialized = true; - }); + if (this.fractionChartsInitialized) { + return; } + + const newGraphEntry = (entry: any, val1: any, val2: any) => { + return {"name": new Date(entry.time), "value": entry.fraction === 'BLUFOR' ? val1 : val2}; + }; + + const startDateObj = new Date(this.war.date); + startDateObj.setHours(0); + startDateObj.setMinutes(1); + + [this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => { + [0, 1].forEach(index => { + tmp[index].series.push({ + "name": startDateObj, + "value": 0 + }); + }) + }); + + let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0, reviveCountBlufor = 0, + reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0, transportCountBlufor = 0, + transportCountOpfor = 0; + + this.logsService.getFullLog(this.war._id).subscribe((data) => { + // POINTS + data.points.forEach(pointEntry => { + this.tmpPointData[0].series.push({ + "name": new Date(pointEntry.time), + "value": pointEntry.ptBlufor + }); + this.tmpPointData[1].series.push({ + "name": new Date(pointEntry.time), + "value": pointEntry.ptOpfor + }); + }); + + // BUDGET + this.tmpBudgetData[0].series.push({ + "name": startDateObj, + "value": this.war.budgetBlufor + }); + this.tmpBudgetData[1].series.push({ + "name": startDateObj, + "value": this.war.budgetOpfor + }); + // This adds an entry for both fractions on every event + for (let i = 0; i < data.budget.length; i++) { + const budgetEntry = data.budget[i]; + const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1; + const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1; + + this.tmpBudgetData[fractionChange].series.push({ + "name": new Date(budgetEntry.time), + "value": budgetEntry.newBudget + }); + + this.tmpBudgetData[fractionOld].series.push({ + "name": new Date(budgetEntry.time), + "value": this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value + }); + } + + // KILLS & FRIENDLY FIRE + data.kill.forEach(killEntry => { + if (killEntry.fraction === 'BLUFOR') { + if (killEntry.friendlyFire === false) { + killCountBlufor++; + } else { + ffKillCountBlufor++; + } + } else { + if (killEntry.friendlyFire === false) { + killCountOpfor++; + } else { + ffKillCountOpfor++; + } + } + this.tmpKillData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( + newGraphEntry(killEntry, killCountBlufor, killCountOpfor) + ); + this.tmpFrienlyFireData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( + newGraphEntry(killEntry, ffKillCountBlufor, ffKillCountOpfor) + ) + }); + + // REVIVE & STABILIZE + data.revive.forEach(reviveEntry => { + if (reviveEntry.fraction === 'BLUFOR') { + if (reviveEntry.stabilized === false) { + reviveCountBlufor++; + } else { + stabilizeCountBlufor++; + } + } else { + if (reviveEntry.stabilized === false) { + reviveCountOpfor++; + } else { + stabilizeCountOpfor++; + } + } + this.tmpReviveData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( + newGraphEntry(reviveEntry, reviveCountBlufor, reviveCountOpfor)); + this.tmpStabilizeData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( + newGraphEntry(reviveEntry, stabilizeCountBlufor, stabilizeCountOpfor)); + }); + + // TRANSPORT + data.transport.forEach(transportEntry => { + if (transportEntry.fraction === 'BLUFOR') { + transportCountBlufor++; + } else { + transportCountOpfor++; + } + this.tmpTransportData[transportEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( + newGraphEntry(transportEntry, transportCountBlufor, transportCountOpfor)); + }); + + // FLAG + let flagStatusBlufor = true; + let flagStatusOpfor = true; + this.tmpFlagCaptureData[0].series.push({ + "name": startDateObj, + "value": flagStatusBlufor + }); + this.tmpFlagCaptureData[1].series.push({ + "name": startDateObj, + "value": flagStatusOpfor + }); + + data.flag.forEach(flagEntry => { + if (flagEntry.flagFraction === 'BLUFOR') { + flagStatusBlufor = !flagEntry.capture + } else { + flagStatusOpfor = !flagEntry.capture; + } + this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push( + newGraphEntry(flagEntry, flagStatusBlufor, flagStatusOpfor) + ); + }); + + this.addFinalTimeDataEntriesAndPopulate(new Date(this.war.endDate)); + + this.fractionChartsInitialized = true; + }); } addFinalTimeDataEntriesAndPopulate(endDate) { From 2852445edf678f6a5f4be28d180aa69dc9c9a2ba Mon Sep 17 00:00:00 2001 From: HardiReady Date: Thu, 2 Nov 2017 19:40:16 +0100 Subject: [PATCH 2/8] Add both fraction values for each entry --- .../war-detail/war-detail.component.ts | 107 +++++++----------- static/src/app/utils/chart-utils.ts | 7 ++ 2 files changed, 45 insertions(+), 69 deletions(-) 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 936f3a4..7385fd9 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -5,6 +5,7 @@ import {War} from "../../models/model-interfaces"; import {LogsService} from "../../services/logs/logs.service"; import {TabsetComponent} from "ngx-bootstrap"; import * as d3 from "d3"; +import {ChartUtils} from "../../utils/chart-utils"; @Component({ @@ -159,8 +160,8 @@ export class WarDetailComponent { return; } - const newGraphEntry = (entry: any, val1: any, val2: any) => { - return {"name": new Date(entry.time), "value": entry.fraction === 'BLUFOR' ? val1 : val2}; + const newFractionGraphEntry = (entry: any, val1: any, val2: any) => { + return ChartUtils.getSeriesEntry(new Date(entry.time), entry.fraction === 'BLUFOR' ? val1 : val2); }; const startDateObj = new Date(this.war.date); @@ -169,10 +170,7 @@ export class WarDetailComponent { [this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => { [0, 1].forEach(index => { - tmp[index].series.push({ - "name": startDateObj, - "value": 0 - }); + tmp[index].series.push(ChartUtils.getSeriesEntry(startDateObj, 0)); }) }); @@ -183,84 +181,65 @@ export class WarDetailComponent { this.logsService.getFullLog(this.war._id).subscribe((data) => { // POINTS data.points.forEach(pointEntry => { - this.tmpPointData[0].series.push({ - "name": new Date(pointEntry.time), - "value": pointEntry.ptBlufor - }); - this.tmpPointData[1].series.push({ - "name": new Date(pointEntry.time), - "value": pointEntry.ptOpfor - }); + this.tmpPointData[0].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptBlufor)); + this.tmpPointData[1].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptOpfor)); }); // BUDGET - this.tmpBudgetData[0].series.push({ - "name": startDateObj, - "value": this.war.budgetBlufor - }); - this.tmpBudgetData[1].series.push({ - "name": startDateObj, - "value": this.war.budgetOpfor - }); + this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(startDateObj, this.war.budgetBlufor)); + this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(startDateObj, this.war.budgetOpfor)); // This adds an entry for both fractions on every event for (let i = 0; i < data.budget.length; i++) { const budgetEntry = data.budget[i]; const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1; const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1; - this.tmpBudgetData[fractionChange].series.push({ - "name": new Date(budgetEntry.time), - "value": budgetEntry.newBudget - }); - - this.tmpBudgetData[fractionOld].series.push({ - "name": new Date(budgetEntry.time), - "value": this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value - }); + 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)); } // KILLS & FRIENDLY FIRE data.kill.forEach(killEntry => { - if (killEntry.fraction === 'BLUFOR') { - if (killEntry.friendlyFire === false) { + if (killEntry.friendlyFire === false) { + if (killEntry.fraction === 'BLUFOR') { killCountBlufor++; } else { - ffKillCountBlufor++; - } - } else { - if (killEntry.friendlyFire === false) { killCountOpfor++; + } + this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), killCountBlufor)); + this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), killCountOpfor)); + } else { + if (killEntry.fraction === 'BLUFOR') { + ffKillCountBlufor++; } else { ffKillCountOpfor++; } + this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), ffKillCountBlufor)); + this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(new Date(killEntry.time), ffKillCountOpfor)); } - this.tmpKillData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( - newGraphEntry(killEntry, killCountBlufor, killCountOpfor) - ); - this.tmpFrienlyFireData[killEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( - newGraphEntry(killEntry, ffKillCountBlufor, ffKillCountOpfor) - ) }); + // REVIVE & STABILIZE data.revive.forEach(reviveEntry => { - if (reviveEntry.fraction === 'BLUFOR') { - if (reviveEntry.stabilized === false) { + if (reviveEntry.stabilized === false) { + if (reviveEntry.fraction === 'BLUFOR') { reviveCountBlufor++; } else { - stabilizeCountBlufor++; - } - } else { - if (reviveEntry.stabilized === false) { reviveCountOpfor++; + } + this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), reviveCountBlufor)); + this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), reviveCountOpfor)); + } else { + if (reviveEntry.fraction === 'BLUFOR') { + stabilizeCountBlufor++; } else { stabilizeCountOpfor++; } + this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), stabilizeCountBlufor)); + this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(new Date(reviveEntry.time), stabilizeCountOpfor)); } - this.tmpReviveData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( - newGraphEntry(reviveEntry, reviveCountBlufor, reviveCountOpfor)); - this.tmpStabilizeData[reviveEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( - newGraphEntry(reviveEntry, stabilizeCountBlufor, stabilizeCountOpfor)); }); // TRANSPORT @@ -270,21 +249,15 @@ export class WarDetailComponent { } else { transportCountOpfor++; } - this.tmpTransportData[transportEntry.fraction === 'BLUFOR' ? 0 : 1].series.push( - newGraphEntry(transportEntry, transportCountBlufor, transportCountOpfor)); + this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(new Date(transportEntry.time), transportCountBlufor)); + this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(new Date(transportEntry.time), transportCountOpfor)); }); // FLAG let flagStatusBlufor = true; let flagStatusOpfor = true; - this.tmpFlagCaptureData[0].series.push({ - "name": startDateObj, - "value": flagStatusBlufor - }); - this.tmpFlagCaptureData[1].series.push({ - "name": startDateObj, - "value": flagStatusOpfor - }); + this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(startDateObj, flagStatusBlufor)); + this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(startDateObj, flagStatusOpfor)); data.flag.forEach(flagEntry => { if (flagEntry.flagFraction === 'BLUFOR') { @@ -293,7 +266,7 @@ export class WarDetailComponent { flagStatusOpfor = !flagEntry.capture; } this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push( - newGraphEntry(flagEntry, flagStatusBlufor, flagStatusOpfor) + newFractionGraphEntry(flagEntry, flagStatusBlufor, flagStatusOpfor) ); }); @@ -308,11 +281,7 @@ export class WarDetailComponent { this.tmpKillData, this.tmpFrienlyFireData, this.tmpFlagCaptureData].forEach(tmp => { for (let j in [0, 1]) { if (tmp[j].series[tmp[j].series.length - 1].name < endDate) { - tmp[j].series.push({ - 'name': endDate, - 'value': tmp[j].series[tmp[j].series.length - 1].value - } - ) + tmp[j].series.push(ChartUtils.getSeriesEntry(endDate, tmp[j].series[tmp[j].series.length - 1].value)); } } }); diff --git a/static/src/app/utils/chart-utils.ts b/static/src/app/utils/chart-utils.ts index 565bcec..261c06c 100644 --- a/static/src/app/utils/chart-utils.ts +++ b/static/src/app/utils/chart-utils.ts @@ -6,4 +6,11 @@ export class ChartUtils { return (dayDate < 10 ? "0" + dayDate : dayDate) + '.' + isoDate.slice(5, 7) + '.' + isoDate.slice(2, 4); } + + public static getSeriesEntry(name, value) { + return { + "name": name, + "value": value + }; + } } From 9198d59fa51642bc8ae1e9ef698c3671fb0f9076 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Fri, 3 Nov 2017 12:51:58 +0100 Subject: [PATCH 3/8] 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 + }]; + } } From 8f34d441397bb393e8873437c91e74968ce3ee10 Mon Sep 17 00:00:00 2001 From: HardiReady Date: Fri, 3 Nov 2017 14:43:04 +0100 Subject: [PATCH 4/8] Add interval dropdown --- static/src/app/statistic/stats.module.ts | 4 +-- .../war-detail/war-detail.component.css | 6 +++- .../war-detail/war-detail.component.html | 30 ++++++++++++++++--- .../war-detail/war-detail.component.ts | 7 +++++ 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 2cd250a..5be86ae 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, ButtonsModule, TabsModule} from "ngx-bootstrap"; +import {AccordionModule, BsDropdownModule, 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(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule], + AccordionModule.forRoot(), BsDropdownModule.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 e1739d3..80c6d1b 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.css +++ b/static/src/app/statistic/war-detail/war-detail.component.css @@ -101,7 +101,7 @@ /* ########### CHART-TAB ######## */ .chart-container { - width: 90%; + width: 95%; margin: 2%; min-width: 900px; height: 600px; @@ -116,3 +116,7 @@ display: block; vertical-align: middle; } + +.dropdown-menu > li > a { + cursor: pointer; +} 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 0d253cd..deea9b7 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -25,8 +25,10 @@
- Logfile - anzeigen + + Logfile anzeigen