CStatistic

Thẻ chỉ số (KPI): nhãn, giá trị lớn, biến động và icon. Dùng cho hàng chỉ số đầu trang tổng quan.

Dùng khi: một con số tóm tắt cần nhìn thấy ngay — số đơn hôm nay, doanh thu tháng, số việc chờ xử lý.

Không dùng khi: số chỉ là một dòng trong bảng thông tin (dùng CDescriptions), hoặc cần so sánh nhiều mốc thời gian (cần biểu đồ — xem Trang tổng quan).

<script setup lang="ts">
import { IconCash, IconClock, IconShoppingCart } from '@tabler/icons-vue'
import { Col as CCol, Row as CRow } from '@tasco/ui'

// Thẻ chỉ số cho trang tổng quan. Giá trị truyền vào ĐÃ định dạng — trang tự quyết
// cách viết số; `trend` là phần trăm biến động (dương xanh, âm đỏ).
const compact = new Intl.NumberFormat('vi-VN', { notation: 'compact' })
</script>

<template>
  <CRow :gutter="12">
    <CCol
      :xs="24"
      :sm="8"
    >
      <CStatistic
        label="Đơn hôm nay"
        :value="128"
        :trend="12.4"
      >
        <template #icon>
          <IconShoppingCart :size="20" />
        </template>
      </CStatistic>
    </CCol>

    <CCol
      :xs="24"
      :sm="8"
    >
      <CStatistic
        label="Doanh thu tháng"
        :value="compact.format(2_430_000_000)"
        :trend="-3.1"
        accent="success"
      >
        <template #icon>
          <IconCash :size="20" />
        </template>
        <template #suffix>
          ₫
        </template>
      </CStatistic>
    </CCol>

    <CCol
      :xs="24"
      :sm="8"
    >
      <CStatistic
        label="Chờ xử lý"
        :value="17"
        accent="warning"
      >
        <template #icon>
          <IconClock :size="20" />
        </template>
      </CStatistic>
    </CCol>
  </CRow>
</template>

Giá trị đã định dạng

<CStatistic label="Doanh thu tháng" :value="compact.format(2_430_000_000)" accent="success">
  <template #suffix>₫</template>
</CStatistic>

Component không định dạng số — trang tự quyết định: rút gọn (2,4 tỷ), đủ chữ số (2.430.000.000), hay làm tròn. Đặt đơn vị vào slot #suffix thay vì nối vào chuỗi giá trị, để cỡ chữ của đơn vị nhỏ hơn con số.

Biến động

<CStatistic label="Đơn hôm nay" :value="128" :trend="12.4" />
<CStatistic label="Tỉ lệ huỷ" :value="'3,1%'" :trend="-3.1" />

trend là phần trăm biến động: dương hiện mũi tên lên màu xanh, âm hiện mũi tên xuống màu đỏ.

Tăng không phải lúc nào cũng tốt

Màu chỉ phản ánh dấu của con số, không hiểu nghiệp vụ. "Tỉ lệ huỷ đơn tăng 12%" vẫn hiện xanh. Với chỉ số mà tăng là xấu, nói rõ trong nhãn ("Tỉ lệ huỷ — càng thấp càng tốt") hoặc bỏ trend.

Không có trend thì phần biến động ẩn hẳn — đừng truyền 0 chỉ để giữ chỗ.

Màu nhấn và icon

<CStatistic label="Chờ xử lý" :value="17" accent="warning">
  <template #icon><IconClock :size="20" /></template>
</CStatistic>

accent nhận primary (mặc định), accent, success, warning, error, info — chọn theo ý nghĩa của chỉ số, không theo thẩm mỹ. Icon dùng @tabler/icons-vue, cỡ 20.

API

Props

Tên	Kiểu	Mặc định	Mô tả
label*	string	—	Nhãn chỉ số, vd "Doanh thu tháng".
value*	string | number	—	Giá trị hiển thị — trang tự định dạng số trước khi truyền vào.
trend	number	undefined	Phần trăm biến động; dương → tăng (xanh), âm → giảm (đỏ).
accent	"primary" | "error" | "accent" | "success" | "warning" | "info"	'primary'	Màu nhấn của thẻ (viền, icon).

Slot

Tên	Props của slot	Mô tả
#icon	any	Icon đầu thẻ (khuyến nghị
#suffix	any	Đơn vị hiển thị sau giá trị, vd "đ", "%".

Bố cục hàng chỉ số

<CRow :gutter="16">
  <CCol :xs="24" :sm="12" :lg="8">
    <CStatistic label="Đơn hôm nay" :value="summary.todayCount" />
  </CCol>
  <!-- … -->
</CRow>

Ba đến bốn thẻ một hàng là vừa; nhiều hơn thì người đọc không còn phân biệt được cái nào quan trọng. Luôn khai điểm ngắt để hàng chỉ số xếp dọc trên điện thoại.

Khả năng tiếp cận

• Nhãn và giá trị đều là văn bản thật, trình đọc màn hình đọc theo thứ tự nhãn → giá trị → biến động.
• Mũi tên biến động là ký tự, không phải màu đơn thuần — người không phân biệt được màu vẫn biết tăng hay giảm.
• Icon chỉ trang trí; đừng đặt thông tin duy nhất vào icon.

Lưu ý

• Chỉ số cần mốc thời gian rõ ràng trong nhãn: "Doanh thu tháng này" chứ không phải "Doanh thu".
• Chưa có dữ liệu thì hiện —, đừng hiện 0 — số 0 là một khẳng định.
• Khối chỉ số nhạy cảm (doanh thu, chi phí) nên gating quyền bằng <Can> — xem Chặn theo quyền.

Liên quan

• Trang tổng quan — mẫu trang dùng hàng chỉ số.
• CCard — khung cho khối nội dung khác.