integrasi dashboard energy monitoring
This commit is contained in:
@@ -0,0 +1,63 @@
|
||||
:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
|
||||
stroke: green;
|
||||
stroke-width: 50px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
|
||||
stroke: yellow;
|
||||
stroke-width: 50px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-series-c .ct-slice-donut {
|
||||
stroke: orange;
|
||||
stroke-width: 50px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-series-d .ct-slice-donut {
|
||||
stroke: red;
|
||||
stroke-width: 50px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart1 .ct-series-e .ct-slice-donut {
|
||||
stroke: darkred;
|
||||
stroke-width: 50px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
|
||||
stroke: #8a8a8a;
|
||||
stroke-width: 20px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
|
||||
stroke: #bef264;
|
||||
stroke-width: 20px !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 {
|
||||
-webkit-filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)) !important;
|
||||
filter: drop-shadow(0px 10px 11px rgba(187, 187, 187));
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-label {
|
||||
fill: #111010;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point {
|
||||
stroke: #bef264;
|
||||
}
|
||||
|
||||
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line {
|
||||
stroke: #bef264;
|
||||
}
|
||||
|
||||
:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area {
|
||||
fill: #bef264;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
:host ::ng-deep .sp-line-total-cost .ct-point {
|
||||
stroke-width: 0px;
|
||||
}
|
||||
@@ -1,37 +1,112 @@
|
||||
<div class="app-content content bg-maintenance-image">
|
||||
<div class="app-content content">
|
||||
<div class="content-wrapper">
|
||||
<div class="content-header row mb-1">
|
||||
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<section class="flexbox-container">
|
||||
<div class="col-12 d-flex align-items-center justify-content-center">
|
||||
<div class="col-md-4 col-10 box-shadow-2 p-0">
|
||||
<div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
|
||||
<div class="card-body">
|
||||
<span class="card-title text-center">
|
||||
<img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
|
||||
width="250" alt="logo">
|
||||
</span>
|
||||
<section>
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title text-center">Temperature and Humidity</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div class="donut-chart2" style="height: 150px !important">
|
||||
<x-chartist
|
||||
*ngIf="donutChart2"
|
||||
[data]="donutChart2.data"
|
||||
[type]="donutChart2.type"
|
||||
[options]="donutChart2.options"
|
||||
[responsiveOptions]="donutChart2.responsiveOptions"
|
||||
[events]="donutChart2.events"
|
||||
></x-chartist>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body text-center">
|
||||
<h3>Coming Soon</h3>
|
||||
<p>We're sorry for the inconvenience.
|
||||
<br> Please check back later.</p>
|
||||
<div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
|
||||
</div>
|
||||
<hr>
|
||||
<!-- <p class="socialIcon card-text text-center pt-2 pb-2">
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
|
||||
class="la la-facebook"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
|
||||
class="la la-twitter"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
|
||||
class="la la-linkedin font-medium-4"></span></a>
|
||||
<a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
|
||||
class="la la-github font-medium-4"></span></a>
|
||||
</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title text-center">Air Quality</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div class="donut-chart1" style="height: 150px !important">
|
||||
<x-chartist
|
||||
*ngIf="donutChart1"
|
||||
[data]="donutChart1.data"
|
||||
[type]="donutChart1.type"
|
||||
[options]="donutChart1.options"
|
||||
[responsiveOptions]="donutChart1.responsiveOptions"
|
||||
[events]="donutChart1.events"
|
||||
></x-chartist>
|
||||
</div>
|
||||
<div
|
||||
class="text-center"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
"
|
||||
>
|
||||
<h3
|
||||
class="display-4 blue-grey darken-1"
|
||||
style="font-size: 2em"
|
||||
>
|
||||
76 %
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title text-center">Comparison of Actual Costs and Estimated Costs</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="flex-grow-1">
|
||||
<ngb-progressbar
|
||||
height="45px"
|
||||
type="danger"
|
||||
[value]="89"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
<div
|
||||
class="ml-2 d-flex align-items-center"
|
||||
style="height: 20px"
|
||||
>
|
||||
<span class="text-bold-600">1.234.242</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<ngb-progressbar
|
||||
height="45px"
|
||||
type="success"
|
||||
[value]="50"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
<div
|
||||
class="ml-2 d-flex align-items-center"
|
||||
style="height: 20px"
|
||||
>
|
||||
<span class="text-bold-600">1.545.232</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,6 +14,21 @@ export class CostManagementComponent implements OnInit{
|
||||
searchTerm: string = "";
|
||||
rows: any = [];
|
||||
|
||||
donutChart1: any;
|
||||
donutChart2: any;
|
||||
dataChart = {
|
||||
donut: {
|
||||
series: [50, 50],
|
||||
labels: [],
|
||||
},
|
||||
};
|
||||
dataChart2 = {
|
||||
donut: {
|
||||
series: [50, 50],
|
||||
labels: [],
|
||||
},
|
||||
};
|
||||
|
||||
barChart: any;
|
||||
dataBar = {
|
||||
"Bar": {
|
||||
@@ -65,6 +80,50 @@ export class CostManagementComponent implements OnInit{
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.donutChart1 = {
|
||||
type: "Pie",
|
||||
data: this.dataChart.donut,
|
||||
options: {
|
||||
fullwidth: true,
|
||||
height: "300px",
|
||||
donut: true,
|
||||
donutWidth: 70,
|
||||
startAngle: 270,
|
||||
total: 200,
|
||||
showLabel: true,
|
||||
},
|
||||
};
|
||||
this.donutChart2 = {
|
||||
type: "Pie",
|
||||
data: this.dataChart2.donut,
|
||||
options: {
|
||||
chartPadding: 0,
|
||||
fullwidth: true,
|
||||
height: "150px",
|
||||
donut: true,
|
||||
showLabel: true,
|
||||
startAngle: 0,
|
||||
labelInterpolationFnc: function (value) {
|
||||
const total = 82;
|
||||
return total + "C";
|
||||
},
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === "label") {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2,
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
fetchData() {
|
||||
|
||||
Reference in New Issue
Block a user