diff --git a/src/bar.js b/src/bar.js index 2c416bc..cb89bfe 100644 --- a/src/bar.js +++ b/src/bar.js @@ -13,6 +13,7 @@ export default class Bar { this.action_completed = false; this.gantt = gantt; this.task = task; + this.name = this.name || ''; } prepare() { @@ -34,6 +35,7 @@ export default class Bar { this.gantt.config.column_width * this.actual_duration * (this.task.progress / 100) || 0; + // Adjust for ignored areas const progress_area = this.x + this.progress_width; this.progress_width += @@ -372,7 +374,7 @@ export default class Bar { }); } - async update_bar_position({ x = null, width = null }) { + update_bar_position({ x = null, width = null }) { const bar = this.$bar; if (x) { @@ -612,17 +614,6 @@ export default class Bar { this.ignored_duration = this.duration - this.actual_duration; } - get_snap_position(dx) { - let rem = odx % this.gantt.config.column_width; - let position = - odx - - rem + - (rem < this.gantt.config.column_width / 2 - ? 0 - : this.gantt.config.column_width); - return position; - } - update_attr(element, attr, value) { value = +value; if (!isNaN(value)) { @@ -647,22 +638,35 @@ export default class Bar { if (this.invalid || this.gantt.options.readonly) return; this.$bar_progress.setAttribute('x', this.$bar.getX()); - const ignored_end = this.x + this.$bar.getWidth(); - const progress_end = this.x + this.progress_width; + const width = this.$bar.getWidth(); + const ignored_end = this.x + width; const total_ignored_area = this.gantt.config.ignored_positions.reduce((acc, val) => { return acc + (val >= this.x && val < ignored_end); }, 0) * this.gantt.config.column_width; - const progress_ignored_area = + let progress_width = + ((width - total_ignored_area) * this.task.progress) / 100; + + const progress_end = this.x + progress_width; + const total_ignored_progress = this.gantt.config.ignored_positions.reduce((acc, val) => { return acc + (val >= this.x && val < progress_end); }, 0) * this.gantt.config.column_width; - let new_width = - (this.duration * this.gantt.config.column_width - - total_ignored_area) * - (this.task.progress / 100); - this.progress_width = progress_ignored_area + new_width; + progress_width += total_ignored_progress; + + let ignored_regions = this.gantt.get_ignored_region( + this.x + progress_width, + ); + + while (ignored_regions.length) { + progress_width += this.gantt.config.column_width; + ignored_regions = this.gantt.get_ignored_region( + this.x + progress_width, + ); + } + this.progress_width = progress_width; + this.$bar_progress.setAttribute('width', this.progress_width); } diff --git a/src/defaults.js b/src/defaults.js index 5627d4d..e5fdf4e 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -26,7 +26,7 @@ const DEFAULT_VIEW_MODES = [ }, { name: 'Half Day', - padding: '7d', + padding: '14d', step: '12h', format_string: 'YYYY-MM-DD HH', lower_text: 'HH', @@ -99,13 +99,13 @@ const DEFAULT_OPTIONS = { auto_move_label: false, bar_corner_radius: 3, bar_height: 30, - container_height: 400, + container_height: 300, column_width: 30, date_format: 'YYYY-MM-DD', default_snap: '1d', extend_by_units: 7, header_height: 65, - holiday_highlight: { '#fff7ed': 'weekend' }, + holidays: { '#fff7ed': 'weekend' }, ignore: [], language: 'en', lines: 'both', diff --git a/src/gantt.css b/src/gantt.css index 379256a..fad2c83 100644 --- a/src/gantt.css +++ b/src/gantt.css @@ -162,6 +162,21 @@ padding: 4px 8px; border-radius: 5px; } + + & .holiday-label { + position: absolute; + top: 0; + left: 0; + opacity: 0; + z-index: 1000; + background: #dcdce4; + border-radius: 5px; + padding: 2px 5px; + + &.show { + opacity: 100; + } + } } .gantt { diff --git a/src/index.js b/src/index.js index b7b1390..1a51ad8 100644 --- a/src/index.js +++ b/src/index.js @@ -521,6 +521,8 @@ export default class Gantt { highlightHolidays() { let labels = {}; + if (!this.options.holidays) return; + for (let color in this.options.holidays) { let check_highlight = this.options.holidays[color]; if (check_highlight === 'weekend') @@ -558,7 +560,7 @@ export default class Gantt { ) { if ( this.config.ignored_dates.find( - (k) => k.getDate() == d.getDate(), + (k) => k.getTime() == d.getTime(), ) || (this.config.ignored_function && this.config.ignored_function(d)) @@ -671,13 +673,12 @@ export default class Gantt { ) { if ( !this.config.ignored_dates.find( - (k) => k.getDate() == d.getDate(), + (k) => k.getTime() == d.getTime(), ) && (!this.config.ignored_function || !this.config.ignored_function(d)) ) continue; - let diff = date_utils.convert_scales( date_utils.diff(d, this.gantt_start) + 'd', @@ -937,6 +938,7 @@ export default class Gantt { const label = this.$container.querySelector( '.label_' + h.classList[1], ); + if (!label) continue; let timeout; h.onmouseenter = (e) => { timeout = setTimeout(() => { @@ -1318,9 +1320,10 @@ export default class Gantt { get_ignored_region(pos, drn = 1) { if (drn === 1) { - return this.config.ignored_positions.filter( - (val) => pos > val && pos <= val + this.config.column_width, - ); + return this.config.ignored_positions.filter((val) => { + console.log(val, pos); + return pos > val && pos <= val + this.config.column_width; + }); } else { return this.config.ignored_positions.filter( (val) => pos >= val && pos < val + this.config.column_width,