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

Instead of loading a PERT chart based on an Insight tree configuration, you can also let a backend script calculate the network and then use that data in the PERT action to build the chart. Example:

{
    "label": "PERT",
    "icon": "icon-arrow-right-circle",
    "action": "pert",
    "actionValues": [
        {
            "pert": {
                "url": "insight/action/business-suite/my-pert-network",
                "taskTree": "pert-tree",
                "taskNode": "taskNodeName",
                "edgeTree": "pert-tree",
                "edgeNode": "edgeNodeName"
            }
        }
    ]
}

The properties taskTree, taskNode, edgeTree and edgeNode are used to indicate to Insight to what nodes the calculated ids from the backend script should be mapped to and interpreted as. Please note, that the backend script should calculate a JSON structure with the following schema:

{
    "components": [
        {
            "sources": [
                "id1",
                "id2",
                "id3"
            ],
            "edges": [
                [
                    "id1",
                    "id2"
                ],
                [
                    "id1",
                    "id3"
                ]
            ]
        },
        {
            "sources": [
                "otherId1",
                "otherId2"
            ],
            "edges": []
        }
    ]
}

Filter

TODO: Examples