Gantt¶

Overview¶

Insight allows you to show a Gantt diagram view based on data from a tree-configuration. It can be used to plan resources and supports drag and drop, moving tasks, styling, resizing and many custom settings.

Initilization¶

To open a Gantt chart from a context menu use the menu-action planning:

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree"
            },
            "tab": {
                "label": "Planung Teams"
            },
            "table": {
                "tree": "jobtask"
            }
        }
    ]
}

The content of the Gantt chart depends on where you call the menu-action from:

From the menu of a tree: All records of the tree marked with planning will be shown in the Gantt view, starting at the first record based on the configured sortBy of the mapping configuration.
From the contextmenu of a node: The Gantt view will be opened from the right-clicked record but will still load all records tagged with planning in the specified tree. If you specify a tree, the id of the node will be interpreted as a record of the root node of the specified tree.
From the contextmenu of a node with filterOnSelection: Only shows the record the menu action was started on in the opened Gantt view, based on the configurations in the configured tree. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "filterOnSelection": true
            }
        }
    ]
}

Views¶

Gantt charts support different views. Each view can be shown with different view ranges and steps. The following view settings can be configured:

label: The label of the view. Examples: Year, Week, Month.
icon: The icon of the view. Examples: icon-calendar-31, icon-clock3.
default: Set to true, if you want to use this view as the initially loaded view.
range: Definition of the view-range.
- step: Defines how much you move on the time scale each step.
- from / to: Defines what time range is loaded. You can choose between:
  - relative ranges (relative to the reference date)
  - absolute ranges (pass absolute values)
  - auto ranges (will load the date range so that all row temporals will be inside the date range)
    - can be limited to just calculate the range based on one specific node
  - And any combination between these variations
headers: The header configurations for that view, see headers for more information.

Example (relative range):

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "P0D",
                            "to": "P4DT23H",
                            "step": "P1D"
                        }
                    }
                ]
            }
        }
    ]
}

Example (absolute range):

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "2020-01-01T00:00:00",
                            "to": "2030-01-01T00:00:00",
                            "step": "P1D"
                        }
                    }
                ]
            }
        }
    ]
}

Example (auto range):

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "auto",
                            "to": "auto",
                            "step": "P1D"
                        }
                    }
                ]
            }
        }
    ]
}

Example (auto range based on one node). This will shrink the shown date range after loading to just display all rows / tasks based on the given autoNode name:

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "auto",
                            "to": "auto",
                            "step": "P1D",
                            "autoNode": "activityWaggon"
                        }
                    }
                ]
            }
        }
    ]
}

Example (mixed modes):

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "-P1M",
                            "to": "auto",
                            "step": "P1D"
                        }
                    }
                ]
            }
        }
    ]
}

You can also change the zooming behaviour of a view by either scaling the view to fit to the screen upon initial load, set a manual initial zoom factor via config, as well as min and max zoom factors. Example:

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "scaleToFit": true,
                        "scaleFactor": 5,
                        "minScaleFactor": 0.1,
                        "maxScaleFactor": 2000,
                        "range": {
                            "from": "auto",
                            "to": "auto",
                            "step": "P1D"
                        }
                    }
                ]
            }
        }
    ]
}

Headers¶

You can configure and adapt the headers shown at the top of a Gantt chart. If you do not configure any headers, default headers will be used based on your view settings. You can change the actual headers shown for a given view with the following configuration:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "LABEL_YEAR",
                        "headers": {
                            "month": {
                                "format": "return start.format('MMMM YYYY');"
                            },
                            "week": {
                                "format": "return 'some String';"
                            },
                            "custom1": {
                                "tree": "header-data",
                                "scale": "week",
                                "format": "var a = start.startOf('week'); var b = moment(absoluteZero, 'DD.MM.YYYY').startOf('week'); var diff = a.diff(b, 'week'); if(diff = 0) { diff += 1; } var hit = data.filter(function(each) { return each.properties.id == diff }); if(hit.length  0) { return hit[0].properties.activityAmount; } else { return '-' }"
                            }
                        }
                    }
                ]
            }
        }
    ]
}

The following properties can be configured inside each header: - name: The name used as a label for the header, optional. - scale: The scale that header should use, optional. If no scale is used, the header key will be used as a scale. See list of supported scales for valid scale configurations. - format: The format function to apply for each header cell, optional. If no format function is configured, a default label for each cell will be calculated based on the type of the header. - tree: The tree configuration that should be loaded as input for the custom format function, optional - color: A custom background color for that header, optional - fontColor: A custom font color for that header, optional

Gantt charts support the following scales of headers: - millisecond - second - minute - hour - day - week - month - quarter - year

Variables accessible in the configurable format js function: - start: The start date of the current header cell. - end: The end date of the current header cell. - currentView: The currentView that is active. - absoluteZero: The absolute start point of the Gantt chart, if configured. - data: The data from the tree root fetch for this header, if configured.

Notes: - If you dont specify the headers property in a view, the default Gantt chart behaviour kicks in and the headers will be automatically calculated based on the views other properties. - If you define the headers property as an empty object, the view will have no headers at all. - You can define complete custom headers. If you do so, you need to define a scale that header should use.

You can also add additional information to the tooltips for each header cell that gets prepended to the default range tooltip of each cell. Example:

{
    "label": "Gantt usecase",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "LABEL_YEAR",
                        "headers": {
                            "custom1": {
                                "name": "custom1",
                                "tooltip": "Additional Information",
                                "tree": "header-data",
                                "scale": "week"
                            }
                        }
                    }
                ]
            }
        }
    ]
}

Rows¶

An Insight node can be visualized as a row in a Gantt chart. Not allowed, if parent node is a task. Please note, that if you choose to use a node in a deeply nested hierarchy, all of it's parent nodes need to be marked as a row as well. Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "row": true
    }
}

A row may optionally define a temporal. A temporal on a row has several uses: - It can automatically crop out tasks and time ranges, that are outside of the row's temporal (see here) - It can be used with a Gantt charts view auto range feature to automatically determine which time frame to load

Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "temporal": {
        "start": "${startDate}",
        "finish": "${endDate}"
    }
}

You can configure, if all rows should be expanded on initial load (default: false). Example:

{
    "label": "Planning",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "expandRows": true
            }
        }
    ]
}

Gantt charts offer auto-generated menu actions on each row to go to the first or last task of each row, if the row currently has loaded tasks. You can limit the search of what counts as the first or last task to only a specific type of node with the following notation:

{
    "label": "Planning",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "focusNodeName": "myNodeName"
            }
        }
    ]
}

You can add tooltips to a row that are shown when hovering over any free area of a row. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "tooltip": "Row: ${myIdAttribute}",
    "planning": {
        "row": true
    }
}

Tasks¶

Insight nodes can be visualized as a task in a Gantt chart. Only allowed, if the parent node or the node itself is defined as a row. Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true
    }
}

A task needs to have a temporal to determine where to render it. If any of the range attributes is not available or empty, the task will be omitted. Use the following notation:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "temporal": {
        "start": "${startDate}",
        "finish": "${endDate}"
    }
}

Moving tasks¶

You can move tasks within the row they exist in. For this to work, you need to have a valid Drag and Drop configuration. This will both allow moving the task and resizing it. Example:

{
    "src": "task",
    "dst": "row",
    "action": {
        "method": "POST",
        "url": "insight/eam/rpc/moveTask",
        "params": {
            "rowId": "${dstObject.uniqueId}",
            "taskId": "${srcObject.uniqueId}"
        },
        "headers": {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }
}

If you do not want to allow a task to be resized, use "resize": false. By default, all tasks that are movable are also resizeable. A task that is not movable is also not resizeable. Example:

{
    "src": "task",
    "dst": "row",
    "resize": false,
    "action": {
        "method": "POST",
        "url": "insight/eam/rpc/moveTask",
        "params": {
            "rowId": "${dstObject.uniqueId}",
            "taskId": "${srcObject.uniqueId}"
        },
        "headers": {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }
}

If you do not want to allow switching a task from it's row to a different row, use "allowRowSwitching": false. By default, all tasks that are movable are also switchable. A task that is not movable is also not switchable. Example:

{
    "src": "task",
    "dst": "row",
    "allowRowSwitching": false,
    "action": {
        "method": "POST",
        "url": "insight/eam/rpc/moveTask",
        "params": {
            "rowId": "${dstObject.uniqueId}",
            "taskId": "${srcObject.uniqueId}"
        },
        "headers": {
            "Content-Type": "application/x-www-form-urlencoded"
        }
    }
}

When calling a script after a successfull Drag and Drop operation within the Gantt chart, additional context parameters are available:

gantt.beginDate: The start of the task. Example: 2007-12-03T00:00:00+02:00. This property will be available if:
- the task is moved on the time-axis,
- a drag & drop to the time-axis from outside the Gantt or
- a drag & drop from between different rows.
gantt.endDate: The end of the task. Will only be available, if the task is moved on the time-axis. Example: 2008-12-03T00:00+02:00
gantt.referenceDate: The reference date of the gantt. Example: 2007-12-03T00:00+02:00
src: The record of the task. Use to access the record of the task
dst: The record of the row. Use to access the record of the row

You can also move items from other components like tables in Insight via Drag and Drop into Insight Gantt charts. The necessary Drag and Drop configurations will be the same.

Magnet¶

If you do not want to allow completely free movement of tasks both during normal move operations and while dragging a new task into a Gantt, you can use a magnet. This will make sure that tasks can only be moved in multiples of a specific date type. Example:

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "P0D",
                            "to": "P4DT23H",
                            "step": "P1D"
                        },
                        "magnetType": "days"
                    }
                ]
            }
        }
    ]
}

You can choose between the following magnetTypes:

minutes
hours
days
weeks
months
quarters
years

You can further differentiate the magnet by setting multiples of the used magnetType. This way, you can let the user only move tasks every 3 days, 2 weeks, etc. Example:

{
    "label": "Teamplanung",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "views": [
                    {
                        "label": "Month",
                        "icon": "icon-calendar-31",
                        "default": true,
                        "range": {
                            "from": "P0D",
                            "to": "P4DT23H",
                            "step": "P1D"
                        },
                        "magnetType": "days",
                        "magnetFactor": 5
                    }
                ]
            }
        }
    ]
}

Overlapping tasks¶

You can automatically let the Gantt chart visualize overlapping tasks with a colored border for easier handling (Default: false). This will result in all tasks of all node types being checked for overlapping with each other. Overlaps are colored red by default. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "overlap": true
            }
        }
    ]
}

You can override the overlapping color. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "overlap": {
                    "color": "blue"
                }
            }
        }
    ]
}

You can only check for overlappings between specific task types. Each of these collision categories can set its own color. If a task has several collisions, all collision colors are displayed. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "overlap": {
                    "categories": [
                        { "nodes": ["a", "b"], "color": "yellow" },
                        { "nodes": ["a", "c"], "color": "blue" },
                        { "nodes": ["c", "a"], "color": "green" }
                    ]
                }
            }
        }
    ]
}

If you want to have several specific types of overlap checking but want them to all have the same color, you can use the following combination:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "overlap": {
                    "categories": [
                        { "nodes": ["a", "b"] },
                        { "nodes": ["a", "c"] },
                        { "nodes": ["c", "a"] }
                    ],
                    "color": "blue"
                }
            }
        }
    ]
}

Layouting¶

There are various ways to style and layout the contents of a Gantt chart. For specific settings see below. Generally, you can add custom CSS classes to any row or task and style them with a customize.css file. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "css": "my-class my-class2"
    }
}

This feature should be used carefully, as writing custom CSS selectors are in risk of failing silently after future updates. The overall Gantt chart structure is not guaranteed to stay the same over updates and is bound to change over time. Setting layout and styling options directly in the configuration is the preferred method.

Background color¶

If a color.js function is configured, it has the highest priority. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "color": {
        "js": "return 'red'"
    }
}

If a simple color value for the overall task is configured, it has the next highest priority. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "color": "${statusColor}"
}

You can specify the backgroundColor in the Gantt chart configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "backgroundColor": "red"
    }
}

Font color¶

You can specify the font color in the Gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "color": "red"
    }
}

Font size¶

You can specify the font size in the Gantt chart configuration for a task directly (Default: 10). Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "fontSize": 14
    }
}

Borders¶

You can specify the overall border or a specific border side in the Gantt configuration for a row or task directly. Examples:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "border": "black"
    }
}

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "borderLeft": "black",
        "borderRight": "black",
        "borderTop": "black",
        "borderBottom": "black"
    }
}

Vertical position¶

You can specify the top offset in the Gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "top": "10"
    }
}

Height¶

You can specify the height in the Gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "height": "18"
    }
}

Text align¶

You can specify the text align in the Gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "align": "right"
    }
}

Background pattern¶

You can specify a background pattern in the Gantt configuration for a task directly. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "planning": {
        "task": true,
        "pattern": {
            "steps": [
                {
                    "width": 10,
                    "color": "red"
                },
                {
                    "width": 10,
                    "color": "blue"
                }
            ],
            "angle": 45
        }
    }
}

Header color¶

You can set the header background color if you do not want the default grey. Example:

{
    "label": "Gantt usecase",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "headerColor": "red"
            }
        }
    ]
}

Header font color¶

You can set the header font color if you do not want the default white. Example:

{
    "label": "Gantt usecase",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "headerFontColor": "black"
            }
        }
    ]
}

Each Gantt chart will automatically render a context menu when right clicking on tasks or rows, if their nodes have menu actions configured. Menu actions triggered by this context menu will have additional parameters available for use.

ganttReferenceDate: The reference date as shown above the Gantt chart.
ganttBeginDate: The date of the position on the row, where the right click was issued.

{
    "label": "New task",
    "action": "request",
    "script": {
        "backend": "business-suite",
        "name": "createAssignment",
        "params": {
            "resourceId": "${id}",
            "referenceDate": "${ganttReferenceDate}",
            "beginDate": "${ganttBeginDate}"
        }
    }
}

Tab¶

To configure the label of the planning-tab use the following configuration.

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree"
            },
            "tab": {
                "label": "Planung Teams"
            }
        }
    ]
}

Table¶

The gantt component comes with an optional table attached below for easy drag&drop. Example:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree"
            },
            "table": {
                "tree": "jobtask"
            }
        }
    ]
}

All configurations from Insight Tables apply.

Bottom-Gantt¶

You can configure an additional Gantt chart below the top Gantt chart. This is a special case where special rules are in place: - Drag and Drop operations between both Gantt charts are supported. - Both Gantt charts are synchronized, meaning that they share the same timeframe, date and scroll dimensions. If anything of these on the top Gantt chart are updated, the bottom Gantt chart will update itself automatically.

To configure a bottom Gantt chart, use the following notation:

{
    "label": "Planning",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "top-gantt"
            },
            "bottomGantt": {
                "tree": "bottom-gantt"
            }
        }
  ]
}

In addition, any gantt communicates it's events with the Insight Client to which the bottom gantt can react via config. Example:

{
    "label": "Planning",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "top-gantt"
            },
            "bottomGantt": {
                "tree": "bottom-gantt",
                "events": [
                    {
                        "event": "gantt.task.clicked",
                        "action": {
                            "action": "request",
                            "script": {
                                "backend": "business-suite",
                                "name": "my-backend-script"
                            }
                        }
                    }
                ]
            }
        }
    ]
}

Available events are:

gantt.range.updated
gantt.date.updated
gantt.view.updated
gantt.scrolled
gantt.pagination.updated
gantt.tab.reused
gantt.row.clicked
gantt.row.right.clicked
gantt.task.clicked
gantt.task.right.clicked
gantt.task.moved
gantt.task.resized

When using the gantt events, you automatically have context data available depending on the event.

You can also adapt the height that each of the Gantt charts takes up on the physical screen. Example:

{
    "label": "Planning",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "top-gantt",
                "height": {
                    "top": "66",
                    "bottom": "34"
                }
            },
            "bottomGantt": {
                "tree": "bottom-gantt"
            }
        }
    ]
}

Columns¶

You can configure the columns shown left in the tree-table area of a Gantt chart. By default, there is always one column automatically generated containing the label of the row item rendered. You can add additional columns with the following notation:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "columns": [
                    {
                        "name": "siteName",
                        "type": "string",
                        "label": "Site",
                        "width": 150,
                        "sortable": true,
                        "value": "siteName",
                        "pattern": "dd.MM.yyyy",
                        "nodes": ["assignment", "person"],
                        "align": "left",
                        "tooltip": "Exists at: ${siteName}"
                    }
                ]
            }
        }
    ]
}

name: An internal name to map the columns.
type: Type of the values rendered in the column. Possible values: string, number, date.
label: The label shown at the top of the column.
width: The default width the column starts with.
sortable: Whether the column can be sorted or not by the user.
value (optional): The Insight Attribute to draw the value from for this column.
pattern (optional): The pattern of the string value used for the date.
nodes (optional): An array of Insight node names which will be sorted in that column.
align (optional): Alignment of the column content. Default: center, possible values: center, left, right
tooltip (optional): Tooltip of the column.

Gantt charts support columnConfiguration. Example:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "columnConfiguration": true,
                "columns": [
                    {
                        "name": "siteName",
                        "type": "string",
                        "label": "Site",
                        "width": 150,
                        "sortable": true,
                        "value": "siteName",
                        "pattern": "dd.MM.yyyy",
                        "nodes": ["assignment", "person"],
                        "align": "left"
                    }
                ]
            }
        }
    ]
}

To change the way date columns display their date, use the following notation:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "datePattern": "dd.mm.YYYY"
            }
        }
    ]
}

Highlights¶

Gantt charts can highlight time ranges or specific dates to better visualize holidays, vacations, etc. To visualize one specific category of highlightable dates, use the following notation:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "highlight": [
                    {
                        "name": "Vacations",
                        "tree": "public-holidays",
                        "value": "${someDate}",
                        "label": "name",
                        "pattern": "YYYY-MM-DD",
                        "css": "my-css-class-applied"
                    }
                ]
            }
        }
    ]
}

If you want to highlight date ranges instead of specific dates, use the following notation:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "highlight": [
                    {
                        "name": "Vacations",
                        "tree": "public-holidays",
                        "from": "${startDate}",
                        "to": "${endDate}",
                        "label": "name",
                        "pattern": "YYYY-MM-DD",
                        "css": "my-css-class-applied"
                    }
                ]
            }
        }
    ]
}

You can mix date ranges with specific dates in one highlight category. If an entry has no to value, the from value will be interpreted as the concrete date. You can also define which of the highlight categories are active on startup, setting "selected": false on that category. Default is true. Example:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "highlight": [
                    {
                        "name": "Vacations",
                        "tree": "public-holidays",
                        "from": "${startDate}",
                        "to": "${endDate}",
                        "label": "name",
                        "pattern": "YYYY-MM-DD",
                        "css": "my-css-class-applied",
                        "selected": false
                    }
                ]
            }
        }
    ]
}

To change the default color scheme of each highlight-category, simply add your own css classes to the customize.css file and reference them as shown above. Important: While supported, this feature is discouraged as noted above. Styling Gantt charts with custom CSS means that the CSS settings will not be present during the PDF Export process and are bound to break over updates. The recommended way is to set the color for a highlight category directly via config. Example:

{
    "label": "Calendar",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "highlight": [
                    {
                        "name": "Vacations",
                        "tree": "public-holidays",
                        "from": "${startDate}",
                        "to": "${endDate}",
                        "label": "name",
                        "pattern": "YYYY-MM-DD",
                        "color": "red"
                    }
                ]
            }
        }
    ]
}

Automatic Refresh¶

Gantt charts support automatic background refreshing. This will refresh all rows in the Gantt diagram. To reduce stress on the server, this feature is not enabled by default and should be used carefully. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "refresh": 30000
            }
        }
    ]
}

Filters¶

You can configure filters for Gantt charts. Those filters will display as filter popups that the user can select options from. A list of all possible values to filter by will be displayed. This feature is identical to filter popups in Insight Tables. You can define filters for both rows and tasks. All objects that match the selected filter values are displayed, all other objects are hidden. Multiple filters of the same node at the same time are supported as well as multiple filters on different nodes at the same time. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "filters": [
                    {
                        "name": "name",
                        "label": "Name",
                        "node": "nodeA"
                    },
                    {
                        "name": "description",
                        "label": "Description",
                        "node": "nodeB"
                    }
                ]
            }
        }
    ]
}

Please note that the configured filter's name is the attribute name of the record underlying the row or task model and has to match. You also need to specify which node of rows or tasks the filter applies to. If you want to set an initial value for a filter, use the following notation:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "filters": [
                    {
                        "name": "name",
                        "label": "Name",
                        "node": "node",
                        "values": ["${attributeWithInitialValue}", "active"]
                    }
                ]
            }
        }
    ]
}

Master Details¶

You can configure a Master-Detail view for a Gantt chart. When activated and a user clicks on any given task object in the Gantt chart, the details view of that task object will be loaded next to the gantt. Additionally, you can also configure the sizes of the Gantt chart and appearing details view.

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "width": "twelve",
                "details": {
                    "width": "four"
                }
            },
            "tab": {
                "label": "Planning Employees"
            },
            "table": {
                "tree": "jobtask",
                "width": "sixteen"
            }
        }
    ]
}

Custom Initial settings¶

You can configure an initial date the gantt will use as it's reference date after loading. If you dont specify this setting, the gantt will always load around the current Date.

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "initial": {
                    "date": "2024-11-14T23:00:00.000Z"
                }
            }
        }
    ]
}

You can also use the replace notation to set the initial date based on the clicked tree item's properties.

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "initial": {
                    "date": "${planningStart}"
                }
            }
        }
    ]
}

Pagination¶

Gantt charts support pagination. If more rows than the current pageSize setting exist, the rest are accessible through pagination while only the first page of rows will be loaded. The default pageSize is 15. You can also set pageSizeOptions to define what options the user can set the pageSize to themselves. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pageSize": 50,
                "pageSizeOptions": [10, 50, 100, 1000]
            }
        }
    ]
}

Jump Buttons¶

Gantt charts support configurable buttons to jump to a specific location. You can jump to a specific date. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "jumpTo": [
                    {
                        "label": "Start",
                        "date": "2023-01-01",
                        "icon": "step backward"
                    }
                ]
            }
        }
    ]
}

You can jump to a specific row. If the row is outside of the current page, the Gantt chart will load the page that row is on. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "jumpTo": [
                    {
                        "label": "Start",
                        "icon": "icon-enter-left2",
                        "row": "tree/node/1"
                    }
                ]
            }
        }
    ]
}

You can jump to a specific task. If the task is outside of the current page, the Gantt chart will do nothing. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "jumpTo": [
                    {
                        "label": "Start",
                        "date": "2023-01-01",
                        "icon": "icon-enter-left2",
                        "task": "business-suite:Activity:$id"
                    }
                ]
            }
        }
    ]
}

Inactive Ranges¶

Gantt charts will automatically visualize time ranges as inactive, if a parent row has a temporal. This will have two effects:

row time ranges outside of their parent's row temporal range are rendered as inactive to symbolize that these areas should not be available and not be used for planning. You can deactive this feature by using:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "displayInactiveRanges": false
            }
        }
    ]
}

tasks existing outside of the parent row's temporal range are clipped and only rendered up until the parent's temporal's border. Tasks and rows with a temporal outside of the current load range are also not loaded, even if they are children of a current row. You can deactivate this feature by using:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "showTasksOutsideOfParent": true
            }
        }
    ]
}

This will result in tasks being rendered outside of their parent's temporal and all children of a given row being loaded independant of the current load range.

PDF Export¶

Gantt charts offer an automatic PDF export. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": true
            }
        }
    ]
}

Please note, that for very large Gantt charts, the PDF export might take some time. Your browser will not be responsive during that time. Please also make sure that if you use this feature, you do not use any of the custom CSS features. Custom CSS features (where you define custom CSS that get's applied to an element because of a matching class name) are not present during a PDF export and will only leave black areas. In order to get custom colors, borders, etc. into PDF exports, please use the direct layouting configurations as described above. You can heavily customize the way your PDF is exported.

Columns¶

By default, all columns of the TreeTable are exported. You can choose to only export specific columns. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "columns": ["columnA", "columnB"]
                }
            }
        }
    ]
}

Zoom¶

You can zoom in or out of the resulting PDF. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "zoom": 2
                }
            }
        }
    ]
}

Orientation¶

You can change the PDF orientation (Default: p for portrait). Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "orientation": "l"
                }
            }
        }
    ]
}

Format¶

You can change the page format (Default: a4). Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "format": "a5"
                }
            }
        }
    ]
}

Margins¶

You can change the default margins to gain more space. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "leftMargin": 20,
                    "rightMargin": 20,
                    "topMargin": 20,
                    "bottomMargin": 20
                }
            }
        }
    ]
}

Header / Footer¶

You can add a custom header and footer to the generated PDF to add more information. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "header": {
                        "content": "header info text",
                        "fontSize": 10,
                        "align": "center"
                    },
                    "footer": {
                        "content": "footer info text",
                        "fontSize": 10,
                        "align": "center"
                    }
                }
            }
        }
    ]
}

Max pages¶

You can limit the amount of x axis pages generated. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "pdf": {
                    "maxHorizontalPages": 10
                }
            }
        }
    ]
}

Miscellaneous¶

You can hook into and change the actual temporal values for each record before they are being used to fetch data. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "temporal": {
        "start": "zieltermin",
        "finish": "soll",
        "js": "if (moment(from).isBefore(moment(to))) { return { from: from, to: to }; } else { return { from: to, to: from }; }"
    }
}

You can hook into the node.color setting and set the color with a js function. Example:

{
    "name": "my-example-node",
    "title": "Examples",
    "label": "${myLabelAttribute}",
    "icon": "icon-site-map",
    "color": {
        "js": "if(current.properties.zieltermin === null) { return '#ffbf00'} else if(moment(current.properties.soll).isSame(moment(current.properties.zieltermin), 'week')) { return '#ffbf00'} else if(moment(current.properties.soll).isBefore(moment(current.properties.zieltermin))) { return '#FF0000'; } else { return '#77df77'; }"
    }
}

You can adapt the way the current date is visually displayed. Options are none, line and box with box being the default. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "nowDisplayType": "line"
            }
        }
    ]
}

You can change the behaviour of the auto-scrolling feature by activating (true) / deactivating (false) it (default: true), or changing the size of the area within which the auto-scrolling feature triggers (default: 75). Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "autoScrollEnabled": false,
                "autoScrollSize": 100
            }
        }
    ]
}

You can enable an Info Window that displays date data to a currently moving task for easier visualization. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "infoWindow": true
            }
        }
    ]
}

You can set task labels to automatically update their position on user scrolling so that their labels are always readable independent of original position. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "stickyTaskLabels": true
            }
        }
    ]
}

If you want to make rows draggable, you need to configure a dnd action for the row and enable the defaultTableArea. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "tableDefaultAreaActive": true
            }
        }
    ]
}

You can define what the leading header type is. The leading header type defines the basic relationship between how many pixels represent what time unit. By default, the leading header type is a weeks header and defines that without zooming one week of time is equal to 84 pixels. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "leadingHeaderType": "days"
            }
        }
    ]
}

You can change the behaviour of the time range buttons above the Gantt chart. scroll displays two buttons representing the start and end date of the currently loaded time range. Clicking these buttons will scroll the gantt to that specific date. none will hide these buttons. Default: scroll. Example:

{
    "label": "Employees",
    "action": "planning",
    "icon": "icon-new-tab",
    "actionValues": [
        {
            "gantt": {
                "tree": "gantt-tree",
                "timeRangeButtons": "none"
            }
        }
    ]
}

Gantt¶

Overview¶

Initilization¶

Views¶

Headers¶

Rows¶

Tasks¶

Moving tasks¶

Magnet¶

Overlapping tasks¶

Layouting¶

Background color¶

Font color¶

Font size¶

Borders¶

Vertical position¶

Height¶

Text align¶

Background pattern¶

Header color¶

Header font color¶

Context menu¶

Tab¶

Table¶

Bottom-Gantt¶

Columns¶

Highlights¶

Automatic Refresh¶

Filters¶

Master Details¶

Custom Initial settings¶

Pagination¶

Jump Buttons¶

Inactive Ranges¶

PDF Export¶

Columns¶

Zoom¶

Orientation¶

Format¶

Margins¶

Header / Footer¶

Max pages¶

Miscellaneous¶