Gnatt Chart Custom Date Range

ldsands commented 3 years ago

Is your feature request related to a problem? Please describe. This chart is nearly perfect for creating timelines for more historical projects as well.

Describe the solution you'd like I would like to see a setting say dateRange :2000-01-01, 2010-12-12 and the range on the graph adjusts accordingly

Describe alternatives you've considered I'm just using a flowchart for now but it doesn't have the time neatly spaced across a timeline. I suppose that excel has something that would probably work but who want to use excel?

Additional context This has been requested before here.

Thanks for your work on this I've only been using mermaid for a short time but I've really been enjoying it.

Electro-resonance commented 1 year ago

I agree with the above request. I'm trying to migrate some Gantt chart plots which display perfectly in Plotly to use Mermaid within Markdown, but the limited display options mean that I end up with plots that are unusable due to the vertical height and horizontal settings not being adjustable.

The issues found so far (mostly linked to rendering) are:

Date ranges can not be set. The chart date range may extend for months, and the display size may need to be restricted to show a date range of interest.
The examples with a few bars display ok, but having more task bars results in unreadbale plots.
The vertical height is too small. Adding lots of task bars over several months date range results in a chart too small to be useful.
The date range can not be scaled.
Difficult to create a Gantt chart which is readable. The Plotly examples should be easy to replicate using Markdown and still render as visible plots. The examples for Plotly are here as a comparison: https://plotly.com/python/gantt/

Here is example Mermaid Gantt chart created using markdown from within this github comment which only has six tasks and should ideally be readable even at this scale:

gantt
    dateFormat  YYYY-MM-DD
    title Example Gantt Chart
    excludes    weekends
    section Developer 4
    TASK-100001 Example task 1:a, 2022-11-14,2022-11-24
    section Developer 3
    TASK--100002 Example project task 2:a, 2022-11-14,2022-11-17
    section Developer 1
    TASK--100003 Example task 2:a, 2022-11-24,2022-11-30
    section Developer 1
    TASK--100004 Example project task 3:a, 2022-11-14,2022-11-16
    section Developer 2
    TASK--100005 Example task 4:a, 2022-11-14,2022-11-16
    section Developer 2
    TASK--100006 Example task 5:a, 2022-11-16,2022-12-14
    todayMarker stroke-width:5px,stroke:#00f,opacity:0.5

Here is the markdown for the above:

gantt
    dateFormat  YYYY-MM-DD
    title Example Gantt Chart
    excludes    weekends
    section Developer 4
    TASK-100001 Example task 1:a, 2022-11-14,2022-11-24
    section Developer 3
    TASK--100002 Example project task 2:a, 2022-11-14,2022-11-17
    section Developer 1
    TASK--100003 Example task 2:a, 2022-11-24,2022-11-30
    section Developer 1
    TASK--100004 Example project task 3:a, 2022-11-14,2022-11-16
    section Developer 2
    TASK--100005 Example task 4:a, 2022-11-14,2022-11-16
    section Developer 2
    TASK--100006 Example task 5:a, 2022-11-16,2022-12-14
    todayMarker stroke-width:5px,stroke:#00f,opacity:0.5

donovankeith commented 1 year ago

I'd also be curious to setup a view that allows for a delta from Today.

So something like...

gantt
    dateFormat YYYY-MM-DD
    dateRange today - 7d, today + 30d

Would show you the trailing week and the next 30 days. Useful for realtime project work.

Here's an overview for a course I'm teaching

It would be helpful to only show the preceding week and the next week at the top of my lecture slides for a given lecture.

mfwgenerics commented 1 year ago

+1

My current workaround for achieving a fixed date range is:

Prior to generation, manually trim + filter task dates according to the desired date range
Create a "Range" section at the bottom of the chart with a task with id "range-marker" spanning the date range
Remove #range-marker-text and #range-marker elements from the generated svg

This workaround isn't ideal but it's acceptable for my use case. Built-in support for a "dateRange" directive would be amazing!

OldhamMade commented 4 months ago

Agreed, it would be great to have this feature.

My own use-case: planning long-running projects across multiple years, I'd like to have different views on a single dataset:

dateRange today, today + 12 months so I can see a forecast
dateRange 2024-01-01, 2024-12-31 so I can see only this year
dateRange 2024-01-01, 2024-03-31 so I can see only "this quarter"
dateRange 2025-01-01, 2025-12-31 so I can see only next year year

gaardhus commented 1 week ago

I needed this feature today I wanted to display the end of the chart which should exceed the date of the last element

mermaid-js / mermaid

Gnatt Chart Custom Date Range #1530