custom zooming levels

[Luffy]

Is it possible to zoom with 30 min blocks?. I can see 15min blocks. But basically what I need is dividing an hour into two zoom levels.

[pmiklashevich]

Zoom levels are configurable. Please see zoomLevels config.

In Configuration demo please select "Minutes" preset from the combo. See min tick is 30 mins. But when you zoomIn/zoomOut zoom level configs are used. If you look at lib/Scheduler/view/mixin/TimelineZoomable.js and search for `zoomLevels`, you'll see minute levels:

//MINUTE
{ width : 30, increment : 15, resolution : 5, preset : 'minuteAndHour' },
{ width : 60, increment : 15, resolution : 5, preset : 'minuteAndHour' },
{ width : 130, increment : 15, resolution : 5, preset : 'minuteAndHour' },

`increment` is equal to 15. Zoom levels configurations replace some default configs of the view preset. If you set `increment` to 30 in your zoomLevels you'll get what you want.

If you look at lib/Scheduler/preset/PresetManager.js and search for `minuteAndHour` preset you'll see timeResolution is set to 30 minutes:

minuteAndHour : {
    tickWidth         : 100,   // Time column width
    tickHeight        : 60,
    displayDateFormat : 'll LT', // Controls how dates will be displayed in tooltips etc
    shiftIncrement    : 1,     // Controls how much time to skip when calling shiftNext and shiftPrevious.
    shiftUnit         : 'hour', // Valid values are "MILLI", "SECOND", "minute", "HOUR", "DAY", "WEEK", "MONTH", "QUARTER", "YEAR".
    defaultSpan       : 24,    // By default, if no end date is supplied to a view it will show 24 hours
    timeResolution    : {      // Dates will be snapped to this resolution
        unit      : 'minute',  // Valid values are "MILLI", "SECOND", "minute", "HOUR", "DAY", "WEEK", "MONTH", "QUARTER", "YEAR".
        increment : 30
    },
    // This defines your header, you must include a "middle" object, top/bottom are optional.
    // For each row you can define "unit", "increment", "dateFormat", "renderer", "align", and "thisObj"
    headerConfig : {
        middle : {
            unit       : 'minute',
            increment  : '30',
            dateFormat : 'mm'
        },
        top : {
            unit       : 'hour',
            dateFormat : 'ddd MM/DD, hA'
        }
    }
},

Best,
Pavel

[Luffy]

what about the order should be? how does it matter

 { width: 60, increment: 30, resolution: 5, preset: 'minuteAndHour' },
    { width: 100, increment: 15, resolution: 5, preset: 'minuteAndHour' },
    { width: 60, increment: 5, resolution: 5, preset: 'minuteAndHour' },

    {
      width: 80,
      increment: 2,
      resolution: 30,
      preset: 'hourAndDay',
      resolutionUnit: 'MINUTE'
    },
    {
      width: 100,
      increment: 1,
      resolution: 30,
      preset: 'hourAndDay',
      resolutionUnit: 'MINUTE'
    }

here last zoom level not working as expected

I need show from minutes to years, is that configurable?

[pmiklashevich]

Yes, that is configurable. width, increment and resolution replace corresponding values from the specified preset. Real zoom level doesn't depend on a position in the zoomLevels array. Real level is calculated based on the values provided in the config, to make able scrolling zooms. But need to be careful, because calculated indexes can be float or some of them can be identical. In this case scrolling through zoom will be broken. We have a ticket to get it fixed: https://app.assembla.com/spaces/bryntum/tickets/7783-zoomin-and-zoomout-get-stuck-at-a-random-level/details

Please try to setup zoom levels you want with correct presets, and then if the order will be wrong or some of levels won't work, I'll help you to adjust them. width, increment, resolution is required to be different for similar view presets to make zoom levels different.

P.S. Please look at our default zoomLevels specified in lib/Scheduler/view/mixin/TimelineZoomable.js to get an idea of what is supposed to be specified.

Best,
Pavel

[Luffy]

Thanks Pavel,


I have a defined zoom level array and zoom is not working from 5th index, could you please explain what is the reason and give me the corrected array as well? (note: zoom level should be from minutes => year)

{ width: 100, increment: 30, resolution: 5, preset: 'minuteAndHour' },
    { width: 150, increment: 30, resolution: 5, preset: 'minuteAndHour' },
    { width: 80, increment: 15, resolution: 5, preset: 'minuteAndHour' },
    { width: 60, increment: 5, resolution: 5, preset: 'minuteAndHour' },
	
	 {
      width: 100,
      increment: 2,
      resolution: 30,
      preset: 'hourAndDay',
      resolutionUnit: 'MINUTE'
    },
    {
      width: 120,
      increment: 1,
      resolution: 30,
      preset: 'hourAndDay',
      resolutionUnit: 'MINUTE'
    },
	
	{
      width: 100,
      increment: 1,
      resolution: 1,
      preset: 'weekAndDay',
      resolutionUnit: 'HOUR'
    },
    {
      width: 64,
      increment: 2,
      resolution: 30,
      preset: 'hourAndDay',
      resolutionUnit: 'MINUTE'
    },
	
	{ width: 20, increment: 1, resolution: 1, preset: 'weekAndDayLetter' },
    {
      width: 54,
      increment: 1,
      resolution: 1,
      preset: 'weekAndDay',
      resolutionUnit: 'HOUR'
    },
	
	{
      width: 100,
      increment: 1,
      resolution: 7,
      preset: 'monthAndYear',
      resolutionUnit: 'DAY'
    },
    {
      width: 30,
      increment: 1,
      resolution: 1,
      preset: 'weekDateAndMonth',
      resolutionUnit: 'DAY'
    },
	
	{
      width: 100,
      increment: 1,
      resolution: 1,
      preset: 'year',
      resolutionUnit: 'MONTH'
    },
    {
      width: 160,
      increment: 1,
      resolution: 1,
      preset: 'year',
      resolutionUnit: 'MONTH'
    },
	
	{
      width: 80,
      increment: 1,
      resolution: 1,
      preset: 'manyYears',
      resolutionUnit: 'YEAR'
    },
    {
      width: 50,
      increment: 1,
      resolution: 1,
      preset: 'year',
      resolutionUnit: 'MONTH'
    },
	

Thanks

[pmiklashevich]

Ok, let me show you how to setup zoom levels. For example lets modify Basic demo (examples/basic/app.js)

let zoomLevels = [
    { name : 'YEAR', preset : 'manyYears', width : 50, increment : 1, resolution : 1, resolutionUnit : 'YEAR' }, // level 0
    { name : 'QUARTER', preset : 'year', width : 50, increment : 1, resolution : 3, resolutionUnit : 'MONTH' }, // level 1
    { name : 'MONTH', preset : 'year', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // level 2
    { name : 'WEEK', preset : 'weekAndMonth', width : 50, increment : 1, resolution : 4, resolutionUnit : 'WEEK' }, // level 3
    { name : 'DAY', preset : 'weekAndMonth', width : 100, increment : 1, resolution : 7, resolutionUnit : 'DAY' }, // level 4
    { name : 'HOUR', preset : 'hourAndDay', width : 50, increment : 1, resolution : 1, resolutionUnit : 'HOUR' }, // level 5
    { name : 'MINUTE', preset : 'hourAndDay', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MINUTE' } // level 6
];

let scheduler = new Scheduler({
    zoomLevels : zoomLevels,
    listeners  : {
        zoomChange({ level }) {
            console.log(level, scheduler.zoomLevel);
            // level is a row of zoomLevels, scheduler.zoomLevel is a number => calculated zoom level index
        }
    },
    appendTo   : 'container',
    minHeight  : '20em',
    resources  : resources,
    events     : events,
    startDate  : new Date(2017, 0, 1),
    // set view preset to match MINUTE zoom level
    viewPreset : {
        name      : 'hourAndDay',
        tickWidth : 100 // tick width 100 to match width in the last (index 6) zoom level
    },
    rowHeight        : 50,
    barMargin        : 5,
    multiEventSelect : true,

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

How did I find the order? Lets take a look closer. Lets create only 2 zoom levels: FOO & BAR with the same numbers. Then go to the browser and try to change zoom by mouse wheel. See BAR level is 0 but after you zoom to 0 level you can't zoom to FOO. It's not applicable.

let zoomLevels = [
    { name : 'FOO', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // not applicable
    { name : 'BAR', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' } // 0
];

let scheduler = new Scheduler({
    zoomLevels : zoomLevels,
    listeners  : {
        zoomChange({ level }) {
            console.log(level, scheduler.zoomLevel);
        }
    },

Let's change width of FOO to 100 and try again. Now when you scroll up zoom is not getting changed. When you scroll down zoom is infinite. FOO is 0 level, but BAR is -0.5. That means that order in zoom levels array is wrong.

let zoomLevels = [
    { name : 'FOO', preset : 'year', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // 0
    { name : 'BAR', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' } // -0.5
];

let scheduler = new Scheduler({
    zoomLevels : zoomLevels,
    listeners  : {
        zoomChange({ level }) {
            console.log(level, scheduler.zoomLevel);
        }
    },

Let's change width of FOO to 50, BAR to 100 and try again. Now there are only 2 zoom levels: one scroll up and one scroll down. Further scrolling has no effect. Foo is 0, Bar is 1. Calculated zoom levels should match array indexes. You can play around other parameters like increment, resolution and resolutionUnit, but please make sure order is correct. That's really important when "preset" of different zoom levels is the same

let zoomLevels = [
    { name : 'FOO', preset : 'year', width : 50, increment : 1, resolution : 1, resolutionUnit : 'MONTH' }, // 0
    { name : 'BAR', preset : 'year', width : 100, increment : 1, resolution : 1, resolutionUnit : 'MONTH' } // 1
];

let scheduler = new Scheduler({
    zoomLevels : zoomLevels,
    listeners  : {
        zoomChange({ level }) {
            console.log(level, scheduler.zoomLevel);
        }
    },

If you want to have more control over zoom levels you can specify 6 custom view presets. Make sure every view preset is what you expect to see on the screen. So then you know for sure what preset is applied on every level.

Best wishes,
Pavel

[Luffy]

Thanks Pavel,

In examples you mentioned only one preset here, 1st example you have all presets but the order is YEAR to MINUTE. This is NOT what I want
I did the same way.It is working. But I need MINUTE to YEAR zooming. see the code below

[
    { width: 50, increment: 30, resolution: 5, preset: 'minuteAndHour' }, // 0
    { width: 60, increment: 30, resolution: 5, preset: 'minuteAndHour' }, // 1
    { width: 80, increment: 15, resolution: 5, preset: 'minuteAndHour' }, // 2
    { width: 100, increment: 5, resolution: 5, preset: 'minuteAndHour' }, // 3 
    { width: 100, increment: 1, resolution: 30, preset: 'hourAndDay' }, // ? No Zoom Index, not visible
    { width: 150, increment: 1, resolution: 30, preset: 'hourAndDay' } // ? No Zoom Index, not visible
]

here,

how can I show 'hourAndDay' presets ?
Is it not possible to do it by reverse order ?
Can't we have same width values from different presets (in this example width:100) ?

Thanks

[pmiklashevich]

how can I show 'hourAndDay' presets ?

Just need to find correct order. It's hard to manually sort that zoom levels to make it work. Please wait until https://app.assembla.com/spaces/bryntum/tickets/7783 is done.
Meanwhile please create custom view presets per level. How to register new view presets is shown in examples/configuration demo:

PresetManager.registerPreset('dayNightShift', {...

https://www.bryntum.com/docs/scheduler/#Scheduler/preset/PresetManager#function-registerPreset-static
Please create 'myMinute', 'myHour', 'myDay' presets and so on. Then in zoomLevels specify your preset names. That will explicitly define parameters for zoom levels.

Is it not possible to do it by reverse order ?

No for now it's not possible. You can zoom to level or zoom to a view preset, but when you zoomIn/zoomOut it takes current level +1 / -1.

Can't we have same width values from different presets (in this example width:100) ?

If zoom levels have same view presets and width, increment must be different.

[Samith]

Hi Pavel,
I have updated your latest version (V3.0.1) and our custom zoom levels do not work anymore.

I tried to find "zoomLevels" property but couldn't. Earlier we have set our custom zoom levels using this property.

I have tested using a new basic example provided with the new version, the custom zoom levels are not working. Here I have attached the file. Whatever zoom level that we set, the scheduler sticks into default preset.

What we are missing here?

[mats]

Have you read the 3.0 upgrade guide? https://bryntum.com/docs/scheduler/#guides/upgrades/3.0.md