BR
Bharath Raj

Organizational Hierarchy Tree - Copy this Angular, Css Component to your project

Role: Assume you're a senior frontend software engineer building an Angular based POC. Objective: Create a web application to display the hierarchy of an organization as a pictorial flowchart (like an org chart). The top level supervisor (e.g., CEO) should be at the top, and the hierarchy should be built based on employee supervisor relationships. Input: The application should accept only Excel files (.xlsx format). The Excel file will have the following columns: EmpID Employee Name Supervisor Name Assume Employee Name is unique (you can map on that for hierarchy). Features: ✅ File upload field that: Accepts only Excel files. Validates file type before parsing. ✅ On successful upload: Parse the Excel data using SheetJS (xlsx package). Build a hierarchical data structure from the parsed data. Render the structure as a flowchart (organization chart). ✅ The chart must: Be clear and visually represent parent child (supervisor subordinate) relationships. Look similar to the attached image (tree layout with departments, workers, etc.). Tech Stack: Angular 16+ SheetJS (xlsx) for reading Excel files GoJS, ngx org chart, OrgChart.js, or D3.js for hierarchical visualization Angular Material or Bootstrap for UI (optional) Expected Output: An interactive or static organization chart rendered in the browser that visually represents the reporting structure from the uploaded Excel file. Tree structure should be clearer with horizontal and vertical lines

Prompt
Component Preview

About

Organizational Hierarchy Tree - Visualize your organization's structure with top-level supervisors displayed prominently. Built with A. View and copy code!

Share

Last updated 1 month ago