data visualize pattern

mau truc quan hoa du lieu cho dashboard va analytics. tap trung vao clarity, comparison, va accessibility cua du lieu.

metric cards

dung StatCard component de hien thi so lieu chinh. ho tro trend indicator + variant mau sac.

tong nguoi dung

12,34512.5%

doanh thu

$48,2908.2%

ty le chuyen doi

3.24%0.4%

thoi gian tai

245ms

code

import { StatCard } from '@1thay/core';

<StatCard
  title="tong nguoi dung"
  value="12,345"
  trend={{ direction: 'up', percentage: 12.5 }}
  variant="default"
/>

variants

default — brand color cho border/icon
success — xanh la cho tang truong tot
warning — vang cho canh bao/canh bao
error — do cho giam sut/van de

progress + targets

dung Progress component cho muc tieu, completion rate, hoac usage.

muc tieu quy78%

server uptime99%

storage con lai34%

chart layout patterns

single chart

full-width chart voi title, legend, va optional timeframe selector. dung chart container component.

chart grid

2-4 charts trong bento grid. moi chart doc lap. responsive: stack tren mobile.

chart + table

chart phia tren, data table phia duoi. lien ket: filter tren table anh huong chart.

chart color tokens

8 mau chart brand-agnostic, thu tu xen ke light/dark de distinguishable ngay ca grayscale.

#064BAE

#16a34a

#d97706

#dc2626

#7c3aed

#0891b2

#db2777

#64748b

principles

color

dung semantic colors (success=green, error=red, info=blue). tranh dung brand color cho data.

typography

so lieu dung Space Grotesk (--font-number). label dung Inter. kich thuoc theo cap do quan trong.

spacing

khoang cach giua cac phan tu data phai du de phan biet. dung spacing tokens.

accessibility

khong chi dung mau de truyen tai thong tin. them label, pattern, hoac text alternative.

nen va khong nen

nen

dung StatCard cho metrics chinh
dung chart palette (--color-chart-1..8) cho bieu do
font number (Space Grotesk) cho so lieu
moi chart co title + legend ro rang
responsive: stack charts tren mobile

khong nen

brand color cho data visualization
qua nhieu chart tren 1 man hinh
chi dung mau de phan biet du lieu
bo qua mobile responsive
an legend hoac label tren chart