added year display mode
This commit is contained in:
parent
4b11841bc1
commit
4995e9ed0e
27
dist/frappe-gantt.js
vendored
27
dist/frappe-gantt.js
vendored
@ -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 {
|
||||||
|
|||||||
2
dist/frappe-gantt.min.js
vendored
2
dist/frappe-gantt.min.js
vendored
File diff suppressed because one or more lines are too long
10
index.html
10
index.html
@ -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>
|
||||||
|
|||||||
27
src/index.js
27
src/index.js
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user