soma-frontend/src/app/components/tests/tests.component.ts

import { Component, OnInit, ViewChild,OnChanges } from '@angular/core';
import { Chart, ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Label, BaseChartDirective } from 'ng2-charts';

import { MeasuresService } from 'src/app/services/measures.service';
import { PlantsService } from 'src/app/services/plants.service';
import { LogsService } from 'src/app/services/logs.service';

import { OrganizationsService } from '@app/services/organizations.service';

import { ActivatedRoute } from '@angular/router';
import { Observable, forkJoin } from 'rxjs';


import * as moment from 'moment';

import Swal from 'sweetalert2';
import { environment } from '@environments/environment';
import { HttpClient } from '@angular/common/http';
import { formatDate } from '@angular/common';

import {AngularMyDatePickerDirective,IAngularMyDpOptions, IMyDateModel} from 'angular-mydatepicker';



@Component({
  selector: 'app-tests',
  templateUrl: './tests.component.html',
  styleUrls: ['./tests.component.scss']
})


export class TestsComponent implements OnInit {
 
  title = "Plantas";

  organizationId:string;
  listAssets:any;
  listEnergyProduced:any;
  error:boolean;
  errorMessage:string;
  errortest:any;
  chartjs:boolean;
  chart1: Chart;
  metersKeys:any;
  metersValues:any;
  view:string;


  //For daterange
  daysLabels:any = {su: 'Dom', mo: 'Lun', tu: 'Mar', we: 'Mie', th: 'Jue', fr: 'Vie', sa: 'Sab'};
  monthsLabels:any = { 1: 'Ene', 2: 'Feb', 3: 'Mar', 4: 'Abr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Ago', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dic' };
  todayBtnTxt:string = 'Hoy';
  
  myDpOptions: IAngularMyDpOptions = {
    dateRange: false,
    dateFormat: 'dd/mm/yyyy',
    dayLabels: this.daysLabels,
    monthLabels: this.monthsLabels,
    // other options are here...
  };

  myDateInit: boolean = true;
  model: IMyDateModel = null;

  // For chartjs
  tsLabels: any[];
  barChartColors:any = ['#3c8dbc', '#00a65a', '#f56954']
  metersData:any;
  initialDate:any;


  public barChartType: ChartType;
  public barChartLegend:boolean;
  public barChartLabels: Label[];
  public barChartOptions: ChartOptions;
  public barChartData: ChartDataSets[];

  isActive:[boolean,boolean,boolean,boolean]; //Activated param (chart)

  constructor(
    private orgService: OrganizationsService, 
    private route: ActivatedRoute, 
    private plantsService: PlantsService,
    private http: HttpClient,
    private logsService: LogsService,
    private measService: MeasuresService) {
      
      Swal.fire({
        allowOutsideClick: false,
        type: 'info',
        text: 'Espere por favor...'
      });
      Swal.showLoading();
      
  }

  @ViewChild("baseChart",null) chart: BaseChartDirective;

  ngOnInit() {
    
    let plants = this.plantsService.getAllAssets();

    let energy_produced = this.plantsService.getAssetsProducedEnergy();

    // Default date is today and set it on a string var and initialize dateRange plugin
    this.initialDate = new Date().toISOString().slice(0, 10);
    if (this.myDateInit) {
      let begin: Date = new Date();
      this.model = {
        isRange: false, 
        singleDate: {
          date: {
            year: begin.getFullYear(), month: begin.getMonth() + 1, day: begin.getDate()
          }
        }
      };
    }
    
    // Observable of two objects
    forkJoin([plants, energy_produced]).subscribe(results => {
      console.log(results[0]["data"]);
      if (localStorage.getItem("email") == "inverlec@grupomerelec.com"){
        this.listAssets = [
          {
            name: "Inversiones MERELEC S.A de C.V",
            id: '5d70330cb288f25b679c68a8'
          },
          {
            name: "Inversiones MERELEC 2 S.A de C.V",
            id: '5d70330cb288f25b679c68n8'
          },          
        ]

        this.view = "month";
        this.onMeasureClickRange(this.view, this.initialDate);

        console.log(this.listAssets[0]["id"]);
      }
      else {
        this.listAssets = results[0]["data"];
        console.log(this.listAssets[0]["id"]);
        this.view = "month";
        this.onMeasureClickRange(this.view, this.initialDate);
      }
      
      // Energy produced given an assetID
      this.listEnergyProduced = results[1];      
    },
    (err) => {
      Swal.fire({
        type: 'error',
        title: 'Error en el servidor',
        text: "No su pudo obtener la informacion"
      });
    });    

    this.chartjs = true;
    setTimeout(()=>{
      Swal.close();
    }, 2700);
 
  }
 
  // Default check asset dropdown if a value is equal to an assetID
  isSelected(){
    if(this.organizationId!=undefined){
      return true;
    }
    else{
      return false;
    }
  }

  // Trigger again the chart with the selected assetID
  onChangeObj(event:any) {
    this.onMeasureClickRange(this.view, this.initialDate, event.target.value);
  }

  // Change the date range of the chart, according to the selected view (daily, weekly, ...)
  onDateChanged(event: IMyDateModel) {
    let endDate = `${event.singleDate.date.year}-${event.singleDate.date.month}-${event.singleDate.date.day}`;
    switch (this.view)
    { 
      case "day": 
        this.onMeasureClickRange(this.view, endDate);
        break; 
      case "week": 
        this.onMeasureClickRange(this.view, endDate);
        break; 
      case "month": 
        this.onMeasureClickRange(this.view, endDate);
        break; 
      case "year":
        this.onMeasureClickRange(this.view, endDate);
        break;
      default: 
        console.log("nada");
    } 
  }

  // Draw a measure chart using chartjs, given some params, view, for daily, weekly, monthly or yearly measures;
  // measureDate, for a date range given a view and a paramID, for an specific assetID selected in the dropdown  
  onMeasureClickRange(view:string, measureDate?:string, paramId?:string): void {
    Swal.fire({
      allowOutsideClick: false,
      type: 'info',
      text: 'Espere por favor...'
    });
    Swal.showLoading();
    this.view = view;

    // Chart (re)initialize, to prevent double load on changing range or views
    if (this.chart1 != undefined){
      this.chart1.destroy();
    }
    this.chart1 = undefined;
    
    let dateRange:string;
    if (measureDate === undefined){
      dateRange = this.initialDate;
    }
    else {
      dateRange = measureDate;
    }

    // Set default assetID if paramId doesn't come in the function call
    let assetId:string;
    if (paramId === undefined){
      assetId = this.listAssets[0]["id"]; // Grab the first object
    }
    else {
      assetId = paramId;
    }
    
    // Select an interval according to the API permitted param
    let interval:string;
    switch (view)
    { 
      case "day": 
        interval = "1D";
        this.isActive = [true, false, false, false];
        break; 
      case "week": 
        interval = "7D";
        this.isActive = [false, true, false, false];
        break; 
      case "month":
        interval = "1M";
        this.isActive = [false, false, true, false];
        break; 
      case "mtd": //TO DO
        interval = "MTD";
        break;
      case "year":
        interval = "YTD";
        this.isActive = [false, false, false, true];
        break;
      default: 
        console.log("nada");
    }  

    this.logsService.getEnergyProducedByParams(assetId,interval,dateRange).toPromise()
    .then((data: any) => {
      this.metersData = [];
      
      this.metersKeys = Object.keys(data["data"][0]["dataset"]);

      // Get all the values according to each index (meter) 
      this.metersValues = Object.values(data["data"][0]["dataset"]);

      let meterKeys2 = Object.keys(this.metersValues);

      for (let prop in meterKeys2) { 
        let label = localStorage.getItem("email") == "inverlec@grupomerelec.com" ? `INVERLEC ${prop}` : this.metersValues[prop]["label"];
        //let keys = Object.keys();
        let test = Object.values(this.metersValues[prop]["data"].map(obj => obj.total_energy_kWh).reverse())

        this.metersData.push({"label": label, backgroundColor: this.barChartColors[prop], data: test });
        this.barChartLabels = this.metersValues[prop]["data"].map(obj => formatDate(obj.dateMax, 'dd/MM','es-Es','-0600')).reverse();
      }

      this.chart1 = new Chart('canvas', {
        type: 'bar',
        options: {
          title: {
            display: true,
          },
          tooltips: {
            mode: 'index',
            callbacks: {
              // Get the total of the energy produced in every point and show it in the hover tooltip
              label: function (tooltipItem, data) { 
                var label = data.datasets[tooltipItem.datasetIndex].label || '';
                var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                var total = 0;

                for (var i = 0; i < data.datasets.length; i++)
                  total += +data.datasets[i].data[tooltipItem.index];

                if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
                  return label + " : " + value;
                }
                else {
                  return [label + " : " + value, "TOTAL : " + Math.round(total)];
                }
              }
            }         
          },
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            xAxes: [{
              stacked: true,
            }],
            yAxes: [{
              stacked: true
            }]
          }
        },
        data: {
          labels: this.barChartLabels,
          datasets: this.metersData,
        }, 
      });
      this.chartjs = true;
    });

    setTimeout(()=>{
      Swal.close();
    }, 1200)

  }

}