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

2
dist/frappe-gantt.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

50
src/date_utils.js
View File

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

73
src/index.js
View File

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