import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { LineCap } from '@progress/kendo-angular-gauges';
import { DashboardSale, SaleSupervisor } from 'src/app/models/dashboard.model';
import { DashboardService } from 'src/app/services/dashboard.service';

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

  constructor(private readonly dashboardService: DashboardService) { }
  public gridData: SaleSupervisor[] = [];
  dataTodaySale: DashboardSale;
  public showLabels = true;
  public showTicks = true;
  public reverse = false;
  public autoCorrect = true;
  public listItems: Array<string> = ["round", "butt"];

  public startAngle = 0;
  public endAngle = 180;
  public rangeSize = 20;

  public rangeLineCap: LineCap = "round";

  public rangePlaceholderColor = "rgba(228, 228, 228, 1)";
  public ticksColor = "rgba(0, 128,0, 1)";
  public labelsColor = "rgba(0, 0, 255, 1)";

  public colors = [
    {
      to: 25,
      color: "#f31700",
    },
    {
      from: 25,
      to: 50,
      color: "#f31700", //"#37b400"
    },
    {
      from: 50,
      to: 70,
      color: "#ffc000",
    },
    {
      from: 70,
      color: "#0aac25af",
    },
  ];

  public colorsProfit = [
    {
      to: 0,
      color: "#f31700",
    },
    {
      from: 0,
      to: 20,
      color: "#f31700", //"#37b400"
    },
    {
      from: 20,
      to: 30,
      color: "#ffc000",
    },
    {
      from: 30,
      color: "#0aac25af",
    },
  ];


  ngOnInit(): void {
    this.dashboardService.getTodaySale()
      .subscribe(data => {
        this.dataTodaySale = data;
        this.gridData = this.dataTodaySale.saleSupervisor;
      });


  }

}
