30分、15分、1分単位でガンチャを表示する機能を追加

README.md

@@ -86,7 +86,7 @@ npm start
 
 | Parameter Name | Type    | Description                                                                                                 |
 | :------------- | :------ | :---------------------------------------------------------------------------------------------------------- |
-| viewMode       | enum    | Specifies the time scale. Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |
+| viewMode       | enum    | Specifies the time scale. Minute, Quarter Minute, Half Minute,  Hour, Quarter Day, Half Day, Day, Week(ISO-8601, 1st day is Monday), Month, QuarterYear, Year. |
 | 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.                                    |

example/src/App.tsx

@@ -6,16 +6,16 @@ import "gantt-task-react/dist/index.css";
 
 // Init
 const App = () => {
-  const [view, setView] = React.useState<ViewMode>(ViewMode.Day);
+  const [view, setView] = React.useState<ViewMode>(ViewMode.Hour);
   const [tasks, setTasks] = React.useState<Task[]>(initTasks());
   const [isChecked, setIsChecked] = React.useState(true);
-  let columnWidth = 65;
-  if (view === ViewMode.Year) {
-    columnWidth = 350;
-  } else if (view === ViewMode.Month) {
-    columnWidth = 300;
-  } else if (view === ViewMode.Week) {
-    columnWidth = 250;
+  let columnWidth = 50;
+  if (view === ViewMode.Hour) {
+    columnWidth = 200;
+  } else if (view === ViewMode.HalfHour) {
+    columnWidth = 150;
+  } else if (view === ViewMode.QuarterHour) {
+    columnWidth = 100;
   }
 
   const handleTaskChange = (task: Task) => {
@@ -88,7 +88,7 @@ const App = () => {
         listCellWidth={isChecked ? "155px" : ""}
         columnWidth={columnWidth}
       />
-      <h3>Gantt With Limited Height</h3>
+      {/* <h3>Gantt With Limited Height</h3>
       <Gantt
         tasks={tasks}
         viewMode={view}
@@ -102,7 +102,7 @@ const App = () => {
         listCellWidth={isChecked ? "155px" : ""}
         ganttHeight={300}
         columnWidth={columnWidth}
-      />
+      /> */}
     </div>
   );
 };

example/src/components/view-switcher.tsx

@@ -15,48 +15,27 @@ export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
     <div className="ViewContainer">
       <button
         className="Button"
-        onClick={() => onViewModeChange(ViewMode.Hour)}
+        onClick={() => onViewModeChange(ViewMode.Minute)}
       >
-        Hour
+        Minute
       </button>
       <button
         className="Button"
-        onClick={() => onViewModeChange(ViewMode.QuarterDay)}
+        onClick={() => onViewModeChange(ViewMode.QuarterHour)}
       >
-        Quarter of Day
+        QuarterHour
       </button>
       <button
         className="Button"
-        onClick={() => onViewModeChange(ViewMode.HalfDay)}
+        onClick={() => onViewModeChange(ViewMode.HalfHour)}
       >
-        Half of Day
-      </button>
-      <button className="Button" onClick={() => onViewModeChange(ViewMode.Day)}>
-        Day
+        HalfHour
       </button>
       <button
         className="Button"
-        onClick={() => onViewModeChange(ViewMode.Week)}
-      >
-        Week
-      </button>
-      <button
-        className="Button"
-        onClick={() => onViewModeChange(ViewMode.Month)}
-      >
-        Month
-      </button>
-      <button
-        className="Button"
-        onClick={() => onViewModeChange(ViewMode.Year)}
-      >
-        Year
-      </button>
-      <button
-        className="Button"
-        onClick={() => onViewModeChange(ViewMode.QuarterYear)}
+        onClick={() => onViewModeChange(ViewMode.Hour)}
       >
-        Year
+        Hour
       </button>
       <div className="Switch">
         <label className="Switch_Toggle">

example/src/helper.tsx

@@ -4,95 +4,42 @@ export function initTasks() {
   const currentDate = new Date();
   const tasks: Task[] = [
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1, 0, 0, 0),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1, 0, 0, 10),
+      name: "Test Project",
+      id: "TestProjectSample",
+      progress: 10,
+      type: "project",                                                                                                                                                              
+      hideChildren: false,
+      displayOrder: 1,
+    },
+    {
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1, 10, 0, 0),
+      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1, 10, 10, 0),
       name: "Some Project",
       id: "ProjectSample",
-      progress: 25,
+      progress: 110,
       type: "project",
       hideChildren: false,
-      displayOrder: 1,
+      displayOrder: 2,
     },
     {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
+      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1, 11, 0, 0),
       end: new Date(
         currentDate.getFullYear(),
         currentDate.getMonth(),
-        2,
+        1,
         12,
-        28
+        0,
+        0
       ),
       name: "Idea",
       id: "Task 0",
-      progress: 45,
-      type: "task",
-      project: "ProjectSample",
-      displayOrder: 2,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4, 0, 0),
-      name: "Research",
-      id: "Task 1",
-      progress: 25,
-      dependencies: ["Task 0"],
+      progress: 60,
       type: "task",
       project: "ProjectSample",
       displayOrder: 3,
     },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8, 0, 0),
-      name: "Discussion with team",
-      id: "Task 2",
-      progress: 10,
-      dependencies: ["Task 1"],
-      type: "task",
-      project: "ProjectSample",
-      displayOrder: 4,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 9, 0, 0),
-      name: "Developing",
-      id: "Task 3",
-      progress: 2,
-      dependencies: ["Task 2"],
-      type: "task",
-      project: "ProjectSample",
-      displayOrder: 5,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 10),
-      name: "Review",
-      id: "Task 4",
-      type: "task",
-      progress: 70,
-      dependencies: ["Task 2"],
-      project: "ProjectSample",
-      displayOrder: 6,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
-      name: "Release",
-      id: "Task 6",
-      progress: currentDate.getMonth(),
-      type: "milestone",
-      dependencies: ["Task 4"],
-      project: "ProjectSample",
-      displayOrder: 7,
-    },
-    {
-      start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),
-      end: new Date(currentDate.getFullYear(), currentDate.getMonth(), 19),
-      name: "Party Time",
-      id: "Task 9",
-      progress: 0,
-      isDisabled: true,
-      type: "task",
-    },
   ];
   return tasks;
 }

src/components/calendar/calendar.tsx

@@ -355,6 +355,92 @@ export const Calendar: React.FC<CalendarProps> = ({
     return [topValues, bottomValues];
   };
 
+  const getCalendarValuesForPartOfHour = () => {
+    const topValues: ReactChild[] = [];
+    const bottomValues: ReactChild[] = [];
+    const ticks = viewMode === ViewMode.HalfHour ? 2 : 4;
+    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, {
+        minute: "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.getHours() !== dates[i - 1].getHours()) {
+        const topValue = `${date.getHours()}:00`;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + date.getFullYear()}
+            value={topValue}
+            x1Line={columnWidth * i + ticks * columnWidth}
+            y1Line={0}
+            y2Line={topDefaultHeight}
+            xText={columnWidth * i + ticks * columnWidth * 0.5}
+            yText={topDefaultHeight * 0.9}
+          />
+        );
+      }
+    }
+
+    return [topValues, bottomValues];
+  }
+
+  const getCalendarValuesForMinute = () => {
+    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, {
+        minute: "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.getHours() !== dates[i - 1].getHours()) {
+        const displayDate = dates[i - 1];
+        const topValue = `${displayDate.getHours()}:00`;
+        const topPosition = (date.getMinutes() - 60) / 2;
+        topValues.push(
+          <TopPartOfCalendar
+            key={topValue + displayDate.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) {
@@ -379,6 +465,14 @@ export const Calendar: React.FC<CalendarProps> = ({
       break;
     case ViewMode.Hour:
       [topValues, bottomValues] = getCalendarValuesForHour();
+      break;
+    case ViewMode.HalfHour:
+    case ViewMode.QuarterHour:
+      [topValues, bottomValues] = getCalendarValuesForPartOfHour();
+      break;
+    case ViewMode.Minute:
+      [topValues, bottomValues] = getCalendarValuesForMinute();
+      break;
   }
   return (
     <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>

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

@@ -36,29 +36,6 @@ export const TaskListHeaderDefault: React.FC<{
             marginTop: headerHeight * 0.2,
           }}
         />
-        <div
-          className={styles.ganttTable_HeaderItem}
-          style={{
-            minWidth: rowWidth,
-          }}
-        >
-          &nbsp;From
-        </div>
-        <div
-          className={styles.ganttTable_HeaderSeparator}
-          style={{
-            height: headerHeight * 0.5,
-            marginTop: headerHeight * 0.25,
-          }}
-        />
-        <div
-          className={styles.ganttTable_HeaderItem}
-          style={{
-            minWidth: rowWidth,
-          }}
-        >
-          &nbsp;To
-        </div>
       </div>
     </div>
   );