Adds GanttChart component.

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

30 stars 22 forks source link

Adds GanttChart component. #24

Closed vijayjangid closed 6 months ago

vijayjangid commented 7 months ago

Pending items:

Understand the best way to author the parent/child relationship and dependencies between tasks.
Theme colors to be used for tasks (currently using the default palette coming from gantt-chart-react library.

Known limitations:

The task list (first three columns in table - Name, start and end date) are fixed. It can be just toggled but cannot be altered for a display or switching to another prop.
Although there are tabstops on tasks but click is not triggering.
In general, the library seems to be offering very minimal support for extension (in terms of UI). Even the css classes are generated using StyledComponents so overriding that is difficult as well.

@ricmars let's collaborate on this to understand if this fits our MVP.

vijayjangid commented 6 months ago

Updated the Docs with relevant screenshots from App. This PR is now good to start review. @ricmars

ricmars commented 6 months ago

changes looks good - had a couple of issues

drag-drop is not persisted on the client -the task goes back to the previous position in storybook
the ID in the card should use a link with the preview button instead of the outside link (previewable) -why have showDetailsColumns setting if there is a toggle on the UI already? Is it more the 'Default' setting for the show/hide column (similar to defaultViewMode) or is it more to hide this functionality on the UI?
the dates are not localized and always show in English - that would be a problem

There are challenges with the 3rd party lib around truncation of the table and the tooltip display on top of the ui instead of being below the mouse which makes it hard to know what has been selected

Otherwise look very great!

vijayjangid commented 6 months ago

Thanks for the review @ricmars

Drag drop persist - on update of an item, I am reloading the details for entire chart to sort them accoringly. May be for storybook we can store it in WebStorage to mock that behavior.
ID as link button: Sure, that can be fixed. In real product, that's anyway come from Details view.
showDetailsColumns is default selection only. Let me know if you want me to remove it.
Dates are a real challenge as the library handles the rendering. We can only rely on Details view to show localized information.
True, I tried my best to facelift it while fixing the UX challenges. But it offers very little control to handle rendering.