chartjs integration with api

src/app/components/assets/assets.component.html

@@ -25,77 +25,79 @@
     </div>
 
   </div>
-  <br>
 
   <!-- Basic stats cards -->
   <div class="row align-container" style="padding: 0 25px;">
 
     <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
-      <div class="widget">
+      <div class="widget energy-stats">
         <div class="mini-stats ">
           <span class="sky-skin"><i class="fa fa-bolt"></i></span>
-          <p>Ultimo dia</p>
           <h3 *ngIf="listEnergyProduced">
             {{listEnergyProduced.today.total_energy_kWh}}
             <small>kW</small>
           </h3>
+          <p>Ultimo dia</p>
         </div>
       </div>
     </div>
     
     <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
-      <div class="widget">
+      <div class="widget energy-stats">
         <div class="mini-stats ">
           <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
-          <p>Ultima semana</p>
           <h3 *ngIf="listEnergyProduced">
             {{listEnergyProduced.thisWeek.total_energy_kWh/1000 | number}}
             <small>MWh</small>
           </h3>
+          <p>Ultima semana</p>
         </div>
       </div>
     </div>
     
     <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
-      <div class="widget">
+      <div class="widget energy-stats">
         <div class="mini-stats ">
           <span class="yellow-skin"><i class="fa fa-bolt"></i></span>
-          <p>Ultimos 30 días</p>
           <h3 *ngIf="listEnergyProduced">
             {{listEnergyProduced.thisMonth.total_energy_kWh/1000 | number}}
             <small>MWh</small>
           </h3>
+          <p>Ultimos 30 días</p>
         </div>
       </div>
     </div>
 
     <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
-      <div class="widget">
+      <div class="widget energy-stats">
         <div class="mini-stats ">
           <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
-          <p>Total</p>
           <h3 *ngIf="listEnergyProduced">
             {{listEnergyProduced.lifeTime.total_energy_kWh/1000 | number}}
             <small>MWh</small>
           </h3>
+          <p>Total</p>
         </div>
       </div>
     </div>
 
   </div>
-  
-  <br>
 
   <!-- Chartjs potency generation graphic -->
   <div class="row align-container">
     <div class="col-lg-12 col-md-12 col-sm-12">
       <div class="widget">
         <div class="mini-stats">
-
-          <div style="display: block" >
+          <!--
+          <div class="chart-container" style="display:none;">
             <canvas baseChart #baseChart="base-chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
               [legend]="barChartLegend" [chartType]="barChartType"></canvas>
           </div>
+          -->
+
+          <div class="chart-container" >
+            <canvas id="canvas">{{ chart1 }}</canvas>
+          </div>
 
           <p>Seleccione un rango de visualización</p>
 

src/app/components/assets/assets.component.scss

@@ -38,6 +38,9 @@ table {
   overflow: auto;
 }
 
+.energy-stats {
+  height: 122px;
+}
 
 .widget {
   background: #ffffff none repeat scroll 0 0;
@@ -55,18 +58,17 @@ table {
     background: #ffffff none repeat scroll 0 0;
     border-radius: 5px;
     float: left;
-    padding: 10px;
-    position: relative;
+    padding: 10px 15px;
     width: 100%;
+    height: inherit;
 
     p {
       color: #878888;
-      display: block;
-      font-size: 12px;
-      line-height: 20px;
+      //display: block;
+      font-size: 14px;
+      line-height: 35px;
       margin: 6px 0 0;
       text-transform: uppercase;
-      display: block;
       width: auto;
     }
 
@@ -74,19 +76,22 @@ table {
       border: 1px solid;
       border-radius: 50%;
       color: #fff;
-      float: left;
-      font-size: 25px;
-      height: 50px;
-      line-height: 50px;
-      margin-right: 5px;
+      //float: left;
+      font-size: 35px;
+      height: 60px;
+      line-height: 60px;
       text-align: center;
-      width: 50px;
-      display: block;
+      width: 60px;
+      position: absolute;
+      right: 20px;
+      bottom: 15px;
+      //display: block;
     }
 
     h3 {
-      margin: 0;
-      display: block;
+      margin: 10px 0 0;
+      font-size: 2rem;
+      font-weight: 400;
     }
 
   }
@@ -128,7 +133,11 @@ table {
   }
 }
 
-
+.chart-container {
+  display: block; 
+  height:40vh; 
+  position: relative;
+}
 
 
 

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

@@ -1,11 +1,7 @@
 import { Component, OnInit, ViewChild,OnChanges } from '@angular/core';
-import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
+import { Chart, ChartOptions, ChartType, ChartDataSets } from 'chart.js';
 import { Label, BaseChartDirective } from 'ng2-charts';
 
-import { Plant } from 'src/app/models/plant';
-import { Organization } from '@app/models/organization';
-
-
 import { MeasuresService } from 'src/app/services/measures.service';
 import { PlantsService } from 'src/app/services/plants.service';
 import { AssetsService } from 'src/app/services/assets/assets.service';
@@ -22,6 +18,10 @@ import * as moment from 'moment';
 import Swal from 'sweetalert2';
 import { environment } from '@environments/environment';
 import { HttpClient } from '@angular/common/http';
+import { formatDate } from '@angular/common';
+
+
+
 
 @Component({
   selector: 'app-assets',
@@ -39,23 +39,29 @@ export class AssetsComponent implements OnInit {
   listEnergyProduced:any;
   error:boolean;
   errorMessage:string;
-
+  test:any;
+  errortest:any;
+  chartjs:boolean;
+  chart1: Chart;
+  metersKeys:any;
+  metersValues:any;
   // For chartjs
   tsLabels: any[];
   polarLabels: any[];
   serieA: any[];
   serieB: any[];
   serieC: any[];
- 
+  barChartColors:any = ['#3c8dbc', '#00a65a', '#f56954']
+  
+  metersData:any;
+
   public barChartType: ChartType;
   public barChartLegend:boolean;
   public barChartLabels: Label[];
   public barChartOptions: ChartOptions;
   public barChartData: ChartDataSets[];
 
-  isActive:[boolean,boolean,boolean,boolean]; // Tipo de parámetro activado?
-  selectedMeasureType = 'Voltaje'; // Medidores
-
+  isActive:[boolean,boolean,boolean,boolean]; //Activated param (chart)
 
   constructor(
     private orgService: OrganizationsService, 
@@ -82,14 +88,10 @@ export class AssetsComponent implements OnInit {
     let plants = this.plantsService.getAssets();
     let energy_produced = this.plantsService.getAssetsProducedEnergy();
 
+    // Observable of two objects
     forkJoin([plants, energy_produced]).subscribe(results => {
       this.listAssets = results[0]["assets"];
       this.listEnergyProduced = results[1];   
-      //this.route.queryParams.subscribe(params => {
-        //this.organizationId = params['id'];
-        //console.log(this.organizationId); // Print the parameter to the console.
-      //});
-      Swal.close();
     },
     (err) => {
       Swal.fire({
@@ -99,26 +101,79 @@ export class AssetsComponent implements OnInit {
       });
     });
 
-    this.barChartLegend = true;
-    this.barChartOptions = {
-      responsive: true,
-      scales: {
-        xAxes: [{
-          stacked: true
-        }],
-        yAxes: [{
-          stacked: true
-        }]
-      }
-    };
-    this.isActive = [false, false, true, false];
-    this.onMeasureClickMonth();
+    setTimeout(()=>{
+      this.isActive = [false, false, true, false];
+      this.logsService.getEnergyProducedByMonth().toPromise()
+      .then((data: any) => {
+        // Get all the keys(each meter name) of the returned promise
+        this.metersKeys = Object.keys(data["1M"]);
+        
+        // Get all the values according to each index (meter) 
+        this.metersValues = Object.values(data["1M"]).map(sub => sub);
+        let meterKeys2 = Object.keys(this.metersValues);
+        
+        // Re-Initialize Json object
+        this.metersData = [];
+
+        // Json object construction for passing its values to the chartjs datasets according to its requirements
+        for (let prop in meterKeys2) { 
+          this.metersData.push({"label": this.metersKeys[prop], backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
+          this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMax, 'dd/MM','es-Es','-0600')).reverse();
+        }
+
+        // Chart draw
+        this.chart1 = new Chart('canvas', {
+          type: 'bar',
+          options: {
+            title: {
+              display: true,
+            },
+            tooltips: {
+              mode: 'index',
+              callbacks: {
+                // Get the total of the energy produced in every point and show it in the hover tooltip
+                label: function (tooltipItem, data) { 
+                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                  var total = 0;
+
+                  for (var i = 0; i < data.datasets.length; i++)
+                    total += +data.datasets[i].data[tooltipItem.index];
+
+                  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                    return label + " : " + value;
+                  }
+                  else {
+                    return [label + " : " + value, "TOTAL : " + Math.round(total)];
+                  }
+                }
+              }
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              xAxes: [{
+                stacked: true,
+              }],
+              yAxes: [{
+                stacked: true
+              }]
+            }
+          },
+          data: {
+            labels: this.barChartLabels,
+            datasets: 
+              this.metersData,
+          }, 
+        });
+        this.chartjs = true;
+      });
+      this.chartjs = true;
+      Swal.close();
+    }, 2000);
+
   }
  
-  getAllAssetData(): void {
-    console.log("i get here :P");
-  }
-
   isSelected(){
     if(this.organizationId!=undefined){
       return true;
@@ -128,295 +183,341 @@ export class AssetsComponent implements OnInit {
     }
   }
 
-
-  public onMeasureClickDay(): void {
-    this.chart.chart.destroy;
-
+  private onMeasureClickDay(): void {
+    console.log("DAY");
+    Swal.fire({
+      allowOutsideClick: false,
+      type: 'info',
+      text: 'Espere por favor...'
+    });
+    Swal.showLoading();
     this.isActive = [true, false, false, false];
-    this.chart.datasets = [
-      {
-       
-				label: 'Dataset 1',
-				data: [
-					11,
-					13,
-					8,
-					10,
-					7,
-					6,
-          9,
-          12,
-          9,
-          9,
-          5,
-          20
-				]
-			}, {
-				label: 'Dataset 2',
-				data: [
-					11,
-					22,
-					10,
-					6,
-					7,
-					3,
-          15,
-          12,
-          12,
-          14,
-          9,
-          5
-				]
-			}, {
-				label: 'Dataset 3',
-				data: [
-					8,
-					6,
-					20,
-					11,
-					20,
-					13,
-          9,
-          11,
-          13,
-          7,
-					3,
-					15
-				]
-			}
-
-      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
-      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
-      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
-    ];
-    this.tsLabels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
-    this.chart.labels = this.tsLabels;
-    this.chart.chartType  = 'line';
-    this.chart.ngOnInit();
+    this.chart1.destroy();
 
+    setTimeout(()=>{ 
+      this.logsService.getEnergyProducedByDay().toPromise()
+      .then((data: any) => {
+        // Get all the keys(each meter name) of the returned promise
+        this.metersKeys = Object.keys(data["1D"]);
+                
+        // Get all the values according to each index (meter) 
+        this.metersValues = Object.values(data["1D"]).map(sub => sub);
+        let meterKeys2 = Object.keys(this.metersValues);
+
+        // Re-Initialize Json object
+        this.metersData = [];
+
+        // Json object construction for passing its values to the chartjs datasets according to its requirements
+        for (let prop in meterKeys2) { 
+          this.metersData.push({"label": this.metersKeys[prop], backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
+          this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMin, 'hh:mm:ss','es-Es','-0600')).reverse();
+        }
+        this.chart1.destroy();
+        this.chart1 = undefined;
+        // Chart draw
+        this.chart1 = new Chart('canvas', {
+          type: 'bar',
+          options: {
+            title: {
+              display: true,
+            },
+            tooltips: {
+              mode: 'index',
+              callbacks: {
+                // Get the total of the energy produced in every point and show it in the hover tooltip
+                label: function (tooltipItem, data) { 
+                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                  var total = 0;
+
+                  for (var i = 0; i < data.datasets.length; i++)
+                    total += +data.datasets[i].data[tooltipItem.index];
+
+                  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                    return label + " : " + value;
+                  }
+                  else {
+                    return [label + " : " + value, "TOTAL : " + Math.round(total)];
+                  }
+                }
+              }
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              xAxes: [{
+                stacked: true,
+              }],
+              yAxes: [{
+                stacked: true
+              }]
+            }
+          },
+          data: {
+            labels: this.barChartLabels,
+            datasets: 
+              this.metersData,
+          }, 
+        });
+        this.chartjs = true;
+      });
+      Swal.close();
+    }, 2000);
   }
 
-  public onMeasureClickWeek(): void {
-    
-    this.chart.chart.destroy;
+  private onMeasureClickWeek(): void {
+    console.log("WEEK");
+
     Swal.fire({
       allowOutsideClick: false,
       type: 'info',
       text: 'Espere por favor...'
     });
     Swal.showLoading();
+    this.isActive = [false, true, false, false];
+    this.chart1.destroy();
 
     setTimeout(()=>{ 
-      this.isActive = [false, true, false, false];
-  
-      this.logsService.getEnergyProducedByWeek().subscribe(res => {
-        this.barChartLabels = res["7D"].map(obj => obj.dateMax).reverse();
-        this.serieA = res["7D"].map(obj => obj.total_energy_kWh).reverse();
-      
-        this.barChartData = [
-          { data: this.serieA, label: "Total", fill: false, lineTension: 0},
-        ];
-      
+      this.logsService.getEnergyProducedByWeek().toPromise()
+      .then((data: any) => {
+        // Get all the keys(each meter name) of the returned promise
+        this.metersKeys = Object.keys(data["7D"]);
+        
+        // Get all the values according to each index (meter) 
+        this.metersValues = Object.values(data["7D"]).map(sub => sub);
+        let meterKeys2 = Object.keys(this.metersValues);
+        
+        // Re-Initialize Json object
+        this.metersData = [];
+
+        // Json object construction for passing its values to the chartjs datasets according to its requirements
+        for (let prop in meterKeys2) { 
+          this.metersData.push({"label": this.metersKeys[prop], backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
+          this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMax, 'EEEE dd','es-Es','-0600')).reverse();
+        }
+        this.chart1.destroy();
+        this.chart1 = undefined;
+        // Chart draw
+        this.chart1 = new Chart('canvas', {
+          type: 'bar',
+          options: {
+            title: {
+              display: true,
+            },
+            tooltips: {
+              mode: 'index',
+              callbacks: {
+                // Get the total of the energy produced in every point and show it in the hover tooltip
+                label: function (tooltipItem, data) { 
+                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                  var total = 0;
+
+                  for (var i = 0; i < data.datasets.length; i++)
+                    total += +data.datasets[i].data[tooltipItem.index];
+
+                  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                    return label + " : " + value;
+                  }
+                  else {
+                    return [label + " : " + value, "TOTAL : " + Math.round(total)];
+                  }
+                }
+              }
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              xAxes: [{
+                stacked: true,
+              }],
+              yAxes: [{
+                stacked: true
+              }]
+            }
+          },
+          data: {
+            labels: this.barChartLabels,
+            datasets: 
+              this.metersData,
+          }, 
+        });
+        this.chartjs = true;
       });
-      
-      this.chart.chartType  = 'bar';
-      this.chart.ngOnInit();
-      
+      this.chartjs = true;
       Swal.close();
     }, 2000);
 
 
-    
-
 
-    /*
-    this.chart.chart.destroy;
-
-    this.isActive = [false, true, false, false];
+   
+  }
 
-    this.barChartData = [
-      {
-       
-				label: 'Dataset 1',
-				data: [
-					11,
-					10,
-					7,
-					9,
-          12,
-          5,
-          20
-				]
-			}, {
-				label: 'Dataset 2',
-				data: [
-					22,
-					10,
-					6,
-          12,
-          14,
-          9,
-          5
-				]
-			}, {
-				label: 'Dataset 3',
-				data: [
-					8,
-					20,
-          11,
-          13,
-          7,
-					3,
-					15
-				]
-			}
-      
+  private onMeasureClickMonth(): void {
+    Swal.fire({
+      allowOutsideClick: false,
+      type: 'info',
+      text: 'Espere por favor...'
+    });
+    Swal.showLoading();
+    this.isActive = [false, false, true, false];
+    this.chart1.destroy();
 
-      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
-      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
-      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
-    ];
+    setTimeout(()=>{ 
+      this.logsService.getEnergyProducedByMonth().toPromise()
+      .then((data: any) => {
+        // Get all the keys(each meter name) of the returned promise
+        this.metersKeys = Object.keys(data["1M"]);
+        
+        // Get all the values according to each index (meter) 
+        this.metersValues = Object.values(data["1M"]).map(sub => sub);
+        let meterKeys2 = Object.keys(this.metersValues);
+        
+        // Re-Initialize Json object
+        this.metersData = [];
+
+        // Json object construction for passing its values to the chartjs datasets according to its requirements
+        for (let prop in meterKeys2) { 
+          this.metersData.push({"label": this.metersKeys[prop], backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
+          this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMax, 'dd/MM','es-Es','-0600')).reverse();
+        }
+        this.chart1.destroy();
+        this.chart1 = undefined;
+        // Chart draw
+        this.chart1 = new Chart('canvas', {
+          type: 'bar',
+          options: {
+            title: {
+              display: true,
+            },
+            tooltips: {
+              mode: 'index',
+              callbacks: {
+                // Get the total of the energy produced in every point and show it in the hover tooltip
+                label: function (tooltipItem, data) { 
+                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                  var total = 0;
+
+                  for (var i = 0; i < data.datasets.length; i++)
+                    total += +data.datasets[i].data[tooltipItem.index];
+
+                  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                    return label + " : " + value;
+                  }
+                  else {
+                    return [label + " : " + value, "TOTAL : " + Math.round(total)];
+                  }
+                }
+              }
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              xAxes: [{
+                stacked: true,
+              }],
+              yAxes: [{
+                stacked: true
+              }]
+            }
+          },
+          data: {
+            labels: this.barChartLabels,
+            datasets: 
+              this.metersData,
+          }, 
+        });
+        this.chartjs = true;
+      });
+      this.chartjs = true;
+      Swal.close();
+    }, 2000);
 
-    this.tsLabels = ['10/09/2019', '11/09/2019', '12/09/2019', '13/09/2019', '14/09/2019', '15/09/2019', '16/09/2019']; */
-   
   }
 
-  public onMeasureClickMonth(): void {
-    
-    if (this.chart.data != undefined){
-      this.chart.chart.destroy;
-    }
+  private onMeasureYear(): void {
 
-    this.isActive = [false, false, true, false];
+    Swal.fire({
+      allowOutsideClick: false,
+      type: 'info',
+      text: 'Espere por favor...'
+    });
+    Swal.showLoading();
 
-    this.barChartData = [
-      {
-       
-				label: 'Dataset 1',
-				data: [
-					11,
-					13,
-					8,
-					10,
-					7,
-					6,
-          9,
-          12,
-          9,
-          9,
-          5,
-          20
-				]
-			}, {
-				label: 'Dataset 2',
-				data: [
-					11,
-					22,
-					10,
-					6,
-					7,
-					3,
-          15,
-          12,
-          12,
-          14,
-          9,
-          5
-				]
-			}, {
-				label: 'Dataset 3',
-				data: [
-					8,
-					6,
-					20,
-					11,
-					20,
-					13,
-          9,
-          11,
-          13,
-          7,
-					3,
-					15
-				]
-			}
-
-      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
-      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
-      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
-    ];
-    this.tsLabels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
-    this.barChartLabels = this.tsLabels;
-    this.barChartType  = 'bar';
-    //this.chart.ngOnInit();
-  }
+    this.isActive = [false, false, false, true];  
+    this.chart1.destroy();
 
-  public onMeasureYear(): void {
-    this.chart.chart.destroy;
-
-    this.isActive = [false, false, false, true];
-
-    this.barChartData = [
-      {
-       
-				label: 'Dataset 1',
-				data: [
-					11,
-					13,
-					8,
-					10,
-					7,
-					6,
-          9,
-          12,
-          9,
-          9,
-          5,
-          20
-				]
-			}, {
-				label: 'Dataset 2',
-				data: [
-					11,
-					22,
-					10,
-					6,
-					7,
-					3,
-          15,
-          12,
-          12,
-          14,
-          9,
-          5
-				]
-			}, {
-				label: 'Dataset 3',
-				data: [
-					8,
-					6,
-					20,
-					11,
-					20,
-					13,
-          9,
-          11,
-          13,
-          7,
-					3,
-					15
-				]
-			}
-
-      //{ data: this.serieA, label: this.selectedMeasureType + ' A', fill: false, lineTension: 0},
-      //{ data: this.serieB, label: this.selectedMeasureType + ' B', fill: false, lineTension: 0},
-      //{ data: this.serieC, label: this.selectedMeasureType + ' C', fill: false, lineTension: 0}
-    ];
-
-    this.tsLabels = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
-    this.barChartLabels = this.tsLabels;
-    this.barChartType  = 'bar';
-    this.chart.ngOnInit();
-  }
+    setTimeout(()=>{ 
 
+      this.http.get(`${environment.apiUrl}/logs/energyProduced/YTD`).toPromise()
+      .then((data: any) => {
+        // Get all the keys(each meter name) of the returned promise
+        this.metersKeys = Object.keys(data["YTD"]);
+
+        // Get all the values according to each index (meter) 
+        this.metersValues = Object.values(data["YTD"]).map(sub => sub);
+        let meterKeys2 = Object.keys(this.metersValues);
+        
+        // Re-Initialize Json object
+        this.metersData = [];
+
+        // Json object construction for passing its values to the chartjs datasets according to its requirements
+        for (let prop in meterKeys2) { 
+          this.metersData.push({"label": this.metersKeys[prop], backgroundColor: this.barChartColors[prop], data: this.metersValues[prop].map(obj => obj.total_energy_kWh).reverse()});
+          this.barChartLabels = this.metersValues[prop].map(obj => formatDate(obj.dateMax, 'MMM','es-Es','-0600')).reverse();
+        }
+        this.chart1.destroy();
+        this.chart1 = undefined;
+        // Chart draw
+        this.chart1 = new Chart('canvas', {
+          type: 'bar',
+          options: {
+            title: {
+              display: true,
+            },
+            tooltips: {
+              mode: 'index',
+              callbacks: {
+                // Get the total of the energy produced in every point and show it in the hover tooltip
+                label: function (tooltipItem, data) { 
+                  var label = data.datasets[tooltipItem.datasetIndex].label || '';
+                  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+                  var total = 0;
+
+                  for (var i = 0; i < data.datasets.length; i++)
+                    total += +data.datasets[i].data[tooltipItem.index];
+
+                  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                    return label + " : " + value;
+                  }
+                  else {
+                    return [label + " : " + value, "TOTAL : " + Math.round(total)];
+                  }
+                }
+              }
+            },
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+              xAxes: [{
+                stacked: true,
+              }],
+              yAxes: [{
+                stacked: true
+              }]
+            }
+          },
+          data: {
+            labels: this.barChartLabels,
+            datasets: 
+              this.metersData,
+          }, 
+        });
+        this.chartjs = true;
+      });
+      this.chartjs = true;
+      Swal.close();
+    }, 2000);
+  }
 }

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

@@ -68,13 +68,12 @@
                 <p class='h4'>Dirección: {{selectedPlant.address}}</p>
                 <p class='h4'>Capacidad Instalada: {{selectedPlant.installedCapacity_kW}} kW</p>
                 
-                <button class="btn bg-yellow btn-flat">Ir a Planta</button>
+                <button class="btn bg-yellow btn-flat" (click)="goToAsset(selectedPlant.id)">Ir a Planta</button>
               </div>
                   
             </div>
           </div>
             
-        <app-plant-detail [plantId]="plantId"></app-plant-detail>
       </div>
     </div>
     <br>

src/app/components/dashboard/dashboard.component.ts

@@ -1,9 +1,9 @@
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { Component, OnInit, Input, Output, EventEmitter, OnDestroy, NgZone } from '@angular/core';
 import { Plant } from 'src/app/models/plant';
 import { PlantsService } from 'src/app/services/plants.service';
 import { OrganizationsService } from 'src/app/services/organizations.service';
-import { latLng, tileLayer, marker, Layer, icon, Map, latLngBounds, LatLng, LatLngBounds, point } from 'leaflet';
+import { latLng, tileLayer, marker, Layer, icon, Map, latLngBounds, LatLng, point } from 'leaflet';
 
 import { of as observableOf, Observable, throwError, from } from 'rxjs';
 
@@ -59,11 +59,16 @@ export class DashboardComponent implements OnInit {
   // Values to bind to Leaflet Directive
   options = {
     layers: [ this.LAYER_OSM ],
-    zoom: 8,
+    zoom: 10,
     center: latLng([13.661714, -89.251530])
   };
   
-  constructor(private plantsService: PlantsService, private route: ActivatedRoute, private orgService: OrganizationsService, private zone: NgZone) {
+  constructor(
+    private plantsService: PlantsService, 
+    private route: ActivatedRoute, 
+    private orgService: OrganizationsService, 
+    private router: Router,
+    private zone: NgZone) {
 
     Swal.fire({
       allowOutsideClick: false,
@@ -75,6 +80,8 @@ export class DashboardComponent implements OnInit {
 
     this.plantsService.getAssets().subscribe(res => {
       this.listData = res["assets"];
+      Swal.close();
+
     }, (err) => {
       Swal.fire({
         type: 'error',
@@ -100,8 +107,9 @@ export class DashboardComponent implements OnInit {
   ngOnInit(): void {
 
     setTimeout(()=>{ 
-      this.addMarkers();
-      Swal.close();
+      if (this.listData != undefined){
+        this.addMarkers();
+      }
     }, 1500);
 
     
@@ -156,10 +164,16 @@ export class DashboardComponent implements OnInit {
     const bounds = latLngBounds(this.points);
     map.fitBounds(bounds, {
       padding: point(24, 24),
-      maxZoom: 10.5,
+      maxZoom: 9.5,
       animate: true
     });
   }
 
+  goToAsset(id: string){
+    console.log("clicked " + id);
+    this.router.navigate(['/assets'], { queryParams: { id: id } }); 
+
+  }
+
 
 }

src/app/components/plugins/maps/maps.component.html

@@ -10,7 +10,6 @@
       </div> 
     </div>
     <div class="col-md-4">
-      <app-plant-detail [plantId]="plantId"></app-plant-detail>
     </div>
   </div>
 </div>

src/app/components/profile/profile.component.html

@@ -1 +1,19 @@
-<h2 class="floating-title">{{title}}</h2>
+<h2 class="floating-title">{{title}}</h2>
+
+<div class="main-content">
+  
+  <div class="container-fluid">
+
+    <div class="row">
+      <div class="col-lg-12 col-md-12 col-sm-12">
+        <div class="card dark-yellow-skin bg-gradient-danger card-img-holder text-white profile">
+          <div class="card-body">
+            <img alt="circle-image" class="card-img-absolute" src="assets/img/waves-opt.png">
+            <h4 class="font-weight-normal mb-3">Administrador</h4>
+            <h2 class="mb-3">{{email}}</h2>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/profile/profile.component.scss

@@ -0,0 +1,6 @@
+
+.profile {
+  background: url("/assets/img/dawn.jpg") 0 320px;
+}
+
+

src/app/components/profile/profile.component.ts

@@ -12,8 +12,12 @@ export class ProfileComponent implements OnInit {
 
   constructor(private titleService: Title) { }
 
+  email:string;
+
   ngOnInit() {
     this.titleService.setTitle(this.title);
+    this.email = localStorage.getItem("email");
+
   }
 
 }

src/app/components/shared/sidebar/sidebar.component.ts

@@ -12,7 +12,7 @@ declare interface RouteInfo {
 export const ROUTES: RouteInfo[] = [
     { path: '/dashboard', title: 'Dashboard',  icon: 'dashboard', class: '' },
     { path: '/assets', title: 'Plantas',  icon: 'wb_sunny', class: '' },
-    { path: '/reports', title: 'Reportes',  icon: 'assignment', class: '' },
+    //{ path: '/reports', title: 'Reportes',  icon: 'assignment', class: '' },
     { path: '/profile', title: 'Perfil',  icon: 'person', class: '' },
     //{ path: '/profile', title: 'Perfil',  icon:'person', class: '' },
     /*{ path: '/table-list', title: 'Table List',  icon:'content_paste', class: '' },

src/app/data/measures.data.ts

@@ -1154,3 +1154,180 @@ export const measures =
     potC: 0.984028465
   }
 ]
+
+export const measures2 = {
+  "1D": {
+      "CONDUSAL SUBESTACION 1": [
+          {
+              "dateMin": "2019-09-19 13:00:00",
+              "dateMax": "2019-09-19 13:00:00",
+              "total_energy_kWh": 16.3,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 12:00:00",
+              "dateMax": "2019-09-19 12:45:00",
+              "total_energy_kWh": 89.5,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 11:00:00",
+              "dateMax": "2019-09-19 11:45:00",
+              "total_energy_kWh": 92.1,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 10:00:00",
+              "dateMax": "2019-09-19 10:45:00",
+              "total_energy_kWh": 101.4,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 09:00:00",
+              "dateMax": "2019-09-19 09:45:00",
+              "total_energy_kWh": 83.4,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 08:00:00",
+              "dateMax": "2019-09-19 08:45:00",
+              "total_energy_kWh": 59.2,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 07:00:00",
+              "dateMax": "2019-09-19 07:45:00",
+              "total_energy_kWh": 24.1,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 06:00:00",
+              "dateMax": "2019-09-19 06:45:00",
+              "total_energy_kWh": 2.7,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 05:00:00",
+              "dateMax": "2019-09-19 05:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 04:00:00",
+              "dateMax": "2019-09-19 04:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 03:00:00",
+              "dateMax": "2019-09-19 03:45:00",
+              "total_energy_kWh": 0.1,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 02:00:00",
+              "dateMax": "2019-09-19 02:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 01:00:00",
+              "dateMax": "2019-09-19 01:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223406118"
+          },
+          {
+              "dateMin": "2019-09-19 00:00:00",
+              "dateMax": "2019-09-19 00:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223406118"
+          }
+      ],
+      "CONDUSAL SUBESTACION 2": [
+          {
+              "dateMin": "2019-09-19 13:00:00",
+              "dateMax": "2019-09-19 13:00:00",
+              "total_energy_kWh": 21.5,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 12:00:00",
+              "dateMax": "2019-09-19 12:45:00",
+              "total_energy_kWh": 119.9,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 11:00:00",
+              "dateMax": "2019-09-19 11:45:00",
+              "total_energy_kWh": 122.1,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 10:00:00",
+              "dateMax": "2019-09-19 10:45:00",
+              "total_energy_kWh": 136.8,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 09:00:00",
+              "dateMax": "2019-09-19 09:45:00",
+              "total_energy_kWh": 115.8,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 08:00:00",
+              "dateMax": "2019-09-19 08:45:00",
+              "total_energy_kWh": 87.0,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 07:00:00",
+              "dateMax": "2019-09-19 07:45:00",
+              "total_energy_kWh": 37.9,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 06:00:00",
+              "dateMax": "2019-09-19 06:45:00",
+              "total_energy_kWh": 3.5,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 05:00:00",
+              "dateMax": "2019-09-19 05:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 04:00:00",
+              "dateMax": "2019-09-19 04:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 03:00:00",
+              "dateMax": "2019-09-19 03:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 02:00:00",
+              "dateMax": "2019-09-19 02:45:00",
+              "total_energy_kWh": 0.1,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 01:00:00",
+              "dateMax": "2019-09-19 01:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223412115"
+          },
+          {
+              "dateMin": "2019-09-19 00:00:00",
+              "dateMax": "2019-09-19 00:45:00",
+              "total_energy_kWh": 0.0,
+              "serialNumber": "0223412115"
+          }
+      ]
+  }
+}