82a20078-8d91-4897-87ca-05452cf02b6e

Committed 13 Mar 2024 03:30AM UTC coverage: 72.449% (+0.1%) from 72.329%

Build # 82a20078-8d91-4897-87ca-05452cf02b6e

Build Type

Pull #449

circleci

Committed by

hjm100

Commit Message

feat: #INFR-11831 gantt height custom global style configurations

Pull Request Pull Request #449: #INFR-11826 gantt custom global style configurations

Run Details

355 of 611 branches covered (58.1%)

Branch coverage included in aggregate %.

16 of 17 new or added lines in 5 files covered. (94.12%)

23 existing lines in 2 files now uncovered.

1470 of 1908 relevant lines covered (77.04%)

1394.34 hits per line

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

84.21

/packages/gantt/src/components/calendar/header/calendar-header.component.ts

import { Component, OnInit, HostBinding, Inject, NgZone, ElementRef } from '@angular/core';
import { GanttDatePoint } from '../../../class/date-point';
import { todayHeight, todayWidth } from '../../../gantt.styles';
import { GANTT_UPPER_TOKEN, GanttUpper } from '../../../gantt-upper';
import { GanttViewType } from '../../../class';
import { take, takeUntil } from 'rxjs/operators';
import { Subject, merge } from 'rxjs';
import { GanttDate } from '../../../utils/date';
import { isNumber } from '../../../utils/helpers';
import { NgFor, NgStyle } from '@angular/common';

@Component({
    selector: 'gantt-calendar-header',
    templateUrl: './calendar-header.component.html',
    standalone: true,
    imports: [NgFor, NgStyle]
})
export class GanttCalendarHeaderComponent implements OnInit {
    get view() {
        return this.ganttUpper.view;
    }

    private unsubscribe$ = new Subject();

    viewTypes = GanttViewType;

    primaryDatePointTop = 26;

    secondaryDatePointTop = 48;

    @HostBinding('class') className = `gantt-calendar gantt-calendar-header`;

    @HostBinding('style.height')
    get height() {
        return this.ganttUpper.styles.headerHeight + 'px';
    }

    constructor(
        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
        private ngZone: NgZone,
        private elementRef: ElementRef<HTMLElement>
    ) {}

    ngOnInit() {
        // 头部日期定位
        this.setDatePointTop();
        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
            merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe(() => {
                    if (this.ganttUpper.viewType === GanttViewType.day) this.setTodayPoint();
                });
        });
    }

    setDatePointTop() {
        const fontSize = 14;
        const marginTop = 4;
        const { headerHeight } = this.ganttUpper.styles;
        const remainder = headerHeight - fontSize * 2 - marginTop;
        this.primaryDatePointTop = fontSize + remainder / 2;
        this.secondaryDatePointTop = this.primaryDatePointTop + fontSize + marginTop;
    }

    setTodayPoint() {
        const x = this.view.getTodayXPoint();
        const today = new GanttDate().getDate();
        const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0] as HTMLElement;
        const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0] as HTMLElement;

        if (isNumber(x)) {
            if (rect) {
                rect.style.left = `${x - todayWidth / 2}px`;
                rect.style.top = `${this.ganttUpper.styles.headerHeight - todayHeight}px`;
                rect.innerHTML = today.toString();
            }
        } else {
            todayEle.style.display = 'none';
        }
    }

    trackBy(point: GanttDatePoint, index: number) {
        return point.text || index;
    }
}

1	import { Component, OnInit, HostBinding, Inject, NgZone, ElementRef } from '@angular/core';
2	import { GanttDatePoint } from '../../../class/date-point';
3	import { todayHeight, todayWidth } from '../../../gantt.styles';
4	import { GANTT_UPPER_TOKEN, GanttUpper } from '../../../gantt-upper';
5	import { GanttViewType } from '../../../class';
6	import { take, takeUntil } from 'rxjs/operators';
7	import { Subject, merge } from 'rxjs';
8	import { GanttDate } from '../../../utils/date';
9	import { isNumber } from '../../../utils/helpers';
10	import { NgFor, NgStyle } from '@angular/common';
11
12	@Component({
13	selector: 'gantt-calendar-header',
14	templateUrl: './calendar-header.component.html',
15	standalone: true,
16	imports: [NgFor, NgStyle]
17	})
18	export class GanttCalendarHeaderComponent implements OnInit {	1✔
19	get view() {
20	return this.ganttUpper.view;	5,475✔
21	}
22
23	private unsubscribe$ = new Subject();	59✔
24
25	viewTypes = GanttViewType;	59✔
26
27	primaryDatePointTop = 26;	59✔
28
29	secondaryDatePointTop = 48;	59✔
30
31	@HostBinding('class') className = `gantt-calendar gantt-calendar-header`;	59✔
32
33	@HostBinding('style.height')
34	get height() {
35	return this.ganttUpper.styles.headerHeight + 'px';	158✔
36	}
37
38	constructor(
39	@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,	59✔
40	private ngZone: NgZone,	59✔
41	private elementRef: ElementRef<HTMLElement>	59✔
42	) {}
43
44	ngOnInit() {
45	// 头部日期定位
46	this.setDatePointTop();	59✔
47	this.ngZone.onStable.pipe(take(1)).subscribe(() => {	59✔
48	merge(this.ganttUpper.viewChange, this.ganttUpper.view.start$)	59✔
49	.pipe(takeUntil(this.unsubscribe$))
50	.subscribe(() => {
51	if (this.ganttUpper.viewType === GanttViewType.day) this.setTodayPoint();	60✔
52	});
53	});
54	}
55
56	setDatePointTop() {
57	const fontSize = 14;	59✔
58	const marginTop = 4;	59✔
59	const { headerHeight } = this.ganttUpper.styles;	59✔
60	const remainder = headerHeight - fontSize * 2 - marginTop;	59✔
61	this.primaryDatePointTop = fontSize + remainder / 2;	59✔
62	this.secondaryDatePointTop = this.primaryDatePointTop + fontSize + marginTop;	59✔
63	}
64
65	setTodayPoint() {
66	const x = this.view.getTodayXPoint();	1✔
67	const today = new GanttDate().getDate();	1✔
68	const todayEle = this.elementRef.nativeElement.getElementsByClassName('gantt-calendar-today-overlay')[0] as HTMLElement;	1✔
69	const rect = this.elementRef.nativeElement.getElementsByClassName('today-rect')[0] as HTMLElement;	1✔
70
71	if (isNumber(x)) {	1!
UNCOV 72	if (rect) {	×
UNCOV 73	rect.style.left = `${x - todayWidth / 2}px`;	×
NEW UNCOV 74	rect.style.top = `${this.ganttUpper.styles.headerHeight - todayHeight}px`;	×
UNCOV 75	rect.innerHTML = today.toString();	×
76	}
77	} else {
78	todayEle.style.display = 'none';	1✔
79	}
80	}
81
82	trackBy(point: GanttDatePoint, index: number) {
83	return point.text \|\| index;	11,576✔
84	}
85	}

worktile / ngx-gantt / 82a20078-8d91-4897-87ca-05452cf02b6e

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