[REACT] ResourceHistogram not displaying expected data - adding calendar helps but not completely

[samuelms]

I'm trying to setup a ResourceHistogram that shows when employees are over allocated. I have the ResourceHistogram rendering but the data it renders doesn't match what I'd expect.

Attached is a sample project with a single resource (employee -- Egon Stetmann) that has 5 events.

resource-histogram.zip

(37.54 KiB) Downloaded 5 times

The event dates:

• 2023-08-15 => 2024-04-10 (units 25, i.e. 25% allocated)
• 2024-02-06 => 2024-09-07 (units 100, i.e. 100% allocated)
• 2024-06-02 => 2030-12-31 (units 50, i.e. 50% allocated)

Expected:

• graph begins at 2023-08-15 green
• graph red at 2024-02-06 until 2024-04-10 (2nd event is 100% allocated, so any collision is red)
• graph green from 2024-04-11 to 2024-06-01
• graph red from 2024-06-02 to 2024-09-07
• graph green from 2024-09-08 to 2030-12-31

Actual:

• graph begins at 2023-08-15 green (as expected!)
• graph red at 2024-02-06 (as expected!) until 2024-07-15 (unexpected, should've been 2024-04-10)
• graph green from 2024-07-16 (unexpected) to 2024-11-29 (unexpected)
• no more data --- even though one of the events should go to 2030-12-31

2024-08-12_22-26-18.png (38.5 KiB) Viewed 139 times

I noticed that adding calendars to the histogram project sort of helps things:

        calendars: {
            metaData: {
                projectCalendar: "general"
            },
            rows: [
                {
                    id: "general",
                    name: "General"
                }
            ]
        },

2024-08-12_22-42-38.png (39.91 KiB) Viewed 139 times

Everything lines up as expected except that the green should go until 2030-12-31. Instead it ends on 2029-06-01. I'm not sure why that helps in the way it does and why it doesn't quite fully resolve things.

[arcady]

Hello,

Regarding truncating allocation info if no calendars provided it can be solved with maxCalendarRange config help. Generally if you deal with such long running project you should extend that config accordingly:

    const histogramProject = {
        loadUrl: '/resource-gantt.json',
        // Extend max range calendars collect availability in
        maxCalendarRange : 100 * 365 * 24 * 3600000,

Adjusting that allowed me to display the rest of the resource allocation.

I've spotted another issue when you not provide calendars - weekends are treated as non working days while as I know by default a calendar treats all days as working. Made a ticket for that: https://github.com/bryntum/support/issues/9806
That's one of the reasons your event end dates were shifted.
But as you already mentioned providing calendars data fixes the above problem.

Another reason of shifted dates is how your dates are specified in the provided dataset:
task #1

                "startDate": "2023-08-15T07:00:00+00:00",
                "endDate": "2024-04-10T07:00:00+00:00",

task #2

                "startDate": "2024-02-06T00:00:00-07:00",
                "endDate": "2024-09-07T00:00:00-07:00",

task #8

                "startDate": "2024-06-02T07:00:00+00:00",
                "endDate": "2030-12-31T08:00:00+00:00",

As you can see they are stored with timezones info. And the timezones are different. Tasks ##1,8 dates are specified in GMT while task #2 dates are in GMT-7 timezone. So the dates when loaded will be automatically converted to your browser local timezone.
Which means task #2 starts 2024-02-06 only if your local timezone is GMT-7. Otherwise the dates is different.

I don't know your application details but for a quick test you can just remove timezone info from the values. Here is my dataset made based on yours one (I just removed some not relevant values) :

{
    "project": {
        "calendar": "general"
    },
    "calendars": {
        "rows": [
            {
                "id": "general",
                "name": "General"
            }
        ]
    },
    "resources": {
        "rows": [
            {
                "id": 334,
                "name": "Egon Stetmann"
            }
        ]
    },
    "events": {
        "rows": [
            {
                "id": 1,
                "name": "Pre-Construction - 25%",
                "startDate": "2023-08-15T07:00:00",
                "endDate": "2024-04-10T07:00:00"
            },
            {
                "id": 2,
                "name": "Superstructure - 100%",
                "startDate": "2024-02-06T00:00:00",
                "endDate": "2024-09-07T00:00:00"
            },
            {
                "id": 8,
                "name": "Construction - 50%",
                "startDate": "2024-06-02T07:00:00",
                "endDate": "2030-12-31T08:00:00"
            }
        ]
    },
    "assignments": {
        "rows": [
            {
                "id": 1,
                "resource": 334,
                "event": 1,
                "units": 25.0
            },
            {
                "id": 2,
                "resource": 334,
                "event": 2,
                "units": 100.0
            },
            {
                "id": 8,
                "resource": 334,
                "event": 8,
                "units": 50.0
            }
        ]
    }
}

Best regards,
Arcady

[samuelms]

Awesome! Going to try this out

[samuelms]

Worked perfectly, thank you!