@recognizerhd/vue2vis-graph2d

> A fork of the alexcode/vue2vis package.
> Vue2 wrapper for the Visjs Graph2d library.

$3

``
npm install --save @recognizerhd/vue2vis-graph2d vis-data moment
`

or

`
yarn add @recognizerhd/vue2vis-graph2d vis-data moment
`

Usage

Declare the component

`javascript
Vue.component("graph2d", vue2vis.Graph2d);
`

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: [
{
x: "2014-06-13",
y: 30,
group: 0
}
],
options: {
editable: true
}
};
}
});
`

Additional info can be found on Visjs Graph2d documentation

Here is a basic working demo with item generation:
JS Fiddle Basic Demo

You can also create items or group labels as Vue Components:
JS Fiddle Item Vue Component Demo

Events

$3

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.

`html

ref="graph2d"
:items="items"
:groups="groups"
:options="options"
:events="['click', 'changed']"
@click="myClickCallback"
@changed="myChangedCallback"
>

`

$3

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:

`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 "vis-data";

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:

- Graph2d
- DataSet,
- DataView

Change log

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING and CONDUCT for details.

$3

`bash

Run demo at localhost:8080

yarn install
yarn lerna bootstrap
yarn serve:graph2d
`

Go to to see running examples

NOTE: If you make changes to the library you should run yarn prepare` 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 infocontact.alex@gmail.com instead of using the issue tracker.

Credits

- [Alex Couturon][link-author]
- João Menighin
- [All Contributors][link-contributors]

License

The MIT License (MIT). Please see License File for more information.

[link-author]: https://github.com/alexcode
[link-contributors]: ../../contributors