Skip to content

Commit b58c99d

Browse files
HandsomeButterballHandsomeButterball
committed
feat: custom view support fill color for date #TINFR-2600
1 parent 351b5ef commit b58c99d

File tree

10 files changed

+82
-64
lines changed

10 files changed

+82
-64
lines changed

‎example/src/app/gantt-custom-view/custom-day-view.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,14 @@ import {
1212

1313
const viewOptions: GanttViewOptions = {
1414
cellWidth: 50,
15-
start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
16-
end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
15+
start: new GanttDate().startOfMonth().startOfWeek({ weekStartsOn: 1 }),
16+
end: new GanttDate().endOfMonth().endOfWeek({ weekStartsOn: 1 }),
1717
addAmount: 1,
1818
addUnit: 'month',
1919
fillDays: 1
2020
};
2121

2222
export class GanttViewCustom extends GanttView {
23-
override showWeekBackdrop = true;
24-
2523
override showTimeline = true;
2624

2725
override viewType = GanttViewType.day;
@@ -80,6 +78,7 @@ export class GanttViewCustom extends GanttView {
8078
);
8179
if (isWeekend) {
8280
point.style = { fill: '#ff9f73' };
81+
point.fill = '#f5f5f5';
8382
}
8483
if (start.isToday()) {
8584
point.style = { fill: '#ff9f73' };
@@ -115,6 +114,7 @@ export class GanttViewCustom extends GanttView {
115114
);
116115
if (isWeekend) {
117116
point.style = { fill: '#ff9f73' };
117+
point.fill = '#f5f5f5';
118118
}
119119
if (start.isToday()) {
120120
point.style = { fill: '#ff9f73' };

‎packages/gantt/src/class/date-point.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export class GanttDatePoint {
1010
isWeekend: boolean;
1111
isToday: boolean;
1212
},
13-
public style?: Partial<CSSStyleDeclaration>
13+
public style?: Partial<CSSStyleDeclaration>,
14+
// set fill color
15+
public fill?: string
1416
) {}
1517
}

‎packages/gantt/src/components/calendar/calendar.scss‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@
77

88
svg {
99
position: relative;
10-
z-index: 2;
1110
background-color: variables.$gantt-bg-color;
12-
overflow: visible;
1311
}
1412
line {
1513
shape-rendering: crispEdges;
@@ -75,9 +73,16 @@
7573
.gantt-calendar-grid {
7674
position: absolute;
7775
width: 100%;
78-
.gantt-calendar-grid-main {
76+
svg {
7977
background-color: transparent;
8078
}
79+
.gantt-calendar-grid-fill {
80+
position: absolute;
81+
top: 0;
82+
}
83+
.gantt-calendar-grid-main {
84+
z-index: 2;
85+
}
8186

8287
.secondary-line {
8388
stroke-dasharray: 2px 5px;

‎packages/gantt/src/components/calendar/grid/calendar-grid.component.html‎

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,42 @@
11
<div class="gantt-calendar-today-overlay" [style.width.px]="view.width">
22
@if (ganttUpper.showTodayLine) {
3-
<span class="today-line"> </span>
3+
<span class="today-line"> </span>
44
}
55
</div>
6+
<svg class="gantt-calendar-grid-fill" [attr.width]="view.width" [attr.height]="1">
7+
<g>
8+
@for (point of view.secondaryDatePoints; track point.x) {
9+
@if (point.fill) {
10+
<rect [attr.x]="$index * view.cellWidth" y="0" [attr.width]="view.cellWidth" [attr.height]="mainHeight" [attr.fill]="point.fill" />
11+
}
12+
}
13+
</g>
14+
</svg>
615

716
<svg class="gantt-calendar-grid-main" [attr.width]="view.width" [attr.height]="ganttUpper.styles.headerHeight - 1">
817
<g>
918
@if (view.showTimeline) {
10-
<g>
11-
@for (point of view.secondaryDatePoints; track point.x) {
12-
<line
13-
[attr.x1]="($index + 1) * view.cellWidth"
14-
[attr.x2]="($index + 1) * view.cellWidth"
15-
[attr.y1]="0"
16-
[attr.y2]="mainHeight"
17-
class="secondary-line"
18-
></line>
19-
}
20-
</g>
19+
<g>
20+
@for (point of view.secondaryDatePoints; track point.x) {
21+
<line
22+
[attr.x1]="($index + 1) * view.cellWidth"
23+
[attr.x2]="($index + 1) * view.cellWidth"
24+
[attr.y1]="0"
25+
[attr.y2]="mainHeight"
26+
class="secondary-line"
27+
></line>
28+
}
29+
</g>
2130
}
2231
<g>
2332
@for (point of view.primaryDatePoints; track point.x) {
24-
<line
25-
[attr.x1]="($index + 1) * view.primaryWidth"
26-
[attr.x2]="($index + 1) * view.primaryWidth"
27-
[attr.y1]="0"
28-
[attr.y2]="mainHeight"
29-
class="primary-line"
30-
></line>
33+
<line
34+
[attr.x1]="($index + 1) * view.primaryWidth"
35+
[attr.x2]="($index + 1) * view.primaryWidth"
36+
[attr.y1]="0"
37+
[attr.y2]="mainHeight"
38+
class="primary-line"
39+
></line>
3140
}
3241
</g>
3342
</g>

‎packages/gantt/src/components/calendar/header/calendar-header.component.html‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,50 @@
33
</div>
44
<svg [attr.width]="view.width" [attr.height]="ganttUpper.styles.headerHeight">
55
<g>
6+
@for (point of view.secondaryDatePoints; track point.x) {
7+
@if (point.fill) {
8+
<rect
9+
[attr.x]="$index * view.cellWidth"
10+
y="0"
11+
[attr.width]="view.cellWidth"
12+
[attr.height]="ganttUpper.styles.headerHeight"
13+
[attr.fill]="point.fill"
14+
/>
15+
}
16+
<text
17+
class="secondary-text"
18+
[ngStyle]="point.style"
19+
[class.today]="point.additions?.isToday"
20+
[class.weekend]="point.additions?.isWeekend"
21+
[attr.x]="point.x"
22+
[attr.y]="point.y"
23+
>
24+
{{ point.text }}
25+
</text>
26+
}
27+
628
@for (point of view.primaryDatePoints; track point.x) {
7-
<text
8-
class="primary-text"
9-
[ngStyle]="point.style"
10-
[class.today]="point.additions?.isToday"
11-
[class.weekend]="point.additions?.isWeekend"
12-
[attr.x]="point.x"
13-
[attr.y]="point.y"
14-
>
15-
{{ point.text }}
16-
</text>
17-
} @for (point of view.secondaryDatePoints; track point.x) {
18-
<text
19-
class="secondary-text"
20-
[ngStyle]="point.style"
21-
[class.today]="point.additions?.isToday"
22-
[class.weekend]="point.additions?.isWeekend"
23-
[attr.x]="point.x"
24-
[attr.y]="point.y"
25-
>
26-
{{ point.text }}
27-
</text>
29+
<text
30+
class="primary-text"
31+
[ngStyle]="point.style"
32+
[class.today]="point.additions?.isToday"
33+
[class.weekend]="point.additions?.isWeekend"
34+
[attr.x]="point.x"
35+
[attr.y]="point.y"
36+
>
37+
{{ point.text }}
38+
</text>
2839
}
2940

3041
<g>
3142
@for (point of view.primaryDatePoints; track point.x) {
32-
<line
33-
[attr.x1]="($index + 1) * view.primaryWidth"
34-
[attr.x2]="($index + 1) * view.primaryWidth"
35-
[attr.y1]="0"
36-
[attr.y2]="ganttUpper.styles.headerHeight"
37-
class="primary-line"
38-
></line>
43+
<line
44+
[attr.x1]="($index + 1) * view.primaryWidth"
45+
[attr.x2]="($index + 1) * view.primaryWidth"
46+
[attr.y1]="0"
47+
[attr.y2]="ganttUpper.styles.headerHeight"
48+
class="primary-line"
49+
></line>
3950
}
4051
</g>
4152

‎packages/gantt/src/gantt.component.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@
9292
left: 0;
9393
right: 0;
9494
overflow: auto;
95-
background-color: variables.$gantt-container-background-color;
9695

9796
.gantt-main-groups,
9897
.gantt-main-items {

‎packages/gantt/src/test/views/custom-view.mock.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ const viewOptions: GanttViewOptions = {
1919
};
2020

2121
export class GanttViewCustom extends GanttView {
22-
override showWeekBackdrop = true;
23-
2422
override showTimeline = true;
2523

2624
override viewType = GanttViewType.day;

‎packages/gantt/src/views/day.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ const viewOptions: GanttViewOptions = {
1414
};
1515

1616
export class GanttViewDay extends GanttView {
17-
override showWeekBackdrop = true;
18-
1917
override showTimeline = false;
2018

2119
override viewType = GanttViewType.day;

‎packages/gantt/src/views/hour.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ const viewOptions: GanttViewOptions = {
1616
};
1717

1818
export class GanttViewHour extends GanttView {
19-
override showWeekBackdrop = true;
20-
2119
override showTimeline = true;
2220

2321
override viewType = GanttViewType.hour;

‎packages/gantt/src/views/view.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,6 @@ export abstract class GanttView {
6666

6767
showTimeline = true;
6868

69-
showWeekBackdrop: boolean;
70-
7169
options: GanttViewOptions;
7270

7371
dateFormats: {

0 commit comments

Comments
 (0)