Apply multi color definition for Fractions enum

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

@@ -4,6 +4,8 @@ import {CampaignService} from '../../../services/logs/campaign.service';
 import {ChartUtils} from '../../../utils/chart-utils';
 import {Fraction} from '../../../utils/fraction.enum';
 import {WarService} from '../../../services/logs/war.service';
+import {FractionHelpers} from '../../../utils/global.helpers';
+import {War} from '../../../models/model-interfaces';
 
 
 @Component({
@@ -22,9 +24,7 @@ export class StatisticOverviewComponent implements OnInit {
   playerData: any[] = [];
   currentData: any[] = [];
 
-  colorScheme = {
-    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
-  };
+  colorScheme;
   gradient = false;
   xAxis = true;
   yAxis = true;
@@ -81,44 +81,71 @@ export class StatisticOverviewComponent implements OnInit {
     }
   }
 
-  initChart(wars: any[]) {
-    const pointsObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    const pointsSumObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    const playersObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+  initChart(wars: War[]) {
+    const fractions: string[] = [];
+    this.colorScheme = {
+      domain: []
+    };
+
+    if (wars.find(war => war.fractionMappingBlufor === 'BLUFOR' || war.fractionMappingOpfor === 'BLUFOR')) {
+      fractions.push(Fraction.BLUFOR);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor('BLUFOR'));
+    }
+    if (wars.find(war => war.fractionMappingBlufor === 'OPFOR' || war.fractionMappingOpfor === 'OPFOR')) {
+      fractions.push(Fraction.OPFOR);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor('OPFOR'));
+    }
+    if (wars.find(war => war.fractionMappingBlufor === Fraction.ARF || war.fractionMappingOpfor === Fraction.ARF)) {
+      fractions.push(Fraction.ARF);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor(Fraction.ARF));
+    }
+    if (wars.find(war => war.fractionMappingBlufor === Fraction.SWORD || war.fractionMappingOpfor === Fraction.SWORD)) {
+      fractions.push(Fraction.SWORD);
+      this.colorScheme.domain.push(FractionHelpers.getFractionColor(Fraction.SWORD));
+    }
+
+    const pointsObj = ChartUtils.getMultiDataArray(...fractions);
+    const pointsSumObj = ChartUtils.getMultiDataArray(...fractions);
+    const playersObj = ChartUtils.getMultiDataArray(...fractions);
 
     for (let i = wars.length - 1; i >= 0; i--) {
       const war = wars[i];
       if (!war) {
         continue;
       }
+
+      const bluforIndex = fractions.findIndex(fraction =>
+        fraction === FractionHelpers.getFractionName(war, 'BLUFOR'));
+      const opforIndex = fractions.findIndex(
+        fraction => fraction === FractionHelpers.getFractionName(war, 'OPFOR'));
+
       const j = wars.length - i - 1;
       const warDate = (this.id === 'all') ? new Date(war.date) : ChartUtils.getShortDateString(war.date);
-
-      pointsObj[0].series.push({
+      pointsObj[bluforIndex].series.push({
         name: warDate,
         value: war.ptBlufor
       });
-      pointsObj[1].series.push({
+      pointsObj[opforIndex].series.push({
         name: warDate,
         value: war.ptOpfor
       });
-      pointsSumObj[0].series.push({
+      pointsSumObj[bluforIndex].series.push({
         name: warDate,
-        value: pointsSumObj[0].series[j - 1] ?
-          pointsSumObj[0].series[j - 1].value + war.ptBlufor :
+        value: pointsSumObj[bluforIndex].series[j - 1] ?
+          pointsSumObj[bluforIndex].series[j - 1].value + war.ptBlufor :
           war.ptBlufor
       });
-      pointsSumObj[1].series.push({
+      pointsSumObj[opforIndex].series.push({
         name: warDate,
-        value: pointsSumObj[1].series[j - 1]
-          ? pointsSumObj[1].series[j - 1].value + war.ptOpfor :
+        value: pointsSumObj[opforIndex].series[j - 1]
+          ? pointsSumObj[opforIndex].series[j - 1].value + war.ptOpfor :
           war.ptOpfor
       });
-      playersObj[0].series.push({
+      playersObj[bluforIndex].series.push({
         name: warDate,
         value: war.playersBlufor
       });
-      playersObj[1].series.push({
+      playersObj[opforIndex].series.push({
         name: warDate,
         value: war.playersOpfor
       });

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

@@ -39,7 +39,7 @@
   </div>
 
   <div class="form-group">
-    <label for="fractionMappingOpfor">{{'stats.war.submit.mapping.blufor' | translate}}</label>
+    <label for="fractionMappingOpfor">{{'stats.war.submit.mapping.opfor' | translate}}</label>
     <select id="fractionMappingOpfor" name="fractionMappingOpfor" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="war.fractionMappingOpfor">
@@ -48,7 +48,7 @@
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
     </select>
-    <show-error displayName="{{'stats.war.submit.mapping.blufor' | translate}}" controlPath="fraction"></show-error>
+    <show-error displayName="{{'stats.war.submit.mapping.opfor' | translate}}" controlPath="fraction"></show-error>
   </div>
 
 

static/src/app/utils/fraction.enum.ts

@@ -1,23 +1,23 @@
 export enum Fraction {
+  COLOR_NEUTRAL = '#222222',
   ARF = 'ARF',
   COLOR_ARF = '#336699',
-  COLOR_ARF_GREY = '#336699',
-  COLOR_ARF_DARK = '#336699',
-  COLOR_ARF_LIGHT = '#336699',
+  COLOR_ARF_LIGHT = '#6666dd',
+  COLOR_ARF_DARK = '#0C0CA6',
+  COLOR_ARF_GREY = '#515179',
   SWORD = 'SWORD',
   COLOR_SWORD = '#8b8b8b',
-  COLOR_SWORD_GREY = '#8b8b8b',
-  COLOR_SWORD_DARK = '#8b8b8b',
-  COLOR_SWORD_LIGHT = '#8b8b8b',
+  COLOR_SWORD_GREY = '#282828',
+  COLOR_SWORD_DARK = '#101010',
+  COLOR_SWORD_LIGHT = '#b8b8b8',
   BLUFOR = 'NATO',
-  OPFOR = 'CSAT',
   COLOR_BLUFOR = '#3c5fa1',
   COLOR_BLUFOR_LIGHT = '#6666dd',
   COLOR_BLUFOR_DARK = '#0C0CA6',
   COLOR_BLUFOR_GREY = '#515179',
+  OPFOR = 'CSAT',
   COLOR_OPFOR = '#a90100',
   COLOR_OPFOR_DARK = '#890F0F',
   COLOR_OPFOR_LIGHT = '#fb5555',
   COLOR_OPFOR_GREY = '#955c5f',
-  COLOR_NEUTRAL = '#222222',
 }