|
|
@@ -110,7 +110,7 @@ export class AssetsComponent implements OnInit {
|
|
|
|
|
|
// For MatDataTable
|
|
|
metersData: any;
|
|
|
- initialDate: any;
|
|
|
+ initialDate: string;
|
|
|
tableData: any;
|
|
|
showTable: boolean;
|
|
|
displayedColumns: any;
|
|
|
@@ -126,7 +126,7 @@ export class AssetsComponent implements OnInit {
|
|
|
// For chartjs
|
|
|
chartjs: boolean;
|
|
|
chart1: Chart;
|
|
|
- chart1Type: string;
|
|
|
+ chart1Type;
|
|
|
barChartColors: any = [
|
|
|
"#5f86b0",
|
|
|
"#a9d0ea",
|
|
|
@@ -153,6 +153,7 @@ export class AssetsComponent implements OnInit {
|
|
|
public barChartOptions: ChartOptions;
|
|
|
public barChartData: ChartDataSets[];
|
|
|
@ViewChild("baseChart", null) chart: BaseChartDirective;
|
|
|
+
|
|
|
city: any;
|
|
|
total_savings: any;
|
|
|
last_day_savings: number;
|
|
|
@@ -317,7 +318,8 @@ export class AssetsComponent implements OnInit {
|
|
|
this.chart1.destroy();
|
|
|
}
|
|
|
this.chart1 = undefined;
|
|
|
- this.chart1 = new Chart("canvas", {});
|
|
|
+ const ctx = new CanvasRenderingContext2D();
|
|
|
+ this.chart1 = new Chart(ctx, {});
|
|
|
}, 3000);
|
|
|
}
|
|
|
}
|
|
|
@@ -575,7 +577,9 @@ export class AssetsComponent implements OnInit {
|
|
|
this.totalCertificates = res["data"]["cantidad"];
|
|
|
this.lastGeneratedDateCertificate =
|
|
|
formatDate(
|
|
|
- res["data"]["ultimo_generado"],
|
|
|
+ res["data"]["ultimo_generado"]
|
|
|
+ .replace(/-/g, "/")
|
|
|
+ .replace("T", " "),
|
|
|
"dd/MM/yyyy",
|
|
|
"es-Es",
|
|
|
"-0600"
|
|
|
@@ -689,34 +693,56 @@ export class AssetsComponent implements OnInit {
|
|
|
case "day":
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
.map((obj) =>
|
|
|
- formatDate(obj.dateMin, "HH:mm ", "es-Es", "-0600")
|
|
|
+ formatDate(
|
|
|
+ obj.dateMin.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "HH:mm ",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ )
|
|
|
)
|
|
|
.reverse();
|
|
|
break;
|
|
|
case "week":
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
.map((obj) =>
|
|
|
- formatDate(obj.dateMax, "EEEE dd", "es-Es", "-0600")
|
|
|
+ formatDate(
|
|
|
+ obj.dateMax.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "EEEE dd",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ )
|
|
|
)
|
|
|
.reverse();
|
|
|
break;
|
|
|
case "year":
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
.map((obj) =>
|
|
|
- formatDate(obj.dateMax, "MM/yyyy", "es-Es", "-0600")
|
|
|
+ formatDate(
|
|
|
+ obj.dateMax.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "MM/yyyy",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ )
|
|
|
)
|
|
|
.reverse();
|
|
|
break;
|
|
|
default:
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
.map((obj) =>
|
|
|
- formatDate(obj.dateMax, "dd/MM", "es-Es", "-0600")
|
|
|
+ formatDate(
|
|
|
+ obj.dateMax.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "dd/MM",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ )
|
|
|
)
|
|
|
.reverse();
|
|
|
}
|
|
|
|
|
|
// Push the values to the chart object
|
|
|
- this.tableData.push({ headers: "Ahorro[US$]" });
|
|
|
+ this.tableData.push({
|
|
|
+ headers: "Ahorro[US$]",
|
|
|
+ });
|
|
|
this.tableData.push({
|
|
|
headers: "Fecha/Hora",
|
|
|
dataValues: this.barChartLabels,
|
|
|
@@ -741,7 +767,81 @@ export class AssetsComponent implements OnInit {
|
|
|
this.dataSourcePrint.data = this.tableData2;
|
|
|
|
|
|
this.showTable = true;
|
|
|
- this.chart1 = new Chart("canvas", {
|
|
|
+
|
|
|
+ this.barChartType = this.chart1Type;
|
|
|
+ this.barChartLabels;
|
|
|
+ this.barChartOptions = {
|
|
|
+ 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 = 1; 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[kWh] : " + Math.round(total),
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ scales: {
|
|
|
+ xAxes: [
|
|
|
+ {
|
|
|
+ stacked: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxes: [
|
|
|
+ {
|
|
|
+ stacked: true,
|
|
|
+ position: "left",
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: "Kilowatts hora [kWh]",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ display: true,
|
|
|
+ stacked: true,
|
|
|
+ position: "right",
|
|
|
+ id: "y-axis-ahorro",
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: "Ahorro [US$]",
|
|
|
+ },
|
|
|
+ gridLines: {
|
|
|
+ drawOnChartArea: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ this.barChartLegend = true;
|
|
|
+ this.barChartData = this.metersData;
|
|
|
+
|
|
|
+ /*
|
|
|
+ const ctx = new CanvasRenderingContext2D();
|
|
|
+
|
|
|
+ this.chart1 = new Chart(ctx, {
|
|
|
type: this.chart1Type,
|
|
|
options: {
|
|
|
title: {
|
|
|
@@ -816,7 +916,7 @@ export class AssetsComponent implements OnInit {
|
|
|
labels: this.barChartLabels,
|
|
|
datasets: this.metersData,
|
|
|
},
|
|
|
- });
|
|
|
+ }); */
|
|
|
this.chartjs = true;
|
|
|
});
|
|
|
});
|
|
|
@@ -829,16 +929,36 @@ export class AssetsComponent implements OnInit {
|
|
|
let dateT;
|
|
|
switch (view) {
|
|
|
case "day":
|
|
|
- dateT = formatDate(date, "HH:mm", "es-Es", "-0600");
|
|
|
+ dateT = formatDate(
|
|
|
+ date.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "HH:mm",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ );
|
|
|
break;
|
|
|
case "week":
|
|
|
- dateT = formatDate(date, "EEEE dd", "es-Es", "-0600");
|
|
|
+ dateT = formatDate(
|
|
|
+ date.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "EEEE dd",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ );
|
|
|
break;
|
|
|
case "year":
|
|
|
- dateT = formatDate(date, "MM/yyyy", "es-Es", "-0600");
|
|
|
+ dateT = formatDate(
|
|
|
+ date.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "MM/yyyy",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ );
|
|
|
break;
|
|
|
default:
|
|
|
- dateT = formatDate(date, "dd/MM", "es-Es", "-0600");
|
|
|
+ dateT = formatDate(
|
|
|
+ date.replace(/-/g, "/").replace("T", " "),
|
|
|
+ "dd/MM",
|
|
|
+ "es-Es",
|
|
|
+ "-0600"
|
|
|
+ );
|
|
|
}
|
|
|
return dateT;
|
|
|
}
|
|
|
@@ -894,12 +1014,83 @@ export class AssetsComponent implements OnInit {
|
|
|
}
|
|
|
|
|
|
this.chart1Type = chartType;
|
|
|
-
|
|
|
+ /*
|
|
|
if (this.chart1 != undefined || this.chart1 == undefined) {
|
|
|
this.chart1.destroy();
|
|
|
}
|
|
|
- this.chart1 = undefined;
|
|
|
- this.chart1 = new Chart("canvas", {
|
|
|
+ this.chart1 = undefined;*/
|
|
|
+
|
|
|
+ this.barChartType = this.chart1Type;
|
|
|
+ this.barChartLabels;
|
|
|
+ this.barChartOptions = {
|
|
|
+ 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 = 1; 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[kWh] : " + Math.round(total),
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ responsive: true,
|
|
|
+ maintainAspectRatio: false,
|
|
|
+ scales: {
|
|
|
+ xAxes: [
|
|
|
+ {
|
|
|
+ stacked: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxes: [
|
|
|
+ {
|
|
|
+ stacked: true,
|
|
|
+ position: "left",
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: "Kilowatts hora [kWh]",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ display: true,
|
|
|
+ stacked: true,
|
|
|
+ position: "right",
|
|
|
+ id: "y-axis-ahorro",
|
|
|
+ scaleLabel: {
|
|
|
+ display: true,
|
|
|
+ labelString: "Ahorro [US$]",
|
|
|
+ },
|
|
|
+ gridLines: {
|
|
|
+ drawOnChartArea: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ this.barChartLegend = true;
|
|
|
+ this.barChartData = this.metersData;
|
|
|
+
|
|
|
+ /*
|
|
|
+ var canvas = document.getElementById("canvas");
|
|
|
+ const ctx = new CanvasRenderingContext2D();
|
|
|
+ this.chart1 = new Chart(ctx, {
|
|
|
type: this.chart1Type,
|
|
|
|
|
|
options: {
|
|
|
@@ -965,6 +1156,6 @@ export class AssetsComponent implements OnInit {
|
|
|
labels: this.barChartLabels,
|
|
|
datasets: this.metersData,
|
|
|
},
|
|
|
- });
|
|
|
+ });*/
|
|
|
}
|
|
|
}
|
