File tree Expand file tree Collapse file tree 9 files changed +58
-25
lines changed
arc-lib/src/lib/components/gantt/components Expand file tree Collapse file tree 9 files changed +58
-25
lines changed Original file line number Diff line number Diff line change 16
16
class ="bar actual-bar "
17
17
[class.with-suballocations] ="hasSubAllocation(item) "
18
18
[class.closed-won] ="item.payload?.['dealStage'] === 'closedwon' "
19
+ [attr.gantt-tooltip-data] ="'abc' "
20
+ gantt-hover ="tooltip "
19
21
[ngClass] ="item.classes ?? [] "
20
22
data-gantt-click ="bar "
21
23
>
32
34
{{ formatter(item.payload?.['billingRate']) }}
33
35
</ div >
34
36
< div *ngIf ="hasSubAllocation(item) " class ="bar-container ">
35
- < ng-container *ngFor ="let allocationBar of item.subAllocations ">
37
+ < ng-container
38
+ *ngFor ="let allocationBar of item.subAllocations; let i = index "
39
+ >
36
40
< div
37
41
class ="suballocation-bars "
38
42
[attr.gantt-bar-data] ="stringify(allocationBar) "
41
45
[ngStyle] ="{width: allocationBar.percent + '%'} "
42
46
[class.empty] ="!allocationBar.allocation "
43
47
[class.over-allocated] ="allocationBar.allocation > allocationBase "
48
+ (mouseover) ="showTooltip = i "
49
+ (mouseout) ="showTooltip = -1 "
44
50
>
51
+ < div class ="showTooltip-wrapper ">
52
+ < arc-gantt-tooltip
53
+ *ngIf ="i == showTooltip "
54
+ [itemData] ="allocationBar "
55
+ > </ arc-gantt-tooltip >
56
+ </ div >
45
57
< div class ="actual-hours ">
46
58
{{
47
59
formatAllocation(
Original file line number Diff line number Diff line change 12
12
margin-right : 0.75rem ;
13
13
}
14
14
15
+ .bar {
16
+ position : relative ;
17
+ .showTooltip-wrapper {
18
+ position : absolute ;
19
+ top : 2rem ;
20
+ }
21
+ }
22
+
15
23
.bar-container {
16
24
display : flex ;
17
25
flex-grow : 1 ;
18
26
background : white ;
19
27
}
20
-
28
+ .showTooltip-wrapper {
29
+ position : absolute ;
30
+ }
21
31
.bar {
22
32
font-family : var (--font-family-primary );
23
33
font-weight : map .get ($font-weight , bold );
Original file line number Diff line number Diff line change @@ -10,6 +10,7 @@ export class GanttBarsComponent {
10
10
@Input ( ) item : Item ;
11
11
@Input ( ) allocationTypes : any ;
12
12
@Input ( ) allocationBase : number ;
13
+ showTooltip = - 1 ;
13
14
14
15
formatAllocation ( value : number ) : string {
15
16
return `${ value } hours` ;
Original file line number Diff line number Diff line change 1
1
< div class ="header-wrapper ">
2
- < h2 class ="project-title "> {{ name }}</ h2 >
2
+ < div class ="title-wrapper ">
3
+ < h2 class ="project-title "> {{ name }}</ h2 >
4
+ < div class ="desc-wrapper " *ngIf ="desc ">
5
+ < p > Description is enabled.</ p >
6
+ </ div >
7
+ </ div >
8
+
3
9
< nb-card >
4
10
< nb-card-body >
5
11
< div class ="search-wrapper " *ngIf ="showSearch ">
6
12
< input
7
13
nbInput
8
- fullWidth
9
14
fieldSize ="medium "
10
15
type ="text "
11
16
status ="basic "
@@ -14,8 +19,4 @@ <h2 class="project-title">{{ name }}</h2>
14
19
</ div >
15
20
</ nb-card-body >
16
21
</ nb-card >
17
-
18
- < div *ngIf ="desc ">
19
- < p > Description is enabled.</ p >
20
- </ div >
21
22
</ div >
Original file line number Diff line number Diff line change 51
51
nb-form-field nb-icon {
52
52
color : map .get ($color , icon );
53
53
}
54
-
55
-
56
54
}
55
+
57
56
.header-wrapper {
58
57
display : flex ;
59
- align-items : center ;
60
- gap : 20 px ;
58
+ justify-content : space-between ;
59
+ width : calc ( 100 vw - 1 rem ) ;
61
60
}
62
61
63
- .project-title {
62
+ .project-title {
64
63
font-size : x-large ;
65
- }
64
+ margin-bottom : -2px ;
65
+ }
66
+
67
+ .desc-wrapper {
68
+ margin-top : -8px ;
69
+ }
70
+
71
+ .search-wrapper {
72
+ margin-top : 32px ;
73
+ }
Original file line number Diff line number Diff line change @@ -38,7 +38,6 @@ import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
38
38
ThemeModule . forRoot ( 'default' ) ,
39
39
OverlayModule ,
40
40
SelectModule ,
41
-
42
41
GanttModule ,
43
42
BrowserAnimationsModule ,
44
43
HeaderComponent ,
@@ -52,7 +51,6 @@ import {GanttDemoComponent} from './components/gantt-demo/gantt-demo.component';
52
51
SystemStoreFacadeService ,
53
52
EnvAdapterService ,
54
53
ApiService ,
55
- GanttService ,
56
54
{
57
55
provide : APP_CONFIG ,
58
56
useValue : environment ,
Original file line number Diff line number Diff line change 22
22
</ div >
23
23
</ nb-sidebar >
24
24
< nb-layout-column >
25
- < nb-card >
26
- < nb-card-header > </ nb-card-header >
25
+ < nb-card class ="bar-wrapper ">
27
26
< nb-card-body >
28
27
< arc-gantt-bars
29
28
[item] ="item "
30
29
[allocationTypes] ="allocationTypes "
31
30
[allocationBase] ="allocationBase "
31
+ showTooltip ="true "
32
32
> </ arc-gantt-bars >
33
33
</ nb-card-body >
34
34
</ nb-card >
35
35
</ nb-layout-column >
36
-
37
- < arc-gantt-tooltip [item] ="selectedItem "> </ arc-gantt-tooltip >
38
36
</ nb-layout >
37
+
38
+ < arc-gantt-tooltip [itemData] ="itemData " [allocationMap] ="allocationMap ">
39
+ </ arc-gantt-tooltip >
Original file line number Diff line number Diff line change
1
+ .bar-wrapper {
2
+ height : calc (100% - 1rem );
3
+ }
Original file line number Diff line number Diff line change 1
- import { ComponentFixture , TestBed } from '@angular/core/testing' ;
1
+ import { ComponentFixture , TestBed } from '@angular/core/testing' ;
2
2
3
- import { GanttDemoComponent } from './gantt-demo.component' ;
3
+ import { GanttDemoComponent } from './gantt-demo.component' ;
4
4
5
5
describe ( 'GanttDemoComponent' , ( ) => {
6
6
let component : GanttDemoComponent ;
7
7
let fixture : ComponentFixture < GanttDemoComponent > ;
8
8
9
9
beforeEach ( async ( ) => {
10
10
await TestBed . configureTestingModule ( {
11
- declarations : [ GanttDemoComponent ]
12
- } )
13
- . compileComponents ( ) ;
11
+ declarations : [ GanttDemoComponent ] ,
12
+ } ) . compileComponents ( ) ;
14
13
15
14
fixture = TestBed . createComponent ( GanttDemoComponent ) ;
16
15
component = fixture . componentInstance ;
You can’t perform that action at this time.
0 commit comments