Javascript Org Chart

window.onload = function() {
// Initial organizational data structure
let orgData = {
id: '1',
name: 'Jane Doe',
title: 'CEO',
email: '[email protected]',
phone: '555-123-4567',
duties: 'Oversee all operations and strategic direction of the company.',
imageUrl: 'https://placehold.co/100x100/A0B2C9/FFFFFF?text=JD',
children: [
{
id: '2',
name: 'John Smith',
title: 'CTO',
email: '[email protected]',
phone: '555-234-5678',
duties: 'Manages all technology and development teams.',
imageUrl: 'https://placehold.co/100x100/94A3B8/FFFFFF?text=JS',
children: [
{
id: '4',
name: 'Emily Jones',
title: 'Senior Developer',
email: '[email protected]',
phone: '555-345-6789',
duties: 'Leads front-end development projects.',
imageUrl: 'https://placehold.co/100x100/6B7A99/FFFFFF?text=EJ',
children: []
},
{
id: '5',
name: 'Michael Brown',
title: 'Lead Architect',
email: '[email protected]',
phone: '555-456-7890',
duties: 'Designs and oversees software architecture.',
imageUrl: 'https://placehold.co/100x100/52668C/FFFFFF?text=MB',
children: []
}
]
},
{
id: '3',
name: 'Sarah Lee',
title: 'CFO',
email: '[email protected]',
phone: '555-567-8901',
duties: 'Responsible for financial planning and reporting.',
imageUrl: 'https://placehold.co/100x100/424960/FFFFFF?text=SL',
children: [
{
id: '6',
name: 'David Wilson',
title: 'Financial Analyst',
email: '[email protected]',
phone: '555-678-9012',
duties: 'Analyzes financial data and prepares reports.',
imageUrl: 'https://placehold.co/100x100/32394C/FFFFFF?text=DW',
children: []
}
]
},
{
id: '7',
name: 'Robert Johnson',
title: 'CMO',
email: '[email protected]',
phone: '555-789-0123',
duties: 'Manages all marketing and brand initiatives.',
imageUrl: 'https://placehold.co/100x100/2C3145/FFFFFF?text=RJ',
children: [
{
id: '8',
name: 'Laura Miller',
title: 'Marketing Manager',
email: '[email protected]',
phone: '555-890-1234',
duties: 'Executes marketing campaigns and promotions.',
imageUrl: 'https://placehold.co/100x100/22283A/FFFFFF?text=LM',
children: []
}
]
},
{
id: '9',
name: 'Jessica Chen',
title: 'COO',
email: '[email protected]',
phone: '555-901-2345',
duties: 'Oversees daily business operations and efficiency.',
imageUrl: 'https://placehold.co/100x100/1C2130/FFFFFF?text=JC',
children: []
}
]
};

const chartContainer = document.getElementById('org-chart');

/**
* Recursively renders the organizational chart from the data structure.
* @param {Object} data - The current node's data.
* @param {HTMLElement} parentElement - The parent DOM element to append to.
*/
function renderChart(data, parentElement) {
// Create the main node container
const nodeElement = document.createElement('div');
nodeElement.className = 'node d-flex flex-column align-items-center position-relative';

// Create the content box for the employee's details
const nodeContent = document.createElement('div');
nodeContent.className = 'node-content bg-white p-4 rounded-3 shadow-sm text-center';

// Create the image element
const imageContainer = document.createElement('div');
imageContainer.className = 'd-flex justify-content-center w-100'; // Flex container to center image
const image = document.createElement('img');
image.className = 'node-image';
image.src = data.imageUrl;
image.alt = `Photo of ${data.name}`;
imageContainer.appendChild(image);
nodeContent.appendChild(imageContainer);

const name = document.createElement('div');
name.className = 'node-name fw-bold text-dark';
name.textContent = data.name;

const title = document.createElement('div');
title.className = 'node-title text-secondary mt-1';
title.textContent = data.title;

const email = document.createElement('div');
email.className = 'node-contact text-secondary mt-2';
email.textContent = data.email;

const phone = document.createElement('div');
phone.className = 'node-contact text-secondary';
phone.textContent = data.phone;

const duties = document.createElement('div');
duties.className = 'node-duties text-secondary mt-3 text-start'; // Added text-start here
duties.textContent = `Duties: ${data.duties}`;

// Append all parts to the node content box
nodeContent.appendChild(name);
nodeContent.appendChild(title);
nodeContent.appendChild(email);
nodeContent.appendChild(phone);
nodeContent.appendChild(duties);

nodeElement.appendChild(nodeContent);
parentElement.appendChild(nodeElement);

// If there are children, create a container for them
if (data.children && data.children.length > 0) {
const childrenContainer = document.createElement('div');
childrenContainer.className = 'children-container d-flex justify-content-center mt-4 position-relative';

// Draw horizontal line for children
const hLine = document.createElement('div');
hLine.className = 'h-line position-absolute top-0 bg-secondary';
childrenContainer.appendChild(hLine);

data.children.forEach(child => {
// Draw vertical line from parent to child
const vLine = document.createElement('div');
vLine.className = 'v-line position-absolute top-0 bg-secondary';
childrenContainer.appendChild(vLine);

renderChart(child, childrenContainer);
});
nodeElement.appendChild(childrenContainer);
}
}

/**
* Clears and redraws the entire chart.
*/
function refreshChart() {
chartContainer.innerHTML = '';
renderChart(orgData, chartContainer);
}

// Initial chart render
refreshChart();
};