JarCastingVizceral
From src/vizceral.jsx
This is a react wrapper around Vizceral.
Setup
-
Install package
npm install vizceral-react --save -
import vizceral-react to start using
import Vizceral from 'vizceral-react'; <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.
