hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Rework stats overview style

pull/11/head
Florian Hartwich 2017-10-06 20:52:52 +02:00
parent 4c068e4cd0
commit a7020b3208
5 changed files with 49 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/src/app/statistic/overview/stats-overview.component.css
View File

@ -3,7 +3,7 @@
min-width: 880px;
height: 650px;
margin: auto;
padding-left: 6%;
padding-left: 5%;
}
:host /deep/ .carousel-indicators {

89
static/src/app/statistic/overview/stats-overview.component.html
View File

@ -1,71 +1,32 @@
<div class="slide-chart-container" style="height: 150px;">
<h2 style="margin-bottom: 20px">{{title}}</h2>
<div class="btn btn-default" [style.background]="activeSlideIndex === 2 ? '#d9edf7':'white'"
(click)="goToSlide(2)" *ngIf="id != 'all'">Gesamtpunktzahl
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 0 ? '#d9edf7':'white'"
(click)="goToSlide(0)">Punkte je Schlacht
(click)="goToSlide(0)" *ngIf="id != 'all'">Gesamtpunktzahl
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 1 ? '#d9edf7':'white'"
(click)="goToSlide(1)">Spielerzahlen
(click)="goToSlide(1)">Punkte je Schlacht
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 2 ? '#d9edf7':'white'"
(click)="goToSlide(2)">Spielerzahlen
</div>
</div>
<div class="fade-in">
<div class="slide-chart-container">
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="currentData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoscale"
[timeline]="timeline">
</ngx-charts-line-chart>
</div>
</div>
<carousel class="fade-in" [(activeSlide)]="activeSlideIndex">
<slide *ngIf="id != 'all'">
<div class="slide-chart-container">
<h3>Gesamtpunktzahl</h3>
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="pointSumData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Gesamtpunkte'"
[autoScale]="autoscale"
[timeline]="timeline">
</ngx-charts-line-chart>
</div>
</slide>
<slide>
<div class="slide-chart-container">
<h3>Punkte je Schlacht</h3>
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="pointData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Punkte'"
[autoScale]="autoscale"
[timeline]="timeline">>
</ngx-charts-line-chart>
</div>
</slide>
<slide>
<div class="slide-chart-container">
<h3>Spielerzahlen</h3>
<ngx-charts-line-chart
[scheme]="colorScheme"
[results]="playerData"
[gradient]="gradient"
[xAxis]="xAxis"
[yAxis]="yAxis"
[legend]="legend"
[legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Anzahl Spieler'"
[autoScale]="autoscale"
[timeline]="timeline">
</ngx-charts-line-chart>
</div>
</slide>
</carousel>

23
static/src/app/statistic/overview/stats-overview.component.ts
View File

@ -16,11 +16,12 @@ export class StatisticOverviewComponent {
id = "";
title = "";
activeSlideIndex: number = 0;
pointData: any[] = [];
pointSumData: any[] = [];
playerData: any[] = [];
currentData : any[];
activeSlideIndex;
colorScheme = {
domain: ['#0000FF', '#B22222']
@ -33,9 +34,11 @@ export class StatisticOverviewComponent {
legendTitle = '';
showXAxisLabel = true;
showYAxisLabel = true;
yAxisLabel = "";
autoscale = true;
timeline = false;
constructor(private route: ActivatedRoute,
private campaignService: CampaignService) {
}
@ -63,10 +66,7 @@ export class StatisticOverviewComponent {
if (this.id === 'all') {
this.title = "Gesamtübersicht";
} else {
this.title = campaign.title
setTimeout(() => {
this.activeSlideIndex = 2;
}, 10)
this.title = campaign.title;
}
wars = wars.concat(campaign.wars);
itemsProcessed++;
@ -77,7 +77,13 @@ export class StatisticOverviewComponent {
}
goToSlide(index: number) {
switch (index) {
case 0: this.currentData = this.pointSumData; this.yAxisLabel="Gesamtpunkte"; break;
case 1: this.currentData = this.pointData; this.yAxisLabel="Punkte"; break;
case 2: this.currentData = this.playerData; this.yAxisLabel="Anzahl Spieler"; break;
}
this.activeSlideIndex = index;
}
initChart(wars: any[]) {
@ -130,7 +136,12 @@ export class StatisticOverviewComponent {
this.pointData = pointsObj;
this.pointSumData = pointsSumObj;
this.playerData = playersObj;
Object.assign(this, [this.pointData, this.pointSumData, this.playerData]);
if (this.id != 'all') {
this.goToSlide(0);
} else {
this.goToSlide(1);
}
Object.assign(this, this.currentData);
}
}

2
static/src/app/statistic/war-list/war-item.component.html
View File

@ -3,7 +3,7 @@
<div class="row">
<div class="col-xs-9">
<span>
<a>{{war.title}}</a>
<a style="font-size: 22px;">{{war.title}}</a>
</span>
<br>
<small>vom {{war.date | date: 'dd.MM.yyyy'}}</small>

4
static/src/app/statistic/war-list/war-list.component.html
View File

@ -25,7 +25,7 @@
<div class="row">
<div class="col-xs-9">
<span style="margin:auto">
<a>Kampagnenübersicht</a>
<a style="font-size: 22px;">Kampagnenübersicht</a>
</span>
</div>
</div>
@ -47,7 +47,7 @@
<div class="row">
<div class="col-xs-9">
<span style="margin:auto">
<a>Gesamtübersicht</a>
<a style="font-size: 22px;">Gesamtübersicht</a>
</span>
</div>
</div>