Vizceral
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
;<Vizceral traffic=thisstatetrafficDataview=thisstatecurrentViewshowLabels=thisstatedisplayOptionsshowLabelsphysicsOptions=thisstatephysicsOptionsfilters=thisstatefiltersviewChanged=thisviewChangedobjectHighlighted=thisobjectHighlightednodeContextSizeChanged=thisnodeContextSizeChangedmatchesFound=thismatchesFoundmatch=thisstatesearchTermmodes=thisstatemodesdefinitions=thisstatedefinitionsstyles=styles/>
Props
allowDraggingOfNodes
// Default: falseallowDraggingOfNodes: 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: trueshowLabels: Boolean
Whether or not to show labels on the nodes.
styles
// Default: {}styles: Object
Styles to override default properties.
targetFramerate
// Default: nulltargetFramerate: 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.