68ef226c-f83e-44c1-b8ed-e420a83c5d84

Committed 28 May 2025 10:31AM UTC coverage: 10.352% (-80.0%) from 90.316%

Build # 68ef226c-f83e-44c1-b8ed-e420a83c5d84

Build Type

Pull #3460

circleci

Committed by

pubuzhixing8

Commit Message

chore: xxx

Pull Request Pull Request #3460: refactor(icon): migrate signal input #TINFR-1476

Run Details

132 of 6823 branches covered (1.93%)

Branch coverage included in aggregate %.

10 of 14 new or added lines in 1 file covered. (71.43%)

11648 existing lines in 344 files now uncovered.

2078 of 14525 relevant lines covered (14.31%)

6.69 hits per line

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

4.3

/src/progress/progress-circle.component.ts

import { isNumber, isString } from 'ngx-tethys/util';

import {
    Component,
    OnChanges,
    OnInit,
    SimpleChanges,
    TemplateRef,
    ViewEncapsulation,
    numberAttribute,
    input,
    effect,
    computed
} from '@angular/core';
import { useHostRenderer } from '@tethys/cdk/dom';

import {
    ThyProgressCirclePath,
    ThyProgressGapPositionType,
    ThyProgressPathStyle,
    ThyProgressShapeType,
    ThyProgressStackedValue,
    ThyProgressType
} from './interfaces';
import { NgClass, NgStyle } from '@angular/common';
import { ThyTooltipDirective } from 'ngx-tethys/tooltip';

/**
 * @private
 */
@Component({
    selector: 'thy-progress-circle',
    templateUrl: './progress-circle.component.html',
    encapsulation: ViewEncapsulation.None,
    host: {
        class: 'progress-circle'
    },
    imports: [ThyTooltipDirective, NgClass, NgStyle]
})
export class ThyProgressCircle implements OnInit, OnChanges {
    private hostRenderer = useHostRenderer();

    readonly thyType = input<ThyProgressType>(undefined);

    readonly thySize = input<string | number>(undefined);

    readonly thyValue = input<number | ThyProgressStackedValue[]>(undefined);

    readonly thyMax = input<number, unknown>(undefined, { transform: numberAttribute });

    readonly thyTips = input<string | TemplateRef<unknown>>(undefined);

    readonly thyShape = input<ThyProgressShapeType>('strip');

    readonly thyGapDegree = input<number, unknown>(undefined, { transform: numberAttribute });

    readonly thyGapPosition = input<ThyProgressGapPositionType>('top');

    readonly thyStrokeWidth = input<number, unknown>(undefined, { transform: numberAttribute });

    get strokeWidth(): number {
        return this.thyStrokeWidth() || 6;
    }

    readonly progressSize = computed(() => {
        const size = this.thySize();
        if (size && isString(size)) {
            return `progress-circle-inner-${size}`;
        }
        return '';
    });

    readonly width = computed(() => {
        const size = this.thySize();
        if (size && isNumber(size)) {
            return size;
        }
        return 112;
    });

    readonly circle = computed(() => {
        let values: ThyProgressStackedValue[] = [];

        const thyValue = this.thyValue();
        if (Array.isArray(thyValue)) {
            let totalValue = 0;
            values = (thyValue as ThyProgressStackedValue[]).map((item, index) => {
                totalValue += item.value;
                const currentValue = +((totalValue / this.thyMax()) * 100).toFixed(2);
                return { ...item, value: currentValue };
            });
        } else {
            values = [{ value: thyValue }];
        }

        const radius = 50 - this.strokeWidth / 2;
        const gapPosition = this.thyGapPosition() || 'top';
        const len = Math.PI * 2 * radius;
        const gapDegree = this.thyGapDegree() || 0;

        let beginPositionX = 0;
        let beginPositionY = -radius;
        let endPositionX = 0;
        let endPositionY = radius * -2;

        switch (gapPosition) {
            case 'left':
                beginPositionX = -radius;
                beginPositionY = 0;
                endPositionX = radius * 2;
                endPositionY = 0;
                break;
            case 'right':
                beginPositionX = radius;
                beginPositionY = 0;
                endPositionX = radius * -2;
                endPositionY = 0;
                break;
            case 'bottom':
                beginPositionY = radius;
                endPositionY = radius * 2;
                break;
            default:
        }

        const pathString = `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;

        const trailPathStyle = {
            strokeDasharray: `${len - gapDegree}px ${len}px`,
            strokeDashoffset: `-${gapDegree / 2}px`,
            transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
        };

        const progressCirclePath = values
            .map((item, index) => {
                return {
                    stroke: '',
                    value: +item.value,
                    className: item.type ? `progress-circle-path-${item.type}` : null,
                    strokePathStyle: {
                        stroke: item?.color ? item?.color : null,
                        transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s',
                        strokeDasharray: `${((item.value || 0) / 100) * (len - gapDegree)}px ${len}px`,
                        strokeDashoffset: `-${gapDegree / 2}px`
                    }
                };
            })
            .reverse();
        return { pathString, trailPathStyle, progressCirclePath };
    });

    constructor() {
        effect(() => {
            const type = this.thyType();
            this.hostRenderer.updateClass(type ? [`progress-circle-${type}`] : []);
        });
    }

    ngOnInit() {}

    ngOnChanges(changes: SimpleChanges): void {}
}

1	import { isNumber, isString } from 'ngx-tethys/util';
2
3	import {
4	Component,
5	OnChanges,
6	OnInit,
7	SimpleChanges,
8	TemplateRef,
9	ViewEncapsulation,
10	numberAttribute,
11	input,
12	effect,	1✔
13	computed
UNCOV 14	} from '@angular/core';	×
15	import { useHostRenderer } from '@tethys/cdk/dom';
16
UNCOV 17	import {	×
UNCOV 18	ThyProgressCirclePath,	×
UNCOV 19	ThyProgressGapPositionType,	×
UNCOV 20	ThyProgressPathStyle,	×
UNCOV 21	ThyProgressShapeType,	×
UNCOV 22	ThyProgressStackedValue,	×
UNCOV 23	ThyProgressType	×
UNCOV 24	} from './interfaces';	×
UNCOV 25	import { NgClass, NgStyle } from '@angular/common';	×
UNCOV 26	import { ThyTooltipDirective } from 'ngx-tethys/tooltip';	×
UNCOV 27		×
UNCOV 28	/**	×
UNCOV 29	* @private	×
UNCOV 30	*/	×
31	@Component({
UNCOV 32	selector: 'thy-progress-circle',	×
33	templateUrl: './progress-circle.component.html',
UNCOV 34	encapsulation: ViewEncapsulation.None,	×
UNCOV 35	host: {	×
UNCOV 36	class: 'progress-circle'	×
UNCOV 37	},	×
38	imports: [ThyTooltipDirective, NgClass, NgStyle]
UNCOV 39	})	×
40	export class ThyProgressCircle implements OnInit, OnChanges {
UNCOV 41	private hostRenderer = useHostRenderer();	×
UNCOV 42		×
UNCOV 43	readonly thyType = input<ThyProgressType>(undefined);	×
UNCOV 44		×
UNCOV 45	readonly thySize = input<string \| number>(undefined);	×
UNCOV 46		×
UNCOV 47	readonly thyValue = input<number \| ThyProgressStackedValue[]>(undefined);	×
UNCOV 48		×
UNCOV 49	readonly thyMax = input<number, unknown>(undefined, { transform: numberAttribute });	×
50
51	readonly thyTips = input<string \| TemplateRef<unknown>>(undefined);
52
UNCOV 53	readonly thyShape = input<ThyProgressShapeType>('strip');	×
54
UNCOV 55	readonly thyGapDegree = input<number, unknown>(undefined, { transform: numberAttribute });	×
UNCOV 56		×
UNCOV 57	readonly thyGapPosition = input<ThyProgressGapPositionType>('top');	×
UNCOV 58		×
UNCOV 59	readonly thyStrokeWidth = input<number, unknown>(undefined, { transform: numberAttribute });	×
UNCOV 60		×
UNCOV 61	get strokeWidth(): number {	×
UNCOV 62	return this.thyStrokeWidth() \|\| 6;	×
UNCOV 63	}	×
64
UNCOV 65	readonly progressSize = computed(() => {	×
UNCOV 66	const size = this.thySize();	×
UNCOV 67	if (size && isString(size)) {	×
UNCOV 68	return `progress-circle-inner-${size}`;	×
UNCOV 69	}	×
70	return '';
UNCOV 71	});	×
UNCOV 72		×
UNCOV 73	readonly width = computed(() => {	×
UNCOV 74	const size = this.thySize();	×
UNCOV 75	if (size && isNumber(size)) {	×
76	return size;
UNCOV 77	}	×
UNCOV 78	return 112;	×
UNCOV 79	});	×
80
81	readonly circle = computed(() => {
UNCOV 82	let values: ThyProgressStackedValue[] = [];	×
UNCOV 83		×
84	const thyValue = this.thyValue();
85	if (Array.isArray(thyValue)) {
86	let totalValue = 0;
87	values = (thyValue as ThyProgressStackedValue[]).map((item, index) => {
UNCOV 88	totalValue += item.value;	×
89	const currentValue = +((totalValue / this.thyMax()) * 100).toFixed(2);
UNCOV 90	return { ...item, value: currentValue };	×
91	});
92	} else {
93	values = [{ value: thyValue }];	×
94	}
95		×
96	const radius = 50 - this.strokeWidth / 2;
97	const gapPosition = this.thyGapPosition() \|\| 'top';	×
98	const len = Math.PI * 2 * radius;
99	const gapDegree = this.thyGapDegree() \|\| 0;
100
101	let beginPositionX = 0;
102	let beginPositionY = -radius;
UNCOV 103	let endPositionX = 0;	×
104	let endPositionY = radius * -2;
UNCOV 105		×
UNCOV 106	switch (gapPosition) {	×
UNCOV 107	case 'left':	×
108	beginPositionX = -radius;
109	beginPositionY = 0;
110	endPositionX = radius * 2;
111	endPositionY = 0;
112	break;	1✔
113	case 'right':	1✔
114	beginPositionX = radius;
115	beginPositionY = 0;
116	endPositionX = radius * -2;
117	endPositionY = 0;
118	break;
119	case 'bottom':
120	beginPositionY = radius;
121	endPositionY = radius * 2;
122	break;
123	default:
124	}
125		1✔
126	const pathString = `M 50,50 m ${beginPositionX},${beginPositionY} a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY} a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
127
128	const trailPathStyle = {
129	strokeDasharray: `${len - gapDegree}px ${len}px`,
130	strokeDashoffset: `-${gapDegree / 2}px`,
131	transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
132	};
133
134	const progressCirclePath = values
135	.map((item, index) => {
136	return {
137	stroke: '',
138	value: +item.value,
139	className: item.type ? `progress-circle-path-${item.type}` : null,
140	strokePathStyle: {
141	stroke: item?.color ? item?.color : null,
142	transition: 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s',
143	strokeDasharray: `${((item.value \|\| 0) / 100) * (len - gapDegree)}px ${len}px`,
144	strokeDashoffset: `-${gapDegree / 2}px`
145	}
146	};
147	})
148	.reverse();
149	return { pathString, trailPathStyle, progressCirclePath };
150	});
151
152	constructor() {
153	effect(() => {
154	const type = this.thyType();
155	this.hostRenderer.updateClass(type ? [`progress-circle-${type}`] : []);
156	});
157	}
158
159	ngOnInit() {}
160
161	ngOnChanges(changes: SimpleChanges): void {}
162	}

atinc / ngx-tethys / 68ef226c-f83e-44c1-b8ed-e420a83c5d84

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