From 0844add2de7512b33bb9a7c1da3b25f07971a4ae Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Thu, 2 May 2024 14:12:30 +0700 Subject: [PATCH] perbaikan tampilan monitoring detail --- .../monitoring/detail/detail.component.html | 289 ++++++++++++------ .../monitoring/detail/detail.component.ts | 59 ++++ .../hemat-app/monitoring/monitoring.module.ts | 2 + 3 files changed, 250 insertions(+), 100 deletions(-) diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html index e37d497..0eae154 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.html +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html @@ -4,22 +4,83 @@
-
+
- Card image cap -
-

Basic

-

- Some quick example text to build on the card title and make up - the bulk of the card's content. -

- Go somewhere +
+
+

34,879

+ Total Likes +
+
+ + +
    +
  • +

    4789

    + Per Post +
    • +
  • +

    389

    + Today +
    • +
+
+
+
+
+
+
+
+
+

34,879

+ Total Likes +
+
+ + +
    +
  • +

    4789

    + Per Post +
    • +
  • +

    389

    + Today +
    • +
+
@@ -27,53 +88,85 @@
-
-

List Group

-

- Some quick example text to build on the card title and make up - the bulk of the card's content. -

+
+
+
+ +
+
+
Total Profit
+
5.6 M
+ +
+
-
    -
  • - 4 +
    +
    - Cras justo odio -
    • -
  • - 2 +
+
- Dapibus ac facilisis in - -
  • - 1Total Profit +
    5.6 M
    + +
    • +
    +
    +
    +
    +
    - Morbi leo risus - -
  • - 3 +
    • +
    - Porta ac consectetur ac - -
  • - 8Total Profit +
    5.6 M
    + +
    • +
    +
    +
    +
    +
    - Vestibulum at eros - - -
    - Card link - Another link + +
    +
    +
    Total Profit
    +
    5.6 M
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    Total Profit
    +
    5.6 M
    + +
    +
    @@ -104,12 +197,6 @@
    -
    -

    - Some quick example text to build on the card title and make up - the bulk of the card's content. -

    -
    @@ -247,12 +334,13 @@
    - +
    @@ -274,13 +362,13 @@
    - - +
    @@ -302,13 +390,13 @@
    - - +
    @@ -330,12 +418,13 @@
    - +
    @@ -357,13 +446,13 @@
    - - +
    @@ -385,13 +474,13 @@
    - - +
    diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts index 3c9dc2a..cabe6b1 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -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 = { diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts index f4b58cf..495dabc 100644 --- a/src/app/content/hemat-app/monitoring/monitoring.module.ts +++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts @@ -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') }),