Example: Assigning Resources

[rolenweb]

Hi, i use trial example Assigning Resources: https://www.bryntum.com/examples/gantt- ... gresources
1. DevTools console show message 'TRIAL VERSION: PRODUCT DEACTIVATED' - whats is mean. Are there any limitation for trial version?(sceenshot: 1.jpg)
2. I have issue with AssignmentChart (screenshot 2.jpg)
My file AssignmentToolTip.js

Ext.define('Gnt.examples.assigningresources.view.AssignmentToolTip', {
    extend: 'Ext.ToolTip',

    requires : [
        'Gnt.examples.assigningresources.view.AssignmentChart'
    ],
    delegate : '.gnt-utilizationrow-resource .gnt-resource-utilization-interval',
    showDelay: 0,
    hideDelay: 200,
    anchor   : 'bl',
    layout   : 'fit',

    chartStore: null,
    panel     : null,
    trackMouse: true,
    title     : 'Hours',

    initComponent: function () {
        this.chartStore = new Ext.data.Store({
            fields: ['name', 'amount']
        });

        Ext.apply(this, {

            items: [
                {
                    xtype       : 'assignmentchart',
                    store       : this.chartStore
                }
            ],

            listeners: {
                beforeshow: this.onMyBeforeShow,
                scope     : this
            }
        });

        
        this.callParent(arguments);
    },

    onMyBeforeShow: function (tip) {
        var me = this,
            taskStore = me.panel.getStore().getTaskStore(),
            summaryEvent = me.panel.getSchedulingView().resolveEventRecord(tip.triggerElement),
            originalResource = summaryEvent.getOriginalResource(),
            utilizationDayEl = Ext.fly(tip.triggerElement),
            intervalStart = new Date(parseInt(utilizationDayEl.getAttribute('data-utilization-interval-start'), 10)),
            intervalEnd = new Date(parseInt(utilizationDayEl.getAttribute('data-utilization-interval-end'), 10)),
            utilizationInfo = summaryEvent.getUtilizationInfoForInterval(intervalStart),
            resourceCalendar = originalResource.getCalendar(),
            data = [];
    
        //console.log(resourceCalendar);

        Ext.Object.each(utilizationInfo.taskInfo, function (taskId, assignmentUtilizationInfo) {
            if (assignmentUtilizationInfo.isUtilized) {
                data.push({
                    name  : taskStore.getNodeById(taskId).getName(),
                    amount: resourceCalendar.convertMSDurationToUnit(assignmentUtilizationInfo.allocationMs, 'h')
                });
            }
        });
        //console.log(data);
        if (data.length === 0) return false;


        // let's get the resource availability value
        var resourceAvailability = 0;

        // loop over its calendar and summarize availability intervals in the "intervalStart - intervalEnd" timespan
        resourceCalendar.forEachAvailabilityInterval(
            {
                startDate: intervalStart,
                endDate  : intervalEnd
            },
            function (start, end) {
                resourceAvailability += end - start;
            }
        );

        // output the resource availability plus over-/underallocated hours
        this.down('cartesian').setTitle('Resource availability: ' + resourceCalendar.convertMSDurationToUnit(resourceAvailability, 'h') + ' hrs' +
            (utilizationInfo.isOverallocated || utilizationInfo.isUnderallocated ?
            ', ' + (utilizationInfo.isOverallocated ? 'Overallocated' : 'Underallocated') + ': ' + resourceCalendar.convertMSDurationToUnit(Math.abs(utilizationInfo.allocationMs - resourceAvailability), 'h') + ' hrs'
                : '')
        );

        this.setTitle('Hours for ' + originalResource.getName() + ' ' + Ext.Date.format(intervalStart, 'M d') + ' - ' + Ext.Date.format(intervalEnd, 'M d'));

        this.chartStore.loadData(data);
        //console.log(this.chartStore);
        console.table(this.chartStore.data.items);
    }
});

My file AssignmentChart.js

Ext.define('Gnt.examples.assigningresources.view.AssignmentChart', {
    extend       : 'Ext.chart.CartesianChart',
    xtype        : 'assignmentchart',
    height       : 250,
    width        : 430,
    theme        : {
        type : 'muted'
    },
    insetPadding : '20 20 20 20',
    interactions : [ 'itemhighlight' ],
    animation    : Ext.isIE8 ? false : {
        easing   : 'backOut',
        duration : 500
    },
    axes         : [
        {
            type           : 'numeric',
            position       : 'left',
            fields         : 'amount',
            minimum        : 0,
            maximum        : 24,
            minorTickSteps : 1,
            majorTickSteps : 6,
            label          : {
                textAlign : 'right'
            },
            title          : 'Hours',
            grid           : {
                odd  : {
                    fillStyle : 'rgba(255, 255, 255, 0.06)'
                },
                even : {
                    fillStyle : 'rgba(0, 0, 0, 0.03)'
                }
            }
        },
        {
            type     : 'category',
            position : 'bottom',
            fields   : 'name'
        }
    ],
    series       : [ {
        type         : 'bar',
        xField       : 'name',
        yField       : 'amount',
        style        : {
            minGapWidth : 20
        },
        highlightCfg : {
            saturationFactor : 1.5
        },
        label        : {
            field   : 'amount',
            display : 'insideEnd'
        }
    } ]
});

[mats]

1. The trial is limited to 45 days, and events are faded out after 5 minutes. Other than that, all features are present

2. Are those the only changes you made? The easiest way to ask for support is to upload your modified example as a whole so we can simply drop it into the examples folder.

[rolenweb]

Thanks for you answer. I attached files.

[mats]

Please also provide the data that you load, you can grab it easily from the Chrome console

[rolenweb]

I attached file

[Maxim Gorkovsky]

Hello.
You are missing charts.css. Usually it is loaded by app.css, but you removed that line. Add charts css to your page with this line (of course you should use local extjs distribution) and assignment chart will appear properly:

<link href="https://www.bryntum.com/examples/extjs-6.5.0/build/packages/charts/classic/triton/resources/charts-all.css" rel="stylesheet" type="text/css"/>

[rolenweb]

Thakns, it's helped me.
I have question for this example.
I'd like to use ResourceZones (https://www.bryntum.com/docs/scheduling ... ourceZones) . For it i add 'resourceZones' to file AssignmentGrid.js

Ext.define('Gnt.examples.assigningresources.view.AssignmentGrid', {
    extend               : 'Gnt.panel.ResourceUtilization',
    
    requires             : [
        'Gnt.examples.assigningresources.view.AssignmentToolTip',
        'Sch.data.EventStore'
    ],      
    
    xtype                : 'assignmentgridpanel',
    title                : 'Resource utilization',
    region               : 'south',
    flex                 : 1,
    split                : true,

    resourceZones : new Sch.data.EventStore({
            data : [
                {
                    ResourceId : 1,
                    StartDate : new Date(2017, 10, 6),
                    EndDate : new Date(2017, 10, 7),
                    Cls  : 'myAvailability'
                },
                {
                    ResourceId : 2,
                    StartDate : new Date(2017, 8, 3),
                    EndDate : new Date(2017, 8, 4),
                    Cls  : 'someAvailability'
                },
                {
                    ResourceId : 3,
                    StartDate : new Date(2017, 8, 8),
                    EndDate : new Date(2017, 8, 12),
                    Cls  : 'someAvailability'
                }
            ]
        }),

    eventStore : new Sch.data.EventStore({
                data : [
                    {
                        ResourceId : 3,
                        StartDate : new Date(2017, 9, 13),
                        EndDate : new Date(2017, 0, 25),
                        Name : 'Some task'
                    }
                ]
            }),

    // Easy to style each utilization bar individually with CSS or inline 'style'
    utilizationBarRenderer : function (resourceUtilizationInfo, resource, intervalStartDate, intervalEndDate, metaData) {
        if (resource.getName() === 'Bart') {
            metaData.cls = 'Bart';
        }
    },

    afterRender : function () {
        //console.log(this.resourceStore);
        this.callParent(arguments);

        this.tip = new Gnt.examples.assigningresources.view.AssignmentToolTip({
            target : this.getSchedulingView().el,
            panel  : this
        });
    }
});

but these events not shown. Please could you help me?

[Maxim Gorkovsky]

Sure.
Resource utilization panel doesn't simply take resources from your store. It generates tree that contain resources with assignments as children. So you cannot use same ids. If you inspect our code you may find rules how ids are generated, see Gnt.model.UtilizationResource#getSurrogateIdFor method. Please note this is private parts of framework and my be changed without a notice.

Long story short, ids are produced as follows:

getSurrogateIdFor : function(record) {
    var id = record.getId();

    if (record instanceof Gnt.model.Resource) {
        id = 'resource-' + id;
    }
    else if (record instanceof Gnt.model.Assignment) {
        id = 'assignment-' + id;
    }

    return id;
}

So try this:

resourceZones : new Sch.data.EventStore({
            data : [
                {
                    ResourceId : 'resource-1',
                    StartDate : new Date(2017, 10, 6),
                    EndDate : new Date(2017, 10, 7),
                    Cls  : 'myAvailability'
                }]
})

[rolenweb]

I tried it earlier but it not work. Please could you test it for my example above?

[Maxim Gorkovsky]

Here is modified assignmentGrid view with working resource zone:

Ext.define('Gnt.examples.assigningresources.view.AssignmentGrid', {
    extend               : 'Gnt.panel.ResourceUtilization',
    
    requires             : [
        'Gnt.examples.assigningresources.view.AssignmentToolTip'
    ],      
    
    xtype                : 'assignmentgridpanel',
    title                : 'Resource utilization',
    region               : 'south',
    flex                 : 1,
    split                : true,

    // Easy to style each utilization bar individually with CSS or inline 'style'
    utilizationBarRenderer : function (resourceUtilizationInfo, resource, intervalStartDate, intervalEndDate, metaData) {
        if (resource.getName() === 'Bart') {
            metaData.cls = 'Bart';
        }
    },
	
	initComponent : function () {
		var store = new Sch.data.EventStore({
			proxy : {
				type : 'memory',
				data : [{
					ResourceId : 'resource-4',
					StartDate : new Date(2017, 8, 11),
					EndDate : new Date(2017, 8, 18),
					Cls  : 'myAvailability'
				}]
			}
		});
			
		Ext.apply(this, {
			resourceZones : store
		});
		this.callParent(arguments);
		
		store.load();
	},

    afterRender : function () {
        this.callParent(arguments);

        this.tip = new Gnt.examples.assigningresources.view.AssignmentToolTip({
            target : this.getSchedulingView().el,
            panel  : this
        });
    }
});