# Upgrade guide for Gantt v2.0 ## "Core" package All our basic classes have been moved from `lib/Common/` to `lib/Core/`. Please update corresponding paths in your application in case you import classes from sources. ## Zooming and ViewPresets The system-supplied set of ViewPresets, and the way these can be customized has changed slightly. A `ViewPreset` describes the time units into which a timeline is split, and the on-screen size of the lowest level unit. It also contains a definition of the layout of a set of headers to display above the timeline. The header definitions are now an array, `headers` instead of `headerConfig`. These are processed in top to bottom order. This is a change from before, when they were named properties in an object with the name "middle", wherever it was in the list, at the top or the bottom being the one which attracted the "main header" status. Now `mainHeaderLevel` and `columnLinesFor` are numeric configs which reference which header level is the main one, and which defines the column lines. The system-supplied set of ViewPresets is still the same. There is a set of predefined `ViewPreset`s stored in the `PresetManager`, which is now a `Store`. ### System-supplied ViewPresets - `secondAndMinute` - creates 2 level header - minute and seconds within it. - `minuteAndHour` - creates 2 level header - hour and minutes within it. - `hourAndDay` - creates 2 level header - day and hours within it. - `dayAndWeek` - creates 2 level header - week and days within it. - `weekAndDay` - just like `dayAndWeek` but with different formatting. - `weekAndDayLetter` - creates 2 level header - with weeks and day letters within it. - `weekAndMonth` - creates 2 level header - month and weeks within it. - `weekDateAndMonth` - creates 2 level header - month and weeks within it (weeks shown by first day only). - `monthAndYear` - creates 2 level header - year and months within it. - `year` - creates 2 level header - year and quarters within it. - `manyYears` - creates 2 level header - 5-years and year within it. ### Presets automatically copied into each Gantt Gantt now import an expanded, preconfigured set of these standard `ViewPreset`s into their own `PresetStore` which is accessed using `myGantt.presets`. A `PresetStore` is automatically sorted into zoom order. That is, it is sorted according to the widths of events rendered to the screen as a result of their configurations. These encapsulate the zoom levels which are available. A zoom level now *is* a `ViewPreset`. There is a direct mapping between a numeric zoom level and a `ViewPreset` in the Gantt's `presets` - it is simply the index of the `ViewPreset` in the `Gantt`'s `presets` `Store`. A new `ViewPreset` may be added to a preset store which is either fully configured, or which is based upon one of the predefined presets mentioned in the `PresetManager`'s API docs. so you may do ```javascript myGantt.viewPreset = { base : 'hourAndDay', // Based existing preset id. See above or PresetManager docs tickWidth : 25, columnLinesFor : 0, mainHeaderLevel : 1, headers : [ { unit : 'd', align : 'center', dateFormat : 'ddd DD MMM' }, { unit : 'h', align : 'center', dateFormat : 'HH' } ] }; ``` This adds a new `ViewPreset` to the `Gantt` which is a slightly reconfigured version of the system-supplied `hourAndDay` preset. It will be inserted into the store in zoom-level order, and will become another zoom level. Notice that the headers are now configured as an array, and are displayed in the order specified. The attachment of column lines to a specific header level is now explicit rather than relying on which header was configured under the property name "middle". ### Making application-wide changes For an application-wide addition of a new preset, use ```javascript PresetManager.add({ id : 'myNewPreset', base : 'hourAndDay', // Based on an existing preset tickWidth : 25, columnLinesFor : 0, mainHeaderLevel : 1, headers : [ { unit : 'd', align : 'center', dateFormat : 'ddd DD MMM' }, { unit : 'h', align : 'center', dateFormat : 'HH' } ] }); ``` After that, Gantt will contain that preset in their `presets` Store, and it will be part of the available zoom levels. Not forgetting, above: _"A `PresetStore` is automatically sorted into zoom order"_. You could then either add that new preset directly to a Gantt, or, as in the first example given above, add a preset to a Gantt using `base : 'myNewPreset'` to create a slightly modified version of that preset. ### Examples **Old code:** ```javascript PresetManager.registerPreset('dayNightShift', { tickWidth : 35, rowHeight : 32, displayDateFormat : 'HH:mm', shiftIncrement : 1, shiftUnit : 'day', timeResolution : { unit : 'minute', increment : 15 }, defaultSpan : 24, headerConfig : { bottom : { unit : 'hour', increment : 1, dateFormat : 'H' }, middle : { unit : 'hour', increment : 12, renderer(startDate, endDate, headerConfig, cellIdx) { if (startDate.getHours() === 0) { // Setting a custom CSS on the header cell element headerConfig.headerCellCls = 'b-fa b-fa-moon'; return DateHelper.format(startDate, 'MMM DD') + ' Night Shift'; } else { // Setting a custom CSS on the header cell element headerConfig.headerCellCls = 'b-fa b-fa-sun'; return DateHelper.format(startDate, 'MMM DD') + ' Day Shift'; } } }, top : { unit : 'day', increment : 1, dateFormat : 'MMMM Do YYYY' } } }); ``` **New code:** ```javascript PresetManager.registerPreset('dayNightShift', { name : 'Day/night shift (custom)', tickWidth : 35, rowHeight : 32, displayDateFormat : 'HH:mm', shiftIncrement : 1, shiftUnit : 'day', timeResolution : { unit : 'minute', increment : 15 }, defaultSpan : 24, mainHeaderLevel : 1, headers : [ { unit : 'day', increment : 1, dateFormat : 'MMMM Do YYYY' }, { unit : 'hour', increment : 12, renderer(startDate, endDate, headerConfig, cellIdx) { if (startDate.getHours() === 0) { // Setting a custom CSS on the header cell element headerConfig.headerCellCls = 'b-fa b-fa-moon'; return DateHelper.format(startDate, 'MMM DD') + ' Night Shift'; } else { // Setting a custom CSS on the header cell element headerConfig.headerCellCls = 'b-fa b-fa-sun'; return DateHelper.format(startDate, 'MMM DD') + ' Day Shift'; } } }, { unit : 'hour', increment : 1, dateFormat : 'H' } ] }); ``` Notice that the headers are configured as an array, and instead of the property name `middle` attracting "main header" status, and therefore dictating the tick size, the `mainHeaderLevel` is explicitly defined as an index. ## Export to PDF/PNG Added a new feature which allows to export Gantt content into a PDF/PNG file. Several new demos are added: a generic JS example and demos for Angular, React and Vue frameworks. The feature uses a special export server, that can be found in `examples/_shared/server` folder. For more instruction please see `README.md` file in the demos folders.

Last modified on 2023-10-26 8:19:02