Facti13.Frontend.Angular/src/app/pages/statistic-page/statistic-page.component.ts

import { Component, OnInit } from '@angular/core';
import {GraphService} from "../../services/graph.service";
import {Chart} from "chart.js/auto";
import {GraphData} from "../../entities/graph/GraphData";
import {ActionService} from "../../services/action.service";
import {Uniq} from "../../entities/servers/Uniq";
import {ServerService} from "../../services/server.service";
import {AuthService} from "../../services/auth.service";

export interface Period {
  name: string
  value: string
}

@Component({
  selector: 'app-statistic-page',
  templateUrl: './statistic-page.component.html',
  styleUrls: ['./statistic-page.component.scss']
})
export class StatisticPageComponent implements OnInit {

  init: boolean = true;
  loading: boolean = false;

  periods:Period[] = [
    {name: 'По дням', value: 'days'},
    {name: 'По минутам', value: 'minutes'}
  ];
  selectedPeriod:Period = this.periods[0];

  days:number[] = [1,7,14,21,30,60,90,180];
  selectedDays:number = 30;

  minutes:number[] = [1, 5, 10, 15, 30]
  selectedMinute:number = 5;

  serverList: {name: string, server_id: string }[] = [
    {name: 'Выбрать все', server_id: '%'}
  ];
  selectedServer: {name: string, server_id: string } = this.serverList[0];

  chart!:Chart;

  uniq!: Uniq;

  constructor(private graphService: GraphService,
              private actionService: ActionService,
              private serverService: ServerService,
              public authService: AuthService) {
  }

  ngOnInit(): void {
    this.getServers();
    this.getUniq();
  }

  getUniq() {
    this.serverService.getStats("uniq").subscribe(
      (res) => this.uniq = res.export()
    );
  }

  getServers() {
    this.serverService.getServers().subscribe(
      (res) => {
        const keys = Object.keys(res.data);
        for (const key of keys) {
          this.serverList.push({name: res.data[key].name, server_id: key});
        }
      }
    )
  }

  getGraph() {
    if (this.loading) {
      return;
    }

    this.init = false;
    this.loading = true;
    console.log(this.selectedPeriod, this.selectedMinute, this.selectedDays, this.selectedServer);
    switch (this.selectedPeriod.value) {
      case 'days': {
        this.graphService.getOnlineStatsOfDays(this.selectedDays, this.selectedServer?this.selectedServer.server_id:'%').subscribe(
          (d) => this.processingData(GraphData.fromStatsOfPeakOfDay(d.reverse(), "red")),
          (err) => this.actionService.showSnack('Произошла ошибка во время загрузки данных, попробуй позже'),
          () => this.loading = false
        ); break;
      }
      case 'minutes': {
        this.graphService.getOnlineStatsOfMinutes(this.selectedMinute, this.selectedDays, this.selectedServer?this.selectedServer.server_id:'%').subscribe(
          (d) => this.processingData(GraphData.fromStatsOfPeakOfPerFiveMinutes(d.reverse(), "red")),
          (err) => this.actionService.showSnack('Произошла ошибка во время загрузки данных, попробуй позже'),
          () => this.loading = false
        ); break;
      }
    }
  }

  processingData(data:GraphData, reversed: boolean = true) {
    if (this.chart)
      this.chart.destroy();

    this.chart = new Chart("MyChart", {
      type: "line",
      data: {
        labels: data.labels,
        datasets: data.data
      }
    });
  }
}