Our state of the art Gantt chart


Post by MauriceLapre »

Hi,

I've added the histogram widget to my app, which is based on the advanced demo so with a toolbar and everything inside a panel:

const panel = new Panel({
        adopt  : 'container',
        //layout   : 'fit',
        layoutStyle: {
            flexFlow: 'column nowrap'
        },
        items    : [
            gantt,
            new Splitter({
                flex : '0 0 0.5em'
            }),
            histToolbar,
            histogram 
        ],        
tbar : ganttToolbar });

Couple of issues/questions:
1) The histToolbar should not be growing or shrinking. I've added

flex     : '0 0 3em',

to it but it still does when dragging the splitter. Any ideas on how to fix this?

2) The horizontal splitter is positioned incorrectly on initialization, it's too far to the left. See

Bryntum Gantt - 011.png
Bryntum Gantt - 011.png (37.76 KiB) Viewed 1222 times

. Looks like it's getting repositioned on or after rendering of the histogram widget, ignoring the gantt settings but looking at the width of the "name" column. Tried setting "flex" on the histrogram or setting width on the "name" column but that's all not working correctly. I'd like it to adhere to the original settings from gantt. How can I address this?

Thank you!


Post by MauriceLapre »

Issue 2 is solved by adding the same subgridConfigs from gantt to histogram.


Post by sergey.maltsev »

Hi!

Just check if flex layout is set up correctly.

You could also try use height for histogram Toolbar and dissable flex.

.histogram-toolbar {
    flex            : none,
    height          : 2em;
}

Also if you use framework please refer to it's layout guide because it would add css rules which could affect on flex behavior.


Post by sergey.maltsev »

Also you could try using Panel for bottom container with histogram and checkboxes.
This is a bit modified code from resourcehistogram example which is in zip.

const project = window.project = new ProjectModel({
    startDate : '2019-01-16',
    endDate   : '2019-02-13',

transport : {
    load : {
        url : '../_datasets/launch-saas.json'
    }
},
autoLoad : true
});

const gantt = new Gantt({
    project,
    appendTo : 'container',
    flex     : 1,
    features : {
        labels : {
            left : {
                field  : 'name',
                editor : {
                    type : 'textfield'
                }
            }
        }
    },

viewPreset  : 'weekAndDayLetter',
columnLines : true,

columns : [
    { type : 'name', width : 280 },
    { type : 'resourceassignment', width : 170 }
],

startDate : '2019-01-11'
});

new Splitter({
    appendTo : 'container'
});

const
    toolBar = new Toolbar({
        cls    : 'histogram-toolbar',
        height : '3em',
        items  : [
            {
                type    : 'checkbox',
                ref     : 'showBarText',
                text    : 'Show bar texts',
                tooltip : 'Check to show resource allocation in the bars',
                checked : false,
                onAction({ source }) {
                    histogram.showBarText = source.checked;
                }
            },
            {
                type    : 'checkbox',
                ref     : 'showMaxEffort',
                text    : 'Show max allocation',
                tooltip : 'Check to display max resource allocation line',
                checked : true,
                onAction({ source }) {
                    histogram.showMaxEffort = source.checked;
                }
            },
            {
                type    : 'checkbox',
                ref     : 'showBarTip',
                text    : 'Enable bar tooltip',
                tooltip : 'Check to show tooltips when moving mouse over bars',
                checked : true,
                onAction({ source }) {
                    histogram.showBarTip = source.checked;
                }
            }
        ]
    }),

histogram = window.histogram = new ResourceHistogram({
    project,
    hideHeaders : true,
    partner     : gantt,
    rowHeight   : 50,
    showBarTip  : true,
    columns     : [
        { field : 'name', flex : 1  }
    ]
});

new Panel({
    appendTo : 'container',
    flex     : 1,
    layout   : 'fit',
    items    : [histogram],
    tbar     : toolBar
});

Post by MauriceLapre »

Both approaches are not working. I tried many things, all give this error:

DomHelper.js:356 Uncaught (in promise) TypeError: Cannot read property 'style' of null
    at Function.setLength (VM387 gantt.module.js:31267)
    at ResourceHistogram.updateCanvasSize (VM387 gantt.module.js:122974)
    at functionChainRunner (VM387 gantt.module.js:13208)
    at ResourceHistogram.plugInto.<computed> [as updateCanvasSize] (VM387 gantt.module.js:13181)
    at ResourceHistogram.onColumnsChanged (VM387 gantt.module.js:133842)
    at ColumnStore.trigger (VM387 gantt.module.js:8523)
    at ColumnStore.onModelChange (VM387 gantt.module.js:23615)
    at VM387 gantt.module.js:15932
    at Array.forEach (<anonymous>)
    at TimeAxisColumn.afterChange (VM387 gantt.module.js:15931)

I now have this:

const ganttPanel = new Panel({
        adopt  : 'container',
        //appendTo : 'container',
        //flex     : 1,
        layout   : 'fit',
        /* layoutStyle: {
            flexFlow: 'column nowrap'
        }, */
        items    : [
            gantt            
],
tbar : ganttToolbar }); console.log('gantt panel created'); new Splitter({ appendTo : 'container', //flex : '0 0 0.5em' }); const histPanel = new Panel({ appendTo : 'container', flex : 1, layout : 'fit', items : [ //histToolbar, histogram ], tbar : histToolbar });

Even when not instantiating the second panel, I get that error...


Post by sergey.maltsev »

Hi, MauriceLapre!

Please attach your full app code to check it.


Post by MauriceLapre »

Got it working. Put everything in one panel and added minHeight and maxHeight to the histToolbar. Now, everything is positioned correctly and the histToolbar is not resizing anymore.

const panel = new Panel({
        id : 'mainpanel',
        adopt  : 'container',
        //layout   : 'fit',
        layoutStyle: {
            flexFlow: 'column nowrap'
        },
        items    : [
            gantt,
            new Splitter({
                flex : '0 0 0.5em'
            }),
            histToolbar,
            histogram            
],
tbar : ganttToolbar });

Thanks for the help.


Post by sergey.maltsev »

Hi!

Glad to hear you've got it working.


Post Reply