jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

feat: allow hour mode

Browse Source
This commit is contained in:
Safwan Samsudeen 2024-04-05 14:53:50 +05:30
parent 0f15ab1875
commit a4f7b727fe
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.js
View File

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