Sparkline & Stat
Đôi khi câu trả lời không phải biểu đồ: StatTile đưa con số lên trước, kèm delta và một sparkline xu hướng nhỏ.
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.
// npm install yugen-uiimport { Sparkline, StatTile } 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.
Doanh thu tăng đều trong 12 tháng.
Sparkline trong câu
Inline, cao bằng dòng chữ; aria-label tự tóm tắt đầu, cuối, thấp nhất, cao nhất.
Biến thể
variant area; color chọn ô màu phân loại thay cho xám làm nền.
Giảm là tốt
goodDirection="down": tỉ lệ rời bỏ giảm → màu success, luôn kèm icon và chữ.
Con số hero
size="extra-large" (68px, cùng font sans) cho con số duy nhất mà màn hình dẫn dắt.
Cách dùng
- Dùng StatTile khi dữ liệu là một con số hiện tại (+ xu hướng) — thay cho biểu đồ một cột.
- Ghi rõ kỳ so sánh của delta (“so với tháng trước”) và chọn goodDirection đúng ý nghĩa.
- Giữ sparkline ~12 điểm, xám làm nền, chỉ điểm hiện tại tô màu nhấn.
- Không dùng màu làm tín hiệu duy nhất cho delta — luôn có icon và số có dấu.
- Không đặt nhiều con số hero trên cùng một màn hình.
- Không dùng tabular-nums cho con số lớn đứng riêng.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| Sparkline | Mặc định: — | null tạo khoảng trống. |
| Sparkline | Mặc định: 120 / 32 | "auto" = theo phần tử cha (đo bằng ResizeObserver); một số thì không đo gì. |
| Sparkline | Mặc định: "line" | Đường hoặc đường + vùng nhạt. |
| Sparkline | Mặc định: "neutral" | Xám làm nền hoặc ô màu phân loại. |
| Sparkline | Mặc định: true | Chấm điểm cuối; nhãn cho tooltip. |
| StatTile | Mặc định: — | Giá trị số tự rút gọn từ 10.000. |
| StatTile | Mặc định: — | Thay đổi có dấu (mặc định phần trăm). |
| StatTile | Mặc định: "up" | Chiều nào là tốt. |
| StatTile | Mặc định: — | Sparkline bên cạnh giá trị. |
| StatTile | Mặc định: "medium" | 28 / 40 / 68px. |
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.chart
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| roleDescriptionstring aria-roledescription của vùng vẽ. | Mặc định (tiếng Anh)"chart" | messagesVi"biểu đồ" |
| heatmapRoleDescriptionstring | Mặc định (tiếng Anh)"heat map" | messagesVi"bản đồ nhiệt" |
| dataTablestring Nút bật chế độ bảng của ChartContainer. | Mặc định (tiếng Anh)"Data table" | messagesVi"Bảng dữ liệu" |
| totalstring Dòng tổng (tooltip, bảng) và nhãn giữa vòng DonutChart. | Mặc định (tiếng Anh)"Total" | messagesVi"Tổng" |
| valuestring | Mặc định (tiếng Anh)"Value" | messagesVi"Giá trị" |
| sharestring | Mặc định (tiếng Anh)"Share" | messagesVi"Tỉ lệ" |
| noDatastring | Mặc định (tiếng Anh)"No data" | messagesVi"Không có dữ liệu" |
| timestring Tiêu đề cột đầu của bảng (khi không truyền | Mặc định (tiếng Anh)"Time" | messagesVi"Thời gian" |
| categorystring | Mặc định (tiếng Anh)"Category" | messagesVi"Danh mục" |
| groupstring | Mặc định (tiếng Anh)"Group" | messagesVi"Nhóm" |
| namestring | Mặc định (tiếng Anh)"Name" | messagesVi"Tên" |
| otherstring Nhóm gộp (DonutChart vượt | Mặc định (tiếng Anh)"Other" | messagesVi"Khác" |
| trendstring Nút bật đường xu hướng của ScatterChart. | Mặc định (tiếng Anh)"Trend" | messagesVi"Xu hướng" |
| increasestring | 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" |
| brushstring ChartBrush: tên cửa sổ thu phóng, dòng "Đang xem … · n/N mốc", nút đặt lại. | Mặc định (tiếng Anh)"Visible range" | messagesVi"Vùng xem" |
| brushRoleDescriptionstring | Mặc định (tiếng Anh)"zoom window" | messagesVi"cửa sổ thu phóng" |
| brushViewingstring | Mặc định (tiếng Anh)"Showing" | messagesVi"Đang xem" |
| brushPoints(shown: number, total: number) => string | Mặc định (tiếng Anh)(shown, total) => `${shown}/${total} ${total === 1 ? "point" : "points"}` | messagesVi(shown, total) => `${shown}/${total} mốc` |
| brushResetstring | Mặc định (tiếng Anh)"Reset" | messagesVi"Đặt lại" |
| lineSummary(info: { kind: "line" | "area" | "stacked" | "expand"; points: number; /** Mốc đầu / cuối (chỉ có khi points > 0). */ from?: string; to?: string; series: string[]; }) => string Mô tả truy cập tự sinh (khi không truyền | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| barSummary(info: { horizontal: boolean; stacked: boolean; categories: number; series: string[] }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| donutSummary(info: { groups: number; total: string; largest?: { label: string; share: string } }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| scatterSummary(info: { points: number; x: string; y: string; /** Tên đại lượng kích thước (biểu đồ bong bóng). */ size?: string; /** Tên các nhóm (khi có nhiều nhóm). */ groups?: string[]; trends: { group?: string; slope: string; r2: string }[]; }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| heatmapSummary(info: { rows: number; columns: number; min?: string; max?: string; hasEmpty: boolean }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesViHàm, xem messages.ts |
| sparklineSummary(info: { points: number; first: string; last: string; min: string; max: string }) => string | Mặc định (tiếng Anh)Hàm, xem messages.ts | messagesVi({ points, first, last, min, max }) => `Xu hướng ${points} điểm: từ ${first} đến ${last}, thấp nhất ${min}, cao nhất ${max}` |