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
    }
}

Warning color 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. 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