docs(arc-lib): documentation of gantt module

documentation of gantt module

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

@@ -0,0 +1,222 @@
+# Gantt Module
+
+## Overview
+
+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.
+
+## GanttBarComponent
+
+- 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.
+- GanttBarsComponent is responsible for visualizing resource allocations in a Gantt chart format. It supports:
+
+  1. Actual allocations with sub-allocations
+  2. Hour and rate displays
+  3. Tooltips for detailed information
+  4. Over-allocation indicators.
+
+### Usage Example
+
+```
+// Component usage
+
+<arc-gantt-bars
+  [item]="resourceItem"
+  [allocationTypes]="types"
+  [allocationBase]="40">
+</arc-gantt-bars>
+```
+
+## GanttColumnComponent
+
+This component handles hierarchical employee data display with expandable parent-child relationships, initials display, and overallocation warnings.
+
+- This Component is used to displays a single column of the Gantt chart. It has several input properties
+  like
+- `contextItems`: An array of NbMenuItem objects representing the context menu items to display for the
+  task.
+- `showKebab`: A boolean value indicating whether to show a kebab icon for the task or not.
+- `showParentInitials`: A boolean value indicating whether to show the initials of the parent task or not.
+- `showChildInitials`: A boolean value indicating whether to show the initials of the child tasks or not.
+- `showOverallocatedIcon`: A boolean value indicating whether to show an overallocated icon for the task or
+  not.
+- `contextItemFilter`: A function that takes a GanttTaskValue object as input and returns a boolean
+  indicating whether to display the context menu items for that task or not.
+
+### Usage Example
+
+```
+// Component usage
+
+<arc-gantt-column
+  [items]="employeeData"
+  [showParentInitials]="true"
+  [showChildInitials]="true"
+  [showOverallocatedIcon]="true"
+  (itemSelected)="handleItemSelection($event)">
+</arc-gantt-column>
+```
+
+## GanttHeaderComponent
+
+- This component provides a customizable header with an optional project title, description indicator, and search functionality.
+- The GanttHeaderComponent serves as the top section of a Gantt chart, featuring:
+
+  1. Project title display
+  2. Optional description indicator
+  3. Configurable search input field
+
+### Usage Example
+
+```
+// Component usage
+
+<arc-gantt-header
+  [name]="'Project Alpha'"
+  [desc]="true"
+  [showSearch]="true"
+  [searchPlaceholder]="'Search resources...'">
+</arc-gantt-header>
+```
+
+## GanttTooltipComponent
+
+- The GanttTooltipComponent provides a detailed popup
+  tooltip displaying:
+
+  1. Hours per day allocation
+  2. Hourly billing rates
+  3. Project date ranges
+  4. Associated deals with status
+
+### Usage Example
+
+```
+// Component usage
+
+<arc-gantt-tooltip
+  [itemData]="tooltipData"
+  [allocationMap]="shadowResourceMap">
+</arc-gantt-tooltip>
+```
+
+## TimelineComponent
+
+- 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.
+- The TimelineComponent is a generic component that provides:
+
+  1. Multi-level time scale visualization
+  2. Customizable columns and bars
+  3. Context menu integration
+  4. Infinite scrolling support
+  5. Custom tooltip system
+  6. Advanced grouping and filtering
+
+### Usage Example
+
+```
+// Component usage
+
+@Component({
+  selector: 'app-custom-gantt',
+  template: `
+    <arc-timeline-gantt
+      [columnComponent]="customColumn"
+      [barComponent]="customBar"
+      [defaultScale]="'month'"
+      [showSearch]="true"
+      [infiniteScroll]="true">
+    </arc-timeline-gantt>
+  `
+})
+```
+
+## GanttZoomBarComponent
+
+- 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.
+- The GanttZoomBarComponent is a control panel  
+  component that provides:
+  1. Zoom in/out functionality
+  2. Fit to screen capability
+
+### Usage Example
+
+```
+// Component usage
+
+<arc-gantt-zoombar></arc-gantt-zoombar>
+```
+
+## Service:
+
+### GanttService
+
+- The GanttService class has several private properties, including ` _data`, `_overlays`, `_tooltipOverlay`,
+  `_eventHandlers` etc
+- The render method takes an ElementRef representing the container containing options to configure the Gantt
+  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
+  grid header clicks.
+
+### Timeline-scale
+
+- `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
+
+- `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.
+
+- `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()`
+
+## GanttDemoComponent
+
+- This component demonstrating a full-featured Gantt chart implementation with sidebars, headers, tooltips, and timeline visualization.
+- The GanttDemoComponent showcases various features of a Gantt chart implementation including:
+
+  1. Resource allocation visualization
+  2. Timeline management
+  3. Project hierarchy display
+  4. Custom tooltips
+  5. Search functionality
+  6. Header customization
+
+### Resource Allocation
+
+```
+allocationTypes = {
+  PlaceholderResource: 'PlaceholderResource'
+};
+
+allocationBase = 40;
+
+item = {
+  type: 'ActualResource',
+  allocation: 32,
+  payload: {
+    dealStage: 'closedown',
+    billingRate: 100
+  },
+  subAllocations: [
+    {percent: 50, allocation: 20, allocatedHours: 20, classes: ['class1']},
+    {percent: 50, allocation: 15, allocatedHours: 15, classes: ['class2']}
+  ]
+};
+```
+
+### Sample Data
+
+```
+items: empData[] = [
+  {
+    name: 'John Doe',
+    subtitle: 'Manager',
+    hasChildren: false,
+    isParent: false,
+    $open: false,
+    overallocated: false
+  },
+  // ... additional employees
+];
+```
+
+### Usage
+
+1. Import the required modules and configure them in your AppModule.
+2. Set up data models to define resources, tasks, and allocations.
+3. Configure the GanttDemoComponent route `/gantt-demo` for easy access.

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

@@ -1,57 +1,11 @@
 # COMPONENTS
 
-## Gantt
+## GanttModule
 
-### GanttBarComponent
+- The Gantt module is a project management tool that provides a visual representation of a project schedule.
+- 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.
 
-- 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 and sub-allocations, formatting the allocation values, and translating labels using the `TranslationService` and `TranslateService`.
-
-### GanttColumnComponent
-
-- This Component is used to displays a single column of the Gantt chart. It has several input properties 
-  like
-- `contextItems`: An array of NbMenuItem objects representing the context menu items to display for the 
-   task.
-- `showKebab`: A boolean value indicating whether to show a kebab icon for the task or not.
-- `showParentInitials`: A boolean value indicating whether to show the initials of the parent task or not.
-- `showChildInitials`: A boolean value indicating whether to show the initials of the child tasks or not.
-- `showOverallocatedIcon`: A boolean value indicating whether to show an overallocated icon for the task or 
-   not.
-- `contextItemFilter`: A function that takes a GanttTaskValue object as input and returns a boolean 
-   indicating whether to display the context menu items for that task or not.
-
-### GanttHeaderComponent
-
-- The component that represents the header of a Gantt chart. It has several inputs, including 
- `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.
-
-### GanttChartTooltipComponent
-
-- The component which is displayed when hovering over a Gantt chart bar.The tooltip displays information 
-  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
-
-## Service:
-
-### GanttService
-
-- The GanttService class has several private properties, including ` _data`, `_overlays`, `_tooltipOverlay`,
-  `_eventHandlers` etc
-- The render method takes an ElementRef representing the container containing options to configure the Gantt
-  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
-  grid header clicks.
-
-### Timeline-scale
-
-- `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
-
-- `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.
-
-- `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()`
-
-### GanttModule
-
-- 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
+For further reference you can refer [Here](projects/arc-lib/README.md)
 
 ## Resize
 
@@ -68,16 +22,16 @@
 
 - This component implements the behavior of a search and select component. It has several methods,
   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.
-- It also detects changes to the options property and updates the visibleList array accordingly,initialized 
+- It also detects changes to the options property and updates the visibleList array accordingly,initialized
   and focuses on the search input field if it exists,emits an event and calls the closed event if the allowInput property is true.
-- It also retrieves the name of an item by getting the value of the name field of the item,removes an item 
+- It also retrieves the name of an item by getting the value of the name field of the item,removes an item
   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.
 
 ## Selector
 
 ### SelectComponent
 
-- The component is used to display a list of options that can be selected by the user. The selected options 
+- The component is used to display a list of options that can be selected by the user. The selected options
   can be displayed as tags. The component has various inputs and outputs
 - The component uses a `SelectionModel` class to keep track of the selected items. The component can be
   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 @@
 
 - This component defines the behavior of a select dropdown in the UI.The options property is an array of
   `NameIdRequired` objects that will be displayed as the available options in the dropdown.
-- The multiple, allowInput, disabled, and search properties are boolean values that control various aspects 
+- The multiple, allowInput, disabled, and search properties are boolean values that control various aspects
   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.
 
-## Auth 
+## Auth
 
 ### Login Component:
 
@@ -105,22 +59,21 @@
 
 ### Auth Component:
 
-- Auth component is a module that handles the authentication and authorization of users. It is responsible 
+- Auth component is a module that handles the authentication and authorization of users. It is responsible
   for managing user sessions, verifying user credentials, and granting access to protected resources based on the user's role and permissions.
 
-- The auth component typically includes a login as well as a registration form for new users to create an 
+- The auth component typically includes a login as well as a registration form for new users to create an
   account. The component may also handle password reset functionality and provide options for users to manage their accounts
 
-- This component defines an Angular component that extends the `NbAuthComponent` class, which is a part of 
+- This component defines an Angular component that extends the `NbAuthComponent` class, which is a part of
   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.
 
-
   ### Animations
 
-- These animations could be used to provide visual feedback when elements are added or removed fro DOM, 
+- These animations could be used to provide visual feedback when elements are added or removed fro DOM,
   or to animate UI elements such as buttons or icons.and it also defines two Angular animations, dropdownAnimation and rotateAnimation.
 
-- `DropdownAnimation`: The `dropdownAnimation` trigger defines two states: `void'` and `open`. The `void` 
-   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.
-- `RotateAnimation` : The `rotateAnimation` trigger defines two states: `closed` and `open`. The `closed` 
-   state sets the element's rotation angle to 0 degrees. The`open` state sets the element's rotation angle to 180 degrees.
+- `DropdownAnimation`: The `dropdownAnimation` trigger defines two states: `void'` and `open`. The `void`
+  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.
+- `RotateAnimation` : The `rotateAnimation` trigger defines two states: `closed` and `open`. The `closed`
+  state sets the element's rotation angle to 0 degrees. The`open` state sets the element's rotation angle to 180 degrees.