d4d3bf94-0b08-4dba-b53c-fd90c5e0b80a

Committed 27 Mar 2025 01:46AM UTC coverage: 90.236% (+0.06%) from 90.179%

Build # d4d3bf94-0b08-4dba-b53c-fd90c5e0b80a

Build Type

push

circleci

Committed by

minlovehua

Commit Message

feat: save draft

Run Details

5598 of 6865 branches covered (81.54%)

Branch coverage included in aggregate %.

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

157 existing lines in 46 files now uncovered.

13357 of 14141 relevant lines covered (94.46%)

992.52 hits per line

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

85.45

/src/statistic/statistic.component.ts

import { OnInit, Component, Input, HostBinding, ElementRef, TemplateRef, ContentChild, inject } 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]
})
export class ThyStatistic implements OnInit {
    private elementRef = inject(ElementRef);

    _shape: ThyStatisticShape;

    _initialized = false;

    _size: ThyStatisticSizes;

    prefixTemplate: TemplateRef<void>;

    suffixTemplate: TemplateRef<void>;

    valueTemplate: TemplateRef<void>;

    titleTemplate: TemplateRef<void>;

    private hostRenderer = useHostRenderer();

    @HostBinding(`class.thy-statistic`) class = true;

    /**
     * @description 展示数据
     * @type number | string
     */
    @Input() thyValue: number | string;

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

    /**
     * @description 展示数据的前缀
     * @type string
     */
    @Input() thyPrefix: string;

    /**
     * @description 展示数据的后缀
     * @type string
     */
    @Input() thySuffix: string;

    /**
     * @description 展示数据的标题
     * @type string
     */
    @Input() thyTitle: string;

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

    /**
     * @description 展示形状
     * @type ThyStatisticShape
     * @default card
     */
    @Input()
    set thyShape(value: ThyStatisticShape) {
        this._shape = value;
        if (this._initialized) {
            this._setClassesByType();
        }
    }

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

    /**
     * @description 前缀和展示数据字体大小
     * @type ThyStatisticSizes
     * @default default
     */
    @Input()
    set thySize(value: ThyStatisticSizes) {
        this._size = value;
        if (this._initialized) {
            this._setClassesByType();
        }
    }

    /**
     * @description 自定义展示数据模板
     * @type TemplateRef<void>
     */
    @Input() set thyValueTemplate(value: TemplateRef<void>) {
        this.valueTemplate = value;
    }

    /**
     * @description 自定义展示数据模板
     * @type TemplateRef<void>
     */
    @ContentChild('value', { static: true }) set value(value: TemplateRef<void>) {
        this.valueTemplate = value;
    }

    /**
     * @description 自定义标题模板
     * @type TemplateRef<void>
     */
    @Input() set thyTitleTemplate(value: TemplateRef<void>) {
        this.titleTemplate = value;
    }

    /**
     * @description 自定义标题模板
     * @type TemplateRef<void>
     */
    @ContentChild('title', { static: true }) set title(value: TemplateRef<void>) {
        this.titleTemplate = value;
    }

    /**
     * @description 自定义前缀模板
     * @type TemplateRef<void>
     */
    @Input() set thyPrefixTemplate(value: TemplateRef<void>) {
        this.prefixTemplate = value;
    }

    /**
     * @description 自定义前缀模板
     * @type TemplateRef<void>
     */
    @ContentChild('prefix', { static: true }) set prefix(value: TemplateRef<void>) {
        this.prefixTemplate = value;
    }

    /**
     * @description 自定义后缀模板
     * @type TemplateRef<void>
     */
    @Input() set thySuffixTemplate(value: TemplateRef<void>) {
        this.suffixTemplate = value;
    }
    /**
     * @description 自定义后缀模板
     * @type TemplateRef<void>
     */
    @ContentChild('suffix', { static: true }) set suffix(value: TemplateRef<void>) {
        this.suffixTemplate = value;
    }

    ngOnInit() {
        this._setClassesByType();
        this._initialized = true;
    }

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

    _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._shape) {
            classNames.push(`thy-statistic-${this._shape}`);
        }
        if (!this._size) {
            this._size = 'default';
        }
        classNames.push(`thy-statistic-${this._size}`);

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

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

atinc / ngx-tethys / d4d3bf94-0b08-4dba-b53c-fd90c5e0b80a

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