Skip to content
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.

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

Fix highlighting when the current date is outside the range of the chart #414

Closed
Closed
Changes from all commits
Commits
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
18 changes: 15 additions & 3 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -571,8 +571,16 @@ export default class Gantt {
}
}

//compute the horizontal x distance
/**
* Compute the horizontal x-axis distance and associated date for the current date and view.
*
* @returns Object containing the x-axis distance and date of the current date, or null if the current date is out of the gantt range.
*/
computeGridHighlightDimensions(view_mode) {
// Return null if today is out of the gantt range
const todayDate = new Date();
if (todayDate < this.gantt_start || todayDate > this.gantt_end) return null;

let x = this.options.column_width / 2;

if (this.view_is(VIEW_MODE.DAY)) {
Expand All @@ -586,7 +594,7 @@ export default class Gantt {
}

for (let date of this.dates) {
const todayDate = new Date();

const startDate = new Date(date);
const endDate = new Date(date);
switch (view_mode) {
Expand All @@ -606,6 +614,8 @@ export default class Gantt {
x += this.options.column_width;
}
}

return null;
}

make_grid_highlights() {
Expand All @@ -618,7 +628,9 @@ export default class Gantt {
this.view_is(VIEW_MODE.YEAR)
) {
// Used as we must find the _end_ of session if view is not Day
const { x: left, date } = this.computeGridHighlightDimensions(this.options.view_mode)
const highlightDimensions = this.computeGridHighlightDimensions(this.options.view_mode);
if (!highlightDimensions) return;
const { x: left, date } = highlightDimensions;
const top = this.options.header_height + this.options.padding / 2;
const height = (this.options.bar_height + this.options.padding) * this.tasks.length;
this.$current_highlight = this.create_el({ top, left, height, classes: 'current-highlight', append_to: this.$container })
Expand Down