Our state of the art Gantt chart


Post by rayudu.pasumarthy »

Hi,

We are utilizing the Resource Utilization widget and have partnered it with the gantt. Partnering the Gantt with the Resource widget does increase the time taken to load the Gantt store. So we would like to be able to toggle the partner off. But after using removePartner, any timeAxis update causes a crash.

Steps to reproduce:

  1. Open Resource Utilization example (https://bryntum.com/examples/gantt/resourceutilization/)
  2. In the code, at the last line, add the following lines:
    resourceUtilization.removePartner(gantt);
    resourceUtilization.destroy();
  3. Double click on any timeAxis header and it would cause a crash

Is there an option to completely remove the partner connection between 2 widgets?

Thanks,
Rayudu.


Post by alex.l »

Partnering the Gantt with the Resource widget does increase the time taken to load the Gantt store.

Could you please describe this moment? How exactly did it increase project load time?

resourceUtilization.destroy();

Because a project model is shared via 2 components, resourceUtilization uses the same instance, but when you destroy the component, it affects to all internal stores. To avoid that you need to create own instance of project model, but lets better find first why did you need to do all these things.

There should be no difference in loading time, please share your configs and describe the problem in more details.

All the best,
Alex


Post by rayudu.pasumarthy »

Hi Alex,

Have tried setting a separate ProjectModel for the Gantt and the ResourceUtilization widget but it still seems to cause an error.

Steps:

  1. Open Resource Utilization example (https://bryntum.com/examples/gantt/resourceutilization/)
  2. Replace the code with the following code
    import { Gantt, ProjectModel, ResourceUtilization, Splitter, DateHelper, AvatarRendering } from '../../build/gantt.module.js?458600';
    import shared from '../_shared/shared.module.js?458600';
    
    const projectForGantt = new ProjectModel({
        transport : {
            load : {
                url : '../_datasets/launch-saas-overallocated.json'
            }
        },
    
    autoLoad : true,
    
    // This config enables response validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse : true
    });
    
    const projectForResource = new ProjectModel({
        transport : {
            load : {
                url : '../_datasets/launch-saas-overallocated.json'
            }
        },
    
    autoLoad : true,
    
    // This config enables response validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse : true
    });
    
    const gantt = new Gantt({
        project: projectForGantt,
        dependencyIdField       : 'sequenceNumber',
        resourceImageFolderPath : '../_shared/images/users/',
        appendTo                : 'container',
        viewPreset              : 'weekAndDayLetter',
        tickSize                : 40,
        columnLines             : true,
        startDate               : '2022-01-14',
        columns                 : [
            { type : 'name', width : 280 },
            { type : 'resourceassignment', showAvatars : true, width : 170 }
        ]
    });
    
    new Splitter({
        appendTo : 'container'
    });
    
    const resourceUtilization = new ResourceUtilization({
        appendTo                : 'container',
        project: projectForResource,
        partner                 : gantt,
        rowHeight               : 40,
        showBarTip              : true,
        resourceImageFolderPath : '../_shared/images/users/',
        // barTooltipTemplate      : TODO,
        columns                 : [
            {
                type  : 'tree',
                field : 'name',
                width : 280,
                text  : 'Resource / Task',
                renderer({ record, grid, value }) {
                    // lets show event start/end for assignment row
                    if (record.origin.isResourceModel) {
                        if (!this.avatarRendering) {
                            this.avatarRendering = new AvatarRendering({
                                element : grid.element
                            });
                        }
                        const resource = record.origin;
    
                    return {
                        class    : 'b-resource-info',
                        children : [
                            this.avatarRendering.getResourceAvatar({
                                initials : resource.initials,
                                color    : resource.eventColor,
                                iconCls  : resource.iconCls,
                                imageUrl : resource.image ? `${grid.resourceImageFolderPath}${resource.image}` : null
                            }),
                            value
                        ]
                    };
                }
                else {
                    return value;
                }
            }
        },
        {
            cellCls : 'taskDateRange',
            renderer({ record, value }) {
                // Show event start/end for assignment row
                if (record.origin.isAssignmentModel) {
                    const task = record.origin.event;
    
                    return DateHelper.format(task.startDate, 'MMM Do') + ' - ' + DateHelper.format(task.endDate, 'MMM Do');
                }
    
                return '';
            }
        }
    ],
    bbar : {
        cls    : 'utilization-toolbar',
        height : '3em',
        items  : [
            {
                type     : 'checkbox',
                ref      : 'showBarTip',
                text     : 'Enable bar tooltip',
                tooltip  : 'Check to show tooltips when moving mouse over bars',
                checked  : true,
                onAction : 'up.onShowBarTipToggle'
            }
        ]
    },
    onShowBarTipToggle({ source }) {
        resourceUtilization.showBarTip = source.checked;
    }
    });
    
    resourceUtilization.removePartner(gantt);
    resourceUtilization.destroy();
    
    1. Double click on any timeAxis header causes the timeAxis gantt crash

    It would be best if we can completely remove the connection between the 2 partners. Is there another function other than removePartner that allows us to completely reset the partner connection? Or is re-creating a new Gantt the only other option?

Post by alex.l »

Yes, that should work. I've reproduced the problem. Thank you for clarifications, here is a ticket https://github.com/bryntum/support/issues/4601

All the best,
Alex


Post Reply