Web Hierarchy View
Visualize cấu trúc phân cấp với org charts và tree structures tương tác
Tổng quan Hierarchy View
Hierarchy View hiển thị dữ liệu có quan hệ parent-child dạng tree structure hoặc org chart, giúp visualize cấu trúc tổ chức và phân cấp.
Hỗ trợ expand/collapse nodes, drag-and-drop để reorganize, và hiển thị thông tin chi tiết của từng node.
Điểm chính
• Tree Structure: Hiển thị parent-child relationships dạng tree
• Org Chart: Visualize organizational hierarchy
• Expandable Nodes: Click để expand/collapse sub-nodes
• Drag & Drop: Kéo thả nodes để reorganize hierarchy
• Node Details: Hiển thị avatar, name, title, metrics
• Search & Filter: Tìm kiếm và filter nodes
• Zoom Controls: Zoom in/out để xem overview hoặc details
• Export: Xuất org chart dạng image/PDF
Use Cases
Ứng dụng Hierarchy View
| Nghiệp vụ | Parent Field | Display Info | Lợi ích |
|---|---|---|---|
| Org Chart | manager_id | Employee name, title, photo | Visualize reporting structure |
| Department Structure | parent_department_id | Department name, head count | Xem cấu trúc phòng ban |
| Product Categories | parent_category_id | Category name, product count | Quản lý category hierarchy |
| Location Hierarchy | parent_location_id | Location name, stock qty | Xem warehouse structure |
| Account Chart | parent_account_id | Account code, name, balance | Visualize chart of accounts |
Tính năng Org Chart
Điểm chính
• Employee Cards: Hiển thị photo, name, job title, contact
• Direct Reports: Số lượng direct reports trên mỗi card
• Reporting Lines: Đường nối rõ ràng giữa manager và reports
• Vacant Positions: Highlight positions chưa có người
• Quick Actions: Click card để view profile, send message
• Layout Options: Vertical, horizontal, compact layouts
• Print View: Optimized layout cho printing
• Share: Generate shareable link cho org chart
Drag & Drop Reorganization
Các bước thực hiện
1. Enable Edit Mode: Click Edit button để enable drag & drop
2. Drag Node: Click và kéo node muốn move
3. Drop Target: Thả lên node sẽ trở thành parent mới
4. Confirm: Xác nhận thay đổi reporting structure
5. Auto-update: Hệ thống tự động update parent_id field
6. Validation: Check business rules (không cho circular reference)
7. Save: Lưu thay đổi vào database
Best Practices
Điểm chính
• Sử dụng photos cho org chart để dễ nhận diện
• Keep hierarchy depth reasonable (tối đa 5-6 levels)
• Regular updates để đảm bảo org chart accurate
• Sử dụng colors để highlight departments hoặc teams
• Export và share org chart với new employees
• Set permissions để control ai có thể reorganize