Yugen UI

Zoom & brush

brush thêm dải tổng quan dưới LineChart / AreaChart để phóng to một giai đoạn mà không mất bối cảnh toàn chuỗi.

Dải tổng quan vẽ toàn bộ dữ liệu bằng nét mảnh; cửa sổ sáng là vùng đang xem, phần ngoài được làm mờ. Kéo cửa sổ để dời, kéo tay nắm hai mép để đổi kích thước, bấm ra ngoài để nhảy tới. Cửa sổ là một slider: ←/→ dời một mốc, Shift+←/→ thu/giãn, PageUp/PageDown dời một cửa sổ, Home/End về hai đầu. Dải luôn LTR như vùng vẽ nên ở trang RTL phím mũi tên vẫn đi đúng chiều trên màn hình. Miền là cặp chỉ số [đầu, cuối] — domain / defaultDomain / onDomainChange; nút “Đặt lại” về toàn bộ. Trang này cũng có vùng chồng 100% (stackOffset="expand").
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 mỗi ngày
Kéo cửa sổ dưới biểu đồ để xem một giai đoạn
Đang xem 30 tháng 8, 2026 – 28 tháng 9, 2026 · 30/90 mố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 { LineChart, AreaChart } 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.

Dung lượng đã dùng (GB)
Đang xem tháng 1 năm 2025 – tháng 12 năm 2026 · 24/24 mốc

Vùng chồng + brush

AreaChart stacked: tooltip liệt kê từng chuỗi và dòng Tổng; dải tổng quan vẽ đỉnh của từng lớp.

Cơ cấu dung lượng

Vùng chồng 100%

stackOffset="expand" chuẩn hoá mỗi mốc về 100% — cho câu hỏi “cơ cấu thay đổi ra sao”, trục Y là tỉ lệ; tooltip ghi giá trị kèm phần trăm và Tổng.

Lượt truy cập web
Đang xem 22 tháng 9, 2026 – 28 tháng 9, 2026 · 7/90 mốc

Điều khiển miền

domain + onDomainChange: nút đặt sẵn 7 / 30 ngày đồng bộ với cửa sổ kéo tay.

Cách dùng

Nên
  • Bật brush khi chuỗi dài (vài chục mốc trở lên) và người đọc cần soi một giai đoạn.
  • Chọn defaultDomain là giai đoạn gần nhất — người đọc thường hỏi về “bây giờ” trước.
  • Dùng vùng chồng 100% cho câu hỏi về cơ cấu; giữ vùng chồng thường khi tổng cũng quan trọng.
Không nên
  • Không dùng brush để giấu dữ liệu — bảng dữ liệu luôn chứa toàn bộ mốc.
  • Không chồng 100% khi các chuỗi có giá trị âm.
  • Không zoom theo trục Y riêng cho từng chuỗi — vẫn một trục Y.

Props

Prop · KiểuMặc địnhMô tả
brushbooleanMặc định: falseDải tổng quan + cửa sổ kéo dưới vùng vẽ (LineChart, AreaChart).
domain / defaultDomain[number, number]Mặc định: —Miền chỉ số đang xem (gồm hai đầu).
onDomainChange(domain: [number, number]) => voidMặc định: —Gọi khi kéo, dùng phím hoặc bấm “Đặt lại”.
AreaChart.stackedbooleanMặc định: falseChỉ AreaChart: chồng vùng; tooltip có dòng Tổng.
AreaChart.stackOffset"none" | "expand"Mặc định: "none"Chỉ AreaChart khi stacked: expand = 100%.
…LineChartPropsMặc định: —Mọi prop khác như trang LineChart.