Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thiagodnf/visjs-extras-groupsequence
A Vis.js layout extension for formatting nodes in a sequence or group sequence
https://github.com/thiagodnf/visjs-extras-groupsequence
diagram group layout network sequence vis-network visjs
Last synced: about 2 months ago
JSON representation
A Vis.js layout extension for formatting nodes in a sequence or group sequence
- Host: GitHub
- URL: https://github.com/thiagodnf/visjs-extras-groupsequence
- Owner: thiagodnf
- License: mit
- Created: 2020-05-16T04:10:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-01-30T18:43:56.000Z (12 months ago)
- Last Synced: 2024-04-09T21:14:31.138Z (9 months ago)
- Topics: diagram, group, layout, network, sequence, vis-network, visjs
- Language: JavaScript
- Homepage: https://thiagodnf.github.io/visjs-extras-groupsequence
- Size: 817 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A Vis.js layout extension for formatting nodes in a sequence or group sequence.
[](https://github.com/thiagodnf/visjs-extras-groupsequence/releases/latest)
[](https://github.com/thiagodnf/visjs-extras-groupsequence/graphs/contributors)
[](https://github.com/almende/thiagodnf/visjs-extras-groupsequence)
[](https://opensource.org/licenses/mit-license.php)
[](https://github.com/ellerbrock/open-source-badges/)
## Features
- Aggregate the nodes in groups
- Use a "head" node to display the group's name
- Select which node's property should be used to grouping
## Screenshot
Groups activated
Groups disactived
## Requirements
Updated versions of these toolsets may break the build or app. If you have issues, try mirroring these exact versions.
- Vis.js 7.6.4
## Getting Started
### Online access
Click on the on the link below for seeing this tool in action.
https://thiagodnf.github.io/visjs-extras-groupsequence/
### Usage
Include the javascript file in your html file
```html
```
and call the class before sending the nodes the vis-network
```js
let gsOptions = {};
let layout = new GroupSequence(gsOptions);
graph = layout.process(graph);
var data = {
nodes: new vis.DataSet(graph.nodes),
edges: new vis.DataSet(graph.edges)
};
var options = {
physics: false
};
var network = new vis.Network($container[0] , data, options);
```
Warning! Don't forget to set ```physics: false```
### Parameters
The default options are:
```js
let defaultOptions = {
horizontalSpacing: 120,
verticalSpacing: 100,
useHead: true,
useGroups: true,
sortGroups: true,
sortNodeIds: true,
direction: "LR",
smoothRoundnessRange: 0.09,
useSmooth: true,
groupNodeBy: "group",
}
```
The individual options are explained below.
| Name | Type | Default | Description |
| --- | :---: | :---: | --- |
| ```horizontalSpacing``` | number | 120 | The horizontal distance among nodes |
| ```verticalSpacing``` | number | 100 | The vertical distance among nodes |
| ```useHead``` | boolean | true | Active the use of head nodes |
| ```useGroups``` | boolean | true | Active the use of groups |
| ```sortGroups``` | boolean | true | Active if the groups should be sorted |
| ```sortNodeIds``` | boolean | true | Active if the nodes should be sorted |
| ```direction``` | string | "LR" | Define the direction. Available options ```LR``` and ```RL``` |
| ```smoothRoundnessRange``` | number | 0.09 | The size of edge's roundness |
| ```useSmooth``` | boolean | true | Active the use of edge's smooth |
| ```groupNodeBy``` | string | "group" | Define the properties used for grouping|
## Questions or Suggestions
Feel free to create issues here as you need
## Contribute
Contributions to the this project are very welcome! We can't do this alone! Feel free to fork this project, work on it and then make a pull request.
## Authors
* **Thiago Ferreira** - *Initial work*
See also the list of [contributors](https://github.com/thiagodnf/visjs-extras-groupsequence/graphs/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
## Donate
I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously, this takes time. You can integrate and use these projects in your applications for free! You can even change the source code and redistribute (even resell it).
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
Thanks! ❤️