Trực quan hoá dữ liệu

Thang số chuỗi: 1–3 chuỗi chỉ màu là đủ; 4 chuỗi bắt buộc nhãn trực tiếp; 5–6 là trần mềm (legend hoặc small multiples); 7–8 là trần token. Chuỗi thứ 9 không bao giờ là một màu mới — gộp vào “Khác”, tách small multiples hoặc mã hoá kết hợp.

Dark không phải đảo màu tự động: cùng 8 sắc, mỗi sắc chọn bậc riêng cho bề mặt tối (OKLCH L 0.48–0.67) và kiểm lại trên #292929. Ở theme Tương phản cao mọi mark thành trắng; nhận diện chuyển sang hoa văn 45° / 135° (cột, lát) và nét đứt (đường).

# Từ thư mục skill dataviz — chạy cho từng chế độ, trên đúng bề mặt của biểu đồ
node scripts/validate_palette.js "#c2347a,#2f6fd0,#b78300,#7a5ad6,#0e9f8a,#d65a22,#0a8fb8,#4e8a1e" --mode light --surface "#ffffff"
node scripts/validate_palette.js "#e24a92,#4a8eeb,#c08400,#9079e6,#14a08a,#e0662e,#22a4c6,#5fa032" --mode dark --surface "#292929"

# Dạng "mọi cặp" (scatter, bản đồ, small multiples) — chỉ 3 màu đầu
node scripts/validate_palette.js "#c2347a,#2f6fd0,#b78300" --mode light --surface "#ffffff" --pairs all

Tuần tự là một sắc Sakura từ nhạt đến đậm (dark: neo đảo chiều — giá trị nhỏ chìm về nền). Khi dùng cho thứ bậc rời rạc (phễu, hạng) chỉ lấy bậc 3–7 để bậc nhạt nhất vẫn ≥ 2:1 (đã kiểm --ordinal). Phân kỳ: Sakura ↔ Ai, điểm giữa xám trung tính — không bao giờ là một sắc. Màu trạng thái (success / warning / danger) không nằm trong bảng phân loại và luôn đi cùng icon + chữ.

/* src/styles/charts.css — dùng trong SVG qua style={{ fill: "var(--…)" }} */
--colorChartCategorical1 … 8   /* nhận diện chuỗi, thứ tự cố định */
--colorChartSequential1 … 7    /* độ lớn, một sắc Sakura (ordinal: chỉ bậc 3–7) */
--colorChartDivergingNeg / Mid / Pos
--colorChartOther              /* "Khác", chuỗi làm nền */
--colorChartSurface  --colorChartGrid  --colorChartAxis  --colorChartCrosshair
--colorChartLabel  --colorChartLabelStrong
--chartAreaOpacity  --chartDimOpacity

• Đường / vùng: crosshair dọc bám mốc X gần nhất; một tooltip liệt kê mọi chuỗi tại mốc đó.
• Cột / lát: chính mark là vùng chạm (rộng hơn mark, gồm cả khe); mark được chọn nổi lên, các mark khác mờ đi.
• Trong tooltip giá trị đậm và đứng trước về thứ bậc; tên chuỗi là phụ, khoá bằng một nét ngắn màu chuỗi (không phải ô đặc). Legend thì phản chiếu mark: ô cho cột / vùng, nét cho đường.
• Legend của biểu đồ nhiều chuỗi là nút bật/tắt; chuỗi còn lại giữ nguyên màu (màu theo thực thể, không theo thứ hạng).
• Bộ lọc (khoảng ngày, chiều dữ liệu) nằm một hàng phía trên mọi biểu đồ mà nó tác động — không đặt trong thẻ biểu đồ.

• Khung là figure có tên từ tiêu đề; vùng vẽ SVG mang aria-label tóm tắt dữ liệu; mỗi điểm dữ liệu focus được là role="img" với nhãn “danh mục, chuỗi: giá trị”.
• Nút Bảng dữ liệu chuyển sang table có tiêu đề cột và tiêu đề hàng — bản tương đương đạt WCAG của biểu đồ.
• Theme Tương phản cao và forced-colors tự bật hoa văn / nét đứt; prop texture bật thủ công (in ấn, mù màu toàn phần).
• Số và ngày định dạng bằng Intl theo locale (mặc định vi-VN): trục rút gọn 1 N / 2,5 Tr, tooltip và bảng đầy đủ.
• Vùng vẽ luôn dir="ltr" (trục thời gian không đảo); tiêu đề, legend và tooltip theo hướng chữ của trang.
• Animation vào cảnh (cột mọc từ gốc, đường tự vẽ) tắt hẳn khi prefers-reduced-motion.