Stat
Stat hiển thị một con số chính kèm mức thay đổi và biểu đồ nhỏ tuỳ chọn.
Số được định dạng theo locale của YugenProvider và tự rút gọn từ 10.000 (12,9 N). delta là mức thay đổi có dấu, mặc định hiển thị phần trăm; goodDirection quyết định tăng là tốt (xanh) hay xấu (đỏ), và chiều thay đổi luôn có chữ ẩn cho trình đọc màn hình. chart nhận một biểu đồ nhỏ, thường là Sparkline. StatTile trong Yugen Labs giờ là Stat kèm Sparkline vẽ từ trend.
Doanh thu
128 N US$
Tăng+12,4%so với tháng trước
Đơn hàng
1.284
Tăng+3,1%so với tháng trước
Tỉ lệ hoàn đơn
2,1%
Giảm-0,4%so với tháng trước
Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { Stat } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Người dùng hoạt động
78,2 N
Tăng+13%so với tháng trước
Biểu đồ nhỏ & icon
chart đặt biểu đồ cạnh con số; icon đứng trước nhãn.
Medium
4.210
Large
4.210
Extra large
4.210
Kích thước
medium 28px, large 40px, extra-large 68px — mỗi màn hình tối đa một con số cỡ extra-large.
Cách dùng
Nên
- Ghi rõ mốc so sánh trong deltaLabel (“so với tháng trước”).
- Đặt goodDirection="down" cho chỉ số càng thấp càng tốt: tỉ lệ lỗi, thời gian chờ, chi phí.
- Dùng valueFormat với style currency / unit để có đơn vị đúng locale.
Không nên
- Không đặt quá 4–5 Stat trên một hàng; người đọc sẽ không biết nhìn vào đâu.
- Không dùng màu delta khi thay đổi không có tốt / xấu — đặt goodDirection="neutral".
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| labelReactNode | Mặc định: — | Nhãn viết hoa chữ đầu câu, không dấu hai chấm. |
| valuenumber | string | Mặc định: — | Số được định dạng theo locale; chuỗi giữ nguyên. |
| valueFormatIntl.NumberFormatOptions | (value) => string | Mặc định: rút gọn từ 10.000 | Định dạng con số. |
| deltanumber | Mặc định: — | Mức thay đổi có dấu (0.124 = +12,4%). |
| deltaFormatIntl.NumberFormatOptions | (value) => string | Mặc định: phần trăm | Định dạng delta. |
| deltaLabelReactNode | Mặc định: — | Mốc so sánh. |
| goodDirection"up" | "down" | "neutral" | Mặc định: "up" | Chiều tốt: quyết định màu success / danger. |
| size"medium" | "large" | "extra-large" | Mặc định: "medium" | Cỡ con số 28 / 40 / 68px. Giá trị cũ "hero" đã lỗi thời (bỏ ở 1.0). |
| iconReactNode | Mặc định: — | Icon trước nhãn. |
| chartReactNode | Mặc định: — | Biểu đồ nhỏ cạnh con số, thường là Sparkline. |
| localestring | Mặc định: — | Locale cho Intl.NumberFormat; mặc định theo YugenProvider. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.stat
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| increasestring Chữ ẩn đọc trước delta: chiều thay đổi. | Mặc định (tiếng Anh)"Increase" | messagesVi"Tăng" |
| decreasestring | Mặc định (tiếng Anh)"Decrease" | messagesVi"Giảm" |
| noChangestring | Mặc định (tiếng Anh)"No change" | messagesVi"Không đổi" |