From a4186d5e41a9ab02cb33c25d82c610782b2c174e Mon Sep 17 00:00:00 2001 From: farhantock Date: Thu, 23 May 2024 14:20:54 +0700 Subject: [PATCH] fix(dashboard): change view chart in dashboard BOD --- src/components/CardDashboard/CardDashboard.js | 63 ++++++++++----- src/views/Dashboard/Components/index.js | 76 +++++++++---------- src/views/Dashboard/DashboardBOD.js | 71 ++++++++++------- src/views/Dashboard/DashboardProject.js | 4 +- 4 files changed, 129 insertions(+), 85 deletions(-) diff --git a/src/components/CardDashboard/CardDashboard.js b/src/components/CardDashboard/CardDashboard.js index c2c9c14..e507176 100644 --- a/src/components/CardDashboard/CardDashboard.js +++ b/src/components/CardDashboard/CardDashboard.js @@ -158,6 +158,35 @@ const optionsScheduleHealthPerDivision = { indexAxis: 'x', responsive: true, maintainAspectRatio: false, + scales: { + x: { + ticks: { + font: { + size: 9, + }, + callback: function (value) { + const label = this.getLabelForValue(value); + const maxLabelLength = 5; + if (label.length <= maxLabelLength) { + return label; + } + const words = label.split(' '); + let lines = []; + let currentLine = ''; + words.forEach(word => { + if ((currentLine + word).length <= maxLabelLength) { + currentLine += word + ' '; + } else { + lines.push(currentLine.trim()); + currentLine = word + ' '; + } + }); + lines.push(currentLine.trim()); + return lines; + }, + }, + } + }, plugins: { legend: { display: true, @@ -175,7 +204,7 @@ const optionsScheduleHealthPerDivision = { } } -export const ContentLoaderChart = ({type}) => { +export const ContentLoaderChart = ({ type }) => { if (type === 'vertical-bar') { return ( { */} - - - - - - - - + + + + + + + + ) @@ -233,9 +262,9 @@ export const ContentLoaderChart = ({type}) => { backgroundColor="#f3f3f3" foregroundColor="#ecebeb" > - + - + ) @@ -298,10 +327,10 @@ export const CardDashboard = ({ title, subtitle, chartType, chartData, chartOpti
- { isReady ? - chartData ? chart : + {isReady ? + chartData ? chart : : - + }
@@ -345,16 +374,16 @@ export const CardScheduleHealthPerDivision = ({ isReady, title, subtitle, mode,
- {isReady ? chartData ? : : } + {isReady ? chartData ? : : }
) } -export const NoDataChart = ({message}) => { +export const NoDataChart = ({ message }) => { return ( -
+
{message ? message : "No Data Available"}
) diff --git a/src/views/Dashboard/Components/index.js b/src/views/Dashboard/Components/index.js index 68afd54..0cfc817 100644 --- a/src/views/Dashboard/Components/index.js +++ b/src/views/Dashboard/Components/index.js @@ -2,7 +2,7 @@ import React from 'react' import moment from "moment" import ContentLoader from "react-content-loader" -export const SingleTextLoader = ({width, height}) => ( +export const SingleTextLoader = ({ width, height }) => ( ( //
Loading overdue activities...
-
+
-
+
-
+
-
+
) -export const Comment = ({name, comment, created_at}) => ( -
-
{name}
-
{created_at ? moment(created_at).format('D MMMM YYYY HH:mm:ss') : '-'}
+export const Comment = ({ name, comment, created_at }) => ( +
+
{name}
+
{created_at ? moment(created_at).format('D MMMM YYYY HH:mm:ss') : '-'}
{comment}
) -export const BehindTaskItem = ({name, message}) => ( -
-
{name}
-
{message}
+export const BehindTaskItem = ({ name, message }) => ( +
+
{name}
+
{message}
{/*
{division}
*/}
) -export const ProgressPlanningBar = ({progress}) => { +export const ProgressPlanningBar = ({ progress }) => { if (progress) { if (progress > 30) { return ( -
+
Planning : {progress}%
) } else { return ( -
+
- Planning : {progress}% + Planning : {progress}%
) } } - else { - return ( -
-
- Planning : 0% -
- ) + else { + return ( +
+
+ Planning : 0% +
+ ) } } -export const ProgressActualBar = ({progress}) => { +export const ProgressActualBar = ({ progress }) => { if (progress) { if (progress > 30) { return ( -
+
Actual : {progress}%
) } else { return ( -
+
- Actual : {progress}% + Actual : {progress}%
) } } else { return ( -
-
- Actual : 0% -
- ) +
+
+ Actual : 0% +
+ ) } } -export const HealthByBudget = ({status}) => { +export const HealthByBudget = ({ status }) => { let bgColor = '#52AC0B'; // on-budget if (status && status !== '-') { if (status === 'warning') bgColor = '#ED7014'; else if (status === 'overrun') bgColor = '#D0312D'; } return ( -
+
Health By Budget
) } -export const HealthBySchedule = ({status}) => { +export const HealthBySchedule = ({ status }) => { // let bgColor = '#E80053'; // pink let bgColor = '#52AC0B'; // green if (status && status !== '-') { if (status === 'warning') bgColor = '#ED7014'; - else if (status === 'danger') bgColor = '#D0312D'; + else if (status === 'behind-schedule') bgColor = '#D0312D'; } return ( -
+
Health By Schedule
) diff --git a/src/views/Dashboard/DashboardBOD.js b/src/views/Dashboard/DashboardBOD.js index 02124e9..bc47410 100644 --- a/src/views/Dashboard/DashboardBOD.js +++ b/src/views/Dashboard/DashboardBOD.js @@ -242,7 +242,7 @@ const DashboardBOD = (props) => { } if (result.status == 200 && result.data.data) { - SET_PROJECT_SCHEDULE_HEALTH_PER_DIVISION(result.data.data[0]); + SET_PROJECT_SCHEDULE_HEALTH_PER_DIVISION(result.data.data); } SET_READY_PROJECT_SCHEDULE_BUDGET_HEALTH_PER_DIVISION(true); } @@ -348,25 +348,6 @@ const DashboardBOD = (props) => { if (result.data.data.length > 0) { let tableData = []; result.data.data.map((item, idx) => { - let statusHealthBySchedule = 'on-schedule'; - let planningProgress = 0; - let actualProgress = 0; - let selisihProgress = 0; - - if (item.scurve && item.scurve[0]) { - planningProgress = item.scurve[0].data.percentagePlan[item.scurve[0].data.percentagePlan.length - 1] - actualProgress = item.scurve[0].data.percentageReal[item.scurve[0].data.percentageReal.length - 1] - } - - selisihProgress = planningProgress - actualProgress - - if (selisihProgress > 0 && selisihProgress <= 5) { - statusHealthBySchedule = 'warning' - } - else if (selisihProgress > 5) { - statusHealthBySchedule = 'danger' - } - let outstanding_balance = 0; if (item.invoice) { outstanding_balance = item.invoice.invoiced - item.invoice.paid; @@ -394,7 +375,7 @@ const DashboardBOD = (props) => { "cash_in": item.invoice?.paid ? toRupiah(item.invoice.paid) : '-', "outstanding_balance": outstanding_balance, "budget": , - "schedule": + "schedule": }) }); SET_DATA_DETAIL_EXPENDITURE(tableData); @@ -495,7 +476,12 @@ const DashboardBOD = (props) => { y: { ticks: { autoSkip: false, - stepSize: 2 + stepSize: 2, + // callback: function (value) { + // if (value === 0 || value === null || value === undefined) { + // return ''; + // } + // } } } }, @@ -527,11 +513,11 @@ const DashboardBOD = (props) => { label: '', data: [ 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 + PROJECT_EXPENDITURE?.total_expenditure || 0, + PROJECT_EXPENDITURE?.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 0, + PROJECT_EXPENDITURE?.total_paid_invoice || 0, + PROJECT_EXPENDITURE?.total_paid_invoice || 0, + PROJECT_EXPENDITURE?.total_paid_invoice || 0 ], borderColor: [ PROJECT_EXPENDITURE_COLOR?.total_budget || '#480ca8', @@ -849,7 +835,36 @@ const DashboardBOD = (props) => { font: { size: 9, }, - } + maxRotation: 0, + minRotation: 0, + callback: function (value) { + const label = this.getLabelForValue(value); + const words = label.split(' '); + const maxWordLength = 7; + + const splitLongWords = (word) => { + if (word.length <= maxWordLength) { + return [word]; + } + const chunks = []; + for (let i = 0; i < word.length; i += maxWordLength) { + chunks.push(word.substring(i, i + maxWordLength)); + } + return chunks; + }; + + const lines = []; + words.forEach(word => { + if (word.length > maxWordLength) { + lines.push(...splitLongWords(word)); + } else { + lines.push(word); + } + }); + + return lines; + }, + }, }, y: { ticks: { diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js index 930a96f..19dc791 100644 --- a/src/views/Dashboard/DashboardProject.js +++ b/src/views/Dashboard/DashboardProject.js @@ -436,10 +436,10 @@ const DashboardProject = (props) => { setActualProgress(actualProgress); } selisihProgress = planningProgress - actualProgress; - if (selisihProgress > 0 && selisihProgress <= 5) { + if (selisihProgress > 0 && selisihProgress <= 20) { statusHealthBySchedule = "warning"; } else if (selisihProgress > 5) { - statusHealthBySchedule = "danger"; + statusHealthBySchedule = "behind-schedule"; } setHealthBySchedule(statusHealthBySchedule); setIsReadySCurve(true);