penambahan routing master dan monitoring

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

@@ -899,7 +899,19 @@ export const MenuSettingsConfig: MenuConfig = {
       {
         title: 'Monitoring',
         icon: 'feather ft-monitor',
-        page: '/monitoring'
+        page: '/monitoring',
+        submenu: {
+          items: [
+           {
+              title: 'Monitoring Building',
+              page: '/monitoring/monitoring-building'
+            },
+            {
+              title: 'Monitoring Room',
+              page: '/monitoring/monitoring-room'
+            },           
+          ]
+        }
       },
       {
         title: 'Device',
@@ -916,6 +928,31 @@ export const MenuSettingsConfig: MenuConfig = {
         icon: 'feather ft-user-check',
         page: '/user-access'
       },
+      {
+        title: 'Master',
+        icon: 'feather ft-server',
+        page: 'null',
+        submenu: {
+          items: [
+           {
+              title: 'Master Category',
+              page: '/master/master-category'
+            },
+            {
+              title: 'Master Location',
+              page: '/master/master-location'
+            },
+            {
+              title: 'Master Location Room',
+              page: '/master/master-location-room'
+            },
+            {
+              title: 'Master Type',
+              page: '/master/master-type'
+            }           
+          ]
+        }
+      },
 
       { section: 'APPS', icon: 'la-ellipsis-h' },
       {

src/app/content/hemat-app/master/master-category/master-category.component.html

@@ -0,0 +1 @@
+<p>master-category works!</p>

src/app/content/hemat-app/master/master-category/master-category.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MasterCategoryComponent } from './master-category.component';
+
+describe('MasterCategoryComponent', () => {
+  let component: MasterCategoryComponent;
+  let fixture: ComponentFixture<MasterCategoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MasterCategoryComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MasterCategoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/master/master-category/master-category.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-master-category',
+  templateUrl: './master-category.component.html',
+  styleUrls: ['./master-category.component.css']
+})
+export class MasterCategoryComponent {
+
+}

src/app/content/hemat-app/master/master-location-room/master-location-room.component.html

@@ -0,0 +1 @@
+<p>master-location-room works!</p>

src/app/content/hemat-app/master/master-location-room/master-location-room.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MasterLocationRoomComponent } from './master-location-room.component';
+
+describe('MasterLocationRoomComponent', () => {
+  let component: MasterLocationRoomComponent;
+  let fixture: ComponentFixture<MasterLocationRoomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MasterLocationRoomComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MasterLocationRoomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/master/master-location-room/master-location-room.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-master-location-room',
+  templateUrl: './master-location-room.component.html',
+  styleUrls: ['./master-location-room.component.css']
+})
+export class MasterLocationRoomComponent {
+
+}

src/app/content/hemat-app/master/master-location/master-location.component.html

@@ -0,0 +1 @@
+<p>master-location works!</p>

src/app/content/hemat-app/master/master-location/master-location.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MasterLocationComponent } from './master-location.component';
+
+describe('MasterLocationComponent', () => {
+  let component: MasterLocationComponent;
+  let fixture: ComponentFixture<MasterLocationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MasterLocationComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MasterLocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/master/master-location/master-location.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-master-location',
+  templateUrl: './master-location.component.html',
+  styleUrls: ['./master-location.component.css']
+})
+export class MasterLocationComponent {
+
+}

src/app/content/hemat-app/master/master-type/master-type.component.html

@@ -0,0 +1 @@
+<p>master-type works!</p>

src/app/content/hemat-app/master/master-type/master-type.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MasterTypeComponent } from './master-type.component';
+
+describe('MasterTypeComponent', () => {
+  let component: MasterTypeComponent;
+  let fixture: ComponentFixture<MasterTypeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MasterTypeComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MasterTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/master/master-type/master-type.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-master-type',
+  templateUrl: './master-type.component.html',
+  styleUrls: ['./master-type.component.css']
+})
+export class MasterTypeComponent {
+
+}

src/app/content/hemat-app/master/master.module.ts

@@ -1,12 +1,62 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { MasterCategoryComponent } from './master-category/master-category.component';
+import { MasterLocationComponent } from './master-location/master-location.component';
+import { MasterLocationRoomComponent } from './master-location-room/master-location-room.component';
+import { MasterTypeComponent } from './master-type/master-type.component';
+
+import { RouterModule } from '@angular/router';
+import { ChartistModule } from 'ng-chartist';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { FormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgChartsModule } from 'ng2-charts';
+import { BlockUIModule } from 'ng-block-ui';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
+import { CardModule } from '../../partials/general/card/card.module';
+import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
 
 
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    MasterCategoryComponent,
+    MasterLocationComponent,
+    MasterLocationRoomComponent,
+    MasterTypeComponent
+  ],
   imports: [
-    CommonModule
+    CommonModule,
+    ChartistModule,
+    FormsModule,
+    NgChartsModule,
+    CardModule,
+    MatchHeightModule,
+    NgxDatatableModule,
+    PerfectScrollbarModule,
+    NgbModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: 'master-category',
+        component: MasterCategoryComponent
+      },
+      {
+        path: 'master-location',
+        component: MasterLocationComponent
+      },
+      {
+        path: 'master-location-room',
+        component: MasterLocationRoomComponent
+      },
+      {
+        path: 'master-type',
+        component: MasterTypeComponent
+      }
+    ])
   ]
 })
 export class MasterModule { }

src/app/content/hemat-app/monitoring/building/building.component.css

@@ -0,0 +1,140 @@
+:host ::ng-deep .Likes .ct-series-a .ct-point {
+    stroke: #28d094;
+}
+:host ::ng-deep .Likes .ct-line {
+    fill: none;
+    stroke-width: 2px;
+}
+:host ::ng-deep .Likes .ct-point{
+    stroke-width: 0px;
+}
+:host ::ng-deep .Likes .ct-series-a .ct-line {
+    stroke: #28d094;
+}
+:host ::ng-deep .Likes .ct-series-a .ct-area {
+    fill: #28d094;
+}
+:host ::ng-deep .Comments .ct-series-a .ct-point {
+    stroke: #FF9149;
+}
+:host ::ng-deep .Comments .ct-line {
+    fill: none;
+    stroke-width: 2px;
+}
+:host ::ng-deep .Comments .ct-point{
+    stroke-width: 0px;
+}
+:host ::ng-deep .Comments .ct-series-a .ct-line {
+    stroke: #FF9149;
+}
+:host ::ng-deep .Comments .ct-series-a .ct-area {
+    fill: #FF9149;
+}
+:host ::ng-deep .Views .ct-series-a .ct-point {
+    stroke: #FF4961;
+}
+:host ::ng-deep .Views .ct-line {
+    fill: none;
+    stroke-width: 2px;
+}
+:host ::ng-deep .Views .ct-point{
+    stroke-width: 0px;
+}
+:host ::ng-deep .Views .ct-series-a .ct-line {
+    stroke: #FF4961;
+}
+:host ::ng-deep .Views .ct-series-a .ct-area {
+    fill: #FF4961;
+}
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{
+    stroke: #ff9149;
+}
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{
+    stroke: #ff9149;
+
+}
+:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{
+    fill: #ff9149;
+    fill-opacity: 1;
+}
+:host ::ng-deep .sp-line-total-cost .ct-point{
+    stroke-width: 0px;
+}
+:host ::ng-deep .sp-line-total-cost svg {
+    margin-left: 13px;
+}
+:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-point{
+    stroke: #28d094;
+}
+:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-line{
+    stroke: #28d094;
+
+}
+:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-area{
+    fill: #28d094;
+    fill-opacity: 1;
+}
+:host ::ng-deep .sp-line-total-sales .ct-point{
+    stroke-width: 0px;
+}
+:host ::ng-deep .sp-line-total-sales svg {
+    margin-left: 13px;
+}
+:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-point{
+    stroke: #ff4961;
+}
+:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-line{
+    stroke: #ff4961;
+
+}
+:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-area{
+    fill: #ff4961;
+    fill-opacity: 1;
+}
+:host ::ng-deep .sp-line-total-revenue .ct-point{
+    stroke-width: 0px;
+}
+:host ::ng-deep .sp-line-total-revenue svg {
+    margin-left: 13px;
+}
+:host ::ng-deep .ct-bar {
+    fill: none;
+    stroke-width: 2px;
+}
+:host ::ng-deep  .sp-bar-total-cost .ct-series-a .ct-bar{
+    stroke: #ff9148;
+}
+:host ::ng-deep  .sp-bar-total-sales .ct-series-a .ct-bar{
+    stroke: #28d094;
+}
+:host ::ng-deep  .sp-bar-total-revenue .ct-series-a .ct-bar{
+    stroke: #ff4961;
+}
+:host ::ng-deep  .sp-bar-total-cost {
+    margin-bottom: -90px;
+}
+:host ::ng-deep  .sp-bar-total-sales{
+    margin-bottom: -90px;
+}
+:host ::ng-deep  .sp-bar-total-revenue{
+    margin-bottom: -90px;
+}
+:host ::ng-deep .feedbacks .ct-series-a .ct-slice-donut {
+    stroke: #28d094;
+    stroke-width: 10px !important;
+}
+:host ::ng-deep .Subscribers .ct-series-a .ct-slice-donut {
+    stroke: #ff9149;
+    stroke-width: 10px !important;
+}
+:host ::ng-deep .Users .ct-series-a .ct-slice-donut {
+    stroke: #ff4961;
+    stroke-width: 10px !important;
+}
+:host ::ng-deep  .ct-series-b .ct-slice-donut {
+    stroke: #eeeeee;
+    stroke-width: 12px !important;
+}
+:host ::ng-deep  .text-muted {
+   position: absolute;
+}

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

@@ -0,0 +1,194 @@
+<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 id="social-cards">
+        <div class="row mt-2">
+          <div class="col-xl-4 col-md-6 col-12">
+            <div class="card">
+              <div class="card-content">
+                <div class="card-body text-center">
+                  <div class="card-header mb-2">
+                    <span class="success">New Feedbacks</span>
+                    <h3 class="display-4 blue-grey darken-1">2,487</h3>
+                  </div>
+                  <div class="card-content">
+                    <i
+                      class="knob-center-icon icon-note knob hide-value responsive angle-offset"
+                      style="
+                        width: 79px;
+                        height: 50px;
+                        position: absolute;
+                        vertical-align: middle;
+                        margin-top: 70px;
+                        margin-left: -30px;
+                        border: 0px;
+                        background: none;
+                        font: bold 30px Arial;
+                        text-align: center;
+                        color: rgb(225, 225, 225);
+                        padding: 0px;
+                        font-size: 50px;
+                      "
+                    ></i>
+                    <x-chartist
+                      *ngIf="feedbacksdonutChart"
+                      class="feedbacks"
+                      [data]="feedbacksdonutChart.data"
+                      [type]="feedbacksdonutChart.type"
+                      [options]="feedbacksdonutChart.options"
+                      [responsiveOptions]="
+                        feedbacksdonutChart.responsiveOptions
+                      "
+                      [events]="feedbacksdonutChart.events"
+                    >
+                    </x-chartist>
+                    <ul class="list-inline clearfix mt-2">
+                      <li
+                        class="border-right-blue-grey border-right-lighten-2 pr-1"
+                      >
+                        <h1 class="blue-grey darken-1 text-bold-400">95%</h1>
+                        <span class="success"
+                          ><i class="la la-caret-up"></i> Positive</span
+                        >
+                      </li>
+                      <li>
+                        <h1 class="blue-grey darken-1 text-bold-400">5%</h1>
+                        <span class="danger darken-2"
+                          ><i class="la la-caret-down"></i> Negative</span
+                        >
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-xl-4 col-md-6 col-12">
+            <div class="card">
+              <div class="card-content">
+                <div class="card-body text-center">
+                  <div class="card-header mb-2">
+                    <span class="success">New Feedbacks</span>
+                    <h3 class="display-4 blue-grey darken-1">2,487</h3>
+                  </div>
+                  <div class="card-content">
+                    <i
+                      class="knob-center-icon icon-note knob hide-value responsive angle-offset"
+                      style="
+                        width: 79px;
+                        height: 50px;
+                        position: absolute;
+                        vertical-align: middle;
+                        margin-top: 70px;
+                        margin-left: -30px;
+                        border: 0px;
+                        background: none;
+                        font: bold 30px Arial;
+                        text-align: center;
+                        color: rgb(225, 225, 225);
+                        padding: 0px;
+                        font-size: 50px;
+                      "
+                    ></i>
+                    <x-chartist
+                      *ngIf="feedbacksdonutChart"
+                      class="feedbacks"
+                      [data]="feedbacksdonutChart.data"
+                      [type]="feedbacksdonutChart.type"
+                      [options]="feedbacksdonutChart.options"
+                      [responsiveOptions]="
+                        feedbacksdonutChart.responsiveOptions
+                      "
+                      [events]="feedbacksdonutChart.events"
+                    >
+                    </x-chartist>
+                    <ul class="list-inline clearfix mt-2">
+                      <li
+                        class="border-right-blue-grey border-right-lighten-2 pr-1"
+                      >
+                        <h1 class="blue-grey darken-1 text-bold-400">95%</h1>
+                        <span class="success"
+                          ><i class="la la-caret-up"></i> Positive</span
+                        >
+                      </li>
+                      <li>
+                        <h1 class="blue-grey darken-1 text-bold-400">5%</h1>
+                        <span class="danger darken-2"
+                          ><i class="la la-caret-down"></i> Negative</span
+                        >
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-xl-4 col-md-6 col-12">
+            <div class="card">
+              <div class="card-content">
+                <div class="card-body text-center">
+                  <div class="card-header mb-2">
+                    <span class="success">New Feedbacks</span>
+                    <h3 class="display-4 blue-grey darken-1">2,487</h3>
+                  </div>
+                  <div class="card-content">
+                    <i
+                      class="knob-center-icon icon-note knob hide-value responsive angle-offset"
+                      style="
+                        width: 79px;
+                        height: 50px;
+                        position: absolute;
+                        vertical-align: middle;
+                        margin-top: 70px;
+                        margin-left: -30px;
+                        border: 0px;
+                        background: none;
+                        font: bold 30px Arial;
+                        text-align: center;
+                        color: rgb(225, 225, 225);
+                        padding: 0px;
+                        font-size: 50px;
+                      "
+                    ></i>
+                    <x-chartist
+                      *ngIf="feedbacksdonutChart"
+                      class="feedbacks"
+                      [data]="feedbacksdonutChart.data"
+                      [type]="feedbacksdonutChart.type"
+                      [options]="feedbacksdonutChart.options"
+                      [responsiveOptions]="
+                        feedbacksdonutChart.responsiveOptions
+                      "
+                      [events]="feedbacksdonutChart.events"
+                    >
+                    </x-chartist>
+                    <ul class="list-inline clearfix mt-2">
+                      <li
+                        class="border-right-blue-grey border-right-lighten-2 pr-1"
+                      >
+                        <h1 class="blue-grey darken-1 text-bold-400">95%</h1>
+                        <span class="success"
+                          ><i class="la la-caret-up"></i> Positive</span
+                        >
+                      </li>
+                      <li>
+                        <h1 class="blue-grey darken-1 text-bold-400">5%</h1>
+                        <span class="danger darken-2"
+                          ><i class="la la-caret-down"></i> Negative</span
+                        >
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- // Social cards section end -->
+    </div>
+  </div>
+</div>

src/app/content/hemat-app/monitoring/building/building.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MonitoringComponent } from './monitoring.component';
+import { BuildingComponent } from './building.component';
 
-describe('MonitoringComponent', () => {
+describe('BuildingComponent', () => {
-  let component: MonitoringComponent;
+  let component: BuildingComponent;
-  let fixture: ComponentFixture<MonitoringComponent>;
+  let fixture: ComponentFixture<BuildingComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MonitoringComponent ]
+      declarations: [ BuildingComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MonitoringComponent);
+    fixture = TestBed.createComponent(BuildingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/content/hemat-app/monitoring/building/building.component.ts

@@ -0,0 +1,58 @@
+import { Component } from "@angular/core";
+import { ChartApiService } from "src/app/_services/chart.api";
+
+@Component({
+  selector: "app-building",
+  templateUrl: "./building.component.html",
+  styleUrls: ["./building.component.css"],
+})
+export class BuildingComponent {
+  Data: any;
+  public breadcrumb: any;
+  feedbacksdonutChart: any;
+
+  constructor(private chartApiservice: ChartApiService) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Advance Social Cards",
+      links: [
+        {
+          name: "Home",
+          isLink: true,
+          link: "/dashboard/sales",
+        },
+        {
+          name: "Advance Cards",
+          isLink: true,
+          link: "#",
+        },
+        {
+          name: "Social",
+          isLink: false,
+          link: "#",
+        },
+      ],
+    };
+    this.chartApiservice.getStatisticsData().subscribe((Response) => {
+      this.Data = Response;
+      this.getlineArea();
+    });
+  }
+
+  getlineArea() {
+    const ChartData = this.Data;
+    this.feedbacksdonutChart = {
+      type: "Pie",
+      data: ChartData["feedbacksdonutChart"],
+      options: {
+        showLabel: false,
+        chartPadding: 0,
+        fullwidth: true,
+        height: "200px",
+        donut: true,
+        startAngle: 0,
+      },
+    };
+  }
+}

src/app/content/hemat-app/monitoring/monitoring.component.css

@@ -1,281 +0,0 @@
-:host ::ng-deep .chartist .ct-series-a .ct-line {
-
-    stroke: url(#gradient2);
-    stroke-linecap: round;
-    /* -webkit-filter: drop-shadow(0px 20px 11px rgba(0, 0, 0, 0.5)) !important; */
-   }
-:host ::ng-deep .chartist {
-    filter: drop-shadow(0px 20px 11px rgba(252, 198, 198, 0.8)) !important;
-}
-
-:host ::ng-deep .chartist .ct-grid{
-    stroke-dasharray: 0px;
-    stroke: rgba(0, 0, 0, 0.4);
-    stroke-width: 0.6px;
-}
-:host ::ng-deep .chartist .ct-series-b .ct-line {
-    stroke: #c8c2c3;
-    stroke-dasharray: 8px 3px;
-}
-
-:host ::ng-deep .chartist .ct-label.ct-vertical.ct-start {
-    font-weight: 600;
-    color: #636161;
-    font-size: 12px;
-}
-:host ::ng-deep .earningchart .ct-series-a .ct-area {
-    fill: rgba(255,117,136,1);
-}
-:host ::ng-deep .earningchart .ct-series-a .ct-point-circle {
-    stroke-width: 3px;
-    stroke: #FF4961;
-    fill: #ffffff;
-  }
-
-:host ::ng-deep .earningchart .ct-series-a .ct-line {
-    stroke: #FF4961;
-    stroke-width: 3px;
-}
-
-:host ::ng-deep .avatar-xs {
-  width: 32px !important;
-  border: 2px solid #FFF;
-}
-:host ::ng-deep .donut-chart2{
-    margin-bottom: -25px;
-    margin-top: -17px;
-}
-
-:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
-    stroke: #28d094;
-    stroke-width: 5.5px !important;
-}
-
-:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
-    stroke: #ff4961;
-    stroke-width: 5.5px !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-chart1 {
-    margin-bottom: -25px;
-    margin-top: -17px;
-}
-:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
-    stroke: #ff7889;
-    stroke-width: 5.5px !important;
-}
-
-:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
-    stroke: #ffffff;
-    stroke-width: 5.5px !important;
-}
-
-:host ::ng-deep .donut-chart1 .ct-label {
-    fill: #ffffff;
-    color: rgba(0, 0, 0, 0.4);
-    font-size: 1.75rem;
-    line-height: 1;
-}
-
-:host ::ng-deep .donut-chart2 .ct-label {
-    fill: #ff4b62;
-    color: rgba(0, 0, 0, 0.4);
-    font-size: 1.75rem;
-    line-height: 1;
-}
-
-:host ::ng-deep .position-relative {
-    position: relative !important;
-    margin-left: 0px;
-
-}
-
-:host ::ng-deep .pt-1,
-.py-1 {
-    padding-top: 0rem !important;
-}
-
-:host ::ng-deep .chartist .ct-label.ct-horizontal.ct-end {
-    /* align-items: flex-start;
-    justify-content: flex-start;
-    text-align: left;
-    text-anchor: start; */
-    font-weight: 600;
-    color: #636161;
-    font-size: 12px;
-    font-family: sans-serif;
-}
-
-
-:host ::ng-deep .container > .ct-chart .ct-series.ct-series-c .ct-line {
-    stroke-width: 2px;
-    stroke-dasharray: 20px 180px;
-    stroke: #28d094;
-    animation: draw 0.3s linear infinite;
-}
-
-@keyframes draw {
-    from {
-        stroke-dashoffset: 200
-    }
-
-    to {
-        stroke-dashoffset: 0;
-    }
-}
-
-:host ::ng-deep .ct-series-c .ct-point,
-.ct-series-c .ct-line,
-.ct-series-c .ct-bar,
-.ct-series-c .ct-slice-donut {
-    stroke: #28d094;
-}
-
-:host ::ng-deep .ct-chart .ct-series.ct-series-c .ct-line {
-    stroke: #28d094;
-
-}
-
-:host ::ng-deep .ct-series-b .ct-point,
-.ct-series-b .ct-line,
-.ct-series-b .ct-bar,
-.ct-series-b .ct-slice-donut {
-    stroke: #ff4961;
-}
-
-:host ::ng-deep .container > .ct-chart .ct-series.ct-series-a .ct-line {
-    stroke-dasharray: 5px;
-    animation: dash 4s linear infinite;
-
-}
-
-@keyframes dash {
-    to {
-        stroke-dashoffset: 2000;
-    }
-}
-
-:host ::ng-deep .ct-chart .ct-point {
-    stroke-width: 10px;
-    stroke-linecap: round;
-}
-
-:host ::ng-deep .container >  .ct-chart .ct-series.ct-series-b .ct-line {
-    stroke-width: 10px;
-    stroke-dasharray: 15px 5px;
-    animation: draw 4s linear infinite;
-}
-
-@keyframes draw {
-    from {
-        stroke-dashoffset: 100
-    }
-
-    to {
-        stroke-dashoffset: 0;
-    }
-}
-
-
-:host ::ng-deep .container {
-   max-width: 100% !important;
-}
-:host ::ng-deep .btn.gradient-blackberry.active,
-.gradient-blackberry {
-    background-color: #f05b4f;
-
-}
-
-:host ::ng-deep .Visit {
-
-    background-color: #28d094;
-
-}
-
-:host ::ng-deep .Sales {
-    /* background-image: linear-gradient(45deg,#843cf7,#38b8f2)!important; */
-    background-color: #d70206;
-
-}
-
-:host ::ng-deep .col-md-11 {
-    padding-right: 0 !important;
-}
-
-:host ::ng-deep .col-md-1 {
-    padding-left: 0 !important;
-}
-
-:host ::ng-deep .box-shadow-0 .ct-label.ct-vertical.ct-start {
-
-    font-weight: bold;
-    color: #6e6e6e;
-    font-size: 12px;
-}
-
-:host ::ng-deep .box-shadow-0 .ct-label.ct-horizontal.ct-end {
-
-    font-weight: bold;
-    color: #6e6e6e;
-    font-size: 12px;
-}
-
-
-:host ::ng-deep .text-truncate {
-  padding: 0.9rem 2rem;
-}
-
-.mr-2 {
-  margin-left: 1rem !important;
-  margin-right: 0rem !important;
-}
-
-.mt-2 {
-  margin-top : 1.5rem !important;
-}
-
-.ml-2 {
-  margin-left : 2rem !important;
-}
-
-:host ::ng-deep .my-custom-cell {
-  padding-right: 6% !important;
-  padding-top: 1.5% !important;
-}
-
-:host ::ng-deep .border_bottom {
-  margin-bottom: 0rem !important;
-}
-
-:host ::ng-deep .border-top-0 {
-  padding: 1.25rem 2rem !important;
-}
-
-:host ::ng-deep .progress {
-  box-shadow: 0 10px 18px 0 rgba(62, 57, 107, .2);
-  margin-top: 1rem!important;
-}
-
-:host ::ng-deep .btn-danger {
-  color: #FFF !important;
-}
-
-:host ::ng-deep .users-list li + li {
-  margin-left: -10px !important;
-}
-
-
-:host ::ng-deep .block-ui-wrapper {
-  background: rgba(255, 249, 249, 0.5) !important;
-}
-
-:host ::ng-deep .ps--active-x > .ps__rail-x {
-  display: none !important;
-}
-
-:host ::ng-deep .progress {
-    margin-bottom: 1rem !important;
-}

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

@@ -1,271 +0,0 @@
-
-<div class="app-content content">
-    <div class="content-wrapper">
-      <div class="content-header row mb-1">
-      </div>
-      <div class="content-body">
-        <!-- Revenue, Hit Rate & Deals -->
-        <div class="row">
-          <div class="col-xl-6 col-12">
-            <div class="Revenue" *blockUI="'revenue'; message: 'Loading'">
-            <m-card [options]="options" (reloadFunction)="reloadRevenue($event)">
-              <ng-container mCardHeaderTitle>
-                Revenue
-              </ng-container>
-              <ng-container mCardBody>
-                <div class="row mb-1">
-                  <div class="col-6 col-md-4">
-                    <h5>Current week</h5>
-                    <h2 class="danger">$82,124</h2>
-                  </div>
-                  <div class="col-6 col-md-4">
-                    <h5>Previous week</h5>
-                    <h2 class="text-muted">$52,502</h2>
-                  </div>
-                </div>
-                <div class="chartist">
-                  <x-chartist *ngIf="lineArea" [data]="lineArea.data" [type]="lineArea.type" [options]="lineArea.options"
-                    [responsiveOptions]="lineArea.responsiveOptions" [events]="lineArea.events">
-                  </x-chartist>
-                </div>
-              </ng-container>
-            </m-card>
-            </div>
-          </div>
-          <div class="col-xl-6 col-12">
-            <div class="row">
-              <div class="col-md-6 col-12 ">
-                <div class="HitRate" *blockUI="'hitrate'; message: 'Loading'">
-                <m-card [options]="hitRateOptions" id="card" (reloadFunction)="reloadHitRate($event)">
-                  <ng-container mCardHeaderTitle>
-                    Hit Rate <span class="danger">-12%</span>
-                  </ng-container>
-                  <ng-container mCardBody>
-                    <div id="donut-chart2" class="height-230 donut-chart2">
-                      <x-chartist *ngIf="donutChart2" [data]="donutChart2.data" [type]="donutChart2.type" [options]="donutChart2.options"
-                        [responsiveOptions]="donutChart2.responsiveOptions" [events]="donutChart2.events">
-                      </x-chartist>
-                    </div>
-                  </ng-container>
-                </m-card>
-              </div>
-            </div>
-              <div class="col-md-6 col-12">
-                <m-card [options]="dealsOptions">
-                  <ng-container mCardBody>
-                    <h4 class="card-title white">Deals <span class="white">-55%</span>
-                      <span class="float-right">
-                          <span class="white">152</span><span class="red lighten-4">/200</span>
-                      </span>
-                    </h4>
-                    <div id="donut-chart1" class="height-230 donut-chart1">
-                      <x-chartist *ngIf="donutChart1" [data]="donutChart1.data" [type]="donutChart1.type" [options]="donutChart1.options"
-                        [responsiveOptions]="donutChart1.responsiveOptions" [events]="donutChart1.events">
-                      </x-chartist>
-                    </div>
-                  </ng-container>
-                </m-card>
-              </div>
-            </div>
-            <div class="row">
-              <div class="col-lg-6 col-12">
-                <div class="card pull-up">
-                  <div class="card-content">
-                    <div class="card-body">
-                      <div class="media d-flex">
-                        <div class="media-body text-left">
-                          <h6 class="text-muted">Order Value </h6>
-                          <h3>$ 88,568</h3>
-                        </div>
-                        <div class="align-self-center">
-                          <i class="icon-trophy success font-large-2 float-right"></i>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class="col-lg-6 col-12">
-                <div class="card pull-up">
-                  <div class="card-content">
-                    <div class="card-body">
-                      <div class="media d-flex">
-                        <div class="media-body text-left">
-                          <h6 class="text-muted">Calls</h6>
-                          <h3>3,568</h3>
-                        </div>
-                        <div class="align-self-center">
-                          <i class="icon-call-in danger font-large-2 float-right"></i>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!--/ Revenue, Hit Rate & Deals -->
-  
-        <!-- Emails Products & Avg Deals -->
-        <div class="row">
-          <div class="col-12 col-md-3">
-            <div class="EmailRate" *blockUI="'email'; message: 'Updating'">
-            <m-card [options]="emailsOptions" (reloadFunction)="reloadEmail($event)">
-              <ng-container mCardHeaderTitle>
-                Emails
-              </ng-container>
-              <ng-container mCardBody>
-                <p>Open rate <span class="float-right text-bold-600">89%</span></p>
-                <ngb-progressbar height="7px" type="danger" [value]="89"></ngb-progressbar>
-                <p class="pt-1">Sent <span class="float-right"><span class="text-bold-600">310</span>/500</span>
-                </p>
-                <ngb-progressbar height="7px" type="success" [value]="50"></ngb-progressbar>
-              </ng-container>
-            </m-card>
-          </div>
-          </div>
-          <div class="col-12 col-md-3">
-            <div class="card">
-              <div class="card-header">
-                <h4 class="card-title">Top Products</h4>
-                <div class="heading-elements">
-                  <ul class="list-inline mb-0">
-                    <li><a class="info">Show all</a></li>
-                  </ul>
-                </div>
-              </div>
-              <div class="card-content collapse show">
-                <div class="card-body p-0">
-                    <div class="table-responsive">
-                    <table class="table mb-0">
-                      <tbody>
-                        <tr>
-                          <th scope="row" class="border-top-0">iPone X</th>
-                          <td class="border-top-0">2245</td>
-                        </tr>
-                        <tr>
-                          <th scope="row">One Plus</th>
-                          <td>1850</td>
-                        </tr>
-                        <tr>
-                          <th scope="row">Samsung S7</th>
-                          <td>1550</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 col-md-6">
-            <div class="card">
-              <div class="card-header">
-                <h4 class="card-title text-center">Average Deal Size</h4>
-              </div>
-              <div class="card-content collapse show">
-                <div class="card-body pt-0">
-                  <div class="row">
-                    <div class="col-md-6 col-12 border-right-blue-grey border-right-lighten-5 text-center">
-                      <h6 class="danger text-bold-600">-30%</h6>
-                      <h4 class="font-large-2 text-bold-400">$12,536</h4>
-                      <p class="blue-grey lighten-2 mb-0">Per rep</p>
-                    </div>
-                    <div class="col-md-6 col-12 text-center">
-                      <h6 class="success text-bold-600">12%</h6>
-                      <h4 class="font-large-2 text-bold-400">$18,548</h4>
-                      <p class="blue-grey lighten-2 mb-0">Per team</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!--/ Emails Products & Avg Deals -->
-  
-        <!-- Total earning & Recent Sales  -->
-        <div class="row">
-          <div class="col-12 col-md-4">
-            <div class="card">
-              <div class="card-content">
-                <div class="earning-chart position-relative">
-                  <div class="chart-title position-absolute mt-2 ml-2">
-                    <h1 class="display-4">$1,596</h1>
-                    <span class="text-muted">Total Earning</span>
-                  </div>
-                  <div id="cost-revenue" class="earningchart position-relative">
-                    <x-chartist *ngIf="earningchart" [data]="earningchart.data" [type]="earningchart.type" [options]="earningchart.options"
-                      [responsiveOptions]="earningchart.responsiveOptions" [events]="earningchart.events">
-                    </x-chartist>
-                  </div>
-                  <div class="chart-stats position-absolute position-bottom-0 position-right-0 mb-2 mr-3">
-                    <a [routerLink]="" class="btn round btn-danger mr-1 btn-glow">Statistics <i class="feather ft-bar-chart"></i></a>
-                    <span class="text-muted">for the <a [routerLink]="" class="danger darken-2">last year.</a></span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-  
-          <div id="recent-sales" class="col-12 col-md-8">
-            <div class="card">
-              <div class="card-header">
-                <h4 class="card-title">Recent Sales</h4>
-                <div class="heading-elements">
-                  <ul class="list-inline mb-0">
-                    <li><a [routerLink]="" class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" (click)="rotueInvoice()">View
-                        all</a></li>
-                  </ul>
-                </div>
-              </div>
-              <div class="card-content mt-1">
-                  <div class="table-responsive" fxFlex="auto" [perfectScrollbar]="config">
-                      <table class="table border_bottom table-hover">
-                        <thead>
-                          <tr>
-                            <th scope="col" class="border-top-0">Product</th>
-                            <th scope="col" class="border-top-0">Customers</th>
-                            <th scope="col" class="border-top-0">Categories</th>
-                            <th scope="col" class="border-top-0">Popularity</th>
-                            <th scope="col" class="border-top-0">Amount</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          <tr *ngFor="let row of rows">
-                            <td class="text-truncate">
-                              {{row.product}}
-                            </td>
-                            <td class="text-truncate p-1">
-                                <ul class="list-unstyled users-list m-0">
-                                    <li class="avatar avatar-sm pull-up" *ngFor="let imageUrl of row.image">
-                                      <img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
-                                    </li>
-                                  </ul>
-                            </td>
-                            <td class="text-truncate">
-                              <span>
-                                <button type="button"
-                                  class="btn btn-sm btn-outline-{{row.type}} round">{{row.buttonname}}</button>
-                              </span>
-                            </td>
-                            <td class="text-truncate">
-                                <ngb-progressbar height="7px" type="{{row.type}}" [value]=row.value>
-                                  </ngb-progressbar>
-                            </td>
-                            <td class="text-truncate">{{ row.amount }} </td>
-                          </tr>
-                        </tbody>
-                      </table>
-                    </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!--/ Total earning & Recent Sales  -->
-      </div>
-    </div>
-  </div>
-  <!-- ////////////////////////////////////////////////////////////////////////////-->
-  

src/app/content/hemat-app/monitoring/monitoring.component.ts

@@ -1,333 +0,0 @@
-import { Component, OnInit, ViewChild, Renderer2 } from '@angular/core';
-import * as Chartist from 'chartist';
-import { DatatableComponent } from '@swimlane/ngx-datatable';
-import { ChartEvent, ChartType } from 'ng-chartist';
-import { BlockUI, NgBlockUI } from 'ng-block-ui';
-import { PerfectScrollbarComponent, PerfectScrollbarDirective, PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
-import { ChartApiService } from '../../../_services/chart.api';
-import { Router } from '@angular/router';
-export interface Chart {
-  type: ChartType;
-  data: Chartist.IChartistData;
-  options?: any;
-  responsiveOptions?: any;
-  events?: ChartEvent;
-}
-@Component({
-  selector: 'app-monitoring',
-  templateUrl: './monitoring.component.html',
-  styleUrls: ['./monitoring.component.css']
-})
-export class MonitoringComponent implements OnInit{
-
-  @BlockUI('revenue') blockUIRevenue: NgBlockUI;
-  @BlockUI('hitrate') blockUIHitRate: NgBlockUI;
-  @BlockUI('email') blockUIEmail: NgBlockUI;
-
-  public config: PerfectScrollbarConfigInterface = { suppressScrollY: true };
-  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
-  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
-
-  salesData: any;
-  lineArea: any;
-  earningchart: any;
-  donutChart2: any;
-  donutChart1: any;
-  options = {
-    bodyClass: ['pt-0'],
-    close: false,
-    expand: false,
-    minimize: false,
-    reload: true
-  };
-
-  hitRateOptions = {
-    bodyClass: ['bg-hexagons', 'pt-0'],
-    headerClass: ['bg-hexagons'],
-    cardClass: ['pull-up'],
-    close: false,
-    expand: false,
-    minimize: false,
-    reload: true
-  };
-
-  dealsOptions = {
-    bodyClass: ['bg-hexagons-danger'],
-    cardClass: ['pull-up'],
-    contentClass: ['bg-gradient-directional-danger']
-  };
-
-  emailsOptions = {
-    bodyClass: ['pt-0'],
-    close: false,
-    expand: false,
-    minimize: false,
-    reload: true
-  };
-  loadingIndicator = true;
-
-  firstRow = ['../../../assets/images/portrait/small/avatar-s-4.png',
-    '../../../assets/images/portrait/small/avatar-s-5.png',
-    '../../../assets/images/portrait/small/avatar-s-6.png'];
-  secondRow = ['../../../assets/images/portrait/small/avatar-s-7.png',
-    '../../../assets/images/portrait/small/avatar-s-8.png'];
-  thirdRow = ['../../../assets/images/portrait/small/avatar-s-1.png',
-    '../../../assets/images/portrait/small/avatar-s-2.png',
-    '../../../assets/images/portrait/small/avatar-s-3.png'];
-  fourthRow = ['../../../assets/images/portrait/small/avatar-s-11.png',
-    '../../../assets/images/portrait/small/avatar-s-12.png'];
-  fifthRow = ['../../../assets/images/portrait/small/avatar-s-6.png',
-    '../../../assets/images/portrait/small/avatar-s-4.png'];
-  rows = [
-    {
-      'type': 'danger', 'value': 85, 'product': 'iPhone X',
-      'image': this.firstRow, 'buttonname': 'Mobile', 'amount': '$ 1200.00', 'bagde': '+8 more'
-    },
-    {
-      'type': 'success', 'value': 75, 'product': 'iPad',
-      'image': this.secondRow, 'buttonname': 'Teblet', 'amount': '$ 1190.00', 'bagde': '+5 more'
-    },
-    {
-      'type': 'danger', 'value': 65, 'product': 'OnePlus',
-      'image': this.thirdRow, 'buttonname': 'Mobile', 'amount': '$ 999.00', 'bagde': '+3 more'
-    },
-    {
-      'type': 'success', 'value': 55, 'product': 'ZenPad',
-      'image': this.fourthRow, 'buttonname': 'Teblet', 'amount': '$ 1150.00'
-    },
-    {
-      'type': 'danger', 'value': 45, 'product': 'Pixel 2',
-      'image': this.fifthRow, 'buttonname': 'Mobile', 'amount': '$ 1180.00'
-    }
-  ];
-
-  @ViewChild(DatatableComponent, { static: true }) table: DatatableComponent;
-  Daygraph = true;
-  Weekgraph = false;
-  Monthgraph = false;
-  ngOnInit() {
-    this.chartApiservice.getSalesData().subscribe(Response => {
-      this.salesData = Response;
-      this.getChartdata();
-    });
-  }
-  constructor(private _renderer: Renderer2, private route: Router,
-    private chartApiservice: ChartApiService) { }
-  reloadRevenue() {
-    this.blockUIRevenue.start('Loading..');
-
-    setTimeout(() => {
-      this.blockUIRevenue.stop();
-    }, 2500);
-  }
-
-  reloadHitRate() {
-    this.blockUIHitRate.start('Please Wait..');
-
-    setTimeout(() => {
-      this.blockUIHitRate.stop();
-    }, 2500);
-  }
-
-  reloadEmail() {
-    this.blockUIEmail.start();
-
-    setTimeout(() => {
-      this.blockUIEmail.stop();
-    }, 2500);
-  }
-  rotueInvoice() {
-    this.route.navigate(['/invoice/invoice-summary']);
-  }
-  getChartdata() {
-    const Chartdata = this.salesData;
-    this.lineArea = {
-      type: 'Line',
-      data: Chartdata['lineArea'],
-      options: {
-        lineSmooth: Chartist.Interpolation.simple({
-          divisor: 2.8
-        }),
-        fullWidth: true,
-        height: '270px',
-        showArea: false,
-        showPoint: false,
-        axisX: {
-          showGrid: false,
-          showLabel: true,
-          offset: 32
-        },
-        axisY: {
-          showGrid: true,
-          showLabel: true,
-          scaleMinSpace: 28,
-          offset: 44
-        },
-      },
-      events: {
-        created(data: any): void {
-          const defs = data.svg.elem('defs');
-          defs.elem('linearGradient', {
-            id: 'gradient2',
-            x1: 0,
-            y1: 0,
-            x2: 1,
-            y2: 0
-          }).elem('stop', {
-            offset: 0,
-            'stop-color': 'rgb(255,73,97)'
-          }).parent().elem('stop', {
-            offset: 1,
-            'stop-color': 'rgb(255,73,97)'
-          });
-        },
-        draw(data: any): void {
-          const circleRadius = 4;
-          if (data.type === 'point') {
-            const circle = new Chartist.Svg('circle', {
-              cx: data.x,
-              cy: data.y,
-              r: circleRadius,
-              class: 'ct-point-circle'
-            });
-            data.element.replace(circle);
-          } else if (data.type === 'label') {
-            // adjust label position for rotation
-            const dX = data.width / 2 + (26 - data.width);
-            data.element.attr({ x: data.element.attr('x') - dX });
-          }
-        }
-      },
-    };
-    this.earningchart = {
-      type: 'Line',
-      data: Chartdata['earningchart'],
-      options: {
-        chartPadding: 0,
-        height: '440px',
-        low: 0,
-        showArea: true,
-        fullWidth: true,
-        onlyInteger: true,
-        axisX: {
-          showGrid: false,
-          showLabel: false,
-          offset: -1
-        },
-        axisY: {
-          scaleMinSpace: 40,
-          showGrid: false,
-          showLabel: false,
-          offset: -2
-        },
-      },
-      responsiveOptions: [
-        ['screen and (max-width: 640px) and (min-width: 381px)', {
-          axisX: {
-            labelInterpolationFnc: function (value, index) {
-              return index % 2 === 0 ? value : null;
-            }
-          }
-        }],
-        ['screen and (max-width: 380px)', {
-          axisX: {
-            labelInterpolationFnc: function (value, index) {
-              return index % 3 === 0 ? value : null;
-            }
-          }
-        }]
-      ],
-      events: {
-        created(data: any): void {
-          const defs = data.svg.elem('defs');
-          defs.elem('linearGradient', {
-            id: 'gradient1',
-            x1: 0,
-            y1: 0,
-            x2: 1,
-            y2: 0
-          }).elem('stop', {
-            offset: 0,
-            'stop-color': 'rgb(255,73,97)'
-          }).parent().elem('stop', {
-            offset: 1,
-            'stop-color': 'rgb(255,73,97)'
-          });
-        },
-        draw(data: any): void {
-          const circleRadius = 6;
-          if (data.type === 'point') {
-            const circle = new Chartist.Svg('circle', {
-              cx: data.x,
-              cy: data.y,
-              r: circleRadius,
-              class: 'ct-point-circle'
-            });
-            data.element.replace(circle);
-          }
-        }
-      },
-    };
-    // Doughnut
-    this.donutChart2 = {
-      type: 'Pie',
-      data: Chartdata['donut1'],
-      options: {
-        chartPadding: 0,
-        fullwidth: true,
-        height: '273px',
-        donut: true,
-        showLabel: true,
-        startAngle: 0,
-        labelInterpolationFnc: function (value) {
-          const total = 82;
-          return total + '%';
-        }
-      },
-      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();
-            }
-          }
-        }
-      }
-    };
-    this.donutChart1 = {
-      type: 'Pie',
-      data: Chartdata['donut2'],
-      options: {
-        chartPadding: 0,
-        fullwidth: true,
-        height: '273px',
-        donut: true,
-        showLabel: true,
-        labelInterpolationFnc: function (value) {
-          const total = 76;
-          return total + '%';
-        }
-      },
-      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();
-            }
-          }
-        }
-      }
-    };
-  }
-
-}

src/app/content/hemat-app/monitoring/monitoring.module.ts

@@ -1,9 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MonitoringComponent } from './monitoring.component';
 import { RouterModule } from '@angular/router';
 
-
 import { ChartistModule } from 'ng-chartist';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { FormsModule } from '@angular/forms';
@@ -14,12 +12,14 @@ import { BlockUIModule } from 'ng-block-ui';
 import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
 import { MatchHeightModule } from '../../../content/partials/general/match-height/match-height.module';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
-
+import { BuildingComponent } from './building/building.component';
-
+import { RoomComponent } from './room/room.component';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
 
 @NgModule({
   declarations: [
-    MonitoringComponent
+    BuildingComponent,
+    RoomComponent
   ],
   imports: [
     CommonModule,
@@ -30,15 +30,20 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
     MatchHeightModule,
     NgxDatatableModule,
     PerfectScrollbarModule,
+    BreadcrumbModule,
     NgbModule,
     BlockUIModule.forRoot({
       template: BlockTemplateComponent
     }),
     RouterModule.forChild([
       {
-        path: '',
+        path: 'monitoring-building',
-        component: MonitoringComponent
+        component: BuildingComponent
-      }
+      },
+      {
+        path: 'monitoring-room',
+        component: RoomComponent
+      },
     ])
   ]
 })

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

@@ -0,0 +1 @@
+<p>room works!</p>

src/app/content/hemat-app/monitoring/room/room.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RoomComponent } from './room.component';
+
+describe('RoomComponent', () => {
+  let component: RoomComponent;
+  let fixture: ComponentFixture<RoomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RoomComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RoomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/monitoring/room/room.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-room',
+  templateUrl: './room.component.html',
+  styleUrls: ['./room.component.css']
+})
+export class RoomComponent {
+
+}