angular-gantt

##The gantt chart directive for AngularJS

Demo
Features
Dependencies
Install
Usage
MomentJS
Run from sources
Build
Attributes
Objects
Events
Contribute
License

Demo

###Latest Release Stable Demo

###Master Branch Unstable demo

Features

Usable with or without Bootstrap 3
Every task has its own color, name, date (from, to)
Tasks can be moved and resized
Rows combine multiple tasks and can have independent names
Rows and tasks can be sorted and filtered
A user can drag&drop a row to sort it in custom mode
Events on scroll, click, add or update
Configurable (e.g. day or hour scale, weekend days, ..)

Dependencies

AngularJS
angular-moment (momentJS wrapper)

Install

Automatically (Using bower, grunt & grunt-wiredep)

Download and install angular-gantt.

Latest released version can be installed in your project using bower
```
 bower install angular-gantt --save
```
Master branch version contains bleeding edge features, but may be very unstable.
```
 bower install angular-gantt#master --save
```
Wiredep your dependencies to automatically add angular-gantt.js and gantt.css files to your HTML index, with all other dependencies declared in your project.
```
 grunt wiredep
```

#### Manually

Install all dependencies in your application (That's why you should use bower).
Download angular-gantt. Latest released version is available to download on Github.

Master branch version contains bleeding edge features, but may be very unstable.
Copy the files angular-gantt.js and gantt.css.

Add the angular-gantt.js and gantt.css files to your HTML code.

 <head>
     <link rel="stylesheet" href="assets/gantt.css"/>
 </head>
 <body>
     <script src="assets/angular-gantt.js"></script>
 </body>

For a sample app see the files demo/app/index.html and demo/app/scripts/controllers/main.js.

### Usage

Include the module gantt to your Angular app modules.

 var myApp = angular.module('myApp', ['gantt']);

Put directive gantt into your HTML code at the position you would like to show the Gantt chart.
```
 <gantt></gantt>
```
Any operation on the Gantt (like loading data) must be made after the chart has been initialized. The event 'event:gantt-ready' can be used to get notified as soon as it's ready.
```
 $scope.$on('event:gantt-ready', function() {
     // Start using the Gantt e.g. load data
 };
```

Run from sources

Bower can link your local sources in demo project.

bower link 
cd demo
bower link angular-gantt

This will create a symbolic link in demo/bower_components pointing to your local sources of angular-gantt.

Then, run grunt serve from demo directory to run the demo.

Build

Install grunt
Run npm install to install node dependencies 3 Run bower install to install bower dependencies
Run grunt to build angular-gantt.js and angular-gantt.min.js
Run grunt from demo directory to build demo distribution

MomentJS

angular-gantt use angular-moment, an angularJS wrapper for momentJS. For any features related to date, like date formats, week numbering, custom calendars and timezone support, please review those projects documentations.

Attributes

auto-expand (default none)

Define if the date range will be extended when the user scroll to the left or right edge.
- both
- left
- right
- none
allow-labels-resizing (default true)

Row label section can be resized.
allow-task-moving (default true)

Tasks can be moved inside a row.
allow-task-resizing (default true)

Tasks can be resized.
allow-task-row-switching (default: true)

Tasks can be moved to a different row.
allow-row-sorting (default true)

Rows can be manually sorted by drag and drop. This will set sort-mode to custom as soon as the user starts sorting.
center-date

Function (fn) called to center the specified date.

Usage: Specify the gantt property: center-date="scrollToDate = fn"

In your code call: $scope.scrollToDate(new Date());
current-date (default line)

How current date is displayed.
- none
- line
- column
current-date-value (default to system current date)

Current date in the chart.

Usage: Specify the gantt property: current-date="getToday"

In your code call: $scope.getToday = new Date();
clear-data

Function (fn) called to removes all rows and tasks at once. Take a look at demo files demo/app/index.html and demo/app/scripts/controllers/main.js to see how this callback is used.
column-width (default 2)

How wide are the columns in px. This allows you add logic like column-width="scale == 'day' ? 50 : 20" to have wider columns for days than for other column scales.
column-sub-scale (default: 4)

How precise tasks should be positioned. By default tasks are placed in quarter steps (every 8 hour or 15 minute). Some examples:
- 4 = in quarter steps
- 2 = in half steps
- 24 (if view-scale = day) to display them very accurate
filter-task, filter-task-comparator

Expression to filter on visible tasks using angularJS $filter('filter'). Value of filter-task is expression, and filter-task-comparator is comparator as defined in angularJS filter filter.
filter-row, filter-row-comparator

Expression to filter on visible rows using angularJS $filter('filter'). Value of filter-row is expression, and filter-row-comparator is comparator as defined in angularJS filter filter).
from-date

Ensures that the chart rendering starts at this date. This is useful for showing the chart even without any tasks, or empty time before the first task, or truncate previous tasks.
to-date

Ensures that the chart rendering goes at least to this date. This is useful for showing the chart even without any tasks, or empty time after the last task, or truncate next tasks.
data

Specify the data model for the gantt chart.

See [#objects] section.
header-show-month, header-show-week, header-show-day, header-show-hour

Display corresponding header row.
header-format-month, header-format-week, header-format-day, header-format-hour

Format of header row.

For header-format-month, header-format-day, header-format-hour

See momentJS#format()

header-format-week is not formatted with angularJS date filter, but with sprintf ('Week %s').
labels-width (default: 0 = Auto)

Width of label section on the left side of the Gantt. This property support two way binding. Therefore if the user resizes the label section any assigned scope variable will be updated too.
load-data

Function (fn) called to load more data to the Gantt. Take a look at demo files demo/app/index.html and demo/app/scripts/controllers/main.js to see how this callback is used.

An example of the data definition can be found in demo sample file.

As an alternative, you can use the data property to directly assign the data model.
load-timespans

Function (fn) called to load timespans into the Gantt. Take a look at demo files demo/app/index.html and demo/app/scripts/controllers/main.js to see how this callback is used.

An example of the data definition can be found in demo sample file.

As an alternative, you can use the timespans property to directly assign the data model.
max-height (default: 0 = Disabled)

Maximum height of the Gantt. It will show a vertical scroll bar if the content does not fit inside.
remove-data

Function (fn) called to remove more data from the Gantt. It is possible to remove complete rows or specific tasks. Take a look at demo files demo/app/index.html and demo/app/scripts/controllers/main.js to see how this callback is used.
show-tooltips (default: true)

Show tooltip when the user hovers over a task.
show-weekend (default: true)

Show weekend days. Weekend days are displayed different than non weekend days.
show-non-work-hours (default: true)

Show non work hours. Non work hours displayed different than work hours. Increase the view-scale-factor if you disable this parameter and use view-scale = day as there are less hours displayed per day.
sort-mode (default: name)

Sorts the rows by given expression.
- name: Sort by row name
- from: Sort by the earliest task from date of each row
- to: Sort by the latest task to date of each row
- custom: Sort by a property called order on each row
- <expression>: Sort using an angularJS expression (see angularJS orderBy filter).
Prepend a - in front to sort descending. E.g. -date
task-out-of-range (default: expand)

Behavior when tasks are defined out of the Gantt rendering range (see from-date and to-date).
- expand: rendering range will be expanded to display the tasks entirely.
- truncate: tasks will be truncated, or even totally hidden if they are not in rendering range at all.
template-url

URL of custom Gantt HTML template. If you want to customize the default Gantt HTML template, make a copy of default template file src/template/default.gantt.tmpl.html to your own project, and set the URL of copied file to this attribute.

If undefined or template/default.gantt.tmpl.html, default template will be used.

warning: template-url must be different than template/default.gantt.tmpl.html, or it will use default template included in angular-gantt.js.

To use default template, you don't have to copy default template file to your project, default template is loaded in $templateCache when initializing gantt module.
tooltip-date-format

Format of the dates displayed in tooltip.

See momentJS#format()
view-scale (default: day)

Gantt column scale.
- hour: Each column is one hour wide
- day: Each column is one day wide
- week: Each column is one week wide
- month: Each column is one month wide
width (default: 0 = Disabled)

Width of the gantt in px. If defined, columns-width will have no effect.
weekend-days (default: [0,6])

Array containing all weekend days. Assign an empty array [] if you don't want any weekend days at all.

Example:
- [0,6]: Sunday, Saturday
work-hours (default: [8,9,10,11,12,13,14,15,16])

Array containing all working hours. Non working hours are displayed differently than working hours.

Example:
- [8,9,10,11,12,13,14,15,16]: Working hours are from 8am to 5pm.

Objects

An example of the data definition can be found in demo sample file.

Row

{
    id: "...",  // Unique id of the row.
    name: "...", // Name shown on the left side of each row.
    order: <Number> // Row order for custom sort mode. Should be a unique number if defined (Optional). Tip: Property can be left away for default behaviour.
    tasks: [] // Array containing the row tasks to add.
}

Task

{
    id: "...",  // Unique id of the task.
    name: "...", // Name shown on top of each task.
    from: <Date>, // Date can be a String, Timestamp or Date object.
    to: <Date>, // Date can be a String, Timestamp or Date object.
    color: "..." , // Color of the task in HEX format (Optional).
    classes: <Array|String> // Array or String of class names which should be applied to the task. See ng-class documentation for details (Optional).
    priority: <Number> // Defines which of an overlapping task is on top (Optional). Tip: Leave property away for default behaviour.
    est: <Date> // When est and lct are defined a time window will be displayed around the task (Optional).
    lct: <Date> // See "est".
    data: <Any> // Custom object. Use this to attach your own data (Optional).
}

Timespan

{
    id: "...",  // Unique id of the timespan.
    name: "...", // Name shown on top of each timespan.
    from: <Date>, // Date can be a String, Timestamp or Date object.
    to: <Date>, // Date can be a String, Timestamp or Date object.
    color: "..." , // Color of the timespan in HEX format (Optional).
    classes: <Array|String> // Array or String of class names which should be applied to the task. See ng-class documentation for details (Optional).
}

Events

Angular-gantt emits many events using native AngularJS $scope.$on(name, listener).

$scope.$on('event:gantt-<event-name>', function(evt, data) {
    // Implement this callback to perform what you need
    // ...
})`;

All event names are prefixed with event:gantt-. You can also use constants by injecting GANTT_EVENTS from gantt module.

ready

Gantt is initialized and ready to load data.
scroll

The user scrolls to the left or right side of the chart. Use this event to load more data on the fly.
task-added, task-changed

A task has been added or changed
task-clicked, task-dblclicked, task-contextmenu

A task has been clicked, double clicked or right clicked.
task-move-begin, task-move, task-move-end

A task is starting to move, moving or has stopped moving.
task-resize-begin, on-task-resize, on-task-resize-end

A task is starting to resize, moving or has stopped moving.
timespan-added, timespan-changed

A timespan has been added or changed.
row-added and row-changed

A row has been added or changed. A row is changed if the custom sort order has been changed by the user.
row-clicked, row-dblclicked, row-contextmenu, row-mousedown, row-mouseup

A row has been clicked, double clicked, right clicked, mouse downed or mouse upped.
column-clicked, column-dblclicked, column-contextmenu

A column header has been clicked, double clicked or right clicked.
row-label-clicked, row-label-dblclicked, row-label-contextmenu, row-label-mousedown, row-label-mouseup

A row label has been clicked, double clicked, right clicked, mouse downed or mouse upped.
row-header-clicked, row-header-dblclicked, row-header-contextmenu, row-header-mousedown, row-header-mouseup

A row header has been clicked, double clicked, right clicked, mouse downed or mouse upped.
row-labels-resized

Row labels have been resized.

Contribute

See Contributing Guidelines

License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

andelo / angular-gantt