search

pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 23 forks source link

Gantt chart component #15

Closed ricmars closed 8 months ago

ricmars commented 8 months ago

The goal is to represent a list of data objects in a Gantt chart along with there dependencies. The objects could be cases or data objects.

vijayjangid commented 8 months ago

I am looking into this, exploring open source libraries.

vijayjangid commented 8 months ago

These some of the open source libraries I found in a quick scan. Will do a comparative study and share Pros/cons. At first glance, none of these is keyboard accessible. Only a few supports dependencies in Gantt chart.

  1. https://www.npmjs.com/package/vis-react
  2. https://github.com/neuronetio/gantt-schedule-timeline-calendar
  3. https://github.com/ANovokmet/svelte-gantt
  4. https://github.com/TheTechCompany/react-timeline-gantt
  5. https://github.com/medesd/react-gantt
  6. https://github.com/MaTeMaTuK/gantt-task-react
vijayjangid commented 8 months ago

Here is the comparision of different libraries shared above. These are sorted in the order of best to worst fit for our requirement.

Rank Library Demo Framework Typescript Keyboard navigation Comment
🥇 gantt-task-react Gantt schedule React ✅ 🔲 (partial support) Tasks are keyboard focusable but connectors are not. UX is good. The demo doesn't show example with multiple tasks with each row with dependency. Not sure if that's a usecase.
🥈 svelte-gantt Gantt svelte (can be used in React code) ✅ ❌ Supports Gantt with dependencies. Also supports multiple tasks within each row and drag/drop in both direction
🥉 react-timeline-gantt Timeline Gantt React ✅ ❌ UX is not very intuitive. Depencies feature is not consistantly working
- react-gantt Gantt React ✅ ❌ Very basic, doesn't have dependencies feature support
- vis-react Timeline JS ❌ ❌ This doesn't have a Gantt chart componenet directly. Timeline component could be used with some tweaks but UX will be a challenge. Not updated since last 4 years
- neuronetio-gantt Gantt schedule React ✅ ❌ PAID library - cannot use
- Bryntum Bryntum gantt React ✅ ✅ PAID library - cannot use

In conclusion, the top 2 choices are good options. Based on our usecase we can choose which one to go for. I have kept the first one on top due to it's partial accessibility support. CC @ricmars

ricmars commented 8 months ago

great analysis and details - gantt-task-react looks a great choice