Chuyển tới nội dung

Pro đang mở bán trước. Cài đặt mở từ tháng 1/2027. Xem Pro

werewolf-ui
Component

DataTrend

Khối chỉ số với một label, giá trị hiện tại và phần thay đổi. Icon chỉ số tùy chọn và chữ so sánh thêm ngữ cảnh. Trend tự đặt tone: up là success, down là danger và flat là neutral.

  • npm: 1 trực tiếp, 2 tổng
  • registry: 2 trực tiếp, 2 tổng

Xem trước

Doanh thu
$24,800
Increased by 12.5%vs. previous month

Props

  • label
  • value
  • trend
  • change
  • comparison
  • size
  • icon
import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Doanh thu" value="$24,800" change="12.5%" comparison="vs. previous month" trend="up" />

Cách dùng

Khi nào dùng

  • Hiện một chỉ số hiện tại và phần thay đổi của nó so với một khoảng khác.
  • Hiện mức tăng, mức giảm và giá trị không đổi với màu hướng tự động.

Khi nào không dùng

  • Số liệu chỉ đọc, không có so sánh thay đổi. Dùng Metadata.
  • Một trạng thái phân loại ngắn. Dùng Badge.
  • Tiến độ tới một tổng đã biết. Dùng Progress.

Biến thể

trend

Hướng của thay đổi. Tự đặt tone: up dùng success, down dùng danger và flat dùng neutral. Không có cách ghi đè tone.

  • Doanh thu
    $24,800
    Increased by 12.5%vs. previous month

    up

  • Doanh thu
    $24,800
    Decreased by 12.5%vs. previous month

    down

  • Doanh thu
    $24,800
    No change 0%vs. previous month

    flat

import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Doanh thu" value="$24,800" change="12.5%" comparison="vs. previous month" trend="up" />
<DataTrend label="Doanh thu" value="$24,800" trend="down" change="12.5%" comparison="vs. previous month" />
<DataTrend label="Doanh thu" value="$24,800" trend="flat" change="0%" comparison="vs. previous month" />

size

Cỡ của giá trị hiện tại: heading 3, heading 2 hoặc heading 1. Khối tĩnh này không dùng chiều cao control.

  • Doanh thu
    $24,800
    Increased by 12.5%vs. previous month

    sm

  • Doanh thu
    $24,800
    Increased by 12.5%vs. previous month

    mdmặc định

  • Doanh thu
    $24,800
    Increased by 12.5%vs. previous month

    lg

import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Doanh thu" value="$24,800" change="12.5%" comparison="vs. previous month" size="sm" trend="up" />
<DataTrend label="Doanh thu" value="$24,800" change="12.5%" comparison="vs. previous month" trend="up" />
<DataTrend label="Doanh thu" value="$24,800" change="12.5%" comparison="vs. previous month" size="lg" trend="up" />

Ví dụ

Doanh thu

Dữ liệu mẫu. Một icon chỉ số tùy chọn hiện trước label.

Doanh thu
$24,800
Increased by 12.5%vs. previous month
import { IconChartLine } from "@tabler/icons-react"
import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Doanh thu" value="$24,800" leadingIcon={<IconChartLine size={16} />} trend="up" change="12.5%" comparison="vs. previous month" />

Các hướng

Dữ liệu mẫu. Hướng tự đặt success, danger hoặc neutral.

Doanh thu
$24,800
Increased by 12.5%
Người dùng đang hoạt động
1,240
Decreased by 4.2%
Người đăng ký
480
No change 0%
import { DataTrend } from "@/components/ui/data-trend"

<div className="grid w-full gap-xl sm:grid-cols-3">
  <DataTrend label="Doanh thu" value="$24,800" trend="up" change="12.5%" />
  <DataTrend label="Người dùng đang hoạt động" value="1,240" trend="down" change="4.2%" />
  <DataTrend label="Người đăng ký" value="480" trend="flat" change="0%" />
</div>

Ít người dùng hoạt động hơn

Dữ liệu mẫu. Một mức giảm tự dùng tone danger.

Người dùng đang hoạt động
1,240
Decreased by 8.2%vs. previous month
import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Người dùng đang hoạt động" value="1,240" trend="down" change="8.2%" comparison="vs. previous month" />

Thay đổi tuyệt đối

Dữ liệu mẫu. Phần thay đổi có thể dùng số đếm tuyệt đối thay vì phần trăm.

Yêu cầu
12,400
Increased by 240vs. previous week
import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Yêu cầu" value="12,400" trend="up" change="240" comparison="vs. previous week" />

Điểm phần trăm

Dữ liệu mẫu. Một tỉ lệ có thể đổi theo điểm phần trăm.

Tỷ lệ chuyển đổi
32.1%
Increased by 2.4 ptsvs. previous month
import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Tỷ lệ chuyển đổi" value="32.1%" trend="up" change="2.4 pts" comparison="vs. previous month" />

Trong card

Dữ liệu mẫu. Card giữ padding, bề mặt và viền.

Doanh thu
$24,800
Increased by 12.5%vs. previous month
import { IconChartLine } from "@tabler/icons-react"
import { Card, CardContent } from "@/components/ui/card"
import { DataTrend } from "@/components/ui/data-trend"

<Card className="w-full max-w-sm">
  <CardContent>
    <DataTrend label="Doanh thu" value="$24,800" leadingIcon={<IconChartLine size={16} />} trend="up" change="12.5%" comparison="vs. previous month" />
  </CardContent>
</Card>

Trong bảng

Dữ liệu mẫu. Các khối chỉ số gọn nằm trong ô của bảng.

Hoạt động nhóm mẫu, so với tuần trước.
NhómHoạt động
Thiết kế
Thành viên đang hoạt động
24
Increased by 3
Kỹ thuật
Thành viên đang hoạt động
48
Decreased by 2
import { DataTrend } from "@/components/ui/data-trend"
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

<Table className="max-w-full [&_th]:whitespace-normal [&_th]:wrap-anywhere [&_td]:wrap-anywhere [&_th]:px-sm [&_td]:px-sm">
  <TableCaption>Hoạt động nhóm mẫu, so với tuần trước.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Nhóm</TableHead>
      <TableHead>Hoạt động</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Thiết kế</TableCell>
      <TableCell>
        <DataTrend label="Thành viên đang hoạt động" value="24" trend="up" change="3" size="sm" />
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Kỹ thuật</TableCell>
      <TableCell>
        <DataTrend label="Thành viên đang hoạt động" value="48" trend="down" change="2" size="sm" />
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Nhãn hướng tùy chỉnh

Dữ liệu mẫu. Địa phương hóa chữ hướng, tách khỏi việc định dạng số.

Doanh thu
$24,800
Fell by 8.2%vs. previous month
import { DataTrend } from "@/components/ui/data-trend"

<DataTrend label="Doanh thu" value="$24,800" trend="down" change="8.2%" trendLabels={{ up: "Rose by", down: "Fell by", flat: "Unchanged" }} comparison="vs. previous month" />

Nên và không nên

Nên

  • Dùng label chỉ số ngắn và ghi đơn vị trong các giá trị đã định dạng.
  • Đặt trend thành up, down hoặc flat; màu của nó theo tự động.
  • Thêm khoảng so sánh để phần thay đổi có ngữ cảnh.
  • Ghép bên trong Card khi cần một bề mặt, hoặc trong một ô bảng.
  • Giữ các giá trị đang có vẫn nhìn thấy khi làm mới dữ liệu; dùng Skeleton chỉ cho lần tải đầu.

Không nên

  • Đừng ghi đè màu của trend hoặc thêm một điều khiển tone riêng.
  • Đừng dùng màu series của biểu đồ cho dấu thay đổi.
  • Đừng truyền nội dung tương tác làm icon chỉ số trang trí.
  • Đừng gắn role live-region cho mọi chỉ số tĩnh.
  • Đừng thêm Card lồng nhau hoặc màu hardcode qua className.

Props

TênKiểuGiá trịMặc địnhMô tả
label bắt buộcstring--Tên của chỉ số.
value bắt buộcstring | number--Giá trị hiện tại, được bên gọi định dạng với tiền tệ, đơn vị và locale của nó.
leadingIconnode--Icon trang trí tùy chọn, đứng trước label của chỉ số. Truyền icon outline với size={16}.
trend bắt buộcenumup | down | flat-Hướng của thay đổi. Tự đặt tone: up dùng success, down dùng danger và flat dùng neutral. Không có cách ghi đè tone.
change bắt buộcstring | number--Độ lớn đã định dạng, chẳng hạn 12.5%, 2.4 pts hoặc 240. Icon hướng và chữ truy cập diễn tả hướng của nó.
comparisonstring--Khoảng so sánh tùy chọn, chẳng hạn so với tháng trước.
sizeenumsm | md | lgmdCỡ của giá trị hiện tại: heading 3, heading 2 hoặc heading 1. Khối tĩnh này không dùng chiều cao control.
trendLabelsPartial<DataTrendLabels>--Chữ hướng cho trình đọc: up, down và flat. Mặc định: Increased by, Decreased by và No change. Ghi đè từng mục cho locale của bạn.

Cấu tạo

PhầnMô tả
rootChồng chỉ số, không có bề mặt card, viền hoặc đổ bóng.
labelTên chỉ số cạnh icon tùy chọn.
iconIcon chỉ số trang trí, tùy chọn, đặt ở đầu, 16px.
valueGiá trị hiện tại với chữ số tabular, xuống dòng khi giá trị dài.
contentIcon hướng, chữ hướng cho trình đọc và phần thay đổi đã định dạng.
glyphIcon hướng có sẵn, dùng để trang trí, 16px.
descriptionKhoảng so sánh tùy chọn, xuống dòng trên bề mặt hẹp.

Khả năng truy cập

Role: generic

  • label, value, hướng truy cập, change và comparison vẫn là chữ theo thứ tự đọc.
  • Các icon là trang trí. Hình mũi tên và chữ hướng ẩn truyền cùng hướng với màu tự động, không chỉ dựa vào màu.
  • Không gắn role live-region theo mặc định. Chỉ thêm role="status" khi các lần cập nhật cần được thông báo.
  • Bên gọi định dạng value và phần thay đổi theo locale của họ, và địa phương hóa trendLabels.
  • Các thuộc tính native của div và className đi tới root. Nội dung tương tác không thuộc leadingIcon.

Cài đặt

npx werewolf-ui add data-trend

Chạy npx werewolf-ui init một lần trong app trước khi thêm component. Init cài token, thêm CSS import và luật cho agent. Add cài component này cùng các dependency và giữ nguyên theme của bạn. Xem Cài đặt để biết yêu cầu và cách cài qua registry.