ebff49e6-c036-45f4-a630-95c9a47890a0

Committed 08 Mar 2024 10:10AM UTC coverage: 72.282% (+0.02%) from 72.26%

Build # ebff49e6-c036-45f4-a630-95c9a47890a0

Build Type

Pull #445

circleci

Committed by

walkerkay

Commit Message

chore:  merge

Pull Request Pull Request #445: feat: add date options for supported date locale and weekStartsOn #436 #242

Run Details

355 of 612 branches covered (58.01%)

Branch coverage included in aggregate %.

16 of 16 new or added lines in 7 files covered. (100.0%)

3 existing lines in 1 file now uncovered.

1460 of 1899 relevant lines covered (76.88%)

1371.95 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

82.3

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

import { differenceInCalendarDays, differenceInDays, differenceInHours, differenceInMinutes } from 'date-fns';
import { BehaviorSubject } from 'rxjs';
import { GanttViewType } from '../class';
import { GanttDatePoint } from '../class/date-point';
import { GanttDateFormat, defaultConfig } from '../gantt.config';
import { GanttDate, GanttDateUtil } from '../utils/date';

export const primaryDatePointTop = 18;

export const secondaryDatePointTop = 36;

export interface GanttViewDate {
    date: GanttDate;
    isCustom?: boolean;
}

export interface GanttViewOptions {
    start?: GanttDate;
    end?: GanttDate;
    min?: GanttDate;
    max?: GanttDate;
    cellWidth?: number;
    addAmount?: number;
    addUnit?: GanttDateUtil;
    dateFormat?: GanttDateFormat;
    datePrecisionUnit?: 'day' | 'hour' | 'minute';
    dragPreviewDateFormat?: string;
    // custom key and value
    [key: string]: any;
}

const viewOptions: GanttViewOptions = {
    min: new GanttDate().addYears(-1).startOfYear(),
    max: new GanttDate().addYears(1).endOfYear(),
    dateFormat: defaultConfig.dateFormat,
    datePrecisionUnit: 'day',
    dragPreviewDateFormat: 'MM-dd'
};

export abstract class GanttView {
    viewType: GanttViewType;

    start$: BehaviorSubject<GanttDate>;

    end$: BehaviorSubject<GanttDate>;

    get start() {
        return this.start$.getValue();
    }

    get end() {
        return this.end$.getValue();
    }

    primaryDatePoints: GanttDatePoint[];

    secondaryDatePoints: GanttDatePoint[];

    width: number;

    cellWidth: number;

    primaryWidth: number;

    showTimeline = true;

    showWeekBackdrop: boolean;

    options: GanttViewOptions;

    constructor(start: GanttViewDate, end: GanttViewDate, options: GanttViewOptions) {
        this.options = Object.assign({}, viewOptions, options);
        const startDate = start.isCustom
            ? this.viewStartOf(start.date)
            : this.viewStartOf(start.date.value < this.options.start.value ? start.date : this.options.start);
        const endDate = end.isCustom
            ? this.viewEndOf(end.date)
            : this.viewEndOf(end.date.value > this.options.end.value ? end.date : this.options.end);
        this.start$ = new BehaviorSubject<GanttDate>(startDate);
        this.end$ = new BehaviorSubject<GanttDate>(endDate);
        this.initialize();
    }

    abstract viewStartOf(date: GanttDate): GanttDate;

    abstract viewEndOf(date: GanttDate): GanttDate;

    /**
     * deprecated, please use viewStartOf()
     * @deprecated
     */
    startOf(date: GanttDate): GanttDate {
        return this.viewStartOf(date);
    }

    /**
     * deprecated, please use viewEndOf()
     * @deprecated
     */
    endOf(date: GanttDate): GanttDate {
        return this.viewEndOf(date);
    }

    // 获取一级时间网格合并后的宽度
    abstract getPrimaryWidth(): number;

    // 获取当前视图下每一天占用的宽度
    abstract getDayOccupancyWidth(date: GanttDate): number;

    // 获取一级时间点（坐标，显示名称）
    abstract getPrimaryDatePoints(): GanttDatePoint[];

    // 获取二级时间点（坐标，显示名称）
    abstract getSecondaryDatePoints(): GanttDatePoint[];

    startOfPrecision(date: GanttDate) {
        switch (this.options.datePrecisionUnit) {
            case 'minute':
                return date.startOfMinute();
            case 'hour':
                return date.startOfHour();
            default:
                return date.startOfDay();
        }
    }

    endOfPrecision(date: GanttDate) {
        switch (this.options.datePrecisionUnit) {
            case 'minute':
                return date.endOfMinute();
            case 'hour':
                return date.endOfHour();
            default:
                return date.endOfDay();
        }
    }

    differenceByPrecisionUnit(dateLeft: GanttDate, dateRight: GanttDate) {
        switch (this.options.datePrecisionUnit) {
            case 'minute':
                return differenceInMinutes(dateLeft.value, dateRight.value);
            case 'hour':
                return differenceInHours(dateLeft.value, dateRight.value);
            default:
                return differenceInCalendarDays(dateLeft.value, dateRight.value);
        }
    }

    getDateIntervalWidth(start: GanttDate, end: GanttDate) {
        let result = 0;
        const days = differenceInDays(end.value, start.value);
        for (let i = 0; i < Math.abs(days); i++) {
            result += this.getDayOccupancyWidth(start.addDays(i));
        }
        result = days >= 0 ? result : -result;
        return Number(result.toFixed(3));
    }

    protected initialize() {
        this.primaryDatePoints = this.getPrimaryDatePoints();
        this.secondaryDatePoints = this.getSecondaryDatePoints();
        this.width = this.getWidth();
        this.cellWidth = this.getCellWidth();
        this.primaryWidth = this.getPrimaryWidth();
    }

    addStartDate() {
        const start = this.viewStartOf(this.start.add(this.options.addAmount * -1, this.options.addUnit));
        if (start.value >= this.options.min.value) {
            const origin = this.start;
            this.start$.next(start);
            this.initialize();
            return { start: this.start, end: origin };
        }
        return null;
    }

    addEndDate() {
        const end = this.viewEndOf(this.end.add(this.options.addAmount, this.options.addUnit));
        if (end.value <= this.options.max.value) {
            const origin = this.end;
            this.end$.next(end);
            this.initialize();
            return { start: origin, end: this.end };
        }
        return null;
    }

    updateDate(start: GanttDate, end: GanttDate) {
        start = this.viewStartOf(start);
        end = this.viewEndOf(end);
        if (start.value < this.start.value) {
            this.start$.next(start);
        }
        if (end.value > this.end.value) {
            this.end$.next(end);
        }
        this.initialize();
    }

    // 获取View的宽度
    getWidth() {
        return this.getCellWidth() * this.secondaryDatePoints.length;
    }

    // 获取单个网格的宽度
    getCellWidth() {
        return this.options.cellWidth;
    }

    // 获取当前时间的X坐标
    getTodayXPoint(): number {
        const toady = new GanttDate().startOfDay();
        if (toady.value > this.start.value && toady.value < this.end.value) {
            const x = this.getXPointByDate(toady) + this.getDayOccupancyWidth(toady) / 2;
            return x;
        } else {
            return null;
        }
    }

    // 获取指定时间的X坐标
    getXPointByDate(date: GanttDate) {
        return this.getDateIntervalWidth(this.start, date);
    }

    // 根据X坐标获取对应时间
    getDateByXPoint(x: number) {
        const indexOfSecondaryDate = Math.max(Math.floor(x / this.getCellWidth()), 0);
        const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];
        const dayWidth = this.getDayOccupancyWidth(matchDate?.start);
        if (dayWidth === this.getCellWidth()) {
            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);
        }
    }

    // 获取指定时间范围的宽度
    getDateRangeWidth(start: GanttDate, end: GanttDate) {
        // addSeconds(1) 是因为计算相差天会以一个整天来计算 end时间一般是59分59秒不是一个整天，所以需要加1
        return this.getDateIntervalWidth(this.startOfPrecision(start), this.endOfPrecision(end).addSeconds(1));
    }

    // 根据日期精度获取最小时间范围的宽度
    getMinRangeWidthByPrecisionUnit(date: GanttDate) {
        switch (this.options.datePrecisionUnit) {
            case 'minute':
                return this.getDayOccupancyWidth(date) / 24 / 60;
            case 'hour':
                return this.getDayOccupancyWidth(date) / 24;
            default:
                return this.getDayOccupancyWidth(date);
        }
    }
}

1	import { differenceInCalendarDays, differenceInDays, differenceInHours, differenceInMinutes } from 'date-fns';
2	import { BehaviorSubject } from 'rxjs';
3	import { GanttViewType } from '../class';
4	import { GanttDatePoint } from '../class/date-point';
5	import { GanttDateFormat, defaultConfig } from '../gantt.config';
6	import { GanttDate, GanttDateUtil } from '../utils/date';
7
8	export const primaryDatePointTop = 18;	1✔
9
10	export const secondaryDatePointTop = 36;	1✔
11
12	export interface GanttViewDate {
13	date: GanttDate;
14	isCustom?: boolean;
15	}
16
17	export interface GanttViewOptions {
18	start?: GanttDate;
19	end?: GanttDate;
20	min?: GanttDate;
21	max?: GanttDate;
22	cellWidth?: number;
23	addAmount?: number;
24	addUnit?: GanttDateUtil;
25	dateFormat?: GanttDateFormat;
26	datePrecisionUnit?: 'day' \| 'hour' \| 'minute';
27	dragPreviewDateFormat?: string;
28	// custom key and value
29	[key: string]: any;
30	}
31
32	const viewOptions: GanttViewOptions = {	1✔
33	min: new GanttDate().addYears(-1).startOfYear(),
34	max: new GanttDate().addYears(1).endOfYear(),
35	dateFormat: defaultConfig.dateFormat,
36	datePrecisionUnit: 'day',
37	dragPreviewDateFormat: 'MM-dd'
38	};
39
40	export abstract class GanttView {
41	viewType: GanttViewType;
42
43	start$: BehaviorSubject<GanttDate>;
44
45	end$: BehaviorSubject<GanttDate>;
46
47	get start() {
48	return this.start$.getValue();	4,120✔
49	}
50
51	get end() {
52	return this.end$.getValue();	335✔
53	}
54
55	primaryDatePoints: GanttDatePoint[];
56
57	secondaryDatePoints: GanttDatePoint[];
58
59	width: number;
60
61	cellWidth: number;
62
63	primaryWidth: number;
64
65	showTimeline = true;	115✔
66
67	showWeekBackdrop: boolean;
68
69	options: GanttViewOptions;
70
71	constructor(start: GanttViewDate, end: GanttViewDate, options: GanttViewOptions) {
72	this.options = Object.assign({}, viewOptions, options);	115✔
73	const startDate = start.isCustom	115✔
74	? this.viewStartOf(start.date)
75	: this.viewStartOf(start.date.value < this.options.start.value ? start.date : this.options.start);	38!
76	const endDate = end.isCustom	115✔
77	? this.viewEndOf(end.date)
78	: this.viewEndOf(end.date.value > this.options.end.value ? end.date : this.options.end);	38!
79	this.start$ = new BehaviorSubject<GanttDate>(startDate);	115✔
80	this.end$ = new BehaviorSubject<GanttDate>(endDate);	115✔
81	this.initialize();	115✔
82	}
83
84	abstract viewStartOf(date: GanttDate): GanttDate;
85
86	abstract viewEndOf(date: GanttDate): GanttDate;
87
88	/**
89	* deprecated, please use viewStartOf()
90	* @deprecated
91	*/
92	startOf(date: GanttDate): GanttDate {
93	return this.viewStartOf(date);	×
94	}
95
96	/**
97	* deprecated, please use viewEndOf()
98	* @deprecated
99	*/
100	endOf(date: GanttDate): GanttDate {
101	return this.viewEndOf(date);	×
102	}
103
104	// 获取一级时间网格合并后的宽度
105	abstract getPrimaryWidth(): number;
106
107	// 获取当前视图下每一天占用的宽度
108	abstract getDayOccupancyWidth(date: GanttDate): number;
109
110	// 获取一级时间点（坐标，显示名称）
111	abstract getPrimaryDatePoints(): GanttDatePoint[];
112
113	// 获取二级时间点（坐标，显示名称）
114	abstract getSecondaryDatePoints(): GanttDatePoint[];
115
116	startOfPrecision(date: GanttDate) {
117	switch (this.options.datePrecisionUnit) {	795✔
118	case 'minute':
119	return date.startOfMinute();	1✔
120	case 'hour':
121	return date.startOfHour();	1✔
122	default:
123	return date.startOfDay();	793✔
124	}
125	}
126
127	endOfPrecision(date: GanttDate) {
128	switch (this.options.datePrecisionUnit) {	795✔
129	case 'minute':
130	return date.endOfMinute();	1✔
131	case 'hour':
132	return date.endOfHour();	1✔
133	default:
134	return date.endOfDay();	793✔
135	}
136	}
137
138	differenceByPrecisionUnit(dateLeft: GanttDate, dateRight: GanttDate) {
139	switch (this.options.datePrecisionUnit) {	5✔
140	case 'minute':
141	return differenceInMinutes(dateLeft.value, dateRight.value);	1✔
142	case 'hour':
143	return differenceInHours(dateLeft.value, dateRight.value);	1✔
144	default:
145	return differenceInCalendarDays(dateLeft.value, dateRight.value);	3✔
146	}
147	}
148
149	getDateIntervalWidth(start: GanttDate, end: GanttDate) {
150	let result = 0;	1,845✔
151	const days = differenceInDays(end.value, start.value);	1,845✔
152	for (let i = 0; i < Math.abs(days); i++) {	1,845✔
153	result += this.getDayOccupancyWidth(start.addDays(i));	190,510✔
154	}
155	result = days >= 0 ? result : -result;	1,845✔
156	return Number(result.toFixed(3));	1,845✔
157	}
158
159	protected initialize() {
160	this.primaryDatePoints = this.getPrimaryDatePoints();	117✔
161	this.secondaryDatePoints = this.getSecondaryDatePoints();	117✔
162	this.width = this.getWidth();	117✔
163	this.cellWidth = this.getCellWidth();	117✔
164	this.primaryWidth = this.getPrimaryWidth();	117✔
165	}
166
167	addStartDate() {
168	const start = this.viewStartOf(this.start.add(this.options.addAmount * -1, this.options.addUnit));	1✔
169	if (start.value >= this.options.min.value) {	1!
170	const origin = this.start;	×
171	this.start$.next(start);	×
172	this.initialize();	×
173	return { start: this.start, end: origin };	×
174	}
175	return null;	1✔
176	}
177
178	addEndDate() {
179	const end = this.viewEndOf(this.end.add(this.options.addAmount, this.options.addUnit));	1✔
180	if (end.value <= this.options.max.value) {	1✔
181	const origin = this.end;	1✔
182	this.end$.next(end);	1✔
183	this.initialize();	1✔
184	return { start: origin, end: this.end };	1✔
185	}
186	return null;	×
187	}
188
189	updateDate(start: GanttDate, end: GanttDate) {
190	start = this.viewStartOf(start);	1✔
191	end = this.viewEndOf(end);	1✔
192	if (start.value < this.start.value) {	1!
193	this.start$.next(start);	×
194	}
195	if (end.value > this.end.value) {	1!
196	this.end$.next(end);	×
197	}
198	this.initialize();	1✔
199	}
200
201	// 获取View的宽度
202	getWidth() {
203	return this.getCellWidth() * this.secondaryDatePoints.length;	118✔
204	}
205
206	// 获取单个网格的宽度
207	getCellWidth() {
208	return this.options.cellWidth;	112,673✔
209	}
210
211	// 获取当前时间的X坐标
212	getTodayXPoint(): number {
213	const toady = new GanttDate().startOfDay();	118✔
214	if (toady.value > this.start.value && toady.value < this.end.value) {	118✔
215	const x = this.getXPointByDate(toady) + this.getDayOccupancyWidth(toady) / 2;	76✔
216	return x;	76✔
217	} else {
218	return null;	42✔
219	}
220	}
221
222	// 获取指定时间的X坐标
223	getXPointByDate(date: GanttDate) {
224	return this.getDateIntervalWidth(this.start, date);	1,055✔
225	}
226
227	// 根据X坐标获取对应时间
228	getDateByXPoint(x: number) {
229	const indexOfSecondaryDate = Math.max(Math.floor(x / this.getCellWidth()), 0);	173✔
230	const matchDate = this.secondaryDatePoints[Math.min(this.secondaryDatePoints.length - 1, indexOfSecondaryDate)];	173✔
231	const dayWidth = this.getDayOccupancyWidth(matchDate?.start);	173✔
232	if (dayWidth === this.getCellWidth()) {	173✔
233	return matchDate?.start;	3✔
234	} else {
235	const day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;	170✔
236	if (this.getCellWidth() / dayWidth === 7) {	170!
UNCOV 237	return matchDate?.start.addDays(day);	×
238	}
239	return matchDate?.start.setDate(day);	170✔
240	}
241	}
242
243	// 获取指定时间范围的宽度
244	getDateRangeWidth(start: GanttDate, end: GanttDate) {
245	// addSeconds(1) 是因为计算相差天会以一个整天来计算 end时间一般是59分59秒不是一个整天，所以需要加1
246	return this.getDateIntervalWidth(this.startOfPrecision(start), this.endOfPrecision(end).addSeconds(1));	790✔
247	}
248
249	// 根据日期精度获取最小时间范围的宽度
250	getMinRangeWidthByPrecisionUnit(date: GanttDate) {
251	switch (this.options.datePrecisionUnit) {	1!
252	case 'minute':
UNCOV 253	return this.getDayOccupancyWidth(date) / 24 / 60;	×
254	case 'hour':
UNCOV 255	return this.getDayOccupancyWidth(date) / 24;	×
256	default:
257	return this.getDayOccupancyWidth(date);	1✔
258	}
259	}
260	}

worktile / ngx-gantt / ebff49e6-c036-45f4-a630-95c9a47890a0

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous