Modificación Vista "Tarifas"

db.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

src/app/app.module.ts

@@ -1,42 +1,42 @@
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
-import { NgModule } from "@angular/core";
-import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
-import { registerLocaleData, DatePipe } from "@angular/common";
-import { RouterModule } from "@angular/router";
+import { NgModule, LOCALE_ID } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { registerLocaleData, DatePipe } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 // Internationalization i18n
-import localeEs from "@angular/common/locales/es";
-import localeEsExtra from "@angular/common/locales/extra/es";
-registerLocaleData(localeEs, "es-Es", localeEsExtra);
+import localeSv from '@angular/common/locales/es-SV';
+import localeEsExtra from '@angular/common/locales/extra/es';
+registerLocaleData(localeSv, 'es-SV', localeEsExtra);
 
 // used to create fake backend
 //import { fakeBackendProvider } from './helpers';
 //import { JwtInterceptor, ErrorInterceptor } from './helpers';
 
-import { AppRoutingModule } from "./app.routing";
-import { AppComponent } from "./app.component";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
-import { ChartsModule } from "ng2-charts";
-import { SharedModule } from "./components/shared/shared.module";
+import { AppRoutingModule } from './app.routing';
+import { AppComponent } from './app.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ChartsModule } from 'ng2-charts';
+import { SharedModule } from './components/shared/shared.module';
 
-import { AdminComponent } from "./layouts/admin/admin.component";
+import { AdminComponent } from './layouts/admin/admin.component';
 
-import { NgxDatatableModule } from "@swimlane/ngx-datatable";
-import { MatSelectModule } from "@angular/material/select";
-import { AngularMyDatePickerModule } from "angular-mydatepicker";
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { MatSelectModule } from '@angular/material/select';
+import { AngularMyDatePickerModule } from 'angular-mydatepicker';
 
-import { PluginsModule } from "./components/plugins/plugins.module";
-import { LoginComponent } from "./components/login/login.component";
+import { PluginsModule } from './components/plugins/plugins.module';
+import { LoginComponent } from './components/login/login.component';
 
-import { TokenInterceptor } from "@app/services/token.interceptor";
-import { ConfirmAccountComponent } from "./components/confirm-account/confirm-account.component";
-import { MatPasswordStrengthModule } from "@angular-material-extensions/password-strength";
-import { LostAccountComponent } from "@app/components/lost-account/lost-account.component";
-import { NewAccountComponent } from "@app/components/new-account/new-account.component";
-import { NewPasswordComponent } from "./components/new-password/new-password.component";
+import { TokenInterceptor } from '@app/services/token.interceptor';
+import { ConfirmAccountComponent } from './components/confirm-account/confirm-account.component';
+import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
+import { LostAccountComponent } from '@app/components/lost-account/lost-account.component';
+import { NewAccountComponent } from '@app/components/new-account/new-account.component';
+import { NewPasswordComponent } from './components/new-password/new-password.component';
 
 @NgModule({
   declarations: [
@@ -67,6 +67,7 @@ import { NewPasswordComponent } from "./components/new-password/new-password.com
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
+    { provide: LOCALE_ID, useValue: 'es-SV' },
     [DatePipe],
 
     //{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
@@ -76,4 +77,4 @@ import { NewPasswordComponent } from "./components/new-password/new-password.com
   ],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule { }

src/app/components/assets/assets.component.ts

@@ -581,7 +581,7 @@ export class AssetsComponent implements OnInit {
                   .replace(/-/g, "/")
                   .replace("T", " "),
                 "dd/MM/yyyy",
-                "es-Es",
+                "es-SV",
                 "-0600"
               ) || "N/D";
             this.totalCertificatesValue = res["data"]["valor_total"];
@@ -696,7 +696,7 @@ export class AssetsComponent implements OnInit {
                     formatDate(
                       obj.dateMin.replace(/-/g, "/").replace("T", " "),
                       "HH:mm ",
-                      "es-Es",
+                      "es-SV",
                       "-0600"
                     )
                   )
@@ -708,7 +708,7 @@ export class AssetsComponent implements OnInit {
                     formatDate(
                       obj.dateMax.replace(/-/g, "/").replace("T", " "),
                       "EEEE dd",
-                      "es-Es",
+                      "es-SV",
                       "-0600"
                     )
                   )
@@ -720,7 +720,7 @@ export class AssetsComponent implements OnInit {
                     formatDate(
                       obj.dateMax.replace(/-/g, "/").replace("T", " "),
                       "MM/yyyy",
-                      "es-Es",
+                      "es-SV",
                       "-0600"
                     )
                   )
@@ -732,7 +732,7 @@ export class AssetsComponent implements OnInit {
                     formatDate(
                       obj.dateMax.replace(/-/g, "/").replace("T", " "),
                       "dd/MM",
-                      "es-Es",
+                      "es-SV",
                       "-0600"
                     )
                   )
@@ -783,7 +783,7 @@ export class AssetsComponent implements OnInit {
                       data.datasets[tooltipItem.datasetIndex].label || "";
                     var value =
                       data.datasets[tooltipItem.datasetIndex].data[
-                        tooltipItem.index
+                      tooltipItem.index
                       ];
                     var total = 0;
 
@@ -932,7 +932,7 @@ export class AssetsComponent implements OnInit {
         dateT = formatDate(
           date.replace(/-/g, "/").replace("T", " "),
           "HH:mm",
-          "es-Es",
+          "es-SV",
           "-0600"
         );
         break;
@@ -940,7 +940,7 @@ export class AssetsComponent implements OnInit {
         dateT = formatDate(
           date.replace(/-/g, "/").replace("T", " "),
           "EEEE dd",
-          "es-Es",
+          "es-SV",
           "-0600"
         );
         break;
@@ -948,7 +948,7 @@ export class AssetsComponent implements OnInit {
         dateT = formatDate(
           date.replace(/-/g, "/").replace("T", " "),
           "MM/yyyy",
-          "es-Es",
+          "es-SV",
           "-0600"
         );
         break;
@@ -956,7 +956,7 @@ export class AssetsComponent implements OnInit {
         dateT = formatDate(
           date.replace(/-/g, "/").replace("T", " "),
           "dd/MM",
-          "es-Es",
+          "es-SV",
           "-0600"
         );
     }

src/app/components/dashboard/dashboard.component.html

@@ -35,8 +35,8 @@
                   <h3>
                     Vigencia:
                     <strong *ngIf="rates.tarifa_actual.dateMin">
-                      {{ rates.tarifa_actual.dateMin | date: "dd/MM/yyyy" }} -
-                      {{ rates.tarifa_actual.dateMax | date: "dd/MM/yyyy" }}
+                      {{ rates.tarifa_actual.dateMin | date: "dd/MMM/yyyy" }} -
+                      {{ rates.tarifa_actual.dateMax | date: "dd/MMM/yyyy" }}
                     </strong>
                   </h3>
                 </div>
@@ -51,28 +51,28 @@
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_b1">
-                  Cargo de energia por bloque 1:
+                  Bloque 1:
                   <strong>
                     {{ rates.tarifa_actual.cargo_energia_b1 | number: "1.2-4" }}
                     USD$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_b2">
-                  Cargo de energia por bloque 2:
+                  Bloque 2:
                   <strong>
                     {{ rates.tarifa_actual.cargo_energia_b2 | number: "1.2-4" }}
                     USD$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_b3">
-                  Cargo de energia por bloque 3:
+                  Bloque 3:
                   <strong>
                     {{ rates.tarifa_actual.cargo_energia_b3 | number: "1.2-4" }}
                     USD$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_punta">
-                  Cargo de energia punta:
+                  Punta:
                   <strong>
                     {{
                       rates.tarifa_actual.cargo_energia_punta | number: "1.2-4"
@@ -81,7 +81,7 @@
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_resto">
-                  Cargo de energia resto:
+                  Resto:
                   <strong>
                     {{
                       rates.tarifa_actual.cargo_energia_resto | number: "1.2-4"
@@ -90,7 +90,7 @@
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_valle">
-                  Cargo de energia valle:
+                  Valle:
                   <strong>
                     {{
                       rates.tarifa_actual.cargo_energia_valle | number: "1.2-4"

src/app/components/plugins/icon-card/icon-card.component.html

@@ -0,0 +1,16 @@
+<div class="card card-stats d-flex flex-column justify-content-between">
+  <div class="card-header card-header-icon card-header-{{type}}">
+    <div class="card-icon">
+      <i class="material-icons">{{icon}}</i>
+    </div>
+    <p class="card-category">{{category}}</p>
+    <h3 class="card-title">
+      {{title}}
+    </h3>
+  </div>
+  <div class="card-footer">
+    <div class="stats">
+      {{footer}}
+    </div>
+  </div>
+</div>

src/app/components/plugins/icon-card/icon-card.component.scss

@@ -0,0 +1,3 @@
+.card {
+  min-height: 160px;
+}

src/app/components/plugins/icon-card/icon-card.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IconCardComponent } from './icon-card.component';
+
+describe('IconCardComponent', () => {
+  let component: IconCardComponent;
+  let fixture: ComponentFixture<IconCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IconCardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IconCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/plugins/icon-card/icon-card.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-card',
+  templateUrl: './icon-card.component.html',
+  styleUrls: ['./icon-card.component.scss']
+})
+export class IconCardComponent implements OnInit {
+
+  @Input() type: string;
+  @Input() category: string;
+  @Input() title: string;
+  @Input() icon: string;
+  @Input() footer: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/components/plugins/plugins.module.ts

@@ -26,6 +26,7 @@ import { WeatherCardComponent } from './weather-card/weather-card.component';
 import { BarChartComponent } from './bar-chart/bar-chart.component';
 import { PolarChartComponent } from './polar-chart/polar-chart.component';
 import { DoughnutChartComponent } from './doughnut-chart/doughnut-chart.component';
+import { IconCardComponent } from './icon-card/icon-card.component';
 
 
 /*import { BoxModule } from "angular-admin-lte";
@@ -50,6 +51,7 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
     BarChartComponent,
     PolarChartComponent,
     DoughnutChartComponent,
+    IconCardComponent,
   ],
   imports: [
     CommonModule,
@@ -74,6 +76,7 @@ export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
     WeatherCardComponent,
     BarChartComponent,
     PolarChartComponent,
+    IconCardComponent
   ]
 })
 export class PluginsModule { }

src/app/components/plugins/weather-card/weather-card.component.ts

@@ -1,10 +1,10 @@
-import {Component, EventEmitter, Input, OnDestroy, OnInit, OnChanges, Output} from '@angular/core';
-import {Router} from '@angular/router';
-import {DatePipe} from '@angular/common';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, OnChanges, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { DatePipe } from '@angular/common';
 
 import { WeatherService } from 'src/app/services/weather.service';
 import { Subscription } from 'rxjs';
-import {first} from 'rxjs/operators';
+import { first } from 'rxjs/operators';
 
 @Component({
   selector: 'app-weather-card',
@@ -27,7 +27,7 @@ export class WeatherCardComponent implements OnInit, OnChanges {
   cityAdded = false;
   icon: string;
   icon_exists: boolean;
-  pipe = new DatePipe('es-ES')
+  pipe = new DatePipe('es-SV')
   newDate = Date.now();
   currentDate = this.pipe.transform(this.newDate, 'fullDate')
   errorWeather: boolean = false;
@@ -36,7 +36,7 @@ export class WeatherCardComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-    if (this.city == undefined){
+    if (this.city == undefined) {
       this.city = "San%20Salvador,+SV";
     }
     else {
@@ -46,7 +46,7 @@ export class WeatherCardComponent implements OnInit, OnChanges {
   }
 
   ngOnChanges() {
-    if (this.city == undefined){
+    if (this.city == undefined) {
       this.city = "San%20Salvador,+SV";
     }
     else {
@@ -55,23 +55,23 @@ export class WeatherCardComponent implements OnInit, OnChanges {
     this.getWeather(this.city);
   }
 
-  getWeather(city:string){
+  getWeather(city: string) {
     this.weather.getWeather(city)
-    .pipe(first())
-    .subscribe((payload) => {
-      this.errorWeather = false;
-      this.cityName = payload.name
-      this.state = payload.weather[0].description;
-      this.temp = Math.ceil(payload.main.temp);
-      this.icon_exists = true;
-      this.icon = payload.weather[0].icon;
-    }, (err) => {
-      this.errorWeather = true;
-      this.errorMessage = err.error.message;
-      if (this.errorMessage == "city not found"){
-        this.errorMessage = "Datos del clima para el municipio de la planta no disponible.";
-      }
-    });
+      .pipe(first())
+      .subscribe((payload) => {
+        this.errorWeather = false;
+        this.cityName = payload.name
+        this.state = payload.weather[0].description;
+        this.temp = Math.ceil(payload.main.temp);
+        this.icon_exists = true;
+        this.icon = payload.weather[0].icon;
+      }, (err) => {
+        this.errorWeather = true;
+        this.errorMessage = err.error.message;
+        if (this.errorMessage == "city not found") {
+          this.errorMessage = "Datos del clima para el municipio de la planta no disponible.";
+        }
+      });
 
   }
 

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

@@ -3,91 +3,102 @@
 <div class="main-content">
   <div class="container-fluid">
     <div class="row">
+      <div class="col-lg-6 col-xl-3">
+        <app-icon-card *ngIf="tarifa" type="success" icon="apartment" category="Mi Distribuidora"
+          [title]="tarifa.distribuidora" [footer]="vigencia">
+        </app-icon-card>
+      </div>
+
+      <div *ngFor="let cargo of tarifaActual" class="col-lg-6 col-xl-3">
+        <app-icon-card type="warning" icon="monetization_on" [category]="cargo.label" [title]="cargo.value + ' $/MWh'"
+          [footer]="vigencia">
+        </app-icon-card>
+      </div>
+
+
+    </div>
+    <!-- <div class="row">
       <div class="col-lg-12">
-        <h4><b>Histórico de tarifa por distribuidora y código </b></h4>
-        <div class="card cream-skin bg-gradient-danger card-img-holder">
+        <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/time-is-money.png"
-            />
+            <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:
+                  Distribuidora: <br>
                   <strong *ngIf="rates['distribuidora']">
                     {{ rates.distribuidora }}
                   </strong>
                 </h3>
-                <h4>Tarifa actual (USD$/kWh):</h4>
+                <h4>Tarifa actual (US$/kWh):</h4>
                 <div *ngIf="rates['tarifa_actual']['cargo_energia']">
                   Cargo de energia:
                   <strong>
                     {{
-                      rates["tarifa_actual"]["cargo_energia"] | number: "1.2-4"
+                      rates["tarifa_actual"]["cargo_energia"] | number: "1.6"
                     }}
-                    USD$/kWh
+                    US$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_b1">
-                  Cargo de energia por bloque 1:
+                  Bloque 1:
                   <strong>
-                    {{ rates.tarifa_actual.cargo_energia_b1 | number: "1.2-4" }}
-                    USD$/kWh
+                    {{ rates.tarifa_actual.cargo_energia_b1 | number: "1.6" }}
+                    US$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_b2">
-                  Cargo de energia por bloque 2:
+                  Bloque 2:
                   <strong>
-                    {{ rates.tarifa_actual.cargo_energia_b2 | number: "1.2-4" }}
-                    USD$/kWh
+                    {{ rates.tarifa_actual.cargo_energia_b2 | number: "1.6" }}
+                    US$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_b3">
-                  Cargo de energia por bloque 3:
+                  Bloque 3:
                   <strong>
-                    {{ rates.tarifa_actual.cargo_energia_b3 | number: "1.2-4" }}
-                    USD$/kWh
+                    {{ rates.tarifa_actual.cargo_energia_b3 | number: "1.6" }}
+                    US$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_punta">
-                  Cargo de energia punta:
+                  Punta:
                   <strong>
                     {{
-                      rates.tarifa_actual.cargo_energia_punta | number: "1.2-4"
+                      rates.tarifa_actual.cargo_energia_punta | number: "1.6"
                     }}
-                    USD$/kWh
+                    US$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_resto">
-                  Cargo de energia resto:
+                  Resto:
                   <strong>
                     {{
-                      rates.tarifa_actual.cargo_energia_resto | number: "1.2-4"
+                      rates.tarifa_actual.cargo_energia_resto | number: "1.6"
                     }}
-                    USD$/kWh
+                    US$/kWh
                   </strong>
                 </div>
                 <div *ngIf="rates.tarifa_actual.cargo_energia_valle">
-                  Cargo de energia valle:
+                  Valle:
                   <strong>
                     {{
-                      rates.tarifa_actual.cargo_energia_valle | number: "1.2-4"
+                      rates.tarifa_actual.cargo_energia_valle | number: "1.6"
                     }}
-                    USD$/kWh
+                    US$/kWh
                   </strong>
                 </div>
                 <br />
               </div>
               <div class="col-sm-12 col-md-6">
                 <div>
-                  <h3>
-                    Vigencia:
+                  <h3 class="mb-3">
+                    Vigencia: <br>
                     <strong *ngIf="rates.tarifa_actual.dateMin">
-                      {{ rates.tarifa_actual.dateMin | date: "dd/MM/yyyy" }} -
-                      {{ rates.tarifa_actual.dateMax | date: "dd/MM/yyyy" }}
+                      {{ rates.tarifa_actual.dateMin | date: "dd/MMM/yyyy" }} -
+                      {{ rates.tarifa_actual.dateMax | date: "dd/MMM/yyyy" }}
                     </strong>
                   </h3>
                 </div>
@@ -98,80 +109,67 @@
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia
-                        | number: "1.2-4"
+                        | number: "1.2"
                     }}%
                   </strong>
                 </div>
 
-                <div
-                  *ngIf="rates.incremento_porcentaje.cargo_energia_b1 != null"
-                >
-                  Cargo de energia por bloque 1:
+                <div *ngIf="rates.incremento_porcentaje.cargo_energia_b1 != null">
+                  Bloque 1:
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia_b1
-                        | number: "1.2-4"
+                        | number: "1.2"
                     }}%
                   </strong>
                 </div>
-                <div
-                  *ngIf="rates.incremento_porcentaje.cargo_energia_b2 != null"
-                >
-                  Cargo de energia por bloque 2:
+                <div *ngIf="rates.incremento_porcentaje.cargo_energia_b2 != null">
+                  Bloque 2:
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia_b2
-                        | number: "1.2-4"
+                        | number: "1.2"
                     }}%
                   </strong>
                 </div>
-                <div
-                  *ngIf="rates.incremento_porcentaje.cargo_energia_b3 != null"
-                >
-                  Cargo de energia por bloque 3:
+                <div *ngIf="rates.incremento_porcentaje.cargo_energia_b3 != null">
+                  Bloque 3:
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia_b3
-                        | number: "0.2-4"
+                        | number: "1.2"
                     }}%
                   </strong>
                 </div>
-                <div
-                  *ngIf="
+                <div *ngIf="
                     rates.incremento_porcentaje.cargo_energia_punta != null
-                  "
-                >
+                  ">
                   Cargo de energia punta:
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia_punta
-                        | number: "1.2-4"
-                    }}%
+                        | number: "1.2" }}%
                   </strong>
                 </div>
-                <div
-                  *ngIf="
+                <div *ngIf="
                     rates.incremento_porcentaje.cargo_energia_resto != null
-                  "
-                >
+                  ">
                   Cargo de energia resto:
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia_resto
-                        | number: "1.2-4"
+                        | number: "1.2"
                     }}%
                   </strong>
                 </div>
-                <div
-                  *ngIf="
+                <div *ngIf="
                     rates.incremento_porcentaje.cargo_energia_valle != null
-                  "
-                >
+                  ">
                   Cargo de energia valle:
                   <strong>
                     {{
                       rates.incremento_porcentaje.cargo_energia_valle
-                        | number: "1.2-4"
+                        | number: "1.2"
                     }}%
                   </strong>
                 </div>
@@ -180,35 +178,35 @@
           </div>
         </div>
       </div>
-    </div>
-    <br />
+    </div> -->
     <div class="row">
       <div class="col-lg-12">
-        <h4><b>Histórico de tarifa por distribuidora y código </b></h4>
+        <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="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>
+              <canvas baseChart *ngIf="barChartData" id="canvas" [datasets]="barChartData" [labels]="barChartLabels"
+                [options]="barChartOptions" [chartType]="barChartType"></canvas>
             </div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
-    <br />
-    <br />
-    <div class="row">
+
+    <!-- <div class="row">
       <div class="col-lg-12">
         <h4>
-          <b>Histórico de tarifas de otras distribuidoras </b>
+          <b>Histórico de Precios de la Energía de Otras distribuidoras </b>
         </h4>
 
         <div class="card border-danger">
@@ -217,31 +215,21 @@
               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
-            >
+            <a href="#!" class="btn btn-sm btn-warning pull-right">Actualizar a usuario pro</a>
           </div>
         </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 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>
@@ -251,18 +239,9 @@
         <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 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>
           </div>
         </div>

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

@@ -1,19 +1,30 @@
+@import "../../../assets/scss/core/variables";
+@import "../../../assets/scss/core/mixins";
+
 .chart-container {
   display: block;
   height: 420px;
+
   @media screen and (max-width: 960px) {
     height: 350px;
   }
+
   position: relative;
 }
 
+.card {
+  min-height: 160px;
+}
+
 .card-img-holder {
   margin-bottom: 10px;
 }
 
+
 .hidden-element {
   display: none;
 }
+
 .widget {
   background: #ffffff none repeat scroll 0 0;
   float: left;
@@ -57,12 +68,14 @@
       position: absolute;
       right: 15px;
       bottom: 15px;
+
       @media screen and (max-width: 960px) {
         height: 48px;
         width: 48px;
         line-height: 48px;
         font-size: 24px;
       }
+
       @media screen and (max-width: 800px) {
         height: 44px;
         width: 44px;
@@ -70,12 +83,14 @@
         font-size: 24px;
         right: 10px;
       }
+
       @media screen and (min-width: 960px) and (max-width: 1024px) {
         height: 48px;
         width: 48px;
         line-height: 48px;
         font-size: 24px;
       }
+
       //display: block;
     }
 
@@ -91,6 +106,7 @@
       @media screen and (max-width: 960px) {
         top: 0;
         width: 50px;
+
         i {
           font-size: 36px;
         }
@@ -100,16 +116,39 @@
     h3 {
       margin: 0;
       font-size: 1.8rem;
+
       @media screen and (max-width: 1152px) {
         font-size: 1.5rem;
       }
+
       @media screen and (min-width: 960px) and (max-width: 1024px) {
         font-size: 1.3rem;
       }
+
       @media screen and (max-width: 800px) {
         font-size: 1.4rem;
       }
+
       font-weight: 400;
     }
   }
 }
+
+.card {
+
+  .card-header-inverlec .card-icon,
+  .card-header-inverlec .card-text,
+  .card-header-inverlec:not(.card-header-icon):not(.card-header-text),
+  &.bg-inverlec,
+  &.card-rotate.bg-inverlec .front,
+  &.card-rotate.bg-inverlec .back {
+    background: linear-gradient(60deg, lighten($blue-custom, 3), $blue-custom);
+  }
+
+  .card-header-inverlec .card-icon,
+  .card-header-inverlec:not(.card-header-icon):not(.card-header-text),
+  .card-header-inverlec .card-text {
+    @include shadow-big-color($blue-custom);
+  }
+
+}

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

@@ -1,36 +1,39 @@
-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 { 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 { Rate } from "@app/models/rate";
+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 { 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 { Rate } from '@app/models/rate';
+import { stringify } from 'querystring';
+import { Tariff } from '@app/models/tariff';
+import { Cargo } from '@app/models/cargo';
 
 @Component({
-  selector: "app-rates",
-  templateUrl: "./rates.component.html",
-  styleUrls: ["./rates.component.scss"],
+  selector: 'app-rates',
+  templateUrl: './rates.component.html',
+  styleUrls: ['./rates.component.scss'],
 })
 export class RatesComponent implements OnInit {
-  title = "Tarifas";
+  title = 'Tarifas';
 
   listData: any;
   rows = [];
 
   listAssets: any;
   dataSource = new MatTableDataSource(this.listAssets);
-  displayedColumns: string[] = ["name", "country", "city", "id"];
+  displayedColumns: string[] = ['name', 'country', 'city', 'id'];
 
   error: boolean;
   listOrganizations: any;
@@ -43,8 +46,8 @@ export class RatesComponent implements OnInit {
   meterKeys2: any;
   assetKeys: any;
 
-  sumarize: number = 0;
-  totalInstalled: number = 0;
+  sumarize = 0;
+  totalInstalled = 0;
 
   totalMetersInstalled: string;
 
@@ -55,8 +58,8 @@ export class RatesComponent implements OnInit {
   totalAssetsInstalled: any;
 
   rates: Rate = {
-    distribuidora: "-",
-    codigo_tarifa: "-",
+    distribuidora: '-',
+    codigo_tarifa: '-',
     tarifa_actual: {
       dateMin: null,
       dateMax: null,
@@ -84,31 +87,31 @@ export class RatesComponent implements OnInit {
   chart1: Chart;
   chart1Type;
   barChartColors: any = [
-    "#5c90aa",
-    "#a7c1d3",
-    "#4e5151",
-    "#916458",
-    "#ee964b",
-    "#a9d0ea",
-    "#a7c957",
-    "#f2e8cf",
+    '#075d9d',
+    '#ff9800',
+    '#D1495B',
+    '#916458',
+    '#ee964b',
+    '#a9d0ea',
+    '#a7c957',
+    '#f2e8cf',
   ];
   borderChartColors: any = [
-    "#336b87",
-    "#90afc5",
-    "#2a3132",
-    "#763626",
-    "#d38d51",
-    "#a2cae4",
-    "#91b43d",
-    "#d3cbb7",
+    '#336b87',
+    '#90afc5',
+    '#2a3132',
+    '#763626',
+    '#d38d51',
+    '#a2cae4',
+    '#91b43d',
+    '#d3cbb7',
   ];
   public barChartType: ChartType;
   public barChartLegend: boolean;
   public barChartLabels: Label[];
   public barChartOptions: ChartOptions;
   public barChartData: ChartDataSets[];
-  @ViewChild("baseChart", null) chart: BaseChartDirective;
+  @ViewChild('baseChart', null) chart: BaseChartDirective;
   metersData: any[];
   metersValues: unknown[];
   distribuidoras: any;
@@ -116,6 +119,10 @@ export class RatesComponent implements OnInit {
   distribuidoraSel: any;
   tarifaSel: any;
 
+  tarifa: Tariff;
+  vigencia: string;
+  tarifaActual: Cargo[];
+
   constructor(
     private plantsService: PlantsService,
     private route: ActivatedRoute,
@@ -124,15 +131,16 @@ export class RatesComponent implements OnInit {
     private zone: NgZone,
     private authService: AuthService,
     private ratesService: RatesService,
-    private catalogService: CatalogsService
+    private catalogService: CatalogsService,
+    private datePipe: DatePipe
   ) {
     //DEMO
     this.userLevel = +this.authService.getUserLevel();
 
     Swal.fire({
       allowOutsideClick: false,
-      type: "info",
-      text: "Espere por favor...",
+      type: 'info',
+      text: 'Espere por favor...',
     });
     Swal.showLoading();
   }
@@ -142,146 +150,136 @@ export class RatesComponent implements OnInit {
       Swal.close();
     }, 3000);
 
-    this.ratesService.getDefaultRate().subscribe((res) => {
-      this.rates = res["data"];
-    });
+    this.getCurretTariff();
 
-    this.catalogService.getCatalogByName("distribuidoras").subscribe((res) => {
-      this.distribuidoras = res["data"]["catalogo"]["records"];
+    this.catalogService.getCatalogByName('distribuidoras').subscribe((res) => {
+      this.distribuidoras = res.data.catalogo.records;
     });
 
-    this.catalogService.getCatalogByName("tarifas").subscribe((res) => {
-      this.tarifas = res["data"]["catalogo"]["records"];
+    this.catalogService.getCatalogByName('tarifas').subscribe((res) => {
+      this.tarifas = res.data.catalogo.records;
+
     });
 
     this.ratesService.getHistoricalRate().subscribe((res) => {
       this.metersData = [];
-      this.metersValues = Object.values(res["data"]["tarifas"]);
-
-      let meterKeys2 = Object.keys(this.metersValues);
-
-      let labels = [];
-      let cargo_energia = [];
-      let cargo_energia_b1 = [];
-      let cargo_energia_b2 = [];
-      let cargo_energia_b3 = [];
-      let cargo_energia_punta = [];
-      let cargo_energia_resto = [];
-      let cargo_energia_valle = [];
-
-      for (let prop in meterKeys2) {
-        labels.push(
-          `${this.metersValues[prop]["dateMin"]} - ${this.metersValues[prop]["dateMax"]}`
-        );
-        if (this.metersValues[prop]["cargo_energia"] != "") {
-          cargo_energia.push(this.metersValues[prop]["cargo_energia"]);
+      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 (this.metersValues[prop]["cargo_energia_b1"] != "") {
-          cargo_energia_b1.push(this.metersValues[prop]["cargo_energia_b1"]);
+        if (tarifa.cargo_energia_b1) {
+          cargoEnergiaB1.push(tarifa.cargo_energia_b1);
         }
-        if (this.metersValues[prop]["cargo_energia_b2"] != "") {
-          cargo_energia_b2.push(this.metersValues[prop]["cargo_energia_b2"]);
+        if (tarifa.cargo_energia_b2) {
+          cargoEnergiaB2.push(tarifa.cargo_energia_b2);
         }
-        if (this.metersValues[prop]["cargo_energia_b3"] != "") {
-          cargo_energia_b3.push(this.metersValues[prop]["cargo_energia_b3"]);
+        if (tarifa.cargo_energia_b3) {
+          cargoEnergiaB3.push(tarifa.cargo_energia_b3);
         }
-        if (this.metersValues[prop]["cargo_energia_punta"] != "") {
-          cargo_energia_punta.push(
-            this.metersValues[prop]["cargo_energia_punta"]
-          );
+        if (tarifa.cargo_energia_punta) {
+          cargoEnergiaPunta.push(tarifa.cargo_energia_punta);
         }
-        if (this.metersValues[prop]["cargo_energia_resto"] != "") {
-          cargo_energia_resto.push(
-            this.metersValues[prop]["cargo_energia_resto"]
-          );
+        if (tarifa.cargo_energia_resto) {
+          cargoEnergiaResto.push(tarifa.cargo_energia_resto);
         }
-        if (this.metersValues[prop]["cargo_energia_valle"] != "") {
-          cargo_energia_valle.push(
-            this.metersValues[prop]["cargo_energia_valle"]
-          );
+        if (tarifa.cargo_energia_valle) {
+          cargoEnergiaValle.push(tarifa.cargo_energia_valle);
         }
-      }
-      this.barChartType = "line";
+      });
+
+      this.barChartType = 'bar';
+
+      // Process Chart labels
+      labels.forEach((date, index, arr) => {
+        arr[index] = this.datePipe.transform(new Date(date), 'dd/MMM/yy', '+0000');
+      });
+
       this.barChartLabels = labels;
 
-      if (cargo_energia.length > 0) {
+
+      if (cargoEnergia.length > 0) {
         this.metersData.push({
-          label: "Cargo energia",
-          backgroundColor: this.barChartColors[0],
-          data: cargo_energia,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[0],
+          label: 'Cargo Energía',
+          data: cargoEnergia,
+
         });
       }
-      if (cargo_energia_b1.length > 0) {
+      if (cargoEnergiaB1.length > 0) {
         this.metersData.push({
-          label: "Cargo energia bloque 1",
-          backgroundColor: this.barChartColors[1],
-          data: cargo_energia_b1,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[1],
+          label: 'Cargo Energía Bloque 1',
+          data: cargoEnergiaB1,
+
         });
       }
-      if (cargo_energia_b2.length > 0) {
+      if (cargoEnergiaB2.length > 0) {
         this.metersData.push({
-          label: "Cargo energia bloque 2",
-          backgroundColor: this.barChartColors[2],
-          data: cargo_energia_b2,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[2],
+          label: 'Cargo Energía Bloque 2',
+          data: cargoEnergiaB2,
+
         });
       }
-      if (cargo_energia_b3.length > 0) {
+      if (cargoEnergiaB3.length > 0) {
         this.metersData.push({
-          label: "Cargo energia bloque 3",
-          backgroundColor: this.barChartColors[3],
-          data: cargo_energia_b3,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[3],
+          label: 'Cargo Energía Bloque 3',
+          data: cargoEnergiaB3,
+
         });
       }
-      if (cargo_energia_punta.length > 0) {
+      if (cargoEnergiaPunta.length > 0) {
         this.metersData.push({
-          label: "Cargo energia punta",
-          backgroundColor: this.barChartColors[4],
-          data: cargo_energia_punta,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[4],
+          label: 'Cargo Energía Punta',
+          data: cargoEnergiaPunta,
+
         });
       }
-      if (cargo_energia_resto.length > 0) {
+      if (cargoEnergiaResto.length > 0) {
         this.metersData.push({
-          label: "Cargo energia resto",
-          backgroundColor: this.barChartColors[5],
-          data: cargo_energia_resto,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[5],
+          label: 'Cargo Energía Resto',
+          data: cargoEnergiaResto,
+
         });
       }
-      if (cargo_energia_valle.length > 0) {
+      if (cargoEnergiaValle.length > 0) {
         this.metersData.push({
-          label: "Cargo energia valle",
-          backgroundColor: this.barChartColors[6],
-          data: cargo_energia_valle,
-          barPercentage: 0.7,
-          borderColor: this.borderChartColors[6],
+          label: 'Cargo Energía Valle',
+          data: cargoEnergiaValle,
         });
       }
 
+      // Set colors
+      this.metersData.forEach((dataset, i) => {
+        dataset.backgroundColor = this.barChartColors[i];
+        dataset.hoverBackgroundColor = this.barChartColors[i];
+
+      });
+
       this.barChartOptions = {
         title: {
-          display: true,
+          display: false,
         },
         tooltips: {
-          mode: "index",
+          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];
+            label: (tooltipItem, data) => {
+              const label = data.datasets[tooltipItem.datasetIndex].label || '';
+              const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
 
-              return label + " : " + value;
+              return `${label} : ${Number.parseFloat(value.toString()).toPrecision(6)}`;
             },
           },
         },
@@ -296,10 +294,10 @@ export class RatesComponent implements OnInit {
           yAxes: [
             {
               stacked: false,
-              position: "left",
+              position: 'left',
               scaleLabel: {
                 display: true,
-                labelString: "Tarifa en $USD por kWh",
+                labelString: '$USD/kWh',
               },
             },
           ],
@@ -312,7 +310,7 @@ export class RatesComponent implements OnInit {
 
     var responsiveOptions: any[] = [
       [
-        "screen and (max-width: 640px)",
+        'screen and (max-width: 640px)',
         {
           seriesBarDistance: 5,
           axisX: {
@@ -323,9 +321,10 @@ export class RatesComponent implements OnInit {
         },
       ],
     ];
+
   }
 
-  ngOnChanges(): void {}
+  ngOnChanges(): void { }
 
   onChangeD(event: any) {
     this.distribuidoraSel = event.target.value;
@@ -333,4 +332,22 @@ export class RatesComponent implements OnInit {
   onChangeT(event: any) {
     this.tarifaSel = event.target.value;
   }
+
+  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);
+    });
+
+  }
+
+  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;
+  }
+
+
 }

src/app/components/shared/navbar/navbar.component.html

@@ -17,7 +17,7 @@
     <div class="collapse navbar-collapse justify-content-end" id="navigation">
       <ul class="navbar-nav">
         <li class="nav-item">
-          <a class="nav-link" [routerLink]="['/dashboard']"  title="Dashboard">
+          <a class="nav-link" [routerLink]="['/dashboard']" title="Dashboard">
             <i class="material-icons">dashboard</i>
             <p>
               <span class="d-lg-none d-md-block">Stats</span>

src/app/data/db.json

@@ -0,0 +1,83 @@
+{
+  "posts": [{
+    "id": 1,
+    "title": "json-server",
+    "author": "typicode"
+  }],
+  "comments": [{
+    "id": 1,
+    "body": "some comment",
+    "postId": 1
+  }],
+  "profile": {
+    "name": "typicode"
+  },
+  "tarifas": {
+    "distribuidora": "CAESS",
+    "codigo_tarifa": "R",
+    "tarifa_actual": {
+      "vigencia": {
+        "inicio": "2020-04-15",
+        "fin": "2020-07-14"
+      },
+      "cargos": [{
+          "label": "Energía",
+          "value": null
+        },
+        {
+          "label": "Bloque 1",
+          "value": 0.156835
+        },
+        {
+          "label": "Bloque 2",
+          "value": 0.148963
+        },
+        {
+          "label": "Bloque 3",
+          "value": 0.156986
+        },
+        {
+          "label": "Punta",
+          "value": null
+        },
+        {
+          "label": "Resto",
+          "value": null
+        },
+        {
+          "label": "Valle",
+          "value": null
+        }
+      ],
+      "incrementos": [{
+          "label": "Energía",
+          "value": null
+        },
+        {
+          "label": "Bloque 1",
+          "value": 3.0
+        },
+        {
+          "label": "Blque 2",
+          "value": 15.2
+        },
+        {
+          "label": "Bloque 3",
+          "value": 6.6
+        },
+        {
+          "label": "Punta",
+          "value": null
+        },
+        {
+          "label": "Resto",
+          "value": null
+        },
+        {
+          "label": "Valle",
+          "value": null
+        }
+      ]
+    }
+  }
+}

src/app/models/cargo.ts

@@ -0,0 +1,54 @@
+export interface Cargo {
+    label: string;
+    value: number;
+}
+
+/* labels
+
+carga_energia: "Energía"
+cargo_energia_b1: "Bloque 1"
+cargo_energia_b2: "Bloque 2"
+cargo_energia_b3: "Bloque 3"
+cargo_energia_punta: "Punta"
+cargo_energia_resto: "Resto"
+cargo_energia_valle: "Valle"
+
+tarifa = {
+    distribuidora: "CAESS",
+    codigo_tarifa: "R",
+    tarifa_actual: {
+        vigencia: {
+            inicio: "2020-04-15",
+            fin: "2020-07-14"
+        },
+        cargos : [
+            {
+                label: "Energía",
+                value: null,
+            },
+            {
+                label: "Bloque 1",
+                value: 0.1569863
+            }
+            .
+            .
+            .
+
+        ],
+        incrementos : [
+            {
+                label: "Energia",
+                value: null,
+            },
+            {
+                label: "Bloque 1",
+                value: 15.56
+            },
+            .
+            .
+            .
+        ]
+        }
+    }
+}
+*/

src/app/models/incremento.ts

@@ -0,0 +1,4 @@
+export interface Incremento {
+    label: string;
+    value: number;
+}

src/app/models/tariff.ts

@@ -0,0 +1,15 @@
+import { Cargo } from './cargo';
+import { Incremento } from './incremento';
+
+export interface Tariff {
+    distribuidora: string;
+    codigo_tarifa: string;
+    tarifa_actual: {
+        vigencia: {
+            inicio: string;
+            fin: string;
+        };
+        cargos: Cargo[];
+        incrementos: Incremento[];
+    };
+}

src/app/services/auth2.service.ts

@@ -1,23 +1,23 @@
-import { Injectable } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
-import { of, Observable, forkJoin, throwError } from "rxjs";
-import { catchError, mapTo, tap, map, mergeMap } from "rxjs/operators";
-import { Token } from "@app/models/token";
-import { environment } from "@environments/environment";
-import * as CryptoJS from "crypto-js";
-import Swal from "sweetalert2";
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { of, Observable, forkJoin, throwError } from 'rxjs';
+import { catchError, mapTo, tap, map, mergeMap, timeout } from 'rxjs/operators';
+import { Token } from '@app/models/token';
+import { environment } from '@environments/environment';
+import * as CryptoJS from 'crypto-js';
+import Swal from 'sweetalert2';
 
 @Injectable({
-  providedIn: "root",
+  providedIn: 'root',
 })
 export class AuthService {
-  private readonly JWT_TOKEN = "JWT_TOKEN";
-  private readonly REFRESH_TOKEN = "REFRESH_TOKEN";
-  private readonly USER_MENU = "USER_MENU";
-  private readonly USER_ID = "USER_ID";
+  private readonly JWT_TOKEN = 'JWT_TOKEN';
+  private readonly REFRESH_TOKEN = 'REFRESH_TOKEN';
+  private readonly USER_MENU = 'USER_MENU';
+  private readonly USER_ID = 'USER_ID';
   private loggedUser: string;
 
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
   login(user: { email: string; password: string }): Observable<boolean> {
     return this.http
@@ -33,13 +33,13 @@ export class AuthService {
     let refreshToken: string = this.getRefreshToken();
     this.http
       .post<any>(`${environment.productionApiUrl}/auth/logout`, {})
-      .subscribe((results) => {});
+      .subscribe((results) => { });
     this.http
       .post<any>(`${environment.productionApiUrl}/auth/logout2`, {})
       .subscribe((results) => {
         this.doLogoutUser();
         Swal.close();
-        window.location.href = "";
+        window.location.href = '';
       });
   }
 
@@ -49,8 +49,8 @@ export class AuthService {
 
   getUserLevel() {
     var bytes = CryptoJS.AES.decrypt(
-      localStorage.getItem("USER_MENU"),
-      "soma-inverlec-2019"
+      localStorage.getItem('USER_MENU'),
+      'soma-inverlec-2019'
     );
     var role_number = bytes.toString(CryptoJS.enc.Utf8);
     return role_number;
@@ -64,7 +64,7 @@ export class AuthService {
       })
       .pipe(
         tap((tokens: Token) => {
-          this.storeJwtToken(tokens["data"]["access_token"]);
+          this.storeJwtToken(tokens['data']['access_token']);
         }, catchError(this.errorHandl))
       );
   }
@@ -100,13 +100,13 @@ export class AuthService {
     localStorage.setItem(
       this.USER_MENU,
       CryptoJS.AES.encrypt(
-        tokens["data"]["user"].role.toString(),
-        "soma-inverlec-2019"
+        tokens['data']['user'].role.toString(),
+        'soma-inverlec-2019'
       ).toString()
     );
-    localStorage.setItem(this.JWT_TOKEN, tokens["data"]["user"].token);
-    localStorage.setItem(this.REFRESH_TOKEN, tokens["data"]["user"].refresh);
-    localStorage.setItem(this.USER_ID, tokens["data"]["user"].id);
+    localStorage.setItem(this.JWT_TOKEN, tokens['data']['user'].token);
+    localStorage.setItem(this.REFRESH_TOKEN, tokens['data']['user'].refresh);
+    localStorage.setItem(this.USER_ID, tokens['data']['user'].id);
   }
 
   removeTokens() {
@@ -116,7 +116,7 @@ export class AuthService {
   }
 
   errorHandl(error) {
-    let errorMessage = "";
+    let errorMessage = '';
     if (error.error) {
       // Get client-side error
       errorMessage = error.error;

src/app/services/rates.service.ts

@@ -4,19 +4,20 @@ import { HttpClient, HttpHeaders } from "@angular/common/http";
 import { retry, catchError, map, timeout } from "rxjs/operators";
 
 import { environment } from "@environments/environment";
+import { Tariff } from '@app/models/tariff';
 
 @Injectable({
   providedIn: "root",
 })
 export class RatesService {
-  constructor(private http: HttpClient) {}
+  constructor(private http: HttpClient) { }
 
-  getDefaultRate() {
+  getDefaultRate(): Observable<any> {
     return this.http.get<any>(`${environment.productionApiUrl}/tarifa`).pipe(
       timeout(5000),
-      map((response) => {
-        return response;
-      }),
+      // map((response) => {
+      //   return response;
+      // }),
       catchError(this.errorHandl)
     );
   }

src/assets/scss/material-dashboard.scss

@@ -44,6 +44,11 @@
 @import "core/tables";
 @import "core/misc";
 
+@import "core/cards";
+@import "core/cards/card-stats";
+@import "core/cards/card-profile";
+@import "core/cards/card-plain";
+
 //plugin scss
 @import "core/plugins/animate";
 @import "core/plugins/chartist";
@@ -83,6 +88,12 @@
   border-color: #104911 !important;
 }
 
+.blue-skin {
+  background-color: #075d9d;
+  border-color: darken(#075d9d, 1);
+  color: #fff;
+}
+
 .widget {
   background-color: #fff;
 }
@@ -104,11 +115,13 @@
 .floating-title {
   font-size: 1.2rem;
   margin: 21px 65px 10px;
+
   @media screen and (max-width: 960px) {
     margin: 21px 20px 10px;
   }
 }
 
+/*
 .card-icon {
   border-radius: 3px;
   background-color: #999;
@@ -121,6 +134,7 @@
   line-height: 40px;
   text-align: center;
 }
+*/
 
 .breadcrumb {
   background-color: #fff;