Rework stats overview style

static/src/app/statistic/overview/stats-overview.component.css

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

static/src/app/statistic/overview/stats-overview.component.html

@@ -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 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">
-      <h3>Gesamtpunktzahl</h3>
     <ngx-charts-line-chart
       [scheme]="colorScheme"
-        [results]="pointSumData"
+      [results]="currentData"
       [gradient]="gradient"
       [xAxis]="xAxis"
       [yAxis]="yAxis"
@@ -24,48 +23,10 @@
       [legendTitle]="legendTitle"
       [showXAxisLabel]="showXAxisLabel"
       [showYAxisLabel]="showYAxisLabel"
-        [yAxisLabel]="'Gesamtpunkte'"
+      [yAxisLabel]="yAxisLabel"
       [autoScale]="autoscale"
       [timeline]="timeline">
     </ngx-charts-line-chart>
   </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>

static/src/app/statistic/overview/stats-overview.component.ts

@@ -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
+        this.title = campaign.title;
-        setTimeout(() => {
-          this.activeSlideIndex = 2;
-        }, 10)
       }
       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);
   }
 
 }

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

@@ -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>

static/src/app/statistic/war-list/war-list.component.html

@@ -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>