Using your library on a web page for Angular Attack

tschiman commented 7 years ago

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!

dalestone commented 7 years ago

Thanks for the feedback. I agree on all points, resolving those would make it much easier for people to use the library. I will look at implementing in a future version.

I am glad it helped you in building your app!

tschiman commented 7 years ago

Here is that error output from running ng build --prod

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/gantt.component.ngfactory.ts (1,1): Property '_project' is private and only accessible within class 'GanttComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/gantt.component.ts.GanttComponent.html (5,17): Property '_project' is private and only accessible within class 'GanttComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/gantt.component.ts.GanttComponent.html (6,33): Property '_options' is private and only accessible within class 'GanttComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/gantt.component.ts.GanttComponent.html (6,54): Property '_project' is private and only accessible within class 'GanttComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/gantt-activity.component.ngfactory.ts (1,1): Property 'ganttActivityHeight' is private and only accessible within class 'GanttActivityComponent'. C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/gantt-activity.component.ngfactory.ts (1,1): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (14,5): Property 'setGridScaleStyle' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (16,9): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (23,5): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (23,5): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (24,5): Property 'ganttActivityHeight' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (24,5): Property 'ganttActivityWidth' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (40,11): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,59): Property 'dimensions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,97): Property 'zoom' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,21): Property 'zoomLevel' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,21): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,9): Property 'containerWidth' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (42,9): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,110): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,72): Property 'zoom' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,34): Property 'zoomLevel' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,72): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,66): Property 'dimensions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,104): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,130): Property 'zoom' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,28): Property 'zoomLevel' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,130): Property 'activityActions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (47,5): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/gantt-activity.component.ngfactory.ts (1,1): Property 'activityActions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (11,13): Property 'treeExpanded' is private and only accessible within class 'GanttActivityComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/time-scale/gantt-time-scale.component.ngfactory.ts (1,1): Property 'setTimescaleStyle' is private and only accessible within class 'GanttTimeScaleComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/time-scale/gantt-time-scale.component.ts.GanttTimeScaleComponent.html (3,9): Property 'setTimescaleLineStyle' is private and only accessible within class 'GanttTimeScaleComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/background/activity-background.component.ngfactory.ts (1,1): Property 'ganttService' is private and only accessible within class 'GanttActivityBackgroundComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/bars/activity-bars.component.ngfactory.ts (1,1): Property 'containerHeight' is private and only accessible within class 'GanttActivityBarsComponent'. C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/bars/activity-bars.component.ngfactory.ts (1,1): Property 'containerWidth' is private and only accessible within class 'GanttActivityBarsComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/bars/activity-bars.component.ts.GanttActivityBarsComponent.html (3,5): Property 'ganttService' is private and only accessible within class 'GanttActivityBarsComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/gantt.component.ngfactory.ts (1,1): Property '_project' is private and only accessible within class 'GanttComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/gantt.component.ts.GanttComponent.html (5,17): Property '_project' is private and only accessible within class 'GanttComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/gantt.component.ts.GanttComponent.html (6,33): Property '_options' is private and only accessible within class 'GanttComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/gantt.component.ts.GanttComponent.html (6,54): Property '_project' is private and only accessible within class 'GanttComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/gantt-activity.component.ngfactory.ts (1,1): Property 'ganttActivityHeight' is private and only accessible within class 'GanttActivityComponent'. C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/gantt-activity.component.ngfactory.ts (1,1): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (14,5): Property 'setGridScaleStyle' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (16,9): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (23,5): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (23,5): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (24,5): Property 'ganttActivityHeight' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (24,5): Property 'ganttActivityWidth' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (40,11): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,59): Property 'dimensions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,97): Property 'zoom' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,21): Property 'zoomLevel' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,21): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (41,9): Property 'containerWidth' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (42,9): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,110): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,72): Property 'zoom' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,34): Property 'zoomLevel' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (43,72): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,66): Property 'dimensions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,104): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,130): Property 'zoom' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,28): Property 'zoomLevel' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (44,130): Property 'activityActions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (47,5): Property 'ganttService' is private and only accessible within class 'GanttActivityComponent'. C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/gantt-activity.component.ngfactory.ts (1,1): Property 'activityActions' is private and only accessible within class 'GanttActivityComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/gantt-activity.component.ts.GanttActivityComponent.html (11,13): Property 'treeExpanded' is private and only accessible within class 'GanttActivityComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/time-scale/gantt-time-scale.component.ngfactory.ts (1,1): Property 'setTimescaleStyle' is private and only accessible within class 'GanttTimeScaleComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/time-scale/gantt-time-scale.component.ts.GanttTimeScaleComponent.html (3,9): Property 'setTimescaleLineStyle' is private and only accessible within class 'GanttTimeScaleComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/background/activity-background.component.ngfactory.ts (1,1): Property 'ganttService' is private and only accessible within class 'GanttActivityBackgroundComponent'.

ERROR in C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/bars/activity-bars.component.ngfactory.ts (1,1): Property 'containerHeight' is private and only accessible within class 'GanttActivityBarsComponent'. C:/src/ganttrack/src/angular/ui/src/$$_gendir/node_modules/ng2-gantt/activity/bars/activity-bars.component.ngfactory.ts (1,1): Property 'containerWidth' is private and only accessible within class 'GanttActivityBarsComponent'. ng:///C:/src/ganttrack/src/angular/ui/node_modules/ng2-gantt/activity/bars/activity-bars.component.ts.GanttActivityBarsComponent.html (3,5): Property 'ganttService' is private and only accessible within class 'GanttActivityBarsComponent'.

dalestone / angular2-gantt

Using your library on a web page for Angular Attack #31