vizceral-vue

Vizceral Vue Implementation ispired by vizceral-react

Setup

Install package:

npm install vizceral-vue --save

Import component and start using it:

import VizceralVue from 'vizceral-vue';
Vue.use(VizceralVue);

Example of usage:

import Vizceral from 'vizceral-vue';

<vizceral-vue
  :traffic="trafficData"
  :view="currentView"
  :showLabels="showLabels"
  :physicsOptions="physicsOptions"
  :filters="filters"
  :matchesFound="matchesFound"
  :match="searchTerm"
  :modes="modes"
  :definitions="definitions"
  :styles="styles"
/>

Props

allowDraggingOfNodes

// Default: false
allowDraggingOfNodes: Boolean

Nodes can be repositioned through dragging if and only if this is true.

definitions

// Default: {}
definitions: Object

Object map of definitions. Refer to github.com/Netflix/Vizceral/wiki/Configuration#definitions-for-data-to-display

filters

// Default: []
filters: Array

Array of filter definitions and current values to filter out nodes and connections. Refer to github.com/Netflix/Vizceral/wiki/Configuration#filters

match

// Default: ''
match: String

A search string to highlight nodes that match.

modes

modes: Object

Map of modes to mode type, e.g. { detailedNode: 'volume' }.

objectHighlight

objectHighlight: Object

Pass in an object to highlight.

showLabels

// Default: true
showLabels: Boolean

Whether or not to show labels on the nodes.

styles

// Default: {}
styles: Object

Styles to override default properties.

targetFramerate

// Default: null
targetFramerate: Number

Target framerate for rendering engine

traffic

// Default: {}
traffic: Object

The traffic data. See github.com/Netflix/Vizceral/wiki/How-to-Use#graph-data-format for specification.