@digiforce-nc/plugin-gantt

Plugin hiển thị dữ liệu collection dưới dạng biểu đồ Gantt - timeline trực quan cho quản lý dự án với thanh công việc (bars), kéo thả thay đổi lịch và nhiều chế độ xem thời gian.

Plugin này làm gì?

Gantt chart là công cụ không thể thiếu trong quản lý dự án: mỗi task là một thanh ngang trên timeline, chiều dài thanh thể hiện thời lượng, vị trí thể hiện ngày bắt đầu/kết thúc. Plugin này triển khai custom SVG gantt (không dùng dhtmlx-gantt) với đầy đủ tính năng kéo thả và zoom timeline.

Ba nhiệm vụ chính

#	Nhiệm vụ	Chi tiết
1	Timeline visualization	Render thanh Gantt trên timeline SVG tùy chỉnh
2	Drag reschedule	Kéo thả thanh để thay đổi ngày bắt đầu/kết thúc
3	Nhiều chế độ xem	Chuyển đổi giữa Hour, Day, Week, Month, Year

Kiến trúc

Tổng quan

Plugin hoạt động hoàn toàn ở client - custom SVG rendering cho gantt bars, grid và calendar header. Không sử dụng thư viện gantt bên ngoài.

Tầng	Vai trò	Thành phần
Widget	Đăng ký block, quản lý data	`GanttBlockWidget`
ActionBar	Toolbar: view mode, filter, actions	`ViewMode`, filters
Grid panel	Bảng danh sách task bên trái	Custom grid rows
SVG panel	Timeline biểu đồ bên phải	Bars, calendar header, today line

Custom SVG implementation

Plugin không dùng thư viện Gantt có sẵn mà tự render bằng SVG:

Component	Mô tả
`CalendarHeader`	Header hiển thị ngày/tuần/tháng trên timeline
`GanttBar`	Thanh SVG đại diện một task
`GanttBarProgress`	Phần progress bên trong bar
`GridRow`	Hàng trong grid panel bên trái
`TodayLine`	Đường dọc đánh dấu ngày hiện tại
`Arrow`	Mũi tên dependency giữa các task

Các chế độ xem thời gian

ViewMode	Hiển thị	Phù hợp cho
Hour	Mỗi ô = 1 giờ	Task ngắn (vài giờ)
Day	Mỗi ô = 1 ngày	Sprint 1-2 tuần
Week	Mỗi ô = 1 tuần	Dự án 1-3 tháng
Month	Mỗi ô = 1 tháng	Roadmap quý/năm
Year	Mỗi ô = 1 năm	Kế hoạch dài hạn

Luồng kéo thả reschedule

Tính năng

Tính năng	Mô tả
Custom SVG gantt	Render hoàn toàn bằng SVG, không dependency ngoài
Drag reschedule	Kéo thanh thay đổi ngày bắt đầu/kết thúc
Drag resize	Kéo cạnh thanh thay đổi duration
View modes	Hour, Day, Week, Month, Year
Record viewer	Click thanh mở popup chi tiết record
Tooltips	Hover hiển thị thông tin task
Progress bar	Hiển thị phần trăm hoàn thành trong bar
Today line	Đường dọc đánh dấu ngày hiện tại
Grid panel	Bảng task bên trái với sort, resize columns
Scroll sync	Scroll đồng bộ giữa grid và timeline

Thành phần client

Thành phần	Mô tả
`GanttBlockWidget`	Widget chính đăng ký Gantt block
`Gantt`	Component chính chứa grid + SVG timeline
`GanttBar`	SVG bar đại diện một task
`CalendarHeader`	SVG header hiển thị timeline scale
`GridRow`	Component hàng trong grid panel
`TaskItem`	Component task item trong grid
`ViewMode`	Component chuyển đổi chế độ xem
`GanttDesigner`	Designer: cấu hình start/end fields, view mode
`GanttBlockInitializer`	Đăng ký vào menu "Add block"
`GanttRecordViewer`	Popup chi tiết khi click bar

Cấu hình block

Setting	Mô tả	Mặc định
Start field	Field ngày bắt đầu task	`startDate`
End field	Field ngày kết thúc task	`endDate`
Progress field	Field phần trăm hoàn thành	`progress`
Title field	Field hiển thị tên task	`title`
Default view	Chế độ xem mặc định	Day
Row height	Chiều cao mỗi hàng (px)	40

Dependencies

Package	Vai trò
`@digiforce-nc/client`	Client framework (peer)
`@digiforce-nc/server`	Server framework - chỉ dùng khi build (peer)
`dayjs`	Xử lý ngày tháng cho calendar header