worktile/ngx-gantt

A modern and powerful gantt chart component for Angular

ngx-gantt

A modern and powerful gantt component for Angular

Installation

$ npm i @worktile/gantt html2canvas --save
# or
$ yarn add @worktile/gantt html2canvas

Demo

Try out our live demo

Usage

1. Import the NgxGanttModule to use into your app.module.ts

import { NgModule } from '@angular/core';
import { NgxGanttModule } from '@worktile/gantt';

@NgModule({
  ...
  imports: [ NgxGanttModule, ... ]
  ...
})
export class AppModule {

}

2. Import style file in angular.json or import style in your style.scss

{
  "styles": ["node_modules/@worktile/gantt/styles/index.scss"]
}

@use '@worktile/gantt/styles/index.scss';

3. Using component

component.html

<ngx-gantt #gantt [items]="items">
  <ngx-gantt-table>
    <ngx-gantt-column name="Title" width="300px">
      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
    </ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt>

component.ts

@Component({
  selector: 'app-gantt-example',
  templateUrl: './gantt.component.html'
})
export class AppGanttExampleComponent {
  items: GanttItem[] = [
    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197 },
    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597 }
  ];

  constructor() {}
}

See Getting Started for more details.

Development

$ git clone [email protected]:worktile/ngx-gantt.git
$ cd ngx-gantt
$ npm ci
$ npm run start

Roadmap

• virtual scrolling

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Walker 💬 💻 🎨 📖 🚇 🚧 📆 👀

zhangwen 💻

cmq 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT License

ngx-gantt's Issues

How to show top bar in hours format ?

Angular 8 Support

如果项目Angular用的 是8.3，想使用这个库，做那些处理，才能使用？

Error in nested children

When we create a Gantt Item with more than 2 levels, the component didnt work as expected, the children of the children cant load correctly, here is an example to replicate this issue :

TS Component

items: GanttItem[] = [
{
id: '000000',
title: 'Task 0',
start: 1627729997,
end: 1628421197,
expandable: true,
children: [
{
id: '000002',
title: 'Task 2',
start: 1627729997,
end: 1628421197,
expandable: true,
expanded: true,
children: [
{
id: '000003',
title: 'Task 3',
start: 1627729997,
end: 1628421197,
},
{
id: '000004',
title: 'Task 4',
start: 1627729997,
end: 1628421197,
},
],
},
{ id: '000005', title: 'Task 5', start: 1627729997, end: 1628421197 },
],
},
{ id: '000006', title: 'Task 6', start: 1627729997, end: 1628421197 },
];

HTML Component

<ngx-gantt #gantt [items]="items" [maxLevel]="10">
<ngx-gantt-table>
<ngx-gantt-column name="Title" width="300px">
<ng-template #cell let-item="item"> {{ item.title }} </ng-template>
</ngx-gantt-column>
</ngx-gantt-table>
</ngx-gantt>

Result

As you can see in the image all the items have the same dates but for the items 3 and 4 we can see the timeline just for this items even when the max-level attribute has a value of 10

if it's something that im not doing correctly please let me know, it's kinda hard read the documentation since im not Chinese speaker

Bar tooltip

Is it possible to create a bar tooltip that will show selected parts from the left pane - like start date, end date, title etc?

Thank you!

显示问题

在平铺模式中，两个item之间必须要间隔3天，小于3天就会换行显示，在实际使用过程中会有问题，这个问题是由于默认设置吗？在哪里可以调整？


@HandsomeButterball

如果进度组件延迟展示，则初始化的时间轴位置不正确

如果进度组件在TabView里面，但是并不在第一个Tab里面，则时间轴初始化表示的位置在最前面

如果是在Tab的默认第一个位置，中心位置是今天

另外更特图的时间范围能不能自己定义一下，现在默认好像是前后总共一年时间，有的小项目来说，太长了。还有就是中心位置是否也能配置呢？

Sorting left pane with header

Is it possible to use sorting (like in a standard table) to sort / filter rows in the left pane of gantt?

动态加载问题

这个甘特图是在某一个Tab中的，如果该Tab是一开始就显示的，则没有问题。
但是这个Tab在页面开始的时候是不显示，所以刚开始渲染的时候，可能ngfor什么都没有做。
等到这个Tab被现实的时候，则任务名称都无法显示了。
而且，这个高度我也是手工设置的，因为数据是动态加载的，所以他高度计算会有问题。

能不能增加一个 Refresh方法，强制刷新甘特图呢？
希望能告诉我一个解决方案。

Children from API call

I'm trying to pass items from api call to the children and the only result I get is a single item (and there are many)

  ngOnInit(): void {
    this.service.getDashboardGant().subscribe((res) => {
      for (let gnt of res) {
        let clr;
        let bdate = new Date();
        if (gnt.Status == 'Assigned') {
          clr = 'var(--green-400)';
        } else if (gnt.Status == 'Bench') {
          clr = 'var(--red-400)';
          gnt.oEndDate = bdate.toLocaleDateString();
        } else if (gnt.Status == 'Terminated') {
          clr = 'var(--grey-400)';
        } else if (gnt.Status == 'Long Leave') {
          clr = 'var(--orange-400)';
        } else if (gnt.Status == 'Partially-Assigned') {
          clr = 'var(--teal-400)';
        }


        this.paren.push({
          id: gnt.ID,
          title: gnt.Employee,
          origin: {
            project: gnt.Employee,
            status: gnt.Status,
            duration: gnt.oDuration,
            ends: gnt.oEnds,
            FTE: gnt.FTE,
            gpn: gnt.GPN,
            level: gnt.Level,
            rank: gnt.Grade,
          },
          start: parseInt(
            (
              new Date(
                gnt.oStartDate.split('/').reverse().join('.')
              ).getTime() / 1000
            ).toFixed(0)
          ),
          end: parseInt(
            (
              new Date(gnt.oEndDate.split('/').reverse().join('.')).getTime() /
              1000
            ).toFixed(0)
          ),
          group_id: gnt.RID,
          expandable: true,
          draggable: false,
          linkable: false,
          color: clr,
          children: [{
            id: gnt.RID,
            title: gnt.pOpportunity,
            draggable: false,
            linkable: false,
            origin: {
              project: gnt.pOpportunity,
              status: '',
              duration: 0,
              ends: 0,
            },
            start: gnt.oStartDate,
            end: gnt.oEndDate,
            group_id: '',
            color: 'var(--red-500)',
          },]
        });
      }

      console.log(this.paren);
      console.log(this.chil);
      this.items = this.paren;
    });
  }

was trying to do this via childrenResolve, but what I get is:

declare (property) NgxGanttComponent.childrenResolve: (GanttItem: any) => Observable<GanttItem<unknown>[]>
Type '(item: GanttItem<unknown>) => Observable<{ id: number; title: number; start: number; draggable: boolean; linkable: boolean; }[]>' is not assignable to type '(GanttItem: any) => Observable<GanttItem<unknown>[]>'.
  Type 'Observable<{ id: number; title: number; start: number; draggable: boolean; linkable: boolean; }[]>' is not assignable to type 'Observable<GanttItem<unknown>[]>'.
    Type '{ id: number; title: number; start: number; draggable: boolean; linkable: boolean; }[]' is not assignable to type 'GanttItem<unknown>[]'.
      Type '{ id: number; title: number; start: number; draggable: boolean; linkable: boolean; }' is not assignable to type 'GanttItem<unknown>'.
        Types of property 'id' are incompatible.
          Type 'number' is not assignable to type 'string'.ngtsc(2322)

Any possible way of populating the children?
Example response from API (Items are multiplied as the Employees got multiple projects - and those projects I would like to show as a Children)

 {
    "ID": 54,
    "GPN": "XE050990262",
    "Employee": "Leszczynski Filip",
    "Level": "SENIOR",
    "Region": "Europe West",
    "Status": "Assigned",
    "Grade": "42(1)",
    "Description": "GSA projects",
    "FTE": 1,
    "Portfolio": "CPM",
    "pOpportunity": "DRV",
    "pEnggCode": "66205654",
    "pEnggName": "0011228927-rvEvolution",
    "oStartDate": "03/08/2021",
    "oEndDate": "",
    "oDuration": null,
    "oEnds": null,
    "lStartDate": null,
    "lEndDate": null,
    "lStatus": null
  },
  {
    "ID": 54,
    "GPN": "XE050990262",
    "Employee": "Leszczynski Filip",
    "Level": "SENIOR",
    "Region": "Europe West",
    "Status": "Assigned",
    "Grade": "42(1)",
    "Description": "GSA projects",
    "FTE": 1,
    "Portfolio": "CPM",
    "pOpportunity": "Pipeline Management",
    "pEnggCode": "66443494",
    "pEnggName": "0011250323-Pipeline- und Resso",
    "oStartDate": "21/01/2022",
    "oEndDate": "",
    "oDuration": null,
    "oEnds": null,
    "lStartDate": null,
    "lEndDate": null,
    "lStatus": null
  },
  {
    "ID": 55,
    "GPN": "XE050991723",
    "Employee": "Blania Nikola",
    "Level": "SENIOR",
    "Region": "Europe West",
    "Status": "Assigned",
    "Grade": "42(3)",
    "Description": "REWE",
    "FTE": 1,
    "Portfolio": "CPM",
    "pOpportunity": "Rewe",
    "pEnggCode": "66795877",
    "pEnggName": "0011229193-PM-Unterstützung Eu ",
    "oStartDate": "12/07/2022",
    "oEndDate": "31/01/2023",
    "oDuration": 203,
    "oEnds": 99,
    "lStartDate": null,
    "lEndDate": null,
    "lStatus": null
  },
  {
    "ID": 56,
    "GPN": "XE050994396",
    "Employee": "Gorniak Ewelina",
    "Level": "SENIOR",
    "Region": "EYG",
    "Status": "Assigned",
    "Grade": "42(3)",
    "Description": "Mercury",
    "FTE": 1,
    "Portfolio": "CPM/TM",
    "pOpportunity": null,
    "pEnggCode": null,
    "pEnggName": null,
    "oStartDate": "",
    "oEndDate": "",
    "oDuration": null,
    "oEnds": null,
    "lStartDate": null,
    "lEndDate": null,
    "lStatus": null
  },

Thank you!

How to change language

Angular 13 support?

Very cool library. Any plans to update to Angular 13?

Translation Engish

Hello guys,
Sorry to bother you here, is there a translation in english of your website demo with the gantt planning that i see here ?
http://gantt.ngnice.com/components/basic

Thanks in advance,
And congrats for your work

Angular 15 Support

Much appreciated if you could update to support NG 15! Cheers!

English documentation

It would be great that the doc could has English version: http://gantt.ngnice.com/guides/intro

Re-rendering chart options

Hi, I'm facing the issue when I need to change the end date of the chart in the viewOptions, but the chart options config is not applied.
Is there any way to re-render the chart on a fly with a new endDate in the viewOptions?

什么时候可以支持Vue

Feature: support i18n

样式问题

横向滚动条在最底部，需要把页面滚动到最底部才显示横向滚动条，



此处的样式是否可以自定义设置？
是否可以做成下图所示


贯穿真个页面的横向滚动条，当然左侧的表格是不跟随滚动条移动的

Drag between rows

Good morning, nice library!! I checked the demos and I saw that I can drag in the same row, but It is possible to drag between rows?

'ngx-gantt' is not a known element:

Hi, I'd love to use ngx-gantt!
I tried to implement it like in the docs, but unfortunately there is this error coming:

'ngx-gantt' is not a known element:
1. If 'ngx-gantt' is an Angular component, then verify that it is part of this module.
2. If 'ngx-gantt' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 

特定数据渲染后，x滚动条使用键盘向左键可以一直滚动

//这是我的数据
items: GanttItem[] = [
{
"id": "v9",
"title": "版本注册",
"start": 1650601094000,
"end": 1650604333000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0,
}, {
"id": "mergeStep9",
"title": "MR合入阶段",
"start": 1650601094000,
"end": 1651160076000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": true,
"children": [{
"id": "8479356",
"title": "41070057",
"start": 1650601094000,
"end": 1650630051000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0,
}, {
"id": "8356283",
"title": "39220666",
"start": 1650619929000,
"end": 1650883077000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0
}, {
"id": "8428575",
"title": "40687355",
"start": 1650620349000,
"end": 1650781512000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0
}, {
"id": "8263517",
"title": "40477607",
"start": 1650781593000,
"end": 1650800577000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0,
}, {
"id": "8562329",
"title": "41225491",
"start": 1651144627000,
"end": 1651160076000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0,
}, {
"id": "8499547",
"title": "40687355",
"start": 1650781631000,
"end": 1650795015000,
"group_id": null,
"links": null,
"draggable": null,
"linkable": null,
"expandable": null,
"expanded": null,
"children": null,
"color": null,
"progress": 1.0,

        }, {
            "id": "8506846",
            "title": "40477607",
            "start": 1650800722000,
            "end": 1650866516000,
            "group_id": null,
            "links": null,
            "draggable": null,
            "linkable": null,
            "expandable": null,
            "expanded": null,
            "children": null,
            "color": null,
            "progress": 1.0
        }],
        "color": null,
        "progress": 1.0
    }, {
        "id": "v3.1.5.2testStep",
        "title": "测试阶段",
        "start": 1650884416000,
        "end": 1652112861000,
        "group_id": null,
        "links": null,
        "draggable": null,
        "linkable": null,
        "expandable": null,
        "expanded": true,
        "children": [{
            "id": "20220425184935",
            "title": "20220425184935",
            "start": 1650884416000,
            "end": 1651130303000,
            "group_id": null,
            "links": null,
            "draggable": null,
            "linkable": null,
            "expandable": null,
            "expanded": null,
            "children": null,
            "color": null,
            "progress": 1.0
        }, {
            "id": "20220428234532",
            "title": "20220428234532",
            "start": 1651202216000,
            "end": 1652112861000,
            "group_id": null,
            "links": null,
            "draggable": null,
            "linkable": null,
            "expandable": null,
            "expanded": null,
            "children": null,
            "color": null,
            "progress": 1.0
        }],
        "color": null,
        "progress": 1.0,
    }
];

private scrollToToday; 能否把旧版本的"@worktile/gantt": "^11.0.3", ngx-root-> scrollToToday() 方法改为public

尊敬的博主, 您好, 我们在客制化gantt 图的时候, 想要调用ngx-root的方法, 快速定位回当前日期, 但是发现我们angular版本对应的package该方法(scrollToToday())类型为private, 没办法使用, 不知道您这边能否将旧版本的方法类型改为public, 十分感谢您百忙之中查看此请求, 期待您的回复~

按照小时来设计甘特图

GanttViewType 会考虑增加小时么？
export declare enum GanttViewType { day = "day", quarter = "quarter", month = "month", year = "year", week = "week" }

Error returned - Page is in a non-English language

Hi,

I'm getting this error message:

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@worktile%2fngx-gantt - Not found
npm ERR! 404
npm ERR! 404 '@worktile/ngx-gantt@*' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Error trying to print

I get this error, apparently the clonedDom is undefined:

Am I missing something? The Gantt is properly displayed on an angular dialog...

Thanks

add scroll event when scroll down the gantt project

I want to add event to scroll down when going down a list of groups or items

是否可以增加时间线数据类型，或者说有什么方法可以让我多加几根时间线？

如果不设置[disabledLoadOnScroll]="ture"，左右拖动滚动条后，出现很多空白，bar也会消失一段时间，过一会可能会出现

如果不设置[disabledLoadOnScroll]="ture"，左右拖动滚动条后，出现很多空白，bar也会消失一段时间，过一会可能会出现

Can add xx% to the progress bar?

能否在进度条上，反色显示一下 xx% 完成的字样呢？
谢谢。

Improve view granularity

Good evening,
I added this component to my in-development website, for cooking purposes. While the component works well, its view options are far too broad to work. Even at GanttViewType.day my recipe just shows everything together.

Adding additional types like GanttViewType.minute would be beneficial for these niche use-cases.

Dynamically change View Options

I'm not sure if this is relevant to #237 but I am looking to add the ability to dynamically change the date range that the gantt chart displays. I'd like it so that the user can select a start and end date. Is this possible? I've tried refreshing the gantt items after changing the viewOptions start and end but that does not seem to do the trick. Any ideas?

安装后出现问题

使用npm i @worktile/gantt html2canvas --save安装后，启动出现错误。这是什么原因导致的
./node_modules/@worktile/gantt/fesm2020/worktile-gantt.mjs:5163:33-44 - Error: export 'takeUntil' (imported as 'takeUntil$1') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

how to show top bar in hours format in Gantt chart

Cant change date format to international english

In the methods getPrimaryDatePoints() and getSecondaryDatePoints() date formats are hardcoded. Can you make that date formats will be configurable ?

const point = new GanttDatePoint(
                start,
                `第${start.format('w')}周`,  // <- This part
                i * this.getCellWidth() + this.getCellWidth() / 2,
                secondaryDatePointTop
            );

How to update gantt with new data?

I want to update the data in the gantt based on an API call to fetch the data.
The documentation is only covering static data.
How can I rerender the gantt with the new items after the data is fetched?
By changing the 'items' array, nothing happens.

Expand & collapse arrows are not visible for childrens

Is it possible to show Expand & collapse arrows for children as well?
I have data with nested children structure. The expand and collapse arrow showing only for parent element.

Can you please help here?

是否有支持React的计划？

可以肯定这是个很优秀的甘特图组件，但目前仅支持Angular，不知是否有计划支持React和Vue？

组件的height，top，left等样式，是否可以放入class中便于扩展？

如图，除了width之外的样式，是否可以放入class中便于扩展？

Feature: gantt bar custom color support browser built-in 140 colors

ngx-gantt support setting the color of bar, but only support the color of RGB, we hope support browser built-in 140 colors.

Change GanttItem structure

Is it possible to change / additional items to GanttItem? I used origin as a raw data, but I would like to add more items (basically to the table, like status, duration, expires). Thank you!

items: GanttItem[] = [
    {
      id: '000001',
      title: 'User 1',
      origin: 'Assigned',
      start: 1617361997,
      end: 1625483597,
      group_id: '000000',
      expandable: true,
      draggable: false,
      linkable:false,
      color: 'var(--teal-400)',
      children: [{
          id: "20220425184935",
          title: "Vacation",
          start: 1617361997,
          end: 1625483597,
          group_id: '',
          color: '',
      }, {
          id: "20220428234532",
          title: "Bench",
          start: 1617361997,
          end: 1625483597,
          group_id: '',
          color: '',
      }],

Left Table expend/collapse Control

Hi @HandsomeButterball,

Is there any way to control the width or columns while dragging the grant-table. I want to control on column shown while dragging the left table.
In other word is there any way to control column show/hide.

For example.
If width = 300px then show only 2 columns
If width = 400px then show only 4 columns

Thanks in advance..

Using time resolution along with day, month, year

How can we change the view format to time showing 24 hours, looks like that view is not supported, can you give some hint on changing the core?

Chrome page zoom bugs the connection between dates

Steps to reproduce:

Chrome Version 104.0.5112.101 (Official Build) (x86_64) / MacOS

Access the live demo: http://gantt.ngnice.com/components/basic

go to tab "Components", "Basic use of", change the chrome page zoom from any number different than 100%, and try to connect two dates, the connection circle will be off the line drawn.

建议：为了便于扩展，把gantt-main和gantt-table中用到的所有组件都export出来

我的目的是实现官网例子里面的打平展示，但只export了部分组件，不能完整复制和扩展所有功能，把所有组件都导出，使用者就可以再覆盖gantt-main和gant-table之后做自己的定制修改。
目前我是通过把数据插入item的children里面，模仿打平展示效果。

建议：实现mergedItems功能

我看group.ts源码里已经有了mergedItems属性，Item也可以支持此功能，实现打平展示。

GanttViewDay - Issue with week numbering when weekStart.getDaysInMonth() - weekStart.getDate() < 3

With the following configuration :

{
      provide: GANTT_GLOBAL_CONFIG,
      useValue: {
        dateFormat: {
          week: `'semaine' w`,
          year: `yyyy`,
          yearQuarter: `'Trimestre' Q yyyy`,
          month: 'LLLL',
          yearMonth: `LLLL yyyy' (semaine' w')'`
        }
      }
 },

In yearMonth view aka DayView, the week numbering is incorrect if the most part of the current week is on the next month.
This year 2022 it occurs on the following weeks (with monday as first weekday) :

• January 31st
• March 28th
• June 30th
• September 29th
• November 31st
• December 28th

All these weeks have less than 3 days before next month. So according "packages/gantt/src/views/day.ts" (line 43) the week is increased by one in order to get next month name upper the week. But next to the month i also wrote the week number (see GANTT_GLOBAL_CONFIG up there). So the printed week number is the next one not the current one.

Expected Behavior :
I expect to get the correct week number, i don't care too much about month name but i think we can make an exception to get both the next month name and the correct week number.

Source of the issue:

class GanttViewDay extends GanttView {

  //....

  getPrimaryDatePoints() {
          const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 });
          const points = [];
          for (let i = 0; i < weeks.length; i++) {
              const weekStart = new GanttDate(weeks[i]);
              const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
              const point = new GanttDatePoint(weekStart, weekStart.addWeeks(increaseWeek).format(this.options.dateFormat.yearMonth), (this.getCellWidth() * 7) / 2 + i * (this.getCellWidth() * 7), primaryDatePointTop);
              points.push(point);
          }
          return points;
      }

  //....
}

Adjusting width in firefox is jank

Please see the demo

大佬，把这个用vue重新写一个版本，难度大吗？

start 和end无法绑定传参

建议：把<gantt>的start和end属性也加入onChange检测

把的start和end属性也加入onChange检测，否则修改这两个值，不能改变甘特图x轴，现在我只能用如下方法刷新：
//通过修改viewType再修改回来，触发甘特图的横轴重新绘制
private _sendGanttRangeChange(){
let temp = this.cycleSelected;
this.cycleSelected = '';
setTimeout(()=>{
this.cycleSelected = temp;
},100);
}