Tampilan Data
StatCard (Kartu Statistik)
Kartu penyaji angka metrik layanan publik, indikator tren kenaikan/penurunan, dan sumber pembaruan data.
StatCard digunakan pada dasbor pimpinan dan portal transparansi publik untuk menampilkan data capaian atau volume pengajuan warga.
Pratinjau Komponen
Total Berkas Selesai Bulan Ini
14.280
<div class="mjl-stat-card">
<span class="mjl-stat-card__label">Rata-rata Waktu Proses</span>
<span class="mjl-stat-card__value">1,4 Hari</span>
<div class="mjl-stat-card__meta">
<span class="mjl-stat-card__trend mjl-stat-card__trend--up">▼ -0.3 hari</span>
<span>lebih cepat dari SLA</span>
</div>
</div>
Penggunaan CSS Murni
<div class="mjl-stat-card">
<span class="mjl-stat-card__label">Permohonan KTP Digital</span>
<span class="mjl-stat-card__value">8.421</span>
<div class="mjl-stat-card__meta">
<span class="mjl-stat-card__trend mjl-stat-card__trend--up">▲ +5%</span>
<span>minggu ini</span>
</div>
</div>
Penggunaan di Berbagai Teknologi
Salin contoh sesuai teknologi proyek Anda. Semua versi memakai class dari @majalengka/css. Komponen siap pakai tersedia di @majalengka/vue; untuk React, Angular, Laravel, dan PHP, contoh di bawah sudah berupa pembungkus kecil yang bisa langsung disalin ke proyek.
<div class="mjl-stat-card">
<span class="mjl-stat-card__label">Permohonan Bulan Ini</span>
<span class="mjl-stat-card__value">1.284</span>
<div class="mjl-stat-card__meta">
<span class="mjl-stat-card__trend mjl-stat-card__trend--up">
<span aria-hidden="true">▲</span><span class="sr-only">Naik</span> 12%
</span>
<span>dibanding bulan lalu</span>
</div>
</div>
<script setup lang="ts">
import { MjlStatCard } from '@majalengka/vue';
</script>
<template>
<MjlStatCard label="Permohonan Bulan Ini" value="1.284" trend="up" trend-value="12%" meta="dibanding bulan lalu" />
</template>
export function MjlStatCard({ label, value, trend, trendValue, meta }: { label: string; value: string; trend?: 'up' | 'down'; trendValue?: string; meta?: string }) {
return (
<div className="mjl-stat-card">
<span className="mjl-stat-card__label">{label}</span>
<span className="mjl-stat-card__value">{value}</span>
<div className="mjl-stat-card__meta">
{trend && (
<span className={`mjl-stat-card__trend mjl-stat-card__trend--${trend}`}>
<span aria-hidden="true">{trend === 'up' ? '▲' : '▼'}</span>
<span className="sr-only">{trend === 'up' ? 'Naik' : 'Turun'}</span> {trendValue}
</span>
)}
{meta && <span>{meta}</span>}
</div>
</div>
);
}
// Pemakaian: <MjlStatCard label="Permohonan Bulan Ini" value={new Intl.NumberFormat('id-ID').format(1284)} trend="up" trendValue="12%" />
import { Component, input } from '@angular/core';
@Component({
selector: 'mjl-stat-card',
standalone: true,
template: `
<div class="mjl-stat-card">
<span class="mjl-stat-card__label">{{ label() }}</span>
<span class="mjl-stat-card__value">{{ value() }}</span>
<div class="mjl-stat-card__meta">
@if (trend(); as t) {
<span class="mjl-stat-card__trend mjl-stat-card__trend--{{ t }}">
<span aria-hidden="true">{{ t === 'up' ? '▲' : '▼' }}</span>
<span class="sr-only">{{ t === 'up' ? 'Naik' : 'Turun' }}</span> {{ trendValue() }}
</span>
}
<span>{{ meta() }}</span>
</div>
</div>
`,
})
export class MjlStatCard {
label = input.required<string>();
value = input.required<string>();
trend = input<'up' | 'down'>();
trendValue = input<string>();
meta = input<string>();
}
@php($naik = $statistik->bulan_ini >= $statistik->bulan_lalu)
<div class="mjl-stat-card">
<span class="mjl-stat-card__label">Permohonan Bulan Ini</span>
<span class="mjl-stat-card__value">{{ number_format($statistik->bulan_ini, 0, ',', '.') }}</span>
<div class="mjl-stat-card__meta">
<span class="mjl-stat-card__trend mjl-stat-card__trend--{{ $naik ? 'up' : 'down' }}">
<span aria-hidden="true">{{ $naik ? '▲' : '▼' }}</span><span class="sr-only">{{ $naik ? 'Naik' : 'Turun' }}</span>
{{ $statistik->persen_perubahan }}%
</span>
<span>dibanding bulan lalu</span>
</div>
</div>
<?php $jumlah = 1284; $naik = true; ?>
<div class="mjl-stat-card">
<span class="mjl-stat-card__label">Permohonan Bulan Ini</span>
<span class="mjl-stat-card__value"><?= number_format($jumlah, 0, ',', '.') ?></span>
<div class="mjl-stat-card__meta">
<span class="mjl-stat-card__trend mjl-stat-card__trend--<?= $naik ? 'up' : 'down' ?>">
<span aria-hidden="true"><?= $naik ? '▲' : '▼' ?></span><span class="sr-only"><?= $naik ? 'Naik' : 'Turun' ?></span> 12%
</span>
<span>dibanding bulan lalu</span>
</div>
</div>
Arah tren juga diumumkan sebagai teks ("Naik"/"Turun"), tidak hanya lewat warna dan panah (WCAG 1.4.1).