package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.3.2",
+  "version": "1.3.1",
   "license": "MIT",
   "private": true,
   "scripts": {

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, CarouselModule} from "ngx-bootstrap";
+import {AccordionModule} from "ngx-bootstrap";
 
 @NgModule({
   imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
-    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot(), CarouselModule.forRoot()],
+    BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot()],
   providers: [
     HttpClient,
     LoginService,

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

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

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

@@ -1,71 +1,46 @@
-<h2 style="margin-bottom: 20px">{{title}}</h2>
+<h2>{{title}}</h2>
+
+<h3>Punkte</h3>
+
+<div class="chart-container">
+
+  <ngx-charts-line-chart
+    [view]="[1050, 400]"
+    [scheme]="colorScheme"
+    [results]="playerData"
+    [gradient]="false"
+    [xAxis]="true"
+    [yAxis]="true"
+    [legend]="true"
+    [legendTitle]="''"
+    [showXAxisLabel]="true"
+    [showYAxisLabel]="true"
+    [xAxisLabel]="'Schlachtdatum'"
+    [yAxisLabel]="'Punkte'"
+    [autoScale]="false">
+  </ngx-charts-line-chart>
 
-<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
-</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]="[1200, 500]"
-        [scheme]="colorScheme"
-        [results]="pointSumData"
-        [gradient]="false"
-        [xAxis]="true"
-        [yAxis]="true"
-        [legend]="true"
-        [legendTitle]="''"
-        [showXAxisLabel]="true"
-        [showYAxisLabel]="true"
-        [yAxisLabel]="'Gesamtpunkte'"
-        [autoScale]="true">
-      </ngx-charts-line-chart>
-    </div>
-  </slide>
-  <slide>
-    <div class="slide-chart-container">
-      <h3>Punkte je Schlacht</h3>
-      <ngx-charts-line-chart
-        [view]="[1200, 500]"
-        [scheme]="colorScheme"
-        [results]="pointData"
-        [gradient]="false"
-        [xAxis]="true"
-        [yAxis]="true"
-        [legend]="true"
-        [legendTitle]="''"
-        [showXAxisLabel]="true"
-        [showYAxisLabel]="true"
-        [yAxisLabel]="'Punkte'"
-        [autoScale]="false">
-      </ngx-charts-line-chart>
-    </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>
+<h3 style="margin-top: 370px;">Spielerzahlen</h3>
+
+<div class="chart-container">
+
+  <ngx-charts-line-chart
+    [view]="[1050, 350]"
+    [scheme]="colorScheme"
+    [results]="pointData"
+    [gradient]="false"
+    [xAxis]="true"
+    [yAxis]="true"
+    [legend]="true"
+    [legendTitle]="''"
+    [showXAxisLabel]="true"
+    [showYAxisLabel]="true"
+    [xAxisLabel]="'Schlachtdatum'"
+    [yAxisLabel]="'Anzahl Spieler'"
+    [autoScale]="true"
+    (select)="onSelect($event)">
+  </ngx-charts-line-chart>
+
+</div>

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

@@ -1,24 +1,21 @@
 import {Component} from "@angular/core";
 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 {CarouselConfig} from "ngx-bootstrap";
 
 
 @Component({
   selector: 'stats-overview',
   templateUrl: './stats-overview.component.html',
   styleUrls: ['./stats-overview.component.css'],
-  inputs: ['campaigns'],
-  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
+  inputs: ['campaigns']
 })
 export class StatisticOverviewComponent {
 
-  id = "";
   title = "";
-  activeSlideIndex: number = 0;
 
   pointData: any[] = [];
-  pointSumData: any[] = [];
   playerData: any[] = [];
 
   colorScheme = {
@@ -33,25 +30,24 @@ export class StatisticOverviewComponent {
     this.route.params
       .map(params => params['id'])
       .subscribe((id) => {
-        this.id = id;
         if (this.warService.campaigns) {
-          this.initWars(this.warService.campaigns);
+          this.initWars(this.warService.campaigns, id);
         } else {
           this.warService.getAllCampaigns().subscribe(campaigns => {
-            this.initWars(campaigns);
+            this.initWars(campaigns, id);
           })
         }
       });
   }
 
-  initWars(campaigns) {
+  initWars(campaigns, id) {
 
     let wars = [];
     let itemsProcessed = 0;
-    campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id);
+    campaigns = campaigns.filter(campaign => id === 'all' || campaign._id === id);
     campaigns.forEach(campaign => {
-      if (this.id === 'all') {
-        this.title = "Gesamtübersicht";
+      if (id === 'all') {
+        this.title = "Gesamtübersicht"
       } else {
         this.title = campaign.title
       }
@@ -63,10 +59,6 @@ export class StatisticOverviewComponent {
     })
   }
 
-  goToSlide(index: number) {
-    this.activeSlideIndex = index;
-  }
-
   initChart(wars: any[]) {
     let pointsObj = [
       {
@@ -77,15 +69,6 @@ export class StatisticOverviewComponent {
         "name": "CSAT",
         "series": []
       }];
-    let pointsSumObj = [
-      {
-        "name": "NATO",
-        "series": []
-      },
-      {
-        "name": "CSAT",
-        "series": []
-      }];
     let playersObj = [
       {
         "name": "NATO",
@@ -97,46 +80,37 @@ export class StatisticOverviewComponent {
       }
     ];
     for (let i = wars.length - 1; i >= 0; i--) {
-      let j = wars.length - i - 1;
       const isoDate = wars[i].date.slice(0, 10);
       const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
       const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'
         + isoDate.slice(5, 7) + '.' + isoDate.slice(0, 4);
 
-      pointsObj[0].series.push({
+      const bluforData = {
         name: warDateString,
         value: wars[i].ptBlufor
-      });
-      pointsObj[1].series.push({
+      };
+      const opforData = {
         name: warDateString,
         value: wars[i].ptOpfor
-      });
-      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({
+      };
+      const bluforPlayers = {
         name: warDateString,
         value: wars[i].playersBlufor
-      });
-      playersObj[1].series.push({
+      };
+      const opforPlayers = {
         name: warDateString,
         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.pointSumData = pointsSumObj;
     this.playerData = playersObj;
-    Object.assign(this, [this.pointData, this.pointSumData, this.playerData])
+    Object.assign(this, [this.playerData, this.pointData])
   }
 
 }