From db9a9e415ab10b8136e15aa33fded3f1bdb3d502 Mon Sep 17 00:00:00 2001 From: Fuzi_fauzia Date: Fri, 26 Jul 2024 09:41:23 +0700 Subject: [PATCH] perbaikan master --- .../cost-management.component.ts | 241 +++++++++--------- .../add-edit-master-room.component.html | 1 + .../add-edit-master-room.component.ts | 6 + .../monitoring/detail/detail.component.ts | 1 + 4 files changed, 131 insertions(+), 118 deletions(-) diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.ts b/src/app/content/hemat-app/cost-management/cost-management.component.ts index 251e6c8..2d9e539 100644 --- a/src/app/content/hemat-app/cost-management/cost-management.component.ts +++ b/src/app/content/hemat-app/cost-management/cost-management.component.ts @@ -92,9 +92,9 @@ export class CostManagementComponent implements OnInit { .subscribe((response) => { this.data = response.results.data; this.filteredRows = this.data; - let kwhData = parseFloat(response.results.kwh) + let kwhData = parseFloat(response.results.kwh); this.kwhTerm = kwhData.toFixed(1); - + this.costTerm = response.results.cost; this.data_cost = this.filteredRows.map((item) => ({ @@ -135,8 +135,9 @@ export class CostManagementComponent implements OnInit { dataListBuilding() { this.monitoringApiService.getBuildingList().subscribe((data) => { - this.dataBuildingList = data.data.filter((item) => item.statusName.toLowerCase() === "aktif"); - + this.dataBuildingList = data.data.filter( + (item) => item.statusName.toLowerCase() === "aktif" + ); }); } @@ -144,79 +145,80 @@ export class CostManagementComponent implements OnInit { this.costService.getCompPrevMonthCost(buildingId).subscribe((data) => { this.dataCompPrev = data.data; this.chartOption = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + formatter: function (params) { + var tar = params[1]; + return tar.name + "
" + tar.seriesName + " : " + tar.value; + }, + }, + grid: { left: "25%", right: "25%", top: "20%", bottom: "20%", }, - - // Add tooltip - tooltip: { - trigger: "axis", - enterable: false, - formatter: function (params) { - return `${params[0].name}
${ - params[0].seriesName - }: Rp. ${params[0].value.toLocaleString()}`; + color: ["#37A647"], + xAxis: { + type: "category", + splitLine: { show: false }, + data: [this.dataCompPrev[0].name, this.dataCompPrev[1].name], + axisLine: { + show: true, + lineStyle: { + color: "#37A647", + width: 7, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, }, }, - // Add legend - legend: false, + yAxis: { + type: "value", + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, - // Add custom colors - color: ["#37A647"], - - // Horizontal axis - xAxis: [ + series: [ { - type: "category", - data: [this.dataCompPrev[0].name, this.dataCompPrev[1].name], - axisLine: { - show: true, - lineStyle: { - color: "#37A647", - width: 4, + name: "Placeholder", + type: "bar", + stack: "Total", + itemStyle: { + borderColor: "transparent", + color: "transparent", + }, + emphasis: { + itemStyle: { + borderColor: "transparent", + color: "transparent", }, }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, + data: [1000, 1000], }, - ], - - // Vertical axis - yAxis: [ - { - type: "value", - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, - }, - ], - - // Add series - series: [ { name: "Cost", type: "bar", - data: [this.dataCompPrev[0].rupiah, this.dataCompPrev[1].rupiah], + stack: "Total", label: { show: true, position: "top", @@ -225,7 +227,8 @@ export class CostManagementComponent implements OnInit { return `Rp. ${params.value.toLocaleString()}`; }, }, - barWidth: "50%", + // barWidth: "50%", + data: [this.dataCompPrev[0].rupiah, this.dataCompPrev[1].rupiah], }, ], }; @@ -236,79 +239,80 @@ export class CostManagementComponent implements OnInit { this.costService.getCompActEstCost(buildingId).subscribe((data) => { this.dataCompAct = data.data[0]; this.chartOption2 = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + formatter: function (params) { + var tar = params[1]; + return tar.name + "
" + tar.seriesName + " : " + tar.value; + }, + }, + grid: { left: "25%", right: "25%", top: "20%", bottom: "20%", }, - - // Add tooltip - tooltip: { - trigger: "axis", - enterable: false, - formatter: function (params) { - return `${params[0].name}
${ - params[0].seriesName - }: Rp. ${params[0].value.toLocaleString()}`; + color: ["#37A647"], + xAxis: { + type: "category", + splitLine: { show: false }, + data: ["Estimation Cost", "Actual Cost"], + axisLine: { + show: true, + lineStyle: { + color: "#37A647", + width: 7, + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, }, }, - // Add legend - legend: false, + yAxis: { + type: "value", + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, - // Add custom colors - color: ["#37A647"], - - // Horizontal axis - xAxis: [ + series: [ { - type: "category", - data: ["Estimation Cost", "Actual Cost"], - axisLine: { - show: true, - lineStyle: { - color: "#37A647", - width: 4, + name: "Placeholder", + type: "bar", + stack: "Total", + itemStyle: { + borderColor: "transparent", + color: "transparent", + }, + emphasis: { + itemStyle: { + borderColor: "transparent", + color: "transparent", }, }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, + data: [2500, 2500], }, - ], - - // Vertical axis - yAxis: [ - { - type: "value", - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - }, - axisLabel: { - show: false, - }, - }, - ], - - // Add series - series: [ { name: "Cost", type: "bar", - data: [this.dataCompAct.est_cost, this.dataCompAct.real_cost], + stack: "Total", label: { show: true, position: "top", @@ -317,7 +321,8 @@ export class CostManagementComponent implements OnInit { return `Rp. ${params.value.toLocaleString()}`; }, }, - barWidth: "50%", // Adjust bar width + // barWidth: "50%", + data: [this.dataCompAct.est_cost, this.dataCompAct.real_cost], }, ], }; diff --git a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html index 90f9534..e6c7b14 100644 --- a/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html +++ b/src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html @@ -36,6 +36,7 @@ id="code" formControlName="code" maxlength="10" + (input)="toUppercase($event)" />
{ this.data = res.results.data; 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 a4a332b..7c4386b 100644 --- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts +++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts @@ -284,6 +284,7 @@ export class DetailComponent { legend: {}, toolbox: { show: true, + orient: 'vertical', feature: { dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] },