Planning¶
Overview¶
Insight Planning allows you to show a Gantt diagram based view 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 use Planning from a context menu use the menu-action "planning":
{
"label": "Teamplanung",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "team-workorder-planning"
},
"tab": {
"label": "Planung Teams"
},
"table": {
"tree": "jobtask"
}
}
]
}
The used tree depends on where you call the menu-action from:
- From the menu of a tree: All records of the root node will be shown in the gantt view.
- From the contextmenu of a node: The Gantt-view will be opened from the right-clicked record. If you specify a tree, the id of the node will be interpreted as a record of the root node of the specified tree.
- Expand Rows: To initially expand all gantt-rows set expandRows to true.
- absoluteZero A date that represents the absolute start for the gantt diagram. It is automatically passed to the header format js function.
TODO: Examples
Views¶
Insight Planning can be shown with different view ranges and steps. If not specified, Insight will use default values. 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 initial default.
- range: Definition of the view-range. You can choose between relative ranges (relative to the reference date), absolute ranges and auto ranges (will load the date range so that all row temporals will be inside the date range). From and to fields set the date range, step will set the amount of time to move the reference date by when moving the current date range.
- 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": "team-workorder-planning"
"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": "team-workorder-planning"
"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": "team-workorder-planning"
"views": [
{
"label": "Month",
"icon": "icon-calendar-31",
"default": true,
"range": {
"from": "auto",
"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": "team-workorder-planning",
"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 the gantt diagram in Insight Planning. 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": "resource-person-activity",
"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
Insight Planning supports 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, 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 Insight Planning 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. 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 rows 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 view's 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}"
}
}
Tasks¶
An Insight node can be visualized as a task in a Gantt. 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}"
}
}
Layouting¶
There are various ways to style and layout the contents of Insight gantts. 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 Insight gantt structure is not guaranteed to stay the same 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 configuration for a task directly. Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"planning": {
"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": {
"color": "red"
}
}
Font size¶
You can specify the font size in the gantt configuration for a task directly (Default: 10). Example:
{
"name": "my-example-node",
"title": "Examples",
"label": "${myLabelAttribute}",
"icon": "icon-site-map",
"planning": {
"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": {
"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": {
"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": {
"textAlign": "right"
}
}
Possible values are: left, right and center
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"
}
}
]
}
Context menu¶
The gantt 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.
- ganttBeginDate: The date of the position on the gantt 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}"
}
}
}
Moving gantt-tasks and Drag & Drop:¶
To be able to move the dates of a gantt-task or if you want to move a gantt-task between the rows a Drag&Drop configuration between the row and the task is required. Drag and drop from outside the gantt are also possible.
If you specify the optional clientProperty "allowRowSwitching": "false", a drag&drop between the gantt-rows will be prevented. The task can then only be moved on the time-axis.
If dropped on the gantt the url-parameters of the called script can be parametrized with the following additional replacement parameters:
-
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 ganttt 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 (if not changed, the current day). 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
Example of a Drag&Drop Configuration calling a script:
{
"src": "assignmentSickness",
"dst": "person",
"clientProperties": {
"allowRowSwitching": false
},
"action": {
"method": "POST",
"url": "insight/action/business-suite/updateAssignment",
"params": {
"resourceId": "${dst.id}",
"assignmentId": "${src.id}",
"beginDate": "${gantt.beginDate}",
"endDate": "${gantt.endDate}"
},
"headers": {
"Accept": "application/json",
"Content-Type": "application/json"
}
}
}
Example of a groovy-script for updating the start and finish date and moving between rows. The start and finish of the task is saved as local date and time in the fields beginDate and endDate:
import java.time.*
import java.time.temporal.*
import java.time.format.*
def toTemporal(dateString){
return OffsetDateTime.parse(dateString).toLocalDateTime();
}
def updateAssignment(p){
sql.withTransaction {
if (p.beginDate!=null && p.endDate!=null){
def begin,end;
begin = toTemporal(p.beginDate);
end = toTemporal(p.endDate);
sql.executeUpdate("UPDATE Assignment SET beginDate=$begin, endDate=$end WHERE id=$p.assignmentId");
}
if (p.resourceId!=null){
sql.executeUpdate("UPDATE Assignment SET resourceId=$p.resourceId WHERE id=$p.assignmentId");
}
}
}
updateAssignment(params);
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": "team-workorder-planning",
"views": [
{
"label": "Month",
"icon": "icon-calendar-31",
"default": true,
"range": {
"from": "P0D",
"to": "P4DT23H",
"step": "P1D"
},
"magnetType": 2
}
]
}
}
]
}
You can choose between the following magnetTypes:
- 0: Minutes
- 1: Hours
- 2: Days
- 3: Weeks
- 4: Months
- 5: Quarters
- 6: Years
Tab¶
To configure the label of the planning-tab use the following configuration.
{
"label": "Calendar",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity"
},
"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": "resource-person-activity"
},
"table": {
"tree": "jobtask"
}
}
]
}
All configurations from Insight Tables apply.
Bottom-Gantt¶
You can configure an additional gantt below the top gantt. This is a special case where special rules are in place: - Drag and Drop between both gantts is supported - Both gantts are synchronized, meaning they share the same timeframe, date and scroll dimensions. If anything of these on the top gantt are updated, the bottom gantt will update itself automatically.
To configure a bottom gantt, 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.
Columns¶
You can configure the columns shown left in the tree-table area of the 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": "resource-person-activity"
"columns": [
{
"id": "siteName",
"type": "string",
"label": "Site",
"width": 150,
"sortable": true,
"value": "siteName"
}
],
}
}
]
}
- id: An internal id to map the columns.
- type: Type of the values rendered in the column.
- 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: The Insight Attribute to draw the value from for this column.
Highlights¶
Insight Planning can highlight time ranges or specific dates to better visualize holidays, vacations, etc.
To support one specific category of highlightable dates, use the following notation:
{
"label": "Calendar",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"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": "resource-person-activity",
"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 Gantt Startup, setting "selected": "false" on that category. Default is true.
TODO: Example config for unselected highlight
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.
TODO: Document color, script based loading
Automatic Refresh¶
Insight Planning supports 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. Example:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"refresh": 30000
}
}
]
}
Filters¶
You can configure client side filters for the Insight Planning Gantt chart. Those filters will display as dropdowns that the user can select from. By default an "all" and "none" option will be available, as well as a list of all possible options based on the currently loaded data.
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 at the same time are supported. Example:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"filters": [
{
"name": "name",
"label": "Name",
"node": "node"
},
{
"name": "description",
"label": "Description",
"node": "node"
}
]
}
}
]
}
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 to a filter, use the following notation:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"filters": [
{
"name": "name",
"label": "Name",
"node": "node",
"value": "${attributeWithInitialValue}"
}
]
}
}
]
}
Searches¶
You can configure searches so that the user can search for specific task objects in the gantt diagram. The configured searches are close in functionality to the filters mentioned above and fire against the configured underlying record's attribute.
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"searches": [
{
"name": "name",
"label": "Name"
},
{
"name": "description",
"label": "Description"
}
]
}
}
]
}
Master Details¶
You can configure a Master-Detail view for Insight Planning. When activated and a user clicks on any given task object in the gantt diagram, the details view of that task object will be loaded next to the gantt. Additionally, you can also configure the sizes of the gantt diagramm and appearing details view.
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity"
"width": "twelve",
"details": {
"width": "four"
}
},
"tab": {
"label": "Planning Employees"
},
"table": {
"tree": "jobtask",
"width": "sixteen"
}
}
]
}
Custom Initial settings¶
You can configure initial settings the gantt will use after loading.
Date: The 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": "resource-person-activity",
"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": "resource-person-activity",
"initial": {
"date": "${planningStart}"
}
}
}
]
}
Search: The configured gantt search to fire automatically after loading. If you dont have a matching search configured, Insight Planning will throw an error.
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {,
"tree": "resource-person-activity",
"initial": {
"search": {
"name": "activityState",
"value": "Planung"
}
}
}
}
]
}
You can also use the replace notation to set the initial search value based on the clicked tree item's properties.
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {,
"tree": "resource-person-activity",
"initial": {
"search": {
"name": "activityState",
"value": "${id}"
}
}
}
}
]
}
Load Behaviour and Performance¶
Loading lots of rows in Insight Planning can take a huge toll on client side performance. Having too many rows configured will take longer during the actual loading process. If an Insight Planning instance is not limited to specific rows and instead will load all root rows of an Insight treeConfig, Insight Planning will automatically only load the first X rows. You can then navigate the currently loaded "page" through the total amount of rootRows.The default amount for non-fullscreen loadable rows is 15, for fullscreen 40. You can override these settings with the following configuration:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"rows": {
"default": 15,
"fullscreen": 40
}
}
}
]
}
If you load an Insight Planning instance with context objects, Insight Planning will automatically load the frame of root rows around the clicked context object. If you only want to load the actual clicked row and render it as the single row in the Gantt view, you can use the following configuration:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"focusOnSelection": true
}
}
]
}
If you want to display usecases with high amounts of data (more then 100.000 objects) you might run into bad rendering performance by the Insight Planning gantt component. You can prevent that with the following notation, that will tell the gantt component to render only the currently visible subrange of the overall gantt:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"performanceOptimization": true
}
}
]
}
Jump Buttons¶
Insight Planning supports specific buttons to jump to a preconfigured date. Example:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"jumpTo": [
{
"label": "Start",
"date": "${$payload.start}",
"icon": "step backward"
},
{ "label": "Heute", "icon": "clock" },
{
"label": "Ende",
"date": "${$payload.end}",
"icon": "step forward"
}
]
}
}
]
}
Note: If you omit the "date" configuration, the button will result in a jump to the current date.
You can optionally specify the row the visualization should start at and / or the task to focus after loading. TODO: Example row / task config.
Inactive Ranges¶
Insight Planning will visualize time ranges as inactive automatically, 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 used for planning. You can deactive this feature by using:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"displayInactiveRanges": false
}
}
]
}
- Tasks existing outside of the parent row's temporal range are clipped and only rendered up until the temporal's border. You can deactive this feature by using:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"showTasksOutsideOfParent": true
}
}
]
}
Miscellaneous¶
You can prevent users being able to resize tasks, default being true.
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"allowResizing": false
}
}
]
}
You can hook into and change the actual temporal values for each record before they are being used for fetching data.
"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.
"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": "resource-person-activity",
"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 the auto-scrolling Feature activates (default: 75). Example:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"autoScrollEnabled": false
}
}
]
}
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"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": "resource-person-activity",
"infoWindow": true
}
}
]
}
You can set task labels to automatically update their position on user scrolling so that the labels are always readable independent of original position. Example:
{
"label": "Employees",
"action": "planning",
"icon": "icon-new-tab",
"actionValues": [
{
"gantt": {
"tree": "resource-person-activity",
"stickyTaskLabels": true
}
}
]
}
If you want to make rows dragable, 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": "resource-person-activity",
"tableDefaultAreaActive": true
}
}
]
}