PERT¶
A PERT-chart, also known as a network chart, visualizes object hierarchies. Tasks are displayed as cards, edges are displayed as arrows between task cards.
Opening a PERT-chart¶
To open a PERT-chart, use the menu action pert
.
{
"label": "Network Chart",
"icon": "icon-grid",
"action": "pert",
"actionValues": [
{
"pert": {
"pertTree": "my-tree"
}
}
]
}
pertTree
defines which Insight tree should be visualized as a PERT-chart.
Configuration¶
To help Insight understand which nodes of a tree configuration should be visualized as tasks and edges, mark them as either task or edge.
{
"name": "my-example-node",
"title": "Task Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"pert": {
"task": true,
"lane": "mylaneAttribute",
"group": "myGroupAttribute"
}
}
- All objects marked as task will be rendered as task cards.
- If you want to have several lanes, add the
lane
setting and reference the attribute which holds the lane-value for each object. - If you want to have several groups, add the
group
setting and reference the attribute which holds the group-value for each object.
{
"name": "my-example-node",
"title": "Edge Examples",
"label": "{myLabelAttribute}",
"icon": "icon-site-map",
"pert": {
"edge": true,
"edgeStart": "sourceId",
"edgeEnd": "targetId"
}
}
- All objects marked as edge will be rendered as edges between tasks.
- One edge-object always points from one source to one target. Please make sure both exist in the set of task data.
Layout¶
You can adapt the two base sizes the PERT-chart is rendered from: padding
and taskSize
. Both baseValues are set to 80 by default.
{
"name": "my-example-node",
"title": "Task Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"pert": {
"task": true,
"padding": 40,
"taskSize": 200
}
}
By default, node.label
, node.temporal
, node.color
, node.description
and a warning color indicator are displayed on each card. Additional custom attributes can be configured and are shown, if a user clicks on a card. You can override node.label
for the pert's task label specifically. Example:
{
"name": "my-example-node",
"title": "Task Examples",
"label": "${myLongLabelAttribute}",
"icon": "icon-site-map",
"pert": {
"task": true,
"lane": "mylaneAttribute",
"label": "${myShortLabelAttribute}",
}
}
node.temporal
Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"temporal": {
"from": "myStartAttribute",
"to": "myEndAttribute"
},
"pert": {
"task": true
}
}
node.color
Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"color": "${myColorAttribute}",
"pert": {
"task": true
}
}
node.description
Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"description": "${myDescriptionAttribute}",
"pert": {
"task": true
}
}
warningColor
Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"pert": {
"task": true,
"warningColor": "${myWarningColorAttribute}"
}
}
You can add additional attributes, that are shown, if a task card is clicked upon. Example:
{
"name": "my-example-node",
"title": "Task Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"pert": {
"task": true,
"attributes": ["id", "owner", "priority"],
}
}
You can change the way the temporal is displayed, instead of the default DD.MM.
pattern. Available parameters are replaceObject
and data
. This has to be configured on the menuConfig opening the PERT-chart. Example:
{
"label": "Network Chart",
"icon": "icon-grid",
"action": "pert",
"actionValues": [
{
"pert": {
"pertTree": "my-tree",
"temporalJs": "if(!data[replaceObject.id]) return ''; var value = data[replaceObject.id]; return value.amount + ' - ' + value.relative;",
"temporalData": "${$payload.options}"
}
}
]
}
Loading a PERT-Chart by backend scripts¶
TODO: Examples
Filter¶
TODO: Examples