frappe/gantt

Open Source Javascript Gantt

Frappe Gantt

A simple, interactive, modern gantt chart library for the web

View the demo »

Install

npm install frappe-gantt

Usage

Include it in your HTML:

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

And start hacking:

var tasks = [
  {
    id: 'Task 1',
    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",
  language: "en", // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
  custom_popup_html: null,
});

You can add dark class to the container element to apply dark theme.

<div class="gantt-target dark"></div>

Contributing

If you want to contribute enhancements or fixes:

1. Clone this repo.
2. cd into project directory
3. yarn
4. yarn run dev
5. Open index.html in your browser, make your code changes and test them.

Publishing

If you have publishing rights (Frappe Team), follow these steps to publish a new version.

Assuming the last commit (or a couple of commits) were enhancements or fixes,

1. Run yarn build

   This will generate files in the dist/ folder. These files need to be committed.

2. Run yarn publish

3. Type the new version at the prompt

   Depending on the type of change, you can either bump the patch version or the minor version. For e.g.,

   0.5.0 -> 0.6.0 (minor version bump)
   0.5.0 -> 0.5.1 (patch version bump)
   

4. Now, there will be a commit named after the version you just entered. Include the generated files in dist/ folder as part of this commit by running the command:

   git add dist
   git commit --amend
   git push origin master
   

License: MIT

---

Project maintained by frappe

gantt's Issues

ReferenceError: moment is not defined

I have tried this component with react but getting this error:

ReferenceError: moment is not defined

What is wrong with this library? Did you update the source wrong?

The source is behaving COMPLETELY different from what you have in the demo at Demo

I cloned downloaded the repo and ran the index file and changed index.html ["Redesign website", [-63, 7]] so that December would show up on the chart. And this is what I get Link.

Next, I added gantt_chart.change_view_mode('Week') at the end of the script and this is what the result looked like this Link. Furthermore, once the view_mode is changed you can no longer drag the elements.

I don't understand how the demo works perfectly and what you have here is completely messed up.

Sorting and visibility options?

Sorting after priority and end date would be helpful and maybe there could be some way of color-coding tasks?

Expand the Tasks whenever it is hover over on the Holiday

Can we expand the Tasks whenever it is hover over on the Holiday Periods?

Hover instead of click for custom_html_popup?

Is it possible to set it so the popup shows up during a hover instead of a click event?

Is there somewhere in the code I can do this?

Black SVG

Hi, so yeah when I try to render a gantt with:

import Gantt from '../../../node_modules/frappe-gantt/src/Gantt.js';

let tasks = [{
      id: 'Task 1',
      name: 'IMMO',
      start: '2017-06-01',
      end: '2017-06-02',
      progress: 10
    }];
    let gantt = new Gantt(this.ganttContainer.nativeElement, tasks);

The svg is created and from what I saw in the DevTools filled correctly but it's rendered black on the page:

Using Chrome V60.0.3112.113 64bits

Any help appreciated, thanks.

Progress slider doesn't move with task

If you move a task the little triangle progress slider stay stationary and if you move the eask enough it this becomes unusable.

is it possible to ?

hi,

I'd like to use frappe/gantt as a graphical planning for rent items ,

is it possible to put several tasks on the same line ?
is it possible to have a day view ?

thanks for your support,
Jean-Louis

Adding tasks dynamically

Hi Is there any way we can add tasks, then call the render or refresh function.
Also, How do I change the duration in the bar and re-render them.

Thank

Change mode view ... always in days in popup ?

Hello,

First, I just begin to discover your effective and very user-friendly library 👍

Just a little feedback about the feature "change view mode" : the durations in the popup are always displayed in days regardless of the mode chosen...
This may sound a bit wrong for the user and it's really damaging for your great job...

Temporarily, I just changed that in the configuration file passing a variable for this action ...

• line 1364 var line_1 = 'Duration:' + self.duration + 'days';
• by var line_1 = 'Duration:' + Math.round(self.duration*100)/100 + ' ' + gt.config.view_mode;

I also rounded the duration to be there;)
Probably not ideal but it works well like that for now... what do you think about this?

Thanks very much again for your work often there are still small developments to fix

Baselines for planning audits?

In the long run (but I guess that would require significant code changes) it would be awesome if there was an option to generate "baselines" i.e. snapshots of earlier planning stages that can be compared to the current time plan to identify common bottlenecks or planning mistakes etc.

Move tasks between arrows

Sometimes we need that a task, pass to another arrow, so a task should be able move to another arrow

Blocking possibility to change progress / date

Is it possible to set some settings in this library? To be precise - I'm looking for option to block possibility to change progress / date for certain users.

The best case scenerio would be:
new Gantt(container, tasks, {
canChangeProgress: false,
canChangeDate: false
});

a React component.

gantt-for-react is Frappe Gantt components for React wrapper.

Now is v0.0.1, just can use it in react, but need to upgrade, supports are needed.

I need to update the gantt when tasks updated, so I need an api

gantt.update_tasks(tasks);

to change the gantt dynamically. The api is similar with

gantt.change_view_mode('Week')

Can you do this to help ?

Dynamic dependency

Hello there,
This is a really good looking and well designed gantt library.
Is it possible to create tasks dependencies visually ?
Thanks !

License is missing

Should there be any license in repo?

User has to click twice a task to trigger the onclick event

Right now, to trigger the onclick event, one needs to click a task twice.
The first time will trigger the detail popup (show_details)
The second time will trigger the onclick event.

Would it be possible to have the show_details event called when the mouse is hovering a task and the onclick event when the user clicks the task?

I'd be happy to contribute if you think this makes sense.

When I change "mode view"... loss all event listeners set up on gantt chart

It's a while I workaround that without finding a solution to solve the problem ?
As soon as I change the view mode (month, week, ...) It work fine but I lose all others event listeners set up in my main script and it's annoying...Like "dblclick" on a frappe-gantt chart element (e.g)
To change the view mode I basically use the sample with code below

$(".btn-group").on("click", "button", function() {
    $btn = $(this);
    var mode = $btn.text();
    gantt.change_view_mode(mode);
    $btn.parent().find('button').removeClass('active');
    $btn.addClass('active');
});
// for example
document.getElementById("bar").addEventListener("dblclick", function(e) {
    // it work fine before use mode view but not after view changed ?
    console.log("hop!");
});

In fact, it's quite mysterious for me and maybe I'm missing something obvious but ?
Any help would be greatly appreciated, thank you ...

[BUG] Task popup should be highest z-index

Whenever the popup is on the last task in the chart, the div is hidden by the scroll bar. The popup should be at the highest layer

Classic left side task list?

Doesn't fit so well to the layout of ERPnext, but a classic view with a list of tasks to the left instead of having the task names ion top of the schedule would be nice as an option.

Scroll update method does not work?

In my test, the scroll position of the svg parent element is always 0. Changing reference from $svg to $container fix the issue.

gantt/src/index.js

Line 545 in 5a03973

const parent_element = this.$svg.parentElement;

how to make id="date" as static while Y axis scroll

hi team,
i m finding a difficulty while doing Y-axis scroll. after some scroll, it becomes invisible. i want to make Date drig as static while Y axis scroll so that that will be always visible during scroll as well.
Pls suggest.
Thanks

Mocha Tests?

It looks like this package is setup to run some tests, but are there mocha tests missing from the repo?

why custom_popup_html is Not effective

why custom_popup_html is Not effective 。but zhe demo website is effective

The task detail popup gets hidden is the the task length is more than the view

If the task length is greater than the frame or view the task detail pop-up that we get on click, appears at the end of the task. Ideally it should be shown where the user clicked on the bar.

Support for day/hours view mode

Is possible to make chart show today's (from 0 to 24hs) tasks? I mean, your tasks sometimes just take few hours, no entire months or days

Is it possible to set chart colors?

Please, this is fundamental requirements

How can we make it static chart.

hi team,

Just wanted to understand, how i can make this chart static. Means no drag and no time change etc. except on hover

Day View

It would also be interesting to have a daily view
at intervals of 10/15min, for day planning

Add "Project" field for grouping tasks

Task groups could be implemented by adding a top level "Project" field to the gantt chart. The project would be the top level of a group of tasks, and tasks should be "dependent" on the project since tasks need to be within the project timeline. The gantt chart in ERPNext could populate this field from the projects module as an added bonus.

To make the chart visually easy to read:

• Slightly separate projects (a line in between) on the timeline
• ability to collapse a project to save space when viewing many projects simultaneously
• ability to collapse a task if it has dependents
• show the project name in the popover of each task
• show an error if you modify the project start or end date and it cuts off a task
• show an error if you add a task to a project that falls outside the project dates
• Moving the project on the timeline moves all the associated tasks

Icing on the cake would be unique Project and Task colours:

• Assign a project a colour and all associated tasks are assigned that colour
• Assign a task a colour and it overrides the project colour for itself only
• completed percentage should be grey
• Use the purple colour as a default project and task colour if nothing is selected

Now we have a wrapper for React :D

Hi, I've created a wrapper for this awesome library
You can check it here

🔢

use jalali date

hello thank you for amazing gantt chart, i need change date type to jalali with jalali-moment

how i can integrate it with this

https://github.com/jalaali/moment-jalaali

AngularJS Implementation w/ Data Binding

Is there any issue with using this cool Gantt chart component in an AngularJS (1.5+) project?

Any plan to implement frappe gantt chart as web components ?

Hi, I'm working on the project with polymer that builds using web components and I'm interested to implement this Gantt chart in my project. However, it's seem to get some issue that the '#gantt' query selector not able to query shadow-dom element which cause 'addClass' of null.

So I'd like to ask for more information about an idea to implement frappe Gantt chart as web components?

Thankyou

Is it possible to edit the Gantt chart from within the custom html popup?

Let's say I have just shifted one of the tasks or pressed a button within the custom_html_popup, and wanted to either change the view_mode (to Months) or log out the new dates that I can then change my data with.

Is there an example?

Internet explorer

Hi,

Thank you for coding such a great gantt charting tool!

Is there any way of / or a fix for it working on Internet explorer?

Nick

Suggestion & Bug

I use it in our two project, some suggestions below:

1. Custom configuration: such as: color of task title, color of progress bar.

The different color can help us to distinguish different status of task.

2. Popup blocked by scrollbar.

Thank for your reply and update.

Labels on first column

Hi, It would be good, have a labels row as option on first column, we really need this feature

https://imgur.com/a/CSw4c

I can to work around this, and send PR.

Dates aren't updating post move

Whenever I move the plan around I'm noticing the dates in the info box aren't changing. Browser change didn't seem to help.

Great looking tool though. Can't wait to test it more!

on click to grid hide popup didnt work

https://codepen.io/zodman1/pen/ZxMaGP

i dont know why happend!

Outdated dist folder

Hi, just wanted to ask you to update the dist to the latest version of your code so we can use an Element object in the constructor.

https://github.com/frappe/gantt/blob/master/dist/frappe-gantt.js#L402

As you can see, it's not updated

@netchampfaris I'm mentionning you since it's your commit that brings the new capability.

Thanks.

Progress can't be changed if it's 0 on initialization

The handle to change the progress doesn't appear if the progress is 0 when the task is created. As a workaround I'm currently setting it to 0.01 when it's 0.

New feature: MIlestones?

It would be nice if certain tasks (with multiple dependencies) could be marked as "milestones" with a special visibility. Related to this, it would be nice if there were task groups (or sub-tasks) that could be collapsed. Then the overall task should be shown with the earliest start date and the last end date of all included tasks.

Dependencies: moment

Now, the dependencies moment is not require in the source code, so we need to import moment.js by script tag in html.

issues here on my project gantt-for-react, see below.

Gantt Chart in Project

Option to export in different file format for Gantt Chart created in project module required to send it to customers or to modify it in MS Project / Libreproject / Excel required .

BUG: Lenght can't be set shorter than 1 unit set by change_view_mode()

Collapse bars and resize GANTT diagram

Hey there,

does someone know a possibility to collapse bars? I already used the custom-class but i don't know how to resize the diagram (hide the row of the bar) and hide the arrows.

CSS "hide"

.hide { display: none; }

JS

function hideTask(index){ tasks[index].custom_class = "hide"; gantt_chart.refresh(tasks); }

Is it possible to make a condensed year view?

I'd like to make it so I can view multiple years on one screen for showing things that mostly are on the scale a of a few months.

Basically I'd like to make something that could be condensed kinda like this:

非常好的gantt插件，希望加入分组样式

期待加入分组样式

dates a little off

Hey guys,

Great work.
Been running some tests and it seems the dates seem a little off when being displayed graphically.
See attach

ment