Our state of the art Gantt chart


Post by rayudu.pasumarthy »

Hi,

Is it possible to create timeRanges for the Resource Utilization widget? ( https://bryntum.com/examples/gantt/resourceutilization/ ). We can use the gantt timeRanges example to create timeranges in gantt (https://bryntum.com/examples/gantt/timeranges/) but the same does not seem to apply for the Resource Utilization Widget.

Thanks,
Rayudu.


Post by tasnim »

Yes, It is. Just go to gantt resourceutilization example and open app.js and then replace the whole code with the code given below.

Example code snippet:

import '../_shared/shared.js'; // not required, our example styling etc.
import Gantt from '../../lib/Gantt/view/Gantt.js';
import ProjectModel from '../../lib/Gantt/model/ProjectModel.js';
import ResourceUtilization from '../../lib/SchedulerPro/view/ResourceUtilization.js';
import Splitter from '../../lib/Core/widget/Splitter.js';
import '../../lib/Gantt/column/ResourceAssignmentColumn.js';
import '../../lib/Gantt/feature/Labels.js';
import DateHelper from '../../lib/Core/helper/DateHelper.js';
import '../../lib/Scheduler/feature/TimeRanges.js';

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/timeranges.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,
    appendTo                : 'container',
    viewPreset              : 'weekAndDayLetter',
    tickSize                : 40,
    columnLines             : true,
    features : {
        timeRanges : {
            enableResizing      : true,
            showCurrentTimeLine : false,
            showHeaderElements  : true
        }
    },
    columns                 : [
        { type : 'name', width : 280 },
        { type : 'resourceassignment', showAvatars : true, width : 170 }
    ]
});


new Splitter({
    appendTo : 'container'
});

const resourceUtilization = new ResourceUtilization({
    appendTo                : 'container',
    project,
    partner                 : gantt,
    rowHeight               : 40,
    showBarTip              : true,
    features : {
        timeRanges : {
            enableResizing      : true,
            showCurrentTimeLine : false,
            showHeaderElements  : true
        }
    },
    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) {
                    const resource = record.origin;

                return {
                    class    : 'b-resource-info',
                    children : [
                        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;
}
});

project.load();


Post by rayudu.pasumarthy »

Hi Tasnim,

Thanks for the reply. We are able to show the timeranges in the Resource Utilization Widget but the timeRange is always placed in front of the Resource allocation.

timerange_overlaps_row.png
timerange_overlaps_row.png (75.4 KiB) Viewed 320 times

Steps to reproduce:

  1. Use the same code as mentioned above
  2. Update color of the TimeRange
  3. Drag Configure ports to the Audit TimeRange, it does not show the resource Allocation for that week

The timeRange blocks the resource-allocation for the week. Had tried setting the z-index to be in front of the timeRange but it does not seem to show the Resource allocations.

Thanks,
Rayudu


Post by tasnim »

I'm not able to reproduce it. It shows the resource allocation. Could you please provide a runnable test case?

Attachments
Screenshot 2022-06-21 164340.png
Screenshot 2022-06-21 164340.png (20.36 KiB) Viewed 311 times

Post by rayudu.pasumarthy »

Hi Tasnim,

Sure, it can be reproduced by the following steps:

  1. Open resource utilization example ( https://bryntum.com/examples/gantt/resourceutilization/ )
  2. Place the following code in the code editor:
    import { Gantt, ProjectModel, ResourceUtilization, Splitter, DateHelper, AvatarRendering } from '../../build/gantt.module.js?459924';
    import shared from '../_shared/shared.module.js?459924';
    
    const project = new ProjectModel({
        transport : {
            load : {
                url : '../_datasets/timeranges.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,
        appendTo                : 'container',
        viewPreset              : 'weekAndDayLetter',
        tickSize                : 40,
        columnLines             : true,
        features : {
            timeRanges : {
                enableResizing      : true,
                showCurrentTimeLine : false,
                showHeaderElements  : true
            }
        },
        columns                 : [
            { type : 'name', width : 280 },
            { type : 'resourceassignment', showAvatars : true, width : 170 }
        ]
    });
    
    
    new Splitter({
        appendTo : 'container'
    });
    
    const resourceUtilization = new ResourceUtilization({
        appendTo                : 'container',
        project,
        partner                 : gantt,
        rowHeight               : 40,
        showBarTip              : true,
        features : {
            timeRanges : {
                enableResizing      : true,
                showCurrentTimeLine : false,
                showHeaderElements  : true
            }
        },
        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) {
                        const resource = record.origin;
    
                return {
                    class    : 'b-resource-info',
                    children : [
                        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;
    }
    });
    
    project.load();
    
    project.on('load', () => {
    resourceUtilization.features.timeRanges.timeRanges[2].style = 'background: lightblue;';
    });
    
    1. Drag Configure ports within Audit TimeRange
    The Resource Allocation is not visible.

    Thanks,
    Rayudu

Post by tasnim »

Thanks for your clarification. Reproduced the bug! We'll investigate it. Here is the ticket : https://github.com/bryntum/support/issues/4841


Post Reply