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

perbaikan style monitoring building

This commit is contained in:
Fuzi_fauzia 2024-04-25 12:09:10 +07:00
parent a1f3069c05
commit fcc9a97d99
4 changed files with 59 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/content/hemat-app/monitoring/building/building.component.css
View File

@ -7,7 +7,7 @@
}
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
stroke: #49ff52;
stroke: #01a32f;
stroke-width: 20px !important;
}
@ -17,7 +17,7 @@
}
:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
stroke: #fff049;
stroke: #dcdf03;
stroke-width: 20px !important;
}
@ -27,7 +27,7 @@
}
:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
stroke: #ff4c49;
stroke: #d50c08;
stroke-width: 20px !important;
}
@ -35,3 +35,12 @@
stroke: #757575;
stroke-width: 20px !important;
}
.btn-no-hover {
border: none !important;
}
.btn-no-hover:hover {
background-color: transparent !important;
color: inherit !important;
}

56
src/app/content/hemat-app/monitoring/building/building.component.html
View File

@ -50,7 +50,14 @@
<hr style="border-top: 3px solid #100a0a" />
</div>
<div class="card-content">
<div class="donut-chart2">
<div
[ngClass]="{
'donut-chart1': data.donut.series[0] <= 50,
'donut-chart2':
data.donut.series[0] > 50 && data.donut.series[0] < 75,
'donut-chart3': data.donut.series[0] >= 75
}"
>
<x-chartist
*ngIf="data"
[data]="data.donut"
@ -79,53 +86,18 @@
</div>
<div class="card-body" style="padding-top: 0">
<div class="row mb-3">
<div class="col Started">
<div
class="col-xl-6 col-md-6 col-12"
*ngFor="let top of dataTop; let i = index"
>
<span class="mb-1 text-muted cardtext d-block"
>23% - Lighning</span
>
<div>
<ngb-progressbar
height="7px"
type="success"
[value]="23"
></ngb-progressbar>
</div>
</div>
<div class="col Progress">
<span class="mb-1 text-muted cardtext d-block"
>14% - In Progress</span
>{{ top.value[i] }}% - {{ top.label[i] }}</span
>
<div>
<ngb-progressbar
height="7px"
type="danger"
[value]="14"
></ngb-progressbar>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col Remaining">
<span class="mb-1 text-muted cardtext d-block"
>35% - Remaining</span
>
<div>
<ngb-progressbar
height="7px"
type="warning"
[value]="35"
></ngb-progressbar>
</div>
</div>
<div class="col Done">
<span class="mb-1 text-muted cardtext d-block"
>28% - Started</span
>
<div>
<ngb-progressbar
height="7px"
type="primary"
[value]="28"
[value]="top.value[i]"
></ngb-progressbar>
</div>
</div>

29
src/app/content/hemat-app/monitoring/building/building.component.ts
View File

@ -7,12 +7,12 @@ import { TableMonitoringService } from "../monitoring.service";
styleUrls: ["./building.component.css"],
})
export class BuildingComponent {
Data: any;
data: any;
public breadcrumb: any;
feedbacksdonutChart: any;
donutChart1: any;
filteredRows: any[];
data: any[];
dataTop: any[];
searchTerm: string = "";
colorChart: string = "";
@ -32,12 +32,9 @@ export class BuildingComponent {
this.donutChart1 = {
type: "Pie",
options: {
donut: {
colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
},
fullwidth: true,
height: "250px",
donut: true,
donutWidth: 60,
startAngle: 270,
total: 200,
@ -48,18 +45,14 @@ export class BuildingComponent {
}
fetchData() {
this.monitoringService.getMonitoringBuildingData().subscribe((Response) => {
this.data = Response
this.filteredRows = Response
for (let i = 0; i < this.filteredRows.length; i++) {
if (this.filteredRows[i].donut.series[0] <= 50) {
this.colorChart = "donut-chart1"
} else if (this.filteredRows[i].donut.series[0] > 50 && this.filteredRows[i].donut.series[0] < 75) {
this.colorChart = "donut-chart2"
} else {
this.colorChart = "donut-chart3"
}
}
this.monitoringService.getMonitoringBuildingData().subscribe((res) => {
this.data = res
this.filteredRows = res
this.dataTop = res.map(item => ({
label: item.topUse.label,
value: item.topUse.value
}));
});
}

26
src/assets/data/hemat/building.json
View File

@ -2,7 +2,11 @@
{
"id": 1,
"build_name": "PT Allbest Solusi Sistem",
"total": "2345",
"total": "342",
"topUse": {
"label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
"value": [20, 40, 10, 30]
},
"donut": {
"series": [20, 80],
"labels": []
@ -11,7 +15,11 @@
{
"id": 2,
"build_name": "PT Informa Media Pratama",
"total": "342",
"total": "670",
"topUse": {
"label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
"value": [20, 40, 10, 30]
},
"donut": {
"series": [40, 60],
"labels": []
@ -20,16 +28,24 @@
{
"id": 3,
"build_name": "PT Ikea",
"total": "342",
"total": "1480",
"topUse": {
"label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
"value": [20, 40, 10, 30]
},
"donut": {
"series": [50, 50],
"series": [70, 30],
"labels": []
}
},
{
"id": 4,
"build_name": "PT Tokopedia",
"total": "342",
"total": "2050",
"topUse": {
"label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
"value": [20, 40, 10, 30]
},
"donut": {
"series": [90, 10],
"labels": []