penyesuaian UI monitoring energy

src/app/_layout/settings/menu-settings.config.ts

@@ -138,23 +138,23 @@ export const MenuSettingsConfig: MenuConfig = {
     //       ]
     //     }
     //   },
-    //   {
+      {
-    //     title: 'Templates',
+        title: 'Templates',
-    //     icon: 'la-television',
+        icon: 'la-television',
-    //     page: 'null',
+        page: 'null',
-    //     submenu: {
+        submenu: {
-    //       items: [
+          items: [
-    //         {
+            {
-    //           title: 'Horizontal',
+              title: 'Horizontal',
-    //           page: 'null'
+              page: 'null'
-    //         },
+            },
-    //         {
+            {
-    //           title: 'Vertical',
+              title: 'Vertical',
-    //           page: 'null'
+              page: 'null'
-    //         },
+            },
-    //       ]
+          ]
-    //     }
+        }
-    //   },
+      },
     //   {
     //     title: 'APPS',
     //     icon: 'la-mobile',

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;
-}
-

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() {

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
     }),

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;
+}

src/app/content/hemat-app/monitoring/detail/detail.component.html

@@ -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>

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: "",
           },