[charts] Implement Gantt Chart

joserodolfofreitas commented 1 year ago

Summary 💡

Gantt Chart implementation

Benchmarks

Public, read only: https://mui-org.notion.site/Gantt-Chart-component-e0014e4a55ae44fe901d575b1886e78e Internal, write & read: https://www.notion.so/mui-org/Gantt-Chart-component-e0014e4a55ae44fe901d575b1886e78e

Requests

https://mui.zendesk.com/agent/tickets/20549 - https://www.notion.so/mui-org/cfce9cf916cf49adb1be9109eb51d216

MUI X Gantt chart

https://mui.com/x/react-charts/gantt/

flaviendelangle commented 1 year ago

@joserodolfofreitas would you agree to link it in the charts doc ?

joserodolfofreitas commented 1 year ago

Sure thing, @flaviendelangle!

flaviendelangle commented 1 year ago

Done in #8739

Onfire7 commented 1 year ago

I really need a Gantt chart that either has some table like features, or ideally, integrates into a table. It would be really cool if we could have a special table column that has sub columns for days and displays the as a Gantt chart. This way, we retain the ability to interact with the data in a table (Displaying important columns, editing, filtering, etc.)

flaviendelangle commented 1 year ago

Hi,

We don't have plan to create this component in the coming months. We are mainly focusing on the basic charts for now.

BritishGit commented 1 year ago

Appreciate the content being provided and look forward to when a Gannt chart becomes available.

hdngr commented 1 year ago

Looking forward to this!

alexfauquette commented 1 year ago

Thanks for your interest. Could you provide some information about what you are expecting from this component?

What would be your use case
Which feature do you hardly need?
What issue you've seen on another library would be a deal break from using it?

marcohaferkamp commented 1 year ago

Really looking forward to it. Here are some ideas / use cases / current requirements in our project:

Sticky first column & header
Show different time resolutions in the header (e.g. month, calendar week and day), something like this:
Allow different time resolutions (e.g. view on daily or weekly basis)
Performance for a large time range (e.g. 5 years)
Possibility to scroll to given date
Custom rendering of items
Tooltip on hover for items
Tooltip on hover for header-cells (e.g. show all data of a day)
Possibilty to store current scroll position

Our hardest need would not be the large interactivity (maybe tooltips would be nice), but rather the display part - basically just show data. One of the biggest problems we currently have is the performance .

alexfauquette commented 1 year ago

Thanks for all those insights @marcohaferkamp

One of the biggest problems we currently have is the performance

Does your current solution support virtualization?

marcohaferkamp commented 1 year ago

We have built a custom solution on our own, and no it's not implemented.

salehsed commented 10 months ago

+1

itopaloglu83 commented 10 months ago

Resource timeline view would be great feature with the Gantt chart as well.

alexfauquette commented 9 months ago

@itopaloglu83 Would you have examples of nice resource timelines?

itopaloglu83 commented 9 months ago

Of course. Here's a quick list from simplest to more featured. And my rumblings below that.

https://fullcalendar.io/docs/timeline-view

https://www.airtable.com/platform/views

https://demo.mobiscroll.com/javascript/timeline/month-view

Event connections and dependencies. https://bryntum.com/products/scheduler/

Next one is my favorite because it allows users to manage complex relationships between events. https://bryntum.com/products/schedulerpro/ (includes a scheduling engine)

Rumblings: Gantt charts are very useful but when there are many projects involved then the main issue becomes the resource availability. Especially considering the fact that each task may require numerous resources. There are many great resource management solutions out there like ERPs etc. but they are all lacking a good user interface.

abdelrahmanes commented 8 months ago

looking forward to this chart component and I hope it supports direction RTL and to be responsive

alexfauquette commented 8 months ago

I hope it supports direction RTL

Hi @abdelrahmanes do you have some specific RTL modification of a gantt in mind? I assume the past/future direction is inverted. But other than that are there some tricky aspect we should be aware of?

abdelrahmanes commented 8 months ago

@alexfauquette Great, that's what I meant, that the axis labels and data bars to be inverted

To be more clear, I was using apex timeline chart and I used the inverted boolean property for the date labels to be inverted but it wasn't working

(Jan, Feb, March) should be (يناير، فبراير، مارس) But it was ( مارس، فبراير،يناير)

I hope I was clear enough

alexfauquette commented 8 months ago

Yes, make totally sens :+1:

MustBuildAdmin commented 8 months ago

Hi looking forward for this Gantt

I have some use cases for this Gantt

calculating the critical path
calculating the free and total float values for a task or subtask

https://docs.dhtmlx.com/gantt/samples/08_api/17_show_task_slack.html https://docs.dhtmlx.com/gantt/desktop__critical_path.html#gettingfreeandtotalslack https://snippet.dhtmlx.com/5/eb05a1f90?_ga=2.196660396.1883656908.1707371675-595900954.1707225801&_gl=1*zy3qdd*_ga*NTk1OTAwOTU0LjE3MDcyMjU4MDE.*_ga_N87XPB4GSG*MTcwNzM3MTY3NS4yLjEuMTcwNzM3MTczMi4zLjAuMA..

sjacobi109 commented 6 months ago

Hi Guys, can't wait for this component! Drag and drop functionality for each task on the timeline, for both along the x and y axes, would be awesome. This would greatly improve user experience and flexibility within the chart.

HimanshuBari21 commented 6 months ago

Yes, make totally sens 👍

msavastio commented 4 months ago

I'm looking forward to this one - I currently use the Bryntum Scheduler and I "dislike it strongly" is how I will put it. My use case is basically render the Outlook calendar week view for employee time sheets where the horizontal axis is days of the week and the vertical axis is hours. Bryntum does let me do this in a kind of hacky way, so I will give them that. I have a feeling this kind of use case would be achieved in a more intuitive way using a component from you guys!

alexfauquette commented 4 months ago

@msavastio That does not look like a Gantt chart usage. It's more a Scheduler edge case

halsee commented 4 months ago

Really looking forward to this feature! My company builds software for construction, and gantt charts are used heavily throughout the industry.

goatrenterguy commented 3 months ago

Looking forward to this component. We currently use DHTMLX gantt and we are constantly fighting it. The primary reason we went with DHTMLX Gantt was the performance and the second is it lists as supporting a ton of features. As we continue to use it we realized all of the implementations are half thought out. Designing this chart to handle just the UI and input from the user would allow for a lot more flexibility when implementing it into a project.

JShawnLooney commented 2 months ago

GanttPro has a nice interface for reference as well. Worth taking a look.
Traditional Gantt tasks have a start & end date, but imply continual work during that time period. It would also be nice to support a task type that is treated like a "window for completion" with "Earliest" & "Latest" dates in addition to a "Preferred" completion date. Or, have this feature for milestones and display it something like a tolerance measurement.

gsbelarus commented 2 months ago

+1

benjaminfortunato commented 1 month ago

+1

mui / mui-x