Our pure JavaScript Scheduler component


Post by epotapov »

For some reason I noticed that some events seem to end later in the resource utilization component but not the scheduler. I am not sure what caused this or if I have been doing something wrong. I have also been doing all day events and setting units to 100 not sure if that would affect anything.


Post by mats »

Any chance you can share us a test case / video, steps to reproduce?


Post by epotapov »

The following data was used for my example:

{
    "success": true,
    "events": {
        "rows": [
            {
                "id": 19469,
                "startDate": "2024-06-24T00:00:00-06:00",
                "endDate": "2024-07-04T00:00:00-06:00",
                "name": "New event",
                "allDay": false,
                "note": "",
                "eventType": "Tentative"
            },
            {
                "id": 19470,
                "startDate": "2024-06-26T00:00:00-06:00",
                "endDate": "2024-07-15T00:00:00-06:00",
                "name": "New event",
                "allDay": false,
                "note": "",
                "eventType": "Tentative"
            },
            {
                "id": 19471,
                "startDate": "2024-06-24T00:00:00-06:00",
                "endDate": "2024-07-23T00:00:00-06:00",
                "name": "New event",
                "allDay": false,
                "note": "",
                "eventType": "Tentative"
            }
        ]
    },
    "resources": {
        "rows": [
            {
                "id": 18947,
                "name": "New Resource",
                "role": "/Role"
            },
            {
                "id": 18948,
                "name": "Role",
                "role": "/Z"
            }
        ]
    },
    "assignments": {
        "rows": [
            {
                "id": 9424,
                "resourceId": 18947,
                "eventId": 19469,
                "units": 100
            },
            {
                "id": 9425,
                "resourceId": 18947,
                "eventId": 19470,
                "units": 100
            },
            {
                "id": 9426,
                "resourceId": 18948,
                "eventId": 19471,
                "units": 100
            }
        ]
    },
    "dependencies": {
        "rows": []
    }
}

From the screenshots the data in the scheduler seems to end on the correct date:

Screenshot 2024-06-23 195825.png
Screenshot 2024-06-23 195825.png (23.26 KiB) Viewed 95 times

But it seems to end later in the resource utilization:

Screenshot 2024-06-23 200335.png
Screenshot 2024-06-23 200335.png (23.84 KiB) Viewed 95 times

Post by alex.l »

Hi,

Just tried your data here https://bryntum.com/products/schedulerpro/examples/resourceutilization/
And I see all worked as expected. Please test yourself. Here is the code I used.

import { Splitter, SchedulerPro, ProjectModel, ResourceUtilization, DateHelper, StringHelper, Store } from '../../build/schedulerpro.module.js?477293';
import shared from '../_shared/shared.module.js?477293';

// Variables used in this demo
// Set group by Resource to City as initial default
let isGroupByResourceToCity = true;

const project = new ProjectModel({


// 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
});

project.loadInlineData({
    "success": true,
    "eventsData": [
            {
                "id": 19469,
                "startDate": "2024-06-24T00:00:00-06:00",
                "endDate": "2024-07-04T00:00:00-06:00",
                "name": "New event",
                "allDay": false,
                "note": "",
                "eventType": "Tentative"
            },
            {
                "id": 19470,
                "startDate": "2024-06-26T00:00:00-06:00",
                "endDate": "2024-07-15T00:00:00-06:00",
                "name": "New event",
                "allDay": false,
                "note": "",
                "eventType": "Tentative"
            },
            {
                "id": 19471,
                "startDate": "2024-06-24T00:00:00-06:00",
                "endDate": "2024-07-23T00:00:00-06:00",
                "name": "New event",
                "allDay": false,
                "note": "",
                "eventType": "Tentative"
            }
        ]
    ,
    "resourcesData": [
            {
                "id": 18947,
                "name": "New Resource",
                "role": "/Role"
            },
            {
                "id": 18948,
                "name": "Role",
                "role": "/Z"
            }
        ]
    ,
    "assignmentsData": [
            {
                "id": 9424,
                "resourceId": 18947,
                "eventId": 19469,
                "units": 100
            },
            {
                "id": 9425,
                "resourceId": 18947,
                "eventId": 19470,
                "units": 100
            },
            {
                "id": 9426,
                "resourceId": 18948,
                "eventId": 19471,
                "units": 100
            }
        ],
    "dependencies": {
        "rows": []
    }
})

const scheduler = new SchedulerPro({
    appendTo  : 'container',
    minHeight : '10em',
    flex      : '1 1 50%',

project,

//    startDate         : new Date(2024, 3, 28),
  //  endDate           : new Date(2024, 4, 30),
    viewPreset        : 'dayAndWeek',
    eventStyle        : 'plain',
    tickSize          : 50,
    resourceImagePath : '../_shared/images/users/',

columns : [
    { type : 'resourceInfo', text : 'Name', field : 'name', width : 130 },
    { text : 'City', field : 'city', width : 90 }
],

tbar : [
    {
        type     : 'button',
        ref      : 'zoomInButton',
        icon     : 'b-icon-search-plus',
        text     : 'Zoom in',
        onAction : () => scheduler.zoomIn()
    },
    {
        type     : 'button',
        ref      : 'zoomOutButton',
        icon     : 'b-icon b-icon-search-minus',
        text     : 'Zoom out',
        onAction : () => scheduler.zoomOut()
    }
]
});

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

// Prepare array of functions we are going to group the view store by
// (we make a constant since we are going to use it in few places)
const treeGroupLevels = [
    // group by resource
    ({ origin }) => {
        // If record is a resource means it has no assignments ..since this function is called for leaves only.
        // So further grouping makes no sense - stop grouping.
        if (origin.isResourceModel) {
            return Store.StopBranch;
        }

    return origin.resource;
},
// group by resource city
({ origin }) => origin.isResourceModel ? origin.city : origin.resource.city
];

const resourceUtilization = new ResourceUtilization({
    project,
    hideHeaders : true,
    partner     : scheduler,
    appendTo    : 'container',
    // set a bit larger row height since we use a custom renderer() below
    rowHeight   : 50,
    minHeight   : '10em',
    flex        : '1 1 50%',
    showBarTip  : true,
    features    : {
        treeGroup : {
            levels : treeGroupLevels
        }
    },
    columns : [
        {
            // this `cellCls` config is only used to target the example hint
            cellCls : 'tree-resource-event',
            type    : 'tree',
            text    : 'Resource/Event',
            flex    : 1,
            renderer({ record, grid }) {
                record = grid.resolveRecordToOrigin(record);

            // lets show event start/end for assignment row
            if (record.isAssignmentModel) {
                // get the assigned event
                const { event } = record;

                // add few nested tags for event name and for start/end dates
                return {
                    children : [
                        {
                            tag      : 'dl',
                            class    : 'b-assignment-info',
                            children : [
                                // value has event name
                                {
                                    tag  : 'dt',
                                    text : event.name
                                },
                                {
                                    tag  : 'dd',
                                    text : DateHelper.format(event.startDate, 'L') + ' - ' + DateHelper.format(event.endDate, 'L')
                                }
                            ]
                        }
                    ]
                };
            }
            else if (record.isResourceModel) {
                return record.name;
            }

            // record.key will have either resource or event so display its name
            return record.key?.name || record.key;
        }
    }
],

tbar : [
    {
        type    : 'checkbox',
        ref     : 'showBarTip',
        text    : 'Enable bar tooltip',
        tooltip : 'Check to show tooltips when moving mouse over bars',
        checked : true,
        onAction({ source }) {
            resourceUtilization.showBarTip = source.checked;
        }
    },
    '->',
    {
        type : 'label',
        text : 'Group by'
    },
    {
        type        : 'buttongroup',
        toggleGroup : true,
        cls         : 'group-buttons',
        items       : [
            {
                ref                  : 'resourceToCityButton', // for testing purpose
                text                 : 'Resource - City',
                tooltip              : 'Click to group by Resource → City',
                pressed              : true,
                supportsPressedClick : true,
                onAction() {
                    // toggle grouping fields order by resource to city
                    !isGroupByResourceToCity && treeGroupLevels.reverse();
                    isGroupByResourceToCity = true;
                    resourceUtilization.group(treeGroupLevels);

                }
            },
            {
                ref                  : 'cityToResourceButton', // for testing purpose
                text                 : 'City - Resource',
                tooltip              : 'Click to group by City → Resource',
                pressed              : false,
                supportsPressedClick : true,
                onAction() {
                    // toggle grouping fields order by city to resource
                    isGroupByResourceToCity && treeGroupLevels.reverse();
                    isGroupByResourceToCity = false;
                    resourceUtilization.group(treeGroupLevels);
                }
            },
            {
                ref     : 'defaultButton', // for testing purpose
                text    : 'Default',
                tooltip : 'Disable tree group feature and back to default Resource → Assignment look',
                onAction() {
                    if (!isGroupByResourceToCity) {
                        treeGroupLevels.reverse();
                        isGroupByResourceToCity = true;
                    }
                    resourceUtilization.clearGroups();
                }
            }
        ]
    }
]
});

All the best,
Alex


Post by epotapov »

I tried the example, and they match but now they seem to be ending both at the wrong time instead of July 23rd it is Aug 2nd. The scheduler has the correct end date when I comment out the resource utilization.

Screenshot 2024-06-24 135255.png
Screenshot 2024-06-24 135255.png (91.48 KiB) Viewed 76 times
Screenshot 2024-06-24 135751.png
Screenshot 2024-06-24 135751.png (50.58 KiB) Viewed 76 times

Post by tasnim »

Hi,

Reproduced! Thanks for your report. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/9435

Best regards,
Tasnim


Post Reply