Add carousel for stats graphs

static/src/app/app.module.ts

@@ -35,11 +35,11 @@ import {WarService} from "./services/war-service/war.service";
 import {DataTableModule} from "angular2-datatable";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
 import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
-import {AccordionModule} from "ngx-bootstrap";
+import {AccordionModule, CarouselModule} from "ngx-bootstrap";
 
 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
-    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot()],
+    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot(), CarouselModule.forRoot()],
   providers: [
     HttpClient,
     LoginService,

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

@@ -1,3 +1,9 @@
-.chart-container {
+.slide-chart-container {
   width: 1200px;
+  margin: auto;
+}
+
+:host /deep/ .carousel-control {
+  width: 5%;
+  cursor: pointer;
 }

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

@@ -1,11 +1,21 @@
-<h2>{{title}}</h2>
+<h2 style="margin-bottom: 20px">{{title}}</h2>
 
-<h3>Gesamtpunktzahl</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
-    [view]="[1050, 350]"
+        [view]="[1200, 500]"
         [scheme]="colorScheme"
         [results]="pointSumData"
         [gradient]="false"
@@ -15,20 +25,16 @@
         [legendTitle]="''"
         [showXAxisLabel]="true"
         [showYAxisLabel]="true"
-    [xAxisLabel]="'Schlachtdatum'"
         [yAxisLabel]="'Gesamtpunkte'"
-    [autoScale]="true"
+        [autoScale]="true">
-    (select)="onSelect($event)">
       </ngx-charts-line-chart>
-
+    </div>
-</div>
+  </slide>
-
+  <slide>
-<h3 style="padding-top: 300px;">Punkte je Schlacht</h3>
+    <div class="slide-chart-container">
-
+      <h3>Punkte je Schlacht</h3>
-<div class="chart-container">
-
       <ngx-charts-line-chart
-    [view]="[1050, 350]"
+        [view]="[1200, 500]"
         [scheme]="colorScheme"
         [results]="pointData"
         [gradient]="false"
@@ -38,19 +44,16 @@
         [legendTitle]="''"
         [showXAxisLabel]="true"
         [showYAxisLabel]="true"
-    [xAxisLabel]="'Schlachtdatum'"
         [yAxisLabel]="'Punkte'"
         [autoScale]="false">
       </ngx-charts-line-chart>
-
+    </div>
-</div>
+  </slide>
-
+  <slide>
-<h3 style="padding-top: 300px;">Spielerzahlen</h3>
+    <div class="slide-chart-container">
-
+      <h3>Spielerzahlen</h3>
-<div class="chart-container">
-
       <ngx-charts-line-chart
-    [view]="[1050, 350]"
+        [view]="[1200, 500]"
         [scheme]="colorScheme"
         [results]="playerData"
         [gradient]="false"
@@ -60,10 +63,9 @@
         [legendTitle]="''"
         [showXAxisLabel]="true"
         [showYAxisLabel]="true"
-    [xAxisLabel]="'Schlachtdatum'"
         [yAxisLabel]="'Anzahl Spieler'"
-    [autoScale]="true"
+        [autoScale]="true">
-    (select)="onSelect($event)">
       </ngx-charts-line-chart>
-
+    </div>
-</div>
+  </slide>
+</carousel>

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

@@ -1,17 +1,21 @@
 import {Component} from "@angular/core";
 import {WarService} from "../../services/war-service/war.service";
 import {ActivatedRoute} from "@angular/router";
+import {CarouselConfig} from "ngx-bootstrap";
 
 
 @Component({
   selector: 'stats-overview',
   templateUrl: './stats-overview.component.html',
   styleUrls: ['./stats-overview.component.css'],
-  inputs: ['campaigns']
+  inputs: ['campaigns'],
+  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
 })
 export class StatisticOverviewComponent {
 
+  id = "";
   title = "";
+  activeSlideIndex: number = 0;
 
   pointData: any[] = [];
   pointSumData: any[] = [];
@@ -29,24 +33,25 @@ export class StatisticOverviewComponent {
     this.route.params
       .map(params => params['id'])
       .subscribe((id) => {
+        this.id = id;
         if (this.warService.campaigns) {
-          this.initWars(this.warService.campaigns, id);
+          this.initWars(this.warService.campaigns);
         } else {
           this.warService.getAllCampaigns().subscribe(campaigns => {
-            this.initWars(campaigns, id);
+            this.initWars(campaigns);
           })
         }
       });
   }
 
-  initWars(campaigns, id) {
+  initWars(campaigns) {
 
     let wars = [];
     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 => {
-      if (id === 'all') {
+      if (this.id === 'all') {
-        this.title = "Gesamtübersicht"
+        this.title = "Gesamtübersicht";
       } else {
         this.title = campaign.title
       }
@@ -58,6 +63,10 @@ export class StatisticOverviewComponent {
     })
   }
 
+  goToSlide(index: number) {
+    this.activeSlideIndex = index;
+  }
+
   initChart(wars: any[]) {
     let pointsObj = [
       {