Giao diện
Cài đặt và sử dụng
Cài đặt
Plugin @digiforce-nc/plugin-gantt thường được cài sẵn trong bản phân phối chính. Kích hoạt qua trang Plugin Manager.
Plugin hoạt động hoàn toàn ở client — custom SVG rendering, không dùng thư viện gantt bên ngoài.
Thêm Gantt block
- Mở trang ở chế độ thiết kế (Schema Editor).
- Click Add block → chọn Gantt.
- Chọn collection chứa dữ liệu task/công việc.
- Cấu hình field mapping:
- Start date field: Field ngày bắt đầu task.
- End date field: Field ngày kết thúc task.
- Gantt chart xuất hiện với grid panel (trái) và SVG timeline (phải).
Giao diện Gantt
Gantt chia làm hai panel:
| Panel | Vị trí | Nội dung |
|---|---|---|
| Grid | Bên trái | Bảng danh sách task (tên, ngày, progress) |
| Timeline | Bên phải | SVG biểu đồ thanh Gantt trên timeline |
Hai panel scroll đồng bộ — cuộn một bên, bên kia cuộn theo.
Chế độ xem thời gian
Chuyển đổi view mode qua toolbar:
| 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 |
Kéo thả thay đổi lịch
Di chuyển thanh (Move)
Kéo toàn bộ thanh task sang trái/phải để thay đổi ngày bắt đầu và kết thúc (giữ nguyên duration).
Thay đổi duration (Resize)
Kéo cạnh trái hoặc phải của thanh để thay đổi ngày bắt đầu hoặc kết thúc riêng biệt.
Mỗi lần thả, plugin gửi PATCH request cập nhật date fields trên server.
Xem chi tiết
- Hover thanh → tooltip hiển thị thông tin task (tên, ngày, progress).
- Click thanh → popup chi tiết bản ghi, có thể chỉnh sửa.
Today line
Đường dọc màu đỏ đánh dấu ngày hiện tại trên timeline — giúp nhận biết task nào đang trễ.
Mẹo
Gantt chart phù hợp nhất cho quản lý dự án, theo dõi tiến độ sprint, lập kế hoạch production — bất kỳ nơi nào cần timeline trực quan cho nhiều task song song.