visinvue
v0.0.18
Published
> Vue2 component that helps with <a href="http://visjs.org/">Visjs</a> interaction. This is a fork of the [vis2vue](https://github.com/alexcode/vue2vis) and https://www.npmjs.com/package/vue-visjs Network module only, without Graph2d and Timeline
Downloads
7
Readme
visinvue
Vue2 component that helps with Visjs interaction. This is a fork of the vis2vue and https://www.npmjs.com/package/vue-visjs Network module only, without Graph2d and Timeline
Installation
npm install --save vue-visjsor
yarn add vue-visjsUsage
Declare the component
import { Network } from 'vue-visjs'
Vue.component('network', Network);Add the component in the template.
<body>
<div id="app">
<network ref="network"
:items="items"
:groups="groups"
:options="options">
</network>
</div>
</body>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.
<body>
<div id="app">
<timeline ref="timeline"
:items="items"
:groups="groups"
:options="options"
:events="['drop', 'changed']"
@drop="myDropCallback"
@changed="myChangedCallback">
</timeline>
</div>
</body>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 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:
{
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.
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: Network, DataSet / DataView
[x] Network
Contributing
Please see CONTRIBUTING and CODE_OF_CONDUCT for details.
Build Setup
# Once you have cloned this repo, install dependencies
$ npm install
# build for development and production with minification
$ npm run build
Credits
License
The MIT License (MIT). Please see License File for more information.