visinvue v0.0.18
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-visjs
or
yarn add vue-visjs
Usage
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.