feat: support week view and add test(#INFR-1996) (#113)

* fix: remove console.log

* fix: fix review code(#INFR-1996)

* fix: fix test erro

* feat: fix test

* fix(view): fix week view cellWidth

Co-authored-by: zhangwen <1062680993@qq.com>

example/src/app/gantt/gantt.component.html

@@ -3,6 +3,7 @@
     <span class="header-section-title">视图：</span>
     <span class="header-section-content">
       <input id="day" type="radio" value="day" name="view-type" [(ngModel)]="options.viewType" /> <label for="day">日</label>
+      <input id="week" type="radio" value="week" name="view-type" [(ngModel)]="options.viewType" /> <label for="week">周</label>
       <input id="month" type="radio" value="month" name="view-type" [(ngModel)]="options.viewType" /> <label for="month">月</label>
       <input id="quarter" type="radio" value="quarter" name="view-type" [(ngModel)]="options.viewType" /> <label for="quarter">季度</label>
     </span>

packages/gantt/src/class/view-type.ts

@@ -2,5 +2,6 @@ export enum GanttViewType {
     day = 'day',
     quarter = 'quarter',
     month = 'month',
-    year = 'year'
+    year = 'year',
+    week = 'week'
 }

packages/gantt/src/views/factory.ts

@@ -4,11 +4,14 @@ import { GanttDate } from '../utils/date';
 import { GanttViewType } from '../class/view-type';
 import { GanttViewQuarter } from './quarter';
 import { GanttViewDay } from './day';
+import { GanttViewWeek } from './week';
 
 export function createViewFactory(type: GanttViewType, start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
     switch (type) {
         case GanttViewType.month:
             return new GanttViewMonth(start, end, options);
+        case GanttViewType.week:
+            return new GanttViewWeek(start, end, options);
         case GanttViewType.quarter:
             return new GanttViewQuarter(start, end, options);
         case GanttViewType.day:

packages/gantt/src/views/test/factory.spec.ts

@@ -4,13 +4,19 @@ import { GanttViewQuarter } from '../quarter';
 import { createViewFactory } from '../factory';
 import { GanttViewType } from '../../class';
 import { date } from './mock';
+import { GanttViewWeek } from '../week';
 
 describe('CreateViewFactory', () => {
     it(`should be day view`, () => {
         const dayView = createViewFactory(GanttViewType.day, date.start, date.end);
         expect(dayView).toEqual(jasmine.any(GanttViewDay));
     });
 
+    it(`should be week view`, () => {
+        const weekView = createViewFactory(GanttViewType.week, date.start, date.end);
+        expect(weekView).toEqual(jasmine.any(GanttViewWeek));
+    });
+
     it(`should be month view`, () => {
         const monthView = createViewFactory(GanttViewType.month, date.start, date.end);
         expect(monthView).toEqual(jasmine.any(GanttViewMonth));

packages/gantt/src/views/test/week.spec.ts

@@ -0,0 +1,45 @@
+import { GanttDate } from '../../utils/date';
+import { GanttViewWeek } from '../week';
+import { date, today } from './mock';
+
+describe('GanttViewWeek', () => {
+    let ganttViewWeek: GanttViewWeek;
+
+    beforeEach(() => {
+        ganttViewWeek = new GanttViewWeek(date.start, date.end, {
+            cellWidth: 140,
+            start: today.startOfYear().startOfWeek({ weekStartsOn: 1 }),
+            end: today.endOfYear().endOfWeek({ weekStartsOn: 1 })
+        });
+    });
+
+    it(`should has correct view start`, () => {
+        const startOfWeek = ganttViewWeek.startOf(date.start.date).getUnixTime();
+        expect(startOfWeek).toEqual(new GanttDate('2019-12-30 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfWeek = ganttViewWeek.endOf(date.end.date).getUnixTime();
+        expect(endOfWeek).toEqual(new GanttDate('2021-01-03 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const weekCellWidth = ganttViewWeek.getDayOccupancyWidth();
+        expect(weekCellWidth).toEqual(20);
+    });
+
+    it(`should has correct primary width`, () => {
+        const weekPrimaryWidth = ganttViewWeek.getPrimaryWidth();
+        expect(weekPrimaryWidth).toEqual(140);
+    });
+
+    it(`should has correct primary date points`, () => {
+        const weekPoints = ganttViewWeek.getPrimaryDatePoints();
+        expect(weekPoints.length).toBe(54);
+    });
+
+    it(`should has correct secondary date points`, () => {
+        const weekPoints = ganttViewWeek.getSecondaryDatePoints();
+        expect(weekPoints.length).toBe(54);
+    });
+});

packages/gantt/src/views/view.ts

@@ -171,6 +171,9 @@ export abstract class GanttView {
             return matchDate?.start;
         } else {
             const day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
+            if (this.getCellWidth() / dayWidth === 7) {
+                return matchDate?.start.addDays(day);
+            }
             return matchDate?.start.setDate(day);
         }
     }

packages/gantt/src/views/week.ts

@@ -0,0 +1,66 @@
+import { GanttDatePoint } from '../class/date-point';
+import { eachWeekOfInterval, GanttDate } from '../utils/date';
+import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } from './view';
+
+const viewOptions: GanttViewOptions = {
+    cellWidth: 280,
+    start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
+    end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
+    addAmount: 1,
+    addUnit: 'month'
+};
+
+export class GanttViewWeek extends GanttView {
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, Object.assign({}, viewOptions, options));
+    }
+
+    startOf(date: GanttDate) {
+        return date.startOfWeek({ weekStartsOn: 1 });
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfWeek({ weekStartsOn: 1 });
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth();
+    }
+
+    getDayOccupancyWidth(): number {
+        return this.cellWidth / 7;
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < weeks.length; i++) {
+            const weekStart = new GanttDate(weeks[i]);
+            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
+            const point = new GanttDatePoint(
+                weekStart,
+                weekStart.addWeeks(increaseWeek).format('yyyy年'),
+                this.getCellWidth() / 2 + i * this.getCellWidth(),
+                primaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.value });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < weeks.length; i++) {
+            const start = new GanttDate(weeks[i]);
+            const point = new GanttDatePoint(
+                start,
+                `第${start.format('w')}周`,
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                secondaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}