fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perubahan tampilan detail

This commit is contained in:
Fuzi_fauzia 2024-07-22 09:38:57 +07:00
parent da4100993b
commit e3be28b4b6
3 changed files with 39 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/content/hemat-app/monitoring/detail/detail.component.css
View File

@ -86,11 +86,11 @@ canvas {
} }
.background-round { .background-round {
background-color: #2F5137 !important; background-color: #37A647 !important;
padding: 8px; padding: 8px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #2F5137; border: 2px solid #37A647;
border-color: #2F5137 !important; border-color: #37A647 !important;
} }
.custom-label { .custom-label {

8
src/app/content/hemat-app/monitoring/detail/detail.component.html
View File

@ -19,7 +19,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #2F5137; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -51,7 +51,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #2F5137; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -83,7 +83,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #2F5137; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
@ -120,7 +120,7 @@
<div class="align-self-center"> <div class="align-self-center">
<div <div
style=" style="
background-color: #414f2b; background-color: #37A647;
border-radius: 50%; border-radius: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;

52
src/app/content/hemat-app/monitoring/detail/detail.component.ts
View File

@ -72,18 +72,29 @@ export class DetailComponent {
{ {
type: "line", type: "line",
data: [], data: [],
label: "Weekly Kwh Average", label: "Kwh Average",
backgroundColor: "rgba(0,255,255,0)", backgroundColor: "#ffffff",
borderColor: "#ffffff", borderColor: "#ffffff",
fill: false, pointBackgroundColor: "#ffffff",
pointBorderColor: "#ffffff", pointBorderColor: "#ffffff",
pointBackgroundColor: "#FFF", pointHoverBackgroundColor: "#ffffff",
pointBorderWidth: 2, pointHoverBorderColor: "#ffffff",
pointHoverBorderWidth: 2,
pointRadius: 4,
tension: 0.3,
spanGaps: true,
}, },
// {
// type: "line",
// data: [],
// label: "Weekly Kwh Average",
// backgroundColor: "rgba(0,255,255,0)",
// borderColor: "#ffffff",
// fill: true,
// pointBorderColor: "#ffffff",
// pointBackgroundColor: "#FFF",
// pointBorderWidth: 2,
// pointHoverBorderWidth: 2,
// pointRadius: 4,
// tension: 0.3,
// spanGaps: true,
// },
]; ];
//.......................... //..........................
@ -213,7 +224,7 @@ export class DetailComponent {
formatter: function (value: number) { formatter: function (value: number) {
return Math.round(value) + ""; return Math.round(value) + "";
}, },
color: "inherit", color: "#242222",
}, },
data: [ data: [
{ {
@ -315,20 +326,21 @@ export class DetailComponent {
this.barChartData[0].data = []; this.barChartData[0].data = [];
this.chartKwhWater.forEach((entry) => { this.chartKwhWater.forEach((entry) => {
this.barChartData[0].data.push(entry.kwh); this.barChartData[0].data.push(entry.kwh);
this.barChartData[1].data.push(entry.kwh);
this.barChartLabels.push(entry.day); this.barChartLabels.push(entry.day);
}); });
const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater); // const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
let weekIndex = 0; // let weekIndex = 0;
console.log(this.barChartData[0].data); // console.log(this.barChartData[0].data);
for (let i = 0; i < this.barChartData[0].data.length; i++) { // for (let i = 0; i < this.barChartData[0].data.length; i++) {
if (i % 7 === 6 && weekIndex < weeklyKwh.length) { // if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
this.barChartData[1].data[i] = weeklyKwh[weekIndex++]; // this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
} else { // } else {
this.barChartData[1].data[i] = null; // this.barChartData[1].data[i] = null;
} // }
} // }
}); });
} }