Frappe Gantt Custom Mod

This Gantt chart app is used as the backbone of the CCDH GitHub ticket visualization dashboard.

It is a customization of the original Frappe Gant project
with improvements from Alisher778, jaimeday, fredybawa, and Jen Martin.

Usage

Include the compiled JS and CSS files in the main HTML page:

<script src="frappe-gantt.min.js"></script>
<link rel="stylesheet" href="frappe-gantt.css">

The Gantt chart is a collection of tasks with the following format. To create a chart, get/create the tasks and then call the Gantt constructor:

var tasks = [
  {
    id: 'Task 1',
    group_id: 'design',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20,
    dependencies: 'Task 2, Task 3',
    custom_class: 'bar-milestone' // optional
  },
  ...
]
var gantt = new Gantt("#gantt", tasks);

You can also pass various options to the Gantt constructor:

var gantt = new Gantt("#gantt", tasks, {
    header_height: 50,
    column_width: 30,
    step: 24,
    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
    bar_height: 20,
    bar_corner_radius: 3,
    arrow_curve: 5,
    padding: 18,
    view_mode: 'Day',
    date_format: 'YYYY-MM-DD',
    custom_popup_html: null,
    draggable: true,
    hasArrows: true,
    groups: [ 
        {
            'id': 'design', 
            'name': 'Web Design',
            'bar_class': 'bar-design-group'
        }
    ]
});

To Continue Development

1. Clone this repo.
2. cd into project directory
3. yarn
4. yarn run dev

Install using the command:

npm install frappe-gantt

Original Frappe Gantt Project Information

License: MIT

Project maintained by frappe