matematuk / gantt-task-react Goto Github PK
View Code? Open in Web Editor NEWGantt chart for React with Typescript
License: MIT License
Gantt chart for React with Typescript
License: MIT License
Hello,
Is there anyway to set which task(s) are selected?
I have a separate task list component in my app, and when clicking an event over there, I'd like to highlight (and, ideally scroll to) the event within Gantt
. It was simple to use onSelect
to go the other direction, but I'd really like to be able to complete the circuit. Hoping there's something simple I'm just missing. Thanks!
On Hourly view mode, Date mentioned in header is one day more than the date mentioned on task date.
I am using it in a very large scale react project and the stake holders want to see planned duration and planned end date as well along with name , from and to
Is it possible to add custom columns and make them editable?
Is there a way to hide TaskListTable??
Hello ! Nice tool 👍
Is it possible to add ordering by drag and drop system ?
I can work on this feature if it pleases 😄
Thanks !
For projects that run over multiple years there is no way of viewing the information without large amount of scrolling
Is it possible to add new tasks dynamically or to delete tasks. Also, would be good if there is support to have scheduling tasks by priority from UI itself.
Hello nice library, thanks for your work 👍
When I tried integrating it as per README
, I get the following error
Attempted import error: 'Task' is not exported from 'gantt-task-react'.
This is how my import looks like
import {
Gantt,
Task,
EventOption,
StylingOption,
ViewMode,
DisplayOption,
} from "gantt-task-react";
import "gantt-task-react/dist/index.css";
Am I missing something?
Hello @MaTeMaTuK
After running the npm run test
and failing on the getWeekNumberISO8601 function
I added code to compare the output of the function with 2 other methods of calculation of week number. Using the other methods both returned the same week number which returned the expected value in the test
export const getWeekNumberISO8601 = (date: Date) => {
const tmpDate = new Date(date.valueOf());
const dayNumber = (tmpDate.getDay() + 6) % 7;
tmpDate.setDate(tmpDate.getDate() - dayNumber + 3);
const firstThursday = tmpDate.valueOf();
tmpDate.setMonth(0, 1);
if (tmpDate.getDay() !== 4) {
tmpDate.setMonth(0, 1 + ((4 - tmpDate.getDay() + 7) % 7));
}
const weekNumber = (
1 + Math.ceil((firstThursday - tmpDate.valueOf()) / 604800000)
).toString();
// https://weeknumber.com/how-to/javascript
var date2 = new Date(date.valueOf());
date2.setHours(0, 0, 0, 0);
// Thursday in current week decides the year.
date2.setDate(date2.getDate() + 3 - (date2.getDay() + 6) % 7);
// January 4 is always in week 1.
var week1 = new Date(date2.getFullYear(), 0, 4);
// Adjust to Thursday in week 1 and count number of weeks from date to week1.
const weekNumber2 = (1 + Math.round(((date2.getTime() - week1.getTime()) / 86400000
- 3 + (week1.getDay() + 6) % 7) / 7)).toString();
// https://www.epoch-calendar.com/support/getting_iso_week.html
var date3 = new Date(date.valueOf());
const dowOffset = 1; //default to day starting monday
var newYear = new Date(date3.getFullYear(),0,1);
var day = newYear.getDay() - dowOffset; //the day of week the year begins on
day = (day >= 0 ? day : day + 7);
var daynum = Math.floor((date3.getTime() - newYear.getTime() -
(date3.getTimezoneOffset()-newYear.getTimezoneOffset())*60000)/86400000) + 1;
var weekNumber3;
//if the year starts before the middle of a week
if(day < 4) {
weekNumber3 = Math.floor((daynum+day-1)/7) + 1;
if(weekNumber3 > 52) {
const nYear = new Date(date3.getFullYear() + 1,0,1);
let nday = nYear.getDay() - dowOffset;
nday = nday >= 0 ? nday : nday + 7;
/*if the next year starts before the middle of
the week, it is week #1 of that year*/
weekNumber3 = nday < 4 ? 1 : 53;
}
}
else {
weekNumber3 = Math.floor((daynum+day-1)/7);
}
console.log(weekNumber,weekNumber2,weekNumber3.toString());
if (weekNumber.length === 1) {
return `0${weekNumber}`;
} else {
return weekNumber;
}
};
Result from example app console.log after changing to Week format
23 22 22
22 21 21
21 20 20
20 19 19
19 18 18
18 17 17
17 16 16
16 15 15
15 14 14
13 13 13
Hi, I want to display the name of the day, is it possible?
The issue is when we collapse the project and the subProject is in greater amount then it crashes
also when we add the subtask of our previos Project then it will not show below to the related project
Should install all deps inside of main directory before try to do it in example
How to extend Task and It's Tooltip with my own custom components.
Seems like the "project" parent task feature doesn't work?
I have tried the following:
project task:
{
start: new Date(2022, 0, 3),
end: new Date(2022, 0, 30),
name: Phase 1",
id: "big",
type: "project",
progress: 100,
dependencies: [],
styles: { progressColor: "blue", progressSelectedColor: "#ff9e0d", barCornerRadius: 5 },
hideChildren: true,
},
child task:
{
start: new Date(2022, 0, 3),
end: new Date(2022, 0, 17),
name: "Task 1",
id: 1,
type: "task",
progress: 100,
dependencies: [],
styles: { progressColor: "blue", progressSelectedColor: "#ff9e0d", barCornerRadius: 5 },
project: "big",
},
but the Gantt isn't recognizing that Project Name: phase 1, Id: big has child Name: Task 1, if i have set this up wrong please let me know but as far as i can tell it's just not working as it should based on what i have seen in the documentation / example
It would be great, If we can add interactivity for arrows too. Drag and drop an arrow to modify dependancies or create new dependancy by dragging from a handle.
This project looks great!
Is it possible to change progress for tasks of type "project"?
I just started testing your Gantt solution. I like the professional, slick look.
A first thing I tried is start date = end date. In this case the task doesn't get displayed, see example with "developing":
I would suggest to add a special type called "Milestone" for such tasks. It is usually represented as a diamond shape in Gantts.
While setting the basic functionality, I tried sending the ViewMode value dynamically and sent wrong values to it and it made the whole website unresponsive and crashed.
Basically sending the wrong view mode is crashing the whole webpage instead of breaking or throwing an error.
HI, this is a very promising library, so kudos!
I want to know if its possible to show an hourly view mode? Say from 8 am to 10 pm?
Thanks
I have been using the library in a project using the component options and I have noticed that all those like the TaskList, HeaderList and the ToolTip are re-rendered on every mouse movement on the component, is there any way to avoid this, or is it an issue of the component?
As for now hierarchies looks like
It would be nice to have a more vanilla relationship between elements
First solution:
Infinite parent link :
Second solution
Custom type with infinite parent link :
Is there a workaround or do the code need to be modified ? For the later I could contribute. Thanks
Hi @MaTeMaTuK @Janlaywss @VikariiCGI @lisaavikarii ,
Thank you for the contribution.
Is there any way where I can associate an icon with each row item.
so basically I want to prefix the icon where image tag is present.
Idea
Research
Discussion.
Developing.
etc.
Thanks in advance.
Hi @MaTeMaTuK
I am facing this error while installing this library. This is happening while installing view-switcher
cc @Janlaywss @VikariiCGI @lisaavikarii
TypeScript error in D:/TraxiemCB/traxiem/traxiem-ui/src/components/Gantt/view-switcher.tsx(9,34)
:
Namespace 'React' has no exported member 'SFC'. TS2694
```
7 | onViewModeChange: (viewMode: ViewMode) => void;
8 | };
> 9 | export const ViewSwitcher: React.SFC<ViewSwitcherProps> = ({
| ^
10 | onViewModeChange,
11 | onViewListChange,
12 | isChecked,`
I just want display of Month From December to 12, how can i do that?
When setting a height limit the chart loses the ability to scroll horizontally. You can view the issue on the demo page as you will not be able to scroll to 'Party Time'.
Hello, thanks for creating this awesome library.
Is this library meant to work with touch events and mobile devices like the iPad?
When I try to scroll the gantt chart on my iPad, nothing happens. I've tried to scroll on both Safari and mobile Chrome with the same results.
Any help would be appreciated!
Is it possible to custom TaskListHeader text (change Name, From, To
to another text) ?
And How to custom date format ? (I want to use DD/MM
format).
Thanks.
Hi @MaTeMaTuK , @Janlaywss , @VikariiCGI , @lisaavikarii ,
I am getting issue with rendering calendar header.
I am using below versions
"react": "^16.14.0",
"react-dom": "^16.14.0",
"@types/react": "^18.0.14",
"@types/react-dom": "^18.0.5",
An error is thrown when viewmode is set to month and the end date of a task is far in the future.
Uncaught TypeError: Cannot read properties of undefined (reading 'getTime') at taskXCoordinate (bar-helper.ts:274:1) at convertToBar (bar-helper.ts:172:1) at convertToBarTask (bar-helper.ts:128:1) at bar-helper.ts:31:1 at Array.map (<anonymous>) at convertToBarTasks (bar-helper.ts:30:1) at gantt.tsx:117:1 at invokePassiveEffectCreate (react-dom.development.js:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
Steps to reproduce:
{ start: new Date(2021, 2, 1), end: new Date(2035, 2, 1), name: "Party Time", id: "Task 9", progress: 0, isDisabled: true, type: "task", },
Cause:
In /src/bar-helper.ts line 25, when calculating the dateDelta from the dates array, we're assuming that the difference between each subsequent entry in the array is the same millisecond time interval. This is not the case when view mode is set to month. Some months have more or less days. This causes problems when using this dateDelta in bar-helper.ts on line 272 to find the index of a date in the date array. It causes the index to be out of range of the dates array, hence the error above.
We would like to have additional view modes for tasks with longer durations. This is higher priority for us and we would like to know how we can move this up on the priority list for you.
Happy to take this conversation offline, let me know what works for you!
Hello there,
It's there an option to show the year in header table above month row?
Hi,
if i have a lot of date with startDate for example 1-1-2018, page with this gant after loading shows the start of the chart from that point on and I have to scroll to 2022.
How to display a graph, e.g. with the current month displayed after the page has been loaded?
Hi @MaTeMaTuK
Is this possible in the current version of component? Or to achieve this effect a library must be overridden?
If I create a long gantt table (it does not happen with short ones under my experience), whenever I move fast enough the horizontal scroll, the scroll bugs and goes straight and back for a few seconds and it stops.
If I use the keys, then that bug stops happening for that instance, but whenever I move the scroll back, it happens.
Hi, I might be using it incorrectly but I have put onExpanderClick in as a props for the Gantt component and now when I manually change a "project" hideChildren property from true to false and back it does hide/show the child task. however when I click on the actual button on the Gantt (triangle) i get the following error:
Hi,
This is a feature request. OR if anyone already has already implemented this than please help.
What I want to achieve:
Grouping of the tasks based on the project. Means, I want to have collapse and expanded view of tasks based on the projects.
If this package already have that functionality then please let me know. If not please suggest an approach.
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.