update stats overview layout

static/package.json

@@ -22,7 +22,7 @@
     "@angular/platform-browser": "^4.3.2",
     "@angular/platform-browser-dynamic": "^4.3.2",
     "@angular/router": "^4.3.2",
-    "@swimlane/ngx-charts": "^6.0.1",
+    "@swimlane/ngx-charts": "^6.0.2",
     "@swimlane/ngx-datatable": "^10.2.3",
     "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",

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

@@ -1,7 +1,13 @@
 .slide-chart-container {
-  width: 1200px;
+  width: 90%;
+  min-width: 880px;
+  height: 750px;
   margin: auto;
-  padding-left: 90px;
+  padding-left: 6%;
+}
+
+:host /deep/ .carousel-indicators {
+  display: none;
 }
 
 :host /deep/ .carousel-control {
@@ -9,16 +15,17 @@
   cursor: pointer;
 }
 
-:host /deep/ .chart-legend{
+:host /deep/ .chart-legend {
   position: absolute;
   margin-top: -60px;
   margin-left: -220px;
 }
 
-:host /deep/ .legend-label {
+:host /deep/ .chart-legend .legend-labels {
-  float: left;
+  width: 200px;
 }
 
 :host /deep/ .chart-legend .legend-label {
+  float: left;
   padding-left: 14px;
 }

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

@@ -10,23 +10,25 @@
      (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"
+        [gradient]="gradient"
-        [xAxis]="true"
+        [xAxis]="xAxis"
-        [yAxis]="true"
+        [yAxis]="yAxis"
-        [legend]="true"
+        [legend]="legend"
-        [legendTitle]="''"
+        [legendTitle]="legendTitle"
-        [showXAxisLabel]="true"
+        [showXAxisLabel]="showXAxisLabel"
-        [showYAxisLabel]="true"
+        [showYAxisLabel]="showYAxisLabel"
         [yAxisLabel]="'Gesamtpunkte'"
-        [autoScale]="true">
+        [autoScale]="autoscale"
+        [timeline]="timeline">
       </ngx-charts-line-chart>
     </div>
   </slide>
@@ -34,18 +36,18 @@
     <div class="slide-chart-container">
       <h3>Punkte je Schlacht</h3>
       <ngx-charts-line-chart
-        [view]="[1200, 500]"
         [scheme]="colorScheme"
         [results]="pointData"
-        [gradient]="false"
+        [gradient]="gradient"
-        [xAxis]="true"
+        [xAxis]="xAxis"
-        [yAxis]="true"
+        [yAxis]="yAxis"
-        [legend]="true"
+        [legend]="legend"
-        [legendTitle]="''"
+        [legendTitle]="legendTitle"
-        [showXAxisLabel]="true"
+        [showXAxisLabel]="showXAxisLabel"
-        [showYAxisLabel]="true"
+        [showYAxisLabel]="showYAxisLabel"
         [yAxisLabel]="'Punkte'"
-        [autoScale]="false">
+        [autoScale]="autoscale"
+        [timeline]="timeline">>
       </ngx-charts-line-chart>
     </div>
   </slide>
@@ -53,18 +55,18 @@
     <div class="slide-chart-container">
       <h3>Spielerzahlen</h3>
       <ngx-charts-line-chart
-        [view]="[1200, 500]"
         [scheme]="colorScheme"
         [results]="playerData"
-        [gradient]="false"
+        [gradient]="gradient"
-        [xAxis]="true"
+        [xAxis]="xAxis"
-        [yAxis]="true"
+        [yAxis]="yAxis"
-        [legend]="true"
+        [legend]="legend"
-        [legendTitle]="''"
+        [legendTitle]="legendTitle"
-        [showXAxisLabel]="true"
+        [showXAxisLabel]="showXAxisLabel"
-        [showYAxisLabel]="true"
+        [showYAxisLabel]="showYAxisLabel"
         [yAxisLabel]="'Anzahl Spieler'"
-        [autoScale]="true">
+        [autoScale]="autoscale"
+        [timeline]="timeline">
       </ngx-charts-line-chart>
     </div>
   </slide>

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

@@ -21,9 +21,21 @@ export class StatisticOverviewComponent {
   pointSumData: any[] = [];
   playerData: any[] = [];
 
+
   colorScheme = {
+    group: 'Ordinal',
     domain: ['#0000FF', '#B22222']
   };
+  gradient = false;
+  xAxis = true;
+  yAxis = true;
+  roundDomains = true;
+  legend = true;
+  legendTitle = '';
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  autoscale = true;
+  timeline = false;
 
   constructor(private route: ActivatedRoute,
               private campaignService: CampaignService) {
@@ -101,6 +113,7 @@ export class StatisticOverviewComponent {
     ];
     for (let i = wars.length - 1; i >= 0; i--) {
       let j = wars.length - i - 1;
+      // const warDateString = new Date(wars[i].date); TODO: use ngx-chart timeline
       const isoDate = wars[i].date.slice(0, 10);
       const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
       const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'