Add summed up points graph

feature/user-self-management
Florian Hartwich 2017-09-02 10:43:23 +02:00
parent 6123a39e55
commit e6d1f7c5ba
3 changed files with 63 additions and 23 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "opt-cc", "name": "opt-cc",
"version": "1.3.1", "version": "1.3.2",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"scripts": { "scripts": {

View File

@ -1,13 +1,13 @@
<h2>{{title}}</h2> <h2>{{title}}</h2>
<h3>Punkte</h3> <h3>Gesamtpunktzahl</h3>
<div class="chart-container"> <div class="chart-container">
<ngx-charts-line-chart <ngx-charts-line-chart
[view]="[1050, 400]" [view]="[1050, 350]"
[scheme]="colorScheme" [scheme]="colorScheme"
[results]="playerData" [results]="pointSumData"
[gradient]="false" [gradient]="false"
[xAxis]="true" [xAxis]="true"
[yAxis]="true" [yAxis]="true"
@ -16,13 +16,14 @@
[showXAxisLabel]="true" [showXAxisLabel]="true"
[showYAxisLabel]="true" [showYAxisLabel]="true"
[xAxisLabel]="'Schlachtdatum'" [xAxisLabel]="'Schlachtdatum'"
[yAxisLabel]="'Punkte'" [yAxisLabel]="'Gesamtpunkte'"
[autoScale]="false"> [autoScale]="true"
(select)="onSelect($event)">
</ngx-charts-line-chart> </ngx-charts-line-chart>
</div> </div>
<h3 style="margin-top: 370px;">Spielerzahlen</h3> <h3 style="padding-top: 300px;">Punkte je Schlacht</h3>
<div class="chart-container"> <div class="chart-container">
@ -38,6 +39,28 @@
[showXAxisLabel]="true" [showXAxisLabel]="true"
[showYAxisLabel]="true" [showYAxisLabel]="true"
[xAxisLabel]="'Schlachtdatum'" [xAxisLabel]="'Schlachtdatum'"
[yAxisLabel]="'Punkte'"
[autoScale]="false">
</ngx-charts-line-chart>
</div>
<h3 style="padding-top: 300px;">Spielerzahlen</h3>
<div class="chart-container">
<ngx-charts-line-chart
[view]="[1050, 350]"
[scheme]="colorScheme"
[results]="playerData"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[legendTitle]="''"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisLabel]="'Schlachtdatum'"
[yAxisLabel]="'Anzahl Spieler'" [yAxisLabel]="'Anzahl Spieler'"
[autoScale]="true" [autoScale]="true"
(select)="onSelect($event)"> (select)="onSelect($event)">

View File

@ -1,7 +1,5 @@
import {Component} from "@angular/core"; import {Component} from "@angular/core";
import {WarService} from "../../services/war-service/war.service"; import {WarService} from "../../services/war-service/war.service";
import {Campaign, War} from "../../models/model-interfaces";
import {WarListComponent} from "../war-list/war-list.component";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
@ -16,6 +14,7 @@ export class StatisticOverviewComponent {
title = ""; title = "";
pointData: any[] = []; pointData: any[] = [];
pointSumData: any[] = [];
playerData: any[] = []; playerData: any[] = [];
colorScheme = { colorScheme = {
@ -69,6 +68,15 @@ export class StatisticOverviewComponent {
"name": "CSAT", "name": "CSAT",
"series": [] "series": []
}]; }];
let pointsSumObj = [
{
"name": "NATO",
"series": []
},
{
"name": "CSAT",
"series": []
}];
let playersObj = [ let playersObj = [
{ {
"name": "NATO", "name": "NATO",
@ -80,37 +88,46 @@ export class StatisticOverviewComponent {
} }
]; ];
for (let i = wars.length - 1; i >= 0; i--) { for (let i = wars.length - 1; i >= 0; i--) {
let j = wars.length - i - 1;
const isoDate = wars[i].date.slice(0, 10); const isoDate = wars[i].date.slice(0, 10);
const dayDate = parseInt(isoDate.slice(8, 10)) + 1; const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.' const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'
+ isoDate.slice(5, 7) + '.' + isoDate.slice(0, 4); + isoDate.slice(5, 7) + '.' + isoDate.slice(0, 4);
const bluforData = { pointsObj[0].series.push({
name: warDateString, name: warDateString,
value: wars[i].ptBlufor value: wars[i].ptBlufor
}; });
const opforData = { pointsObj[1].series.push({
name: warDateString, name: warDateString,
value: wars[i].ptOpfor value: wars[i].ptOpfor
}; });
const bluforPlayers = { pointsSumObj[0].series.push({
name: warDateString,
value: pointsSumObj[0].series[j - 1] ?
pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor :
wars[i].ptBlufor
});
pointsSumObj[1].series.push({
name: warDateString,
value: pointsSumObj[1].series[j - 1]
? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor :
wars[i].ptOpfor
});
playersObj[0].series.push({
name: warDateString, name: warDateString,
value: wars[i].playersBlufor value: wars[i].playersBlufor
}; });
const opforPlayers = { playersObj[1].series.push({
name: warDateString, name: warDateString,
value: wars[i].playersOpfor value: wars[i].playersOpfor
}; });
playersObj[0].series.push(bluforData);
playersObj[1].series.push(opforData);
pointsObj[0].series.push(bluforPlayers);
pointsObj[1].series.push(opforPlayers);
} }
this.pointData = pointsObj; this.pointData = pointsObj;
this.pointSumData = pointsSumObj;
this.playerData = playersObj; this.playerData = playersObj;
Object.assign(this, [this.playerData, this.pointData]) Object.assign(this, [this.pointData, this.pointSumData, this.playerData])
} }
} }