feat(arc-lib):added components for timeline

projects/arc-lib/README.md

@@ -2,18 +2,19 @@
 
 ## Description
 
-- In an Angular multiproject workspace, a shared library is a package that contains reusable code and 
+- In an Angular multiproject workspace, a shared library is a package that contains reusable code and
   functionality that can be used across multiple projects within the workspace.
 
-- A shared library can include components, services, pipes, directives, and other modules that can be 
+- A shared library can include components, services, pipes, directives, and other modules that can be
   used by other projects in the workspace. By using a shared library, you can avoid duplicating code and functionality across multiple projects, which can save time and effort.
 
-- By separating your reusable code into a shared library, you can also maintain consistency and 
+- By separating your reusable code into a shared library, you can also maintain consistency and
   standardization across your projects. If you need to make changes to the shared code, you can update the library and all projects that use it will be automatically updated as well. a shared library is a powerful tool for managing code and functionality in an Angular multiproject workspace, and can help improve code quality, reduce duplication, and increase productivity.
 
-###  Structure of the arc-lib is
+### Structure of the arc-lib is
 
 The Structure of the arc-lib is as follows
+
 ```
 ├── arc-lib
 │   └── src
@@ -24,7 +25,7 @@ The Structure of the arc-lib is as follows
 │            └── theme
 ```
 
-- Angular arc library  provides various features and components to help developers get started with 
+- Angular arc library provides various features and components to help developers get started with
   their projects quickly. Here are some of the features and components that provides:
 
 ## Core Module:
@@ -111,12 +112,13 @@ For more details about Theme Module,refer [Here](/projects/arc-lib/src/lib/theme
 
 ### Select Component
 
-  This component supports auto-completion, filtering of options by search terms, and the
-  ability to add new tags that are not present in the list of options. There are also several configurable options, such as the ability to select multiple items, the placeholder text for the input field, and the width and height of the dropdown panel and provides a reusable component for displaying a searchable list of items with a selectable checkbox and dropdown with customized states.
+This component supports auto-completion, filtering of options by search terms, and the
+ability to add new tags that are not present in the list of options. There are also several configurable options, such as the ability to select multiple items, the placeholder text for the input field, and the width and height of the dropdown panel and provides a reusable component for displaying a searchable list of items with a selectable checkbox and dropdown with customized states.
 
 ### Gantt Component:
 
-  In this The boilerplate usingbb.gantt,bb.gantt charts,bb.gantt bars a Gantt chart is a user interface component that displays project tasks or events over a timeline, allowing users to visualize the schedule and progress of a project.
+In this The boilerplate usingbb.gantt,bb.gantt charts,bb.gantt bars a Gantt chart is a user interface component that displays project tasks or events over a timeline, allowing users to visualize the schedule and progress of a project.
+or further reference you can refer [Here](/projects/arc-lib/src/lib/components/gantt/readme.md)
 
 ### Login Component:
 
@@ -130,7 +132,7 @@ For more details about Theme Module,refer [Here](/projects/arc-lib/src/lib/theme
 
 - 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 
+- 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
 
-For more details about Components ,refer [Here](/projects/arc-lib/src/lib/components/readme.md)
+For more details about Components ,refer [Here](/projects/arc-lib/src/lib/components/readme.md)

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.html

@@ -16,6 +16,8 @@
       class="bar actual-bar"
       [class.with-suballocations]="hasSubAllocation(item)"
       [class.closed-won]="item.payload?.['dealStage'] === 'closedwon'"
+      [attr.gantt-tooltip-data]="'abc'"
+      gantt-hover="tooltip"
       [ngClass]="item.classes ?? []"
       data-gantt-click="bar"
     >
@@ -32,18 +34,26 @@
         {{ formatter(item.payload?.['billingRate']) }}
       </div>
       <div *ngIf="hasSubAllocation(item)" class="bar-container">
-        <ng-container *ngFor="let allocationBar of item.subAllocations">
+        <ng-container
+          *ngFor="let allocationBar of item.subAllocations; let i = index"
+        >
           <div
             class="suballocation-bars"
             [attr.gantt-bar-data]="stringify(allocationBar)"
             gantt-hover="bar"
             [ngClass]="allocationBar.classes ?? []"
-            [ngStyle]="{
-              width: allocationBar.percent + '%',
-            }"
+            [ngStyle]="{width: allocationBar.percent + '%'}"
             [class.empty]="!allocationBar.allocation"
             [class.over-allocated]="allocationBar.allocation > allocationBase"
+            (mouseover)="showTooltip = i"
+            (mouseout)="showTooltip = -1"
           >
+            <div class="showTooltip-wrapper">
+              <arc-gantt-tooltip
+                *ngIf="i == showTooltip"
+                [itemData]="allocationBar"
+              ></arc-gantt-tooltip>
+            </div>
             <div class="actual-hours">
               {{
                 formatAllocation(

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
-// @use "../../../../theme/styles/variables" as *;
-@use 'projects/arc-lib/src/lib/theme/styles/_variables.scss' as *;
+@use '../../../../theme/styles/variables' as *;
 
 .actual-rate {
   padding: 0.25rem 0.5rem;
@@ -13,12 +12,22 @@
   margin-right: 0.75rem;
 }
 
+.bar {
+  position: relative;
+  .showTooltip-wrapper {
+    position: absolute;
+    top: 2rem;
+  }
+}
+
 .bar-container {
   display: flex;
   flex-grow: 1;
   background: white;
 }
-
+.showTooltip-wrapper {
+  position: absolute;
+}
 .bar {
   font-family: var(--font-family-primary);
   font-weight: map.get($font-weight, bold);
@@ -28,7 +37,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100%;
+  height: 20px;
   overflow: hidden;
 
   &.actual-bar {
@@ -78,7 +87,7 @@
   justify-content: space-between;
   align-items: center;
   height: 100%;
-  overflow: hidden;
+
 
   background: repeating-linear-gradient(
     305deg,

projects/arc-lib/src/lib/components/gantt/components/gantt-bars/gantt-bars.component.spec.ts

@@ -1,34 +1,16 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
-import {AnyObject} from '@project-lib/core/api';
-import {TranslationService} from '@project-lib/core/localization';
-import {
-  TranslateFakeLoader,
-  TranslateLoader,
-  TranslateModule,
-  TranslateService,
-} from '@ngx-translate/core';
+
 import {GanttBarsComponent} from './gantt-bars.component';
 
 describe('GanttBarsComponent', () => {
-  let component: GanttBarsComponent<AnyObject>;
-  let fixture: ComponentFixture<GanttBarsComponent<AnyObject>>;
+  let component: GanttBarsComponent;
+  let fixture: ComponentFixture<GanttBarsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [GanttBarsComponent],
-      providers: [TranslateService, TranslationService],
-      imports: [
-        TranslateModule.forRoot({
-          loader: {
-            provide: TranslateLoader,
-            useClass: TranslateFakeLoader,
-          },
-        }),
-      ],
     }).compileComponents();
-  });
 
-  beforeEach(() => {
     fixture = TestBed.createComponent(GanttBarsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();