Merge pull request #84 from MaTeMaTuK/dev

Dev

README.md

@@ -88,6 +88,7 @@ npm start
 | :------------- | :------ | :---------------------------------------------------------------------------------------------------- |
 | viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month. |
 | viewDate       | date    | Specifies display date and time for display.                                                          |
+| preStepsCount  | number  | Specifies empty space before the fist task                                                            |
 | locale         | string  | Specifies the month name language. Able formats: ISO 639-2, Java Locale.                              |
 | rtl            | boolean | Sets rtl mode.                                                                                        |
 

example/package-lock.json

@@ -24,16 +24,16 @@
       "devDependencies": {}
     },
     "..": {
-      "version": "0.3.8",
+      "version": "0.3.9",
       "license": "MIT",
       "devDependencies": {
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^13.1.8",
+        "@testing-library/user-event": "^14.2.1",
         "@types/jest": "^27.5.1",
         "@types/node": "^15.0.1",
         "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
+        "@types/react-dom": "^18.0.5",
         "cross-env": "^7.0.3",
         "gh-pages": "^3.1.0",
         "microbundle-crl": "^0.13.11",
@@ -42,11 +42,11 @@
         "postcss-flexbugs-fixes": "^5.0.2",
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.6.0",
-        "prettier": "^2.5.1",
+        "prettier": "^2.7.1",
-        "react": "^18.1.0",
+        "react": "^18.2.0",
-        "react-dom": "^18.1.0",
+        "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
-        "typescript": "^4.6.4"
+        "typescript": "^4.7.4"
       },
       "engines": {
         "node": ">=10"
@@ -381,11 +381,11 @@
       "requires": {
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^13.1.8",
+        "@testing-library/user-event": "^14.2.1",
         "@types/jest": "^27.5.1",
         "@types/node": "^15.0.1",
         "@types/react": "^18.0.5",
-        "@types/react-dom": "^18.0.1",
+        "@types/react-dom": "^18.0.5",
         "cross-env": "^7.0.3",
         "gh-pages": "^3.1.0",
         "microbundle-crl": "^0.13.11",
@@ -394,11 +394,11 @@
         "postcss-flexbugs-fixes": "^5.0.2",
         "postcss-normalize": "^10.0.1",
         "postcss-preset-env": "^7.6.0",
-        "prettier": "^2.5.1",
+        "prettier": "^2.7.1",
-        "react": "^18.1.0",
+        "react": "^18.2.0",
-        "react-dom": "^18.1.0",
+        "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
-        "typescript": "^4.6.4"
+        "typescript": "^4.7.4"
       },
       "dependencies": {
         "@testing-library/jest-dom": {

example/src/App.tsx

@@ -66,7 +66,7 @@ const App = () => {
   };
 
   return (
-    <div>
+    <div className="Wrapper">
       <ViewSwitcher
         onViewModeChange={viewMode => setView(viewMode)}
         onViewListChange={setIsChecked}

example/src/index.css

@@ -1,3 +1,6 @@
+.Wrapper {
+  margin-bottom: 2rem;
+}
 .ViewContainer {
   list-style: none;
   -ms-box-orient: horizontal;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <maksym.vikarii@gmail.com>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/gantt/gantt.tsx

@@ -20,9 +20,9 @@ import { BarTask } from "../../types/bar-task";
 import { convertToBarTasks } from "../../helpers/bar-helper";
 import { GanttEvent } from "../../types/gantt-task-actions";
 import { DateSetup } from "../../types/date-setup";
-import styles from "./gantt.module.css";
 import { HorizontalScroll } from "../other/horizontal-scroll";
 import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
+import styles from "./gantt.module.css";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -32,6 +32,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   rowHeight = 50,
   ganttHeight = 0,
   viewMode = ViewMode.Day,
+  preStepsCount = 1,
   locale = "en-GB",
   barFill = 60,
   barCornerRadius = 3,
@@ -68,7 +69,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const wrapperRef = useRef<HTMLDivElement>(null);
   const taskListRef = useRef<HTMLDivElement>(null);
   const [dateSetup, setDateSetup] = useState<DateSetup>(() => {
-    const [startDate, endDate] = ganttDateRange(tasks, viewMode);
+    const [startDate, endDate] = ganttDateRange(tasks, viewMode, preStepsCount);
     return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
   });
   const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
@@ -106,7 +107,11 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
       filteredTasks = tasks;
     }
     filteredTasks = filteredTasks.sort(sortTasks);
-    const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
+    const [startDate, endDate] = ganttDateRange(
+      filteredTasks,
+      viewMode,
+      preStepsCount
+    );
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
       newDates = newDates.reverse();
@@ -140,6 +145,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   }, [
     tasks,
     viewMode,
+    preStepsCount,
     rowHeight,
     barCornerRadius,
     columnWidth,

src/components/other/horizontal-scroll.module.css

@@ -4,7 +4,7 @@
   /*firefox*/
   scrollbar-width: thin;
   /*iPad*/
-  height: 1.1rem;
+  height: 1.2rem;
 }
 .scrollWrapper::-webkit-scrollbar {
   width: 1.1rem;
@@ -27,9 +27,6 @@
   background-clip: padding-box;
 }
 @media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
-  .scrollWrapper {
-    -webkit-overflow-scrolling: touch;
-  }
 }
 .scroll {
   height: 1px;

src/components/other/vertical-scroll.module.css

@@ -1,6 +1,6 @@
 .scroll {
   overflow: hidden auto;
-  width: 17px;
+  width: 1rem;
   flex-shrink: 0;
   /*firefox*/
   scrollbar-width: thin;

src/components/other/vertical-scroll.tsx

@@ -29,7 +29,7 @@ export const VerticalScroll: React.FC<{
       style={{
         height: ganttHeight,
         marginTop: headerHeight,
-        marginLeft: rtl ? "" : "-17px",
+        marginLeft: rtl ? "" : "-1rem",
       }}
       className={styles.scroll}
       onScroll={onScroll}

src/helpers/bar-helper.ts

@@ -246,16 +246,13 @@ const convertToMilestone = (
   };
 };
 
-const taskXCoordinate = (
+const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => {
-  xDate: Date,
-  dates: Date[],
-  columnWidth: number
-) => {
   const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1;
 
   const remainderMillis = xDate.getTime() - dates[index].getTime();
-  const percentOfInterval = remainderMillis / (dates[index + 1 ].getTime() - dates[index].getTime());
+  const percentOfInterval =
-  const x = index * columnWidth + (percentOfInterval * columnWidth);
+    remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
+  const x = index * columnWidth + percentOfInterval * columnWidth;
   return x;
 };
 const taskXCoordinateRTL = (

src/helpers/date-helper.ts

@@ -69,7 +69,11 @@ export const startOfDate = (date: Date, scale: DateHelperScales) => {
   return newDate;
 };
 
-export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
+export const ganttDateRange = (
+  tasks: Task[],
+  viewMode: ViewMode,
+  preStepsCount: number
+) => {
   let newStartDate: Date = tasks[0].start;
   let newEndDate: Date = tasks[0].start;
   for (const task of tasks) {
@@ -82,39 +86,43 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
   }
   switch (viewMode) {
     case ViewMode.Month:
-      newStartDate = addToDate(newStartDate, -1, "month");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "month");
       newStartDate = startOfDate(newStartDate, "month");
       newEndDate = addToDate(newEndDate, 1, "year");
       newEndDate = startOfDate(newEndDate, "year");
       break;
     case ViewMode.Week:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(
+        getMonday(newStartDate),
+        -7 * preStepsCount,
+        "day"
+      );
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(getMonday(newStartDate), -7, "day");
       newEndDate = addToDate(newEndDate, 1.5, "month");
       break;
     case ViewMode.Day:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 19, "day");
       break;
     case ViewMode.QuarterDay:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 66, "hour"); // 24(1 day)*3 - 6
       break;
     case ViewMode.HalfDay:
       newStartDate = startOfDate(newStartDate, "day");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "day");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
       break;
     case ViewMode.Hour:
       newStartDate = startOfDate(newStartDate, "hour");
+      newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour");
       newEndDate = startOfDate(newEndDate, "day");
-      newStartDate = addToDate(newStartDate, -1, "hour");
       newEndDate = addToDate(newEndDate, 1, "day");
       break;
   }

src/types/public-types.ts

@@ -75,6 +75,7 @@ export interface EventOption {
 export interface DisplayOption {
   viewMode?: ViewMode;
   viewDate?: Date;
+  preStepsCount?: number;
   /**
    * Specifies the month name language. Able formats: ISO 639-2, Java Locale
    */