Baselines
//<code-header>
fiddle.title = 'Baselines';
//</code-header>
// Project contains all the data and is responsible for correct scheduling
const project = new ProjectModel({
startDate : new Date(2017, 0, 1),
tasks : [
{
id : 1,
name : 'Write docs',
expanded : true,
children : [
{
id : 2,
name : 'Proof-read docs',
startDate : '2017-01-02',
endDate : '2017-01-05',
baselines : [{
startDate : '2017-01-01',
endDate : '2017-01-04'
}]
},
{
id : 3,
name : 'Release docs',
startDate : '2017-01-09',
endDate : '2017-01-10',
baselines : [{
startDate : '2017-01-04',
endDate : '2017-01-09'
}]
}
]
}
],
dependencies : [
{ fromTask : 2, toTask : 3 }
]
});
const gantt = new Gantt({
features : {
baselines : true
},
appendTo : targetElement,
project, // Gantt needs project to get schedule data from
startDate : new Date(2016, 11, 31),
endDate : new Date(2017, 0, 11),
height : 250,
columns : [
{ type : 'name', field : 'name', text : 'Name' }
]
});This feature also optionally shows a tooltip when hovering any of the task's baseline elements. The tooltip's content may be customized.
To customize the look of baselines, you can supply cls or style in the baseline data.
This feature is disabled by default. For info on enabling it, see GridFeatures.
Configs
14
Configs
14Other
An empty function by default, but provided so that you can override it. This function is called each time a task baseline is rendered into the gantt to render the contents of the baseline element.
Returning a string will display it in the baseline bar, it accepts both plain text or HTML. It is also possible to return a DOM config object which will be synced to the baseline bars content.
// using plain string
new Gantt({
features : {
baselines : {
renderer : ({ baselineRecord }) => baselineRecord.startDate
}
}
});
// using DOM config
new Gantt({
features : {
baselines : {
renderer : ({ baselineRecord }) => {
return {
tag : 'b',
html : baselineRecord.startDate
};
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
detail | Object | An object containing the information needed to render a Baseline. |
detail.taskRecord | TaskModel | The task record. |
detail.baselineRecord | Baseline | The baseline record. |
detail.renderData | DomConfig | An object containing details about the baseline element. |
Template (a function accepting event data and returning a string) used to display info in the tooltip. The template will be called with an object as with fields as detailed below
| Parameter | Type | Description |
|---|---|---|
data | Object | A data block containing the information needed to create tooltip content |
data.baseline | Baseline | The Baseline record to display |
data.startClockHtml | String | Predefined HTML to show the start time |
data.endClockHtml | String | Predefined HTML to show the end time |
Misc
Properties
18
Properties
18Common
Class hierarchy
Other
An empty function by default, but provided so that you can override it. This function is called each time a task baseline is rendered into the gantt to render the contents of the baseline element.
Returning a string will display it in the baseline bar, it accepts both plain text or HTML. It is also possible to return a DOM config object which will be synced to the baseline bars content.
// using plain string
new Gantt({
features : {
baselines : {
renderer : ({ baselineRecord }) => baselineRecord.startDate
}
}
});
// using DOM config
new Gantt({
features : {
baselines : {
renderer : ({ baselineRecord }) => {
return {
tag : 'b',
html : baselineRecord.startDate
};
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
detail | Object | An object containing the information needed to render a Baseline. |
detail.taskRecord | TaskModel | The task record. |
detail.baselineRecord | Baseline | The baseline record. |
detail.renderData | DomConfig | An object containing details about the baseline element. |
Misc
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
7
Events
7Event handlers
7
Event handlers
7Typedefs
1
Typedefs
1CSS variables
7
CSS variables
7| Name | Description |
|---|---|
--b-baseline-wrap-size | Baseline wrap size, as a fraction of the event size. This is the height of the baseline wrap, shared by all baselines |
--b-baseline-border-width | Baseline border width |
--b-baseline-border-color | Baseline border color |
--b-baseline-margin-top | Baseline margin top |
--b-baseline-transition-duration | Baseline transition duration |
--b-baseline-flex | Baseline flex |
--b-baseline-border-radius | Baseline border radius |