dalestone/angular2-gantt

A gantt library written in angular

Angular 2 Gantt

This is the home for the Angular 2 gantt component. This project was generated with angular-cli version 1.0.0-beta.18.

The aim of this project is to make a material design angular 2 gantt component.

Project status

Angular 2 gantt is currently in alpha and under active development. During alpha, breaking API and behaviour changes will be occuring regularly.

Getting Started

If you want to view the and modify the source directly do the following:

1. git clone https://github.com/dalestone/angular2-gantt.git
2. npm install -g angular-cli
3. npm install
4. npm start

Install Angular 2 Gantt (Webpack only)

npm install ng2-gantt --save

Import the ng2-gantt NgModule into your app module

import { GanttModule } from 'ng2-gantt';
// other imports
@NgModule({
    imports: [ GanttModule ]
})
export class AppModule { }

Demo

Browser support

Angular 2 Gantt supports the most recent versions of major browsers: Chrome (including Android), Firefox, Safari (including iOS), and IE11 / Edge.

angular2-gantt's Issues

Allow additional columns to be displayed in grid data

adding multiple tasks using the create button does not allow for scrolling vertically

By clicking the create task button, the tasks get created and get added to the task list under Project component but adding additional task, scrolling vertically is not possible.

please see below image

it is possible de put two or more tasks on the same row?

it is possible de put two or more tasks on the same row

thanks for your responses

mutiple level tree

if this plugin could provide mutile level tree in left datagrid? e.g. more than 3 level depth.

best regards

Use canvas to draw background grid instead of using divs as this is causing performance issues

Hour misalignment with day column

error

i am getting issue like this

Add the ability to change the time scale (zoom level)

Resolve gantt bar grid misalignment

Planned migration to Angular 6 and CLI and name change

I am planning on migrating this to angular 6 and looking to at refactoring the code base.

NPM package 1.5.0-alpha.9 is broken

I have issues when trying to use npm package 1.5.0-alpha.9.
I got following:
Module not found: Error: Can't resolve ' .grid_row { box-sizing: border-box; border-bottom: 1px solid #e0e0e0; background-color: #fff; position: relative; -webkit-user-select: none; cursor:pointer; height:25px; line-height:25px; font-size:16px; } .grid_row:hover { background-color: whitesmoke; } in C:\Users\..\node_modules\ng2-gantt\activity @ ./~/ng2-gantt/activity/gantt-activity.component.ts 348:21-460 @ ./~/ng2-gantt/activity/gantt-activity.module.ts @ ./~/ng2-gantt/gantt.module.ts @ ./~/ng2-gantt/index.ts
So further i found, in components definition there inline styles stored in 'styleUrls' properties, but mus be in 'styles' property

Using your library on a web page for Angular Attack

Just wanted to let you know we used your library in a site we built for the angular attack competition. https://peaceful-beyond-63530.herokuapp.com/. Log in and make a chart the page load time is kind of long right now

After using the library I have some feedback:

• The models used to define the gantt chart objects are exported as interfaces. This makes them impossible to use as is in another project as an interface cannot be instantiated. You should add model classes with appropriate constructs for export. In my project I had to implement each interface to a concrete class which is just unneccesary doubling of work in my opinion. Make the models classes and export those.
• The Project object should contain an instance of the options object since a each project relies on a unique set of options. Why this is not the case is confusing and in my concrete object I just did this composition myself.
• The styling on the scrolling date window does not respect the boundaries of the bootstrap container-fluid class. Because this object's width is set by javascript the only way I was able to shrink it back down was to add my own javascript that ran after a delay and reset the width of this container after any kind of change was made.
• The date header display is too wide and the default format of dd-mm-yyyy is unnecessary. You should break this header into three, a year row, a month row, and a day row. This way each grid on that panel only has to accomodate at most 2 number characters allowing for more of the gantt chart to be shown.
• The status options tasks are limited and confusing (like what does 'error' even indicate). Also their effects did not work on our page. These should be reworked to add styles to the task name row in the chart.
• The last piece of criticism I have is that when I ran ng build --prod the library would not build due to private access of some variable or something. I will run it again and paste the error in here. But that was a major issue resulting in us having to deploy the app in developer mode.

Anyway, with all that said I would like to thank you for making this. Without it we could not have completed our app in the 48 hour time limit. Overall the library was relatively easy to plug into our application and integrate with our site. A few changes on the data model, fixing some styling issues, and resolving any errors during the build and this thing would be a powerful library. Thanks!

Migration to SASS

Hey!.
What do you think about migrating styles from css to sass? it can be really great option.

I just refactored a bit and I am ready to submit a pull request.

To Do

• Change inline styles by CSS classes
• Created custom classes for activity status
• Refactor IBarStyle interface and functions

schedule scroll is not working

ng2-gantt installed and ran successfully but no actions can be performed on the gantt. scheduler is not working.

angular version: 4.2.4

[Feature] Month/Year zooming mode

For now. zooming mode is working for hours/days scale.
But, if you have long-term tasks, its must-have visual state as "Year" and "Month" views.

Add development environment read me

Improve documentation

Allow default zooming to be specified

If parent children expanded, when adding a new task it does not update task cache

Long-term projects do not work correctly.

Sorry for my English.

The module did not paint well tasks distant in time (with more than a month) because the comparison between the start date of the task and the scale date is done per day (getDate) instead of full date.

I solved it in file: gantt.service.ts ==> calculateBarLeft, and I code:

const startFullDate = start.getFullYear () + '-' + start.getMonth () + '-' + start.getDate ();
const scaleFullDate = scale [i].getFullYear () + '-' + scale [i].getMonth () + '-' + scale [i].getDate ();
// if (start.getDate () === scale [i].getDate ()) {
if (startFullDate === scaleFullDate) {

Hope that helps.
Thank you for your great work with the gantt module.

If null dates are passed duration is being calculated using default of 1970

Update to the latest Angular 2 Release

Any plans for future development? Is there a plan to update to the latest Angular 2 release?

Change scale and dynamic load of tasks

Hello,

I'm trying to use this component with jhipster and angular 5.

I'm loading the data in ngOnInit doing a GET request, and change the scale (start and end) after that to view all the tasks in Gantt. However, I have a problem, the new scale are working good, but the tasks aren't mapped to new scale.

This is a known problem?
The development of this component are really interrupted?

Thanks
Gonçalo

Allow the ability for the gantt to be expanded 100% height

Add Yarn

Last task not visible due to vertical scroll bar

404 found error

Hi,

i am getting following error
(index):31 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/ng2-gantt

and i am not using angular cli

[Feature] Week/Month on Zooming Mode

Please adding a feature like week/month on zooming mode which provide more realistic while working on huge project time line and all
thanks

After running the demo-app all tasks start at 0.

I am not sure if it is a configuration issue or what, but all the tasks start at 0 and end based on the date difference.

please see attached file below for the image.

Allow the use of scroll wheel over activity grid

Add travis CI

AOT Compilation 1.5.0-alpha.9

Encountered error while trying to do AOT compilation with angular/cli.
ERROR in Cannot determine the module for class GroupByPipe

So, I assume, GroupByPipe is not in declarations section of module.

Improve/Create build process for lib

Separate code out into demo-app and lib

We need to separate the core gantt component out into a lib folder and create a demo-app

This will allow the gantt component to be included in another application more easily.

Create a treeview for the grid data

how do we define tasks and subtasks relation in the project object ?

When scrolling activity grid it should hide content that is not currently visible

view doesn't limit to bootstrap containers

I noticed that both the 'grid' and the 'gantt-activity' containers use a fixed width, whereby the 'gantt-activity' width depends on the screen size. That does conflict with my bootstrap-4 (beta) setup. I am planning to change this (locally). If you're interested, i can submit that code (once finished).

Module build failed. "ng2-gantt/index.ts" is missing from the TypeScript compilation

Error:

ERROR in ./node_modules/ng2-gantt/index.ts
Module build failed: Error: /Users/umut/Desktop/magistum/ngapp/node_modules/ng2-gantt/index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
    at AngularCompilerPlugin.getCompiledFile (/Users/umut/Desktop/magistum/ngapp/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:656:23)
    at plugin.done.then (/Users/umut/Desktop/magistum/ngapp/node_modules/@ngtools/webpack/src/loader.js:467:39)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)
 @ ./src/app/app.module.ts 24:0-40
 @ ./src/main.ts
 @ multi ./src/main.ts

Angular Version:

Angular CLI: 1.6.5
Node: 9.3.0
OS: darwin x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.1.0
@angular/cli: 1.6.5
@angular/material: 5.1.0
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.6.2
webpack: 3.10.0

I can't install.

npm install ng2-gantt --save
npm WARN peerDependencies The peer dependency @angular/[email protected] included from ng2-gantt will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/[email protected] included from ng2-gantt will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency @angular/[email protected] included from ng2-gantt will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.

Is something wrong? Please help me with this issue.

Unexpected character '@' (10:0) You may need an appropriate loader to handle this file type

When I run webpack run , I am encountering the following issues. Please help.

ERROR in ./~/ng2-gantt/gantt.module.ts
Module parse failed: C:\Users\kaung.san\Documents\Visual Studio 2017\Projects\CMSv1\CMSv1\node_modules\ng2-gantt\gantt.module.ts Unexpected character '@' (10:0)
You may need an appropriate loader to handle this file type.
| import { GanttService } from './shared/services/gantt.service';
| import { GanttActivityModule } from './activity/gantt-activity.module';
| @NgModule({
|     imports: [
|         CommonModule,
 @ ./~/ng2-gantt/index.ts 1:0-31
 @ ./ClientApp/app/app.shared.module.ts
 @ ./ClientApp/app/app.browser.module.ts
 @ ./ClientApp/boot.browser.ts
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.browser.ts
ERROR in ./~/ng2-gantt/shared/interfaces.ts
Module parse failed: C:\Users\kaung.san\Documents\Visual Studio 2017\Projects\CMSv1\CMSv1\node_modules\ng2-gantt\shared\interfaces.ts Unexpected token (1:7)
You may need an appropriate loader to handle this file type.
| export interface Project {
|     id: string;
|     name: string;
 @ ./~/ng2-gantt/index.ts 2:0-36
 @ ./ClientApp/app/app.shared.module.ts
 @ ./ClientApp/app/app.browser.module.ts
 @ ./ClientApp/boot.browser.ts
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=
```true ./ClientApp/boot.browser.ts