Skip to content

Commit 6dc438c

Browse files
Deepika516Deepika516
committed
docs(arc-lib): documentation of gantt module
documentation of gantt module
1 parent f65f382 commit 6dc438c

File tree

2 files changed

+239
-64
lines changed

2 files changed

+239
-64
lines changed

‎projects/arc-lib/src/lib/components/gantt/readme.md

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
# Gantt Module
2+
3+
## Overview
4+
5+
The Gantt Module is designed to display project timelines, resource allocation, and scheduling in a visually intuitive way. This module includes several components, each handling a specific aspect of the Gantt chart visualization.
6+
7+
## GanttBarComponent
8+
9+
- The component is used to render the bars for the Gantt chart. It is generic and can be used with any type of task value. The component contains properties and methods for rendering the bars.
10+
- GanttBarsComponent is responsible for visualizing resource allocations in a Gantt chart format. It supports:
11+
12+
1. Actual allocations with sub-allocations
13+
2. Hour and rate displays
14+
3. Tooltips for detailed information
15+
4. Over-allocation indicators.
16+
17+
### Usage Example
18+
19+
```
20+
// Component usage
21+
22+
<arc-gantt-bars
23+
[item]="resourceItem"
24+
[allocationTypes]="types"
25+
[allocationBase]="40">
26+
</arc-gantt-bars>
27+
```
28+
29+
## GanttColumnComponent
30+
31+
This component handles hierarchical employee data display with expandable parent-child relationships, initials display, and overallocation warnings.
32+
33+
- This Component is used to displays a single column of the Gantt chart. It has several input properties
34+
like
35+
- `contextItems`: An array of NbMenuItem objects representing the context menu items to display for the
36+
task.
37+
- `showKebab`: A boolean value indicating whether to show a kebab icon for the task or not.
38+
- `showParentInitials`: A boolean value indicating whether to show the initials of the parent task or not.
39+
- `showChildInitials`: A boolean value indicating whether to show the initials of the child tasks or not.
40+
- `showOverallocatedIcon`: A boolean value indicating whether to show an overallocated icon for the task or
41+
not.
42+
- `contextItemFilter`: A function that takes a GanttTaskValue object as input and returns a boolean
43+
indicating whether to display the context menu items for that task or not.
44+
45+
### Usage Example
46+
47+
```
48+
// Component usage
49+
50+
<arc-gantt-column
51+
[items]="employeeData"
52+
[showParentInitials]="true"
53+
[showChildInitials]="true"
54+
[showOverallocatedIcon]="true"
55+
(itemSelected)="handleItemSelection($event)">
56+
</arc-gantt-column>
57+
```
58+
59+
## GanttHeaderComponent
60+
61+
- This component provides a customizable header with an optional project title, description indicator, and search functionality.
62+
- The GanttHeaderComponent serves as the top section of a Gantt chart, featuring:
63+
64+
1. Project title display
65+
2. Optional description indicator
66+
3. Configurable search input field
67+
68+
### Usage Example
69+
70+
```
71+
// Component usage
72+
73+
<arc-gantt-header
74+
[name]="'Project Alpha'"
75+
[desc]="true"
76+
[showSearch]="true"
77+
[searchPlaceholder]="'Search resources...'">
78+
</arc-gantt-header>
79+
```
80+
81+
## GanttTooltipComponent
82+
83+
- The GanttTooltipComponent provides a detailed popup
84+
tooltip displaying:
85+
86+
1. Hours per day allocation
87+
2. Hourly billing rates
88+
3. Project date ranges
89+
4. Associated deals with status
90+
91+
### Usage Example
92+
93+
```
94+
// Component usage
95+
96+
<arc-gantt-tooltip
97+
[itemData]="tooltipData"
98+
[allocationMap]="shadowResourceMap">
99+
</arc-gantt-tooltip>
100+
```
101+
102+
## TimelineComponent
103+
104+
- The timeline component that implements a customizable Gantt chart timeline with multiple scale units, tooltips, and advanced configuration options. This component integrates with the DHTMLX Gantt library and provides extensive customization capabilities.
105+
- The TimelineComponent is a generic component that provides:
106+
107+
1. Multi-level time scale visualization
108+
2. Customizable columns and bars
109+
3. Context menu integration
110+
4. Infinite scrolling support
111+
5. Custom tooltip system
112+
6. Advanced grouping and filtering
113+
114+
### Usage Example
115+
116+
```
117+
// Component usage
118+
119+
@Component({
120+
selector: 'app-custom-gantt',
121+
template: `
122+
<arc-timeline-gantt
123+
[columnComponent]="customColumn"
124+
[barComponent]="customBar"
125+
[defaultScale]="'month'"
126+
[showSearch]="true"
127+
[infiniteScroll]="true">
128+
</arc-timeline-gantt>
129+
`
130+
})
131+
```
132+
133+
## GanttZoomBarComponent
134+
135+
- This Component provides zoom and fit-to-screen controls for a Gantt chart interface. This component offers intuitive controls for adjusting the Gantt chart's view scale and fit.
136+
- The GanttZoomBarComponent is a control panel
137+
component that provides:
138+
1. Zoom in/out functionality
139+
2. Fit to screen capability
140+
141+
### Usage Example
142+
143+
```
144+
// Component usage
145+
146+
<arc-gantt-zoombar></arc-gantt-zoombar>
147+
```
148+
149+
## Service:
150+
151+
### GanttService
152+
153+
- The GanttService class has several private properties, including ` _data`, `_overlays`, `_tooltipOverlay`,
154+
`_eventHandlers` etc
155+
- The render method takes an ElementRef representing the container containing options to configure the Gantt
156+
chart. The method sets several properties such as the `row_height, bar_height, scale_height`, and readonly properties. It also sets up the layout of the Gantt chart and registers event handlers for task clicks and
157+
grid header clicks.
158+
159+
### Timeline-scale
160+
161+
- `MonthlyScaleService` : This is an service for generating a monthly scale for a Gantt chart It provides a configuration for displaying the Monthly timeline scale for a Gantt chart. The `config()` method, which returns an array of objects representing the different units in the timeline scale.The `GanttScaleService` interface defines a contract for a service that can be used to generate scale configurations for different timelines. The `MonthlyScaleService` class implements this interface by defining the scale property, which is set to Timelines.Monthly
162+
163+
- `QuarterlyScaleService` : This is an service for generating a quarterly scale for a Gantt chart. The service implements the `GanttScaleService` interface and provides a `config()` method that returns an array of scale configuration objects.The `QuarterlyScaleService` class has a scale property that is set to Timelines.Quarterly, indicating that this service generates a quarterly scale.
164+
165+
- `WeeklyScaleService` : This defines service called `WeeklyScaleService` which implements the `GanttScaleService` interface. The `GanttScaleService` interface defines the contract that all Gantt scale services must adhere to. The `WeeklyScaleService` service provides a configuration for a Gantt chart with a weekly timeline. The configuration includes an array of objects that specify the scale units, step size, and formatting for each unit.The `config()` method returns an array of two objects. The first object represents the weekly scale unit and formats the date using the `_formatWeeklyScale` private method. The second object represents the daily scale unit and formats the date using the `toLocaleString()`
166+
167+
## GanttDemoComponent
168+
169+
- This component demonstrating a full-featured Gantt chart implementation with sidebars, headers, tooltips, and timeline visualization.
170+
- The GanttDemoComponent showcases various features of a Gantt chart implementation including:
171+
172+
1. Resource allocation visualization
173+
2. Timeline management
174+
3. Project hierarchy display
175+
4. Custom tooltips
176+
5. Search functionality
177+
6. Header customization
178+
179+
### Resource Allocation
180+
181+
```
182+
allocationTypes = {
183+
PlaceholderResource: 'PlaceholderResource'
184+
};
185+
186+
allocationBase = 40;
187+
188+
item = {
189+
type: 'ActualResource',
190+
allocation: 32,
191+
payload: {
192+
dealStage: 'closedown',
193+
billingRate: 100
194+
},
195+
subAllocations: [
196+
{percent: 50, allocation: 20, allocatedHours: 20, classes: ['class1']},
197+
{percent: 50, allocation: 15, allocatedHours: 15, classes: ['class2']}
198+
]
199+
};
200+
```
201+
202+
### Sample Data
203+
204+
```
205+
items: empData[] = [
206+
{
207+
name: 'John Doe',
208+
subtitle: 'Manager',
209+
hasChildren: false,
210+
isParent: false,
211+
$open: false,
212+
overallocated: false
213+
},
214+
// ... additional employees
215+
];
216+
```
217+
218+
### Usage
219+
220+
1. Import the required modules and configure them in your AppModule.
221+
2. Set up data models to define resources, tasks, and allocations.
222+
3. Configure the GanttDemoComponent route `/gantt-demo` for easy access.

‎projects/arc-lib/src/lib/components/readme.md

Lines changed: 17 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,11 @@
11
# COMPONENTS
22

3-
## Gantt
3+
## GanttModule
44

5-
### GanttBarComponent
5+
- The Gantt module is a project management tool that provides a visual representation of a project schedule.
6+
- It displays tasks along a timeline,, allowing users to see task durations, dependencies, and progress at a glance. Users can easily adjust timelines by dragging tasks, set milestones, and allocate resources, making it an effective tool for planning and tracking project timelines.
67

7-
- The component is used to render the bars for the Gantt chart. It is generic and can be used with any type
8-
of task value. The component contains properties and methods for rendering the bars and sub-allocations, formatting the allocation values, and translating labels using the `TranslationService` and `TranslateService`.
9-
10-
### GanttColumnComponent
11-
12-
- This Component is used to displays a single column of the Gantt chart. It has several input properties
13-
like
14-
- `contextItems`: An array of NbMenuItem objects representing the context menu items to display for the
15-
task.
16-
- `showKebab`: A boolean value indicating whether to show a kebab icon for the task or not.
17-
- `showParentInitials`: A boolean value indicating whether to show the initials of the parent task or not.
18-
- `showChildInitials`: A boolean value indicating whether to show the initials of the child tasks or not.
19-
- `showOverallocatedIcon`: A boolean value indicating whether to show an overallocated icon for the task or
20-
not.
21-
- `contextItemFilter`: A function that takes a GanttTaskValue object as input and returns a boolean
22-
indicating whether to display the context menu items for that task or not.
23-
24-
### GanttHeaderComponent
25-
26-
- The component that represents the header of a Gantt chart. It has several inputs, including
27-
`searchPlaceholder` string representing the placeholder text to be displayed in the search box and `showSearch` A boolean value indicating whether the search box should be displayed or not.
28-
29-
### GanttChartTooltipComponent
30-
31-
- The component which is displayed when hovering over a Gantt chart bar.The tooltip displays information
32-
about a SubAllocation object, including its start and end dates, allocation rate, and allocated hours per day. The SubAllocation object is passed to the component using the item input property.The component has methods for formatting the allocation rate and allocated hours per day values into readable strings
33-
34-
## Service:
35-
36-
### GanttService
37-
38-
- The GanttService class has several private properties, including ` _data`, `_overlays`, `_tooltipOverlay`,
39-
`_eventHandlers` etc
40-
- The render method takes an ElementRef representing the container containing options to configure the Gantt
41-
chart. The method sets several properties such as the `row_height, bar_height, scale_height`, and readonly properties. It also sets up the layout of the Gantt chart and registers event handlers for task clicks and
42-
grid header clicks.
43-
44-
### Timeline-scale
45-
46-
- `MonthlyScaleService` : This is an service for generating a monthly scale for a Gantt chart It provides a configuration for displaying the Monthly timeline scale for a Gantt chart. The `config()` method, which returns an array of objects representing the different units in the timeline scale.The `GanttScaleService` interface defines a contract for a service that can be used to generate scale configurations for different timelines. The `MonthlyScaleService` class implements this interface by defining the scale property, which is set to Timelines.Monthly
47-
48-
- `QuarterlyScaleService` : This is an service for generating a quarterly scale for a Gantt chart. The service implements the `GanttScaleService` interface and provides a `config()` method that returns an array of scale configuration objects.The `QuarterlyScaleService` class has a scale property that is set to Timelines.Quarterly, indicating that this service generates a quarterly scale.
49-
50-
- `WeeklyScaleService` : This defines service called `WeeklyScaleService` which implements the `GanttScaleService` interface. The `GanttScaleService` interface defines the contract that all Gantt scale services must adhere to. The `WeeklyScaleService` service provides a configuration for a Gantt chart with a weekly timeline. The configuration includes an array of objects that specify the scale units, step size, and formatting for each unit.The `config()` method returns an array of two objects. The first object represents the weekly scale unit and formats the date using the `_formatWeeklyScale` private method. The second object represents the daily scale unit and formats the date using the `toLocaleString()`
51-
52-
### GanttModule
53-
54-
- This is an Angular module called GanttModule which declares and exports a components and Modules related to Gantt.The module also provides three different `GanttScaleService` implementations as providers using the GANTT_SCALES injection token: `MonthlyScaleService`, `WeeklyScaleService`, and `QuarterlyScaleService`as we discuss above
8+
For further reference you can refer [Here](projects/arc-lib/README.md)
559

5610
## Resize
5711

@@ -68,16 +22,16 @@
6822

6923
- This component implements the behavior of a search and select component. It has several methods,
7024
the methods are creating a Set of removed items, assigning a copy of the options to the visibleList array, sorting the list by groups, and subscribing to changes in the value of a search control.
71-
- It also detects changes to the options property and updates the visibleList array accordingly,initialized
25+
- It also detects changes to the options property and updates the visibleList array accordingly,initialized
7226
and focuses on the search input field if it exists,emits an event and calls the closed event if the allowInput property is true.
73-
- It also retrieves the name of an item by getting the value of the name field of the item,removes an item
27+
- It also retrieves the name of an item by getting the value of the name field of the item,removes an item
7428
from the list and emits an event,method checks if an item is a placeholder item,selects the first item in the list if the user presses enter on the search box and there are items in the list and groups the visibleList array according to the groupConfig property.
7529

7630
## Selector
7731

7832
### SelectComponent
7933

80-
- The component is used to display a list of options that can be selected by the user. The selected options
34+
- The component is used to display a list of options that can be selected by the user. The selected options
8135
can be displayed as tags. The component has various inputs and outputs
8236
- The component uses a `SelectionModel` class to keep track of the selected items. The component can be
8337
configured to allow multiple or single selection by using the multiple input. The component also has a search box to filter the options, and the allowInput input allows the user to enter a custom value that is not in the list.
@@ -90,10 +44,10 @@
9044

9145
- This component defines the behavior of a select dropdown in the UI.The options property is an array of
9246
`NameIdRequired` objects that will be displayed as the available options in the dropdown.
93-
- The multiple, allowInput, disabled, and search properties are boolean values that control various aspects
47+
- The multiple, allowInput, disabled, and search properties are boolean values that control various aspects
9448
of the dropdown behavior. `multiple` specifies whether multiple options can be selected at once, `allowInput` specifies whether the user can input a custom option, `disabled` specifies whether the dropdown is disabled or not, and `search` specifies whether a search box is displayed to filter the options.
9549

96-
## Auth
50+
## Auth
9751

9852
### Login Component:
9953

@@ -105,22 +59,21 @@
10559

10660
### Auth Component:
10761

108-
- Auth component is a module that handles the authentication and authorization of users. It is responsible
62+
- Auth component is a module that handles the authentication and authorization of users. It is responsible
10963
for managing user sessions, verifying user credentials, and granting access to protected resources based on the user's role and permissions.
11064

111-
- The auth component typically includes a login as well as a registration form for new users to create an
65+
- The auth component typically includes a login as well as a registration form for new users to create an
11266
account. The component may also handle password reset functionality and provide options for users to manage their accounts
11367

114-
- This component defines an Angular component that extends the `NbAuthComponent` class, which is a part of
68+
- This component defines an Angular component that extends the `NbAuthComponent` class, which is a part of
11569
the `@nebular/auth` package. This component is responsible for handling the authentication process in the Angular application. It is using dependency injection to inject the `NbAuthService` and `Location` dependencies into the component's constructor.
11670

117-
11871
### Animations
11972

120-
- These animations could be used to provide visual feedback when elements are added or removed fro DOM,
73+
- These animations could be used to provide visual feedback when elements are added or removed fro DOM,
12174
or to animate UI elements such as buttons or icons.and it also defines two Angular animations, dropdownAnimation and rotateAnimation.
12275

123-
- `DropdownAnimation`: The `dropdownAnimation` trigger defines two states: `void'` and `open`. The `void`
124-
state is applied to an element that does not exist in the DOM. The `open` state is applied to an element that is visible in the DOM.
125-
- `RotateAnimation` : The `rotateAnimation` trigger defines two states: `closed` and `open`. The `closed`
126-
state sets the element's rotation angle to 0 degrees. The`open` state sets the element's rotation angle to 180 degrees.
76+
- `DropdownAnimation`: The `dropdownAnimation` trigger defines two states: `void'` and `open`. The `void`
77+
state is applied to an element that does not exist in the DOM. The `open` state is applied to an element that is visible in the DOM.
78+
- `RotateAnimation` : The `rotateAnimation` trigger defines two states: `closed` and `open`. The `closed`
79+
state sets the element's rotation angle to 0 degrees. The`open` state sets the element's rotation angle to 180 degrees.

0 commit comments

Comments
 (0)