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

import {Component} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {CarouselConfig} from "ngx-bootstrap";
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'],
  inputs: ['campaigns'],
  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
})
export class StatisticOverviewComponent {

  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.getAllCampaigns().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.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 warDateString = ChartUtils.getShortDateString(wars[i].date);

      pointsObj[0].series.push({
        name: warDateString,
        value: wars[i].ptBlufor
      });
      pointsObj[1].series.push({
        name: warDateString,
        value: wars[i].ptOpfor
      });
      pointsSumObj[0].series.push({
        name: warDateString,
        value: pointsSumObj[0].series[j - 1] ?
          pointsSumObj[0].series[j - 1].value + wars[i].ptBlufor :
          wars[i].ptBlufor
      });
      pointsSumObj[1].series.push({
        name: warDateString,
        value: pointsSumObj[1].series[j - 1]
          ? pointsSumObj[1].series[j - 1].value + wars[i].ptOpfor :
          wars[i].ptOpfor
      });
      playersObj[0].series.push({
        name: warDateString,
        value: wars[i].playersBlufor
      });
      playersObj[1].series.push({
        name: warDateString,
        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'
  }

}