Implementar selección de distribuidora y tarifa en gráfica

src/app/components/rates/rates.component.html

@@ -14,235 +14,52 @@
           [footer]="vigencia">
         </app-icon-card>
       </div>
-
-
     </div>
-    <!-- <div class="row">
+    <div class="row">
       <div class="col-lg-12">
-        <h4><b>Precio de la Energía al Usuario Final </b></h4>
-        <div class="card blue-skin bg-gradient-danger card-img-holder">
-          <div class="card-body">
-            <img alt="circle-image" class="card-img-absolute" src="assets/img/bombilla.png" />
-
-            <div class="row no-gutters">
-              <div class="col-sm-12 col-md-6">
-                <h3 class="mb-3">
-                  Distribuidora: <br>
-                  <strong *ngIf="rates['distribuidora']">
-                    {{ rates.distribuidora }}
-                  </strong>
-                </h3>
-                <h4>Tarifa actual (US$/kWh):</h4>
-                <div *ngIf="rates['tarifa_actual']['cargo_energia']">
-                  Cargo de energia:
-                  <strong>
-                    {{
-                      rates["tarifa_actual"]["cargo_energia"] | number: "1.6"
-                    }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <div *ngIf="rates.tarifa_actual.cargo_energia_b1">
-                  Bloque 1:
-                  <strong>
-                    {{ rates.tarifa_actual.cargo_energia_b1 | number: "1.6" }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <div *ngIf="rates.tarifa_actual.cargo_energia_b2">
-                  Bloque 2:
-                  <strong>
-                    {{ rates.tarifa_actual.cargo_energia_b2 | number: "1.6" }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <div *ngIf="rates.tarifa_actual.cargo_energia_b3">
-                  Bloque 3:
-                  <strong>
-                    {{ rates.tarifa_actual.cargo_energia_b3 | number: "1.6" }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <div *ngIf="rates.tarifa_actual.cargo_energia_punta">
-                  Punta:
-                  <strong>
-                    {{
-                      rates.tarifa_actual.cargo_energia_punta | number: "1.6"
-                    }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <div *ngIf="rates.tarifa_actual.cargo_energia_resto">
-                  Resto:
-                  <strong>
-                    {{
-                      rates.tarifa_actual.cargo_energia_resto | number: "1.6"
-                    }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <div *ngIf="rates.tarifa_actual.cargo_energia_valle">
-                  Valle:
-                  <strong>
-                    {{
-                      rates.tarifa_actual.cargo_energia_valle | number: "1.6"
-                    }}
-                    US$/kWh
-                  </strong>
-                </div>
-                <br />
+        <div class="card">
+          <div class="card-header card-header-inverlec">
+            <div class="row nogutter d-flex justify-content-end">
+              <div class="col-xl-6">
+                <h4 class="card-title">Precios de la Energía</h4>
+                <p *ngIf='tarifa' class="card-category">{{distribuidora}} - {{codTarifa}}</p>
               </div>
-              <div class="col-sm-12 col-md-6">
-                <div>
-                  <h3 class="mb-3">
-                    Vigencia: <br>
-                    <strong *ngIf="rates.tarifa_actual.dateMin">
-                      {{ rates.tarifa_actual.dateMin | date: "dd/MMM/yyyy" }} -
-                      {{ rates.tarifa_actual.dateMax | date: "dd/MMM/yyyy" }}
-                    </strong>
-                  </h3>
-                </div>
-                <h4>Incremento con respecto a tarifa anterior (%)</h4>
+              <div class="col-xl-6">
+                <p class="card-category">Puedes seleccionar una distribuidora y tarifa diferente:</p>
+                <mat-select (selectionChange)="onChangeD($event)" name="sel-distribuidora" [(value)]="distribuidora">
+                  <mat-option *ngFor="let item of distribuidoras" [value]="item.codigo">
+                    {{ item.nombre }}
+                  </mat-option>
+                </mat-select>
+                <mat-select (selectionChange)="onChangeT($event)" name="sel-tarifa" [(value)]="codTarifa">
+                  <mat-option *ngFor="let item of tarifas" [value]="item.codigo">
+                    {{ item.nombre }}
+                  </mat-option>
+                </mat-select>
+                <div class="hint-wrapper">
+                  <small class="restore-chart" (click)="restoreChart()">
+                    Restaurar valores por defecto
+                    <span class="fa-stack">
+                      <i class="fa fa-circle fa-stack-2x"></i>
+                      <i class="fa fa-undo fa-stack-1x fa-inverse"></i>
+                    </span>
+                  </small>
 
-                <div *ngIf="rates.incremento_porcentaje.cargo_energia != null">
-                  Cargo de energia:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia
-                        | number: "1.2"
-                    }}%
-                  </strong>
-                </div>
 
-                <div *ngIf="rates.incremento_porcentaje.cargo_energia_b1 != null">
-                  Bloque 1:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia_b1
-                        | number: "1.2"
-                    }}%
-                  </strong>
-                </div>
-                <div *ngIf="rates.incremento_porcentaje.cargo_energia_b2 != null">
-                  Bloque 2:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia_b2
-                        | number: "1.2"
-                    }}%
-                  </strong>
-                </div>
-                <div *ngIf="rates.incremento_porcentaje.cargo_energia_b3 != null">
-                  Bloque 3:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia_b3
-                        | number: "1.2"
-                    }}%
-                  </strong>
-                </div>
-                <div *ngIf="
-                    rates.incremento_porcentaje.cargo_energia_punta != null
-                  ">
-                  Cargo de energia punta:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia_punta
-                        | number: "1.2" }}%
-                  </strong>
-                </div>
-                <div *ngIf="
-                    rates.incremento_porcentaje.cargo_energia_resto != null
-                  ">
-                  Cargo de energia resto:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia_resto
-                        | number: "1.2"
-                    }}%
-                  </strong>
-                </div>
-                <div *ngIf="
-                    rates.incremento_porcentaje.cargo_energia_valle != null
-                  ">
-                  Cargo de energia valle:
-                  <strong>
-                    {{
-                      rates.incremento_porcentaje.cargo_energia_valle
-                        | number: "1.2"
-                    }}%
-                  </strong>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-      </div>
-    </div> -->
-    <div class="row">
-      <div class="col-lg-12">
-        <div class="card">
-          <div class="card-header card-header-inverlec">
-            <h4 class="card-title">Precios de la Energía</h4>
-            <p *ngIf='tarifa' class="card-category">{{tarifa.distribuidora}}</p>
-          </div>
-          <div class="card-body chart-container">
-            <canvas baseChart *ngIf="barChartData" id="canvas" [datasets]="barChartData" [labels]="barChartLabels"
-              [options]="barChartOptions" [chartType]="barChartType"></canvas>
-          </div>
-        </div>
-
-        <!-- <div class="widget">
-          <div class="mini-stats">
-            <div class="chart-container" id="chart-wrapper">
-              <canvas baseChart *ngIf="barChartData" id="canvas" [datasets]="barChartData" [labels]="barChartLabels"
-                [options]="barChartOptions" [chartType]="barChartType"></canvas>
-            </div>
-          </div>
-        </div> -->
-      </div>
-    </div>
-
-    <!-- <div class="row">
-      <div class="col-lg-12">
-        <h4>
-          <b>Histórico de Precios de la Energía de Otras distribuidoras </b>
-        </h4>
-
-        <div class="card border-danger">
-          <div class="card-body">
-            <p>
-              Para ver las tarifas de otras distribuidoras, debes de tener una
-              cuenta PRO
-            </p>
-            <a href="#!" class="btn btn-sm btn-warning pull-right">Actualizar a usuario pro</a>
-          </div>
-        </div>
-      </div>
-    </div> -->
-    <br />
-    <div class="row">
-      <div class="col-lg-6 col-sm-6">
-        <div class="row">
-          <div class="col-lg-12 col-sm-12">
-            <label for="sel3">Distribuidora</label>
-            <select class="custom-select" (change)="onChangeD($event)" name="sel3">
-              <option *ngFor="let item of distribuidoras" [selected]="item.codigo === distribuidoraSel"
-                [value]="item.codigo">
-                {{ item.nombre }}</option>
-            </select>
-          </div>
-        </div>
-      </div>
+          <div class="card-body chart-container d-flex justify-content-center align-items-center">
+            <canvas baseChart *ngIf="barChartData; else loading" id="canvas" [datasets]="barChartData"
+              [labels]="barChartLabels" [options]="barChartOptions" [chartType]="barChartType"></canvas>
+            <ng-template #loading>
+              <div class="chart-loading">
+                <i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>
+                <span class="sr-only">Loading...</span>
+              </div>
 
-      <div class="col-lg-6 col-sm-6">
-        <div class="row">
-          <div class="col-lg-12 col-sm-12">
-            <label for="sel3">Tipo de tarifa</label>
-            <select class="custom-select" (change)="onChangeT($event)" name="sel3">
-              <option *ngFor="let item of tarifas" [selected]="item.codigo === tarifaSel" [value]="item.codigo">
-                {{ item.nombre }}</option>
-            </select>
+            </ng-template>
           </div>
         </div>
       </div>
@@ -260,7 +77,7 @@
         </div>
       </ng-template>
     </div>
-    <br />
+
   </div>
-  <br />
+
 </div>

src/app/components/rates/rates.component.scss

@@ -25,6 +25,28 @@
   display: none;
 }
 
+.mat-select-panel {
+  color: rgba(255, 255, 255, 0.62) !important;
+}
+
+::ng-deep .mat-select-value,
+::ng-deep .mat-select-arrow {
+  color: rgba(255, 255, 255, 0.62) !important;
+}
+
+.restore-chart {
+  cursor: pointer;
+
+  .fa-inverse {
+    color: #075d9d;
+  }
+}
+
+.chart-loading {
+  color: #075d9d;
+}
+
+
 .widget {
   background: #ffffff none repeat scroll 0 0;
   float: left;

src/app/components/rates/rates.component.ts

@@ -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;
   }
 
 

src/app/models/tariff.ts

@@ -3,7 +3,7 @@ import { Incremento } from './incremento';
 
 export interface Tariff {
     distribuidora: string;
-    codigo_tarifa: string;
+    cod_tarifa: string;
     tarifa_actual: {
         vigencia: {
             inicio: string;

src/app/services/rates.service.ts

@@ -1,13 +1,13 @@
-import { Injectable } from "@angular/core";
-import { of as observableOf, Observable, throwError } from "rxjs";
-import { HttpClient, HttpHeaders } from "@angular/common/http";
-import { retry, catchError, map, timeout } from "rxjs/operators";
+import { Injectable } from '@angular/core';
+import { of as observableOf, Observable, throwError } from 'rxjs';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { retry, catchError, map, timeout } from 'rxjs/operators';
 
-import { environment } from "@environments/environment";
+import { environment } from '@environments/environment';
 import { Tariff } from '@app/models/tariff';
 
 @Injectable({
-  providedIn: "root",
+  providedIn: 'root',
 })
 export class RatesService {
   constructor(private http: HttpClient) { }
@@ -60,7 +60,7 @@ export class RatesService {
   }
 
   errorHandl(error) {
-    let errorMessage = "";
+    let errorMessage = '';
     if (error.error) {
       // Get client-side error
       errorMessage = error.error;