feat: add showTodayLine in view option (#45)

worktile · Jul 18, 2020 · 4ed8c3b · 4ed8c3b
1 parent f432a60
commit 4ed8c3b
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 13 deletions.
diff --git a/packages/gantt/src/class/date-point.ts b/packages/gantt/src/class/date-point.ts
@@ -8,6 +8,7 @@ export class GanttDatePoint {
         public y: number,
         public additions?: {
             isWeekend: boolean;
+            isToday: boolean;
         }
     ) {}
 }
diff --git a/packages/gantt/src/components/calendar/calendar.component.html b/packages/gantt/src/components/calendar/calendar.component.html
@@ -1,4 +1,4 @@
-<div class="gantt-calendar-today-overlay">
+<div class="gantt-calendar-today-overlay" *ngIf="ganttUpper.showTodayLine">
   <svg [attr.width]="view.width" height="1">
     <g>
       <polygon class="today-line-angle" />
@@ -15,6 +15,7 @@
       *ngFor="let point of view.secondaryDatePoints; trackBy: trackBy"
       class="secondary-text"
       [class.secondary-text-weekend]="point.additions?.isWeekend"
+      [class.secondary-text-today]="point.additions?.isToday"
       [attr.x]="point.x"
       [attr.y]="point.y"
     >

diff --git a/packages/gantt/src/components/calendar/calendar.component.scss b/packages/gantt/src/components/calendar/calendar.component.scss
@@ -39,6 +39,9 @@
     &-weekend {
       fill: $gantt-date-secondary-weekend-color;
     }
+    &-today {
+      fill: $gantt-date-today-color;
+    }
   }
 
   .primary-text,

diff --git a/packages/gantt/src/components/calendar/calendar.component.ts b/packages/gantt/src/components/calendar/calendar.component.ts
@@ -40,7 +40,7 @@ export class GanttCalendarComponent implements OnInit, AfterViewInit, OnChanges,
     @HostBinding('class.gantt-calendar-overlay') className = true;
 
     constructor(
-        @Inject(GANTT_UPPER_TOKEN) private ganttUpper: GanttUpper,
+        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
         private cdr: ChangeDetectorRef,
         private ngZone: NgZone,
         private dom: GanttDomService,

diff --git a/packages/gantt/src/gantt-upper.ts b/packages/gantt/src/gantt-upper.ts
@@ -42,6 +42,8 @@ export abstract class GanttUpper {
 
     @Input() end: number;
 
+    @Input() showTodayLine = true;
+
     @Input() draggable: boolean;
 
     @Input() styles: GanttStyles;
@@ -92,7 +94,6 @@ export abstract class GanttUpper {
 
     private expandedItemIds: string[] = [];
 
-
     @HostBinding('class.gantt') ganttClass = true;
 
     constructor(protected elementRef: ElementRef<HTMLElement>, protected cdr: ChangeDetectorRef, protected ngZone: NgZone) {}

diff --git a/packages/gantt/src/utils/date.ts b/packages/gantt/src/utils/date.ts
@@ -24,7 +24,8 @@ import {
     addHours,
     differenceInCalendarDays,
     isWeekend,
-    getWeek
+    getWeek,
+    isToday
 } from 'date-fns';
 
 export * from 'date-fns';
@@ -226,4 +227,8 @@ export class GanttDate {
     isWeekend() {
         return isWeekend(this.value);
     }
+
+    isToday() {
+        return isToday(this.value);
+    }
 }
diff --git a/packages/gantt/src/views/day.ts b/packages/gantt/src/views/day.ts
@@ -2,13 +2,12 @@ import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop
 import { GanttDate, eachWeekOfInterval, eachDayOfInterval } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 
-
 const viewOptions: GanttViewOptions = {
     cellWidth: 35,
     start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
     end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
     addAmount: 1,
-    addUnit: 'month',
+    addUnit: 'month'
 };
 
 export class GanttViewDay extends GanttView {
@@ -17,7 +16,7 @@ export class GanttViewDay extends GanttView {
     showTimeline = false;
 
     constructor(start: GanttDate, end: GanttDate, options?: GanttViewOptions) {
-        super(start, end, Object.assign(viewOptions, options));
+        super(start, end, Object.assign({}, viewOptions, options));
     }
 
     startOf(date: GanttDate) {
@@ -65,6 +64,7 @@ export class GanttViewDay extends GanttView {
                 secondaryDatePointTop,
                 {
                     isWeekend: start.isWeekend(),
+                    isToday: start.isToday()
                 }
             );
             points.push(point);

diff --git a/packages/gantt/src/views/month.ts b/packages/gantt/src/views/month.ts
@@ -2,18 +2,17 @@ import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop
 import { GanttDate, differenceInCalendarQuarters, eachMonthOfInterval } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 
-
 const viewOptions: GanttViewOptions = {
     start: new GanttDate().startOfQuarter().addQuarters(-1),
     end: new GanttDate().endOfQuarter().addQuarters(2),
     cellWidth: 280,
     addAmount: 1,
-    addUnit: 'quarter',
+    addUnit: 'quarter'
 };
 
 export class GanttViewMonth extends GanttView {
     constructor(start: GanttDate, end: GanttDate, options?: GanttViewOptions) {
-        super(start, end, Object.assign(viewOptions, options));
+        super(start, end, Object.assign({}, viewOptions, options));
     }
 
     startOf(date: GanttDate) {

diff --git a/packages/gantt/src/views/quarter.ts b/packages/gantt/src/views/quarter.ts
@@ -3,20 +3,19 @@ import { GanttDate } from '../utils/date';
 import { GanttDatePoint } from '../class/date-point';
 import { eachYearOfInterval, differenceInCalendarQuarters } from 'date-fns';
 
-
 const viewOptions: GanttViewOptions = {
     start: new GanttDate().addYears(-1).startOfYear(),
     end: new GanttDate().addYears(1).endOfYear(),
     min: new GanttDate().addYears(-2).startOfYear(),
     max: new GanttDate().addYears(2).endOfYear(),
     cellWidth: 500,
     addAmount: 1,
-    addUnit: 'year',
+    addUnit: 'year'
 };
 
 export class GanttViewQuarter extends GanttView {
     constructor(start: GanttDate, end: GanttDate, options?: GanttViewOptions) {
-        super(start, end, Object.assign(viewOptions, options));
+        super(start, end, Object.assign({}, viewOptions, options));
     }
 
     startOf(date: GanttDate) {