Skip to content

Commit

Permalink
Fixes
Browse files Browse the repository at this point in the history 
- end_date calculation
- hide_popup on grid_click
- bar position should also consider hours
- date_change event only if date has changed
  • Loading branch information
@netchampfaris
netchampfaris committed May 20, 2018
1 parent cd93fbf commit ec5e559
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 57 deletions.
81 changes: 51 additions & 30 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
margin: 0 auto;
}
/* custom class */
.gantt .bar-milestone .bar-progress {
.gantt .bar-milestone .bar {
fill: tomato;
}
</style>
Expand All @@ -26,35 +26,56 @@ <h2>Interactive Gantt Chart entirely made in SVG!</h2>
<div class="gantt-target"></div>
</div>
<script>
var names = [
["Redesign website", [0, 7]],
["Write new content", [1, 4]],
["Apply new styles", [3, 6]],
["Review", [7, 7]],
["Deploy", [8, 9]],
["Go Live!", [10, 10]]
];

var tasks = names.map(function(name, i) {
var today = new Date();
var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
start.setDate(today.getDate() + name[1][0]);
end.setDate(today.getDate() + name[1][1]);
return {
start: start,
end: end,
name: name[0],
id: "Task " + i,
progress: parseInt(Math.random() * 100, 10)
}
});
tasks[1].progress = 0;
tasks[1].dependencies = "Task 0"
tasks[2].dependencies = "Task 1"
tasks[3].dependencies = "Task 2"
tasks[5].dependencies = "Task 4"
tasks[5].custom_class = "bar-milestone";
var tasks = [
{
start: '2018-10-01',
end: '2018-10-08',
name: 'Redesign website',
id: "Task 0",
progress: 20
},
{
start: '2018-10-03',
end: '2018-10-06',
name: 'Write new content',
id: "Task 1",
progress: 5,
dependencies: 'Task 0'
},
{
start: '2018-10-04',
end: '2018-10-08',
name: 'Apply new styles',
id: "Task 2",
progress: 10,
dependencies: 'Task 1'
},
{
start: '2018-10-08',
end: '2018-10-09',
name: 'Review',
id: "Task 3",
progress: 5,
dependencies: 'Task 2'
},
{
start: '2018-10-08',
end: '2018-10-10',
name: 'Deploy',
id: "Task 4",
progress: 0,
dependencies: 'Task 2'
},
{
start: '2018-10-11',
end: '2018-10-11',
name: 'Go Live!',
id: "Task 5",
progress: 0,
dependencies: 'Task 4',
custom_class: 'bar-milestone'
},
]

var gantt_chart = new Gantt(".gantt-target", tasks, {
on_click: function (task) {
Expand Down
56 changes: 31 additions & 25 deletions src/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default class Bar {
this.y = this.compute_y();
this.corner_radius = this.gantt.options.bar_corner_radius;
this.duration =
(date_utils.diff(this.task._end, this.task._start, 'hour') + 24) /
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 =
Expand Down Expand Up @@ -175,15 +175,16 @@ export default class Bar {
}

setup_click_event() {
$.on(this.group, 'click', e => {
$.on(this.group, 'focus click', e => {
if (this.action_completed) {
// just finished a move action, wait for a few seconds
return;
}

if (this.group.classList.contains('active')) {
if (e.type === 'click') {
this.gantt.trigger_event('click', [this.task]);
}

this.gantt.unselect_all();
this.group.classList.toggle('active');

Expand All @@ -195,7 +196,10 @@ export default class Bar {
if (this.gantt.bar_being_dragged) return;

const start_date = date_utils.format(this.task._start, 'MMM D');
const end_date = date_utils.format(this.task._end, 'MMM D');
const end_date = date_utils.format(
date_utils.add(this.task._end, -1, 'second'),
'MMM D'
);
const subtitle = start_date + ' - ' + end_date;

this.gantt.show_popup({
Expand Down Expand Up @@ -232,14 +236,25 @@ export default class Bar {
}

date_changed() {
let changed = false;
const { new_start_date, new_end_date } = this.compute_start_end_date();
this.task._start = new_start_date;
this.task._end = new_end_date;

if (Number(this.task._start) !== Number(new_start_date)) {
changed = true;
this.task._start = new_start_date;
}

if (Number(this.task._end) !== Number(new_end_date)) {
changed = true;
this.task._end = new_end_date;
}

if (!changed) return;

this.gantt.trigger_event('date_change', [
this.task,
new_start_date,
new_end_date
date_utils.add(new_end_date, -1, 'second')
]);
}

Expand Down Expand Up @@ -268,12 +283,7 @@ export default class Bar {
width_in_units * this.gantt.options.step,
'hour'
);
// lets say duration is 2 days
// start_date = May 24 00:00:00
// end_date = May 24 + 2 days = May 26 (incorrect)
// so subtract 1 second so that
// end_date = May 25 23:59:59
date_utils.add(new_end_date, -1, 'second');

return { new_start_date, new_end_date };
}

Expand All @@ -284,20 +294,16 @@ export default class Bar {
}

compute_x() {
let x =
date_utils.diff(this.task._start, this.gantt.gantt_start, 'hour') /
this.gantt.options.step *
this.gantt.options.column_width;
const { step, column_width } = this.gantt.options;
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;

if (this.gantt.view_is('Month')) {
x =
date_utils.diff(
this.task._start,
this.gantt.gantt_start,
'day'
) *
this.gantt.options.column_width /
30;
const diff = date_utils.diff(task_start, gantt_start, 'day');
x = diff * column_width / 30;
}
return x;
}
Expand Down
1 change: 1 addition & 0 deletions src/gantt.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ $handle-color: #ddd !default;

.bar-wrapper {
cursor: pointer;
outline: none;

&:hover {
.bar {
Expand Down
14 changes: 12 additions & 2 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,13 @@ export default class Gantt {
task._end = date_utils.add(task._start, 2, 'day');
}

// if hours is not set, assume the last day is full day
// e.g: 2018-09-09 becomes 2018-09-09 23:59:59
const task_end_values = date_utils.get_date_values(task._end);
if (task_end_values.slice(3).every(d => d === 0)) {
task._end = date_utils.add(task._end, 24, 'hour');
}

// invalid flag
if (!task.start || !task.end) {
task.invalid = true;
Expand Down Expand Up @@ -179,6 +186,9 @@ export default class Gantt {
}
}

this.gantt_start = date_utils.start_of(this.gantt_start, 'day');
this.gantt_end = date_utils.start_of(this.gantt_end, 'day');

// add date padding on both sides
if (this.view_is(['Quarter Day', 'Half Day'])) {
this.gantt_start = date_utils.add(this.gantt_start, -7, 'day');
Expand Down Expand Up @@ -561,10 +571,10 @@ export default class Gantt {
}

bind_grid_click() {
this.layers.grid.onclick = () => {
$.on(this.$svg, 'click', '.grid-row, .grid-header', () => {
this.unselect_all();
this.hide_popup();
};
});
}

bind_bar_events() {
Expand Down

0 comments on commit ec5e559

Please sign in to comment.