Add player count statistic

static/src/app/statistic/statistic.component.css

@@ -1,48 +1,5 @@
-h1 {
+h3 {
   width: 920px;
   margin-bottom: 50px;
   margin-left: 25%
 }
-
-img {
-  margin-top: 10px;
-  padding-right: 30px;
-}
-
-.div-table {
-  display: table;
-  border-radius: 10px;
-  margin-left: 1%;
-  width: auto;
-  border-spacing: 5px; /* cellspacing:poor IE support for  this */
-}
-
-.div-table-row {
-  display: table-row;
-  width: auto;
-  clear: both;
-}
-
-.div-table-col {
-  float: left; /* fix for  buggy browsers */
-  display: table-column;
-  padding: 5px 15px 5px 15px;
-}
-
-.army-head {
-  font-weight: bolder;
-  text-align: center
-}
-
-.member-link {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.text-opfor {
-  color: firebrick;
-}
-
-.text-blufor {
-  color: blue;
-}

static/src/app/statistic/statistic.component.html

@@ -13,10 +13,9 @@
     [legendTitle]="''"
     [showXAxisLabel]="true"
     [showYAxisLabel]="true"
-    [xAxisLabel]="Schlachtdatum"
-    [yAxisLabel]="Punkte"
+    [xAxisLabel]="'Schlachtdatum'"
+    [yAxisLabel]="'Punkte'"
     [autoScale]="false"
-    [timeline]="true"
     (select)="onSelect($event)">
   </ngx-charts-line-chart>
 

static/src/app/statistic/statistic.component.ts

@@ -1,4 +1,5 @@
 import {Component} from "@angular/core";
+import {AppComponent} from "../app.component";
 import {WarService} from "../services/war-service/war.service";
 
 
@@ -12,26 +13,46 @@ export class StatisticComponent {
   chartData: any[] = [];
 
   colorScheme = {
-    domain: ['#0000FF', '#B22222', '#C7B42C', '#AAAAAA']
+    domain: ['#0000FF', '#B22222', '#595DC7', '#B25D62']
   };
 
-  constructor(private warService: WarService) {
-    Object.assign(this, this.chartData)
+  constructor(private appComponent: AppComponent,
+              private warService: WarService) {
   }
 
   ngOnInit() {
-    this.warService.getAllWars()
-      .subscribe((wars) => {
-        let updateObj = [{
+    let wars = this.appComponent.wars;
+    if (wars.length === 0) {
+      this.warService.getAllWars().subscribe(items => {
+        this.initChart(items);
+      })
+    }
+    this.initChart(wars);
+  }
+
+  initChart(wars: any[]) {
+    let updateObj = [
+      {
         "name": "NATO",
         "series": []
       },
       {
         "name": "CSAT",
         "series": []
+      },
+      {
+        "name": "Anz. Spieler NATO",
+        "series": []
+      },
+      {
+        "name": "Anz. Spieler CSAT",
+        "series": []
       }];
-        for (let i = 0; i < wars.length; i++) {
-          let warDateString = new Date(wars[i].date);
+    for (let i = wars.length - 1; i >= 0; i--) {
+      let isoDate = wars[i].date.slice(0, 10);
+      let dayDate = parseInt(isoDate.slice(8, 10)) + 1;
+      let warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'
+        + isoDate.slice(5, 7) + '.' + isoDate.slice(0, 4);
       let bluforData = {
         name: warDateString,
         value: wars[i].ptBlufor
@@ -42,10 +63,20 @@ export class StatisticComponent {
         value: wars[i].ptOpfor
       };
       updateObj[1].series.push(opforData);
+      let bluforPlayers = {
+        name: warDateString,
+        value: 13
+      };
+      updateObj[2].series.push(bluforPlayers);
+      let opforPlayers = {
+        name: warDateString,
+        value: 13
+      };
+      updateObj[3].series.push(opforPlayers);
     }
     this.chartData = updateObj;
-      })
-  };
+    Object.assign(this, this.chartData)
+  }
 
   onSelect(event) {
     console.log(event);