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

perbaikan tampilan monitoring detail

This commit is contained in:
Fuzi_fauzia 2024-05-02 14:12:30 +07:00
parent 3aed024f71
commit 0844add2de
3 changed files with 250 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
src/app/content/hemat-app/monitoring/detail/detail.component.html
View File

@ -4,22 +4,83 @@
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
</div>
<div class="content-body">
<div class="row" matchHeight="card">
<div class="row">
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<img
class="card-img-top img-fluid"
src="../../../assets/images/carousel/05.jpg"
alt="Card image cap"
/>
<div class="card-body">
<h4 class="card-title">Basic</h4>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a [routerLink]="" class="btn btn-outline-pink">Go somewhere</a>
<div class="p-1 text-center">
<div>
<h3 class="display-4 blue-grey darken-1">34,879</h3>
<span class="blue-grey darken-1">Total Likes</span>
</div>
<div class="card-content">
<!-- <div id="morris-likes" style="height:75px;"> -->
<x-chartist
*ngIf="lineArea"
class="Likes"
[data]="lineArea.data"
[type]="lineArea.type"
[options]="lineArea.options"
[responsiveOptions]="lineArea.responsiveOptions"
[events]="lineArea.events"
>
</x-chartist>
<ul class="list-inline clearfix">
<li
class="border-right-blue-grey border-right-lighten-2 pr-1"
>
<h1 class="success text-bold-400">4789</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-up"></i> Per Post</span
>
</li>
<li class="pl-1">
<h1 class="success text-bold-400">389</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-down"></i> Today</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="p-1 text-center">
<div>
<h3 class="display-4 blue-grey darken-1">34,879</h3>
<span class="blue-grey darken-1">Total Likes</span>
</div>
<div class="card-content">
<!-- <div id="morris-likes" style="height:75px;"> -->
<x-chartist
*ngIf="lineArea"
class="Likes"
[data]="lineArea.data"
[type]="lineArea.type"
[options]="lineArea.options"
[responsiveOptions]="lineArea.responsiveOptions"
[events]="lineArea.events"
>
</x-chartist>
<ul class="list-inline clearfix">
<li
class="border-right-blue-grey border-right-lighten-2 pr-1"
>
<h1 class="success text-bold-400">4789</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-up"></i> Per Post</span
>
</li>
<li class="pl-1">
<h1 class="success text-bold-400">389</h1>
<span class="blue-grey darken-1"
><i class="la la-caret-down"></i> Today</span
>
</li>
</ul>
</div>
</div>
</div>
</div>
@ -27,53 +88,85 @@
<div class="col-xl-4 col-md-6 col-sm-12">
<div class="card">
<div class="card-content">
<div class="card-body">
<h4 class="card-title">List Group</h4>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<span
class="badge badge-default badge-pill bg-primary float-right"
>4</span
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
Cras justo odio
</li>
<li class="list-group-item">
<span
class="badge badge-default badge-pill bg-info float-right"
>2</span
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span
class="badge badge-default badge-pill bg-warning float-right"
>1</span
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
Morbi leo risus
</li>
<li class="list-group-item">
<span
class="badge badge-default badge-pill bg-success float-right"
>3</span
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
Porta ac consectetur ac
</li>
<li class="list-group-item">
<span
class="badge badge-default badge-pill bg-danger float-right"
>8</span
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
Vestibulum at eros
</li>
</ul>
<div class="card-body">
<a [routerLink]="" class="card-link info">Card link</a>
<a [routerLink]="" class="card-link info">Another link</a>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
<div class="row">
<div class="media align-items-stretch">
<div
class="p-2 text-center bg-success bg-darken-2 rounded-left"
>
<i class="icon-wallet font-large-2 text-white"></i>
</div>
<div
class="p-2 bg-success text-white media-body rounded-right"
>
<h5 class="text-white">Total Profit</h5>
<h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
<input type="range" style="width: 100%" />
</div>
</div>
</div>
</div>
</div>
@ -104,12 +197,6 @@
</ngb-carousel>
</div>
</div>
<div class="card-body">
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
</div>
@ -247,12 +334,13 @@
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="gradient-x-info"
[value]="80"
></ngb-progressbar>
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
@ -274,13 +362,13 @@
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="gradient-x-warning"
[value]="65"
>
</ngb-progressbar>
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
@ -302,13 +390,13 @@
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="gradient-x-warning"
[value]="65"
>
</ngb-progressbar>
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
@ -330,12 +418,13 @@
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="gradient-x-info"
[value]="80"
></ngb-progressbar>
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
@ -357,13 +446,13 @@
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="gradient-x-warning"
[value]="65"
>
</ngb-progressbar>
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>
@ -385,13 +474,13 @@
</div>
</div>
<div class="mb-0 mt-1">
<ngb-progressbar
height="7px"
width="100%"
type="gradient-x-warning"
[value]="65"
>
</ngb-progressbar>
<ui-switch
class="switchery"
switchColor="white"
color="rgb(55, 188, 155)"
size="small"
checked
></ui-switch>
</div>
</div>
</div>

59
src/app/content/hemat-app/monitoring/detail/detail.component.ts
View File

@ -18,14 +18,26 @@ export class DetailComponent {
data: any;
chartOption: any;
Sales: any;
salesData: any;
lineArea: any;
mode: string;
ExpenseschartOption: any;
donutChart2: any;
public breadcrumb: any;
constructor(
private chartApiservice: ChartApiService,
private router: Router,
private route: ActivatedRoute
) {}
hitRateOptions = {
bodyClass: ['bg-hexagons', 'pt-0'],
headerClass: ['bg-hexagons'],
cardClass: ['pull-up'],
close: false,
expand: false,
minimize: false,
reload: true
};
@BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
@BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
carouselOne = [
@ -76,12 +88,59 @@ export class DetailComponent {
};
}
this.chartApiservice.getStatisticsData().subscribe(Response => {
this.salesData = Response;
this.getlineArea();
});
this.chartApiservice.getInvoiceData().subscribe((Response) => {
this.data = Response;
this.getInvoicechart();
});
}
getlineArea(){
const ChartData = this.salesData;
// this.lineArea = {
// type: 'Line',
// data: ChartData['lineArea'],
// options: {
// // low: 650,
// fullwidth: true,
// height: '80px',
// showArea: true,
// axisX: {
// showGrid: false,
// showLabel: false
// },
// axisY: {
// showGrid: false,
// showLabel: false
// }
// }
// };
this.lineArea = {
type: 'Line',
data: ChartData['lineArea'],
options: {
// low: 650,
fullwidth: true,
height: '75px',
showArea: true,
axisX: {
showGrid: false,
showLabel: false
},
axisY: {
showGrid: false,
showLabel: false
}
}
};
}
getInvoicechart() {
this.Sales = this.data["sales"];
this.chartOption = {

2
src/app/content/hemat-app/monitoring/monitoring.module.ts
View File

@ -21,6 +21,7 @@ import { DetailComponent } from './detail/detail.component';
import { NgxEchartsModule } from 'ngx-echarts';
import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
import { NgxMasonryModule } from 'ngx-masonry';
import { UiSwitchModule } from 'ngx-ui-switch';
@NgModule({
declarations: [
@ -45,6 +46,7 @@ import { NgxMasonryModule } from 'ngx-masonry';
NgbModule,
NgxPhotoswipeModule,
NgxMasonryModule,
UiSwitchModule,
NgxEchartsModule.forRoot({
echarts: () => import('echarts')
}),