|
|
@@ -22,7 +22,7 @@ import * as $ from "jquery";
|
|
|
@Component({
|
|
|
selector: "app-assets",
|
|
|
templateUrl: "./assets.component.html",
|
|
|
- styleUrls: ["./assets.component.scss"]
|
|
|
+ styleUrls: ["./assets.component.scss"],
|
|
|
})
|
|
|
export class AssetsComponent implements OnInit {
|
|
|
exportExcel = ExportType.XLSX;
|
|
|
@@ -31,7 +31,7 @@ export class AssetsComponent implements OnInit {
|
|
|
ExcelOptions: ExcelOptions = {
|
|
|
fileName: "data-Medidores",
|
|
|
sheet: "Hoja 1",
|
|
|
- Props: { Author: "INVERLEC" }
|
|
|
+ Props: { Author: "INVERLEC" },
|
|
|
};
|
|
|
CSVOptions: Options = { fileName: "data-Medidores" };
|
|
|
JSONOptions: Options = { fileName: "data-Medidores" };
|
|
|
@@ -83,7 +83,7 @@ export class AssetsComponent implements OnInit {
|
|
|
we: "Mie",
|
|
|
th: "Jue",
|
|
|
fr: "Vie",
|
|
|
- sa: "Sab"
|
|
|
+ sa: "Sab",
|
|
|
};
|
|
|
monthsLabels: any = {
|
|
|
1: "Ene",
|
|
|
@@ -97,13 +97,13 @@ export class AssetsComponent implements OnInit {
|
|
|
9: "Sep",
|
|
|
10: "Oct",
|
|
|
11: "Nov",
|
|
|
- 12: "Dic"
|
|
|
+ 12: "Dic",
|
|
|
};
|
|
|
myDpOptions: IAngularMyDpOptions = {
|
|
|
dateRange: false,
|
|
|
dateFormat: "dd/mm/yyyy",
|
|
|
dayLabels: this.daysLabels,
|
|
|
- monthLabels: this.monthsLabels
|
|
|
+ monthLabels: this.monthsLabels,
|
|
|
};
|
|
|
myDateInit: boolean = true;
|
|
|
model: IMyDateModel = null;
|
|
|
@@ -126,7 +126,7 @@ export class AssetsComponent implements OnInit {
|
|
|
// For chartjs
|
|
|
chartjs: boolean;
|
|
|
chart1: Chart;
|
|
|
- chart1Type: string;
|
|
|
+ chart1Type;
|
|
|
barChartColors: any = [
|
|
|
"#5f86b0",
|
|
|
"#a9d0ea",
|
|
|
@@ -135,7 +135,7 @@ export class AssetsComponent implements OnInit {
|
|
|
"#f2e8cf",
|
|
|
"#3c8dbc",
|
|
|
"#f56954",
|
|
|
- "#ee964b"
|
|
|
+ "#ee964b",
|
|
|
];
|
|
|
borderChartColors: any = [
|
|
|
"#4573a5",
|
|
|
@@ -145,7 +145,7 @@ export class AssetsComponent implements OnInit {
|
|
|
"#d3cbb7",
|
|
|
"#539dc8",
|
|
|
"#e4604c",
|
|
|
- "#d38d51"
|
|
|
+ "#d38d51",
|
|
|
];
|
|
|
public barChartType: ChartType;
|
|
|
public barChartLegend: boolean;
|
|
|
@@ -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;
|
|
|
@@ -172,14 +173,14 @@ export class AssetsComponent implements OnInit {
|
|
|
// DEMO
|
|
|
this.userLevel = +this.authService.getUserLevel();
|
|
|
// Get selected asset
|
|
|
- this.route.queryParams.subscribe(params => {
|
|
|
+ this.route.queryParams.subscribe((params) => {
|
|
|
this.assetID = params["id"];
|
|
|
});
|
|
|
|
|
|
Swal.fire({
|
|
|
allowOutsideClick: false,
|
|
|
type: "info",
|
|
|
- text: "Espere por favor..."
|
|
|
+ text: "Espere por favor...",
|
|
|
});
|
|
|
Swal.showLoading();
|
|
|
}
|
|
|
@@ -195,9 +196,9 @@ export class AssetsComponent implements OnInit {
|
|
|
date: {
|
|
|
year: begin.getFullYear(),
|
|
|
month: begin.getMonth() + 1,
|
|
|
- day: begin.getDate()
|
|
|
- }
|
|
|
- }
|
|
|
+ day: begin.getDate(),
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
}
|
|
|
|
|
|
@@ -211,14 +212,14 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
|
|
|
this.chartActive = [true, false, false, false];
|
|
|
|
|
|
// Get all assets (according to user's assigned organizations)
|
|
|
let plants = this.plantsService.getAllAssets().subscribe(
|
|
|
- res => {
|
|
|
+ (res) => {
|
|
|
this.listAssets = res["data"]["assets"];
|
|
|
|
|
|
// Default values for chart
|
|
|
@@ -230,12 +231,12 @@ export class AssetsComponent implements OnInit {
|
|
|
this.city = this.listAssets[0].city;
|
|
|
} else {
|
|
|
this.city = this.listAssets.find(
|
|
|
- object => object.id == this.assetID
|
|
|
+ (object) => object.id == this.assetID
|
|
|
).city;
|
|
|
}
|
|
|
|
|
|
let tempAsset = this.listAssets.find(
|
|
|
- object => object.id == this.assetID
|
|
|
+ (object) => object.id == this.assetID
|
|
|
);
|
|
|
|
|
|
if (tempAsset["meters_installed"].length > 0) {
|
|
|
@@ -254,11 +255,11 @@ export class AssetsComponent implements OnInit {
|
|
|
this.metersInstalled = false;
|
|
|
}
|
|
|
},
|
|
|
- err => {
|
|
|
+ (err) => {
|
|
|
Swal.fire({
|
|
|
type: "error",
|
|
|
title: "Error en el servidor",
|
|
|
- text: err.message
|
|
|
+ text: err.message,
|
|
|
});
|
|
|
}
|
|
|
);
|
|
|
@@ -287,7 +288,7 @@ export class AssetsComponent implements OnInit {
|
|
|
// Trigger again the chart with the selected assetID
|
|
|
onChangeObj(event: any) {
|
|
|
this.assetID = event.target.value;
|
|
|
- let tempAsset = this.listAssets.find(object => object.id == this.assetID);
|
|
|
+ let tempAsset = this.listAssets.find((object) => object.id == this.assetID);
|
|
|
this.city = tempAsset["city"];
|
|
|
this.total_savings = 0;
|
|
|
this.last_day_savings = 0;
|
|
|
@@ -301,7 +302,7 @@ export class AssetsComponent implements OnInit {
|
|
|
Swal.fire({
|
|
|
allowOutsideClick: false,
|
|
|
type: "info",
|
|
|
- text: "Espere por favor..."
|
|
|
+ text: "Espere por favor...",
|
|
|
});
|
|
|
Swal.showLoading();
|
|
|
setTimeout(() => {
|
|
|
@@ -311,7 +312,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);
|
|
|
}
|
|
|
}
|
|
|
@@ -325,7 +327,7 @@ export class AssetsComponent implements OnInit {
|
|
|
}
|
|
|
|
|
|
getSavings(assetID: string) {
|
|
|
- this.plantsService.getAssetSavings(this.assetID).subscribe(res => {
|
|
|
+ this.plantsService.getAssetSavings(this.assetID).subscribe((res) => {
|
|
|
this.total_savings = res["data"]["ahorro_total"];
|
|
|
this.total_savings =
|
|
|
+this.total_savings > 10000
|
|
|
@@ -337,7 +339,7 @@ export class AssetsComponent implements OnInit {
|
|
|
}
|
|
|
|
|
|
getEnvironmentalData(assetID: string) {
|
|
|
- this.logsService.getAssetEnviromentalStats(assetID).subscribe(resp => {
|
|
|
+ this.logsService.getAssetEnviromentalStats(assetID).subscribe((resp) => {
|
|
|
this.environment = resp["data"]["environmentals"];
|
|
|
this.environmentCO2 = this.environment.avoided_kg_of_co2.toFixed(2);
|
|
|
this.environmentHouse = this.environment.number_of_homes.toFixed(0);
|
|
|
@@ -352,7 +354,7 @@ export class AssetsComponent implements OnInit {
|
|
|
let energy_produced = this.logsService
|
|
|
.getEnergySummaryByAsset(assetID)
|
|
|
.subscribe(
|
|
|
- resp => {
|
|
|
+ (resp) => {
|
|
|
this.eProduced = resp["data"]["energy"]; //results[1];
|
|
|
this.energyDay = this.eProduced.today.total_energy_kWh || 0;
|
|
|
this.energyWeek =
|
|
|
@@ -368,11 +370,11 @@ export class AssetsComponent implements OnInit {
|
|
|
? (this.eProduced.lifeTime.total_energy_kWh / 1000).toFixed(2)
|
|
|
: this.eProduced.lifeTime.total_energy_kWh || 0;
|
|
|
},
|
|
|
- err => {
|
|
|
+ (err) => {
|
|
|
Swal.fire({
|
|
|
type: "error",
|
|
|
title: "Error en el servidor",
|
|
|
- text: "No su pudo obtener la informacion"
|
|
|
+ text: "No su pudo obtener la informacion",
|
|
|
});
|
|
|
}
|
|
|
);
|
|
|
@@ -389,7 +391,7 @@ export class AssetsComponent implements OnInit {
|
|
|
Swal.fire({
|
|
|
allowOutsideClick: false,
|
|
|
type: "info",
|
|
|
- text: "Espere por favor..."
|
|
|
+ text: "Espere por favor...",
|
|
|
});
|
|
|
Swal.showLoading();
|
|
|
}
|
|
|
@@ -431,7 +433,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "week":
|
|
|
@@ -445,7 +447,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "WTD":
|
|
|
@@ -459,7 +461,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "month":
|
|
|
@@ -473,7 +475,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "MTD":
|
|
|
@@ -487,7 +489,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "3m":
|
|
|
@@ -501,7 +503,7 @@ export class AssetsComponent implements OnInit {
|
|
|
true,
|
|
|
false,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "12m":
|
|
|
@@ -515,7 +517,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
true,
|
|
|
false,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "YTD":
|
|
|
@@ -529,7 +531,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
true,
|
|
|
- false
|
|
|
+ false,
|
|
|
];
|
|
|
break;
|
|
|
case "total":
|
|
|
@@ -543,7 +545,7 @@ export class AssetsComponent implements OnInit {
|
|
|
false,
|
|
|
false,
|
|
|
false,
|
|
|
- true
|
|
|
+ true,
|
|
|
];
|
|
|
break;
|
|
|
default:
|
|
|
@@ -600,7 +602,7 @@ export class AssetsComponent implements OnInit {
|
|
|
borderColor: "#ce2525",
|
|
|
borderWidth: 2,
|
|
|
yAxisID: "y-axis-ahorro",
|
|
|
- fill: false
|
|
|
+ fill: false,
|
|
|
});
|
|
|
// The chart data object requires certain ordered params, so we itirate the returned object from the API call,
|
|
|
// and build the new object with the required/needed values
|
|
|
@@ -615,18 +617,19 @@ export class AssetsComponent implements OnInit {
|
|
|
|
|
|
let measure_values = Object.values(
|
|
|
this.metersValues[prop]["data"]
|
|
|
- .map(obj => obj.total_energy_kWh)
|
|
|
+ .map((obj) => obj.total_energy_kWh)
|
|
|
.reverse()
|
|
|
);
|
|
|
this.metersData.push({
|
|
|
label: label,
|
|
|
backgroundColor: this.barChartColors[prop],
|
|
|
data: measure_values,
|
|
|
- borderColor: this.borderChartColors[prop]
|
|
|
+ barPercentage: 0.7,
|
|
|
+ borderColor: this.borderChartColors[prop],
|
|
|
});
|
|
|
this.tableData.push({
|
|
|
headers: label,
|
|
|
- dataValues: measure_values
|
|
|
+ dataValues: measure_values,
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -641,7 +644,7 @@ export class AssetsComponent implements OnInit {
|
|
|
//let label = localStorage.getItem("email") == "inverlec@grupomerelec.com" ? `INVERLEC ${prop}` : this.metersValues[prop]["label"];
|
|
|
let quantity = Object.keys(this.metersValues[0]["data"]);
|
|
|
let mvalues = Object.values(
|
|
|
- this.metersValues[prop]["data"].map(obj => obj).reverse()
|
|
|
+ this.metersValues[prop]["data"].map((obj) => obj).reverse()
|
|
|
);
|
|
|
|
|
|
for (let prop2 in quantity) {
|
|
|
@@ -682,38 +685,40 @@ export class AssetsComponent implements OnInit {
|
|
|
switch (view) {
|
|
|
case "day":
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
- .map(obj =>
|
|
|
+ .map((obj) =>
|
|
|
formatDate(obj.dateMin, "HH:mm ", "es-Es", "-0600")
|
|
|
)
|
|
|
.reverse();
|
|
|
break;
|
|
|
case "week":
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
- .map(obj =>
|
|
|
+ .map((obj) =>
|
|
|
formatDate(obj.dateMax, "EEEE dd", "es-Es", "-0600")
|
|
|
)
|
|
|
.reverse();
|
|
|
break;
|
|
|
case "year":
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
- .map(obj =>
|
|
|
+ .map((obj) =>
|
|
|
formatDate(obj.dateMax, "MM/yyyy", "es-Es", "-0600")
|
|
|
)
|
|
|
.reverse();
|
|
|
break;
|
|
|
default:
|
|
|
this.barChartLabels = this.metersValues[0]["data"]
|
|
|
- .map(obj =>
|
|
|
+ .map((obj) =>
|
|
|
formatDate(obj.dateMax, "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
|
|
|
+ dataValues: this.barChartLabels,
|
|
|
});
|
|
|
this.tableData.reverse();
|
|
|
for (let v in Object.keys(this.tableData)) {
|
|
|
@@ -735,17 +740,91 @@ 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: {
|
|
|
- display: true
|
|
|
+ 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) {
|
|
|
+ label: function (tooltipItem, data) {
|
|
|
var label =
|
|
|
data.datasets[tooltipItem.datasetIndex].label || "";
|
|
|
var value =
|
|
|
@@ -765,11 +844,11 @@ export class AssetsComponent implements OnInit {
|
|
|
} else {
|
|
|
return [
|
|
|
label + " : " + value,
|
|
|
- "TOTAL[kWh] : " + Math.round(total)
|
|
|
+ "TOTAL[kWh] : " + Math.round(total),
|
|
|
];
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
@@ -777,8 +856,8 @@ export class AssetsComponent implements OnInit {
|
|
|
xAxes: [
|
|
|
{
|
|
|
stacked: true,
|
|
|
- barPercentage: 0.7
|
|
|
- }
|
|
|
+ barPercentage: 0.7,
|
|
|
+ },
|
|
|
],
|
|
|
yAxes: [
|
|
|
{
|
|
|
@@ -786,8 +865,8 @@ export class AssetsComponent implements OnInit {
|
|
|
position: "left",
|
|
|
scaleLabel: {
|
|
|
display: true,
|
|
|
- labelString: "Kilowatts hora [kWh]"
|
|
|
- }
|
|
|
+ labelString: "Kilowatts hora [kWh]",
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
display: true,
|
|
|
@@ -796,21 +875,21 @@ export class AssetsComponent implements OnInit {
|
|
|
id: "y-axis-ahorro",
|
|
|
scaleLabel: {
|
|
|
display: true,
|
|
|
- labelString: "Ahorro [US$]"
|
|
|
+ labelString: "Ahorro [US$]",
|
|
|
},
|
|
|
gridLines: {
|
|
|
- drawOnChartArea: false
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ drawOnChartArea: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
},
|
|
|
|
|
|
data: {
|
|
|
labels: this.barChartLabels,
|
|
|
- datasets: this.metersData
|
|
|
- }
|
|
|
- });
|
|
|
+ datasets: this.metersData,
|
|
|
+ },
|
|
|
+ }); */
|
|
|
this.chartjs = true;
|
|
|
});
|
|
|
});
|
|
|
@@ -854,7 +933,7 @@ export class AssetsComponent implements OnInit {
|
|
|
//properties: this.displayedColumns.join(","),
|
|
|
header: '<h3 class="report-header">Datos de la planta </h3>',
|
|
|
documentTitle: "DENMARK - Informacion generada",
|
|
|
- style: ".report-header{ color: #075D9D; font-size: 24px; }"
|
|
|
+ style: ".report-header{ color: #075D9D; font-size: 24px; }",
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -869,42 +948,113 @@ export class AssetsComponent implements OnInit {
|
|
|
switch (chartType) {
|
|
|
case "bar":
|
|
|
this.chartActive = [true, false, false, false];
|
|
|
- if (this.metersData.find(v => v.type == "radar")) {
|
|
|
- this.metersData.find(v => v.type != "line").type = "line";
|
|
|
+ if (this.metersData.find((v) => v.type == "radar")) {
|
|
|
+ this.metersData.find((v) => v.type != "line").type = "line";
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
case "line":
|
|
|
this.chartActive = [false, true, false, false];
|
|
|
- if (this.metersData.find(v => v.type == "radar")) {
|
|
|
- this.metersData.find(v => v.type != "line").type = "line";
|
|
|
+ if (this.metersData.find((v) => v.type == "radar")) {
|
|
|
+ this.metersData.find((v) => v.type != "line").type = "line";
|
|
|
}
|
|
|
break;
|
|
|
case "radar":
|
|
|
this.chartActive = [false, false, true, false];
|
|
|
- this.metersData.find(v => v.type == "line").type = "radar";
|
|
|
+ this.metersData.find((v) => v.type == "line").type = "radar";
|
|
|
break;
|
|
|
default:
|
|
|
}
|
|
|
|
|
|
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: {
|
|
|
title: {
|
|
|
- display: true
|
|
|
+ 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) {
|
|
|
+ label: function (tooltipItem, data) {
|
|
|
var label = data.datasets[tooltipItem.datasetIndex].label || "";
|
|
|
var value =
|
|
|
data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
|
|
|
@@ -918,8 +1068,8 @@ export class AssetsComponent implements OnInit {
|
|
|
} else {
|
|
|
return [label + " : " + value, "TOTAL : " + Math.round(total)];
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: false,
|
|
|
@@ -927,8 +1077,8 @@ export class AssetsComponent implements OnInit {
|
|
|
xAxes: [
|
|
|
{
|
|
|
stacked: true,
|
|
|
- barPercentage: 0.7
|
|
|
- }
|
|
|
+ barPercentage: 0.7,
|
|
|
+ },
|
|
|
],
|
|
|
yAxes: [
|
|
|
{
|
|
|
@@ -936,8 +1086,8 @@ export class AssetsComponent implements OnInit {
|
|
|
position: "left",
|
|
|
scaleLabel: {
|
|
|
display: true,
|
|
|
- labelString: "Kilowatts hora [kWh]"
|
|
|
- }
|
|
|
+ labelString: "Kilowatts hora [kWh]",
|
|
|
+ },
|
|
|
},
|
|
|
{
|
|
|
display: true,
|
|
|
@@ -946,19 +1096,19 @@ export class AssetsComponent implements OnInit {
|
|
|
id: "y-axis-ahorro",
|
|
|
scaleLabel: {
|
|
|
display: true,
|
|
|
- labelString: "Ahorro [US$]"
|
|
|
+ labelString: "Ahorro [US$]",
|
|
|
},
|
|
|
gridLines: {
|
|
|
- drawOnChartArea: false
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
+ drawOnChartArea: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
},
|
|
|
data: {
|
|
|
labels: this.barChartLabels,
|
|
|
- datasets: this.metersData
|
|
|
- }
|
|
|
- });
|
|
|
+ datasets: this.metersData,
|
|
|
+ },
|
|
|
+ });*/
|
|
|
}
|
|
|
}
|
