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

View File

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

View File

@ -1,22 +1,21 @@
<h2 style="margin-bottom: 20px">{{title}}</h2> <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'" <div class="btn btn-default" [style.background]="activeSlideIndex === 0 ? '#d9edf7':'white'"
(click)="goToSlide(2)" *ngIf="id != 'all'">Gesamtpunktzahl (click)="goToSlide(0)" *ngIf="id != 'all'">Gesamtpunktzahl
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 1 ? '#d9edf7':'white'"
(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>
<div class="btn btn-default" [style.background]="activeSlideIndex === 0 ? '#d9edf7':'white'" <div class="fade-in">
(click)="goToSlide(0)">Punkte je Schlacht
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 1 ? '#d9edf7':'white'"
(click)="goToSlide(1)">Spielerzahlen
</div>
<carousel class="fade-in" [(activeSlide)]="activeSlideIndex">
<slide *ngIf="id != 'all'">
<div class="slide-chart-container"> <div class="slide-chart-container">
<h3>Gesamtpunktzahl</h3>
<ngx-charts-line-chart <ngx-charts-line-chart
[scheme]="colorScheme" [scheme]="colorScheme"
[results]="pointSumData" [results]="currentData"
[gradient]="gradient" [gradient]="gradient"
[xAxis]="xAxis" [xAxis]="xAxis"
[yAxis]="yAxis" [yAxis]="yAxis"
@ -24,48 +23,10 @@
[legendTitle]="legendTitle" [legendTitle]="legendTitle"
[showXAxisLabel]="showXAxisLabel" [showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel" [showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Gesamtpunkte'" [yAxisLabel]="yAxisLabel"
[autoScale]="autoscale" [autoScale]="autoscale"
[timeline]="timeline"> [timeline]="timeline">
</ngx-charts-line-chart> </ngx-charts-line-chart>
</div> </div>
</slide> </div>
<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>

View File

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

View File

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

View File

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