perbaikan style monitoring building
This commit is contained in:
parent
a1f3069c05
commit
fcc9a97d99
|
|
@ -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,11 +27,20 @@
|
|||
}
|
||||
|
||||
:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
|
||||
stroke: #ff4c49;
|
||||
stroke: #d50c08;
|
||||
stroke-width: 20px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart3 .ct-series-b .ct-slice-donut {
|
||||
stroke: #757575;
|
||||
stroke-width: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-no-hover {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.btn-no-hover:hover {
|
||||
background-color: transparent !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}));
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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": []
|
||||
|
|
|
|||
Loading…
Reference in New Issue