worktile / ngx-gantt Goto Github PK
View Code? Open in Web Editor NEWA modern and powerful gantt chart component for Angular
Home Page: http://gantt.ngnice.com
License: MIT License
A modern and powerful gantt chart component for Angular
Home Page: http://gantt.ngnice.com
License: MIT License
使用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)
如果项目Angular用的 是8.3,想使用这个库,做那些处理,才能使用?
It would be great that the doc could has English version: http://gantt.ngnice.com/guides/intro
在平铺模式中,两个item之间必须要间隔3天,小于3天就会换行显示,在实际使用过程中会有问题,这个问题是由于默认设置吗?在哪里可以调整?
@HandsomeButterball
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.
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.
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?
Is it possible to use sorting (like in a standard table) to sort / filter rows in the left pane of gantt?
GanttViewType 会考虑增加小时么?
export declare enum GanttViewType { day = "day", quarter = "quarter", month = "month", year = "year", week = "week" }
把的start和end属性也加入onChange检测,否则修改这两个值,不能改变甘特图x轴,现在我只能用如下方法刷新:
//通过修改viewType再修改回来,触发甘特图的横轴重新绘制
private _sendGanttRangeChange(){
let temp = this.cycleSelected;
this.cycleSelected = '';
setTimeout(()=>{
this.cycleSelected = temp;
},100);
}
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..
能否在进度条上,反色显示一下 xx% 完成的字样呢?
谢谢。
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?
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
I want to add event to scroll down when going down a list of groups or items
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?
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.
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: '',
}],
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 :
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 },
];
<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>
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
如果不设置[disabledLoadOnScroll]="ture",左右拖动滚动条后,出现很多空白,bar也会消失一段时间,过一会可能会出现
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
);
Much appreciated if you could update to support NG 15! Cheers!
我看group.ts源码里已经有了mergedItems属性,Item也可以支持此功能,实现打平展示。
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?
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.
//这是我的数据
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,
}
];
尊敬的博主, 您好, 我们在客制化gantt 图的时候, 想要调用ngx-root的方法, 快速定位回当前日期, 但是发现我们angular版本对应的package该方法(scrollToToday())类型为private, 没办法使用, 不知道您这边能否将旧版本的方法类型改为public, 十分感谢您百忙之中查看此请求, 期待您的回复~
ngx-gantt support setting the color of bar, but only support the color of RGB, we hope support browser built-in 140 colors.
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!
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.
Very cool library. Any plans to update to Angular 13?
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) :
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;
}
//....
}
可以肯定这是个很优秀的甘特图组件,但目前仅支持Angular,不知是否有计划支持React和Vue?
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.