Skip to content

Commit

Permalink
Merge pull request #474 from frappe/view-modes
Browse files Browse the repository at this point in the history 
View Modes
  • Loading branch information
@safwansamsudeen
safwansamsudeen authored Dec 3, 2024
2 parents 79b0e0d + 268d82a commit 02ea61d
Show file tree
Hide file tree
Showing 7 changed files with 513 additions and 682 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ coverage

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
dist/*

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
Expand All @@ -29,4 +30,5 @@ node_modules

.DS_Store

gh-pages
gh-pages
feedback.md
52 changes: 25 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ <h2 class="heading">
let tasks = [
{
start: '2024-04-01',
end: '2024-04-01',
end: '2024-04-04',
name: 'Redesign website',
id: 'Task 0',
progress: 30,
Expand Down Expand Up @@ -68,56 +68,54 @@ <h2 class="heading">
dependencies: 'Task 2',
},
{
start: '2024-04-08',
end: '2024-04-10',
start: '2024-03-08',
end: '2024-05-10',
name: 'Deploy',
id: 'Task 4',
progress: 0,
// dependencies: 'Task 2'
},
{
start: '2024-04-21',
end: '2024-04-29',
end: '2024-05-29',
name: 'Go Live!',
id: 'Task 5',
progress: 0,
dependencies: 'Task 2',
custom_class: 'bar-milestone',
},
// {
// start: '2014-01-05',
// end: '2019-10-12',
// name: 'Long term task',
// id: "Task 6",
// progress: 0
// }
// start: '2014-01-05',
// end: '2019-10-12',
// name: 'Long term task',
// id: 'Task 6',
// progress: 0,
// },
];

// Uncomment to test fixed header
tasks = [
...tasks,
...Array.from({ length: tasks.length * 3 }, (_, i) => ({
...tasks[i % 3],
id: i,
})),
];
// tasks = [
// ...tasks,
// ...Array.from({ length: tasks.length * 3 }, (_, i) => ({
// ...tasks[i % 3],
// id: i,
// })),
// ];
let gantt_chart = new Gantt('.gantt-target', tasks, {
on_click(task) {
console.log('Click', task);
},
// on_hover (task, x, y) {
// console.log("Hover", x, y);
// }
view_mode: 'Day',
view_mode_padding: { DAY: '3d' },
custom_view_modes: [
{
name: 'Custom Day',
padding: '1m',
step: 3,
unit: 'day',
},
],
view_mode: 'Month',
// view_modes: [
// {
// name: 'Custom Day',
// padding: '1m',
// step: '1d',
// },
// ],
// popup_on: 'click',
// move_dependencies: false,
// scroll_to: 'today',
Expand Down
103 changes: 57 additions & 46 deletions src/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ export default class Bar {
this.compute_y();
this.compute_duration();
this.corner_radius = this.gantt.options.bar_corner_radius;
this.width = this.gantt.options.column_width * this.duration;
this.width = this.gantt.config.column_width * this.duration;
this.progress_width =
this.gantt.options.column_width *
this.gantt.config.column_width *
this.duration *
(this.task.progress / 100) || 0;
this.group = createSVG('g', {
Expand Down Expand Up @@ -107,7 +107,6 @@ export default class Bar {
: ''),
append_to: this.bar_group,
});

animateSVG(this.$bar, 'width', 0, this.width);

if (this.invalid) {
Expand Down Expand Up @@ -138,6 +137,7 @@ export default class Bar {

draw_progress_bar() {
if (this.invalid) return;

this.$bar_progress = createSVG('rect', {
x: this.x,
y: this.y,
Expand All @@ -150,8 +150,8 @@ export default class Bar {
});
const x =
(date_utils.diff(this.task._start, this.gantt.gantt_start, 'hour') /
this.gantt.options.step) *
this.gantt.options.column_width;
this.gantt.config.step) *
this.gantt.config.column_width;

let $date_highlight = document.createElement('div');
$date_highlight.id = `highlight-${this.task.id}`;
Expand Down Expand Up @@ -285,7 +285,6 @@ export default class Bar {
if (this.gantt.options.popup_on === 'click') {
let opened = false;
$.on(this.group, 'click', (e) => {
console.log(opened);
if (!opened) {
this.show_popup(e.offsetX || e.layerX);
document.getElementById(
Expand Down Expand Up @@ -313,6 +312,7 @@ export default class Bar {
$.on(this.group, 'mouseleave', () => {
clearTimeout(timeout);
this.gantt.popup?.hide?.();

document.getElementById(`highlight-${task_id}`).style.display =
'none';
});
Expand Down Expand Up @@ -428,7 +428,6 @@ export default class Bar {
date_changed() {
let changed = false;
const { new_start_date, new_end_date } = this.compute_start_end_date();

if (Number(this.task._start) !== Number(new_start_date)) {
changed = true;
this.task._start = new_start_date;
Expand Down Expand Up @@ -461,15 +460,16 @@ export default class Bar {

compute_start_end_date() {
const bar = this.$bar;
const x_in_units = bar.getX() / this.gantt.options.column_width;
const x_in_units = bar.getX() / this.gantt.config.column_width;
let new_start_date = date_utils.add(
this.gantt.gantt_start,
x_in_units * this.gantt.options.step,
'hour',
x_in_units * this.gantt.config.step,
this.gantt.config.unit,
);
const start_offset =
this.gantt.gantt_start.getTimezoneOffset() -
new_start_date.getTimezoneOffset();

if (start_offset) {
new_start_date = date_utils.add(
new_start_date,
Expand All @@ -478,11 +478,11 @@ export default class Bar {
);
}

const width_in_units = bar.getWidth() / this.gantt.options.column_width;
const width_in_units = bar.getWidth() / this.gantt.config.column_width;
const new_end_date = date_utils.add(
new_start_date,
width_in_units * this.gantt.options.step,
'hour',
width_in_units * this.gantt.config.step,
this.gantt.config.unit,
);

return { new_start_date, new_end_date };
Expand All @@ -497,7 +497,7 @@ export default class Bar {
compute_expected_progress() {
this.expected_progress =
date_utils.diff(date_utils.today(), this.task._start, 'hour') /
this.gantt.options.step;
this.gantt.config.step;
this.expected_progress =
((this.expected_progress < this.duration
? this.expected_progress
Expand All @@ -507,28 +507,36 @@ export default class Bar {
}

compute_x() {
const { step, column_width } = this.gantt.options;
const { step, column_width } = this.gantt.config;
const task_start = this.task._start;
const gantt_start = this.gantt.gantt_start;

const diff = date_utils.diff(task_start, gantt_start, 'hour');
let x = (diff / step) * column_width;
const diff =
date_utils.diff(task_start, gantt_start, this.gantt.config.unit) /
this.gantt.config.step;
let x = diff * column_width;

/* Since the column width is based on 30,
we count the month-difference, multiply it by 30 for a "pseudo-month"
and then add the days in the month, making sure the number does not exceed 29
so it is within the column */

if (this.gantt.view_is('Month')) {
const diffDaysBasedOn30DayMonths =
date_utils.diff(task_start, gantt_start, 'month') * 30;
const dayInMonth = Math.min(
29,
date_utils.format(task_start, 'DD'),
date_utils.format(
task_start,
'DD',
this.gantt.options.language,
),
);
const diff = diffDaysBasedOn30DayMonths + dayInMonth;

x = (diff * column_width) / 30;
}

this.x = x;
}

Expand All @@ -541,40 +549,43 @@ export default class Bar {

compute_duration() {
this.duration =
date_utils.diff(this.task._end, this.task._start, 'hour') /
this.gantt.options.step;
date_utils.diff(
this.task._end,
this.task._start,
this.gantt.config.unit,
) / this.gantt.config.step;
}

get_snap_position(dx) {
let odx = dx,
rem,
position;

if (this.gantt.view_is('Week')) {
rem = dx % (this.gantt.options.column_width / 7);
position =
odx -
rem +
(rem < this.gantt.options.column_width / 14
? 0
: this.gantt.options.column_width / 7);
} else if (this.gantt.view_is('Month')) {
rem = dx % (this.gantt.options.column_width / 30);
position =
odx -
rem +
(rem < this.gantt.options.column_width / 60
? 0
: this.gantt.options.column_width / 30);
} else {
rem = dx % this.gantt.options.column_width;
position =
odx -
rem +
(rem < this.gantt.options.column_width / 2
? 0
: this.gantt.options.column_width);
}
// if (this.gantt.view_is('Week')) {
// rem = dx % (this.gantt.config.column_width / 7);
// position =
// odx -
// rem +
// (rem < this.gantt.config.column_width / 14
// ? 0
// : this.gantt.config.column_width / 7);
// } else if (this.gantt.view_is('Month')) {
// rem = dx % (this.gantt.config.column_width / 30);
// position =
// odx -
// rem +
// (rem < this.gantt.config.column_width / 60
// ? 0
// : this.gantt.config.column_width / 30);
// } else {
rem = dx % this.gantt.config.column_width;
position =
odx -
rem +
(rem < this.gantt.config.column_width / 2
? 0
: this.gantt.config.column_width);
// }
return position;
}

Expand All @@ -592,7 +603,7 @@ export default class Bar {
this.compute_expected_progress();
this.$expected_bar_progress.setAttribute(
'width',
this.gantt.options.column_width *
this.gantt.config.column_width *
this.duration *
(this.expected_progress / 100) || 0,
);
Expand Down
Loading

0 comments on commit 02ea61d

Please sign in to comment.