Merge pull request #40 from MaTeMaTuK/dev

Dev

.gitignore

@@ -20,3 +20,4 @@ dist
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json

README.md

@@ -76,7 +76,7 @@ npm start
 | onDateChange\*     | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar event on timeline has finished. |
 | onProgressChange\* | (task: Task, children: Task[]) => void/boolean/Promise<void>/Promise<boolean> | Specifies the function to be executed when drag taskbar progress event has finished.    |
 | onExpanderClick\*  | onExpanderClick: (task: Task) => void;                                        | Specifies the function to be executed on the table expander click                       |
-| timeStep           | (task: Task) => number                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
+| timeStep           | number                                                                        | A time step value for onDateChange. Specify in milliseconds.                            |
 
 \* Chart undoes operation if method return false or error. Parameter children returns one level deep records.
 

example/src/App.tsx

@@ -9,7 +9,7 @@ const App = () => {
   const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
   const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
-  let columnWidth = 60;
+  let columnWidth = 65;
   if (view === ViewMode.Month) {
     columnWidth = 300;
   } else if (view === ViewMode.Week) {

example/src/components/view-switcher.tsx

@@ -13,6 +13,12 @@ export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
 }) => {
   return (
     <div className="ViewContainer">
+      <button
+        className="Button"
+        onClick={() => onViewModeChange(ViewMode.Hour)}
+      >
+        Hour
+      </button>
       <button
         className="Button"
         onClick={() => onViewModeChange(ViewMode.QuarterDay)}

example/src/helper.tsx

@@ -10,8 +10,8 @@ export function initTasks() {
       id: "ProjectSample",
       progress: 25,
       type: "project",
-
       hideChildren: false,
+      displayOrder: 1,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
@@ -27,6 +27,7 @@ export function initTasks() {
       progress: 45,
       type: "task",
       project: "ProjectSample",
+      displayOrder: 2,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
@@ -37,6 +38,7 @@ export function initTasks() {
       dependencies: ["Task 0"],
       type: "task",
       project: "ProjectSample",
+      displayOrder: 3,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
@@ -47,6 +49,7 @@ export function initTasks() {
       dependencies: ["Task 1"],
       type: "task",
       project: "ProjectSample",
+      displayOrder: 4,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
@@ -57,6 +60,7 @@ export function initTasks() {
       dependencies: ["Task 2"],
       type: "task",
       project: "ProjectSample",
+      displayOrder: 5,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
@@ -67,6 +71,7 @@ export function initTasks() {
       progress: 70,
       dependencies: ["Task 2"],
       project: "ProjectSample",
+      displayOrder: 6,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
@@ -77,6 +82,7 @@ export function initTasks() {
       type: "milestone",
       dependencies: ["Task 4"],
       project: "ProjectSample",
+      displayOrder: 7,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),

example/src/setupTests.ts

@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

package.json

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

src/components/calendar/calendar.tsx

@@ -4,6 +4,7 @@ import { TopPartOfCalendar } from "./top-part-of-calendar";
 import {
   getCachedDateTimeFormat,
   getDaysInMonth,
+  getLocalDayOfWeek,
   getLocaleMonth,
   getWeekNumberISO8601,
 } from "../../helpers/date-helper";
@@ -131,7 +132,9 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = date.getDate().toString();
+      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date
+        .getDate()
+        .toString()}`;
 
       bottomValues.push(
         <text
@@ -170,7 +173,7 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForOther = () => {
+  const getCalendarValuesForPartOfDay = () => {
     const topValues: ReactChild[] = [];
     const bottomValues: ReactChild[] = [];
     const ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
@@ -194,7 +197,11 @@ export const Calendar: React.FC<CalendarProps> = ({
         </text>
       );
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = `${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        const topValue = `${getLocalDayOfWeek(
+          date,
+          locale,
+          "short"
+        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         topValues.push(
           <TopPartOfCalendar
             key={topValue + date.getFullYear()}
@@ -212,6 +219,52 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
+  const getCalendarValuesForHour = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
+        hour: "numeric",
+      }).format(date);
+
+      bottomValues.push(
+        <text
+          key={date.getTime()}
+          y={headerHeight * 0.8}
+          x={columnWidth * (i + +rtl)}
+          className={styles.calendarBottomText}
+          fontFamily={fontFamily}
+        >
+          {bottomValue}
+        </text>
+      );
+      if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
+        const topValue = `${getLocalDayOfWeek(
+          date,
+          locale,
+          "long"
+        )}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
+        const topPosition = (date.getHours() - 24) / 2;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + date.getFullYear()}
+            value={topValue}
+            x1Line={columnWidth * i}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={columnWidth * (i + topPosition)}
+            yText={topDefaultHeight * 0.9}
+          />
+        );
+      }
+    }
+
+    return [topValues, bottomValues];
+  };
+
   let topValues: ReactChild[] = [];
   let bottomValues: ReactChild[] = [];
   switch (dateSetup.viewMode) {
@@ -224,9 +277,12 @@ export const Calendar: React.FC<CalendarProps> = ({
     case ViewMode.Day:
       [topValues, bottomValues] = getCalendarValuesForDay();
       break;
-    default:
+    case ViewMode.QuarterDay:
-      [topValues, bottomValues] = getCalendarValuesForOther();
+    case ViewMode.HalfDay:
+      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
       break;
+    case ViewMode.Hour:
+      [topValues, bottomValues] = getCalendarValuesForHour();
   }
   return (
     <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>

src/components/gantt/gantt.tsx

@@ -1,4 +1,10 @@
-import React, { useState, SyntheticEvent, useRef, useEffect } from "react";
+import React, {
+  useState,
+  SyntheticEvent,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
 import { ViewMode, GanttProps, Task } from "../../types/public-types";
 import { GridProps } from "../grid/grid";
 import { ganttDateRange, seedDates } from "../../helpers/date-helper";
@@ -16,7 +22,7 @@ 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 } from "../../helpers/other-helper";
+import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -47,6 +53,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   fontSize = "14px",
   arrowIndent = 20,
   todayColor = "rgba(252, 248, 227, 0.5)",
+  viewDate,
   TooltipContent = StandardTooltipContent,
   TaskListHeader = TaskListHeaderDefault,
   TaskListTable = TaskListTableDefault,
@@ -63,8 +70,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     const [startDate, endDate] = ganttDateRange(tasks, viewMode);
     return { viewMode, dates: seedDates(startDate, endDate, viewMode) };
   });
+  const [currentViewDate, setCurrentViewDate] = useState<Date | undefined>(
+    undefined
+  );
 
-  const [taskHeight, setTaskHeight] = useState((rowHeight * barFill) / 100);
   const [taskListWidth, setTaskListWidth] = useState(0);
   const [svgContainerWidth, setSvgContainerWidth] = useState(0);
   const [svgContainerHeight, setSvgContainerHeight] = useState(ganttHeight);
@@ -72,6 +81,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const [ganttEvent, setGanttEvent] = useState<GanttEvent>({
     action: "",
   });
+  const taskHeight = useMemo(
+    () => (rowHeight * barFill) / 100,
+    [rowHeight, barFill]
+  );
 
   const [selectedTask, setSelectedTask] = useState<BarTask>();
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
@@ -91,6 +104,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     } else {
       filteredTasks = tasks;
     }
+    filteredTasks = filteredTasks.sort(sortTasks);
     const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
@@ -145,6 +159,34 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     onExpanderClick,
   ]);
 
+  useEffect(() => {
+    if (
+      viewMode === dateSetup.viewMode &&
+      ((viewDate && !currentViewDate) ||
+        (viewDate && currentViewDate?.valueOf() !== viewDate.valueOf()))
+    ) {
+      const dates = dateSetup.dates;
+      const index = dates.findIndex(
+        (d, i) =>
+          viewDate.valueOf() >= d.valueOf() &&
+          i + 1 !== dates.length &&
+          viewDate.valueOf() < dates[i + 1].valueOf()
+      );
+      if (index === -1) {
+        return;
+      }
+      setCurrentViewDate(viewDate);
+      setScrollX(columnWidth * index);
+    }
+  }, [
+    viewDate,
+    columnWidth,
+    dateSetup.dates,
+    viewMode,
+    currentViewDate,
+    setCurrentViewDate,
+  ]);
+
   useEffect(() => {
     const { changedTask, action } = ganttEvent;
     if (changedTask) {
@@ -181,13 +223,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     }
   }, [failedTask, barTasks]);
 
-  useEffect(() => {
-    const newTaskHeight = (rowHeight * barFill) / 100;
-    if (newTaskHeight !== taskHeight) {
-      setTaskHeight(newTaskHeight);
-    }
-  }, [rowHeight, barFill, taskHeight]);
-
   useEffect(() => {
     if (!listCellWidth) {
       setTaskListWidth(0);

src/components/task-list/task-list-table.tsx

@@ -3,18 +3,17 @@ import styles from "./task-list-table.module.css";
 import { Task } from "../../types/public-types";
 
 const localeDateStringCache = {};
-const toLocaleDateStringFactory = (locale: string) => (
+const toLocaleDateStringFactory =
-  date: Date,
+  (locale: string) =>
-  dateTimeOptions: Intl.DateTimeFormatOptions
+  (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => {
-) => {
+    const key = date.toString();
-  const key = date.toString();
+    let lds = localeDateStringCache[key];
-  let lds = localeDateStringCache[key];
+    if (!lds) {
-  if (!lds) {
+      lds = date.toLocaleDateString(locale, dateTimeOptions);
-    lds = date.toLocaleDateString(locale, dateTimeOptions);
+      localeDateStringCache[key] = lds;
-    localeDateStringCache[key] = lds;
+    }
-  }
+    return lds;
-  return lds;
+  };
-};
 const dateTimeOptions: Intl.DateTimeFormatOptions = {
   weekday: "short",
   year: "numeric",
@@ -41,9 +40,10 @@ export const TaskListTableDefault: React.FC<{
   locale,
   onExpanderClick,
 }) => {
-  const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [
+  const toLocaleDateString = useMemo(
-    locale,
+    () => toLocaleDateStringFactory(locale),
-  ]);
+    [locale]
+  );
 
   return (
     <div

src/helpers/date-helper.ts

@@ -25,7 +25,6 @@ export const getCachedDateTimeFormat = (
   return dtf;
 };
 
-
 export const addToDate = (
   date: Date,
   quantity: number,
@@ -112,6 +111,12 @@ export const ganttDateRange = (tasks: Task[], viewMode: ViewMode) => {
       newStartDate = addToDate(newStartDate, -1, "day");
       newEndDate = addToDate(newEndDate, 108, "hour"); // 24(1 day)*5 - 12
       break;
+    case ViewMode.Hour:
+      newStartDate = startOfDate(newStartDate, "hour");
+      newEndDate = startOfDate(newEndDate, "day");
+      newStartDate = addToDate(newStartDate, -1, "hour");
+      newEndDate = addToDate(newEndDate, 1, "day");
+      break;
   }
   return [newStartDate, newEndDate];
 };
@@ -140,6 +145,9 @@ export const seedDates = (
       case ViewMode.QuarterDay:
         currentDate = addToDate(currentDate, 6, "hour");
         break;
+      case ViewMode.Hour:
+        currentDate = addToDate(currentDate, 1, "hour");
+        break;
     }
     dates.push(currentDate);
   }
@@ -157,6 +165,21 @@ export const getLocaleMonth = (date: Date, locale: string) => {
   return bottomValue;
 };
 
+export const getLocalDayOfWeek = (
+  date: Date,
+  locale: string,
+  format?: "long" | "short" | "narrow" | undefined
+) => {
+  let bottomValue = getCachedDateTimeFormat(locale, {
+    weekday: format,
+  }).format(date);
+  bottomValue = bottomValue.replace(
+    bottomValue[0],
+    bottomValue[0].toLocaleUpperCase()
+  );
+  return bottomValue;
+};
+
 /**
  * Returns monday of current week
  * @param date date for modify
@@ -190,4 +213,3 @@ export const getWeekNumberISO8601 = (date: Date) => {
 export const getDaysInMonth = (month: number, year: number) => {
   return new Date(year, month + 1, 0).getDate();
 };
-

src/helpers/other-helper.ts

@@ -48,3 +48,15 @@ function getChildren(taskList: Task[], task: Task) {
   tasks = tasks.concat(tasks, taskChildren);
   return tasks;
 }
+
+export const sortTasks = (taskA: Task, taskB: Task) => {
+  const orderA = taskA.displayOrder || Number.MAX_VALUE;
+  const orderB = taskB.displayOrder || Number.MAX_VALUE;
+  if (orderA > orderB) {
+    return 1;
+  } else if (orderA < orderB) {
+    return -1;
+  } else {
+    return 0;
+  }
+};

src/types/public-types.ts

@@ -1,4 +1,5 @@
 export enum ViewMode {
+  Hour = "Hour",
   QuarterDay = "Quarter Day",
   HalfDay = "Half Day",
   Day = "Day",
@@ -27,6 +28,7 @@ export interface Task {
   project?: string;
   dependencies?: string[];
   hideChildren?: boolean;
+  displayOrder?: number;
 }
 
 export interface EventOption {
@@ -68,6 +70,7 @@ export interface EventOption {
 
 export interface DisplayOption {
   viewMode?: ViewMode;
+  viewDate?: Date;
   /**
    * Specifies the month name language. Able formats: ISO 639-2, Java Locale
    */