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

import {Component, 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';
import {WarService} from '../../../services/logs/war.service';


@Component({
  selector: 'cc-campaign-overview',
  templateUrl: './campaign-overview.component.html',
  styleUrls: ['./campaign-overview.component.scss']
})
export class StatisticOverviewComponent implements OnInit {

  id: string;

  initialized = false;

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

  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,
              private warService: WarService) {
  }

  ngOnInit() {
    this.route.params
        .map(params => params['id'])
        .subscribe((id) => {
          this.id = id;
          this.initWars();
        });
  }

  initWars() {
    if (this.id === 'all') {
      this.warService.getAllWars().subscribe((wars) => {
        this.initChart(wars);
      });
      this.timeline = true;
    } else {
      this.warService.wars$.subscribe((wars) => {
        this.initChart(wars);
      })
    }
  }

  goToSlide(index) {
    switch (parseInt(index, 10)) {
      case 0:
        this.currentData = this.pointSumData;
        this.yAxisLabel = 'stats.graph.select.sum.points';
        break;
      case 1:
        this.currentData = this.pointData;
        this.yAxisLabel = 'stats.graph.select.battle.points';
        break;
      case 2:
        this.currentData = this.playerData;
        this.yAxisLabel = 'stats.graph.select.player.count';
        break;
    }
  }

  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 war = wars[i];
      if (!war) {
        continue;
      }
      const j = wars.length - i - 1;
      const warDate = (this.id === 'all') ? new Date(war.date) : ChartUtils.getShortDateString(war.date);

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

    setTimeout(() => {
      this.initialized = true;
    }, 250);
  }
}