From b9c39b6320a2d1be89f7f0735b6d0020f5c2b1c3 Mon Sep 17 00:00:00 2001
From: farhantock <achmadfarhanmushafa@gmail.com>
Date: Sun, 19 May 2024 01:50:23 +0700
Subject: [PATCH] feat(chart): update labels request by client

---
 src/views/Dashboard/DashboardBOD.js | 75 +++++++++++++++++------------
 1 file changed, 44 insertions(+), 31 deletions(-)

diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js
index b02eb47..02124e9 100644
--- a/src/views/Dashboard/DashboardBOD.js
+++ b/src/views/Dashboard/DashboardBOD.js
@@ -453,7 +453,7 @@ const DashboardBOD = (props) => {
 							<div style={{ backgroundColor: '#F8F8F8', margin: 2, paddingLeft: 20, paddingRight: 20, paddingTop: 10, height: '35vh' }}>
 								<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
 									<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
-										<div style={{ color: '#444444', fontSize: 14, fontWeight: 'bold' }}>Project Expenditure</div>
+										<div style={{ color: '#444444', fontSize: 14, fontWeight: 'bold' }}>RKAP {moment().format('YYYY')}</div>
 										<div style={{ color: '#888888', fontSize: 12 }}>Total Project Expenditure from on-going project.</div>
 									</div>
 									{PROJECT_EXPENDITURE ?
@@ -463,13 +463,13 @@ const DashboardBOD = (props) => {
 													Detailed View
 												</div>
 											</div>
-											<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+											{/* <div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
 												<Link to="/dashboard-perproject" style={{ textDecoration: 'none' }}>
 													<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}>
 														All Dashboard
 													</div>
 												</Link>
-											</div>
+											</div> */}
 										</>
 										:
 										<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -491,53 +491,63 @@ const DashboardBOD = (props) => {
 																	return toRupiah(value, { useUnit: 'jt' });
 																}
 															}
-														}
-													},
-													elements: {
-														bar: {
-															borderWidth: 2,
 														},
+														y: {
+															ticks: {
+																autoSkip: false,
+																stepSize: 2
+															}
+														}
 													},
 													responsive: true,
 													maintainAspectRatio: false,
 													plugins: {
 														legend: {
 															display: false,
-															position: 'right',
-															labels: {
-																boxWidth: 10
-															}
 														},
 														datalabels: {
 															color: '#FFFFFF',
 															formatter: function (value, context) {
-																return value ? toRupiah(value, { useUnit: 'jt' }) : 0
+																return value ? toRupiah(value, { useUnit: 'jt' }) : 0;
 															}
 														}
 													},
 												}}
 												data={{
-													labels: ['Total Budget', 'Expenditure', 'Invoice', 'Cash In'],
+													labels: [
+														`Target Pendapatan ${moment().format('YYYY')}`,
+														'Realisasi Pendapatan',
+														'Realisasi Cash In',
+														'Anggaran Biaya',
+														'Realisasi Anggaran Biaya',
+														'Laba'
+													],
 													datasets: [
 														{
 															label: '',
 															data: [
-																PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_budget ? PROJECT_EXPENDITURE.total_budget : 0,
-																PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_expenditure ? PROJECT_EXPENDITURE.total_expenditure : 0,
-																PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 0,
-																PROJECT_EXPENDITURE && PROJECT_EXPENDITURE.total_paid_invoice ? PROJECT_EXPENDITURE.total_paid_invoice : 0
+																PROJECT_EXPENDITURE?.total_budget || 0,
+																PROJECT_EXPENDITURE?.total_expenditure || 1000000000,
+																PROJECT_EXPENDITURE?.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 1000000000,
+																PROJECT_EXPENDITURE?.total_paid_invoice || 1000000000,
+																PROJECT_EXPENDITURE?.total_paid_invoice || 1000000000,
+																PROJECT_EXPENDITURE?.total_paid_invoice || 1000000000
 															],
 															borderColor: [
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8',
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_expenditure && PROJECT_EXPENDITURE_COLOR.total_expenditure !== "" ? PROJECT_EXPENDITURE_COLOR.total_expenditure : '#b5179e',
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_invoice && PROJECT_EXPENDITURE_COLOR.total_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_invoice : '#a26a16',
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_paid_invoice && PROJECT_EXPENDITURE_COLOR.total_paid_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_paid_invoice : '#4c4747'
+																PROJECT_EXPENDITURE_COLOR?.total_budget || '#480ca8',
+																PROJECT_EXPENDITURE_COLOR?.total_expenditure || '#b5179e',
+																PROJECT_EXPENDITURE_COLOR?.total_invoice || '#a26a16',
+																PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#4c4747',
+																PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#e00000',
+																PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#033a37'
 															],
 															backgroundColor: [
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_budget && PROJECT_EXPENDITURE_COLOR.total_budget !== "" ? PROJECT_EXPENDITURE_COLOR.total_budget : '#480ca8',
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_expenditure && PROJECT_EXPENDITURE_COLOR.total_expenditure !== "" ? PROJECT_EXPENDITURE_COLOR.total_expenditure : '#b5179e',
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_invoice && PROJECT_EXPENDITURE_COLOR.total_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_invoice : '#a26a16',
-																PROJECT_EXPENDITURE_COLOR && PROJECT_EXPENDITURE_COLOR.total_paid_invoice && PROJECT_EXPENDITURE_COLOR.total_paid_invoice !== "" ? PROJECT_EXPENDITURE_COLOR.total_paid_invoice : '#4c4747'
+																PROJECT_EXPENDITURE_COLOR?.total_budget || '#480ca8',
+																PROJECT_EXPENDITURE_COLOR?.total_expenditure || '#b5179e',
+																PROJECT_EXPENDITURE_COLOR?.total_invoice || '#a26a16',
+																PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#4c4747',
+																PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#e00000',
+																PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#033a37'
 															],
 															borderRadius: 5,
 															borderSkipped: false
@@ -545,6 +555,7 @@ const DashboardBOD = (props) => {
 													],
 												}}
 											/>
+
 											:
 											<NoDataChart />
 										:
@@ -556,6 +567,8 @@ const DashboardBOD = (props) => {
 											backgroundColor="#f3f3f3"
 											foregroundColor="#ecebeb"
 										>
+											<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
+											<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
 											<rect x="7" y="12" rx="5" ry="5" width="414" height="20" />
 											<rect x="7" y="41" rx="5" ry="5" width="220" height="20" />
 											<rect x="7" y="69" rx="5" ry="5" width="319" height="20" />
@@ -640,8 +653,8 @@ const DashboardBOD = (props) => {
 						<Col span={12}>
 							<CardDashboard
 								isReady={READY_PROJECT_PER_DIVISION}
-								title="Project By Division"
-								subtitle="Amount of project from multiple division."
+								title="Project By MP"
+								subtitle="Amount of project from multiple MP."
 								chartType="pie"
 								chartOption={{
 									elements: {
@@ -692,8 +705,8 @@ const DashboardBOD = (props) => {
 						<Col span={12}>
 							<CardDashboard
 								isReady={READY_PROJECT_VALUE_PER_DIVISION}
-								title="Project Value By Division"
-								subtitle="Value of project from multiple division."
+								title="Project Revenue By MP"
+								subtitle="Revenue of project from multiple MP."
 								chartType="pie"
 								chartOption={{
 									elements: {
@@ -747,7 +760,7 @@ const DashboardBOD = (props) => {
 								<div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
 									<div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
 										<div style={{ color: '#444444', fontSize: 14, fontWeight: 'bold' }}>Project By Phase</div>
-										<div style={{ color: '#888888', fontSize: 12 }}>Progress of project from multiple division.</div>
+										<div style={{ color: '#888888', fontSize: 12 }}>Progress of project from multiple MP.</div>
 									</div>
 								</div>
 								<div style={{ position: 'relative', height: '25vh', margin: 'auto', paddingBottom: 10, justifyContent: 'center' }}>