d9ae709b-3c27-4b69-b125-b8b80b54f90b

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

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

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

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

    @Input() set thyType(type: ThyProgressType) {
        this.hostRenderer.updateClass(type ? [`progress-circle-${type}`] : []);
    }

    @Input() set thySize(size: string | number) {
        if (size) {
            if (isString(size)) {
                this.progressSize = `progress-circle-inner-${size}`;
            } else {
                this.width = size;
            }
        }
    }

    @Input() thyValue: number | ThyProgressStackedValue[];

    @Input() @InputNumber() thyMax: number;

    @Input() thyTips: string | TemplateRef<unknown>;

    @Input() thyShape: ThyProgressShapeType = 'strip';

    @Input() @InputNumber() thyGapDegree?: number = undefined;

    @Input() thyGapPosition: ThyProgressGapPositionType = 'top';

    @Input() @InputNumber() thyStrokeWidth: number;

    public trailPathStyle: ThyProgressPathStyle | null = null;

    public progressCirclePath: ThyProgressCirclePath[];

    public pathString?: string;

    public width: number = 112;

    public progressSize: string;

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

    public value: number | ThyProgressStackedValue[];

    constructor() {}

    ngOnInit() {
        this.createCircleProgress();
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thyGapDegree, thyValue, thyGapPosition } = changes;

        if (thyGapDegree || thyValue || thyGapPosition) {
            this.createCircleProgress();
        }
    }

    private createCircleProgress(): void {
        let values: ThyProgressStackedValue[] = [];

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

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

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

        this.progressCirclePath = values
            .map((item, index) => {
                return {
                    stroke: null,
                    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();
    }

    trackByFn(index: number) {
        return index;
    }
}

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

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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