// All imports for the Project Management Dashboard
import ApexCharts from '../thirdparty/apexchartsWrapper.js';
document.addEventListener('DOMContentLoaded', function() {
'use strict';
/***************************************************************/
/* Development Phases Chart #development-phases-chart */
/***************************************************************/
if (document.getElementById('development-phases-chart')) {
// Generate complex development timeline data
const generateComplexTimelineData = () => {
// Project teams - reduced number of teams to make it less busy
const teams = [
{
name: 'Frontend Team',
color: window.colorMap.warning[400].hex,
members: [
{ id: 1, name: 'Alex Johnson', img: './img/demo/avatars/avatar-a.png' },
{ id: 2, name: 'Emma Wilson', img: './img/demo/avatars/avatar-b.png' },
{ id: 3, name: 'Michael Chen', img: './img/demo/avatars/avatar-c.png' }
]
},
{
name: 'Backend Team',
color: window.colorMap.success[400].hex,
members: [
{ id: 4, name: 'Sarah Williams', img: './img/demo/avatars/avatar-d.png' },
{ id: 5, name: 'James Lee', img: './img/demo/avatars/avatar-e.png' }
]
},
{
name: 'Database Team',
color: window.colorMap.info[400].hex,
members: [
{ id: 6, name: 'Olivia Smith', img: './img/demo/avatars/avatar-f.png' },
{ id: 7, name: 'David Rodriguez', img: './img/demo/avatars/avatar-g.png' }
]
},
{
name: 'QA Team',
color: window.colorMap.danger[100].hex,
members: [
{ id: 8, name: 'Sophia Martinez', img: './img/demo/avatars/avatar-h.png' },
{ id: 9, name: 'Oliver Wilson', img: './img/demo/avatars/avatar-i.png' }
]
},
{
name: 'DevOps Team',
color: window.colorMap.primary[200].hex,
members: [
{ id: 10, name: 'Jessica Brown', img: './img/demo/avatars/avatar-j.png' },
{ id: 11, name: 'Robert Taylor', img: './img/demo/avatars/avatar-k.png' }
]
}
];
// Project Phases (Broader categories) - simplified with fewer activities and expanded over 6 months
const phases = [
{ name: 'Research & Planning', startDate: '2025-01-15', activities: [
{ name: 'Market Research', duration: [10, 15] },
{ name: 'Requirement Analysis', duration: [12, 20] },
{ name: 'Feasibility Study', duration: [8, 14] }
]},
{ name: 'Design', startDate: '2025-02-10', activities: [
{ name: 'Information Architecture', duration: [15, 20] },
{ name: 'Wireframing', duration: [14, 21] },
{ name: 'UI Design', duration: [18, 30] }
]},
{ name: 'Development', startDate: '2025-03-05', activities: [
{ name: 'Core Architecture', duration: [20, 30] },
{ name: 'Frontend Framework', duration: [25, 40] },
{ name: 'Backend API Development', duration: [30, 45] },
{ name: 'Database Schema', duration: [15, 25] }
]},
{ name: 'Testing', startDate: '2025-04-20', activities: [
{ name: 'Unit Testing', duration: [20, 30] },
{ name: 'Integration Testing', duration: [15, 25] },
{ name: 'User Acceptance Testing', duration: [15, 25] }
]},
{ name: 'Deployment', startDate: '2025-05-25', activities: [
{ name: 'Staging Environment Setup', duration: [10, 15] },
{ name: 'Production Environment Prep', duration: [12, 18] },
{ name: 'Data Migration', duration: [10, 20] }
]},
{ name: 'Post-Launch', startDate: '2025-06-20', activities: [
{ name: 'Monitoring', duration: [14, 21] },
{ name: 'Bug Fixes', duration: [10, 30] },
{ name: 'Performance Optimization', duration: [15, 25] }
]}
];
// Complex data generation - ensure most tasks have at least 3 team members
const complexData = [];
let taskId = 1;
phases.forEach(phase => {
const phaseStartDate = new Date(phase.startDate);
let currentStartDate = new Date(phaseStartDate);
phase.activities.forEach(activity => {
// Assign different teams to different activities with some randomness
teams.forEach(team => {
// Increased probability to ~50% to reduce number of entries
if (Math.random() > 0.5) {
// Calculate a random start date within a reasonable range from the current date
const randomStartOffset = Math.floor(Math.random() * 5); // 0-4 days offset (slightly increased for more spread)
const startDate = new Date(currentStartDate);
startDate.setDate(startDate.getDate() + randomStartOffset);
// Calculate duration (days) within the specified range
const minDuration = activity.duration[0];
const maxDuration = activity.duration[1];
const actualDuration = Math.floor(Math.random() * (maxDuration - minDuration + 1)) + minDuration;
// Calculate end date
const endDate = new Date(startDate);
endDate.setDate(startDate.getDate() + actualDuration);
// Assign team members to the task - ensure at least 3 members when possible
const assignedMembers = [];
// Determine number of members to assign (3-5 for most tasks)
const memberCount = Math.min(team.members.length, Math.floor(Math.random() * 3) + 3); // 3-5 members
const availableMembers = [...team.members];
// If team has fewer than 3 members, assign all of them
if (availableMembers.length <= 3) {
assignedMembers.push(...availableMembers);
} else {
// Otherwise, randomly select memberCount members
for (let i = 0; i < memberCount; i++) {
const randomIndex = Math.floor(Math.random() * availableMembers.length);
assignedMembers.push(availableMembers.splice(randomIndex, 1)[0]);
}
}
// Create the task
complexData.push({
id: taskId++,
name: team.name,
data: [{
x: `${phase.name}: ${activity.name}`,
y: [startDate.getTime(), endDate.getTime()],
fillColor: team.color,
team: team.name,
phase: phase.name,
activity: activity.name,
duration: actualDuration,
assignedMembers: assignedMembers
}]
});
}
});
// Move the current start date forward
currentStartDate.setDate(currentStartDate.getDate() + Math.floor(Math.random() * 7) + 3); // 3-9 days gap (increased for more spread)
});
});
return { complexData, phases, teams };
};
const { complexData, phases, teams } = generateComplexTimelineData();
// No longer need these functions for adding images to chart bars
const dataLabelsFormatter = function(val, opts) {
// Return empty string - we're not showing images in bars anymore
return '';
};
const developmentPhasesOptions = {
series: complexData,
chart: {
height: 600, // Increased height for better visualization
type: 'rangeBar',
fontFamily: 'inherit',
parentHeightOffset: 0,
animations: {
enabled: false // Disable animations for better performance with large dataset
},
zoom: {
enabled: true,
type: 'x',
autoScaleYaxis: false,
allowMouseWheelZoom: false,
zoomedArea: {
fill: {
color: '#90CAF9',
opacity: 0.4
},
stroke: {
color: '#0D47A1',
opacity: 0.4,
width: 1
}
}
},
toolbar: {
show: true,
tools: {
download: false,
selection: false,
zoom: false,
zoomin: true,
zoomout: true,
pan: true,
reset: true
},
autoSelected: 'pan'
}
},
plotOptions: {
bar: {
horizontal: true,
distributed: false,
dataLabels: {
hideOverflowingLabels: true
},
rangeBarGroupRows: true
}
},
dataLabels: {
enabled: false,
},
xaxis: {
type: 'datetime',
labels: {
style: {
colors: window.colorMap.bootstrapVars.bodyColor.hex,
fontSize: '11px'
},
datetimeUTC: false,
format: 'MMM dd'
}
},
yaxis: {
labels: {
style: {
colors: window.colorMap.bootstrapVars.bodyColor.hex,
fontSize: '11px'
},
maxWidth: 300
}
},
grid: {
borderColor: window.colorMap.bootstrapVars.bodyColor.rgba(0.1),
strokeDashArray: 3,
xaxis: {
lines: {
show: true
}
},
yaxis: {
lines: {
show: false
}
}
},
tooltip: {
custom: function(opts) {
const data = opts.w.config.series[opts.seriesIndex].data[opts.dataPointIndex];
const from = new Date(opts.y1).toLocaleDateString();
const to = new Date(opts.y2).toLocaleDateString();
const duration = Math.floor((opts.y2 - opts.y1) / (1000 * 60 * 60 * 24));
// Create team member images HTML for tooltip
let assignedMembersHtml = '';
if (data.assignedMembers && data.assignedMembers.length > 0) {
// Get the first 4 members to display
const displayMembers = data.assignedMembers.slice(0, 4);
// Calculate remaining members count for +X label
const remainingCount = Math.max(0, data.assignedMembers.length - 4);
assignedMembersHtml = `
Assigned Members:
${displayMembers.map(member => `
`).join('')}
${remainingCount > 0 ? `
` : ''}
' +
'
' + data.team + '
' +
'
' + data.activity + '
' +
'
Phase: ' + data.phase + '
' +
'
Start: ' + from + '
' +
'
End: ' + to + '
' +
'
Duration: ' + duration + ' days
' +
assignedMembersHtml +
'
' +
'
' + seriesName + ': ' + taskName + '
' +
'
Start: ' + from + '
' +
'
End: ' + to + '
' +
'
Duration: ' + duration + ' days
' +
'