ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(chart): update labels request by client

pull/1/head
farhantock 6 months ago
parent
efeff13c43
commit
b9c39b6320
1 changed files with 44 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 75
      src/views/Dashboard/DashboardBOD.js

75
src/views/Dashboard/DashboardBOD.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save