Our state of the art Gantt chart


Post by rapiduser »

I noticed that when a set of custom defined view presets are configured and the zoom feature is enabled, as you move the slider it removes what was configured to what appears to be a set of defaults?

You can see what I mean by going to the live example on this link and moving the zoom slider
https://bryntum.com/docs/scheduler/api/Scheduler/preset/ViewPreset

or by viewing this video

SliderExample.mp4
(457.35 KiB) Downloaded 73 times

I was hoping that I could leverage the built in slider or even have the zoom programmatically fired from a click of a button or event so that I can zoom in/out of a specific header. My requirements are for example; If I had Quarter, Month and Week as the custom headers and I zoom out I would like to zoom out on the Quarter only since it is the largest view and similarly if I zoom in it would zoom on the Week only. Is this possible?


Post by alex.l »

Hi rapiduser,

I noticed that when a set of custom defined view presets are configured and the zoom feature is enabled, as you move the slider it removes what was configured to what appears to be a set of defaults?

I suppose you meant the configuration that you defined in https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/TimelineViewPresets#config-viewPreset
That configuration applies only on initial state. If you want to change zoom levels / presets, you should use the approach described below.

My requirements are for example; If I had Quarter, Month and Week as the custom headers and I zoom out I would like to zoom out on the Quarter only since it is the largest view and similarly if I zoom in it would zoom on the Week only. Is this possible?

Yes, it is possible. Since zooming is just switching via presets of a scheduler, all you need is configure presets you want to see instead of our default set of presets, using https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/TimelineViewPresets#config-presets config.
See example here:
https://bryntum.com/examples/scheduler/configuration/
And docs:
https://bryntum.com/docs/scheduler/api/Scheduler/preset/PresetStore
https://bryntum.com/docs/scheduler/api/Scheduler/preset/PresetManager

All the best,
Alex


Post by rapiduser »

alex.l wrote: Fri Oct 29, 2021 9:11 am

Hi rapiduser,

I noticed that when a set of custom defined view presets are configured and the zoom feature is enabled, as you move the slider it removes what was configured to what appears to be a set of defaults?

I suppose you meant the configuration that you defined in https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/TimelineViewPresets#config-viewPreset
That configuration applies only on initial state. If you want to change zoom levels / presets, you should use the approach described below.

My requirements are for example; If I had Quarter, Month and Week as the custom headers and I zoom out I would like to zoom out on the Quarter only since it is the largest view and similarly if I zoom in it would zoom on the Week only. Is this possible?

Yes, it is possible. Since zooming is just switching via presets of a scheduler, all you need is configure presets you want to see instead of our default set of presets, using https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/TimelineViewPresets#config-presets config.
See example here:
https://bryntum.com/examples/scheduler/configuration/
And docs:
https://bryntum.com/docs/scheduler/api/Scheduler/preset/PresetStore
https://bryntum.com/docs/scheduler/api/Scheduler/preset/PresetManager

Hello Alex,

thanks for the response. I am still a bit confused. I have reference to my Gantt instance. If I invoke myGantt.viewPreset I can see that it contains the view presets that I defined. I assume I would need to use the value returned from that and set it to the timeline presets?

Yes, it is possible. Since zooming is just switching via presets of a scheduler, all you need is configure presets you want to see instead of our default set of presets, using https://bryntum.com/docs/scheduler/api/Scheduler/view/mixin/TimelineViewPresets#config-presets config.

How do I do this from gantt? The link provided was for scheduler.


Post by alex.l »

Actually no.

It works the same for the Scheduler and the Gantt. But I see it is not clear for users how it works. So I created a ticket to add the guide about view presets to avoid these questions in future. https://github.com/bryntum/support/issues/3651

https://bryntum.com/docs/gantt/api/Scheduler/view/mixin/TimelineViewPresets#config-viewPreset is just a config to customize initial state of the Gantt. It will be reset after zoomIn/zoomOut.
Initially this property is created to use id of viewPreset from set of pre-defined https://bryntum.com/docs/gantt/api/Scheduler/view/mixin/TimelineViewPresets#config-presets of the Gantt. But re-defined viewPreset may be customized and will be reset after zoomIn/zoomOut.
https://bryntum.com/docs/gantt/api/Scheduler/view/mixin/TimelineViewPresets#config-presets contains set of presets/zoom levels of the Gantt. That's array of view presets that used while zoomIn/zoomOut.
If you need to change zoom levels, remove/customize/add it, you should use this config.
An example is here: https://bryntum.com/examples/scheduler/configuration/

To reach your goal you need to do the next:

  1. Set up presets you need by extending default or adding your own.
    Docs:
    https://bryntum.com/docs/gantt/api/Scheduler/preset/ViewPreset
    https://bryntum.com/docs/gantt/api/Scheduler/preset/PresetManager

Example:

PresetManager.registerPreset('weekNumberAndYear', {
    name              : 'Year/week number',
    tickWidth         : 35,
    rowHeight         : 32,
    displayDateFormat : '{w.}W YYYY',
    shiftIncrement    : 1,
    shiftUnit         : 'year',
    timeResolution    : {
        unit      : 'd',
        increment : 1
    },
    defaultSpan     : 24,
    mainHeaderLevel : 1,
    headers         : [
        {
            unit       : 'y',
            increment  : 1,
            dateFormat : 'YYYY'
        },
        {
            unit       : 'w',
            increment  : 1,
            dateFormat : 'WW'
        }
    ]
});
  1. Use your own set of presets in the Gantt.
const 
     requiredPresetIds = {
        secondAndMinute   : 1,
        minuteAndHour     : 1,
        hourAndDay        : 1,
        dayNightShift     : 1,
        weekAndDay        : 1,
        weekAndMonth      : 1,
        weekAndDayLetter  : 1,
        weekDateAndMonth  : 1,
        weekNumberAndYear : 1, // our new preset, registered above
        monthAndYear      : 1,
        year              : 1,
        manyYears         : 1
    },
    presets  = PresetManager.records.filter(p => requiredPresetIds[p.id]);
    
[...] const gantt = new Gantt({ [...] presets, // use your own set of presets. In this case you will have your own set of zoom levels which won't be reset after zooming. [....] });

After you replace default set of presets, zoomIn/zoomOut will use your presets in the order you defined, since zooming is just switching of presets.

All the best,
Alex


Post by rapiduser »

alex.l wrote: Tue Nov 02, 2021 12:17 pm

Actually no.

It works the same for the Scheduler and the Gantt. But I see it is not clear for users how it works. So I created a ticket to add the guide about view presets to avoid these questions in future. https://github.com/bryntum/support/issues/3651

https://bryntum.com/docs/gantt/api/Scheduler/view/mixin/TimelineViewPresets#config-viewPreset is just a config to customize initial state of the Gantt. It will be reset after zoomIn/zoomOut.
Initially this property is created to use id of viewPreset from set of pre-defined https://bryntum.com/docs/gantt/api/Scheduler/view/mixin/TimelineViewPresets#config-presets of the Gantt. But re-defined viewPreset may be customized and will be reset after zoomIn/zoomOut.
https://bryntum.com/docs/gantt/api/Scheduler/view/mixin/TimelineViewPresets#config-presets contains set of presets/zoom levels of the Gantt. That's array of view presets that used while zoomIn/zoomOut.
If you need to change zoom levels, remove/customize/add it, you should use this config.
An example is here: https://bryntum.com/examples/scheduler/configuration/

To reach your goal you need to do the next:

  1. Set up presets you need by extending default or adding your own.
    Docs:
    https://bryntum.com/docs/gantt/api/Scheduler/preset/ViewPreset
    https://bryntum.com/docs/gantt/api/Scheduler/preset/PresetManager

Example:

PresetManager.registerPreset('weekNumberAndYear', {
    name              : 'Year/week number',
    tickWidth         : 35,
    rowHeight         : 32,
    displayDateFormat : '{w.}W YYYY',
    shiftIncrement    : 1,
    shiftUnit         : 'year',
    timeResolution    : {
        unit      : 'd',
        increment : 1
    },
    defaultSpan     : 24,
    mainHeaderLevel : 1,
    headers         : [
        {
            unit       : 'y',
            increment  : 1,
            dateFormat : 'YYYY'
        },
        {
            unit       : 'w',
            increment  : 1,
            dateFormat : 'WW'
        }
    ]
});
  1. Use your own set of presets in the Gantt.
const 
     requiredPresetIds = {
        secondAndMinute   : 1,
        minuteAndHour     : 1,
        hourAndDay        : 1,
        dayNightShift     : 1,
        weekAndDay        : 1,
        weekAndMonth      : 1,
        weekAndDayLetter  : 1,
        weekDateAndMonth  : 1,
        weekNumberAndYear : 1, // our new preset, registered above
        monthAndYear      : 1,
        year              : 1,
        manyYears         : 1
    },
    presets  = PresetManager.records.filter(p => requiredPresetIds[p.id]);
    
[...] const gantt = new Gantt({ [...] presets, // use your own set of presets. In this case you will have your own set of zoom levels which won't be reset after zooming. [....] });

After you replace default set of presets, zoomIn/zoomOut will use your presets in the order you defined, since zooming is just switching of presets.

The guide is a great idea.

I will try what you suggested.

Will let you know


Post by rapiduser »

So I got it working for the most part. The only thing I am running into now is that in some cases the tickWidth is not being honored. Perhaps its the way the library works but if I had data where the year is in 2017 and spans to 2018 the Gantt chart shows headers for 2017 and 2018 and that's it despite setting the tickWidth to 150. Its as if the Gantt zooms in for you. Is there a way to get the actual tickWidth? I tried accessing it via the tickWidth property but its value is the one I set and not the one I see.


Post by alex.l »

Could you please show what you meant and show your code?

All the best,
Alex


Post by rapiduser »

alex.l wrote: Wed Nov 10, 2021 8:56 am

Could you please show what you meant and show your code?

This is a sample of what I mean.

I set the tickWidth to be 150 and the units to be year however the Gantt chart seems to auto fit the width of the Gantt based on the data provided so when I go to add my presets and adjust the width based on zoom in/out its not accurate due to the auto resizing.

So I either need to get the actual width that is rendered or have the Gantt honor whatever the tickWidth I set. Is this be design or is there something I need to configure?

CSSHelper.insertRule('.customHeader .b-sch-header-timeaxis-cell { font-size:0.9em;border-left:1px solid rgb(160 160 160);border-bottom:1px solid rgb(160 160 160); font-weight:400;}');

new Scheduler({
    appendTo: document.body,
    cls : 'customHeader',
    autoHeight: true,

startDate: new Date(2022, 4, 1),
endDate  : new Date(2023, 6, 1),
resources : [
    { id : 1, name : 'Bob' },
    { id : 2, name : 'John' },
    { id : 3, name : 'Kate' },
    { id : 4, name : 'Lisa' },
],
events : [
    { id : 1, resourceId : 1, startDate : new Date(2022, 4, 3), duration : 5, name : 'A cool task' }
],
viewPreset: {
    timeResolution: {
        unit     : 'day',
        increment: 1
    },
	tickWidth: 150,
    headers: [
        {
            unit      : 'year',
            dateFormat: 'YYYY',
        }
        
    ]
},

columns: [
    { field: 'name', text: 'Name', width: 100 }
]
});


Post by saki »


Post by rapiduser »

saki wrote: Wed Nov 10, 2021 4:14 pm

Perhaps you need to set https://bryntum.com/docs/gantt/api/Gantt/view/Gantt/#config-autoAdjustTimeAxis to false.

Unfortunately that does not work for me


Post Reply