❤
npm
Sign UpSign In

visinvue

0.0.18 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i visinvue

Repository

github.com/via4e/visinvue

Homepage

github.com/via4e/visinvue#readme

Weekly Downloads

1

Version

0.0.18

License

MIT

Unpacked Size

706 kB

Total Files

12

Last publish

Collaborators

  • viacheslaw
Try on RunKit
Report malware