Our state of the art Gantt chart


Post by striker »

Hello. I want to implement baselines feature and propably somethiing I'm doing wrong and I can't figure what it is.

I am using Trial 4.0.8 version with Angular 9.1.9, and I'm working with documentation: https://www.bryntum.com/docs/gantt/#Gantt/feature/Baselines

So I have following code in the Gantt features:

      features: {
        group: 'resourceassignment',
        baselines: true,
        rollups : true,
        labels: {
          left: {
            field: 'name'
          }
        }
      },
 

Soo baselines are enabled.
Data in taskStore are with 'baselines' field, which is array with properties: startDate, endDate

array.png
array.png (67.07 KiB) Viewed 881 times

And it's not working:

qqqqqqq.png
qqqqqqq.png (80.67 KiB) Viewed 881 times

It's too not working when rollups: false.

Can you help me?


Post by mats »

You cannot use Group feature in a Tree, please remove:

        group: 'resourceassignment',

Does that make it work? If not, please upload your test case so we can run it and inspect


Post by striker »

It's not working. I wrote code to you on PM you can inspect.


Post by saki »

Post please a showcase, so that we can run, investigate and debug it.

FYI, or Angular, the feature has to be bound to baselinesFeature if you use the Angular wrapper.


Post by striker »

I can't share code to public due to policy, but I can share it to you on PM, so I did it too to you.
I am not using Angular wrapper.


Post by pmiklashevich »

Please prepare a testcase. Testcase should never have real data or full project. Just apply minimal changes to one of our demo to reproduce the issue. See our support policy: viewtopic.php?f=35&t=772

Pavlo Miklashevych
Sr. Frontend Developer


Post by striker »

Code:

document.body.innerHTML = '<p>This demo shows the baselines feature, hover the baselines to see details:</p>';

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 = new ProjectModel({
    taskStore: taskStore,
    resourceStore: resourcesStore,
    assignmentStore: assignmentStore,
     dependencyStore: dependencyStore
});

const gantt = new Gantt({
      features: {
        baselines: true,
        rollups : true,
        labels: {
          left: {
            field: 'name'
          }
        }
      },
    appendTo  : document.body,
    project   : project, 
    height    : 500,
        columns: [
        {
          text: 'Resource',
          type: 'resourceassignment',
        }
      ],
   taskRenderer: (data) => {
        const task = data.taskRecord.originalData;

    if (task == null || task.isResource) {
      return undefined;
    }

    data.renderData.eventColor = 'red';

    return {
      html: task.taskStatusName
    };
  },
});

Paste this code on: https://www.bryntum.com/docs/gantt/#Gantt/feature/Baselines
and then click "open in code pen" button on example.


Post by saki »

I get the following result. Is anything else expected? Ideally, can we reproduce the issue by modifying this example: https://www.bryntum.com/examples/gantt/baselines/ ?

Screen Shot 2021-02-18 at 15.03.47.png
Screen Shot 2021-02-18 at 15.03.47.png (289.13 KiB) Viewed 856 times

Post by striker »

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();
qweqwe.png
qweqwe.png (76.09 KiB) Viewed 853 times

Post by saki »

You have swapped baselines startDate and endDate. Of course, this shouldn't cause a silent failure but it should produce a warning.

The ticket is here: https://github.com/bryntum/support/issues/2422

Screen Shot 2021-02-19 at 13.21.59.png
Screen Shot 2021-02-19 at 13.21.59.png (101.49 KiB) Viewed 846 times

Post Reply