Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clickable gantt tasks #804

Merged
merged 22 commits into from
Jun 9, 2019
Merged

Clickable gantt tasks #804

merged 22 commits into from
Jun 9, 2019

Conversation

abzicht
Copy link
Contributor

@abzicht abzicht commented Mar 10, 2019

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:

gantt

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.

…unction by splitting the functionargs by commas
…at it returns the id that is specified after the keyword
…ailable in a separate function. Also, setLink no longer using the .link attribute and instead calls links directly via window.open
…tespace in links and resolves the issue with href ending with EOF
@coveralls
Copy link

coveralls commented Mar 10, 2019

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 Coverage Status
Change from base Build 716: -1.3%
Covered Lines: 2059
Relevant Lines: 3853

💛 - Coveralls

@knsv knsv merged commit 0a7b884 into mermaid-js:master Jun 9, 2019
knsv pushed a commit that referenced this pull request Jun 9, 2019
@knsv
Copy link
Collaborator

knsv commented Jun 9, 2019

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

@knsv knsv mentioned this pull request Jun 9, 2019
@knsv
Copy link
Collaborator

knsv commented Jun 11, 2019

Thanks! Merging!

@abzicht
Copy link
Contributor Author

abzicht commented Jun 21, 2019

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
Copy link

ehsteve commented Dec 8, 2021

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants