From 28d363154686fe4f15bf0bfc6dcb7c6dead3680f Mon Sep 17 00:00:00 2001
From: szogun1987 <szogun1987@gmail.com>
Date: Tue, 14 May 2024 19:31:45 +0200
Subject: [PATCH] * Remove white-space on the right on large screens * Align
 year label properly for Quarters mode * Align year label in the middle of the
 partial year * Add roght-end horizontal line

---
 example/src/App.tsx                      |  3 ++-
 example/src/components/view-switcher.tsx |  2 +-
 example/src/helper.tsx                   |  2 +-
 src/components/calendar/calendar.tsx     | 31 ++++++++++++++++++++----
 src/components/gantt/gantt.tsx           |  5 +++-
 src/components/grid/grid-body.tsx        | 10 ++++++++
 src/types/public-types.ts                |  1 +
 7 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/example/src/App.tsx b/example/src/App.tsx
index c2ab602eb..f3cf87666 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Task, ViewMode, Gantt } from "gantt-task-react";
+import {Task, ViewMode, Gantt} from "gantt-task-react";
 import { ViewSwitcher } from "./components/view-switcher";
 import { getStartEndDateForProject, initTasks } from "./helper";
 import "gantt-task-react/dist/index.css";
@@ -101,6 +101,7 @@ const App = () => {
         onExpanderClick={handleExpanderClick}
         listCellWidth={isChecked ? "155px" : ""}
         ganttHeight={300}
+        ganttWidth={1000}
         columnWidth={columnWidth}
       />
     </div>
diff --git a/example/src/components/view-switcher.tsx b/example/src/components/view-switcher.tsx
index 42f736016..a7227c913 100644
--- a/example/src/components/view-switcher.tsx
+++ b/example/src/components/view-switcher.tsx
@@ -56,7 +56,7 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
         className="Button"
         onClick={() => onViewModeChange(ViewMode.QuarterYear)}
       >
-        Year
+        Quarter of year
       </button>
       <div className="Switch">
         <label className="Switch_Toggle">
diff --git a/example/src/helper.tsx b/example/src/helper.tsx
index b876feaec..d536b10b4 100644
--- a/example/src/helper.tsx
+++ b/example/src/helper.tsx
@@ -1,7 +1,7 @@
 import { Task } from "../../dist/types/public-types";
 
 export function initTasks() {
-  const currentDate = new Date();
+  const currentDate = new Date(2023, 7, 1);
   const tasks: Task[] = [
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index a5860db52..b595a67e8 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -17,6 +17,7 @@ export type CalendarProps = {
   viewMode: ViewMode;
   rtl: boolean;
   headerHeight: number;
+  svgWidth: number;
   columnWidth: number;
   fontFamily: string;
   fontSize: string;
@@ -29,6 +30,7 @@ export const Calendar: React.FC<CalendarProps> = ({
   rtl,
   headerHeight,
   columnWidth,
+  svgWidth,
   fontFamily,
   fontSize,
 }) => {
@@ -82,8 +84,9 @@ export const Calendar: React.FC<CalendarProps> = ({
     const topDefaultHeight = headerHeight * 0.5;
     for (let i = 0; i < dateSetup.dates.length; i++) {
       const date = dateSetup.dates[i];
-      // const bottomValue = getLocaleMonth(date, locale);
-      const quarter = "Q" + Math.floor((date.getMonth() + 3) / 3);
+
+      const quarterNumber = Math.floor((date.getMonth()) / 3);
+      const quarter = "Q" + (quarterNumber + 1);
       bottomValues.push(
         <text
           key={date.getTime()}
@@ -101,9 +104,13 @@ export const Calendar: React.FC<CalendarProps> = ({
         const topValue = date.getFullYear().toString();
         let xText: number;
         if (rtl) {
-          xText = (6 + i + date.getMonth() + 1) * columnWidth;
+          xText = (2 + i + quarterNumber + 1) * columnWidth;
         } else {
-          xText = (6 + i - date.getMonth()) * columnWidth;
+          xText = (2 + i - quarterNumber) * columnWidth;
+          // For first year display year in the middle of the visible scope
+          if (i === 0) {
+            xText = ((4 - quarterNumber) / 2) * columnWidth;
+          }
         }
         topValues.push(
           <TopPartOfCalendar
@@ -148,6 +155,11 @@ export const Calendar: React.FC<CalendarProps> = ({
           xText = (6 + i + date.getMonth() + 1) * columnWidth;
         } else {
           xText = (6 + i - date.getMonth()) * columnWidth;
+
+          // For first year display year in the middle of the visible scope
+          if (i === 0) {
+            xText = ((12 - date.getMonth()) / 2) * columnWidth;
+          }
         }
         topValues.push(
           <TopPartOfCalendar
@@ -380,16 +392,25 @@ export const Calendar: React.FC<CalendarProps> = ({
     case ViewMode.Hour:
       [topValues, bottomValues] = getCalendarValuesForHour();
   }
+  const terminalX = dateSetup.dates.length * columnWidth;
   return (
     <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>
       <rect
         x={0}
         y={0}
-        width={columnWidth * dateSetup.dates.length}
+        width={svgWidth}
         height={headerHeight}
         className={styles.calendarHeader}
       />
       {bottomValues} {topValues}
+      <line
+        x1={terminalX}
+        y1={0}
+        x2={terminalX}
+        y2={headerHeight}
+        className={styles.calendarTopTick}
+        key={"terminal-line"}
+      />
     </g>
   );
 };
diff --git a/src/components/gantt/gantt.tsx b/src/components/gantt/gantt.tsx
index b90483f3d..e1ff462f4 100644
--- a/src/components/gantt/gantt.tsx
+++ b/src/components/gantt/gantt.tsx
@@ -31,6 +31,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   listCellWidth = "155px",
   rowHeight = 50,
   ganttHeight = 0,
+  ganttWidth = 0,
   viewMode = ViewMode.Day,
   preStepsCount = 1,
   locale = "en-GB",
@@ -91,7 +92,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const [selectedTask, setSelectedTask] = useState<BarTask>();
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
 
-  const svgWidth = dateSetup.dates.length * columnWidth;
+  const svgWidth = Math.max(dateSetup.dates.length * columnWidth, ganttWidth);
+
   const ganttFullHeight = barTasks.length * rowHeight;
 
   const [scrollY, setScrollY] = useState(0);
@@ -402,6 +404,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     viewMode,
     headerHeight,
     columnWidth,
+    svgWidth,
     fontFamily,
     fontSize,
     rtl,
diff --git a/src/components/grid/grid-body.tsx b/src/components/grid/grid-body.tsx
index 18e6f2b00..d40d6cb2b 100644
--- a/src/components/grid/grid-body.tsx
+++ b/src/components/grid/grid-body.tsx
@@ -116,6 +116,16 @@ export const GridBody: React.FC<GridBodyProps> = ({
     }
     tickX += columnWidth;
   }
+  const terminalX = dates.length * columnWidth;
+  ticks.push(
+  <line
+    key="terminal"
+    x1={terminalX}
+    y1={0}
+    x2={terminalX}
+    y2={y}
+    className={styles.gridTick}
+  />);
   return (
     <g className="gridBody">
       <g className="rows">{gridRows}</g>
diff --git a/src/types/public-types.ts b/src/types/public-types.ts
index cc44ff17c..712de4e99 100644
--- a/src/types/public-types.ts
+++ b/src/types/public-types.ts
@@ -91,6 +91,7 @@ export interface StylingOption {
   listCellWidth?: string;
   rowHeight?: number;
   ganttHeight?: number;
+  ganttWidth?: number;
   barCornerRadius?: number;
   handleWidth?: number;
   fontFamily?: string;