Heatmap

Heatmap tô một ma trận hàng × cột theo độ lớn — tìm mẫu theo giờ/ngày, so sánh nhóm, bảng giữ chân người dùng.

Mặc định dùng dải tuần tự một sắc (nhạt = nhỏ, đậm = lớn); diverging chuyển sang hai cực quanh midpoint với điểm giữa xám trung tính. Ô cách nhau 2px, nhãn hàng / cột tự cắt cho vừa (đủ chữ trong tooltip và bảng). Ô trống là hoa văn gạch chéo trung tính và được đọc là “Không có dữ liệu”. Legend là dải màu chuyển với nhãn min / max. Bàn phím: Tab vào ma trận, mũi tên đi giữa các ô, Home/End về đầu/cuối hàng.

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

Lượt truy cập theo giờ

Trung bình 4 tuần gần nhất (nghìn lượt)

3110

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

Tăng trưởng so với cùng kỳ

-30%0%+30%

Phân kỳ

Dữ liệu có dấu (tăng / giảm): diverging + domain đối xứng để hai cực cùng độ đậm; 0 là xám.

Tỉ lệ giữ chân theo nhóm đăng ký

0%100%

Không có dữ liệu

Ô trống (bảng cohort)

null là “chưa có dữ liệu” — vẽ bằng hoa văn trung tính, không phải màu nhạt nhất của thang (sẽ bị đọc thành “gần 0”).

Cách dùng

Nên

Dùng thang tuần tự cho độ lớn không dấu; thang phân kỳ chỉ khi có mốc giữa có nghĩa (0, mục tiêu, trung bình).
Cố định domain khi so sánh nhiều heatmap với nhau, để cùng màu = cùng giá trị.
Sắp hàng / cột theo thứ tự tự nhiên (ngày trong tuần, giờ) hoặc theo giá trị để mẫu hiện ra.

Không nên

Không dùng màu phân loại cho ô — heatmap mã hoá độ lớn, không phải danh tính.
Không để ô trống trùng màu nhạt nhất — thiếu dữ liệu khác với giá trị nhỏ.
Không nhồi nhãn số vào ô nhỏ; giá trị chính xác nằm trong tooltip và bảng.

Props

Prop · Kiểu	Mặc định	Mô tả
data / indexChartDatum[] / string	Mặc định: —	Mỗi phần tử là một hàng; index là trường nhãn hàng.
columns{ key: string; label: string }[]	Mặc định: —	Các cột; null/thiếu = ô trống.
domain[number, number]	Mặc định: theo dữ liệu	Miền màu; giá trị ngoài miền bị kẹp.
diverging / midpointboolean / number	Mặc định: false / 0	Thang phân kỳ quanh midpoint.
valueFormatChartNumberFormat	Mặc định: —	Định dạng giá trị (legend, tooltip, bảng).
rowHeightnumber	Mặc định: 32	Chiều cao mỗi hàng (px); chiều cao tổng tự tính.
legendboolean	Mặc định: true	Dải màu với nhãn min / max (và điểm giữa).
title, description, toolbar, locale, ariaLabel, indexLabel…ChartFrameProps	Mặc định: —	Như BarChart: khung, nút “Bảng dữ liệu”, texture, animate (tắt khi giảm chuyển động).

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 `indexLabel`).	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 `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"`
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 `ariaLabel`).	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}`