Fixes
- end_date calculation - hide_popup on grid_click - bar position should also consider hours - date_change event only if date has changed
This commit is contained in:
Faris Ansari
parent
cd93fbf655
commit
ec5e559b5c
81
index.html
81
index.html
@ -13,7 +13,7 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* custom class */
|
||||
.gantt .bar-milestone .bar-progress {
|
||||
.gantt .bar-milestone .bar {
|
||||
fill: tomato;
|
||||
}
|
||||
</style>
|
||||
@ -26,35 +26,56 @@
|
||||
<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) {
|
||||
|
||||
56
src/bar.js
56
src/bar.js
@ -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 =
|
||||
@ -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');
|
||||
|
||||
@ -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({
|
||||
@ -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')
|
||||
]);
|
||||
}
|
||||
|
||||
@ -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 };
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -89,6 +89,7 @@ $handle-color: #ddd !default;
|
||||
|
||||
.bar-wrapper {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
.bar {
|
||||
|
||||
14
src/index.js
14
src/index.js
@ -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;
|
||||
@ -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');
|
||||
@ -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() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user