d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { OnInit, Component, Input, HostBinding, ElementRef, TemplateRef, ContentChild } from '@angular/core';
import { hexToRgb } from 'ngx-tethys/util';
import { useHostRenderer } from '@tethys/cdk/dom';
import { NgIf, 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: [NgIf, NgTemplateOutlet, NgStyle]
})
export class ThyStatisticComponent implements OnInit {
    _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;
    }

    constructor(private elementRef: ElementRef) {}

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