feat: allow hour mode

This commit is contained in:
Safwan Samsudeen 2024-04-05 14:53:50 +05:30
parent 0f15ab1875
commit a4f7b727fe

View File

@ -7,6 +7,7 @@ import Popup from './popup';
import './gantt.scss';
const VIEW_MODE = {
HOUR: 'Hour',
QUARTER_DAY: 'Quarter Day',
HALF_DAY: 'Half Day',
DAY: 'Day',
@ -190,8 +191,10 @@ export default class Gantt {
update_view_scale(view_mode) {
this.options.view_mode = view_mode;
if (view_mode === VIEW_MODE.DAY) {
if (view_mode === VIEW_MODE.HOUR) {
this.options.step = 24 / 24;
this.options.column_width = 38;
} else if (view_mode === VIEW_MODE.DAY) {
this.options.step = 24;
this.options.column_width = 38;
} else if (view_mode === VIEW_MODE.HALF_DAY) {
@ -234,7 +237,7 @@ export default class Gantt {
this.gantt_end = date_utils.start_of(this.gantt_end, 'day');
// add date padding on both sides
if (this.view_is([VIEW_MODE.QUARTER_DAY, VIEW_MODE.HALF_DAY])) {
if (this.view_is([VIEW_MODE.HOUR, VIEW_MODE.QUARTER_DAY, VIEW_MODE.HALF_DAY])) {
this.gantt_start = date_utils.add(this.gantt_start, -7, 'day');
this.gantt_end = date_utils.add(this.gantt_end, 7, 'day');
} else if (this.view_is(VIEW_MODE.MONTH)) {
@ -538,6 +541,11 @@ export default class Gantt {
last_date = date_utils.add(date, 1, 'day');
}
const date_text = {
Hour_lower: date_utils.format(
date,
'HH',
this.options.language
),
'Quarter Day_lower': date_utils.format(
date,
'HH',
@ -558,6 +566,10 @@ export default class Gantt {
: 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),
Hour_upper:
date.getDate() !== last_date.getDate()
? date_utils.format(date, 'D MMMM', this.options.language)
: '',
'Quarter Day_upper':
date.getDate() !== last_date.getDate()
? date_utils.format(date, 'D MMM', this.options.language)
@ -597,6 +609,8 @@ export default class Gantt {
};
const x_pos = {
Hour_lower: this.options.column_width / 2,
Hour_upper: this.options.column_width * 12,
'Quarter Day_lower': this.options.column_width / 2,
'Quarter Day_upper': this.options.column_width * 2,
'Half Day_lower': this.options.column_width / 2,