Compare commits
2 Commits
6123a39e55
...
66244467a5
Author | SHA1 | Date |
---|---|---|
Florian Hartwich | 66244467a5 | |
Florian Hartwich | e6d1f7c5ba |
|
@ -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": {
|
||||||
|
|
|
@ -35,11 +35,11 @@ import {WarService} from "./services/war-service/war.service";
|
||||||
import {DataTableModule} from "angular2-datatable";
|
import {DataTableModule} from "angular2-datatable";
|
||||||
import {NgxChartsModule} from "@swimlane/ngx-charts";
|
import {NgxChartsModule} from "@swimlane/ngx-charts";
|
||||||
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
|
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
|
||||||
import {AccordionModule} from "ngx-bootstrap";
|
import {AccordionModule, CarouselModule} from "ngx-bootstrap";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
|
imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
|
||||||
BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot()],
|
BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot(), CarouselModule.forRoot()],
|
||||||
providers: [
|
providers: [
|
||||||
HttpClient,
|
HttpClient,
|
||||||
LoginService,
|
LoginService,
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
.chart-container {
|
.slide-chart-container {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host /deep/ .carousel-control {
|
||||||
|
width: 5%;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,23 @@
|
||||||
<h2>{{title}}</h2>
|
<h2 style="margin-bottom: 20px">{{title}}</h2>
|
||||||
|
|
||||||
<h3>Punkte</h3>
|
<div class="btn btn-default" [style.background]="activeSlideIndex === 2 ? '#d9edf7':'white'"
|
||||||
|
(click)="goToSlide(2)" *ngIf="id != 'all'">Gesamtpunktzahl
|
||||||
<div class="chart-container">
|
</div>
|
||||||
|
<div class="btn btn-default" [style.background]="activeSlideIndex === 0 ? '#d9edf7':'white'"
|
||||||
|
(click)="goToSlide(0)">Punkte je Schlacht
|
||||||
|
</div>
|
||||||
|
<div class="btn btn-default" [style.background]="activeSlideIndex === 1 ? '#d9edf7':'white'"
|
||||||
|
(click)="goToSlide(1)">Spielerzahlen
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<carousel [(activeSlide)]="activeSlideIndex">
|
||||||
|
<slide *ngIf="id != 'all'">
|
||||||
|
<div class="slide-chart-container">
|
||||||
|
<h3>Gesamtpunktzahl</h3>
|
||||||
<ngx-charts-line-chart
|
<ngx-charts-line-chart
|
||||||
[view]="[1050, 400]"
|
[view]="[1200, 500]"
|
||||||
[scheme]="colorScheme"
|
[scheme]="colorScheme"
|
||||||
[results]="playerData"
|
[results]="pointSumData"
|
||||||
[gradient]="false"
|
[gradient]="false"
|
||||||
[xAxis]="true"
|
[xAxis]="true"
|
||||||
[yAxis]="true"
|
[yAxis]="true"
|
||||||
|
@ -15,19 +25,16 @@
|
||||||
[legendTitle]="''"
|
[legendTitle]="''"
|
||||||
[showXAxisLabel]="true"
|
[showXAxisLabel]="true"
|
||||||
[showYAxisLabel]="true"
|
[showYAxisLabel]="true"
|
||||||
[xAxisLabel]="'Schlachtdatum'"
|
[yAxisLabel]="'Gesamtpunkte'"
|
||||||
[yAxisLabel]="'Punkte'"
|
[autoScale]="true">
|
||||||
[autoScale]="false">
|
|
||||||
</ngx-charts-line-chart>
|
</ngx-charts-line-chart>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</slide>
|
||||||
<h3 style="margin-top: 370px;">Spielerzahlen</h3>
|
<slide>
|
||||||
|
<div class="slide-chart-container">
|
||||||
<div class="chart-container">
|
<h3>Punkte je Schlacht</h3>
|
||||||
|
|
||||||
<ngx-charts-line-chart
|
<ngx-charts-line-chart
|
||||||
[view]="[1050, 350]"
|
[view]="[1200, 500]"
|
||||||
[scheme]="colorScheme"
|
[scheme]="colorScheme"
|
||||||
[results]="pointData"
|
[results]="pointData"
|
||||||
[gradient]="false"
|
[gradient]="false"
|
||||||
|
@ -37,10 +44,28 @@
|
||||||
[legendTitle]="''"
|
[legendTitle]="''"
|
||||||
[showXAxisLabel]="true"
|
[showXAxisLabel]="true"
|
||||||
[showYAxisLabel]="true"
|
[showYAxisLabel]="true"
|
||||||
[xAxisLabel]="'Schlachtdatum'"
|
[yAxisLabel]="'Punkte'"
|
||||||
[yAxisLabel]="'Anzahl Spieler'"
|
[autoScale]="false">
|
||||||
[autoScale]="true"
|
|
||||||
(select)="onSelect($event)">
|
|
||||||
</ngx-charts-line-chart>
|
</ngx-charts-line-chart>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
</slide>
|
||||||
|
<slide>
|
||||||
|
<div class="slide-chart-container">
|
||||||
|
<h3>Spielerzahlen</h3>
|
||||||
|
<ngx-charts-line-chart
|
||||||
|
[view]="[1200, 500]"
|
||||||
|
[scheme]="colorScheme"
|
||||||
|
[results]="playerData"
|
||||||
|
[gradient]="false"
|
||||||
|
[xAxis]="true"
|
||||||
|
[yAxis]="true"
|
||||||
|
[legend]="true"
|
||||||
|
[legendTitle]="''"
|
||||||
|
[showXAxisLabel]="true"
|
||||||
|
[showYAxisLabel]="true"
|
||||||
|
[yAxisLabel]="'Anzahl Spieler'"
|
||||||
|
[autoScale]="true">
|
||||||
|
</ngx-charts-line-chart>
|
||||||
|
</div>
|
||||||
|
</slide>
|
||||||
|
</carousel>
|
||||||
|
|
|
@ -1,21 +1,24 @@
|
||||||
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";
|
||||||
|
import {CarouselConfig} from "ngx-bootstrap";
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'stats-overview',
|
selector: 'stats-overview',
|
||||||
templateUrl: './stats-overview.component.html',
|
templateUrl: './stats-overview.component.html',
|
||||||
styleUrls: ['./stats-overview.component.css'],
|
styleUrls: ['./stats-overview.component.css'],
|
||||||
inputs: ['campaigns']
|
inputs: ['campaigns'],
|
||||||
|
providers: [{provide: CarouselConfig, useValue: {interval: false}}]
|
||||||
})
|
})
|
||||||
export class StatisticOverviewComponent {
|
export class StatisticOverviewComponent {
|
||||||
|
|
||||||
|
id = "";
|
||||||
title = "";
|
title = "";
|
||||||
|
activeSlideIndex: number = 0;
|
||||||
|
|
||||||
pointData: any[] = [];
|
pointData: any[] = [];
|
||||||
|
pointSumData: any[] = [];
|
||||||
playerData: any[] = [];
|
playerData: any[] = [];
|
||||||
|
|
||||||
colorScheme = {
|
colorScheme = {
|
||||||
|
@ -30,24 +33,25 @@ export class StatisticOverviewComponent {
|
||||||
this.route.params
|
this.route.params
|
||||||
.map(params => params['id'])
|
.map(params => params['id'])
|
||||||
.subscribe((id) => {
|
.subscribe((id) => {
|
||||||
|
this.id = id;
|
||||||
if (this.warService.campaigns) {
|
if (this.warService.campaigns) {
|
||||||
this.initWars(this.warService.campaigns, id);
|
this.initWars(this.warService.campaigns);
|
||||||
} else {
|
} else {
|
||||||
this.warService.getAllCampaigns().subscribe(campaigns => {
|
this.warService.getAllCampaigns().subscribe(campaigns => {
|
||||||
this.initWars(campaigns, id);
|
this.initWars(campaigns);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
initWars(campaigns, id) {
|
initWars(campaigns) {
|
||||||
|
|
||||||
let wars = [];
|
let wars = [];
|
||||||
let itemsProcessed = 0;
|
let itemsProcessed = 0;
|
||||||
campaigns = campaigns.filter(campaign => id === 'all' || campaign._id === id);
|
campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id);
|
||||||
campaigns.forEach(campaign => {
|
campaigns.forEach(campaign => {
|
||||||
if (id === 'all') {
|
if (this.id === 'all') {
|
||||||
this.title = "Gesamtübersicht"
|
this.title = "Gesamtübersicht";
|
||||||
} else {
|
} else {
|
||||||
this.title = campaign.title
|
this.title = campaign.title
|
||||||
}
|
}
|
||||||
|
@ -59,6 +63,10 @@ export class StatisticOverviewComponent {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
goToSlide(index: number) {
|
||||||
|
this.activeSlideIndex = index;
|
||||||
|
}
|
||||||
|
|
||||||
initChart(wars: any[]) {
|
initChart(wars: any[]) {
|
||||||
let pointsObj = [
|
let pointsObj = [
|
||||||
{
|
{
|
||||||
|
@ -69,6 +77,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 +97,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])
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue