# What's new in Gantt v5.4.0

## Scheduling direction

Gantt now supports setting scheduling direction on a per task basis. This is controlled by either using the `direction`
field, or in a MS Project compatible way, by setting corresponding `AsSoonAsPossible` or `AsLateAsPossible` constraints.

<div class="external-example" data-file="Gantt/guides/whats-new/5.4.0/direction.js"></div>

For more details, see docs for the [direction](#Gantt/model/TaskModel#field-direction) field on `TaskModel`, and the
[includeAsapAlapAsConstraints](#Gantt/model/ProjectModel#config-includeAsapAlapAsConstraints) config on `ProjectModel`.

## Task coloring

Gantt now supports setting the `eventColor` field on a Task to a pre-defined named color (`red`, `green`, `blue` etc.)
or a CSS color value. This changes the background color of the rendered task bar. It is also possible to configure the
Gantt with a default `eventColor` that applies to all tasks, overriding the default coloring.

<div class="external-example" data-file="Gantt/guides/whats-new/5.4.0/color.js"></div>

For more details, check out the [TaskModel docs](#Gantt/model/TaskModel#field-eventColor).

```javascript
new Gantt({
    taskColor : 'cyan', // Sets a default background color for all tasks
    project : {
        tasksData : [
            {
                id : 1,
                name : 'Task1',
                // This sets a different background color on the task
                taskColor : 'purple',
                ...
            },
            {
                id : 2,
                name : 'Task2',
                taskColor : 'yellow'
            }
        ]
    }
});
```
## Task color editing

We have added default editors for the `eventColor` field mentioned above. There is one in the `TaskMenu` feature's
context menu and one in the `TaskEdit` feature's event editing panel. Just set `showTaskColorPickers` to true and the
editors will appear. There is also a new `EventColorColumn` which can be added to any Gantt. It renders a colored
element which the user can click and select a new color for each task.

```javascript
new Gantt({
    showTaskColorPickers : true,
    columns : [
        // Adds a column in which the user can see and edit the task color
        { type : 'eventcolor', text : 'Color', size : 80 }
    ]
})
```
See all editors in action in the updated
[Task editor customization demo](https://bryntum.com/examples/gantt/taskeditor/).

## Native clipboard support for TaskCopyPaste

The `TaskCopyPaste` feature has been enhanced to usa a page-global internal clipboard and also supports the browser's
native Clipboard API if accessible. This means that it is possible to copy and paste tasks between multiple instances of
Gantt or other Grid-based components. It is also possible to copy a task and paste it inside a Spreadsheet app like
Excel.

Another improvement is that both the `beforeCopy` and `beforePaste` events are now asynchronously preventable.

If your browser supports it, you can try the native clipboard functionality out in the
[Aggregation column demo](https://bryntum.com/products/gantt/examples/aggregation-column/). And in this live demo:

<div class="external-example" data-file="Gantt/guides/whats-new/5.4.0/copy.js"></div>

Please note that this enhancement has required API changes:
* The `copyRows` and `pasteRows` functions are now asynchronous.

## New TimelineHistogram view

This release introduces a new [TimelineHistogram](#Scheduler/view/TimelineHistogram) class which implements a grid with
histogram charts displayed for rows in the timeaxis section.

<div class="external-example" data-file="Scheduler/view/TimelineHistogram.js"></div>

Please check the new [Timeline histogram demo](https://bryntum.com/products/scheduler/examples/timelinehistogram/)
and the ["Timeline histogram" guide](#Scheduler/guides/timelinehistogram.md) for more details.

## Grouping support for ResourceHistogram and ResourceUtilization views

This release adds better grouping support to the `ResourceHistogram` and `ResourceUtilization` views.
The classes now automatically aggregate data on parent node levels based on corresponding child nodes.

For more details on the views please see new ["Resource histogram"](#SchedulerPro/guides/resourceviews/resourcehistogram.md)
and ["Resource utilization"](#SchedulerPro/guides/resourceviews/resourceutilization.md) guides

## New Baseline columns

We have added a set of baseline columns: "Baseline start" (`BaselineStartDateColumn`), "Baseline finish"
(`BaselineEndDateColumn`), "Baseline duration" (`BaselineDurationColumn`), "Baseline start variance"
(`BaselineStartVarianceColumn`), "Baseline end variance" (`BaselineEndVarianceColumn`) & "Baseline duration variance"
(`BaselineDurationVarianceColumn`). 

By default, they show values for the first baseline, but can be configured to show values for any baseline using the
`field` config. For example to show the duration of the second baseline:

```javascript
const gantt = new Gantt({
    columns : [
        { type : 'baselineduration', field : 'baselines[1].duration' }
    ]
});
```

Used in the updated `baselines` demo.


<p class="last-modified">Last modified on 2023-10-26 8:19:02</p>