Skip to content

fix: improve gantt rendering #8013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
grnd-alt merged 1 commit into from
Jun 4, 2026
+41 −17
Merged

fix: improve gantt rendering #8013

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 41 additions & 17 deletions src/components/board/GanttView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,22 +86,6 @@ const DAYS_PER_UNIT = {
}

const GANTT_VIEW_MODES = [
{
name: 'Hour',
padding: '7d',
step: '1h',
snap_at: '1h',
date_format: 'YYYY-MM-DD HH:',
lower_text: 'HH',
upper_text: (d, ld, lang) =>
!ld || d.getDate() !== ld.getDate()
? Intl.DateTimeFormat(lang || 'en', { month: 'short', day: 'numeric' }).format(d)
: '',
thick_line(date) {
return date.getDay() === 1
},
upper_text_frequency: 24,
},
{
name: 'Day',
padding: '14d',
Expand All @@ -123,6 +107,22 @@ const GANTT_VIEW_MODES = [
return date.getDay() === 1
},
},
{
name: 'Hour',
padding: '7d',
step: '1h',
snap_at: '1h',
date_format: 'YYYY-MM-DD HH:',
lower_text: 'HH',
upper_text: (d, ld, lang) =>
!ld || d.getDate() !== ld.getDate()
? Intl.DateTimeFormat(lang || 'en', { month: 'short', day: 'numeric' }).format(d)
: '',
thick_line(date) {
return date.getDay() === 1
},
upper_text_frequency: 24,
},
{
name: 'Week',
padding: '1m',
Expand Down Expand Up @@ -207,6 +207,31 @@ export default {
if (!card.duedate && !card.startdate) {
undatedCards.push(card)
} else {
// gantt renders everything at once so large date ranges cause performance issues on render
// therefore we limit the timeframe of visible tasks
const duedate = new Date(card.duedate)
switch (this.currentViewMode) {
case 'Hour':
Comment on lines +213 to +214
Copy link
Copy Markdown
Member

@blizzz blizzz Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💄 indentation looks odd on Github (tabs vs spaces?)

Copy link
Copy Markdown
Member Author

@grnd-alt grnd-alt Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

apparently, the lint:fix wants case and switch on the same column...

if (duedate < new Date() - 2 * 24 * 3600 * 1000) {
Copy link
Copy Markdown
Member

@blizzz blizzz Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so cards from the past are cut off, right?

Copy link
Copy Markdown
Member Author

@grnd-alt grnd-alt Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes only from the past

return
}
break
case 'Day':
if (duedate < new Date() - 30 * 24 * 3600 * 1000) {
return
}
break
case 'Week':
if (duedate < new Date() - 90 * 24 * 3600 * 1000) {
return
}
break
case 'Month':
if (duedate < new Date() - 365 * 24 * 3600 * 1000) {
return
}
break
}
ganttTasks.push(this.cardToGanttTask(card, index))
}
})
Expand Down Expand Up @@ -343,7 +368,6 @@ export default {
})

this._patchBarDuration()
this.ganttInstance.change_view_mode(this.currentViewMode)
this.fitColumnsToWidth()
},
async updateTaskDate(task, start, end) {
Expand Down
Loading