diff --git a/static/src/app/statistic/statistic.component.css b/static/src/app/statistic/statistic.component.css index 7a0fe4c..0d0ba4a 100644 --- a/static/src/app/statistic/statistic.component.css +++ b/static/src/app/statistic/statistic.component.css @@ -1,48 +1,5 @@ -h1 { +h3 { width: 920px; margin-bottom: 50px; margin-left: 25% } - -img { - margin-top: 10px; - padding-right: 30px; -} - -.div-table { - display: table; - border-radius: 10px; - margin-left: 1%; - width: auto; - border-spacing: 5px; /* cellspacing:poor IE support for this */ -} - -.div-table-row { - display: table-row; - width: auto; - clear: both; -} - -.div-table-col { - float: left; /* fix for buggy browsers */ - display: table-column; - padding: 5px 15px 5px 15px; -} - -.army-head { - font-weight: bolder; - text-align: center -} - -.member-link { - cursor: pointer; - text-decoration: underline; -} - -.text-opfor { - color: firebrick; -} - -.text-blufor { - color: blue; -} diff --git a/static/src/app/statistic/statistic.component.html b/static/src/app/statistic/statistic.component.html index d13d4fb..cd1de8f 100644 --- a/static/src/app/statistic/statistic.component.html +++ b/static/src/app/statistic/statistic.component.html @@ -13,10 +13,9 @@ [legendTitle]="''" [showXAxisLabel]="true" [showYAxisLabel]="true" - [xAxisLabel]="Schlachtdatum" - [yAxisLabel]="Punkte" + [xAxisLabel]="'Schlachtdatum'" + [yAxisLabel]="'Punkte'" [autoScale]="false" - [timeline]="true" (select)="onSelect($event)"> diff --git a/static/src/app/statistic/statistic.component.ts b/static/src/app/statistic/statistic.component.ts index dbc9de3..ef9bcdb 100644 --- a/static/src/app/statistic/statistic.component.ts +++ b/static/src/app/statistic/statistic.component.ts @@ -1,4 +1,5 @@ import {Component} from "@angular/core"; +import {AppComponent} from "../app.component"; import {WarService} from "../services/war-service/war.service"; @@ -12,40 +13,70 @@ export class StatisticComponent { chartData: any[] = []; colorScheme = { - domain: ['#0000FF', '#B22222', '#C7B42C', '#AAAAAA'] + domain: ['#0000FF', '#B22222', '#595DC7', '#B25D62'] }; - constructor(private warService: WarService) { - Object.assign(this, this.chartData) + constructor(private appComponent: AppComponent, + private warService: WarService) { } ngOnInit() { - this.warService.getAllWars() - .subscribe((wars) => { - let updateObj = [{ - "name": "NATO", - "series": [] - }, - { - "name": "CSAT", - "series": [] - }]; - for (let i = 0; i < wars.length; i++) { - let warDateString = new Date(wars[i].date); - let bluforData = { - name: warDateString, - value: wars[i].ptBlufor - }; - updateObj[0].series.push(bluforData); - let opforData = { - name: warDateString, - value: wars[i].ptOpfor - }; - updateObj[1].series.push(opforData); - } - this.chartData = updateObj; + let wars = this.appComponent.wars; + if (wars.length === 0) { + this.warService.getAllWars().subscribe(items => { + this.initChart(items); }) - }; + } + this.initChart(wars); + } + + initChart(wars: any[]) { + let updateObj = [ + { + "name": "NATO", + "series": [] + }, + { + "name": "CSAT", + "series": [] + }, + { + "name": "Anz. Spieler NATO", + "series": [] + }, + { + "name": "Anz. Spieler CSAT", + "series": [] + }]; + for (let i = wars.length - 1; i >= 0; i--) { + let isoDate = wars[i].date.slice(0, 10); + let dayDate = parseInt(isoDate.slice(8, 10)) + 1; + let warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.' + + isoDate.slice(5, 7) + '.' + isoDate.slice(0, 4); + let bluforData = { + name: warDateString, + value: wars[i].ptBlufor + }; + updateObj[0].series.push(bluforData); + let opforData = { + name: warDateString, + value: wars[i].ptOpfor + }; + updateObj[1].series.push(opforData); + let bluforPlayers = { + name: warDateString, + value: 13 + }; + updateObj[2].series.push(bluforPlayers); + let opforPlayers = { + name: warDateString, + value: 13 + }; + updateObj[3].series.push(opforPlayers); + } + this.chartData = updateObj; + Object.assign(this, this.chartData) + } onSelect(event) { console.log(event);