penyesuaian UI monitoring energy
This commit is contained in:
@@ -9,3 +9,74 @@ canvas {
|
||||
max-height: 400px; /* Atur tinggi maksimal sesuai keinginan Anda */
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
: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-chart1{
|
||||
margin-bottom: -25px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart2{
|
||||
margin-bottom: -25px;
|
||||
margin-top: -17px;
|
||||
} */
|
||||
|
||||
: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;
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5>Electricity</h5>
|
||||
<h3 class="danger">278 Kwh</h3>
|
||||
<span>Electricity</span>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-energy danger font-large-2 float-right"></i>
|
||||
@@ -28,8 +28,8 @@
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5>Water</h5>
|
||||
<h3 class="success">156</h3>
|
||||
<span>Water</span>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i
|
||||
@@ -47,8 +47,8 @@
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5>Device</h5>
|
||||
<h3 class="warning">{{ device }}</h3>
|
||||
<span>Device</span>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-bulb warning font-large-2 float-right"></i>
|
||||
@@ -64,8 +64,8 @@
|
||||
<div class="card-body">
|
||||
<div class="media d-flex">
|
||||
<div class="media-body text-left">
|
||||
<h5>Room</h5>
|
||||
<h3 class="info">{{ room }}</h3>
|
||||
<span>Room</span>
|
||||
</div>
|
||||
<div class="align-self-center">
|
||||
<i class="icon-map info font-large-2 float-right"></i>
|
||||
@@ -88,7 +88,7 @@
|
||||
>
|
||||
<ng-container mCardHeaderTitle> Appointment </ng-container>
|
||||
<ng-container mCardBody>
|
||||
<div class="z" style="display: block;">
|
||||
<div class="z" style="display: block">
|
||||
<canvas
|
||||
class="barchart"
|
||||
height="328"
|
||||
@@ -109,6 +109,169 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<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="text-center" style="height: 150px !important">
|
||||
<h2 class="font-large-3 text-bold-400">Rp 1.253.634.234</h2>
|
||||
<p class="blue-grey lighten-2 mb-0 mt-2">
|
||||
Based on the estimated costs you have
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<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-4">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-content">
|
||||
<div class="card-body cleartfix">
|
||||
<div class="media align-items-stretch mb-2">
|
||||
<div class="align-self-center">
|
||||
<i class="icon-energy background-round info font-large-2 mr-2"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p>
|
||||
General Lighting
|
||||
<span class="float-right text-bold-600">89%</span>
|
||||
</p>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="90"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media align-items-stretch mt-2">
|
||||
<div class="align-self-center">
|
||||
<i class="icon-energy background-round info font-large-2 mr-2"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p>
|
||||
Accent Lighting
|
||||
<span class="float-right text-bold-600">89%</span>
|
||||
</p>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="90"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card overflow-hidden">
|
||||
<div class="card-content">
|
||||
<div class="card-body cleartfix">
|
||||
<div class="media align-items-stretch mb-2">
|
||||
<div class="align-self-center">
|
||||
<i class="icon-layers background-round info font-large-2 mr-2"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p>
|
||||
Floor Lighting
|
||||
<span class="float-right text-bold-600">89%</span>
|
||||
</p>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="90"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media align-items-stretch mt-2">
|
||||
<div class="align-self-center">
|
||||
<i class="icon-bulb background-round info font-large-2 mr-2"></i>
|
||||
</div>
|
||||
<div class="media-body">
|
||||
<p>
|
||||
Last Lighting
|
||||
<span class="float-right text-bold-600">89%</span>
|
||||
</p>
|
||||
<ngb-progressbar
|
||||
height="7px"
|
||||
type="danger"
|
||||
[value]="90"
|
||||
></ngb-progressbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,6 +2,7 @@ import { Component } from "@angular/core";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { BuildingService } from "../../service/monitoring-api.service";
|
||||
import * as chartsData from "./data";
|
||||
import * as Chartist from 'chartist';
|
||||
import { ChartOptions, ChartType, ChartDataset } from "chart.js";
|
||||
|
||||
@Component({
|
||||
@@ -13,7 +14,25 @@ export class DetailComponent {
|
||||
data: any;
|
||||
mode: string;
|
||||
breadcrumb: any;
|
||||
// chart
|
||||
donutChart1: any;
|
||||
donutChart2: any;
|
||||
sparklineArea: any
|
||||
|
||||
dataChart = {
|
||||
"donut": {
|
||||
"series": [20, 20, 20, 20, 20],
|
||||
"labels": []
|
||||
}
|
||||
}
|
||||
|
||||
dataChart2 = {
|
||||
"donut": {
|
||||
"series": [50, 50],
|
||||
"labels": []
|
||||
}
|
||||
}
|
||||
|
||||
// chart bar
|
||||
public barChartOptions: ChartOptions = {
|
||||
responsive: true,
|
||||
scales: {
|
||||
@@ -96,22 +115,67 @@ export class DetailComponent {
|
||||
this.devicePerBuilding(buildingId);
|
||||
}
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
breadcrumbLink() {
|
||||
if (this.mode === "room") {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
mainlabel: "Energy Monitoring",
|
||||
linkBack: "/monitoring/monitoring-room",
|
||||
isLinkBack: true,
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
name: "Dashboard",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
name: "Energy Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
@@ -119,17 +183,17 @@ export class DetailComponent {
|
||||
};
|
||||
} else {
|
||||
this.breadcrumb = {
|
||||
mainlabel: "Detail Monitoring",
|
||||
mainlabel: "Energy Monitoring",
|
||||
linkBack: "/monitoring",
|
||||
isLinkBack: true,
|
||||
links: [
|
||||
{
|
||||
name: "Home",
|
||||
name: "Dashboard",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
{
|
||||
name: "Detail Monitoring",
|
||||
name: "Energy Monitoring",
|
||||
isLink: false,
|
||||
link: "",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user