mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
71.84k stars 6.52k forks source link

Milestones in gantt charts do not have correct vertical positioning when followed by a task with an absolute start date #1651

Closed mchernosky closed 3 years ago

mchernosky commented 4 years ago

Describe the bug When creating a milestone followed by a task with an absolute start date, the milestone is moved down vertically by about 50% so that it overlaps the task.

To Reproduce Here are three different charts with different configurations:

  1. Using a task instead of a milestone. This is drawn correctly:
    gantt
        title 1. Task with Fixed Start Task After
        dateFormat  YYYY-MM-DD
        Development: development, 2020-07-20, 2w
        Dev Complete: dev_complete, after development, 1d
        Verification: verification, 2020-07-24, 3w
  2. The problem condition. The milestone is drawn overlapping the task below:
    gantt
        title 2. Milestone with Fixed Start Task After
        dateFormat  YYYY-MM-DD
        Development: development, 2020-07-20, 2w
        Dev Complete: milestone, dev_complete, after development, 1d
        Verification: verification, 2020-07-24, 3w
  3. If the task following the milestone uses a relative start date the milestone is drawn correctly:
    gantt
        title 3. Milestone with Relative Start Task After
        dateFormat  YYYY-MM-DD
        Development: development, 2020-07-20, 2w
        Dev Complete: milestone, dev_complete, after development, 1d
        Verification: verification, after development, 3w

    Expected behavior I would expect the milestone drawn in chart 2 above to be about 50% higher and not overlap the task below it.

Screenshots Here are the rendered charts: mermaid-milestones

Desktop (please complete the following information):

tmatthias29 commented 4 years ago

I have the same issue and @mchernosky 's scenario #3 is also not rendering correctly in Firefox. Milestone appears way towards the bottom of the page.

In Chrome, issue is the same as reported above.

CapitanPrimate commented 4 years ago

Same problem here.

I tried this:

gantt
dateFormat  DD/MM/YY
Task 1 :active, 09/04/18, 30/10/20
Milestone 1 :milestone, 29/09/20, 1d
Task 2 :active, 11/11/19, 19/10/20
Milestone 2 :milestone, 30/09/20, 1d
Task 3 :active, 18/02/19, 10/07/20
Milestone 3 :milestone, 01/10/20, 1d
Task 4 :active, 11/03/19, 04/08/20
Milestone 4 :milestone, 11/10/19, 1d

and got this: imagen

The milestone texts appear where they are supposed to, but the milestones themselves don't. Milestone 4 is supposed to appear closest to the bottom, but the earlier the date, the more it moves toward the upper left.

OS: macOS

I use mermaid-cli to generate the diagram.

Rutorai commented 3 years ago

Hello, I had the same issue. I submit a really simple pull request ##1911 . Hopefully it will be validated :-) Fix