@okmkey45/frappe-gantt NPM

A modern, configurable, Gantt library for the web.

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,
    task_group_id: 'task-group-1',
    annotations: {
      'red': [
        {
          date: '2016-12-30',
          name: 'Mom\'s birthday'
        },
      ]
    }
  },
  ...
];
const task_groups = [
  {
    id: 'task-group-1',
    name: 'Task Group 1',
  },
  ...
]
let gantt = new Gantt("#gantt", tasks, {}, task_groups);

Configuration

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

Option	Description	Possible Values	Default
`arrow_curve`	Curve radius of arrows connecting dependencies.	Any positive integer.	`5`
`auto_move_label`	Move task labels when user scrolls horizontally.	`true`, `false`	`false`
`bar_corner_radius`	Radius of the task bar corners (in pixels).	Any positive integer.	`3`
`bar_height`	Height of task bars (in pixels).	Any positive integer.	`30`
`container_height`	Height of the container.	`auto` - dynamic container height to fit all tasks - or any positive integer (for pixels).	`auto`
`column_width`	Width of each column in the timeline.	Any positive integer.	45
`date_format`	Format for displaying dates.	Any valid JS date format string.	`YYYY-MM-DD`
`enable_left_sidebar_list`	Enable clasical left sidebar with tasks.	`true`, `false`	`false`
`holidays`	Highlighted holidays on the timeline.	Object mapping CSS colors to holiday types. Types can either be a) 'weekend', or b) array of strings or date objects or objects in the format `{date: ..., label: ...}`	`{ 'var(--g-weekend-highlight-color)': 'weekend' }`
`ignore`	Ignored areas in the rendering	`weekend` or Array of strings or date objects (`weekend` can be present to the array also).	`[]`
`infinite_padding`	Whether to extend timeline infinitely when user scrolls.	`true`, `false`	`true`
`language`	Language for localization.	ISO 639-1 codes like `en`, `fr`, `es`.	`en`
`lines`	Determines which grid lines to display.	`none` for no lines, `vertical` for only vertical lines, `horizontal` for only horizontal lines, `both` for complete grid.	`both`
`lower_header_height`	Height of the lower header in the timeline (in pixels).	Any positive integer.	`30`
`move_dependencies`	Whether moving a task automatically moves its dependencies.	`true`, `false`	`true`
`padding`	Padding around task bars (in pixels).	Any positive integer.	`18`
`popup_on`	Event to trigger the popup display.	`click` or `hover`	`click`
`readonly`	Disables all editing features.	`true`, `false`	`false`
`readonly_dates`	Disables editing task dates.	`true`, `false`	`false`
`readonly_progress`	Disables editing task progress.	`true`, `false`	`false`
`scroll_to`	Determines the starting point when chart is rendered.	`today`, `start`, `end`, or a date string.	`today`
`show_expected_progress`	Shows expected progress for tasks.	`true`, `false`	`false`
`snap_at`	Snap tasks at particular intervel while resizing or dragging.	Any interval (see below)	`1d`
`today_button`	Adds a button to navigate to today’s date.	`true`, `false`	`true`
`upper_header_height`	Height of the upper header in the timeline (in pixels).	Any positive integer.	`45`
`view_mode`	The initial view mode of the Gantt chart.	`Day`, `Week`, `Month`, `Year`.	`Day`
`view_mode_select`	Allows selecting the view mode from a dropdown.	`true`, `false`	`false`

Apart from these ones, four options - bar_config, left_sidebar_list_config, 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:

type - a string defining the type of component related: annotation or task
task - the task as an object
task_group - the related task group as an object. NOTE: it is undefined if task groups feature is disabled
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.

Bar config

bar_config is an object to configure bars. Options from this object:

The returned object may contain:

get_label (function) - the label displayed inside the bar. If it's not defined, name of task will be used. This function receives an object as an argument containing task and task_group if defined.
on_click (function) - the function that will be triggered when a bar is clicked. This function receives an object as an argument containing task and task_group if defined.
show_label_on_offset (boolean) - When the bar label has more width that the bar, label is relocated with an offset to the right to improve UI. This boolean defines if the label should be displayed in that scenario.

Left Sidebar List Configuration

left_sidebar_list_config is an object.

on_click (function) - the function that will be triggered when an item from the list is clicked. This function receives an object as an argument containing task and task_group if defined.
width, the width of the sidebar (in pixels)

API

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

Name	Description	Parameters
`.update_options`	Re-renders the chart after updating specific options.	`new_options` - object containing new options.
`.change_view_mode`	Updates the view mode.	`view_mode` - Name of view mode or view mode object (see above) and `maintain_pos` - whether to go back to current scroll position after rerendering, defaults to `false`.
`.scroll_current`	Scrolls to the current date	No parameters.
`.update_task`	Re-renders a specific task bar alone	`task_id` - id of task and `new_details` - object containing the task properties to be updated.

Development Setup

If you want to contribute enhancements or fixes:

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