fix(dashboard): change view chart in dashboard BOD

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,

src/views/Dashboard/Components/index.js

@@ -120,7 +120,7 @@ export const HealthBySchedule = ({status}) => {
     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 (
         <div style={{ backgroundColor: bgColor, color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25 }}>

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": <HealthByBudget status={item.budget_health} />,
-						"schedule": <HealthBySchedule status={statusHealthBySchedule} />
+						"schedule": <HealthBySchedule status={item.schedule_health} />
 					})
 				});
 				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: {

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);