Clickable gantt tasks

[abzicht]

Adding click capabilities to gantt diagrams

The problem of lack of interaction in gantt diagrams has been previously mentioned in several issues:
issue #715, issue #540.
I recently came across the same problem when I wanted to add interactive gantt diagrams to a web-based project of mine. Therefore, I propose this solution to be added to the project.

Syntax

The syntax is inspired by the flowchart syntax for click events. Yet, it is not the same and, in my view, has some properties that exceed the capabilities of flowchart interactions.

So how does it work?

Have a look at this example:

gantt

  section Clickable
    Visit mermaidjs           :active, cl1, 2014-01-07,2014-01-10
    Calling a callback        :cl2, after cl1, 3d

    click cl1 href "https://mermaidjs.github.io/"
    click cl2 call ganttTestClick("test", test, test)

The processed gantt diagram looks like this:

By specifying ganttTestClick like so:

function ganttTestClick(a, b, c) {
  console.log("a:", a)
  console.log("b:", b)
  console.log("c:", c)
}

clicking on the second task would result in this console output:

a: test
b: test
c: test

And clicking on the first task would open the mermaid documentation (https://mermaidjs.github.io/).

Details

Click

click is a keyword that introduces interaction commands. Just as in flowcharts, it must be followed by a valid task-id.
By appending a href or call command to click, the corresponding action is attached to the task-id that is specified by click.

Href

This is different to the flowchart syntax but I think that href actually improves readability.
href is to be appended by a double quoted link.

By clicking on the task with id id1, the browser would scroll to the element with id example:

click id1 href "#example"

Call

With this pull request, executing javascript functions by clicking on a task becomes possible.

click id1 call callback(1,2,3,"test", test, bla, "    keep my whitespace    ")

The above call command binds the function callback to the task with id id1. When clicked on the specified task, the function callback is executed with all arguments specified inside the parentheses.
By leaving the parentheses empty, no arguments are passed to callback.

Function arguments

The following points must be considered when working with function arguments

• The arguments specified inside the parentheses are delimited by commas
• Double quotes are optional, they can be left out if desired
• When a string contains a comma, it must be surrounded by double quotes
• Double quotes at the start and the end of a string are removed before the string is
  passed to the specified callback
• If a string is not surrounded by double quotes, .trim() is called. This removes all
  whitespace before and after the string. Strings with starting or trailing whitespace should be
  surrounded by double quotes when the whitespace should be preserved.

Combinations

click allows any desired combination of href and click.

click cl1 call ganttTestClick() href "https://mermaidjs.github.io/"
click cl1 href "https://mermaidjs.github.io/" call ganttTestClick()

are both valid commands.

[coveralls]

Pull Request Test Coverage Report for Build 743

• 22 of 126 (17.46%) changed or added relevant lines in 4 files are covered.
• 1 unchanged line in 1 file lost coverage.
• Overall coverage decreased (-1.3%) to 52.991%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/mermaidAPI.js	0	1	0.0%
src/diagrams/gantt/ganttRenderer.js	0	18	0.0%
src/diagrams/gantt/ganttDb.js	14	51	27.45%
src/diagrams/gantt/parser/gantt.js	8	56	14.29%

Files with Coverage Reduction	New Missed Lines	%
src/diagrams/gantt/parser/gantt.js	1	43.75%

Totals
Change from base Build 716:	-1.3%
Covered Lines:	2059
Relevant Lines:	3853

---

💛 - Coveralls

[knsv]

Thanks for your work. Had a quite tough merge between pr #804 and #788. Maybe you could help checking that nothing broke?

[knsv]

Thanks! Merging!

[abzicht]

Thank you so much for merging! I guess that merge was not the easiest one, with the code coming from an absolute JS, and JISON beginner. Love to see this project still being actively developed!

[ehsteve]

@knsv Does this merge request allow for section names to be clickable? If not that would be a great addition. I could open an issue if appropriate.