fix progress calculation

This commit is contained in:
safwansamsudeen 2024-12-10 15:30:11 +05:30
parent a449ac9acf
commit 653a5d0f30
4 changed files with 51 additions and 29 deletions

View File

@ -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);
}

View File

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

View File

@ -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 {

View File

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