fuzi_fauzia/hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penambahan menu device

Browse Source
This commit is contained in:
Fuzi_fauzia
2024-04-19 15:51:50 +07:00
parent 653fb257b8
commit 14ad53025f
25 changed files with 1657 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
src/app/content/hemat-app/monitoring/monitoring.component.css Normal file
View File

@@ -0,0 +1,281 @@
: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;
}

271
src/app/content/hemat-app/monitoring/monitoring.component.html Normal file
View File

@@ -0,0 +1,271 @@
<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>
<!-- ////////////////////////////////////////////////////////////////////////////-->

23
src/app/content/hemat-app/monitoring/monitoring.component.spec.ts Normal file
View File

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

333
src/app/content/hemat-app/monitoring/monitoring.component.ts Normal file
View File

@@ -0,0 +1,333 @@
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();
}
}
}
}
};
}
}

45
src/app/content/hemat-app/monitoring/monitoring.module.ts Normal file
View File

@@ -0,0 +1,45 @@
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';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { CardModule } from '../../../content/partials/general/card/card.module';
import { NgChartsModule } from 'ng2-charts';
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';
@NgModule({
declarations: [
MonitoringComponent
],
imports: [
CommonModule,
ChartistModule,
FormsModule,
NgChartsModule,
CardModule,
MatchHeightModule,
NgxDatatableModule,
PerfectScrollbarModule,
NgbModule,
BlockUIModule.forRoot({
template: BlockTemplateComponent
}),
RouterModule.forChild([
{
path: '',
component: MonitoringComponent
}
])
]
})
export class MonitoringModule { }