penyesuaian UI cost management
This commit is contained in:
parent
11184e4a46
commit
fc10a44d5d
|
|
@ -19,3 +19,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.breadcrumb-item::before {
|
||||
content: none !important; /* Removes any default content, such as "-" */
|
||||
}
|
||||
|
||||
.breadcrumb-item + .breadcrumb-item::before {
|
||||
content: none !important; /* Removes any default content, such as "-" */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,21 +3,33 @@
|
|||
class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new"
|
||||
*ngIf="breadcrumb"
|
||||
>
|
||||
<button *ngIf="breadcrumb.isLinkBack" type="button" class="btn btn-icon btn-pure secondary mr-1" routerLink="{{ breadcrumb.linkBack }}">
|
||||
<i class="feather ft-chevron-left"></i>
|
||||
<button
|
||||
*ngIf="breadcrumb.isLinkBack"
|
||||
type="button"
|
||||
class="btn btn-icon btn-pure secondary mr-1"
|
||||
routerLink="{{ breadcrumb.linkBack }}"
|
||||
>
|
||||
<i class="feather ft-chevron-left" style="color: #ffffff"></i>
|
||||
</button>
|
||||
<h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff;">
|
||||
<h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff">
|
||||
{{ breadcrumb.mainlabel }}
|
||||
</h3>
|
||||
<div class="row breadcrumbs-top d-inline-block">
|
||||
<div class="breadcrumb-wrapper col-12">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item" *ngFor="let link of breadcrumb.links">
|
||||
<a *ngIf="link.isLink" routerLink="{{ link.link }}">{{
|
||||
link.name
|
||||
}}</a>
|
||||
<span *ngIf="!link.isLink" style="color: #ffffff;">{{ link.name }}</span>
|
||||
</li>
|
||||
<ng-container *ngFor="let link of breadcrumb.links; let last = last">
|
||||
<li class="breadcrumb-item" style="color: #ffffff">
|
||||
<ng-container *ngIf="link.isLink; else notLink">
|
||||
<a routerLink="{{ link.link }}" style="color: #ffffff">{{ link.name }}</a>
|
||||
</ng-container>
|
||||
<ng-template #notLink>
|
||||
<span style="color: #ffffff">{{ link.name }}</span>
|
||||
</ng-template>
|
||||
<span *ngIf="!last" class="breadcrumb-arrow" style="color: #ffffff; margin: 0 5px;">
|
||||
<i class="feather ft-chevron-right"></i>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -12,15 +12,10 @@
|
|||
stroke-width: 20px !important;
|
||||
}
|
||||
|
||||
/* :host ::ng-deep .donut-chart2 {
|
||||
-webkit-filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)) !important;
|
||||
filter: drop-shadow(0px 10px 11px rgba(187, 187, 187));
|
||||
} */
|
||||
|
||||
:host ::ng-deep .donut-chart2 .ct-label {
|
||||
fill: #ffffff;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 1.75rem;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +57,61 @@
|
|||
stroke-width: 30px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .donut-chart3 .ct-label {
|
||||
fill: #ffffff;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-label.ct-horizontal {
|
||||
font-size: 12px; /* Adjust font size */
|
||||
transform: rotate(-45deg); /* Rotate labels if needed for better fit */
|
||||
text-anchor: end;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ct-chart-bar .ct-labels .ct-label.ct-horizontal {
|
||||
margin-right: 20px; /* Adjust margin for labels */
|
||||
}
|
||||
|
||||
|
||||
.chart-title {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* Hide the default calendar icon */
|
||||
input[type="month"]::-webkit-calendar-picker-indicator {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* styles.css atau styles.scss */
|
||||
.chartist-tooltip {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ct-tooltip-visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* table */
|
||||
:host
|
||||
::ng-deep
|
||||
|
|
|
|||
|
|
@ -8,16 +8,22 @@
|
|||
<div class="row">
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-header" style="background-color: #252525 !important">
|
||||
<h4 class="card-title text-center" style="color: #ffffff !important;">
|
||||
<div
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<h4
|
||||
class="card-title text-center"
|
||||
style="color: #ffffff !important"
|
||||
>
|
||||
Comparison of Water and Electricity Costs
|
||||
</h4>
|
||||
<hr
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
"
|
||||
/>
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
|
|
@ -37,24 +43,28 @@
|
|||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-header" style="background-color: #252525 !important">
|
||||
<h4 class="card-title text-center" style="color: #ffffff !important;">
|
||||
<div
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<h4
|
||||
class="card-title text-center"
|
||||
style="color: #ffffff !important"
|
||||
>
|
||||
Comparison of Previous Month Costs
|
||||
</h4>
|
||||
<hr
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
"
|
||||
/>
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div
|
||||
class="donut-chart3 text-center"
|
||||
style="height: 150px !important"
|
||||
>
|
||||
<div class="donut-chart3" style="height: 150px !important">
|
||||
<x-chartist
|
||||
class="text-center"
|
||||
*ngIf="barChart"
|
||||
[data]="barChart.data"
|
||||
[type]="barChart.type"
|
||||
|
|
@ -70,23 +80,30 @@
|
|||
</div>
|
||||
<div class="col-lg-4 col-12">
|
||||
<div class="card" style="background-color: #252525 !important">
|
||||
<div class="card-header" style="background-color: #252525 !important">
|
||||
<h4 class="card-title text-center" style="color: #ffffff !important;">
|
||||
<div
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
>
|
||||
<h4
|
||||
class="card-title text-center"
|
||||
style="color: #ffffff !important"
|
||||
>
|
||||
Comparison of Actual Costs and Estimated Costs
|
||||
</h4>
|
||||
<hr
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
"
|
||||
/>
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-block">
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<label style="color: #ffffff">Actual Cost</label>
|
||||
<ngb-progressbar
|
||||
height="45px"
|
||||
height="35px"
|
||||
type="success"
|
||||
[value]="dataCompAct?.est_cost"
|
||||
[max]="dataCompAct?.real_cost"
|
||||
|
|
@ -103,8 +120,9 @@
|
|||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<label style="color: #ffffff">Estimated Cost</label>
|
||||
<ngb-progressbar
|
||||
height="45px"
|
||||
height="35px"
|
||||
type="danger"
|
||||
[value]="dataCompAct?.real_cost"
|
||||
[max]="dataCompAct?.real_cost"
|
||||
|
|
@ -187,17 +205,20 @@
|
|||
type="button"
|
||||
class="btn btn-outline-success ml-2"
|
||||
(click)="doFilter()"
|
||||
style="background-color: #252525 !important; border-color: #BEF264 !important;"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
border-color: #bef264 !important;
|
||||
"
|
||||
[disabled]="spinnerFilterActive"
|
||||
>
|
||||
<i
|
||||
class="la la-search"
|
||||
style="color: #ffffff !important;"
|
||||
style="color: #ffffff !important"
|
||||
*ngIf="!spinnerFilterActive"
|
||||
></i>
|
||||
<i
|
||||
class="la la-spinner spinner"
|
||||
style="color: #ffffff !important;"
|
||||
style="color: #ffffff !important"
|
||||
*ngIf="spinnerFilterActive"
|
||||
></i>
|
||||
</button>
|
||||
|
|
@ -338,13 +359,14 @@
|
|||
let-value="value"
|
||||
ngx-datatable-cell-template
|
||||
>
|
||||
|
||||
<p style="color: #ffffff !important">{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR"
|
||||
})
|
||||
}}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR"
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -361,7 +383,8 @@
|
|||
let-value="value"
|
||||
ngx-datatable-cell-template
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value }}</p> kWh
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
kWh
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -376,7 +399,9 @@
|
|||
let-value="value"
|
||||
ngx-datatable-cell-template
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value | date : "MM/yyyy" }}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value | date : "MM/yyyy" }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -391,7 +416,9 @@
|
|||
ngx-datatable-cell-template
|
||||
let-value="value"
|
||||
>
|
||||
<p style="color: #ffffff !important">{{ value === 2 ? "Aktif" : "Tidak Aktif" }}</p>
|
||||
<p style="color: #ffffff !important">
|
||||
{{ value === 2 ? "Aktif" : "Tidak Aktif" }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -409,7 +436,10 @@
|
|||
>
|
||||
<button
|
||||
class="btn btn-sm btn-warning mr-1"
|
||||
style="background-color: #000000 !important; border-color: #BEF264 !important;"
|
||||
style="
|
||||
background-color: #000000 !important;
|
||||
border-color: #bef264 !important;
|
||||
"
|
||||
(click)="viewRow(row)"
|
||||
>
|
||||
<i class="ficon feather ft-eye"></i>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,10 @@ import { CostManagementService } from "../service/cost-management.service";
|
|||
import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
|
||||
import { ModalAddActualComponent } from "./modal-add-actual/modal-add-actual.component";
|
||||
|
||||
import { ChartEvent, ChartType } from "ng-chartist";
|
||||
import * as Chartist from "chartist";
|
||||
import "chartist-plugin-tooltips";
|
||||
|
||||
@Component({
|
||||
selector: "app-cost-management",
|
||||
templateUrl: "./cost-management.component.html",
|
||||
|
|
@ -124,7 +128,7 @@ export class CostManagementComponent implements OnInit {
|
|||
const dataChart2 = {
|
||||
donut: {
|
||||
series: [this.dataComp.elect, this.dataComp.water],
|
||||
labels: [],
|
||||
labels: ["Electricity", "Water"],
|
||||
},
|
||||
};
|
||||
this.donutChart2 = {
|
||||
|
|
@ -137,28 +141,18 @@ export class CostManagementComponent implements OnInit {
|
|||
donut: true,
|
||||
showLabel: true,
|
||||
startAngle: 0,
|
||||
// labelInterpolationFnc: function (value) {
|
||||
// const total = 82;
|
||||
// return total + "C";
|
||||
// },
|
||||
},
|
||||
events: {
|
||||
draw(data: any): void {
|
||||
if (data.type === "label") {
|
||||
if (data.index === 0) {
|
||||
data.element.attr({
|
||||
dx: data.element.root().width() / 2,
|
||||
dy: data.element.root().height() / 2,
|
||||
});
|
||||
} else {
|
||||
data.element.remove();
|
||||
}
|
||||
}
|
||||
labelPosition: "outside",
|
||||
labelOffset: 50,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true,
|
||||
}),
|
||||
],
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// this.dataChart2.donut.labels = ["Water", "Electricity"];
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -178,30 +172,31 @@ export class CostManagementComponent implements OnInit {
|
|||
options: {
|
||||
fullwidth: true,
|
||||
width: "100px",
|
||||
height: "150px",
|
||||
seriesBarDistance: 100,
|
||||
height: "200px",
|
||||
seriesBarDistance: 200,
|
||||
chartPadding: {bottom: 40 },
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
offset: 5,
|
||||
showLabel: true,
|
||||
offset: 30,
|
||||
},
|
||||
axisY: {
|
||||
showGrid: false,
|
||||
showLabel: false,
|
||||
showLabel: false, // Hide labels on the y-axis
|
||||
scaleMinSpace: 30,
|
||||
},
|
||||
classNames: {
|
||||
bar: "ct-bar", // Menambahkan kelas CSS ke batang
|
||||
bar: "ct-bar", // Add custom class to the bar
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
[
|
||||
"screen and (max-width: 640px)",
|
||||
{
|
||||
seriesBarDistance: 100,
|
||||
seriesBarDistance: 10,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
return value[0]; // Return the first character of the label
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue