Facti13.Frontend.Angular/src/app/pages/internal-components/doxing.graph.component.ts

import {AbstractPerperiodGraphComponent} from "./abstract.perperiod.graph.component";
import {Component, Input} from "@angular/core";
import {ServerService} from "../../services/server.service";
import {GraphService} from "../../services/graph.service";
import {MatSnackBar} from "@angular/material/snack-bar";

@Component({
  selector: 'app-doxing-graph',
  template: `
    <div>
      <mat-radio-group
        style="display: flex; justify-content: center;flex-direction: row;"
        [(ngModel)]="settingsOfChart.period"
        [disabled]="settingsOfChart.loading"
        (ngModelChange)="updateDoxingGraph()">
        <mat-radio-button style="padding-right: 1%; padding-left: 1%" value="day">За месяц</mat-radio-button>
        <mat-radio-button style="padding-right: 1%; padding-left: 1%" value="month">За год</mat-radio-button>
        <mat-radio-button style="padding-right: 1%; padding-left: 1%" value="year">За 10 лет</mat-radio-button>
      </mat-radio-group>
    </div>
    <div class="chart-container">
      <canvas id="doxingCanvasChart" >{{ settingsOfChart.chart }}</canvas>
    </div>`
})
export class DoxingGraphComponent extends AbstractPerperiodGraphComponent {

  @Input("steam64")
  steam64: string|null = null;

  constructor(protected override serverService: ServerService,
              private graphService: GraphService,
              private snack: MatSnackBar) {
    super(serverService);
  }

  doxingTabChanged(event: any, tabIndex: number): boolean {
    if (event.index == tabIndex) {
      this.updateDoxingGraph();
    }
    return true;
  }

  updateDoxingGraph() {
    if (this.steam64) {
      if (this.settingsOfChart.loading) return;
      this.settingsOfChart.loading = true;
      this.graphService.getDoxingOnPeriod(this.getSearchFilter(this.steam64)).subscribe(
        (objs) => {
          this.updateGraph(objs, "doxingCanvasChart",
            (items: any) => "",
            "fff",
            -1,
            'countryAndCity')
        }, (err) => {
          this.settingsOfChart.loading = false;
          this.snack.open("Ошибка загрузка данных");
        }
      )
    } else
      this.snack.open("Используется только в профиле")
  }
}