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>
|
<app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
|
||||||
</div>
|
</div>
|
||||||
<div class="content-body">
|
<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="col-xl-4 col-md-6 col-sm-12">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<img
|
<div class="p-1 text-center">
|
||||||
class="card-img-top img-fluid"
|
<div>
|
||||||
src="../../../assets/images/carousel/05.jpg"
|
<h3 class="display-4 blue-grey darken-1">34,879</h3>
|
||||||
alt="Card image cap"
|
<span class="blue-grey darken-1">Total Likes</span>
|
||||||
/>
|
|
||||||
<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>
|
</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-content">
|
||||||
<div class="card-body">
|
<!-- <div id="morris-likes" style="height:75px;"> -->
|
||||||
<h4 class="card-title">List Group</h4>
|
<x-chartist
|
||||||
<p class="card-text">
|
*ngIf="lineArea"
|
||||||
Some quick example text to build on the card title and make up
|
class="Likes"
|
||||||
the bulk of the card's content.
|
[data]="lineArea.data"
|
||||||
</p>
|
[type]="lineArea.type"
|
||||||
</div>
|
[options]="lineArea.options"
|
||||||
<ul class="list-group list-group-flush">
|
[responsiveOptions]="lineArea.responsiveOptions"
|
||||||
<li class="list-group-item">
|
[events]="lineArea.events"
|
||||||
<span
|
>
|
||||||
class="badge badge-default badge-pill bg-primary float-right"
|
</x-chartist>
|
||||||
>4</span
|
<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>
|
||||||
<li class="list-group-item">
|
<li class="pl-1">
|
||||||
<span
|
<h1 class="success text-bold-400">389</h1>
|
||||||
class="badge badge-default badge-pill bg-info float-right"
|
<span class="blue-grey darken-1"
|
||||||
>2</span
|
><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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<a [routerLink]="" class="card-link info">Card link</a>
|
</div>
|
||||||
<a [routerLink]="" class="card-link info">Another link</a>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -104,12 +197,6 @@
|
||||||
</ngb-carousel>
|
</ngb-carousel>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -247,12 +334,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-0 mt-1">
|
<div class="mb-0 mt-1">
|
||||||
<ngb-progressbar
|
<ui-switch
|
||||||
height="7px"
|
class="switchery"
|
||||||
width="100%"
|
switchColor="white"
|
||||||
type="gradient-x-info"
|
color="rgb(55, 188, 155)"
|
||||||
[value]="80"
|
size="small"
|
||||||
></ngb-progressbar>
|
checked
|
||||||
|
></ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -274,13 +362,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-0 mt-1">
|
<div class="mb-0 mt-1">
|
||||||
<ngb-progressbar
|
<ui-switch
|
||||||
height="7px"
|
class="switchery"
|
||||||
width="100%"
|
switchColor="white"
|
||||||
type="gradient-x-warning"
|
color="rgb(55, 188, 155)"
|
||||||
[value]="65"
|
size="small"
|
||||||
>
|
checked
|
||||||
</ngb-progressbar>
|
></ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -302,13 +390,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-0 mt-1">
|
<div class="mb-0 mt-1">
|
||||||
<ngb-progressbar
|
<ui-switch
|
||||||
height="7px"
|
class="switchery"
|
||||||
width="100%"
|
switchColor="white"
|
||||||
type="gradient-x-warning"
|
color="rgb(55, 188, 155)"
|
||||||
[value]="65"
|
size="small"
|
||||||
>
|
checked
|
||||||
</ngb-progressbar>
|
></ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -330,12 +418,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-0 mt-1">
|
<div class="mb-0 mt-1">
|
||||||
<ngb-progressbar
|
<ui-switch
|
||||||
height="7px"
|
class="switchery"
|
||||||
width="100%"
|
switchColor="white"
|
||||||
type="gradient-x-info"
|
color="rgb(55, 188, 155)"
|
||||||
[value]="80"
|
size="small"
|
||||||
></ngb-progressbar>
|
checked
|
||||||
|
></ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -357,13 +446,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-0 mt-1">
|
<div class="mb-0 mt-1">
|
||||||
<ngb-progressbar
|
<ui-switch
|
||||||
height="7px"
|
class="switchery"
|
||||||
width="100%"
|
switchColor="white"
|
||||||
type="gradient-x-warning"
|
color="rgb(55, 188, 155)"
|
||||||
[value]="65"
|
size="small"
|
||||||
>
|
checked
|
||||||
</ngb-progressbar>
|
></ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -385,13 +474,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-0 mt-1">
|
<div class="mb-0 mt-1">
|
||||||
<ngb-progressbar
|
<ui-switch
|
||||||
height="7px"
|
class="switchery"
|
||||||
width="100%"
|
switchColor="white"
|
||||||
type="gradient-x-warning"
|
color="rgb(55, 188, 155)"
|
||||||
[value]="65"
|
size="small"
|
||||||
>
|
checked
|
||||||
</ngb-progressbar>
|
></ui-switch>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -18,14 +18,26 @@ export class DetailComponent {
|
||||||
data: any;
|
data: any;
|
||||||
chartOption: any;
|
chartOption: any;
|
||||||
Sales: any;
|
Sales: any;
|
||||||
|
salesData: any;
|
||||||
|
lineArea: any;
|
||||||
mode: string;
|
mode: string;
|
||||||
ExpenseschartOption: any;
|
ExpenseschartOption: any;
|
||||||
|
donutChart2: any;
|
||||||
public breadcrumb: any;
|
public breadcrumb: any;
|
||||||
constructor(
|
constructor(
|
||||||
private chartApiservice: ChartApiService,
|
private chartApiservice: ChartApiService,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private route: ActivatedRoute
|
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("totalReceivables") blockUITotalReceivables: NgBlockUI;
|
||||||
@BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
|
@BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
|
||||||
carouselOne = [
|
carouselOne = [
|
||||||
|
|
@ -76,12 +88,59 @@ export class DetailComponent {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.chartApiservice.getStatisticsData().subscribe(Response => {
|
||||||
|
this.salesData = Response;
|
||||||
|
this.getlineArea();
|
||||||
|
});
|
||||||
|
|
||||||
this.chartApiservice.getInvoiceData().subscribe((Response) => {
|
this.chartApiservice.getInvoiceData().subscribe((Response) => {
|
||||||
this.data = Response;
|
this.data = Response;
|
||||||
this.getInvoicechart();
|
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() {
|
getInvoicechart() {
|
||||||
this.Sales = this.data["sales"];
|
this.Sales = this.data["sales"];
|
||||||
this.chartOption = {
|
this.chartOption = {
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,7 @@ import { DetailComponent } from './detail/detail.component';
|
||||||
import { NgxEchartsModule } from 'ngx-echarts';
|
import { NgxEchartsModule } from 'ngx-echarts';
|
||||||
import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
|
import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
|
||||||
import { NgxMasonryModule } from 'ngx-masonry';
|
import { NgxMasonryModule } from 'ngx-masonry';
|
||||||
|
import { UiSwitchModule } from 'ngx-ui-switch';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
|
|
@ -45,6 +46,7 @@ import { NgxMasonryModule } from 'ngx-masonry';
|
||||||
NgbModule,
|
NgbModule,
|
||||||
NgxPhotoswipeModule,
|
NgxPhotoswipeModule,
|
||||||
NgxMasonryModule,
|
NgxMasonryModule,
|
||||||
|
UiSwitchModule,
|
||||||
NgxEchartsModule.forRoot({
|
NgxEchartsModule.forRoot({
|
||||||
echarts: () => import('echarts')
|
echarts: () => import('echarts')
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue