jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

feat: option to enable expected progress bars

Browse Source
This commit is contained in:
Gursheen Anand 2023-11-20 00:54:49 +05:30
parent 1d024dcb55
commit 916fd15255
5 changed files with 119 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
dist/frappe-gantt.js vendored
View File

@ -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.y = this.compute_y();
this.compute_x();
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());

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

65
src/bar.js
View File

@ -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.y = this.compute_y();
this.compute_x();
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());