feat(arc): gantt module added with demo component which includes demo of all sub component

gantt module added with demo component which includes demo of all sub component

Author: Deepika516

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

@@ -87,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.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
 import {AllocationBar, Item} from '../../model/item.model';
 
 @Component({
@@ -7,7 +7,7 @@ import {AllocationBar, Item} from '../../model/item.model';
   styleUrls: ['./gantt-bars.component.scss'],
 })
 export class GanttBarsComponent {
-  @Input() item: Item;
+  @Input() item: any;
   @Input() allocationTypes: any;
   @Input() allocationBase: number;
   showTooltip = -1;

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

@@ -1,4 +1,8 @@
-<div *ngFor="let item of items" class="employee-list-item">
+<div
+  *ngFor="let item of items"
+  (click)="onItemClick(item)"
+  class="employee-list-item"
+>
   <nb-icon
     *ngIf="item.hasChildren"
     [icon]="item.$open ? 'chevron-up' : 'chevron-down'"

projects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {empData} from '../../model/item.model';
 
 @Component({
@@ -18,4 +18,12 @@ export class GanttColumnComponent {
 
   @Input()
   showOverallocatedIcon: boolean;
+  // for testing
+
+  @Output() itemSelected = new EventEmitter<empData>();
+
+  onItemClick(item: empData): void {
+    this.itemSelected.emit(item);
+    console.log('hi tiny');
+  }
 }

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

@@ -5,18 +5,13 @@ <h2 class="project-title">{{ name }}</h2>
       <p>Description is enabled.</p>
     </div>
   </div>
-
-  <nb-card>
-    <nb-card-body>
-      <div class="search-wrapper" *ngIf="showSearch">
-        <input
-          nbInput
-          fieldSize="medium"
-          type="text"
-          status="basic"
-          [placeholder]="searchPlaceholder"
-        />
-      </div>
-    </nb-card-body>
-  </nb-card>
+  <div class="search-wrapper" *ngIf="showSearch">
+    <input
+      nbInput
+      fieldSize="medium"
+      type="text"
+      status="basic"
+      [placeholder]="searchPlaceholder"
+    />
+  </div>
 </div>

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

@@ -56,18 +56,22 @@
 .header-wrapper {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   width: calc(100vw - 1rem);
 }
 
 .project-title {
   font-size: x-large;
-  margin-bottom: -2px;
+  line-height: 1;
 }
 
 .desc-wrapper {
-  margin-top: -8px;
+  margin-top: 6px;
+  p{
+    margin:0;
+  }
 }
 
-.search-wrapper {
-  margin-top: 32px;
+.project-title{
+  margin:0;
 }

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

@@ -1,4 +1,4 @@
-<div class="w-100 p-3 mt-1 display-flex flex-direction-row">
+<div class="w-100 p-3 mt-1 display-flex flex-direction-row icon-wrapper">
   <nb-icon
     icon="chevron-left"
     class="gantt-scroll-icon cursor-pointer"

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

@@ -2,3 +2,10 @@
   height: 2rem;
   width: 2rem;
 }
+
+.icon-wrapper{
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        margin-top: -24px;
+}

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

@@ -14,7 +14,7 @@
   font-family: var(--font-family-primary);
   font-weight: map.get($font-weight, light);
   font-size: map.get($font-size, default);
-  width: 35rem;
+  width: 25rem;
   max-height: 25rem;
   overflow-y: auto;
 }
@@ -77,7 +77,7 @@ hr {
 
 .deal-name {
   text-decoration: underline;
-  width: 24rem !important;
+  width: 20rem !important;
   color: map.get($color, light) !important;
   font-weight: map.get($font-weight, bold);
   text-overflow: ellipsis;
@@ -87,7 +87,7 @@ hr {
 }
 .deal-key {
   display: flex;
-  gap: 20px;
+  gap: 15px;
   justify-content: end;
 }
 .status-circle {
@@ -96,6 +96,7 @@ hr {
   height: 10px;
   border-radius: 50%;
   margin-right: 10px;
+
   &.active {
     background-color: green;
   }

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

@@ -1,11 +1,17 @@
-<nb-layout>
-  <nb-layout-header fixed>
-    <div class="icon-wrapper">
-      <nb-icon class="icon" icon="fit_content" (click)="fitToScreen()">
-      </nb-icon>
-      <nb-icon class="icon" pack="eva" name="maximize-outline"></nb-icon>
-      <nb-icon class="icon" icon="star" (click)="zoomIn()"> </nb-icon>
-      <nb-icon class="icon" icon="heart-outline" (click)="zoomOut()"> </nb-icon>
-    </div>
-  </nb-layout-header>
-</nb-layout>
+<div class="icon-wrapper">
+  <nb-icon class="icon" icon="fit_content" (click)="fitToScreen()"> </nb-icon>
+  <nb-icon class="icon" pack="eva" name="maximize-outline"></nb-icon>
+  <nb-icon nbPrefix icon="move-outline" pack="eva" (click)="zoomIn()"></nb-icon>
+  <nb-icon
+    nbPrefix
+    icon="maximize-outline"
+    pack="eva"
+    (click)="zoomIn()"
+  ></nb-icon>
+  <nb-icon
+    nbPrefix
+    icon="minimize-outline"
+    pack="eva"
+    (click)="zoomOut()"
+  ></nb-icon>
+</div>

projects/arc-lib/src/lib/components/gantt/components/index.ts

@@ -2,3 +2,5 @@ export * from './gantt-bars/gantt-bars.component';
 export * from './gantt-column/gantt-column.component';
 export * from './gantt-header/gantt-header.component';
 export * from './gantt-tooltip/gantt-tooltip.component';
+export * from './gantt-scroll/gantt-scroll.component';
+export * from './gantt-zoombar/gantt-zoombar.component';

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

@@ -0,0 +1 @@
+<div #gantt id="gantt_here" style="width: 100%; height: 135px"></div>

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

@@ -0,0 +1,49 @@
+/* gantt.component.scss */
+
+/* Ensure the Gantt chart container takes the full width and height */
+#gantt_here {
+    width: 100%;
+    height: 600px;
+    background-color: #f5f5f5; /* Light grey background for the Gantt container */
+    border: 1px solid #ddd; /* Light border to distinguish the container */
+  }
+  
+  /* Customize Gantt chart grid */
+  .gantt_grid_scale, .gantt_grid_head_cell, .gantt_grid_data .gantt_cell {
+    background-color: #e6e6e6; /* Light grey background for grid header and cells */
+    border-color: #ccc; /* Light grey border for grid cells */
+  }
+  
+  /* Customize Gantt chart tasks */
+  .gantt_task_line {
+    background-color: #4CAF50; /* Green background for tasks */
+    border-color: #4CAF50; /* Green border for tasks */
+  }
+  
+  .gantt_task_progress {
+    background-color: #81C784; /* Lighter green for task progress */
+  }
+  
+  /* Customize Gantt chart timeline scale */
+  .gantt_scale_line {
+    background-color: #e6e6e6; /* Light grey background for timeline scale */
+    border-color: #ccc; /* Light grey border for timeline scale */
+  }
+  
+  /* Customize Gantt chart subscale */
+  .gantt_task_scale {
+    background-color: #f0f0f0; /* Slightly lighter grey for task scale */
+    border-color: #ddd; /* Light grey border for task scale */
+  }
+  
+  /* Add custom styling for weekends */
+  .gantt_task_cell.week_end {
+    background-color: #f2dede !important; /* Light red background for weekends */
+  }
+  
+  /* Add custom styling for today marker */
+  .gantt_today {
+    background-color: #ffeb3b !important; /* Yellow background for today marker */
+    opacity: 0.3; /* Semi-transparent */
+  }
+  

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

@@ -0,0 +1,22 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {TimelineComponent} from './timeline.component';
+
+describe('TimelineComponent', () => {
+  let component: TimelineComponent;
+  let fixture: ComponentFixture<TimelineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TimelineComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TimelineComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/arc-lib/src/lib/components/gantt/components/timeline/timeline.component.ts

@@ -0,0 +1,125 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  TemplateRef,
+  Type,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import {NbMenuItem} from '@nebular/theme';
+import {
+  GanttProviders,
+  GanttAdapter,
+  CustomGanttAdapter,
+  GanttService,
+  GanttRenderOptions,
+  ContextItemFilter,
+  GanttRowConfig,
+  GanttTaskValue,
+  IBarComponent,
+  IColumnComponent,
+  KebabListItem,
+  Timelines,
+  MONTHS_IN_QUARTER,
+} from '@project-lib/components/gantt';
+import {GanttScaleUnits} from '@project-lib/components/gantt/enum';
+import {Item, empData} from '@project-lib/components/gantt/model/item.model';
+import {AnyObject} from '@project-lib/core/api';
+import {BehaviorSubject, takeUntil} from 'rxjs';
+declare let gantt: any;
+@Component({
+  selector: 'arc-timeline-gantt',
+  templateUrl: './timeline.component.html',
+  styleUrls: ['./timeline.component.scss'],
+})
+export class TimelineComponent<T extends AnyObject>
+  implements AfterViewInit, GanttRenderOptions<T>
+{
+  private _data: BehaviorSubject<T[]> = new BehaviorSubject<T[]>([]);
+  @ViewChild('gantt', {static: true}) ganttContainer!: ElementRef;
+  // data for tooltip component
+  showTooltip = false;
+  selectedItem: Item;
+  infiniteScroll = false;
+  constructor(
+    private readonly ganttSvc: GanttService<AnyObject>,
+    public readonly viewContainerRef: ViewContainerRef,
+  ) {}
+  showParentInitials: boolean;
+  showChildInitials: boolean;
+  showOverallocatedIcon: boolean;
+  ngAfterViewInit(): void {
+    this.initializeGantt();
+  }
+
+  columnComponent: Type<IColumnComponent<T>>;
+  barComponent: Type<IBarComponent<T>>;
+  contextItems: NbMenuItem[];
+  contextTemplate?: TemplateRef<AnyObject>;
+  columnName?: string;
+  showKebab?: boolean;
+  columnWidth: number;
+  resizer: boolean;
+  sorting: boolean;
+  moveToToday: boolean;
+  highlightRange?: [Date, Date];
+  showNonBillableIcon: boolean;
+  contextItemFilter?: ContextItemFilter<T>;
+  defaultScale: Timelines;
+  markToday: boolean;
+  showBillingRate?: boolean;
+  groupings?: string[];
+  childIndent: boolean;
+  tooltipOffset?: number;
+  batchSize?: number;
+  searchPlaceholder?: string;
+  showSearch: boolean;
+  ganttStartDate?: Date;
+  kebabOption: (task: GanttTaskValue<T>) => KebabListItem[];
+  ganttRowConfig: GanttRowConfig;
+  private _formatWeeklyScale(date: Date) {
+    const noOfDigits = 2;
+    return `${date.toLocaleString('default', {month: 'short'})} ${date
+      .getDate()
+      .toString()
+      .padStart(noOfDigits, '0')}, ${date.toLocaleString('default', {
+      year: 'numeric',
+    })}`;
+  }
+  private _formatQuarterScale(date: Date) {
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    return `Q${Math.ceil((month + 1) / MONTHS_IN_QUARTER)} ` + year;
+  }
+  private initializeGantt(): void {
+    gantt.config.scale_unit = 'year';
+    gantt.config.date_scale = '%Y';
+    gantt.config.subscales = [
+      {
+        unit: GanttScaleUnits.Quarter,
+        step: 1,
+        format: (date: Date) => this._formatQuarterScale(date),
+      },
+      {
+        unit: GanttScaleUnits.Week,
+        step: 1,
+        format: (date: Date) => this._formatWeeklyScale(date),
+      },
+    ];
+    gantt.config.start_date = new Date();
+    gantt.config.end_date = new Date(
+      gantt.config.start_date.getFullYear() + 1,
+      0,
+      1,
+    );
+
+    gantt.config.columns = [];
+    gantt.init(this.ganttContainer.nativeElement);
+    gantt.parse({
+      data: [{}],
+    });
+  }
+}