diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts index 4d89e24..ba22220 100644 --- a/src/app/_layout/settings/menu-settings.config.ts +++ b/src/app/_layout/settings/menu-settings.config.ts @@ -138,23 +138,23 @@ export const MenuSettingsConfig: MenuConfig = { // ] // } // }, - // { - // title: 'Templates', - // icon: 'la-television', - // page: 'null', - // submenu: { - // items: [ - // { - // title: 'Horizontal', - // page: 'null' - // }, - // { - // title: 'Vertical', - // page: 'null' - // }, - // ] - // } - // }, + { + title: 'Templates', + icon: 'la-television', + page: 'null', + submenu: { + items: [ + { + title: 'Horizontal', + page: 'null' + }, + { + title: 'Vertical', + page: 'null' + }, + ] + } + }, // { // title: 'APPS', // icon: 'la-mobile', diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css index bd893c0..e69de29 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.css +++ b/src/app/content/hemat-app/cost-management/cost-management.component.css @@ -1,190 +0,0 @@ -:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label { - font-family: inherit; - font-size: medium; - font-weight: bold; - color: #6B6F82; -} -:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right { - position: relative; - height: 50px !important; -} - -:host ::ng-deep .datatable-icon-right:before { - font-family: 'icofont'; - font-style: normal; -} - -:host ::ng-deep .datatable-icon-skip:before { - font-family: 'icofont'; - font-style: normal; -} - -:host ::ng-deep .datatable-icon-left:before { - font-family: 'icofont'; - font-style: normal; -} - -:host ::ng-deep .datatable-icon-left:before { - content: "\2039"; - font-size: x-large; -} - -:host ::ng-deep .datatable-icon-prev:before { - content: "\00AB"; - font-size: x-large; -} - -:host ::ng-deep .datatable-icon-right:before { - content: "\203A"; - font-size: x-large; -} - -:host ::ng-deep .datatable-icon-skip:before { - content: "\00BB"; - font-size: x-large; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left, -.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right, -.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev { - font-size: 16px; - line-height: 22px; - padding: 0px 09px; - background-color: #d4d2e7; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right, -.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right { - font-size: 16px; - line-height: 22px; - padding: 0px 09px; - background-color: #d4d2e7; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip { - font-size: 16px; - line-height: 22px; - padding: 0px 09px; - background-color: #d4d2e7; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev { - font-size: 16px; - line-height: 22px; - padding: 0px 09px; - background-color: #d4d2e7; -} - -:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a, -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] { - background-color: #d4d2e7; - font-weight: bold; - font-size: larger; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a { - height: 32px; - min-width: 34px; - line-height: 22px; - padding: 0; - border-radius: 3px; - margin: 0 3px; - text-align: center; - vertical-align: top; - padding-top: 3px; - text-decoration: none; - vertical-align: bottom; - color: #7c8091; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left, -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { - font-size: 14px; - line-height: 9px; - padding: 0px 08px; - background-color: #ffffff; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left, -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { - font-size: 0px; - line-height: 22px; - padding: 0px 09px; - background-color: #ffffff; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right, -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { - font-size: 0px; - line-height: 22px; - padding: 0px 09px; - background-color: #ffffff; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip, -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { - font-size: 0px; - line-height: 22px; - padding: 0px 09px; - background-color: #ffffff; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev, -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11], -.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] { - font-size: 0px; - line-height: 22px; - padding: 0px 09px; - background-color: #ffffff; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a { - background-color: #545454; - font-weight: bold; - color: white; - -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a, -.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a { - background-color: #545454; - font-weight: bold; - color: white; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { - background: #727e8e; - color: #ededed; - margin-top: -1px; - overflow: inherit; -} - -:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { - font-weight: bold; - height: unset !important; - overflow: inherit -} - -:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager { - flex: 0 0 0%; -} - -:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager { - display: flex; -} - -:host ::ng-deep .block-ui-wrapper { - background: rgba(255, 249, 249, 0.5) !important; -} -:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager { - flex: 0 0 0%; -} - -:host ::ng-deep .ngx-datatable { - display: -webkit-box; -} - diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts index 9d4917a..55153d6 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; -import { BlockUI, NgBlockUI } from 'ng-block-ui'; import { TableApiService } from 'src/app/_services/table-api.service'; @Component({ @@ -14,7 +13,19 @@ export class CostManagementComponent implements OnInit{ filteredRows: any[]; searchTerm: string = ""; rows: any = []; - @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI; + + barChart: any; + dataBar = { + "Bar": { + "labels": [], + "series": [ + [ + 80, + 60 + ] + ] + }, + } constructor( private tableApiservice: TableApiService, @@ -36,6 +47,24 @@ export class CostManagementComponent implements OnInit{ ], }; this.fetchData(); + + this.barChart = { + type: 'Bar', + data: this.dataBar.Bar, + options: { + fullwidth: true, + axisX: { + showGrid: false, + showLabel: false, + offset: 100 + }, + + axisY: { + showGrid: false, + showLabel: false + } + } + }; } fetchData() { diff --git a/src/app/content/hemat-app/cost-management/cost-management.module.ts b/src/app/content/hemat-app/cost-management/cost-management.module.ts index 7620b72..50595eb 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.module.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.module.ts @@ -12,6 +12,9 @@ import { NgSelectModule } from '@ng-select/ng-select'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ClipboardModule } from 'ngx-clipboard'; import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; +import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; +import { NgChartsModule } from 'ng2-charts'; +import { ChartistModule } from 'ng-chartist'; @@ -26,10 +29,13 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; BreadcrumbModule, NgSelectModule, FormsModule, + NgbModule, ReactiveFormsModule, ClipboardModule, PerfectScrollbarModule, NgxDatatableModule, + NgChartsModule, + ChartistModule, BlockUIModule.forRoot({ template: BlockTemplateComponent }), diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.css b/src/app/content/hemat-app/monitoring/detail/detail.component.css index 0f0b783..39d3165 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.css +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css @@ -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; +} diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html index 1f25814..0462bfe 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -11,8 +11,8 @@
+
Electricity

278 Kwh

- Electricity
@@ -28,8 +28,8 @@
+
Water

156

- Water
+
Device

{{ device }}

- Device
@@ -64,8 +64,8 @@
+
Room

{{ room }}

- Room
@@ -88,7 +88,7 @@ > Appointment -
+
+
+
+
+
+

Air Quality

+
+
+
+
+

Rp 1.253.634.234

+

+ Based on the estimated costs you have +

+
+
+
+
+
+
+
+
+

Air Quality

+
+
+
+
+ + +
+
+

+ 76 % +

+
+
+
+
+
+
+
+
+

Temperature and Humidity

+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

+ General Lighting + 89% +

+ +
+
+ +
+
+ +
+
+

+ Accent Lighting + 89% +

+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

+ Floor Lighting + 89% +

+ +
+
+ +
+
+ +
+
+

+ Last Lighting + 89% +

+ +
+
+
+
+
+
+
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts index 0cdfea0..1b4c667 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -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: "", },