Support for v6.x of our Scheduling components


Post by ngd »

We are showing year and quarter, on separate rows, in our Gantt chart. The customer indicates the month the fiscal year starts. How do I show the year and quarter as per fiscal year?

Thanks!


Post by arcady »

Sch.data.TimeAxis class has Sch.data.TimeAxis#generateTicks methods which can be overridden to build a custom set of ticks with any custom periods

    timeAxis : {
        generateTicks : function () {
            //
        }
    }

It's shown in this demo

Also timeaxis header can provide renderer and cellGenerator functions

    viewPreset : {
        headerConfig : {
            bottom : {
                unit     : 'DAY',
                align    : 'center',
                renderer : function(start, end, config, index, eventStore) {
                    return eventStore.getEventsInTimeSpan(start, end).length;
                }
            },
            ...
        }
    },

cellGenerator A function that should return an array of objects containing 'start', 'end' and 'header' properties.
Use this if you want full control over how the header rows are generated. This is not applicable for the lowest row in your configuration.

The latter function is not documented well and has no usage example in demos.

Please check Sch.view.model.TimeAxis class createHeaderRow method code to understand how such function should look (it's used as the default behaviour if no cellGenerator provided).

The above methods should allow you doing almost anything w/ the timeaxis headers.


Post by ngd »

All this is quite complicated for what seems like some basic functionality. The fiscal year does not start in Jan in a lot of countries. And they want to see the Q1, Q2, etc. as per their fiscal quarter. In my opinion, this should be part of the solution itself.

Can you at least write a demo that does this so that your customers like us can simply copy paste that code?


Post by arcady »

Here is an example of modified year view preset I put in the advanced demo Gantt.js file.
I've added cellGenerator function that basically delays all year/quarter borders +1 month

Ext.define('Gnt.examples.advanced.view.Gantt', {
    extend : 'Gnt.panel.Gantt',
    ...
    viewPreset              : {
        timeColumnWidth     : 100,
        rowHeight           : 24,
        resourceColumnWidth : 100,
        displayDateFormat   : 'Y-m-d',
        shiftUnit           : 'YEAR',
        shiftIncrement      : 1,
        defaultSpan         : 1,
        timeResolution      : {
            unit        : 'MONTH',
            increment   : 1
        },
        headerConfig        : {
            middle      : {
                unit : 'QUARTER',
                cellGenerator : function (start, end) {
                    if (!start) return;

                    var cells = [],
                        dt = start,
                        intervalEnd;

                    // Support cases when previous_quarter_end + 1 month lies in start-end range

                    var prevQuarterStart = Sch.util.Date.getNext(dt, 'q', -1);
                    var prevQuarterEnd = Sch.util.Date.getNext(prevQuarterStart, 'q');

                    // Shift quarter border right +1 month
                    intervalEnd = Sch.util.Date.add(prevQuarterEnd, 'mo', 1);

                    // if shifted previous quarter border should be shown
                    if (intervalEnd >= dt && intervalEnd < end) {
                        cells.push({
                            header      : Math.floor(dt.getMonth() / 3) || 4,
                            start       : dt,
                            end         : intervalEnd,
                            align       : 'center',
                            headerCls   : ''
                        });

                        dt = intervalEnd;
                    }

                    while (dt < end) {

                        nextQuarterStart = Sch.util.Date.getNext(dt, 'q');

                        // Shift quarter border right +1 month
                        intervalEnd = Sch.util.Date.add(nextQuarterStart, 'mo', 1)

                        intervalEnd = Sch.util.Date.min(intervalEnd, end);

                        cells.push({
                            header      : Math.floor(dt.getMonth()/ 3) + 1,
                            start       : dt,
                            end         : intervalEnd,
                            align       : 'center',
                            headerCls   : ''
                        });

                        dt              = intervalEnd;
                    }

                    return cells;
                }
            },
            top         : {
                unit : 'YEAR',
                cellGenerator : function (start, end) {
                    if (!start) return;

                    var cells = [],
                        dt = start,
                        intervalEnd;

                    var prevYearStart = Sch.util.Date.getNext(dt, 'y', -1);
                    var prevYearEnd = Sch.util.Date.getNext(prevYearStart, 'y');

                    // Shift previous Year border right +1 month
                    intervalEnd = Sch.util.Date.add(prevYearEnd, 'mo', 1);

                    // if shifted previous year border should be shown
                    if (intervalEnd >= dt && intervalEnd < end) {
                        cells.push({
                            header      : dt.getFullYear() - 1,
                            start       : dt,
                            end         : intervalEnd,
                            align       : 'center',
                            headerCls   : ''
                        });

                        dt = intervalEnd;
                    }

                    while (dt < end) {
                        nextQuarterStart = Sch.util.Date.getNext(dt, 'y');

                        // SHIFT QUARTER BORDER RIGHT +1 MONTH
                        intervalEnd = Sch.util.Date.add(nextQuarterStart, 'mo', 1)

                        // make sure interval end is between start/end range
                        intervalEnd = Sch.util.Date.min(intervalEnd, end);

                        cells.push({
                            header      : dt.getFullYear(),
                            start       : dt,
                            end         : intervalEnd,
                            align       : 'center',
                            headerCls   : ''
                        });

                        dt = intervalEnd;
                    }

                    return cells;
                }
            }
        }
    },
    ...

I've also made a feature request on fiscal years support: https://github.com/bryntum/support/issues/5273


Post by arcady »

BTW Another option to show fiscal year borders is lines plugin: https://www.bryntum.com/docs/gantt-for-extjs/#!/api/Sch.plugin.Lines


Post Reply