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

File diff suppressed because one or more lines are too long

View File

@ -75,6 +75,13 @@
dependencies: 'Task 4', dependencies: 'Task 4',
custom_class: 'bar-milestone' 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, { var gantt_chart = new Gantt(".gantt-target", tasks, {
on_click: function (task) { on_click: function (task) {
@ -88,7 +95,8 @@
}, },
on_view_change: function(mode) { on_view_change: function(mode) {
console.log(mode); console.log(mode);
} },
view_mode: 'Year'
}); });
console.log(gantt_chart); console.log(gantt_chart);
</script> </script>

View File

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