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