Switch to single fraction graph view

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

@@ -97,7 +97,6 @@ export class StatisticOverviewComponent {
         break;
     }
     this.activeSlideIndex = index;
-
   }
 
   initChart(wars: any[]) {

static/src/app/statistic/stats.module.ts

@@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/logs/war.service";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
-import {AccordionModule, TabsModule} from "ngx-bootstrap";
+import {AccordionModule, ButtonsModule, TabsModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/logs/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 import {PlayerService} from "../services/logs/player.service";
@@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

static/src/app/statistic/war-detail/war-detail.component.css

@@ -42,19 +42,10 @@
   color: blue;
 }
 
-.chart-container {
-  width: 90%;
-  margin: 2%;
-  min-width: 900px;
-  height: 400px;
-  padding: 15px;
-  float: left;
-}
-
 /* ########### TABS ########### */
 
 :host /deep/ .nav-tabs {
-  padding-left: 35%!important;
+  padding-left: 35% !important;
 }
 
 :host /deep/ .nav-link {
@@ -67,7 +58,7 @@
   color: #000;
 }
 
-:host /deep/ .nav-tabs>li.active>a{
+:host /deep/ .nav-tabs > li.active > a {
   background: #222222;
   color: white;
 }
@@ -107,3 +98,21 @@
   background-color: #f7f7f7;
 }
 
+/* ########### CHART-TAB ######## */
+
+.chart-container {
+  width: 90%;
+  margin: 2%;
+  min-width: 900px;
+  height: 600px;
+  padding: 15px;
+  float: left;
+}
+
+.chart-select-group {
+  width: 50%;
+  margin: auto;
+  position: inherit;
+  display: block;
+  vertical-align: middle;
+}

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

@@ -94,10 +94,22 @@
       <ng-template tabHeading>
         <img src="../../../assets/fraction-btn.png"> Fraktionen
       </ng-template>
-      <div class="fade-in chart-container">
+
+      <div class="chart-select-group btn-group" (click)="selectChart()">
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFlag}}">{{labelFlag}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelKill}}">{{labelKill}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
+        <label class="btn btn-default" [(ngModel)]="chartSelectModel" btnRadio="{{labelTransport}}">{{labelTransport}}</label>
+      </div>
+
+      <div *ngIf="showLineChart" class="chart-container">
         <ngx-charts-line-chart
           [scheme]="colorScheme"
-          [results]="pointData"
+          [results]="lineChartData"
           [gradient]="gradient"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -105,118 +117,17 @@
           [legendTitle]="legendTitle"
           [showXAxisLabel]="showXAxisLabel"
           [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelPoints"
+          [yAxisLabel]="lineChartLabel"
           [autoScale]="autoscale"
           [timeline]="timeline"
           [roundDomains]="roundDomains">
         </ngx-charts-line-chart>
       </div>
-      <div class="fade-in chart-container">
+
-        <ngx-charts-line-chart
+      <div *ngIf="!showLineChart" class="chart-container">
-          [scheme]="colorScheme"
-          [results]="budgetData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelBudget"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="killData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelKill"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="friendlyFireData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelFriendlyFire"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="transportData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelTransport"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="reviveData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelRevive"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="stabilizedData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelStabilize"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-      <div class="fade-in chart-container">
         <ngx-charts-area-chart
           [scheme]="colorScheme"
-          [results]="flagData"
+          [results]="areaChartData"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           [curve]="stepCurve"
@@ -224,7 +135,7 @@
           [legendTitle]="legendTitle"
           [showXAxisLabel]="showXAxisLabel"
           [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="yAxisLabelFlag"
+          [yAxisLabel]="labelFlag"
           [autoScale]="autoscale"
           [timeline]="timeline"
           [roundDomains]="false">

static/src/app/statistic/war-detail/war-detail.component.ts

@@ -1,3 +1,4 @@
+///<reference path="../../utils/chart-utils.ts"/>
 import {Component, ElementRef, ViewChild} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
 import {WarService} from "../../services/logs/war.service";
@@ -21,6 +22,8 @@ export class WarDetailComponent {
 
   war: War = {players: []};
 
+  public chartSelectModel: string;
+
   fractionRadioSelect: string;
 
   playerChart: any[] = [];
@@ -36,14 +39,8 @@ export class WarDetailComponent {
     sortDescending: 'glyphicon glyphicon-triangle-bottom',
   };
 
-  pointData: any[] = [];
+  lineChartData: any[] = [];
-  budgetData: any[] = [];
+  areaChartData: any[] = [];
-  killData: any[] = [];
-  friendlyFireData: any[] = [];
-  transportData: any[] = [];
-  reviveData: any[] = [];
-  stabilizedData: any[] = [];
-  flagData: any[] = [];
 
   tmpPointData;
   tmpBudgetData;
@@ -58,15 +55,17 @@ export class WarDetailComponent {
     domain: ['#0000FF', '#B22222']
   };
 
-  yAxisLabelPoints = 'Punkte';
+  labelPoints = 'Punkte';
-  yAxisLabelBudget = 'Budget';
+  labelBudget = 'Budget';
-  yAxisLabelKill = 'Kills';
+  labelKill = 'Kills';
-  yAxisLabelFriendlyFire = 'FriendlyFire';
+  labelFriendlyFire = 'FriendlyFire';
-  yAxisLabelTransport = 'Lufttransport';
+  labelTransport = 'Lufttransport';
-  yAxisLabelRevive = 'Revive';
+  labelRevive = 'Revive';
-  yAxisLabelStabilize = 'Stabilisiert';
+  labelStabilize = 'Stabilisiert';
-  yAxisLabelFlag = 'Flaggenbesitz';
+  labelFlag = 'Flaggenbesitz';
+  lineChartLabel = this.labelPoints;
 
+  showLineChart = true;
   stepCurve = d3.curveStepAfter;
   gradient = false;
   yAxis = true;
@@ -94,38 +93,12 @@ export class WarDetailComponent {
       .subscribe(war => {
         this.war = war;
         this.rows = war.players;
-        this.playerChart = [
+        this.playerChart = ChartUtils.getSingleDataArray('CSAT', war.playersOpfor, 'NATO', war.playersBlufor);
-          {
-            "name": "CSAT",
-            "value": war.playersOpfor
-          },
-          {
-            "name": "NATO",
-            "value": war.playersBlufor
-          }
-        ];
-        this.tmpPointData = [
-          {
-            "name": "NATO",
-            "series": []
-          },
-          {
-            "name": "CSAT",
-            "series": []
-          }
-        ];
-        this.tmpBudgetData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpKillData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpFrienlyFireData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpTransportData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpReviveData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpStabilizeData = JSON.parse(JSON.stringify(this.tmpPointData));
-        this.tmpFlagCaptureData = JSON.parse(JSON.stringify(this.tmpPointData));
-
-        Object.assign(this, [this.playerChart, this.pointData, this.budgetData, this.killData,
-          this.friendlyFireData, this.transportData, this.reviveData, this.stabilizedData, this.flagData]);
 
         this.fractionChartsInitialized = false;
+        Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
+        this.chartSelectModel = this.labelPoints;
+
         this.staticTabs.tabs[0].active = true;
         this.scrollOverviewTop();
       });
@@ -141,6 +114,39 @@ export class WarDetailComponent {
     }
   }
 
+  selectChart() {
+    if (this.chartSelectModel !== this.labelFlag) {
+      this.showLineChart = true;
+      this.lineChartLabel = this.chartSelectModel;
+      switch (this.chartSelectModel) {
+        case this.labelPoints:
+          this.lineChartData = this.tmpPointData;
+          break;
+        case this.labelBudget:
+          this.lineChartData = this.tmpBudgetData;
+          break;
+        case this.labelKill:
+          this.lineChartData = this.tmpKillData;
+          break;
+        case this.labelFriendlyFire:
+          this.lineChartData = this.tmpFrienlyFireData;
+          break;
+        case this.labelRevive:
+          this.lineChartData = this.tmpReviveData;
+          break;
+        case this.labelStabilize:
+          this.lineChartData = this.tmpStabilizeData;
+          break;
+        case this.labelTransport:
+          this.lineChartData = this.tmpTransportData;
+          break;
+      }
+    } else {
+      this.showLineChart = false;
+      this.areaChartData = this.tmpFlagCaptureData;
+    }
+  }
+
   selectPlayerDetail(player) {
     if (player && player.selected && player.selected.length > 0) {
       this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
@@ -160,6 +166,15 @@ export class WarDetailComponent {
       return;
     }
 
+    this.tmpPointData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpBudgetData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpKillData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpTransportData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpReviveData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpStabilizeData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    this.tmpFlagCaptureData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+
     const newFractionGraphEntry = (entry: any, val1: any, val2: any) => {
       return ChartUtils.getSeriesEntry(new Date(entry.time), entry.fraction === 'BLUFOR' ? val1 : val2);
     };
@@ -285,14 +300,10 @@ export class WarDetailComponent {
         }
       }
     });
-    this.pointData = this.tmpPointData;
+
-    this.budgetData = this.tmpBudgetData;
+    this.showLineChart = true;
-    this.transportData = this.tmpTransportData;
+    this.lineChartLabel = this.labelPoints;
-    this.reviveData = this.tmpReviveData;
+    this.lineChartData = this.tmpPointData;
-    this.stabilizedData = this.tmpStabilizeData;
-    this.killData = this.tmpKillData;
-    this.friendlyFireData = this.tmpFrienlyFireData;
-    this.flagData = this.tmpFlagCaptureData;
   }
 
 }

static/src/app/utils/chart-utils.ts

@@ -13,4 +13,25 @@ export class ChartUtils {
       "value": value
     };
   }
+
+  public static getMultiDataArray(...args: string[]) : any[] {
+    const obj = [];
+    for (let i = 0, arg; arg = args[i]; i++) {
+      obj.push({
+        "name": arg,
+        "series": []
+      })
+    }
+    return obj;
+  }
+
+  public static getSingleDataArray(name1, value1, name2, value2): any[] {
+    return [{
+      "name": name1,
+      "value": value1
+    }, {
+      "name": name2,
+      "value": value2
+    }];
+  }
 }