Setting/Overriding Zoom Levels

[absox]

Hi,

I'm having trouble with calculated zoom level order. I have the following:

			
{
	id: 'month',
	base: 'weekDateAndMonth',
	columnLinesFor: 2,
	headers: [
		{
			unit: 'month',
			dateFormat: 'MMM YYYY',
		},
		{
			unit: 'week',
			dateFormat: '{WK }MM/DD',
		},
		{
			unit: 'day',
			dateFormat: 'd1',
		},
	],
},
{
	id: 'week',
	base: 'weekAndDayLetter',
}

If I am on the week level, zoomIn will go to the month level. If I take out the header specification then it properly understands that week is the most zoomed in level.

Is there way for me to override the zoom level order? Some other setting that would help?

Thanks so much for your help.

[alex.l]

Please check this docs: https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineZoomable
You could specify all presets you need (for default presets you may just use id and base configs) in https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineViewPresets#config-presets in the order you need.

const myScheduler = new Scheduler({
    presets : [
        {
            base : 'hourAndDay',
            id   : 'MyHourAndDay',
            // other preset configs....
        },
        {
            base : 'weekAndMonth',
            id   : 'MyWeekAndMonth',
            // other preset configs....
        }
    ],
    viewPreset : 'MyHourAndDay',
    // other scheduler configs....
    });

[absox]

I believe that is what I am doing but not getting the expected results. Below is what I set for all the presets, but when I zoom in and out I get, from zoomed in to zoomed out, month, week, quarter, year. In other words, if I am on the "week" level and zoomIn() I will be on the "month" level. If I take the header definition out of month, I get week, month, quarter, year, which is what I want.

In https://www.bryntum.com/docs/scheduler-pro/#Scheduler/preset/PresetStore it also says "The store data is sorted in special zoom order. That is zoomed out to zoomed in. The first Preset will produce the narrowest event bars the last one will produce the widest event bars." That suggests that the zoom order isn't only dependent on the order of presets provided.

[
    {
        id: 'year',
        base: 'monthAndYear',
        shiftUnit: 'year',
        shiftIncrement: 1,
    },
    {
        id: 'quarter',
        base: 'weekDateAndMonth',
        columnLinesFor: 1,
        headers: [
            {
                unit: 'month',
                dateFormat: 'MMM YYYY',
            },
            {
                unit: 'week',
                dateFormat: '{WK }MM/DD',
            },
        ],
    },
    {
        id: 'month',
        base: 'weekDateAndMonth',
        columnLinesFor: 2,
        headers: [
            {
                unit: 'month',
                dateFormat: 'MMM YYYY',
            },
            {
                unit: 'week',
                dateFormat: '{WK }MM/DD',
            },
            {
                unit: 'day',
                dateFormat: 'd1',
            },
        ],
    },
    {
        id: 'week',
        base: 'weekAndDayLetter',
        shiftUnit: 'week',
        shiftIncrement: 1,
    },
];

[alex.l]

Actually, yes. There is a special sorter that may change the order. It depends on a few things, one of it - bottom header.
I will post the sorter method here, please check it and tune headers:

// Maintained in order automatically while adding.
        this.storage.addSorter((lhs, rhs) => {
            const
                leftBottomHeader  = lhs.bottomHeader,
                rightBottomHeader = rhs.bottomHeader;

        // Sort order:
        //  Milliseconds per pixel.
        //  Tick size.
        //  Unit magnitude.
        //  Increment size.
        const
            order = rhs.msPerPixel - lhs.msPerPixel ||
            unitMagnitudes[leftBottomHeader.unit] - unitMagnitudes[rightBottomHeader.unit] ||
            leftBottomHeader.increment - rightBottomHeader.increment;

        return order * this.zoomOrder;
    });

Unti magnitudes:

{
  day: 4,
  decade: 9,
  hour: 3,
  millisecond: 0,
  minute: 2,
  month: 6,
  quarter: 7,
  second: 1,
  week: 5,
  year: 8
}

All the best,
Alex

[absox]

Thank you for looking into that Alex. So in this case, both presets have the same bottom header unit - days. In fact, I've tried setting the headers for the week preset (based on weekAndDayLetter) with no change. I've also tried changing the order in which I'm defining the presets. Still, the month preset is sorted as being more zoomed in than week, despite the order I set them. This seems like a bug. Is my only option to change the month header? Can I remove that sorter?

[alex.l]

In fact, the reason of that is msPerPixel value, which calculates as:

    get msPerPixel() {
        const { bottomHeader } = this;

    return Math.round(DH.asMilliseconds(bottomHeader.increment || 1, bottomHeader.unit) / this.tickWidth);
}

Yes, you can try to remove the sorter and add your own:

scheduler.presets.storage.sorters.clear();
scheduler.presets.storage.addSorter((lhs, rhs) => {
    // your code here
});

https://bryntum.com/docs/gantt/#Core/util/Collection#function-addSorter

[absox]

Thanks so much - yes, that solved the problem. I was only able to make it work by removing and re-adding the presets as well, then re-zooming to the preferred preset, but at least it's working now. Thanks again!