Merge branch 'master' into master

dist/frappe-gantt.css

@@ -107,7 +107,10 @@
   user-select: none;
 }
 .gantt .bar-progress {
-  fill: #a3a3ff;
+  fill: #acacfa;
+}
+.gantt .bar-expected-progress {
+  fill: #c4c4e9;
 }
 .gantt .bar-invalid {
   fill: transparent;
@@ -144,7 +147,7 @@
   fill: #a9b5c1;
 }
 .gantt .bar-wrapper:hover .bar-progress {
-  fill: #8a8aff;
+  fill: #9494f9;
 }
 .gantt .bar-wrapper:hover .handle {
   visibility: visible;
@@ -154,7 +157,7 @@
   fill: #a9b5c1;
 }
 .gantt .bar-wrapper.active .bar-progress {
-  fill: #8a8aff;
+  fill: #9494f9;
 }
 .gantt .lower-text, .gantt .upper-text {
   font-size: 12px;
@@ -185,7 +188,7 @@
   border-radius: 3px;
 }
 .gantt-container .popup-wrapper .title {
-  border-bottom: 3px solid #a3a3ff;
+  border-bottom: 3px solid #acacfa;
   padding: 10px;
 }
 .gantt-container .popup-wrapper .subtitle {

dist/frappe-gantt.js

@@ -389,12 +389,10 @@ var Gantt = (function () {
         prepare_values() {
             this.invalid = this.task.invalid;
             this.height = this.gantt.options.bar_height;
-            this.x = this.compute_x();
+            this.compute_x();
-            this.y = this.compute_y();
+            this.compute_y();
+            this.compute_duration();
             this.corner_radius = this.gantt.options.bar_corner_radius;
-            this.duration =
-                date_utils.diff(this.task._end, this.task._start, 'hour') /
-                this.gantt.options.step;
             this.width = this.gantt.options.column_width * this.duration;
             this.progress_width =
                 this.gantt.options.column_width *
@@ -432,8 +430,20 @@ var Gantt = (function () {
             };
         }
 
+        prepare_expected_progress_values() {
+            this.compute_expected_progress();
+            this.expected_progress_width =
+                this.gantt.options.column_width *
+                    this.duration *
+                    (this.expected_progress / 100) || 0;
+        }
+
         draw() {
             this.draw_bar();
+            if (this.gantt.options.show_expected_progress) {
+                this.prepare_expected_progress_values();
+                this.draw_expected_progress_bar();
+            }
             this.draw_progress_bar();
             this.draw_label();
             this.draw_resize_handles();
@@ -458,6 +468,22 @@ var Gantt = (function () {
             }
         }
 
+        draw_expected_progress_bar() {
+            if (this.invalid) return;
+            this.$expected_bar_progress = createSVG('rect', {
+                x: this.x,
+                y: this.y,
+                width: this.expected_progress_width,
+                height: this.height,
+                rx: this.corner_radius,
+                ry: this.corner_radius,
+                class: 'bar-expected-progress',
+                append_to: this.bar_group,
+            });
+
+            animateSVG(this.$expected_bar_progress, 'width', 0, this.expected_progress_width);
+        }
+
         draw_progress_bar() {
             if (this.invalid) return;
             this.$bar_progress = createSVG('rect', {
@@ -607,6 +633,11 @@ var Gantt = (function () {
             }
             this.update_label_position();
             this.update_handle_position();
+            if (this.gantt.options.show_expected_progress){
+                this.date_changed();
+                this.compute_duration();
+                this.update_expected_progressbar_position();
+            }
             this.update_progressbar_position();
             this.update_arrow_position();
         }
@@ -669,6 +700,11 @@ var Gantt = (function () {
             return parseInt(progress, 10);
         }
 
+        compute_expected_progress() {
+            this.expected_progress = date_utils.diff(date_utils.today(), this.task._start, 'hour') / this.gantt.options.step;
+            this.expected_progress = ((this.expected_progress < this.duration) ? this.expected_progress : this.duration) * 100 / this.duration;
+        }
+
         compute_x() {
             const { step, column_width } = this.gantt.options;
             const task_start = this.task._start;
@@ -681,17 +717,22 @@ var Gantt = (function () {
                 const diff = date_utils.diff(task_start, gantt_start, 'day');
                 x = (diff * column_width) / 30;
             }
-            return x;
+            this.x = x;
         }
 
         compute_y() {
-            return (
+            this.y = (
                 this.gantt.options.header_height +
                 this.gantt.options.padding +
                 this.task._index * (this.height + this.gantt.options.padding)
             );
         }
 
+        compute_duration() {
+            this.duration = date_utils.diff(this.task._end, this.task._start, 'hour') /
+                this.gantt.options.step;
+        }
+
         get_snap_position(dx) {
             let odx = dx,
                 rem,
@@ -733,6 +774,16 @@ var Gantt = (function () {
             return element;
         }
 
+        update_expected_progressbar_position() {
+            if (this.invalid) return;
+            this.$expected_bar_progress.setAttribute('x', this.$bar.getX());
+            this.compute_expected_progress();
+            this.$expected_bar_progress.setAttribute(
+                'width',
+                this.gantt.options.column_width * this.duration * (this.expected_progress / 100) || 0
+            );
+        }
+
         update_progressbar_position() {
             if (this.invalid) return;
             this.$bar_progress.setAttribute('x', this.$bar.getX());

src/bar.js

@@ -23,12 +23,10 @@ export default class Bar {
     prepare_values() {
         this.invalid = this.task.invalid;
         this.height = this.gantt.options.bar_height;
-        this.x = this.compute_x();
+        this.compute_x();
-        this.y = this.compute_y();
+        this.compute_y();
+        this.compute_duration();
         this.corner_radius = this.gantt.options.bar_corner_radius;
-        this.duration =
-            date_utils.diff(this.task._end, this.task._start, 'hour') /
-            this.gantt.options.step;
         this.width = this.gantt.options.column_width * this.duration;
         this.progress_width =
             this.gantt.options.column_width *
@@ -66,8 +64,20 @@ export default class Bar {
         };
     }
 
+    prepare_expected_progress_values() {
+        this.compute_expected_progress();
+        this.expected_progress_width =
+            this.gantt.options.column_width *
+                this.duration *
+                (this.expected_progress / 100) || 0;
+    }
+
     draw() {
         this.draw_bar();
+        if (this.gantt.options.show_expected_progress) {
+            this.prepare_expected_progress_values();
+            this.draw_expected_progress_bar();
+        }
         this.draw_progress_bar();
         this.draw_label();
         this.draw_resize_handles();
@@ -92,6 +102,22 @@ export default class Bar {
         }
     }
 
+    draw_expected_progress_bar() {
+        if (this.invalid) return;
+        this.$expected_bar_progress = createSVG('rect', {
+            x: this.x,
+            y: this.y,
+            width: this.expected_progress_width,
+            height: this.height,
+            rx: this.corner_radius,
+            ry: this.corner_radius,
+            class: 'bar-expected-progress',
+            append_to: this.bar_group,
+        });
+
+        animateSVG(this.$expected_bar_progress, 'width', 0, this.expected_progress_width);
+    }
+
     draw_progress_bar() {
         if (this.invalid) return;
         this.$bar_progress = createSVG('rect', {
@@ -241,6 +267,11 @@ export default class Bar {
         }
         this.update_label_position();
         this.update_handle_position();
+        if (this.gantt.options.show_expected_progress){
+            this.date_changed();
+            this.compute_duration();
+            this.update_expected_progressbar_position();
+        }
         this.update_progressbar_position();
         this.update_arrow_position();
     }
@@ -303,6 +334,11 @@ export default class Bar {
         return parseInt(progress, 10);
     }
 
+    compute_expected_progress() {
+        this.expected_progress = date_utils.diff(date_utils.today(), this.task._start, 'hour') / this.gantt.options.step;
+        this.expected_progress = ((this.expected_progress < this.duration) ? this.expected_progress : this.duration) * 100 / this.duration;
+    }
+
     compute_x() {
         const { step, column_width } = this.gantt.options;
         const task_start = this.task._start;
@@ -315,17 +351,22 @@ export default class Bar {
             const diff = date_utils.diff(task_start, gantt_start, 'day');
             x = (diff * column_width) / 30;
         }
-        return x;
+        this.x = x;
     }
 
     compute_y() {
-        return (
+        this.y = (
             this.gantt.options.header_height +
             this.gantt.options.padding +
             this.task._index * (this.height + this.gantt.options.padding)
         );
     }
 
+    compute_duration() {
+        this.duration = date_utils.diff(this.task._end, this.task._start, 'hour') /
+            this.gantt.options.step;
+    }
+
     get_snap_position(dx) {
         let odx = dx,
             rem,
@@ -367,6 +408,16 @@ export default class Bar {
         return element;
     }
 
+    update_expected_progressbar_position() {
+        if (this.invalid) return;
+        this.$expected_bar_progress.setAttribute('x', this.$bar.getX());
+        this.compute_expected_progress();
+        this.$expected_bar_progress.setAttribute(
+            'width',
+            this.gantt.options.column_width * this.duration * (this.expected_progress / 100) || 0
+        );
+    }
+
     update_progressbar_position() {
         if (this.invalid) return;
         this.$bar_progress.setAttribute('x', this.$bar.getX());

src/gantt.scss

@@ -9,8 +9,9 @@ $light-yellow: #fcf8e3 !default;
 $text-muted: #666 !default;
 $text-light: #555 !default;
 $text-color: #333 !default;
-$blue: #a3a3ff !default;
+$blue: #acacfa !default;
 $handle-color: #ddd !default;
+$light-blue: #c4c4e9 !default;
 
 .gantt {
 	.grid-background {
@@ -42,6 +43,21 @@ $handle-color: #ddd !default;
 		opacity: 0.5;
 	}
 
+	.week-highlight {
+		fill: $light-yellow;
+		opacity: 0.5;
+	}
+
+	.month-highlight {
+		fill: $light-yellow;
+		opacity: 0.5;
+	}
+
+	.year-highlight {
+		fill: $light-yellow;
+		opacity: 0.5;
+	}
+
 	.arrow {
 		fill: none;
 		stroke: $text-muted;
@@ -58,6 +74,9 @@ $handle-color: #ddd !default;
 	.bar-progress {
 		fill: $blue;
 	}
+	.bar-expected-progress {
+		fill: $light-blue;
+	}
 	.bar-invalid {
 		fill: transparent;
 		stroke: $bar-stroke;

src/index.js

@@ -412,15 +412,46 @@ export default class Gantt {
         }
     }
 
-    make_grid_highlights() {
+    //compute the horizontal x distance
-        // highlight today's date
+    computeGridHighlightDimensions(view_mode) {
-        if (this.view_is(VIEW_MODE.DAY)) {
+        let xDist = 0;
-            const x =
-                (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
-                    this.options.step) *
-                this.options.column_width;
-            const y = 0;
 
+        if (this.view_is(VIEW_MODE.DAY)) {
+            return (date_utils.diff(date_utils.today(), this.gantt_start, 'hour') /
+                this.options.step) *
+                this.options.column_width;
+        }
+
+        for (let date of this.dates) {
+            const todayDate = new Date();
+            const startDate = new Date(date);
+            const endDate = new Date(date);
+            switch (view_mode) {
+                case VIEW_MODE.WEEK:
+                    endDate.setDate(date.getDate() + 7);
+                    break;
+                case VIEW_MODE.MONTH:
+                    endDate.setMonth(date.getMonth() + 1);
+                    break;
+                case VIEW_MODE.YEAR:
+                    endDate.setFullYear(date.getFullYear() + 1);
+                    break;
+            }
+            if (todayDate >= startDate && todayDate <= endDate) {
+                break;
+            } else {
+                xDist += this.options.column_width;
+            }
+        }
+        return xDist;
+    }
+
+    make_grid_highlights() {
+        // highlight today's | week's | month's | year's
+        if (this.view_is(VIEW_MODE.DAY) || this.view_is(VIEW_MODE.WEEK) || this.view_is(VIEW_MODE.MONTH) || this.view_is(VIEW_MODE.YEAR)) {
+
+            const x = this.computeGridHighlightDimensions(this.options.view_mode);
+            const y = 0;
             const width = this.options.column_width;
             const height =
                 (this.options.bar_height + this.options.padding) *
@@ -428,12 +459,27 @@ export default class Gantt {
                 this.options.header_height +
                 this.options.padding / 2;
 
+            let className = '';
+            switch (this.options.view_mode) {
+                case VIEW_MODE.DAY:
+                    className = 'today-highlight'
+                    break;
+                case VIEW_MODE.WEEK:
+                    className = 'week-highlight'
+                    break;
+                case VIEW_MODE.MONTH:
+                    className = 'month-highlight'
+                    break;
+                case VIEW_MODE.YEAR:
+                    className = 'year-highlight'
+                    break;
+            }
             createSVG('rect', {
                 x,
                 y,
                 width,
                 height,
-                class: 'today-highlight',
+                class: className,
                 append_to: this.layers.grid,
             });
         }