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

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,12 +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/week.spec.ts

@@ -0,0 +1,47 @@
+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();
+        console.log('----start----', startOfWeek);
+        expect(startOfWeek).toEqual(new GanttDate('2019-12-29 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfWeek = ganttViewWeek.endOf(date.end.date).getUnixTime();
+        console.log('----end----', endOfWeek);
+        expect(endOfWeek).toEqual(new GanttDate('2021-01-02 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const weekCellWidth = ganttViewWeek.getDayOccupancyWidth();
+        expect(weekCellWidth).toEqual(140);
+    });
+
+    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(53);
+    });
+});

packages/gantt/src/views/week.ts

@@ -0,0 +1,67 @@
+import { GanttDatePoint } from '../class/date-point';
+import { eachDayOfInterval, eachWeekOfInterval, GanttDate } from '../utils/date';
+import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } from './view';
+
+const viewOptions: GanttViewOptions = {
+    start: new GanttDate().startOfQuarter().addQuarters(-1),
+    end: new GanttDate().endOfQuarter().addQuarters(2),
+    cellWidth: 280,
+    addAmount: 1,
+    addUnit: 'week'
+};
+
+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();
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfWeek();
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth();
+    }
+
+    getDayOccupancyWidth(): number {
+        return this.cellWidth;
+    }
+
+    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年MM月'),
+                this.getCellWidth() / 2 + i * this.getCellWidth(),
+                primaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const days = eachDayOfInterval({ start: this.start.value, end: this.end.value });
+        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.getWeek()}周`,
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                secondaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}