From a4f7b727febff8e2f956eecd0b3ed51a95dfa918 Mon Sep 17 00:00:00 2001
From: Safwan Samsudeen <safwansamsudeen.c@gmail.com>
Date: Fri, 5 Apr 2024 14:53:50 +0530
Subject: [PATCH] feat: allow hour mode

---
 src/index.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index 758e413..080e0a4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -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,