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.

Sign up for GitHub

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

Gantt: Add support for callback with parameters #1136

Merged
merged 4 commits into from
Jan 1, 2020
Merged

Gantt: Add support for callback with parameters #1136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c7ec819
Gantt callback: default to node id as callback arg
keenanjt33 Dec 10, 2019
d504e00
Adds simple tests for parsing callbacks wrt args
keenanjt33 Dec 10, 2019
0d9112a
Adds basic documentation for interaction with gantt
keenanjt33 Dec 11, 2019
442474f
Merge branch 'develop' of https://github.com/mermaid-js/mermaid into …
keenanjt33 Dec 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions docs/gantt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -288,3 +288,48 @@ Param | Descriotion | Default value
--- | --- | ---
mirrorActor|Turns on/off the rendering of actors below the diagram as well as above it|false
bottomMarginAdj|Adjusts how far down the graph ended. Wide borders styles with css could generate unwantewd clipping which is why this config param exists.|1

## Interaction

It is possible to bind a click event to a task, the click can lead to either a javascript callback or to a link which will be opened in the current browser tab. **Note**: This functionality is disabled when using `securityLevel='strict'` and enabled when using `securityLevel='loose'`.

```
click taskId call callback(arguments)
click taskId href URL
```

* taskId is the id of the task
* callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the taskId as the parameter if no other arguments are specified..

Beginners tip, a full example using interactive links in an html context:
```
<body>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD

section Clickable
Visit mermaidjs :active, cl1, 2014-01-07, 3d
Print arguments :cl2, after cl1, 3d
Print task :cl3, after cl2, 3d

click cl1 href "https://mermaidjs.github.io/"
click cl2 call printArguments("test1", "test2", test3)
click cl3 call printTask()
</div>

<script>
var printArguments = function(arg1, arg2, arg3) {
alert('printArguments called with arguments: ' + arg1 + ', ' + arg2 + ', ' + arg3);
}
var printTask = function(taskId) {
alert('taskId: ' + taskId);
}
var config = {
startOnLoad:true,
securityLevel:'loose',
};
mermaid.initialize(config);
</script>
</body>
```
5 changes: 5 additions & 0 deletions src/diagrams/gantt/ganttDb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -488,6 +488,11 @@ const setClickFun = function(id, functionName, functionArgs) {
}
}

/* if no arguments passed into callback, default to passing in id */
if (argList.length === 0) {
argList.push(id);
}

let rawTask = findTaskById(id);
if (typeof rawTask !== 'undefined') {
pushFun(id, () => {
Expand Down
30 changes: 30 additions & 0 deletions src/diagrams/gantt/parser/gantt.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,34 @@ describe('when parsing a gantt diagram it', function() {
}
});
});
it('should parse callback specifier with no args', function() {
spyOn(ganttDb, 'setClickEvent');
const str =
'gantt\n' +
'dateFormat YYYY-MM-DD\n' +
'section Clickable\n' +
'Visit mermaidjs :active, cl1, 2014-01-07, 3d\n' +
'Calling a callback :cl2, after cl1, 3d\n\n' +
'click cl1 href "https://mermaidjs.github.io/"\n' +
'click cl2 call ganttTestClick()\n';

expect(parserFnConstructor(str)).not.toThrow();
expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', null);
});
it('should parse callback specifier with arbitrary number of args', function() {
spyOn(ganttDb, 'setClickEvent');
const str =
'gantt\n' +
'dateFormat YYYY-MM-DD\n' +
'section Clickable\n' +
'Visit mermaidjs :active, cl1, 2014-01-07, 3d\n' +
'Calling a callback :cl2, after cl1, 3d\n\n' +
'click cl1 href "https://mermaidjs.github.io/"\n' +
'click cl2 call ganttTestClick("test0", test1, test2)\n';

expect(parserFnConstructor(str)).not.toThrow();
const args = '"test1", "test2", "test3"';
expect(ganttDb.setClickEvent).toHaveBeenCalledWith('cl2', 'ganttTestClick', '"test0", test1, test2');
});

});