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

6.45

/src/statistic/statistic.component.ts

import { Component, TemplateRef, ChangeDetectionStrategy, input, contentChild, effect, computed } from '@angular/core';
import { hexToRgb } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import { NgTemplateOutlet, NgStyle } from '@angular/common';

export type ThyStatisticColorType = 'primary' | 'success' | 'warning' | 'danger' | 'info';

export type ThyStatisticShape = 'card';

export type ThyStatisticSizes = 'default';

export type ThyStatisticTitlePosition = 'top' | 'bottom';

/**
 * 用于展示数据统计
 * @name thy-statistic
 */
@Component({
    selector: 'thy-statistic',
    templateUrl: './statistic.component.html',
    imports: [NgTemplateOutlet, NgStyle],
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: { '[class.thy-statistic]': 'true' }
})
export class ThyStatistic {
    /**
     * @description 展示数据
     * @type number | string
     */
    readonly thyValue = input<number | string>();

    /**
     * @description 展示数据的 css 样式
     * @type { [key: string]: string; }
     */
    readonly thyValueStyle = input<{ [key: string]: string }>({});

    /**
     * @description 展示数据的前缀
     * @type string
     */
    readonly thyPrefix = input<string>();

    /**
     * @description 展示数据的后缀
     * @type string
     */
    readonly thySuffix = input<string>();

    /**
     * @description 展示数据的标题
     * @type string
     */
    readonly thyTitle = input<string>();

    /**
     * @description 展示数据标题的位置，可设置 `top`｜`bottom`
     * @type ThyStatisticTitlePosition
     */
    readonly thyTitlePosition = input<ThyStatisticTitlePosition>('bottom');

    /**
     * @description 展示形状
     * @type ThyStatisticShape
     * @default card
     */
    readonly thyShape = input<ThyStatisticShape>();

    /**
     * @description 主题颜色，可以使用提供的主题色，也可以自定义颜色。 `ThyStatisticColorType` 中包含 `primary` | `success` | `warning` | `danger` | `info`
     * @type ThyStatisticColorType ｜ string
     */
    readonly thyColor = input<string | ThyStatisticColorType>();

    /**
     * @description 前缀和展示数据字体大小
     * @type ThyStatisticSizes
     * @default default
     */
    readonly thySize = input<ThyStatisticSizes>('default');

    /**
     * @description 自定义展示数据模板
     * @type TemplateRef<void>
     */
    readonly thyValueTemplate = input<TemplateRef<void>>();

    /**
     * @description 自定义标题模板
     * @type TemplateRef<void>
     */
    readonly thyTitleTemplate = input<TemplateRef<void>>();

    /**
     * @description 自定义前缀模板
     * @type TemplateRef<void>
     */
    readonly thyPrefixTemplate = input<TemplateRef<void>>();

    /**
     * @description 自定义后缀模板
     * @type TemplateRef<void>
     */
    readonly thySuffixTemplate = input<TemplateRef<void>>();

    /**
     * @description 自定义展示数据模板
     * @type TemplateRef<void>
     */
    readonly contentValueTemplate = contentChild<TemplateRef<void>>('value');

    /**
     * @description 自定义标题模板
     * @type TemplateRef<void>
     */
    readonly contentTitleTemplate = contentChild<TemplateRef<void>>('title');

    /**
     * @description 自定义前缀模板
     * @type TemplateRef<void>
     */
    readonly contentPrefixTemplate = contentChild<TemplateRef<void>>('prefix');

    /**
     * @description 自定义后缀模板
     * @type TemplateRef<void>
     */
    readonly contentSuffixTemplate = contentChild<TemplateRef<void>>('suffix');

    readonly valueTemplate = computed(() => {
        return this.thyValueTemplate() || this.contentValueTemplate();
    });

    readonly titleTemplate = computed(() => {
        return this.thyTitleTemplate() || this.contentTitleTemplate();
    });

    readonly prefixTemplate = computed(() => {
        return this.thyPrefixTemplate() || this.contentPrefixTemplate();
    });

    readonly suffixTemplate = computed(() => {
        return this.thySuffixTemplate() || this.contentSuffixTemplate();
    });

    private hostRenderer = useHostRenderer();

    constructor() {
        effect(() => {
            this.setClassesByType();
        });
    }

    private setClassesByType() {
        const classNames = [];
        if (this.thyColor()) {
            if (RegExp(/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/).test(this.thyColor())) {
                this.setColor(this.thyColor());
            } else {
                classNames.push(`thy-statistic-${this.thyColor()}`);
            }
        }
        if (this.thyShape()) {
            classNames.push(`thy-statistic-${this.thyShape()}`);
        }
        classNames.push(`thy-statistic-${this.thySize()}`);

        this.hostRenderer.setStyle('font-size', this.thySize());
        this.hostRenderer.updateClass(classNames);
    }

    private setColor(color: string) {
        this.hostRenderer.setStyle('color', color);
        if (this.thyShape() === 'card') {
            this.hostRenderer.setStyle('border-color', color);
            this.hostRenderer.setStyle('background-color', hexToRgb(color, 0.05));
        }
    }
}

1	import { Component, TemplateRef, ChangeDetectionStrategy, input, contentChild, effect, computed } from '@angular/core';
2	import { hexToRgb } from 'ngx-tethys/util';
3	import { useHostRenderer } from '@tethys/cdk/dom';
4	import { NgTemplateOutlet, NgStyle } from '@angular/common';
5
6	export type ThyStatisticColorType = 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info';
7
8	export type ThyStatisticShape = 'card';
9
10	export type ThyStatisticSizes = 'default';
11
12	export type ThyStatisticTitlePosition = 'top' \| 'bottom';	1✔
13
UNCOV 14	/**	×
UNCOV 15	* 用于展示数据统计	×
UNCOV 16	* @name thy-statistic	×
UNCOV 17	*/	×
UNCOV 18	@Component({	×
UNCOV 19	selector: 'thy-statistic',	×
UNCOV 20	templateUrl: './statistic.component.html',	×
UNCOV 21	imports: [NgTemplateOutlet, NgStyle],	×
UNCOV 22	changeDetection: ChangeDetectionStrategy.OnPush,	×
UNCOV 23	host: { '[class.thy-statistic]': 'true' }	×
UNCOV 24	})	×
UNCOV 25	export class ThyStatistic {	×
UNCOV 26	/**	×
UNCOV 27	* @description 展示数据	×
UNCOV 28	* @type number \| string	×
UNCOV 29	*/	×
UNCOV 30	readonly thyValue = input<number \| string>();	×
UNCOV 31		×
UNCOV 32	/**	×
33	* @description 展示数据的 css 样式
UNCOV 34	* @type { [key: string]: string; }	×
UNCOV 35	*/	×
36	readonly thyValueStyle = input<{ [key: string]: string }>({});
UNCOV 37		×
UNCOV 38	/**	×
39	* @description 展示数据的前缀
UNCOV 40	* @type string	×
UNCOV 41	*/	×
42	readonly thyPrefix = input<string>();
UNCOV 43		×
UNCOV 44	/**	×
UNCOV 45	* @description 展示数据的后缀	×
46	* @type string
47	*/
48	readonly thySuffix = input<string>();
UNCOV 49		×
UNCOV 50	/**	×
UNCOV 51	* @description 展示数据的标题	×
UNCOV 52	* @type string	×
53	*/
54	readonly thyTitle = input<string>();
UNCOV 55		×
56	/**
57	* @description 展示数据标题的位置，可设置 `top`｜`bottom`
UNCOV 58	* @type ThyStatisticTitlePosition	×
UNCOV 59	*/	×
60	readonly thyTitlePosition = input<ThyStatisticTitlePosition>('bottom');
UNCOV 61		×
UNCOV 62	/**	×
UNCOV 63	* @description 展示形状	×
64	* @type ThyStatisticShape
65	* @default card
UNCOV 66	*/	×
UNCOV 67	readonly thyShape = input<ThyStatisticShape>();	×
UNCOV 68		×
UNCOV 69	/**	×
70	* @description 主题颜色，可以使用提供的主题色，也可以自定义颜色。 `ThyStatisticColorType` 中包含 `primary` \| `success` \| `warning` \| `danger` \| `info`
71	* @type ThyStatisticColorType ｜ string
72	*/	1✔
73	readonly thyColor = input<string \| ThyStatisticColorType>();	1✔
74
75	/**
76	* @description 前缀和展示数据字体大小
77	* @type ThyStatisticSizes
78	* @default default
79	*/
80	readonly thySize = input<ThyStatisticSizes>('default');
81
82	/**
83	* @description 自定义展示数据模板
84	* @type TemplateRef<void>
85	*/
86	readonly thyValueTemplate = input<TemplateRef<void>>();
87
88	/**
89	* @description 自定义标题模板
90	* @type TemplateRef<void>
91	*/
92	readonly thyTitleTemplate = input<TemplateRef<void>>();
93		1✔
94	/**
95	* @description 自定义前缀模板
96	* @type TemplateRef<void>
97	*/
98	readonly thyPrefixTemplate = input<TemplateRef<void>>();
99
100	/**
101	* @description 自定义后缀模板
102	* @type TemplateRef<void>
103	*/
104	readonly thySuffixTemplate = input<TemplateRef<void>>();
105
106	/**
107	* @description 自定义展示数据模板
108	* @type TemplateRef<void>
109	*/
110	readonly contentValueTemplate = contentChild<TemplateRef<void>>('value');
111
112	/**
113	* @description 自定义标题模板
114	* @type TemplateRef<void>
115	*/
116	readonly contentTitleTemplate = contentChild<TemplateRef<void>>('title');
117
118	/**
119	* @description 自定义前缀模板
120	* @type TemplateRef<void>
121	*/
122	readonly contentPrefixTemplate = contentChild<TemplateRef<void>>('prefix');
123
124	/**
125	* @description 自定义后缀模板
126	* @type TemplateRef<void>
127	*/
128	readonly contentSuffixTemplate = contentChild<TemplateRef<void>>('suffix');
129
130	readonly valueTemplate = computed(() => {
131	return this.thyValueTemplate() \|\| this.contentValueTemplate();
132	});
133
134	readonly titleTemplate = computed(() => {
135	return this.thyTitleTemplate() \|\| this.contentTitleTemplate();
136	});
137
138	readonly prefixTemplate = computed(() => {
139	return this.thyPrefixTemplate() \|\| this.contentPrefixTemplate();
140	});
141
142	readonly suffixTemplate = computed(() => {
143	return this.thySuffixTemplate() \|\| this.contentSuffixTemplate();
144	});
145
146	private hostRenderer = useHostRenderer();
147
148	constructor() {
149	effect(() => {
150	this.setClassesByType();
151	});
152	}
153
154	private setClassesByType() {
155	const classNames = [];
156	if (this.thyColor()) {
157	if (RegExp(/^#([0-9a-fA-F]{6}\|[0-9a-fA-F]{3})$/).test(this.thyColor())) {
158	this.setColor(this.thyColor());
159	} else {
160	classNames.push(`thy-statistic-${this.thyColor()}`);
161	}
162	}
163	if (this.thyShape()) {
164	classNames.push(`thy-statistic-${this.thyShape()}`);
165	}
166	classNames.push(`thy-statistic-${this.thySize()}`);
167
168	this.hostRenderer.setStyle('font-size', this.thySize());
169	this.hostRenderer.updateClass(classNames);
170	}
171
172	private setColor(color: string) {
173	this.hostRenderer.setStyle('color', color);
174	if (this.thyShape() === 'card') {
175	this.hostRenderer.setStyle('border-color', color);
176	this.hostRenderer.setStyle('background-color', hexToRgb(color, 0.05));
177	}
178	}
179	}

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