StatCard

Satu angka ringkasan di dashboard: berapa banyak, dibanding apa, dan ke mana harus melihat detailnya.

Dasar

Isi label dan value. Angkanya diformat oleh aplikasi — komponen ini tidak pernah memformat sendiri, karena pemisah ribuan, pembulatan, dan satuan adalah bagian dari datanya.

Sampah terkelola

128,4ton

naik +12,4%vs Agustus

Pickup selesai

248

naik +18vs Agustus

Menunggu jadwal

turun -3vs Agustus

Tingkat daur ulang

76,2%

Dihitung dari timbangan masuk

Perubahan dan artinya

trend menggambar panahnya dan, secara bawaan, mewarnai naik sebagai baik dan turun sebagai buruk. Itu tidak selalu benar: keluhan yang naik bukan kabar baik, jadi setel trendColor pada kasus seperti itu. Panah tetap aria-hidden, dan arahnya dibacakan sebagai kata.

Sampah terkelola

128,4ton

naik +12,4%vs Agustus

Keluhan terbuka

naik +2vs Agustus

Selagi data diambil

loading mengganti angkanya dengan Skeleton dan membiarkan label serta ikonnya tetap di tempat, sehingga kartu tidak berubah tinggi saat angkanya datang.

Timbangan hari ini

Diperbarui tiap 15 menit

Armada aktif

3 di Bekasi, 4 di Karawang, 2 di Cakung.

API

Props

Prop	Tipe	Default	Keterangan
label	string	—	Angka ini tentang apa.
value	string \| number	—	Angkanya, sudah diformat oleh aplikasi. Komponen tidak pernah memformat sendiri karena pemisah ribuan dan satuan milik datanya.
unit	string	—	Teks kecil setelah angka, misalnya ton atau %.
description	string	—	Baris di bawah angka: periodenya atau cara menghitungnya.
icon	string	—	Nama ikon Iconify di dalam kotak bernada warna.
color	'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'	'primary'	Nada kotak ikon.
size	'sm' \| 'md'	'md'	sm untuk deretan panjang di panel sempit.
delta	string	—	Perubahannya, sudah diformat, misalnya "+12,4%". Komponen tidak menghitung selisih.
trend	'up' \| 'down' \| 'flat'	—	Arah perubahan. Menggambar panahnya dan, dengan trendColor auto, menentukan nadanya.
trendColor	'auto' \| 'success' \| 'danger' \| 'neutral'	'auto'	auto membaca naik sebagai kabar baik dan turun sebagai buruk. Setel sendiri bila itu salah — keluhan naik bukan kabar baik.
trendLabel	string	—	Pembanding perubahannya, misalnya "vs bulan lalu".
to	RouteLocationRaw	—	Menjadikan seluruh kartu tautan ke detail di belakang angkanya.
loading	boolean	false	Placeholder menggantikan angka selama data diambil.

Slots

Slot	Tipe	Default	Keterangan
default	—	—	Isi tambahan di bawah angka, misalnya grafik kecil.
value	—	—	Mengganti angkanya, misalnya dengan dua angka sekaligus.
action	—	—	Sudut kanan atas: menu, filter, atau pemilih periode.

Dengan to, kartunya menjadi NuxtLink sungguhan: klik tengah dan “buka di tab baru” tetap bekerja, dan seluruh kartu menjadi sasaran klik, bukan hanya angkanya.