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. | 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 1b2a0f5c4..0bfc82c47 100644 --- a/src/helpers/date-helper.ts +++ b/src/helpers/date-helper.ts @@ -133,9 +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, newStartDate.getHours() * -60, "minute"); + + newEndDate = startOfDate(newEndDate, "hour"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); + break; + case ViewMode.QuarterHour: + newStartDate = startOfDate(newStartDate, "hour"); + newStartDate = addToDate(newStartDate, newStartDate.getHours() * -60, "minute"); + + newEndDate = startOfDate(newEndDate, "hour"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); + break; + case ViewMode.Minute: + newStartDate = startOfDate(newStartDate, "minute"); + newStartDate = addToDate(newStartDate, newStartDate.getHours() * -60, "minute"); + + newEndDate = startOfDate(newEndDate, "hour"); + newEndDate = addToDate(newEndDate, (24 - newEndDate.getHours() === 0 ? 24 : newEndDate.getHours()) * 60, "minute"); break; } return [newStartDate, newEndDate]; @@ -174,6 +196,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",