sjmallon/vue-visjs

Package visjs timeline, graph2d and network components as Vue components

vue-visjs's Issues

You may have an infinite update loop in watcher with expression "options"

Problem with display subgroups on Timeline

I have a timeline in my application, to which I am assigning groups, and some of these contain nested groups.

The problem comes when I go to display/hide that "parent" group, I get the following error:

Uncaught Error: Cannot redraw item: no parent attached.

Likewise, the nested groups have their parent Object assigned to them, so I don't know what this error is due to...

Unused dependencies

This package has many unused dependencies. The depcheck tool lists them as

Unused dependencies                                                            
* @egjs/hammerjs                                                               
* canvas
* core-js
* keycharm
* moment
* propagating-hammerjs
* uuid
* vis-util
* vue-runtime-helpers
Unused devDependencies
* @vue/cli-plugin-babel
* @vue/cli-plugin-eslint
* @vue/cli-plugin-unit-jest
* @vue/cli-service
* babel-eslint
* eslint
* eslint-plugin-prettier
* fibers
* node-sass
* prettier
* rollup
* rollup-plugin-node-resolve
* sass
* sass-loader
* vue-template-compiler

One of these packages, canvas has binary dependencies that need to be installed through a system package manager like apt-get, which is inconvenient for an unused dependency. It would be really helpful if you could fix this. Thanks!

Graph2d groups properties not working

Hello everyone,

In graph2d component, the group properties as content, options, className... not working, follow the link bellow:

codesandbox sample: https://codesandbox.io/s/gracious-chandrasekhar-l7i1q?file=/src/App.vue:383-609

notice that group names (content: 'name group') not draw in timeline graph2d.

Avoid null error on destroy

See alexcode/vue2vis#72

Uncaught TypeError: this.hammer is undefined

Thanks for the library!
After installing I just copied the example:

<template>
  <timeline
    ref="timeline"
    :items="items"
    :groups="groups"
    :options="options"
  />
</template>

<script>
  import { Timeline } from 'vue-visjs'

  export default {
    name: 'GanttVis',
    components: {
      Timeline,
    },
    props: {
      experiment: {
        type: Object,
        required: true,
      },
      height: {
        type: Number,
        required: false,
        default: 500,
      },
    },
    data () {
      return {
        groups: [
          {
            id: 0,
            content: 'Group 1',
          },
        ],
        items: [
          {
            id: 0,
            group: 0,
            start: new Date(),
            content: 'Item 1',
          },
        ],
        options: {
          editable: true,
        },
      }
    },
    computed: {

    },
  }
</script>

And I get the following error when clicking the box:

Uncaught TypeError: this.hammer is undefined
    _repaintDragCenter vue-visjs.esm.js:19295
    _repaintDomAdditionals vue-visjs.esm.js:19407
    redraw vue-visjs.esm.js:19415
    redraw vue-visjs.esm.js:19415
    setData vue-visjs.esm.js:19262
    _onDrag vue-visjs.esm.js:20307
    onMoving vue-visjs.esm.js:19939
    _onDrag vue-visjs.esm.js:20307
    _onDrag vue-visjs.esm.js:20292
    propagatedHandler vue-visjs.esm.js:17323
    emit vue-visjs.esm.js:7971
    emit vue-visjs.esm.js:6874
    emit vue-visjs.esm.js:6879
    emit vue-visjs.esm.js:7298
    tryEmit vue-visjs.esm.js:6905
    recognize vue-visjs.esm.js:6958
    recognize vue-visjs.esm.js:7808
    inputHandler vue-visjs.esm.js:6001
    handler vue-visjs.esm.js:6224
    domHandler vue-visjs.esm.js:6076
    addEventListeners vue-visjs.esm.js:6026
    each vue-visjs.esm.js:5473
    addEventListeners vue-visjs.esm.js:6025
    init vue-visjs.esm.js:6101
    Input vue-visjs.esm.js:6080
    PointerEventInput vue-visjs.esm.js:6185
    createInputInstance vue-visjs.esm.js:6605
    Manager vue-visjs.esm.js:7715
    Hammer vue-visjs.esm.js:8176
    PropagatingHammer vue-visjs.esm.js:17154
    _create vue-visjs.esm.js:18533
    Timeline vue-visjs.esm.js:20878
    mounted vue-visjs.esm.js:21941
    VueJS 18
    init vue-router.esm.js:2989
    init vue-router.esm.js:2988
    updateRoute vue-router.esm.js:2409
    transitionTo vue-router.esm.js:2263
    confirmTransition vue-router.esm.js:2397
    step vue-router.esm.js:2001
    step vue-router.esm.js:2008
    runQueue vue-router.esm.js:2012
    confirmTransition vue-router.esm.js:2392
    step vue-router.esm.js:2001
    step vue-router.esm.js:2005
    iterator vue-router.esm.js:2379
    resolve vue-router.esm.js:2127
    once vue-router.esm.js:2203
    promise callback*resolveAsyncComponents/</< vue-router.esm.js:2150
    flatMapComponents vue-router.esm.js:2171
    flatMapComponents vue-router.esm.js:2171
    flatMapComponents vue-router.esm.js:2170
    resolveAsyncComponents vue-router.esm.js:2106
    iterator vue-router.esm.js:2357
    step vue-router.esm.js:2004
    step vue-router.esm.js:2008
    step vue-router.esm.js:2008
    step vue-router.esm.js:2005
    iterator vue-router.esm.js:2379
    <anonymous> router.js:63
    iterator vue-router.esm.js:2357
    step vue-router.esm.js:2004
    step vue-router.esm.js:2008
    runQueue vue-router.esm.js:2012
    confirmTransition vue-router.esm.js:2387
    transitionTo vue-router.esm.js:2260
    push vue-router.esm.js:2704
    iterator vue-router.esm.js:2375
    <anonymous> router.js:59
    iterator vue-router.esm.js:2357
    step vue-router.esm.js:2004
    step vue-router.esm.js:2008
    runQueue vue-router.esm.js:2012
    confirmTransition vue-router.esm.js:2387
    transitionTo vue-router.esm.js:2260
    push vue-router.esm.js:2704

Looks similar to visjs/vis-timeline#1108

Installing on Macbook Pro BigSur

When running
npm install --save vue-visjs
I get a lot of deprecated messages and then errors. Something must be misconfigured on my mac. Thank you for any help you can provide. Thanks. Errors below: (I do not know why crypto libraries are needed for Vis.js).

npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: 3.x is no longer supported
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | x64
npm ERR! (node:5928) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp info spawn /usr/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args   '/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args   'binding.gyp',
npm ERR! gyp info spawn args   '-f',
npm ERR! gyp info spawn args   'make',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl/build/config.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args   '-I',
npm ERR! gyp info spawn args   '/Users/erlebach/.node-gyp/16.3.0/include/node/common.gypi',
npm ERR! gyp info spawn args   '-Dlibrary=shared_library',
npm ERR! gyp info spawn args   '-Dvisibility=default',
npm ERR! gyp info spawn args   '-Dnode_root_dir=/Users/erlebach/.node-gyp/16.3.0',
npm ERR! gyp info spawn args   '-Dnode_gyp_dir=/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp',
npm ERR! gyp info spawn args   '-Dnode_lib_file=/Users/erlebach/.node-gyp/16.3.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args   '-Dmodule_root_dir=/Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl',
npm ERR! gyp info spawn args   '-Dnode_engine=v8',
npm ERR! gyp info spawn args   '--depth=.',
npm ERR! gyp info spawn args   '--no-parallel',
npm ERR! gyp info spawn args   '--generator-output',
npm ERR! gyp info spawn args   'build',
npm ERR! gyp info spawn args   '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
npm ERR!
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
npm ERR!
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
npm ERR!
npm ERR! gyp: No Xcode or CLT version detected!
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp/lib/configure.js:345:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Darwin 20.5.0
npm ERR! gyp ERR! command "/Users/erlebach/Documents/global_npm_installs/lib/node_modules/node/bin/node" "/Users/erlebach/src/2021/vue-visjs/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl
npm ERR! gyp ERR! node -v v16.3.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/erlebach/.npm/_logs/2021-06-21T22_28_56_414Z-debug.log

Here is the log:

2763 error code 1
2764 error path /Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl
2765 error command failed
2766 error command sh -c node-gyp rebuild
2767 error gyp info it worked if it ends with ok
2767 error gyp info using [email protected]
2767 error gyp info using [email protected] | darwin | x64
2767 error (node:5928) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
2767 error (Use `node --trace-deprecation ...` to show where the warning was created)
2767 error gyp info spawn /usr/bin/python2
2767 error gyp info spawn args [
2767 error gyp info spawn args   '/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp/gyp/gyp_main.py',
2767 error gyp info spawn args   'binding.gyp',
2767 error gyp info spawn args   '-f',
2767 error gyp info spawn args   'make',
2767 error gyp info spawn args   '-I',
2767 error gyp info spawn args   '/Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl/build/config.gypi',
2767 error gyp info spawn args   '-I',
2767 error gyp info spawn args   '/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp/addon.gypi',
2767 error gyp info spawn args   '-I',
2767 error gyp info spawn args   '/Users/erlebach/.node-gyp/16.3.0/include/node/common.gypi',
2767 error gyp info spawn args   '-Dlibrary=shared_library',
2767 error gyp info spawn args   '-Dvisibility=default',
2767 error gyp info spawn args   '-Dnode_root_dir=/Users/erlebach/.node-gyp/16.3.0',
2767 error gyp info spawn args   '-Dnode_gyp_dir=/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp',
2767 error gyp info spawn args   '-Dnode_lib_file=/Users/erlebach/.node-gyp/16.3.0/<(target_arch)/node.lib',
2767 error gyp info spawn args   '-Dmodule_root_dir=/Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl',
2767 error gyp info spawn args   '-Dnode_engine=v8',
2767 error gyp info spawn args   '--depth=.',
2767 error gyp info spawn args   '--no-parallel',
2767 error gyp info spawn args   '--generator-output',
2767 error gyp info spawn args   'build',
2767 error gyp info spawn args   '-Goutput_dir=.'
2767 error gyp info spawn args ]
2767 error No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
2767 error
2767 error No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
2767 error
2767 error No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
2767 error
2767 error gyp: No Xcode or CLT version detected!
2767 error gyp ERR! configure error
2767 error gyp ERR! stack Error: `gyp` failed with exit code: 1
2767 error gyp ERR! stack     at ChildProcess.onCpExit (/Users/erlebach/src/2021/vue-visjs/node_modules/node-gyp/lib/configure.js:345:16)
2767 error gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
2767 error gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
2767 error gyp ERR! System Darwin 20.5.0
2767 error gyp ERR! command "/Users/erlebach/Documents/global_npm_installs/lib/node_modules/node/bin/node" "/Users/erlebach/src/2021/vue-visjs/node_modules/.bin/node-gyp" "rebuild"
2767 error gyp ERR! cwd /Users/erlebach/src/2021/vue-visjs/node_modules/node-webcrypto-ossl
2767 error gyp ERR! node -v v16.3.0
2767 error gyp ERR! node-gyp -v v3.8.0
2767 error gyp ERR! not ok
2768 verbose exit 1

Problem when triying to use in nuxt ssr standalone

When used on nuxt 2 building with --standalone I'm having this issue.

It does work well on run dev and even when I build it normally.

Timeline: Render issues when zooming

I am not sure if this is a problem with upstream or if Vue messes with vis.js somehow, but I am seeing the follow problem when adding a single item and zooming out:

vue-visjs-timeline-issue.mp4

I simply drag the item, positioned at 2021-06-01, into view and then start scrolling out using the mouse wheel.

A similar issue was reported here: https://forum.vuejs.org/t/visjs-timelime-rendering-issues/28180

---

Here is the MWE:

App.vue:

<template>
  <div id="app">
    <timeline :items="items" :options="options"></timeline>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      items: [
        {
          id: 0,
          content: "Test",
          start: "2021-06-01"
        }
      ],
      options: {},
    };
  },
};
</script>

<style></style>

main.js:

import Vue from 'vue'
import App from './App.vue'

import { Timeline } from 'vue-visjs'

Vue.component('timeline', Timeline)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Packages:

"vue": "^2.6.11",
"vue-visjs": "^0.6.0"

---

Note: I have tried to implement my own rudimentary Timeline component as well and I actually saw a similar problem. I wonder if Vue is somehow messing with some internals of vis.js Timeline that makes it zoom on a different scale.

Note: As mentioned the "Test" item should be positioned at 2021-06-01, but as shown in the video, even before zooming it is actually misplaced visually.

setCustomTimeMarker method not available for timeline

Hey, I'm trying to use the setCustomTimeMarker of vis timeline method.
But it seems that it's not exposed inside the component?

Could you please complete it?
Best regards
Alex