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/campaign-service/campaign.service";


@Component({
  selector: 'stats-overview',
  templateUrl: './stats-overview.component.html',
  styleUrls: ['./stats-overview.component.css'],
  inputs: ['campaigns'],
  providers: [{provide: CarouselConfig, useValue: {interval: false}}]
})
export class StatisticOverviewComponent {

  id = "";
  title = "";
  activeSlideIndex: number = 0;

  pointData: any[] = [];
  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) {
  }

  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 => {
      if (this.id === 'all') {
        this.title = "Gesamtübersicht";
      } else {
        this.title = campaign.title
        setTimeout(() => {
          this.activeSlideIndex = 2;
        }, 10)
      }
      wars = wars.concat(campaign.wars);
      itemsProcessed++;
      if (itemsProcessed === campaigns.length) {
        this.initChart(wars);
      }
    })
  }

  goToSlide(index: number) {
    this.activeSlideIndex = index;
  }

  initChart(wars: any[]) {
    let pointsObj = [
      {
        "name": "NATO",
        "series": []
      },
      {
        "name": "CSAT",
        "series": []
      }];
    let pointsSumObj = [
      {
        "name": "NATO",
        "series": []
      },
      {
        "name": "CSAT",
        "series": []
      }];
    let playersObj = [
      {
        "name": "NATO",
        "series": []
      },
      {
        "name": "CSAT",
        "series": []
      }
    ];
    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) + '.'
        + isoDate.slice(5, 7) + '.' + isoDate.slice(0, 4);

      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;
    Object.assign(this, [this.pointData, this.pointSumData, this.playerData])
  }

}