-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
b80f391
commit f65f382
Showing
31 changed files
with
1,771 additions
and
249 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 5 additions & 1 deletion
6
...ects/arc-lib/src/lib/components/gantt/components/gantt-column/gantt-column.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...ects/arc-lib/src/lib/components/gantt/components/gantt-scroll/gantt-scroll.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 17 additions & 11 deletions
28
...ts/arc-lib/src/lib/components/gantt/components/gantt-zoombar/gantt-zoombar.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
projects/arc-lib/src/lib/components/gantt/components/timeline/timeline.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <div #gantt id="gantt_here" style="width: 100%; height: 135px"></div> |
49 changes: 49 additions & 0 deletions
49
projects/arc-lib/src/lib/components/gantt/components/timeline/timeline.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 */ | ||
| } | ||
|
|
22 changes: 22 additions & 0 deletions
22
projects/arc-lib/src/lib/components/gantt/components/timeline/timeline.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
125 changes: 125 additions & 0 deletions
125
projects/arc-lib/src/lib/components/gantt/components/timeline/timeline.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: [{}], | ||
| }); | ||
| } | ||
| } |
Oops, something went wrong.