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-color: #2F5137 !important;
background-color: #37A647 !important;
padding: 8px;
border-radius: 50%;
border: 2px solid #2F5137;
border-color: #2F5137 !important;
border: 2px solid #37A647;
border-color: #37A647 !important;
}
.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
style="
background-color: #2F5137;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -51,7 +51,7 @@
<div class="align-self-center">
<div
style="
background-color: #2F5137;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -83,7 +83,7 @@
<div class="align-self-center">
<div
style="
background-color: #2F5137;
background-color: #37A647;
border-radius: 50%;
width: 50px;
height: 50px;
@ -120,7 +120,7 @@
<div class="align-self-center">
<div
style="
background-color: #414f2b;
background-color: #37A647;
border-radius: 50%;
width: 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",
data: [],
label: "Weekly Kwh Average",
backgroundColor: "rgba(0,255,255,0)",
label: "Kwh Average",
backgroundColor: "#ffffff",
borderColor: "#ffffff",
fill: false,
pointBackgroundColor: "#ffffff",
pointBorderColor: "#ffffff",
pointBackgroundColor: "#FFF",
pointBorderWidth: 2,
pointHoverBorderWidth: 2,
pointRadius: 4,
tension: 0.3,
spanGaps: true,
pointHoverBackgroundColor: "#ffffff",
pointHoverBorderColor: "#ffffff",
},
// {
// 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) {
return Math.round(value) + "";
},
color: "inherit",
color: "#242222",
},
data: [
{
@ -315,20 +326,21 @@ export class DetailComponent {
this.barChartData[0].data = [];
this.chartKwhWater.forEach((entry) => {
this.barChartData[0].data.push(entry.kwh);
this.barChartData[1].data.push(entry.kwh);
this.barChartLabels.push(entry.day);
});
const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
let weekIndex = 0;
console.log(this.barChartData[0].data);
// const weeklyKwh = this.aggregateKwhWeekly(this.chartKwhWater);
// let weekIndex = 0;
// console.log(this.barChartData[0].data);
for (let i = 0; i < this.barChartData[0].data.length; i++) {
if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
} else {
this.barChartData[1].data[i] = null;
}
}
// for (let i = 0; i < this.barChartData[0].data.length; i++) {
// if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
// this.barChartData[1].data[i] = weeklyKwh[weekIndex++];
// } else {
// this.barChartData[1].data[i] = null;
// }
// }
});
}