jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #96 from vlexz/master

Browse Source 
year view mode, localization for month names
This commit is contained in:
Faris Ansari 2018-09-23 19:45:03 +05:30 committed by GitHub
commit 8447e15225
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 168 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
dist/frappe-gantt.js vendored
View File

@ -9,20 +9,36 @@ const MINUTE = 'minute';
const SECOND = 'second'; const SECOND = 'second';
const MILLISECOND = 'millisecond'; const MILLISECOND = 'millisecond';
const month_names = [ const month_names = {
'January', en: [
'February', 'January',
'March', 'February',
'April', 'March',
'May', 'April',
'June', 'May',
'July', 'June',
'August', 'July',
'September', 'August',
'October', 'September',
'November', 'October',
'December' 'November',
]; 'December'
],
ru: [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь'
]
};
var date_utils = { var date_utils = {
parse(date, date_separator = '-', time_separator = /[.:]/) { parse(date, date_separator = '-', time_separator = /[.:]/) {
@ -77,7 +93,7 @@ var date_utils = {
return date_string + (with_time ? ' ' + time_string : ''); return date_string + (with_time ? ' ' + time_string : '');
}, },
format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS') { format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
const values = this.get_date_values(date).map(d => padStart(d, 2, 0)); const values = this.get_date_values(date).map(d => padStart(d, 2, 0));
const format_map = { const format_map = {
YYYY: values[0], YYYY: values[0],
@ -88,8 +104,8 @@ var date_utils = {
ss: values[5], ss: values[5],
SSS:values[6], SSS:values[6],
D: values[2], D: values[2],
MMMM: month_names[+values[1]], MMMM: month_names[lang][+values[1]],
MMM: month_names[+values[1]] MMM: month_names[lang][+values[1]]
}; };
let str = format_string; let str = format_string;
@ -1000,7 +1016,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,
@ -1008,7 +1024,8 @@ class Gantt {
view_mode: 'Day', view_mode: 'Day',
date_format: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
popup_trigger: 'click', popup_trigger: 'click',
custom_popup_html: null custom_popup_html: null,
language: 'en'
}; };
this.options = Object.assign({}, default_options, options); this.options = Object.assign({}, default_options, options);
} }
@ -1119,6 +1136,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;
} }
} }
@ -1150,6 +1170,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');
@ -1164,9 +1187,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);
} }
@ -1391,38 +1418,43 @@ class Gantt {
last_date = date_utils.add(date, 1, 'year'); last_date = date_utils.add(date, 1, 'year');
} }
const date_text = { const date_text = {
'Quarter Day_lower': date_utils.format(date, 'HH'), 'Quarter Day_lower': date_utils.format(date, 'HH', this.options.language),
'Half Day_lower': date_utils.format(date, 'HH'), 'Half Day_lower': date_utils.format(date, 'HH', this.options.language),
Day_lower: Day_lower:
date.getDate() !== last_date.getDate() date.getDate() !== last_date.getDate()
? date_utils.format(date, 'D') ? date_utils.format(date, 'D', this.options.language)
: '', : '',
Week_lower: Week_lower:
date.getMonth() !== last_date.getMonth() date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'D MMM') ? date_utils.format(date, 'D MMM', this.options.language)
: date_utils.format(date, 'D'), : date_utils.format(date, 'D', this.options.language),
Month_lower: date_utils.format(date, 'MMMM'), Month_lower: date_utils.format(date, 'MMMM', this.options.language),
Year_lower: date_utils.format(date, 'YYYY', this.options.language),
'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', this.options.language)
: '', : '',
'Half Day_upper': 'Half Day_upper':
date.getDate() !== last_date.getDate() date.getDate() !== last_date.getDate()
? date.getMonth() !== last_date.getMonth() ? date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'D MMM') ? date_utils.format(date, 'D MMM', this.options.language)
: date_utils.format(date, 'D') : date_utils.format(date, 'D', this.options.language)
: '', : '',
Day_upper: Day_upper:
date.getMonth() !== last_date.getMonth() date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'MMMM') ? date_utils.format(date, 'MMMM', this.options.language)
: '', : '',
Week_upper: Week_upper:
date.getMonth() !== last_date.getMonth() date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'MMMM') ? date_utils.format(date, 'MMMM', this.options.language)
: '', : '',
Month_upper: Month_upper:
date.getFullYear() !== last_date.getFullYear() date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY') ? date_utils.format(date, 'YYYY', this.options.language)
: '',
Year_upper:
date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY', this.options.language)
: '' : ''
}; };
@ -1442,7 +1474,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 {

11
index.html
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,9 @@
}, },
on_view_change: function(mode) { on_view_change: function(mode) {
console.log(mode); console.log(mode);
} },
view_mode: 'Month',
language: 'en'
}); });
console.log(gantt_chart); console.log(gantt_chart);
</script> </script>

50
src/date_utils.js
View File

@ -6,20 +6,36 @@ const MINUTE = 'minute';
const SECOND = 'second'; const SECOND = 'second';
const MILLISECOND = 'millisecond'; const MILLISECOND = 'millisecond';
const month_names = [ const month_names = {
'January', en: [
'February', 'January',
'March', 'February',
'April', 'March',
'May', 'April',
'June', 'May',
'July', 'June',
'August', 'July',
'September', 'August',
'October', 'September',
'November', 'October',
'December' 'November',
]; 'December'
],
ru: [
'Январь',
'Февраль',
'Март',
'Апрель',
'Май',
'Июнь',
'Июль',
'Август',
'Сентябрь',
'Октябрь',
'Ноябрь',
'Декабрь'
]
};
export default { export default {
parse(date, date_separator = '-', time_separator = /[.:]/) { parse(date, date_separator = '-', time_separator = /[.:]/) {
@ -74,7 +90,7 @@ export default {
return date_string + (with_time ? ' ' + time_string : ''); return date_string + (with_time ? ' ' + time_string : '');
}, },
format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS') { format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
const values = this.get_date_values(date).map(d => padStart(d, 2, 0)); const values = this.get_date_values(date).map(d => padStart(d, 2, 0));
const format_map = { const format_map = {
YYYY: values[0], YYYY: values[0],
@ -85,8 +101,8 @@ export default {
ss: values[5], ss: values[5],
SSS:values[6], SSS:values[6],
D: values[2], D: values[2],
MMMM: month_names[+values[1]], MMMM: month_names[lang][+values[1]],
MMM: month_names[+values[1]] MMM: month_names[lang][+values[1]]
}; };
let str = format_string; let str = format_string;

73
src/index.js
View File

@ -68,7 +68,14 @@ 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,
@ -76,7 +83,8 @@ export default class Gantt {
view_mode: 'Day', view_mode: 'Day',
date_format: 'YYYY-MM-DD', date_format: 'YYYY-MM-DD',
popup_trigger: 'click', popup_trigger: 'click',
custom_popup_html: null custom_popup_html: null,
language: 'en'
}; };
this.options = Object.assign({}, default_options, options); this.options = Object.assign({}, default_options, options);
} }
@ -187,6 +195,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 +229,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 +246,17 @@ 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);
} }
@ -459,38 +481,51 @@ export default class Gantt {
last_date = date_utils.add(date, 1, 'year'); last_date = date_utils.add(date, 1, 'year');
} }
const date_text = { const date_text = {
'Quarter Day_lower': date_utils.format(date, 'HH'), 'Quarter Day_lower': date_utils.format(
'Half Day_lower': date_utils.format(date, 'HH'), date,
'HH',
this.options.language
),
'Half Day_lower': date_utils.format(
date,
'HH',
this.options.language
),
Day_lower: Day_lower:
date.getDate() !== last_date.getDate() date.getDate() !== last_date.getDate()
? date_utils.format(date, 'D') ? date_utils.format(date, 'D', this.options.language)
: '', : '',
Week_lower: Week_lower:
date.getMonth() !== last_date.getMonth() date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'D MMM') ? date_utils.format(date, 'D MMM', this.options.language)
: date_utils.format(date, 'D'), : date_utils.format(date, 'D', this.options.language),
Month_lower: date_utils.format(date, 'MMMM'), Month_lower: date_utils.format(date, 'MMMM', this.options.language),
Year_lower: date_utils.format(date, 'YYYY', this.options.language),
'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', this.options.language)
: '', : '',
'Half Day_upper': 'Half Day_upper':
date.getDate() !== last_date.getDate() date.getDate() !== last_date.getDate()
? date.getMonth() !== last_date.getMonth() ? date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'D MMM') ? date_utils.format(date, 'D MMM', this.options.language)
: date_utils.format(date, 'D') : date_utils.format(date, 'D', this.options.language)
: '', : '',
Day_upper: Day_upper:
date.getMonth() !== last_date.getMonth() date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'MMMM') ? date_utils.format(date, 'MMMM', this.options.language)
: '', : '',
Week_upper: Week_upper:
date.getMonth() !== last_date.getMonth() date.getMonth() !== last_date.getMonth()
? date_utils.format(date, 'MMMM') ? date_utils.format(date, 'MMMM', this.options.language)
: '', : '',
Month_upper: Month_upper:
date.getFullYear() !== last_date.getFullYear() date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY') ? date_utils.format(date, 'YYYY', this.options.language)
: '',
Year_upper:
date.getFullYear() !== last_date.getFullYear()
? date_utils.format(date, 'YYYY', this.options.language)
: '' : ''
}; };
@ -510,7 +545,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 {