alexcode / vue2vis Goto Github PK
View Code? Open in Web Editor NEWA Vuejs 2 adapter for Visjs
License: MIT License
A Vuejs 2 adapter for Visjs
License: MIT License
Hi,
I would like to generate streaming data graph as in the official samples: http://visjs.org/examples/graph2d/15_streaming_data.html (Static selected)
How can I create such a graph with vue2vis graph2d component. In the official sample, it uses a renderStep function where it invokes a getWindow function to proceed. But vue2vis graph2d component does not involve a getWindow method.
Could you provide help to build a streaming data example?
Thank you.
Best regards,
Erhan Saydam
Hi,
The network example shows the usage of the network module. However, if dragging one node (say node data n) to another location, the attributes n.x and n.y won't change accordingly. One may simply replicate this by adding one duplicate instance of network component and binding the same data (nodes and edges) with networks. If one node (node 1) in one network is moved, the corresponding node (node 1') won't move in the other network. It looks the data are not binded in the other direction.
I try to have a workaround by binding a method to handle the dragging
event. However, I cannot since I'm not using webpack and in-DOM template would induce an error.
Could you share any clue? Thanks.
If we place an array of groups that is originally empty on mount/create, and then update the groups prop with a list of groups, the timeline is not updated to display those groups.
<template>
<div class="timeline">
<Timeline
ref="timeline"
:items="items"
:groups="groups"
></Timeline>
<button @click="addGroups()">Add Groups</button>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { Timeline } from 'vue2vis';
import 'vue2vis/dist/vue2vis.css';
import getTimelineOptions from './timeline-options';
import { DataItem, DataGroup } from 'vis';
@Component({
components: {
Timeline
}
})
export default class ScheduleTimeline extends Vue {
items: DataItem[] = [];
groups: DataGroup[] = [];
addGroups() {
this.groups = [
{ id: 1, content: 'Group 1' },
{ id: 2, content: 'Group 2' }
]
}
}
</script>
The current workaround is to just add an Unassigned or empty group.
...
export default class ScheduleTimeline extends Vue {
items: DataItem[] = [];
groups: DataGroup[] = [ { id: 0, content: 'unassigned' } ];
}
In the Vis library you can pass in callbacks within the options of the timeline. Such as onMove, onRemove, etc (vis). I can't find a way to use this in the vue scope. Is there a way to bind these or an alternate route?
The code provided on the master branch via this fiddle shows a custom component for a timeline item.
How can custom elements be added to a network? I tried to do it a similar way to the fiddle, but it doesn't seem to have that option.
Here is an example using raw vis. JS Bin found from this issue in Vis issue #3436
Hi,
Doubleclick on timeline is not triggering the method.
<timeline ref="refTimeline" :items="tlItems" :groups="groups" :options="options" @doubleClick="addtoTimeline">
the addtoTimeline method is not invoked when double clicked. It was working on previous releases.
Could you fix it.
Thank you,
Kind regards.
Hi,
I'm trying to change the localisation from "en" to "de".
From Vis documentation (http://visjs.org/docs/timeline/#Methods) I see that there is an option for that, as long moment.js with locales is installed.
In my vue.js project I have added moment.js and got it working, so that the localisation is set global to "de".
But it seems that if I configure the options for the timeline like below, it doesn't have any effect at runtime:
... timeline: { groups: [ { "id": "0", content: 'Timeline 1' }, ], items: [ { id: '0', group: '0', start: new Date(), content: 'event', title: 'xxx', className: '' }, ], options: { locale: 'de', } } ...
Do I missing something else?
Best regards
Alex
Hi,
I could not use lifecycle methods of timeline . I tried to understand the document but could not understand. For example when timeline is mounted, I would like to focus an item ( i.e invoke focus method of timeline). I tried code below but could not succeed.
<template>
<timeline ref="timeline_ref"
:items="items" :groups="groups" :options="options"
@items-mounted="focusTimeline"> </timeline>
</template>
<script>
//...
methods:{
focusTimeline(){
this.$refs.timeline_ref.focus(3);
}
}
//...
</script>
Best regards.
The console is reporting
You may have an infinite update loop in watcher with expression "options"
When using the following code.
<network class="network" ref="network" :nodes="this.vue2vis.nodes" :edges="this.vue2vis.edges" :options="options"
options: { layout: { hierarchical: { direction: "LR" } }, nodes: { shape: "square" }, }
When ever "hierarchical" is used even while empty, this message appears.
Some of your(vis) events are camelcased like doubleClick and currentTimeTick, this doesn't work when using your component in a html template environment because of html case-insensitivity.
https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
The core vis
package is EOL and no longer maintained.
https://www.npmjs.com/package/vis
Please consider using the following package instead so we can benefit from recent feature/enhancements:
I'd love to be able to pass in a vue component as an items content. Has anyone figured out a way to do so?
I was able to use the template
option to render vue components for each item, however vis calls the template method often when interacting with a timeline causing new vue instances to be generated each time.
template: function(item, element, data) {
// create a class from the component that was passed in with the item
let ComponentClass = Vue.extend(item.component);
// create a new vue instance from that component and pass the item in as a prop
let instance = new ComponentClass({
propsData: { data: item },
parent: vm
});
// mount it
instance.$mount();
// return the mounted element
return instance.$el;
}
If I return only the rendered html from the component and destroy it then I get something that is reactive (the html rerenders whenever the item is modified) but I lose any ability to interact with the component itself (since its just html and not a vue instance).
template: function(item, element, data) {
// create a class from the component that was passed in with the item
let ComponentClass = Vue.extend(item.component);
// create a new vue instance from that component and pass the item in as a prop
let instance = new ComponentClass({
propsData: { data: item },
parent: vm
});
// mount it
instance.$mount();
// grab the html
const html = instance.$el.outerHTML;
// destroy it so we don't end up with a bunch of unnecessary vue instances
instance.$destroy();
// return rendered html
return html;
}
Anyone have any experience or thoughts on this?
I want to add a loding-bar when vis network is loading, so I add this
network:
@start-stabilizing="startStabilizing"
@stabilization-iterations-done="stablelizingDone"
method:
startStabilizing() {
console.log('startStabilizing');
this.topoloading = true;
}, // to control loading status hidden or appear
stablelizingDone(progress) {
console.log('done');
// this.topoloading = false;
},
if I remove this method:this.topoloading = true;
it will print both "startStabilizing" & "done" .
If I add this this.topoloading = true;
it will only print "startStabilizing" but no "done" ... It is wired.
I cannot manage to import vue2vis component with a super basic setup :
<template>
<div>
<timeline ref="timeline" :items="items" :groups="groups" :options="options">
</timeline>
</div>
</template>
<script>
import Timeline from 'vue2vis'
export default {
name: 'MyTimeline',
components: {
Timeline
},
data () {
return {
groups: [{
id: 0,
content: 'Group 1'
}],
items: [{
id: 0,
group: 0,
start: new Date(),
content: 'Item 1'
}],
options: {
editable: true
}
}
}
}
</script>
<style scoped></style>
The error thrown is :
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Hi
I'm trying to add multiple instance of network on the same page. This almost works, but calling methods via $refs.networkA.... gets mixed up.
As far as I can see, the reason is the module variable "network" inside Network.vue. It will point to the last instance created.
Hi,
Can we use timeline without groups parameter like in the example at http://visjs.org/examples/timeline/editing/customSnappingOfItems.html
It does not render when groups parameter not given as in the example. I would not prefer showing a Group name at the left part of timeline.
<template>
<timeline ref="timeline_ref"
:items="items"
:options="options"> </timeline>
</template>
<script>
//...
data() {
return {
items: [
{id: 1, content: 'A', start: '2018-11-09T00:00:00'},
{id: 2, content: 'B', start: '2018-11-10T00:00:00'},
{id: 3, content: 'B', start: '2018-11-12T00:00:00'},
],
options: {
editable: true
}
}
//...
</script>
Best Regards,
Hi Guys!
First of all thanks for your great work everything works fine! The only thing what I missing is the wind feature from physics option. This one:
wind
Is there a chance you will add that to the component?
There's a link in the readme to a changelog, but I don't see it anywhere. The link 404's. Am I missing something?
Currently, when I click on an item the delete button is showing.
I would like to replace this delete button with options button and after click on it mini menu pops up near the item.
Any advice on how to do this?
Hi,
i can't get timeline to display items
i can found them in the timeline object with console but there are not displayed at all
i'm searching for this for hours, but i cant get it work
here is my code https://esadhar.net/gogs/bachir/offline-timeline/src/vue2vis/src/App.vue
thanks
Hello,
I'm trying to make a drop event after I drag my items but when I drop it nothing happens the function that i set for the drop event is not called.
In my template I set the event for drop.
<timeline v-if="items.length > 0" ref="timeline" :items="items" :groups="groups" :options="options" :events="['drop', 'changed']" @drop="myDropCallback()"> </timeline>
And in methods
I set the function.
myDropCallback: function (value) { console.log('drop event') },
Does anyone know why is this happening? Thanks.
Hi. Can I use kilometers in vue2vis instead a date ?
Hi @alexcode,
great work with the adapter, thank you!
I am having trouble figuring out how to get the Node ID when clicking on it.
I assume the event @select-node="????" but how do I get the ID of the selected node?
I would really appreciate if you could lead me in the right direction.
Thanks!
We love this Vuejs extension, however there's no hints in the docs on how to access the Timeline
methods seen here: http://visjs.org/docs/timeline/#Methods such as redraw()
.
How can Vuejs script get access to the Timeline objects' and its methods?
How can i update visjs version used in vue2vis?
Hi, I use your network component in my project. but I have a trouble when the nodes more than 7000。I will draw the graph very long and the whole page is very carlton. How to optimize the interface ?
Upon updating to 0.0.17 (the release from 2 days ago) I can no longer import the vue2vis library.
I get this:
This dependency was not found:
vue2vis in ./src/main.js
To install it, you can run: npm install --save vue2vis
I think the way to use the component changed to:
Vue.component('timeline', vue2vis.Timeline);
when before I was including the components like this:
import { Timeline, DataSet } from 'vue2vis';
@alexcode could you explain if the include process has changed with the updates?
I wonder when does new release comes out. It would be great if there's new version of vue2vis
with bug-fixed version. Thanks!
I have a weird issue, when I want to render a time line without any items, time line itself is invisible, i can see it in html code in dev-tools, but in browsers window It appears as invisible
Hello everyone,
I coded a graph2d component, but I noticed that graph2d got stuck when dragging sideways on the Xaxis and the zoom didn't change the date and time on the Xaxis either.
link to demo: https://codesandbox.io/s/serverless-http-19der?file=/src/App.vue
I implemented the vis.js timeline in my vue.js project, but I have a problem with the drop. First of all I think the drop does not works in that library, second how can i get the start and the end time and date when I drag one item and then drop it?
Because the drop event is not working I'm trying to do it with
@items-update="itemsUpdate()"
and I'm getting the data back with.
let properties = this.$refs.timeline.getEventProperties(event)
But I'm getting the time where the mouse pointer stops.
So is there any way to get the start time and end time after drop I mean after I stop dragging the item?
Because I need to save start time and the end time into my database for that dragged item.
Thanks.
The main visjs has been end of life'd in favor of individual repositories for the individual features.
Here's the post about it.
almende/vis#4259
Looks like the network and timeline have been broken out into their own modules.
https://github.com/visjs-community
Considering the main visjs repository is no longer being updated. It would be great to update vue2vis to use these new modules as they become available. I'd be willing to work on the timeline component. But I'd like to know if @alexcode is open to moving forward with this before I start working on it.
Thanks
Hello,
when I try to import the timeline component as it says in the Readme I'm getting this error
'vue2vis' is not defined
.
I tried to import it like this import Vue2Vis from 'vue2vis'
and then call it with Vue2Vis.Timeline
but this does not works neither.
Does anyone know the solutiong for that. Thanks!
Error when I am not actually using dates or time
Error in mounted hook: "TypeError: Cannot read property 'getTime' of undefined"
I failed on 'npm install'
I tried importing this.
import { Timeline } from 'vue2vis';
But it is giving me same error
This dependency was not found:
* vue2vis in ./src/main.js
To install it, you can run: npm install --save vue2vis
> Listening at http://localhost:8080
When trying to do next:
this.$refs.network.redraw()
getting:
TypeError: Cannot read property 'redraw' of undefined
Hi guys,
I have a simple Timeline component with few items..
one of them has to keep refreshing to maintain the end, right on the "currentTime" red line.
To do that I need the event currentTimeTick.
Everything works perfectly with version 0.0.13 but if I update to the latest 0.0.16 it stop working.
Doesn't look like much changed across the versions.. am I doing something wrong?
My component:
<timeline ref="timeline" class="timeline"
:groups="groups"
:items="items"
:options="options"
@items-mounted="getDataSet"
@currentTimeTick="currentTimeTick">
</timeline>
Methods:
getDataSet(dataSet) {
this.dataSet = dataSet
},
currentTimeTick() {
console.log("currentTimeTick");
var lastItem = this.items[this.items.length - 1]
if (lastItem != null) {
lastItem.end = moment().toDate();
this.dataSet.update(lastItem)
}
},
Edit: version 0.0.14 doesn't work. as soon as I switch back to 0.0.13 everything is fine.
report '.' is not internal or external command
Hello,
When I try to use the library, at compile time, webpack throws these errors:
ERROR Failed to compile with 13 errors
These relative modules were not found:
* ./img/network/addNodeIcon.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-55649324","scoped":false,"hasI
nlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=1!./src/components/xxx.vue
What could be wrong?
Thanks in advance, have a good day.
cd examples
npm install
npm run dev
Module Warning (from ./node_modules/eslint-loader/index.js):
✘ https://google.com/#q=import%2Fno-cycle Definition for rule 'import/no-cycle' was not found
src/App.vue:1:1
✘ 1 problem (1 error, 0 warnings)
Errors:
1 https://google.com/#q=import%2Fno-cycle
Module Warning (from ./node_modules/eslint-loader/index.js):
✘ https://google.com/#q=import%2Fno-cycle Definition for rule 'import/no-cycle' was not found
src/main.js:1:1
I'm trying to create a timeline and use the techniques from the Visjs example merged with your adapter and I'm having difficulty get events to fire at all.
http://visjs.org/examples/timeline/other/drag&drop.html
Could you provide an example for binding a simple event?
I am trying to add a "select" event so whenever user selects an element on the timeline, it adds a css class to a v-card that holds the details of that element.
<timeline ref="timeline" :items="events" :options="{}" :events="['select']" @select="highlightSelected" :groups="[{id: 0, content: ''}]"></timeline>
<v-card v-for item in messages>{{item.title}} </v-card>
highlightSelected(props){ console.log(props.items) },
It returns the item.title
of the selected element. Now I want to check this item.title with the one in v-card
and if they were the same, I want to highlight the card. I appreciate your help
After upgrading this package to 0.0.14
, Vue fail to load vue2vis
, saying window is not defined
(even if the SSR is off).
I solved this problem by adding config.output.globalObject = 'this'
in ./scripts/webpack.js
. But I want to inspect this issue more detailed.
Can you take a look at this issue?
ERROR Failed to compile with 2 errors 4:23:06 PM
These dependencies were not found:
To install them, you can run: npm install --save -!../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!./vue2vis/dist/vue2vis.css vue2vis
Is there any way to change the grid for the drag and the resize when dragging and resizing items in vis.js. Or is it possible to turn off the grid for the drag and the resize?
Thanks.
How to use network view?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.