penambahan routing master dan monitoring
This commit is contained in:
parent
d2e11581db
commit
3c7deac1b0
|
|
@ -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' },
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<p>master-category works!</p>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>master-location-room works!</p>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>master-location works!</p>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<p>master-type works!</p>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
|
|
@ -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 { }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,18 +1,18 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MonitoringComponent } from './monitoring.component';
|
||||
import { BuildingComponent } from './building.component';
|
||||
|
||||
describe('MonitoringComponent', () => {
|
||||
let component: MonitoringComponent;
|
||||
let fixture: ComponentFixture<MonitoringComponent>;
|
||||
describe('BuildingComponent', () => {
|
||||
let component: BuildingComponent;
|
||||
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();
|
||||
});
|
||||
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
<!-- ////////////////////////////////////////////////////////////////////////////-->
|
||||
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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: '',
|
||||
component: MonitoringComponent
|
||||
}
|
||||
path: 'monitoring-building',
|
||||
component: BuildingComponent
|
||||
},
|
||||
{
|
||||
path: 'monitoring-room',
|
||||
component: RoomComponent
|
||||
},
|
||||
])
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<p>room works!</p>
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-room',
|
||||
templateUrl: './room.component.html',
|
||||
styleUrls: ['./room.component.css']
|
||||
})
|
||||
export class RoomComponent {
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue