Skip to content

Option to enable grouping and add multiple tasks to a row - rebase #528

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Option to enable grouping and add multiple tasks to a row - rebase #528

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0a680e1
Added option to enable grouping
iaminamcom Oct 22, 2024
0fdf3c8
added readme
iaminamcom Oct 22, 2024
3ebfe67
fix for personal publish
iaminamcom Oct 22, 2024
b20b49d
update readme
iaminamcom Oct 22, 2024
c10ba3a
added the option for custom index
iaminamcom Oct 24, 2024
409bfce
forgot to build
iaminamcom Nov 15, 2024
6d520fb
rebases to complete PR
stephenjmaher Apr 2, 2025
148860c
Update README.md
stephenjmaher Apr 3, 2025
0e46955
fixes errors in pr
stephenjmaher Apr 3, 2025
059cdbb
reverts changes to package.json
stephenjmaher Apr 3, 2025
ea4c406
fixes grouping example
stephenjmaher Apr 3, 2025
a37bf67
enables the setting of arbitrary groups and missing groups
stephenjmaher Apr 3, 2025
d185a88
removes union from group creation
stephenjmaher Jul 7, 2025
6a66459
fixes example
stephenjmaher Oct 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 29 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,27 +374,47 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
name: 'Redesign website',
id: 'Task 0',
progress: random(),
group : 0,
},
{
start: daysSince(-5),
end: daysSince(0),
name: 'Redesign website - part 2',
id: 'Task 1',
progress: random(),
group : 0,
},
{
start: daysSince(-15),
duration: '21d',
name: 'Write new content',
id: 'Task 1',
id: 'Task 2',
progress: random(),
important: true,
group : 1,
},
{
start: daysSince(7),
duration: '2d',
name: 'Edit new content',
id: 'Task 3',
progress: random(),
important: true,
group : 1,
},
{
start: daysSince(10),
duration: '14d',
name: 'Review',
id: 'Task 3',
id: 'Task 4',
progress: random(),
group : 2,
},
{
start: daysSince(-3),
duration: '4d',
name: 'Publish',
id: 'Task 4',
id: 'Task 5',
progress: random(),
},
];
Expand Down Expand Up @@ -536,13 +556,17 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
today_button: true,
view_mode_select: true,
holidays: null,
enable_grouping: true,
groups: [0, 1, 2, 3],
});

const holidays = new Gantt('#holidays', tasksSpread, {
holidays: {
'#bfdbfe': [],
'#a3e635': HOLIDAYS,
},
enable_grouping: true,
groups: [0, 1, 2],
});

const ignore = new Gantt('#ignore', tasks, {
Expand All @@ -562,6 +586,8 @@ <h2>Frappe Gantt - <em>for you</em>.</h2>
snap_at: '1d',
auto_move_label: false,
scroll_to: 'today',
enable_grouping: true,
groups: [0, 1, 2, 3],
});

const UPDATES = [
Expand Down
54 changes: 40 additions & 14 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,31 @@ export default class Gantt {
task.id = `${task.id}`;
}

// setting a dummy group if the group is not specified
if (typeof task.group == 'undefined') {
task.group = 'group-' + task.id;
}

return task;
})
.filter((t) => t);

this.groups = this.tasks;
if (this.options?.enable_grouping) {
// the groups are the union of the specified groups and the groups
// from the tasks.
let groups = this.options?.groups ? this.options.groups : [];
this.groups = Array.from(new Set([...groups, ...this.tasks.map((t) => t.group)]));

// the index of the tasks depend on the groups array. This allows
// for arbitrary naming of groups (not only numeric). Further, if
// the group is not specified, then the index of the task is
// updated correctly.
for (let task of this.tasks) {
task._index = this.groups.indexOf(task.group);
}

}
this.setup_dependencies();
}

Expand Down Expand Up @@ -399,7 +421,7 @@ export default class Gantt {
this.config.header_height +
this.options.padding +
(this.options.bar_height + this.options.padding) *
this.tasks.length -
this.groups.length -
10,
this.options.container_height !== 'auto'
? this.options.container_height
Expand Down Expand Up @@ -430,20 +452,23 @@ export default class Gantt {
const row_width = this.dates.length * this.config.column_width;
const row_height = this.options.bar_height + this.options.padding;

let y = this.config.header_height;
for (
let y = this.config.header_height;
y < this.grid_height;
y += row_height
) {
let row_y = this.config.header_height;

for (let _ of this.groups) {
createSVG('rect', {
x: 0,
y,
y : row_y,
width: row_width,
height: row_height,
class: 'grid-row',
append_to: rows_layer,
});

row_y += row_height;

if (row_y >= this.grid_height) {
break;
}
}
}

Expand Down Expand Up @@ -512,7 +537,8 @@ export default class Gantt {
if (this.options.lines === 'none') return;
let tick_x = 0;
let tick_y = this.config.header_height;
let tick_height = this.grid_height - this.config.header_height;
let tick_height = (this.grid_height - this.config.header_height)*
this.groups.length;

let $lines_layer = createSVG('g', {
class: 'lines_layer',
Expand All @@ -524,11 +550,7 @@ export default class Gantt {
const row_width = this.dates.length * this.config.column_width;
const row_height = this.options.bar_height + this.options.padding;
if (this.options.lines !== 'vertical') {
for (
let y = this.config.header_height;
y < this.grid_height;
y += row_height
) {
for (let _ of this.groups) {
createSVG('line', {
x1: 0,
y1: row_y + row_height,
Expand All @@ -538,6 +560,10 @@ export default class Gantt {
append_to: $lines_layer,
});
row_y += row_height;

if (row_y >= this.grid_height) {
break;
}
}
}
if (this.options.lines === 'horizontal') return;
Expand Down