bo/worklenz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(members-time-sheet): enhance tooltip display with utilization status and color coding

Browse Source
This commit is contained in:
shancds
2025-05-26 16:25:12 +05:30
parent f68c72a92a
commit 85280c33d2
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx
View File

@@ -83,17 +83,38 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
}, },
tooltip: { tooltip: {
callbacks: { callbacks: {
label: function(context: any) { label: function (context: any) {
const idx = context.dataIndex; const idx = context.dataIndex;
const member = jsonData[idx]; const member = jsonData[idx];
const hours = member?.utilized_hours || '0.00'; const hours = member?.utilized_hours || '0.00';
const percent = member?.utilization_percent || '0.00'; const percent = parseFloat(member?.utilization_percent || '0.00');
const overUnder = member?.over_under_utilized_hours || '0.00'; const overUnder = member?.over_under_utilized_hours || '0.00';
let status = '';
let color = '';
if (percent < 90) {
status = 'Under';
} else if (percent <= 110) {
status = 'Optimal';
} else {
status = 'Over';
}
return [ return [
`${context.dataset.label}: ${hours} h`, `${context.dataset.label}: ${hours} h`,
`Utilization: ${percent}%`, `Utilization: ${percent}%`,
`Over/Under Utilized: ${overUnder} h` `${status} Utilized: ${overUnder} h`
]; ];
},
labelTextColor: function (context: any) {
const idx = context.dataIndex;
const member = jsonData[idx];
const utilization = parseFloat(member?.utilization_percent || '0');
if (utilization < 90) {
return '#FFB546';
} else if (utilization >= 90 && utilization <= 110) {
return '#B2EF9A';
} else {
return '#FE7173';
}
} }
} }
} }
@@ -136,7 +157,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
const fetchChartData = async () => { const fetchChartData = async () => {
try { try {
setLoading(true); setLoading(true);
const selectedTeams = teams.filter(team => team.selected); const selectedTeams = teams.filter(team => team.selected);
const selectedProjects = filterProjects.filter(project => project.selected); const selectedProjects = filterProjects.filter(project => project.selected);
const selectedCategories = categories.filter(category => category.selected); const selectedCategories = categories.filter(category => category.selected);
@@ -169,7 +190,7 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
if (chartRef.current) { if (chartRef.current) {
// Get the canvas element // Get the canvas element
const canvas = chartRef.current.canvas; const canvas = chartRef.current.canvas;
// Create a temporary canvas to draw with background // Create a temporary canvas to draw with background
const tempCanvas = document.createElement('canvas'); const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d'); const tempCtx = tempCanvas.getContext('2d');
@@ -216,4 +237,4 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
MembersTimeSheet.displayName = 'MembersTimeSheet'; MembersTimeSheet.displayName = 'MembersTimeSheet';
export default MembersTimeSheet; export default MembersTimeSheet;