Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sjmallon/vue-visjs
Package visjs timeline, graph2d and network components as Vue components
https://github.com/sjmallon/vue-visjs
visjs vue vuejs vuejs2
Last synced: 2 days ago
JSON representation
Package visjs timeline, graph2d and network components as Vue components
- Host: GitHub
- URL: https://github.com/sjmallon/vue-visjs
- Owner: sjmallon
- License: mit
- Created: 2019-11-26T11:21:29.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-17T09:43:28.000Z (8 months ago)
- Last Synced: 2024-09-21T18:39:48.828Z (6 days ago)
- Topics: visjs, vue, vuejs, vuejs2
- Language: Vue
- Size: 4.08 MB
- Stars: 26
- Watchers: 2
- Forks: 8
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# vue-visjs
> Vue2 component that helps with Visjs interaction.
> This is a fork of the [vis2vue](https://github.com/alexcode/vue2vis) project to update to the latest split component Visjs structure.
### Installation
```
npm install --save vue-visjs
```
or
```
yarn add vue-visjs
```
## Usage
Declare the component
```javascript
import { Timeline } from 'vue-visjs'
Vue.component('timeline', Timeline)
```
Add the component in the template.
```html
```
Add groups, items and options in your observed data or computed.
```javascript
new Vue({
el: '#app',
data() {
return {
groups: [
{
id: 0,
content: 'Group 1'
}
],
items: [
{
id: 0,
group: 0,
start: new Date(),
content: 'Item 1'
}
],
options: {
editable: true
}
}
}
})
```
## Events
### Component Events
By default all Vis events are emitted by your component. You can subscribe to a subset by passing an array in the prop `events` [Visjs event](http://visjs.org/docs/timeline/#Events).
```html
```
### Data Events
When you pass an Array of data object, it is converted internally as a DataSet.
An event with the DataSet object will be fired at mounted. It's name will be prepend with the prop name (Ex: `items-mounted`, `groups-mounted`). You could use it to interact with the DataSet.
All the [Visjs DataSet event](http://visjs.org/docs/data/dataset.html#Events) will be prepened the same fashion (`items-add`, `items-remove`, `items-update`). For example, pushing a new object to the `items` prop will fire a `items-add` event with the following payload:
```javascript
{
event: 'add',
properties: {
items: [7],
},
senderId: null,
}
```
#### Advanced
You can also manage your own data bindings by passing your own DataSet or DataView instead of an Array.
```javascript
import { DataSet } from 'vue2vis'
new Vue({
el: '#app',
data() {
return {
groups: new DataSet([
{
id: 0,
content: 'Group 1'
}
]),
items: new DataSet([
{
id: 0,
group: 0,
start: new Date(),
content: 'Item 1'
}
]),
options: {
editable: true
}
}
}
})
```
## Visjs documentation
Full reference of Item and Group formats, options properties and events: [Timeline](https://visjs.github.io/vis-timeline/docs/timeline/), [Network](https://visjs.github.io/vis-network/docs/network/), [Graph2d](https://visjs.github.io/vis-timeline/docs/graph2d/), [DataSet / DataView](https://visjs.github.io/vis-data/)
## List of currently implemented modules
- [x] Timeline
- [x] Graph2d
- [ ] Graph3d
- [x] Network
## Change log
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Testing
```bash
$ npm run test
```
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) and [CODE_OF_CONDUCT](CODE_OF_CONDUCT.md) for details.
### Build Setup
```bash
# Once you have cloned this repo, install dependencies
$ npm install
# build for development and production with minification
$ npm run build
```
### Run demo locally
```bash
# Run demo at localhost:8080
$ npm link
$ cd examples
$ npm install
$ npm link vue-visjs
# serve with hot reload at localhost:8080
$ npm run serve
```
Go to to see running examples
NOTE: If you make changes to the library you should run 'npm run build' again in the root folder.
The dev server should detect modification and reload the demo
## Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
## Credits
- [Steve Malllon][link-author]
- [vue2vis contributors](https://github.com/alexcode/vue2vis/graphs/contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
[link-author]: https://github.com/sjmallon
[link-contributors]: ../../contributors