feat: add Gantt chart view for boards#7812
Conversation
Add a timeline/Gantt view as an alternative to the kanban board view, allowing users to visualize card schedules across time using frappe-gantt. - Add GanttView component with Day/Week/Month view modes - Add Kanban/Gantt view toggle in board controls - Store view mode preference in localStorage via Vuex - Stack-based color coding with legend and undated cards section - Drag-and-drop support for rescheduling cards - Auto-fit column width to fill container on wider views - Add frappe-gantt dependency and webpack resolve alias for its CSS Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Paul Spooren <mail@aparcar.org>
aparcar
requested review from
elzody,
grnd-alt and
luka-nextcloud
as code owners
grnd-alt
left a comment
grnd-alt
left a comment
There was a problem hiding this comment.
works thanks a lot for this contribution. But there is some room for improvement. also darkmode looks like this:
| ...mapState({ | ||
| filter: state => state.filter, | ||
| }), | ||
| ganttViewModes() { |
There was a problem hiding this comment.
why have this as a computed does not seem to depend on anything?
| deep: true, | ||
| handler() { | ||
| if (!this.isDragging) { | ||
| this.$nextTick(() => this.renderGantt()) |
There was a problem hiding this comment.
we can also update the chart with refresh() no need to render every time
| // Inject dynamic stack colors as CSS | ||
| this.injectStackStyles() | ||
|
|
||
| this.ganttInstance = new Gantt(this.$refs.ganttContainer, this.ganttTasks, { |
There was a problem hiding this comment.
parsing this.ganttTasks causes infinite rerenders and tab crash as the gantt library can update the param itself, we should pass a copy and also not rerender if this.ganttTasks changes
| this.ganttInstance = null | ||
| }, | ||
| methods: { | ||
| formatDate(date) { |
There was a problem hiding this comment.
not needed library can handle date object
| this.ganttInstance.change_view_mode(mode) | ||
| this.$nextTick(() => this.fitColumnsToWidth()) | ||
| } else { | ||
| this.$nextTick(() => this.renderGantt()) |
There was a problem hiding this comment.
why try rendering again? if ganttInstance is null that means there are no tasks to render why would that change if the user changes viewmode?
| end = new Date(start) | ||
| end.setDate(end.getDate() + 1) | ||
| } | ||
| if (!start && !end) { |
There was a problem hiding this comment.
unreachable case because of the filter L189?
| const styleId = 'gantt-stack-styles' | ||
| let styleEl = document.getElementById(styleId) | ||
| if (!styleEl) { | ||
| styleEl = document.createElement('style') |
There was a problem hiding this comment.
not a fan of creating a style element at document root here, we can also achieve generated classes by using scss and set the custom-class param to classname-${stackId % x)
2 participants
Summary
Add a timeline/Gantt view as an alternative to the kanban board view, allowing users to visualize card schedules across time using frappe-gantt.
This is inspired by https://github.com/nextcloud-community/ncgantt
TODO
Checklist