Indicators
The Indicators feature displays indicators (icons) for different dates related to a task in its row. Hovering an
indicator will show a tooltip with its name and date(s). The owning task id is embedded in the indicator element
dataset as taskRecordId which can be useful if you want to have custom actions when clicking (showing a menu for example).
By default, it includes and displays the following indicators (config name):
- Early start/end dates (earlyDates)
- Late start/end dates (lateDates)
- Constraint date (constraintDate)
- Deadline date (deadlineDate)
This demo shows the default indicators:
//<code-header>
fiddle.title = 'Indicators';
//</code-header>
// Project contains all the data and is responsible for correct scheduling
const project = new ProjectModel({
startDate : '2020-02-20',
tasks : [
{
id : 1,
name : 'Write docs',
expanded : true,
children : [
{
id : 2,
name : 'Proof-read docs',
startDate : '2020-02-24',
duration : 4,
constraintDate : '2020-02-24',
constraintType : 'muststarton'
},
{
id : 3,
name : 'Release docs',
startDate : '2020-02-24',
duration : 4,
deadlineDate : '2020-03-05'
}
]
}
],
dependencies : [
{ fromTask : 2, toTask : 3 }
]
});
const gantt = new Gantt({
features : {
indicators : true,
projectLines : false
},
appendTo : targetElement,
project, // Gantt needs project to get schedule data from
startDate : '2020-02-16',
endDate : '2020-03-07',
height : 240,
rowHeight : 50,
barMargin : 15,
columns : [
{ type : 'name', field : 'name', text : 'Name' }
]
});This config will display them all:
new Gantt({
features : {
indicators : true
}
});
To selectively disable indicators:
features : {
indicators : {
items : {
earlyDates : false,
constraintDate : false
}
}
}
They can also be toggled at runtime:
gantt.features.indicators.items.deadlineDate = true/false;
The feature also supports adding custom indicators, by adding properties to the items config object:
items : {
lateDates : false,
// Custom indicator only shown for tasks more than half done
myCustomIndicator : taskRecord => taskRecord.percentDone > 50 ? {
startDate : DateHelper.add(taskRecord.endDate, 2, 'days'),
name : 'My custom indicator',
iconCls : 'fa fa-alien'
} : null
}
This demo shows a custom indicator:
//<code-header>
fiddle.title = 'Custom indicators';
//</code-header>
// Project contains all the data and is responsible for correct scheduling
const project = new ProjectModel({
startDate : '2020-02-20',
tasks : [
{
id : 1,
name : 'Write docs',
expanded : true,
children : [
{
id : 2,
name : 'Proof-read docs',
startDate : '2020-02-24',
duration : 4,
endDate : '2020-02-28',
percentDone : 60
},
{
id : 3,
name : 'Release docs',
startDate : '2020-02-24',
duration : 4,
endDate : '2020-02-28'
}
]
}
],
dependencies : [
{ fromTask : 2, toTask : 3 }
]
});
const gantt = new Gantt({
features : {
indicators : {
items : {
earlyDates : false,
lateDates : false,
// A custom indicator
myCustomIndicator : taskRecord => taskRecord.percentDone > 50 ? {
startDate : DateHelper.add(taskRecord.endDate, 2, 'days'),
name : 'Custom indicator',
iconCls : 'fa fa-book'
} : null
}
},
projectLines : false
},
appendTo : targetElement,
project, // Gantt needs project to get schedule data from
startDate : '2020-02-16',
endDate : '2020-03-07',
height : 240,
rowHeight : 50,
barMargin : 15,
columns : [
{ type : 'name', field : 'name', text : 'Name' }
]
});These custom indicators are defined as functions, that accept a task record and return a TimeSpan (or a raw data
object). The function will be called for each visible task during rendering, to not show the indicator for certain
tasks return null from it.
When using this feature we recommend that you configure gantt with a larger rowHeight + barMargin (>15 px), since
the indicators are indented to fit below the task bars.
Note: When combined with the fillTicks mode, indicators are snapped to the time axis ticks.
This feature is disabled by default.
Configs
14
Configs
14Common
Used to enable/disable built-in indicators and to define custom indicators.
Custom indicators are defined as functions, that accept a task record and return a TimeSpan, or a config object thereof.
new Gantt({
features : {
indicators : {
items : {
// Disable deadlineDate indicators
deadlineDate : false,
// Add a custom indicator (called prepare)
prepare : taskRecord => ({
startDate : taskRecord.startDate,
iconCls : 'fa fa-magnify',
name : 'Start task preparations'
})
}
}
}
});
For more information, please see the class description at top.
Other
A function which receives data about the indicator and returns a string, or a Promise yielding a string (for async tooltips), to be displayed in the tooltip. This method will be called with an object containing the fields below
| Parameter | Type | Description |
|---|---|---|
data | Object | Indicator data |
data.name | String | Indicator name |
data.startDate | Date | Indicator startDate |
data.endDate | Date | Indicator endDate |
data.taskRecord | TaskModel | The task to which the indicator belongs |
data.startClockHtml | String | Predefined HTML to show the start time |
data.endClockHtml | String | Predefined HTML to show the end time |
Misc
Properties
17
Properties
17Common
Class hierarchy
Misc
Other
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
7
Events
7Event handlers
7
Event handlers
7Typedefs
1
Typedefs
1CSS variables
10
CSS variables
10| Name | Description |
|---|---|
--b-indicator-at-bottom-size | Height of a range indicator displayed below the task bar (for example early dates, late dates) |
--b-indicator-at-bottom-gap | Vertical gap between the task bar and a range indicator displayed below the task bar. Must include a unit (0px instead of 0) |
--b-indicator-constraint-size | Size of a constraint indicator (start no earlier than, finish no later than, etc.) |
--b-indicator-deadline-icon | Icon to use for deadline indicators (icon font char) |
--b-indicator-must-icon | Icon to use for must start on / must finish on indicators (icon font char) |
--b-indicator-color | Color of the indicator |
--b-indicator-custom-icon-color | Color of the icon in a custom indicator |
--b-indicator-deadline-color | Color of the deadline indicator |
| Hovered | |
--b-indicator-hover-color | Color of the indicator when hovered |
--b-indicator-deadline-hover-color | Color of the deadline indicator when hovered |