ngx-vizceral

Vizceral

From src/vizceral.jsx

This is a Angular wrapper around Vizceral.

Setup

1. Install package npm install ngx-vizceral --save

2. import ngx-vizceral to start using

   //app.module.ts
   import { VizceralModule}  from 'ngx-vizceral';
   
   @NgModule({
     imports: [
       VizceralModule
     ]
   })
   
   //app.component.html
   <vizceral [traffic]="this.state.trafficData"
             [view]="this.state.currentView"
             [showLabels]="this.state.displayOptions.showLabels"
             [physicsOptions]="this.state.physicsOptions"
             [filters]="this.state.filters"
             (viewChanged)="this.viewChanged()"
             (objectHighlighted)="this.objectHighlighted()"
             (nodeContextSizeChanged)="this.nodeContextSizeChanged()"
             (matchesFound)="this.matchesFound()"
             [match]="this.state.searchTerm"
             [modes]="this.state.modes"
             [definitions]="this.state.definitions"
             [styles]="styles"
   />

Props

allowDraggingOfNodes

// Default: false
allowDraggingOfNodes: Boolean

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

connectionHighlighted

// Default: () => {}
connectionHighlighted: Function

Callback for when a connection is highlighted. The highlighted connection is the only parameter.

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

matchesFound

// Default: () => {}
matchesFound: Function

Callback when nodes match the match string. The matches object { total, visible } is the only property.

modes

modes: Object

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

nodeContextSizeChanged

// Default: () => {}
nodeContextSizeChanged: Function

Callback for when the top level node context panel size changes. The updated dimensions is the only parameter.

nodeHighlighted

// Default: () => {}
nodeHighlighted: Function

Callback for when an object is highlighted. The highlighted object is the only parameter. object.type will be either 'node' or 'connection'

nodeUpdated

// Default: () => {}
nodeUpdated: 

objectHighlighted

// Default: () => {}
objectHighlighted: 

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.

view

// Default: []
view: 

viewChanged

// Default: () => {}
viewChanged: Function

Callback for when the view changed. The view array is the only property.

viewUpdated

// Default: () => {}
viewUpdated: Function

Callback for when the current view is updated.