SFM-Broker/src/app/reward-overview/reward-overview.component.ts

import { Component, OnInit } from '@angular/core';
import {RewardVsIncomeModel} from '../models/reward-vs-incom.model';
import {SeriesLabels} from '@progress/kendo-angular-charts';
import {AuthService} from '../service/auth.service';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-reward-overview',
  templateUrl: './reward-overview.component.html',
  styleUrls: ['./reward-overview.component.scss']
})
export class RewardOverviewComponent implements OnInit {
  public rvi: RewardVsIncomeModel = new RewardVsIncomeModel();
  public seriesLabels: SeriesLabels = {
    visible: true, // Note that visible defaults to false
    padding: 3,
    font: 'bold 9px Arial, sans-serif',
    format: 'c0'
  };

  constructor(private auth: AuthService, private http: HttpClient) { }

  ngOnInit(): void {
    this.loadInitialRewardOverviewChart();
  }

  public loadInitialRewardOverviewChart(): void{
    this.http.get<RewardVsIncomeModel>(this.auth.getUrl('chart/reward-vs-income-monthly')).subscribe(
      resp => {
        this.rvi.Categories = resp.Categories;
        this.rvi.Data[2] = [];
        for (let i = 0; i < 12; i++){
          this.rvi.Data[0] = resp.Data[0];
          this.rvi.Data[1] = resp.Data[1];
          this.rvi.Data[2][i] = this.rvi.Data[1][i] - this.rvi.Data[0][i];
        }
      }
    );
  }


}