From 06986c9d028b1afed3f7db576b94d1de7118a6b4 Mon Sep 17 00:00:00 2001 From: keisuke071411 Date: Sun, 28 Jul 2024 09:05:10 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=93=9D=20README=E3=82=92=E6=9B=B4?= =?UTF-8?q?=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9191d87ba..3a7d95d6d 100644 --- a/README.md +++ b/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. | From 2de62717f9f63a64929fa50307f051f492942cd0 Mon Sep 17 00:00:00 2001 From: keisuke071411 Date: Sun, 28 Jul 2024 09:05:53 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=2030=E5=88=86=E3=80=8115=E5=88=86?= =?UTF-8?q?=E3=80=811=E5=88=86=E5=88=BB=E3=81=BF=E3=81=A7=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E6=A9=9F=E8=83=BD=E3=82=92?= =?UTF-8?q?=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/calendar/calendar.tsx | 95 ++++++++++++++++++++++++++++ src/helpers/date-helper.ts | 27 ++++++++ src/types/public-types.ts | 3 + 3 files changed, 125 insertions(+) diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx index a5860db52..e87293f54 100644 --- a/src/components/calendar/calendar.tsx +++ b/src/components/calendar/calendar.tsx @@ -355,6 +355,93 @@ export const Calendar: React.FC = ({ 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( + + {bottomValue} + + ); + if (i !== 0 && date.getHours() !== dates[i - 1].getHours()) { + const displayDate = dates[i - 1]; + const topValue = `${displayDate.getHours()}:00`; + topValues.push( + + ); + } + } + + 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( + + {bottomValue} + + ); + 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( + + ); + } + } + return [topValues, bottomValues]; + }; + let topValues: ReactChild[] = []; let bottomValues: ReactChild[] = []; switch (dateSetup.viewMode) { @@ -379,6 +466,14 @@ export const Calendar: React.FC = ({ 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 ( diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts index 1b2a0f5c4..ca157194a 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -137,6 +137,24 @@ export const ganttDateRange = ( newEndDate = startOfDate(newEndDate, "day"); newEndDate = addToDate(newEndDate, 1, "day"); break; + case ViewMode.HalfHour: + newStartDate = startOfDate(newStartDate, "hour"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour"); + newEndDate = startOfDate(newEndDate, "hour"); + newEndDate = addToDate(newEndDate, 750, "minute"); + break; + case ViewMode.QuarterHour: + newStartDate = startOfDate(newStartDate, "hour"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour"); + newEndDate = startOfDate(newEndDate, "hour"); + newEndDate = addToDate(newEndDate, 780, "minute"); + break; + case ViewMode.Minute: + newStartDate = startOfDate(newStartDate, "minute"); + newStartDate = addToDate(newStartDate, -1 * preStepsCount, "minute"); + newEndDate = startOfDate(newEndDate, "hour"); + newEndDate = addToDate(newEndDate, 1, "hour"); + break; } return [newStartDate, newEndDate]; }; @@ -174,6 +192,15 @@ export const seedDates = ( case ViewMode.Hour: currentDate = addToDate(currentDate, 1, "hour"); break; + case ViewMode.HalfHour: + currentDate = addToDate(currentDate, 30, "minute"); + break; + case ViewMode.QuarterHour: + currentDate = addToDate(currentDate, 15, "minute"); + break; + case ViewMode.Minute: + currentDate = addToDate(currentDate, 1, "minute"); + break; } dates.push(currentDate); } diff --git a/src/types/public-types.ts b/src/types/public-types.ts index cc44ff17c..5a783af18 100644 --- a/src/types/public-types.ts +++ b/src/types/public-types.ts @@ -1,4 +1,7 @@ export enum ViewMode { + Minute = "Minute", + QuarterHour = "Quarter Hour", + HalfHour = "Half Hour", Hour = "Hour", QuarterDay = "Quarter Day", HalfDay = "Half Day", From d529f4aa27d91a6bcfa6e9b90f0a1bb5e98acbb9 Mon Sep 17 00:00:00 2001 From: keisuke071411 Date: Sun, 28 Jul 2024 09:09:47 +0900 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=85=20example=E3=81=A7=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E8=AA=BF=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/package-lock.json | 1 + example/src/App.tsx | 20 +++--- example/src/components/view-switcher.tsx | 37 +++------- example/src/helper.tsx | 91 +++++------------------- 4 files changed, 38 insertions(+), 111 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index d5c5e5470..6e684e19c 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -24,6 +24,7 @@ "devDependencies": {} }, "..": { + "name": "gantt-task-react", "version": "0.3.9", "license": "MIT", "devDependencies": { diff --git a/example/src/App.tsx b/example/src/App.tsx index c2ab602eb..349a0a207 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -6,16 +6,16 @@ import "gantt-task-react/dist/index.css"; // Init const App = () => { - const [view, setView] = React.useState(ViewMode.Day); + const [view, setView] = React.useState(ViewMode.Hour); const [tasks, setTasks] = React.useState(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} /> -

Gantt With Limited Height

+ {/*

Gantt With Limited Height

{ listCellWidth={isChecked ? "155px" : ""} ganttHeight={300} columnWidth={columnWidth} - /> + /> */} ); }; diff --git a/example/src/components/view-switcher.tsx b/example/src/components/view-switcher.tsx index 42f736016..dbf890cb9 100644 --- a/example/src/components/view-switcher.tsx +++ b/example/src/components/view-switcher.tsx @@ -15,48 +15,27 @@ export const ViewSwitcher: React.FC = ({
- - - -
); diff --git a/src/components/task-list/task-list-table.tsx b/src/components/task-list/task-list-table.tsx index b165f6002..4c96ed22e 100644 --- a/src/components/task-list/task-list-table.tsx +++ b/src/components/task-list/task-list-table.tsx @@ -1,25 +1,25 @@ -import React, { useMemo } from "react"; +import React from "react"; import styles from "./task-list-table.module.css"; import { Task } from "../../types/public-types"; -const localeDateStringCache = {}; -const toLocaleDateStringFactory = - (locale: string) => - (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => { - const key = date.toString(); - let lds = localeDateStringCache[key]; - if (!lds) { - lds = date.toLocaleDateString(locale, dateTimeOptions); - localeDateStringCache[key] = lds; - } - return lds; - }; -const dateTimeOptions: Intl.DateTimeFormatOptions = { - weekday: "short", - year: "numeric", - month: "long", - day: "numeric", -}; +// const localeDateStringCache = {}; +// const toLocaleDateStringFactory = +// (locale: string) => +// (date: Date, dateTimeOptions: Intl.DateTimeFormatOptions) => { +// const key = date.toString(); +// let lds = localeDateStringCache[key]; +// if (!lds) { +// lds = date.toLocaleDateString(locale, dateTimeOptions); +// localeDateStringCache[key] = lds; +// } +// return lds; +// }; +// const dateTimeOptions: Intl.DateTimeFormatOptions = { +// weekday: "short", +// year: "numeric", +// month: "long", +// day: "numeric", +// }; export const TaskListTableDefault: React.FC<{ rowHeight: number; @@ -37,13 +37,13 @@ export const TaskListTableDefault: React.FC<{ tasks, fontFamily, fontSize, - locale, + // locale, onExpanderClick, }) => { - const toLocaleDateString = useMemo( - () => toLocaleDateStringFactory(locale), - [locale] - ); + // const toLocaleDateString = useMemo( + // () => toLocaleDateStringFactory(locale), + // [locale] + // ); return (
{t.name}
-
 {toLocaleDateString(t.end, dateTimeOptions)} -
+ */} ); })} diff --git a/src/helpers/bar-helper.ts b/src/helpers/bar-helper.ts index ba5f987c9..a0834122e 100644 --- a/src/helpers/bar-helper.ts +++ b/src/helpers/bar-helper.ts @@ -247,7 +247,10 @@ const convertToMilestone = ( }; const taskXCoordinate = (xDate: Date, dates: Date[], columnWidth: number) => { - const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1; + let index = dates.findIndex(d => d.getTime() >= xDate.getTime()); + if (index !== 0) { + index -= 1; + } const remainderMillis = xDate.getTime() - dates[index].getTime(); const percentOfInterval = diff --git a/src/helpers/date-helper.ts b/src/helpers/date-helper.ts index ca157194a..0bfc82c47 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -133,27 +133,31 @@ export const ganttDateRange = ( break; case ViewMode.Hour: newStartDate = startOfDate(newStartDate, "hour"); - newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour"); + newStartDate = addToDate(newStartDate, newStartDate.getHours() * -60, "minute"); + newEndDate = startOfDate(newEndDate, "day"); - newEndDate = addToDate(newEndDate, 1, "day"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); break; case ViewMode.HalfHour: newStartDate = startOfDate(newStartDate, "hour"); - newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour"); + newStartDate = addToDate(newStartDate, newStartDate.getHours() * -60, "minute"); + newEndDate = startOfDate(newEndDate, "hour"); - newEndDate = addToDate(newEndDate, 750, "minute"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); break; case ViewMode.QuarterHour: newStartDate = startOfDate(newStartDate, "hour"); - newStartDate = addToDate(newStartDate, -1 * preStepsCount, "hour"); + newStartDate = addToDate(newStartDate, newStartDate.getHours() * -60, "minute"); + newEndDate = startOfDate(newEndDate, "hour"); - newEndDate = addToDate(newEndDate, 780, "minute"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); break; case ViewMode.Minute: newStartDate = startOfDate(newStartDate, "minute"); - newStartDate = addToDate(newStartDate, -1 * preStepsCount, "minute"); + newStartDate = addToDate(newStartDate, newStartDate.getHours() * -60, "minute"); + newEndDate = startOfDate(newEndDate, "hour"); - newEndDate = addToDate(newEndDate, 1, "hour"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); break; } return [newStartDate, newEndDate];