added year display mode

This commit is contained in:
Oleksii Voznosymenko 2018-08-08 22:17:02 +03:00
parent 4b11841bc1
commit 4995e9ed0e
4 changed files with 54 additions and 12 deletions

27
dist/frappe-gantt.js vendored
View File

@ -991,7 +991,7 @@ class Gantt {
header_height: 50,
column_width: 30,
step: 24,
view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month', 'Year'],
bar_height: 20,
bar_corner_radius: 3,
arrow_curve: 5,
@ -1110,6 +1110,9 @@ class Gantt {
} else if (view_mode === 'Month') {
this.options.step = 24 * 30;
this.options.column_width = 120;
} else if (view_mode === 'Year') {
this.options.step = 24 * 365;
this.options.column_width = 120;
}
}
@ -1141,6 +1144,9 @@ class Gantt {
} else if (this.view_is('Month')) {
this.gantt_start = date_utils.start_of(this.gantt_start, 'year');
this.gantt_end = date_utils.add(this.gantt_end, 1, 'year');
} else if (this.view_is('Year')) {
this.gantt_start = date_utils.add(this.gantt_start, -2, 'year');
this.gantt_end = date_utils.add(this.gantt_end, 2, 'year');
} else {
this.gantt_start = date_utils.add(this.gantt_start, -1, 'month');
this.gantt_end = date_utils.add(this.gantt_end, 1, 'month');
@ -1155,9 +1161,13 @@ class Gantt {
if (!cur_date) {
cur_date = date_utils.clone(this.gantt_start);
} else {
cur_date = this.view_is('Month')
? date_utils.add(cur_date, 1, 'month')
: date_utils.add(cur_date, this.options.step, 'hour');
if (this.view_is('Year')) {
cur_date = date_utils.add(cur_date, 1, 'year');
} else if (this.view_is('Month')) {
cur_date = date_utils.add(cur_date, 1, 'month');
} else {
cur_date = date_utils.add(cur_date, this.options.step, 'hour');
}
}
this.dates.push(cur_date);
}
@ -1393,6 +1403,7 @@ class Gantt {
? date_utils.format(date, 'D MMM')
: date_utils.format(date, 'D'),
Month_lower: date_utils.format(date, 'MMMM'),
Year_lower: date_utils.format(date, 'YYYY'),
'Quarter Day_upper':
date.getDate() !== last_date.getDate()
? date_utils.format(date, 'D MMM')
@ -1412,6 +1423,10 @@ class Gantt {
? date_utils.format(date, 'MMMM')
: '',
Month_upper:
date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY')
: '',
Year_upper:
date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY')
: ''
@ -1433,7 +1448,9 @@ class Gantt {
Week_lower: 0,
Week_upper: this.options.column_width * 4 / 2,
Month_lower: this.options.column_width / 2,
Month_upper: this.options.column_width * 12 / 2
Month_upper: this.options.column_width * 12 / 2,
Year_lower: this.options.column_width / 2,
Year_upper: this.options.column_width * 30 / 2
};
return {

File diff suppressed because one or more lines are too long

View File

@ -75,6 +75,13 @@
dependencies: 'Task 4',
custom_class: 'bar-milestone'
},
{
start: '2014-01-05',
end: '2019-10-12',
name: 'Long term task',
id: "Task 6",
progress: 0
}
]
var gantt_chart = new Gantt(".gantt-target", tasks, {
on_click: function (task) {
@ -88,7 +95,8 @@
},
on_view_change: function(mode) {
console.log(mode);
}
},
view_mode: 'Year'
});
console.log(gantt_chart);
</script>

View File

@ -68,7 +68,7 @@ export default class Gantt {
header_height: 50,
column_width: 30,
step: 24,
view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month', 'Year'],
bar_height: 20,
bar_corner_radius: 3,
arrow_curve: 5,
@ -187,6 +187,9 @@ export default class Gantt {
} else if (view_mode === 'Month') {
this.options.step = 24 * 30;
this.options.column_width = 120;
} else if (view_mode === 'Year') {
this.options.step = 24 * 365;
this.options.column_width = 120;
}
}
@ -218,6 +221,9 @@ export default class Gantt {
} else if (this.view_is('Month')) {
this.gantt_start = date_utils.start_of(this.gantt_start, 'year');
this.gantt_end = date_utils.add(this.gantt_end, 1, 'year');
} else if (this.view_is('Year')) {
this.gantt_start = date_utils.add(this.gantt_start, -2, 'year');
this.gantt_end = date_utils.add(this.gantt_end, 2, 'year');
} else {
this.gantt_start = date_utils.add(this.gantt_start, -1, 'month');
this.gantt_end = date_utils.add(this.gantt_end, 1, 'month');
@ -232,9 +238,13 @@ export default class Gantt {
if (!cur_date) {
cur_date = date_utils.clone(this.gantt_start);
} else {
cur_date = this.view_is('Month')
? date_utils.add(cur_date, 1, 'month')
: date_utils.add(cur_date, this.options.step, 'hour');
if (this.view_is('Year')) {
cur_date = date_utils.add(cur_date, 1, 'year');
} else if (this.view_is('Month')) {
cur_date = date_utils.add(cur_date, 1, 'month');
} else {
cur_date = date_utils.add(cur_date, this.options.step, 'hour');
}
}
this.dates.push(cur_date);
}
@ -470,6 +480,7 @@ export default class Gantt {
? date_utils.format(date, 'D MMM')
: date_utils.format(date, 'D'),
Month_lower: date_utils.format(date, 'MMMM'),
Year_lower: date_utils.format(date, 'YYYY'),
'Quarter Day_upper':
date.getDate() !== last_date.getDate()
? date_utils.format(date, 'D MMM')
@ -489,6 +500,10 @@ export default class Gantt {
? date_utils.format(date, 'MMMM')
: '',
Month_upper:
date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY')
: '',
Year_upper:
date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY')
: ''
@ -510,7 +525,9 @@ export default class Gantt {
Week_lower: 0,
Week_upper: this.options.column_width * 4 / 2,
Month_lower: this.options.column_width / 2,
Month_upper: this.options.column_width * 12 / 2
Month_upper: this.options.column_width * 12 / 2,
Year_lower: this.options.column_width / 2,
Year_upper: this.options.column_width * 30 / 2
};
return {