opt-cc/static/src/app/statistic/campaign/overview/stats-overview.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {CampaignService} from '../../../services/logs/campaign.service';
import {ChartUtils} from '../../../utils/chart-utils';
import {Fraction} from '../../../utils/fraction.enum';


@Component({
  selector: 'stats-overview',
  templateUrl: './stats-overview.component.html',
  styleUrls: ['./stats-overview.component.css', '../../../style/list-entry.css', '../../../style/overview.css']
})
export class StatisticOverviewComponent implements OnInit {

  @Input() campaigns;

  id = '';
  title = '';

  pointData: any[] = [];
  pointSumData: any[] = [];
  playerData: any[] = [];
  currentData: any[] = [];
  activeSlideIndex;

  colorScheme = {
    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
  };
  gradient = false;
  xAxis = true;
  yAxis = true;
  roundDomains = true;
  legend = true;
  legendTitle = '';
  showXAxisLabel = true;
  showYAxisLabel = true;
  yAxisLabel = '';
  autoscale = true;
  timeline = false;

  constructor(private route: ActivatedRoute,
              private campaignService: CampaignService) {
  }

  ngOnInit() {
    this.route.params
        .map(params => params['id'])
        .subscribe((id) => {
          this.id = id;
          if (this.campaignService.campaigns) {
            this.initWars(this.campaignService.campaigns);
          } else {
            this.campaignService.getAllCampaignsWithWars().subscribe(campaigns => {
              this.initWars(campaigns);
            });
          }
        });
  }

  initWars(campaigns) {
    let wars = [];
    let itemsProcessed = 0;
    campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id);
    campaigns.forEach(campaign => {
      wars = wars.concat(campaign.wars);
      itemsProcessed++;
      if (itemsProcessed === campaigns.length) {
        if (this.id === 'all') {
          this.timeline = true;
          this.title = 'Gesamtübersicht';
          wars.sort((a, b) => {
            // sort by dates, because older campaign can contain newer war
            if (a['date'] > (b['date'])) {
              return -1;
            }
            if (a['date'] < (b['date'])) {
              return 1;
            }
            return 0;
          });
        } else {
          this.title = campaign.title;
        }
        this.initChart(wars);
      }
    });
  }

  goToSlide(index: number) {
    switch (index) {
      case 0:
        this.currentData = this.pointSumData;
        this.yAxisLabel = 'Gesamtpunkte';
        break;
      case 1:
        this.currentData = this.pointData;
        this.yAxisLabel = 'Punkte';
        break;
      case 2:
        this.currentData = this.playerData;
        this.yAxisLabel = 'Anzahl Spieler';
        break;
    }
    this.activeSlideIndex = index;
  }

  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);

    for (let i = wars.length - 1; i >= 0; i--) {
      const j = wars.length - i - 1;
      const warDate = (this.id === 'all') ? new Date(wars[i].date) : ChartUtils.getShortDateString(wars[i].date);

      pointsObj[0].series.push({
        name: warDate,
        value: wars[i].ptBlufor
      });
      pointsObj[1].series.push({
        name: warDate,
        value: wars[i].ptOpfor
      });
      pointsSumObj[0].series.push({
        name: warDate,
        value: pointsSumObj[0].series[j - 1] ?
          pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor :
          wars[i].ptBlufor
      });
      pointsSumObj[1].series.push({
        name: warDate,
        value: pointsSumObj[1].series[j - 1]
          ? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor :
          wars[i].ptOpfor
      });
      playersObj[0].series.push({
        name: warDate,
        value: wars[i].playersBlufor
      });
      playersObj[1].series.push({
        name: warDate,
        value: wars[i].playersOpfor
      });
    }

    this.pointData = pointsObj;
    this.pointSumData = pointsSumObj;
    this.playerData = playersObj;
    if (this.id !== 'all') {
      this.goToSlide(0);
    } else {
      this.goToSlide(1);
    }
    Object.assign(this, this.currentData);
  }

  isActiveSlide(index) {
    return this.activeSlideIndex === index ? '#d9edf7' : 'white';
  }
}