Yugen UI

DonutChart

DonutChart cho phần–tổng nhìn nhanh với tối đa 6 lát; phần đuôi tự gộp vào “Khác”, tổng hiển thị ở giữa vòng.

Vòng mảnh, khe bề mặt 2px song song giữa các lát, bắt đầu ở 12 giờ theo chiều kim đồng hồ. Legend bên cạnh kèm tỉ lệ (theo hướng chữ của trang); hover hoặc phím mũi tên để xem giá trị. Khi cần so sánh các giá trị sát nhau, dùng BarChart.
Yugen Labs · thử nghiệmComponent này nằm ngoài SemVer: API có thể đổi ở một bản minor, và thay đổi sẽ được ghi trong Có gì mới. Chính sách phiên bản
Nguồn khách hàng
Tháng 10
  • Tìm kiếm42%
  • Mạng xã hội28%
  • Giới thiệu18%
  • Email12%

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 { DonutChart } 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.

Đơn hàng theo tỉnh
  • TP. Hồ Chí Minh33%
  • Hà Nội29,4%
  • Đà Nẵng10,7%
  • Hải Phòng8,5%
  • Cần Thơ6,6%
  • Khác11,9%

Gộp phần đuôi vào “Khác”

9 nhóm → 5 nhóm lớn nhất + “Khác” màu xám trung tính. Bảng dữ liệu vẫn giữ con số gộp.

Bộ nhớ
  • Video46,6%
  • Ảnh36,4%
  • Tài liệu10,2%
  • Ứng dụng6,8%

Nhãn giữa tuỳ biến

centerValue / centerLabel thay cho tổng mặc định; size và thickness đổi kích thước vòng.

Cách dùng

Nên
  • Chỉ dùng cho phần–tổng nhìn nhanh, ≤ 6 lát; để màu đi theo thực thể (truyền color khi dữ liệu thay đổi).
  • Đặt con số quan trọng nhất ở giữa vòng.
Không nên
  • Không dùng donut để so sánh các giá trị sát nhau — dùng BarChart hoặc ghi số.
  • Không dùng donut 2 lát — dùng StatTile hoặc ProgressBar.
  • Không tô “Khác” bằng màu phân loại — nó luôn là xám trung tính.

Props

Prop · KiểuMặc địnhMô tả
data{ label, value, color? }[]Mặc định: —Giá trị ≤ 0 bị bỏ qua.
maxSlicesnumberMặc định: 6Tối đa số lát (gồm “Khác”), không vượt 6.
otherLabelstringMặc định: "Other"Nhãn lát gộp.
centerValue / centerLabelReactNodeMặc định: tổng / "Total"Nội dung giữa vòng.
size / thicknessnumberMặc định: 200 / 12% sizeĐường kính và độ dày vòng (px).
legendbooleanMặc định: trueLegend kèm tỉ lệ bên cạnh.
valueFormat, locale, title, description, texture……Mặc định: —Như BarChart.

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ểuMặc định (tiếng Anh)messagesVi
roleDescriptionstring

aria-roledescription của vùng vẽ.

Mặc định (tiếng Anh)"chart"messagesVi"biểu đồ"
heatmapRoleDescriptionstringMặ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"
valuestringMặc định (tiếng Anh)"Value"messagesVi"Giá trị"
sharestringMặc định (tiếng Anh)"Share"messagesVi"Tỉ lệ"
noDatastringMặ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 indexLabel).

Mặc định (tiếng Anh)"Time"messagesVi"Thời gian"
categorystringMặc định (tiếng Anh)"Category"messagesVi"Danh mục"
groupstringMặc định (tiếng Anh)"Group"messagesVi"Nhóm"
namestringMặc định (tiếng Anh)"Name"messagesVi"Tên"
otherstring

Nhóm gộp (DonutChart vượt maxSlices, ScatterChart nhóm thứ 9+).

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"
increasestringMặc định (tiếng Anh)"Increase"messagesVi"Tăng"
decreasestringMặc định (tiếng Anh)"Decrease"messagesVi"Giảm"
noChangestringMặ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"
brushRoleDescriptionstringMặc định (tiếng Anh)"zoom window"messagesVi"cửa sổ thu phóng"
brushViewingstringMặc định (tiếng Anh)"Showing"messagesVi"Đang xem"
brushPoints(shown: number, total: number) => stringMặc định (tiếng Anh)(shown, total) => `${shown}/${total} ${total === 1 ? "point" : "points"}`messagesVi(shown, total) => `${shown}/${total} mốc`
brushResetstringMặ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 ariaLabel).

Mặc định (tiếng Anh)Hàm, xem messages.tsmessagesViHàm, xem messages.ts
barSummary(info: { horizontal: boolean; stacked: boolean; categories: number; series: string[] }) => stringMặc định (tiếng Anh)Hàm, xem messages.tsmessagesViHàm, xem messages.ts
donutSummary(info: { groups: number; total: string; largest?: { label: string; share: string } }) => stringMặc định (tiếng Anh)Hàm, xem messages.tsmessagesViHà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 }[]; }) => stringMặc định (tiếng Anh)Hàm, xem messages.tsmessagesViHàm, xem messages.ts
heatmapSummary(info: { rows: number; columns: number; min?: string; max?: string; hasEmpty: boolean }) => stringMặc định (tiếng Anh)Hàm, xem messages.tsmessagesViHàm, xem messages.ts
sparklineSummary(info: { points: number; first: string; last: string; min: string; max: string }) => stringMặc định (tiếng Anh)Hàm, xem messages.tsmessagesVi({ points, first, last, min, max }) => `Xu hướng ${points} điểm: từ ${first} đến ${last}, thấp nhất ${min}, cao nhất ${max}`