Yes. I am expecting to show baselines from 'baselines' array in the task. As you can see, there is only rollup/dependencies, no baselines. I don't know why.
I modified code on example you posted. I just edited ProjectModel with mockup data, nothing more.
import { DateHelper, Gantt, ProjectModel } from '../../build/gantt.module.js?447702';
import shared from '../_shared/shared.module.js?447702';
function setBaseline(index) {
gantt.taskStore.setBaseline(index);
}
function toggleBaselineVisible(index, visible) {
gantt.element.classList[visible ? 'remove' : 'add'](`b-hide-baseline-${index}`);
}
const taskStore = new TaskStore({
data: [
{
"id": "123123",
"isResource": true,
"name": "AAA",
"children": [
{
"id": 3101,
"name": "Task 1",
"endDate": "2021-02-18T06:27:18.900Z",
"startDate": "2021-02-17T12:11:18.900Z",
"resourceId": 12,
"rollup": true,
"manuallyScheduled": false,
"dependencies": null,
"baselines": [
{
"startDate": "2021-02-18T10:58:33.505Z",
"endDate": "2021-02-16T02:00:00.000Z"
}
],
"cls": "task-status-2",
"taskStatusName": "Runned"
},
{
"id": 3155,
"name": "Task 2",
"endDate": "2021-02-19T08:42:18.900Z",
"startDate": "2021-02-18T06:27:18.900Z",
"resourceId": 12,
"rollup": true,
"manuallyScheduled": false,
"baselines": [
{
"startDate": "2021-02-18T10:58:33.505Z",
"endDate": "2021-02-17T04:00:00.000Z"
}
],
"cls": "task-status-5",
"taskStatusName": "To finish"
}
],
"resourceId": 12
}
]
})
const resourcesStore = new ResourceStore({
data: [
{
"id": 12,
"name": "AAA"
}
]
});
const assignmentStore = new AssignmentStore({
data: [
{
"eventId": 3101,
"resourceId": 12
},
{
"eventId": 3155,
"resourceId": 12
}
]
});
const dependencyStore = new DependencyStore({
data: [
{
"toTask": 3155,
"fromTask": 3101,
"type": 2
}
]
});
// Project contains all the data and is responsible for correct scheduling
const project = window.project = new ProjectModel({
taskStore: taskStore,
resourceStore: resourcesStore,
assignmentStore: assignmentStore,
dependencyStore: dependencyStore
});
const gantt = new Gantt({
appendTo : 'container',
dependencyIdField : 'wbsCode',
project,
columns : [
{ type : 'wbs' },
{ type : 'name' }
],
subGridConfigs : {
locked : {
flex : 1
},
normal : {
flex : 2
}
},
// Allow extra space for baseline(s)
rowHeight : 60,
features : {
baselines : {
// Custom tooltip template for baselines
template(data) {
const
me = this,
{ baseline } = data,
{ task } = baseline,
delayed = task.startDate > baseline.startDate,
overrun = task.durationMS > baseline.durationMS;
let { decimalPrecision } = me;
if (decimalPrecision == null) {
decimalPrecision = me.client.durationDisplayPrecision;
}
const
multiplier = Math.pow(10, decimalPrecision),
displayDuration = Math.round(baseline.duration * multiplier) / multiplier;
return `
<div class="b-gantt-task-title">${task.name} (${me.L('baseline')} ${baseline.parentIndex + 1})</div>
<table>
<tr><td>${me.L('Start')}:</td><td>${data.startClockHtml}</td></tr>
${baseline.milestone ? '' : `
<tr><td>${me.L('End')}:</td><td>${data.endClockHtml}</td></tr>
<tr><td>${me.L('Duration')}:</td><td class="b-right">${displayDuration + ' ' + DateHelper.getLocalizedNameOfUnit(baseline.durationUnit, baseline.duration !== 1)}</td></tr>
`}
</table>
${delayed ? `
<h4 class="statusmessage b-baseline-delay"><i class="statusicon b-fa b-fa-exclamation-triangle"></i>${me.L('Delayed start by')} ${DateHelper.formatDelta(task.startDate - baseline.startDate)}</h4>
` : ''}
${overrun ? `
<h4 class="statusmessage b-baseline-overrun"><i class="statusicon b-fa b-fa-exclamation-triangle"></i>${me.L('Overrun by')} ${DateHelper.formatDelta(task.durationMS - baseline.durationMS)}</h4>
` : ''}
`;
}
},
columnLines : false,
filter : true,
labels : {
left : {
field : 'name',
editor : {
type : 'textfield'
}
}
}
},
tbar : {
items : [
{
type : 'button',
text : 'Set baseline',
icon : 'b-fa-bars',
iconAlign : 'end',
menu : [{
text : 'Set baseline 1',
onItem() {
setBaseline(1);
}
}, {
text : 'Set baseline 2',
onItem() {
setBaseline(2);
}
}, {
text : 'Set baseline 3',
onItem() {
setBaseline(3);
}
}]
},
{
type : 'button',
text : 'Show baseline',
icon : 'b-fa-bars',
iconAlign : 'end',
menu : [{
checked : true,
text : 'Baseline 1',
onToggle({ checked }) {
toggleBaselineVisible(1, checked);
}
}, {
checked : true,
text : 'Baseline 2',
onToggle({ checked }) {
toggleBaselineVisible(2, checked);
}
}, {
checked : true,
text : 'Baseline 3',
onToggle({ checked }) {
toggleBaselineVisible(3, checked);
}
}]
},
{
type : 'checkbox',
text : 'Show baselines',
checked : true,
toggleable : true,
onAction({ checked }) {
gantt.features.baselines.disabled = !checked;
}
}
]
}
});
project.load();