perbaikan tampilan monitoring detail
This commit is contained in:
parent
3aed024f71
commit
0844add2de
|
|
@ -4,76 +4,169 @@
|
|||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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 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
|
||||
>
|
||||
Cras justo odio
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-info float-right"
|
||||
>2</span
|
||||
<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
|
||||
>
|
||||
Dapibus ac facilisis in
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-warning float-right"
|
||||
>1</span
|
||||
>
|
||||
Morbi leo risus
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-success float-right"
|
||||
>3</span
|
||||
>
|
||||
Porta ac consectetur ac
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<span
|
||||
class="badge badge-default badge-pill bg-danger float-right"
|
||||
>8</span
|
||||
>
|
||||
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>
|
||||
</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>
|
||||
</div>
|
||||
<div class="col-xl-4 col-md-6 col-sm-12">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<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 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 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 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 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>
|
||||
|
|
|
|||
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in New Issue