Add capability for gantt diagrams

[knsv]

This is not intended for complete project planning but as a complement to a report it would be nice to be able to draw a gantt diagram.

Example of suggested syntax:

gantt
    dateFormat yyyy-mm-dd
    title Adding gantt diagram functionality to mermaid

    section Design
        Design jison grammar            :des1, 2014-01-01, 2014-01-04
        Create example text             :des2, 2014-01-01, 3d
        Bounce gantt example with users :des3, after des2, 5d

    section Implementation
        update build script             :2014-01-02,1h
        Implement parser and jison      :after des1, 2d
        Create tests for parser         :3d
        Create renderer                 :5d
        Create tests for renderer       :2d
        Add to mermaid core             :1d

    section Documentation
        Describe gantt syntax               :a1, 2014-01-01, 3d
        Add gantt diagram to demo page      :after a1  , 2h
        Add gantt to diagram to demo page   :after a1  , 2h

TRhis should render something like the example in the link:
http://codepen.io/anon/pen/azLvWR

[nickwynja]

👍 for this feature. I'd use it for high-level road mapping.

[afraxas]

👍

[postrednik]

[nickwynja]

Checked in on the development of this and really liking it so far. A couple pieces of unsolicited feedback after playing around with the tests so far:

• It would be nice to have a declaration to start the week on a Monday. For work stuff, being able to say that a sprint or phase starts on "the week of Feb 23rd" and have the chart line up to that would be nice. Currently the week indicators are on Sundays.
• Have a vertical line overlaid on the chart on today's date to show progress and place in flow

I really like this overall. I've never gotten deep into Gantt charts because they are so finicky but this is the perfect mix of ease and simplicity yet enough detail to be able to communicate timelines of projects. Very excited to be able to use this in my planning.

[knsv]

Thanks! Feedback is always welcome. Good idea with the todays date!

I agree that the different date formats for the x-axis needs to be handled somehow. Needs to depend on the the charts start and end date as well. I agree that week spans are probably the "norm" but in a very long timespan week lines would clutter it up and the opposite for shorter timespans. And locale as another aspect, for instance in Sweden we use week numbers.

[knsv]

Released functionality for this in 0.4.0

[nickwynja]

Works great! Thank you. I see in your examples that you're using a "w.01" format and see references in the code about changing the format but don't see documentation on how to customize the layout. Is that currently built in? Is the "week starting Monday" functionality currently supported?

I appreciate your work on this. It's going to make my life a lot easier.

[knsv]

The layout, if you mean the number of days per tick in the axis, are handled differently depending on the number of days in the diagram. If the range is between 7 and 60 days it uses the week mode with a one ticke per week on the Monday:

        if(daysInChart >7 && daysInChart<60){
            xAxis = xAxis.ticks(d3.time.monday.range);
        }

Other ranges uses the d3 timescale default handling of ticks. I hope that makes sense.

[nickwynja]

Ok, thanks. I'm seeing a mix of outputs even in some charts, like this one for example:

Is there a way to normalize this? I'm currently using the axisFormatter (below) you had in one of the test or examples but it's not clear to me whether this is necessary or how to alter it for my desired output.

        mermaid.ganttConfig = {
            ...
            axisFormatter: [
                // Within a day
                ["%I:%M", function (d) {
                    return d.getHours();
                }],
                // Monday a week
                ["w. %U", function (d) {
                    return d.getDay() == 1;
                }],
                // Day within a week (not monday)
                ["%a %d", function (d) {
                    return d.getDay() && d.getDate() != 1;
                }],
                // within a month
                ["%b %d", function (d) {
                    return d.getDate() != 1;
                }],
                // Month
                ["%m-%y", function (d) {
                    return d.getMonth();
                }]
            ]
        };

[knsv]

Maybe the axis needs to be exposed and configurable for specific settings as well as the actual format of the axis.

How would you want it to look? And what is your date range?

[nickwynja]

In the example I posted above, I have from 2015-01-22 to 2015-07-15. I would like the axis labels to have ticks every week and the label to be the Monday of each week. 03/09, 03/16, 03/23, etc.

I realize that would be ~25 week ticks in this case which seems like a lot but the only good way I can tell to show that "sprint 3 starts on the week of 03/23" for example. Not sure if that's getting too granular for your philosophy of "not intended for complete project planning."

[knsv]

Spawning this to a new issue.