|
|
@@ -1,25 +1,17 @@
|
|
|
-import { ActivatedRoute, Router } from '@angular/router';
|
|
|
-import { Component, OnInit, NgZone, ViewChild } from '@angular/core';
|
|
|
-import { Chart, ChartOptions, ChartType, ChartDataSets } from 'chart.js';
|
|
|
-import { Label, BaseChartDirective } from 'ng2-charts';
|
|
|
-import { PlantsService } from 'src/app/services/plants.service';
|
|
|
-import { OrganizationsService } from 'src/app/services/organizations.service';
|
|
|
-
|
|
|
-import { MatPaginator } from '@angular/material/paginator';
|
|
|
-import { MatSort } from '@angular/material/sort';
|
|
|
+import { DatePipe } from '@angular/common';
|
|
|
+import { Component, OnInit, ViewChild } from '@angular/core';
|
|
|
import { MatTableDataSource } from '@angular/material/table';
|
|
|
-import { AuthService } from '@app/services/auth2.service';
|
|
|
-import { formatDate, DatePipe } from '@angular/common';
|
|
|
-
|
|
|
-import * as moment from 'moment';
|
|
|
-import Swal from 'sweetalert2';
|
|
|
-import { RatesService } from '@app/services/rates.service';
|
|
|
-import { CatalogsService } from '@app/services/catalogs.service';
|
|
|
+import { Cargo } from '@app/models/cargo';
|
|
|
import { Rate } from '@app/models/rate';
|
|
|
-import { stringify } from 'querystring';
|
|
|
import { Tariff } from '@app/models/tariff';
|
|
|
-import { Cargo } from '@app/models/cargo';
|
|
|
-import { switchAll } from 'rxjs/operators';
|
|
|
+import { AuthService } from '@app/services/auth2.service';
|
|
|
+import { CatalogsService } from '@app/services/catalogs.service';
|
|
|
+import { RatesService } from '@app/services/rates.service';
|
|
|
+import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
|
|
|
+import { BaseChartDirective, Label } from 'ng2-charts';
|
|
|
+import Swal from 'sweetalert2';
|
|
|
+
|
|
|
+
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-rates',
|
|
|
@@ -113,7 +105,7 @@ export class RatesComponent implements OnInit {
|
|
|
public barChartOptions: ChartOptions;
|
|
|
public barChartData: ChartDataSets[];
|
|
|
@ViewChild('baseChart', null) chart: BaseChartDirective;
|
|
|
- metersData: any[];
|
|
|
+ metersData: any[] = [];
|
|
|
metersValues: unknown[];
|
|
|
distribuidoras: any;
|
|
|
tarifas: any;
|
|
|
@@ -123,13 +115,18 @@ export class RatesComponent implements OnInit {
|
|
|
tarifa: Tariff;
|
|
|
vigencia: string;
|
|
|
tarifaActual: Cargo[];
|
|
|
+ distribuidora: string;
|
|
|
+ codTarifa: string;
|
|
|
+ nombreTarifa: string;
|
|
|
+ userTarifa: string;
|
|
|
+ userDistribuidora: string;
|
|
|
|
|
|
constructor(
|
|
|
- private plantsService: PlantsService,
|
|
|
- private route: ActivatedRoute,
|
|
|
- private orgService: OrganizationsService,
|
|
|
- private router: Router,
|
|
|
- private zone: NgZone,
|
|
|
+ // private plantsService: PlantsService,
|
|
|
+ // private route: ActivatedRoute,
|
|
|
+ // private orgService: OrganizationsService,
|
|
|
+ // private router: Router,
|
|
|
+ // private zone: NgZone,
|
|
|
private authService: AuthService,
|
|
|
private ratesService: RatesService,
|
|
|
private catalogService: CatalogsService,
|
|
|
@@ -158,199 +155,202 @@ export class RatesComponent implements OnInit {
|
|
|
|
|
|
this.catalogService.getCatalogByName('tarifas').subscribe((res) => {
|
|
|
this.tarifas = res.data.catalogo.records;
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ onChangeD(event: any) {
|
|
|
+ this.barChartData = null;
|
|
|
+ this.getHistoricalTariff(this.distribuidora, this.codTarifa);
|
|
|
+ }
|
|
|
+ onChangeT(event: any) {
|
|
|
+ this.barChartData = null;
|
|
|
+ this.getHistoricalTariff(this.distribuidora, this.codTarifa);
|
|
|
+ }
|
|
|
|
|
|
+ restoreChart(): void {
|
|
|
+ this.barChartData = null;
|
|
|
+ this.distribuidora = this.userDistribuidora;
|
|
|
+ this.codTarifa = this.userTarifa;
|
|
|
+ this.getHistoricalTariff(this.distribuidora, this.codTarifa);
|
|
|
+ }
|
|
|
+
|
|
|
+ getCurretTariff(): void {
|
|
|
+ this.ratesService.getDefaultRate().subscribe(tarifa => {
|
|
|
+
|
|
|
+ this.tarifa = tarifa.data;
|
|
|
+
|
|
|
+ this.tarifaActual = this.tarifa.tarifa_actual.cargos.filter(cargo => cargo.value !== '');
|
|
|
+ this.vigencia = this.getTariffPeriod(this.tarifa);
|
|
|
+ this.userDistribuidora = this.tarifa.distribuidora;
|
|
|
+ this.distribuidora = this.userDistribuidora;
|
|
|
+ this.userTarifa = this.tarifa.cod_tarifa;
|
|
|
+ this.codTarifa = this.userTarifa;
|
|
|
+ this.getHistoricalTariff(this.userDistribuidora, this.userTarifa);
|
|
|
+ Swal.close();
|
|
|
});
|
|
|
|
|
|
- this.ratesService.getHistoricalRate().subscribe((res) => {
|
|
|
- this.metersData = [];
|
|
|
- this.metersValues = Object.values(res.data.tarifas);
|
|
|
- const meterKeys2 = Object.keys(this.metersValues);
|
|
|
-
|
|
|
- const labels = [];
|
|
|
- const cargoEnergia = [];
|
|
|
- const cargoEnergiaB1 = [];
|
|
|
- const cargoEnergiaB2 = [];
|
|
|
- const cargoEnergiaB3 = [];
|
|
|
- const cargoEnergiaPunta = [];
|
|
|
- const cargoEnergiaResto = [];
|
|
|
- const cargoEnergiaValle = [];
|
|
|
-
|
|
|
-
|
|
|
- res.data.tarifas.forEach(tarifa => {
|
|
|
- labels.push(`${tarifa.dateMin}`);
|
|
|
- if (tarifa.cargo_energia) {
|
|
|
- cargoEnergia.push(tarifa.cargo_energia);
|
|
|
- }
|
|
|
- if (tarifa.cargo_energia_b1) {
|
|
|
- cargoEnergiaB1.push(tarifa.cargo_energia_b1);
|
|
|
- }
|
|
|
- if (tarifa.cargo_energia_b2) {
|
|
|
- cargoEnergiaB2.push(tarifa.cargo_energia_b2);
|
|
|
- }
|
|
|
- if (tarifa.cargo_energia_b3) {
|
|
|
- cargoEnergiaB3.push(tarifa.cargo_energia_b3);
|
|
|
- }
|
|
|
- if (tarifa.cargo_energia_punta) {
|
|
|
- cargoEnergiaPunta.push(tarifa.cargo_energia_punta);
|
|
|
- }
|
|
|
- if (tarifa.cargo_energia_resto) {
|
|
|
- cargoEnergiaResto.push(tarifa.cargo_energia_resto);
|
|
|
- }
|
|
|
- if (tarifa.cargo_energia_valle) {
|
|
|
- cargoEnergiaValle.push(tarifa.cargo_energia_valle);
|
|
|
- }
|
|
|
- });
|
|
|
+ }
|
|
|
|
|
|
- this.barChartType = 'bar';
|
|
|
+ getHistoricalTariff(distribuidora, codTarifa): void {
|
|
|
+ this.ratesService.getHistoricalRateBySelection(distribuidora, codTarifa).subscribe((res) => {
|
|
|
+ this.setChart(res.data.tarifas);
|
|
|
|
|
|
- // Process Chart labels
|
|
|
- labels.forEach((date, index, arr) => {
|
|
|
- arr[index] = this.datePipe.transform(new Date(date), 'dd/MMM/yy', '+0000');
|
|
|
- });
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- this.barChartLabels = labels;
|
|
|
+ getTariffPeriod(tarifa: Tariff) {
|
|
|
+ const inicio = this.datePipe.transform(new Date(tarifa.tarifa_actual.vigencia.inicio), 'dd/MMM/yy', '+0000');
|
|
|
+ const fin = this.datePipe.transform(new Date(tarifa.tarifa_actual.vigencia.fin), 'dd/MMM/yy', '+0000');
|
|
|
+ const period = `Vigencia: ${inicio} - ${fin}`;
|
|
|
+ return period;
|
|
|
+ }
|
|
|
|
|
|
+ setChart(tarifas): void {
|
|
|
+ this.barChartType = 'bar';
|
|
|
+ this.metersData = [];
|
|
|
|
|
|
- if (cargoEnergia.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía',
|
|
|
- data: cargoEnergia,
|
|
|
+ const labels = [];
|
|
|
+ const cargoEnergia = [];
|
|
|
+ const cargoEnergiaB1 = [];
|
|
|
+ const cargoEnergiaB2 = [];
|
|
|
+ const cargoEnergiaB3 = [];
|
|
|
+ const cargoEnergiaPunta = [];
|
|
|
+ const cargoEnergiaResto = [];
|
|
|
+ const cargoEnergiaValle = [];
|
|
|
|
|
|
- });
|
|
|
- }
|
|
|
- if (cargoEnergiaB1.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía Bloque 1',
|
|
|
- data: cargoEnergiaB1,
|
|
|
|
|
|
- });
|
|
|
+ tarifas.forEach(tarifa => {
|
|
|
+ labels.push(`${tarifa.dateMin}`);
|
|
|
+ if (tarifa.cargo_energia) {
|
|
|
+ cargoEnergia.push(tarifa.cargo_energia);
|
|
|
}
|
|
|
- if (cargoEnergiaB2.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía Bloque 2',
|
|
|
- data: cargoEnergiaB2,
|
|
|
-
|
|
|
- });
|
|
|
+ if (tarifa.cargo_energia_b1) {
|
|
|
+ cargoEnergiaB1.push(tarifa.cargo_energia_b1);
|
|
|
}
|
|
|
- if (cargoEnergiaB3.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía Bloque 3',
|
|
|
- data: cargoEnergiaB3,
|
|
|
-
|
|
|
- });
|
|
|
+ if (tarifa.cargo_energia_b2) {
|
|
|
+ cargoEnergiaB2.push(tarifa.cargo_energia_b2);
|
|
|
}
|
|
|
- if (cargoEnergiaPunta.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía Punta',
|
|
|
- data: cargoEnergiaPunta,
|
|
|
-
|
|
|
- });
|
|
|
+ if (tarifa.cargo_energia_b3) {
|
|
|
+ cargoEnergiaB3.push(tarifa.cargo_energia_b3);
|
|
|
}
|
|
|
- if (cargoEnergiaResto.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía Resto',
|
|
|
- data: cargoEnergiaResto,
|
|
|
-
|
|
|
- });
|
|
|
+ if (tarifa.cargo_energia_punta) {
|
|
|
+ cargoEnergiaPunta.push(tarifa.cargo_energia_punta);
|
|
|
+ }
|
|
|
+ if (tarifa.cargo_energia_resto) {
|
|
|
+ cargoEnergiaResto.push(tarifa.cargo_energia_resto);
|
|
|
}
|
|
|
- if (cargoEnergiaValle.length > 0) {
|
|
|
- this.metersData.push({
|
|
|
- label: 'Cargo Energía Valle',
|
|
|
- data: cargoEnergiaValle,
|
|
|
- });
|
|
|
+ if (tarifa.cargo_energia_valle) {
|
|
|
+ cargoEnergiaValle.push(tarifa.cargo_energia_valle);
|
|
|
}
|
|
|
+ });
|
|
|
|
|
|
- // Set colors
|
|
|
- this.metersData.forEach((dataset, i) => {
|
|
|
- dataset.backgroundColor = this.barChartColors[i];
|
|
|
- dataset.hoverBackgroundColor = this.barChartColors[i];
|
|
|
|
|
|
- });
|
|
|
+ // Process Chart labels
|
|
|
+ labels.forEach((date, index, arr) => {
|
|
|
+ arr[index] = this.datePipe.transform(new Date(date), 'dd/MMM/yy', '+0000');
|
|
|
+ });
|
|
|
|
|
|
- this.barChartOptions = {
|
|
|
- title: {
|
|
|
- display: false,
|
|
|
- },
|
|
|
- tooltips: {
|
|
|
- mode: 'index',
|
|
|
- callbacks: {
|
|
|
- // Get the total of the energy produced in every point and show it in the hover tooltip
|
|
|
- label: (tooltipItem, data) => {
|
|
|
- const label = data.datasets[tooltipItem.datasetIndex].label || '';
|
|
|
- const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
|
|
|
-
|
|
|
- return `${label} : ${Number.parseFloat(value.toString()).toPrecision(6)}`;
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- responsive: true,
|
|
|
- maintainAspectRatio: false,
|
|
|
- scales: {
|
|
|
- xAxes: [
|
|
|
- {
|
|
|
- stacked: false,
|
|
|
- },
|
|
|
- ],
|
|
|
- yAxes: [
|
|
|
- {
|
|
|
- stacked: false,
|
|
|
- position: 'left',
|
|
|
- scaleLabel: {
|
|
|
- display: true,
|
|
|
- labelString: '$USD/kWh',
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
+ this.barChartLabels = labels;
|
|
|
|
|
|
- this.barChartLegend = true;
|
|
|
- this.barChartData = this.metersData;
|
|
|
- });
|
|
|
|
|
|
- var responsiveOptions: any[] = [
|
|
|
- [
|
|
|
- 'screen and (max-width: 640px)',
|
|
|
- {
|
|
|
- seriesBarDistance: 5,
|
|
|
- axisX: {
|
|
|
- labelInterpolationFnc: function (value) {
|
|
|
- return value[0];
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
- ];
|
|
|
+ if (cargoEnergia.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía',
|
|
|
+ data: cargoEnergia,
|
|
|
|
|
|
- setTimeout(() => {
|
|
|
- Swal.close();
|
|
|
- }, 1000);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (cargoEnergiaB1.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía Bloque 1',
|
|
|
+ data: cargoEnergiaB1,
|
|
|
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (cargoEnergiaB2.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía Bloque 2',
|
|
|
+ data: cargoEnergiaB2,
|
|
|
|
|
|
- ngOnChanges(): void { }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (cargoEnergiaB3.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía Bloque 3',
|
|
|
+ data: cargoEnergiaB3,
|
|
|
|
|
|
- onChangeD(event: any) {
|
|
|
- this.distribuidoraSel = event.target.value;
|
|
|
- }
|
|
|
- onChangeT(event: any) {
|
|
|
- this.tarifaSel = event.target.value;
|
|
|
- }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (cargoEnergiaPunta.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía Punta',
|
|
|
+ data: cargoEnergiaPunta,
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (cargoEnergiaResto.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía Resto',
|
|
|
+ data: cargoEnergiaResto,
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (cargoEnergiaValle.length > 0) {
|
|
|
+ this.metersData.push({
|
|
|
+ label: 'Cargo Energía Valle',
|
|
|
+ data: cargoEnergiaValle,
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // Set colors
|
|
|
+ this.metersData.forEach((dataset, i) => {
|
|
|
+ dataset.backgroundColor = this.barChartColors[i];
|
|
|
+ dataset.hoverBackgroundColor = this.barChartColors[i];
|
|
|
|
|
|
- getCurretTariff(): void {
|
|
|
- this.ratesService.getDefaultRate().subscribe(tarifa => {
|
|
|
- this.tarifa = tarifa.data;
|
|
|
- this.tarifaActual = this.tarifa.tarifa_actual.cargos.filter(cargo => cargo.value !== '');
|
|
|
- this.vigencia = this.getTariffPeriod(this.tarifa);
|
|
|
});
|
|
|
|
|
|
- }
|
|
|
+ this.barChartOptions = {
|
|
|
+ title: {
|
|
|
+ display: false,
|
|
|
+ },
|
|
|
+ tooltips: {
|
|
|
+ mode: 'index',
|
|
|
+ callbacks: {
|
|
|
+ // Get the total of the energy produced in every point and show it in the hover tooltip
|
|
|
+ label: (tooltipItem, data) => {
|
|
|
+ const label = data.datasets[tooltipItem.datasetIndex].label || '';
|
|
|
+ const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
|
|
|
+
|
|
|
+ return `${label} : ${Number.parseFloat(value.toString()).toPrecision(6)}`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ scales: {
|
|
|
+ xAxes: [
|
|
|
+ {
|
|
|
+ stacked: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxes: [
|
|
|
+ {
|
|
|
+ stacked: false,
|
|
|
+ position: 'left',
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: '$USD/kWh',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
|
|
|
- getTariffPeriod(tarifa: Tariff) {
|
|
|
- const inicio = this.datePipe.transform(new Date(tarifa.tarifa_actual.vigencia.inicio), 'dd/MMM/yy', '+0000')
|
|
|
- const fin = this.datePipe.transform(new Date(tarifa.tarifa_actual.vigencia.fin), 'dd/MMM/yy', '+0000')
|
|
|
- const period = `Vigencia: ${inicio} - ${fin}`;
|
|
|
- return period;
|
|
|
+ this.barChartLegend = true;
|
|
|
+ this.barChartData = this.metersData;
|
|
|
}
|
|
|
|
|
|
|
