fix progress calculation

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 width = this.$bar.getWidth();
-        const progress_end = this.x + this.progress_width;
+        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 =
+        progress_width += total_ignored_progress;
-            (this.duration * this.gantt.config.column_width -
+
-                total_ignored_area) *
+        let ignored_regions = this.gantt.get_ignored_region(
-            (this.task.progress / 100);
+            this.x + progress_width,
-        this.progress_width = progress_ignored_area + new_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);
     }
 

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',

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 {

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(
+            return this.config.ignored_positions.filter((val) => {
-                (val) => pos > val && pos <= val + this.config.column_width,
+                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,