3b40a702-4b4d-4ddb-81a7-a96baae6d682

Committed 08 Nov 2024 05:40AM UTC coverage: 90.395% (-0.04%) from 90.431%

Build # 3b40a702-4b4d-4ddb-81a7-a96baae6d682

Build Type

push

circleci

Committed by

why520crazy

Commit Message

Merge branch 'master' into feat-theme

Run Details

5503 of 6730 branches covered (81.77%)

Branch coverage included in aggregate %.

424 of 431 new or added lines in 171 files covered. (98.38%)

344 existing lines in 81 files now uncovered.

13150 of 13905 relevant lines covered (94.57%)

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

atinc / ngx-tethys / 3b40a702-4b4d-4ddb-81a7-a96baae6d682

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