Improve this doc View source

pfTopologyMap
directive in module patternfly.charts

Description

Component for rendering topology chart on Canvas element. This is just a simple component. It has no searching/filtering or other methods. Will only render given data and return data about selected objects.
Component also supports semantic zooming. Only distance between nodes is growing/shrinking, but node size remains the same. Canvas will zoom around the mouse cursor.

Usage

as element:
<pf-topology-map
       nodes="{array}"
       edges="{array}"
       [show-node-labels="{boolean}"]
       [show-edge-labels="{boolean}"]
       [tooltip-style="{object}"]
       [select-node="{function (node) }"]
       [multi-select-nodes="{function (array) }"]
       [select-edge="{function (edge) }"]
       [multi-select-edges="{function (array) }"]>
</pf-topology-map>

Parameters

ParamTypeDetails
nodesarray

array containing objects representing graph nodes. Each node has these attributes. Only node id is mandatory parameter.

  • id: unique node identifier
  • title: node title
  • size: node radius; default value is 17
  • fileicon: this attribute specifies path to image file. eg: '/some/path/to/image/image.png'. File icon has higher priority than fonticon.
  • fonticon: css class of node icon eg: 'fa fa-info' File icon has higher priority than fonticon.
  • fill: string containing color code (basic, RGB, HEX) of node background.
  • borderColor: string containing color code (basic, RGB, HEX) of node border.
  • iconColor: string containing color code (basic, RGB, HEX) of node icon, if iconType is fonticon.
  • opacity: number from 〈0,1〉range, representing node opacity
  • utilization: number from〈0,100〉range, representing node utilization percentage
edgesarray

array of objects. Each object represents one edge between two nodes. Source and target are mandatory attributes.

  • source: id of source node
  • target: id of target node
  • lineStyle: stroke style of edge; currently only 'dashed' is avaliable
  • title: label of edge
show-node-labels
(optional)
boolean

show/hide all node tooltips

show-edge-labels
(optional)
boolean

show/hode all edge tooltips

tooltip-style
(optional)
object

object used for tooltip styling. This is an optional parameter.

  • size: text size in px
  • font: font name. eg: 'Arial'
  • textColor: string containing color code (basic, RGB, HEX) of title text.
  • background: string containing color code (basic, RGB, HEX) of title background
select-node
(optional)
function (node)

function that return selected(clicked) node from graph

multi-select-nodes
(optional)
function (array)

function that returns array of selected nodes. Multiple nodes are selected while holding the ctrl/shift key and clicking

select-edge
(optional)
function (edge)

function that return selected(clicked) edge from graph

multi-select-edges
(optional)
function (array)

function that returns array of selected edges. Multiple edges are selected while holding the ctrl/shift key and clicking

Example

Source













Demo