import { StatCard } from '@1thay/core';
<StatCard
title="tong nguoi dung"
value="12,345"
trend={{ direction: 'up', percentage: 12.5 }}
variant="default"
/> 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.
- 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.
chart layout patterns
full-width chart voi title, legend, va optional timeframe selector. dung chart container component.
2-4 charts trong bento grid. moi chart doc lap. responsive: stack tren mobile.
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.
principles
dung semantic colors (success=green, error=red, info=blue). tranh dung brand color cho data.
so lieu dung Space Grotesk (--font-number). label dung Inter. kich thuoc theo cap do quan trong.
khoang cach giua cac phan tu data phai du de phan biet. dung spacing tokens.
khong chi dung mau de truyen tai thong tin. them label, pattern, hoac text alternative.
nen va khong 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
- 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