frappe/gantt

Frappe Gantt

Gantt charts are bar charts that visually illustrate a project's tasks, schedule, and dependencies. With Frappe Gantt, you can build beautiful, customizable, Gantt charts with ease.

You can use it anywhere from hobby projects to tracking the goals of your team at the worksplace.

ERPNext uses Frappe Gantt.

Motivation

We needed a Gantt View for ERPNext. Surprisingly, we couldn't find a visually appealing Gantt library that was open source - so we decided to build it. Initially, the design was heavily inspired by Google Gantt and DHTMLX.

Key Features

• Customizable Views: customize the timeline based on various time periods - day, hour, or year, you have it. You can also create your own views.
• Ignore Periods: exclude weekends and other holidays from your tasks' progress calculation.
• Configure Anything: spacing, edit access, labels, you can control it all. Change both the style and functionality to meet your needs.
• Multi-lingual Support: suitable for companies with an international base.

Usage

Install with:

npm install frappe-gantt

Include it in your HTML:

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

Or from the CDN:

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css"
/>

Start using Gantt:

let tasks = [
  {
    id: '1',
    name: 'Redesign website',
    start: '2016-12-28',
    end: '2016-12-31',
    progress: 20
  },
  ...
]
let gantt = new Gantt("#gantt", tasks);

// Use .refresh to update the chart
gantt.tasks.append(...)
gantt.tasks.refresh()

Configuration

Frappe Gantt offers a wide range of options to customize your chart.

Apart from these ones, two options - popup and view_modes (plural, not singular) - are available. They have "sub"-APIs, and thus are listed separately.

View Mode Configuration

The view_modes option determines all the available view modes for the chart. It should be an array of objects.

Each object can have the following properties:

• name (string) - the name of view mode.
• padding (interval) - the time above.
• step - the interval of each column
• lower_text (date format string or function) - the format for text in lower header. Blank string for none. The function takes in currentDate, previousDate, and lang, and should return a string.
• upper_text (date format string or function) - the format for text in upper header. Blank string for none. The function takes in currentDate, previousDate, and lang, and should return a string.
• upper_text_frequency (number) - how often the upper text has a value. Utilized in internal calculation to improve performance.
• thick_line (function) - takes in currentDate, returns Boolean determining whether the line for that date should be thicker than the others.

Three other options allow you to override general configuration for this view mode alone:

• date_format
• column_width
• snap_at For details, see the above table.

Popup Configuration

popup is a function. If it returns

• false, there will be no popup.
• undefined, the popup will be rendered based on manipulation within the function
• a HTML string, the popup will be that string.

The function receives one object as an argument, containing:

• task - the task as an object
• chart - the entire Gantt chart
• get_title, get_subtitle, get_details (functions) - get the relevant section as a HTML node.
• set_title, set_subtitle, set_details (functions) - take in the HTML of the relevant section
• add_action (function) - accepts two parameters, html and func - respectively determining the HTML of the action and the callback when the action is pressed.

API

Frappe Gantt exposes a few helpful methods for you to interact with the chart:

Development Setup

If you want to contribute enhancements or fixes:

1. Clone this repo.
2. cd into project directory.
3. Run pnpm i to install dependencies.
4. pnpm run build to build files - or pnpm run build-dev to build and watch for changes.
5. Open index.html in your browser.
6. Make your code changes and test them.