$12,345
Pendapatan
Ngorei Doc
Ngorei Doc
Dokumentasi komponen Stats yang dapat digunakan dalam NexaUI framework.
Komponen stats dasar untuk menampilkan statistik sederhana.
Total Pengguna
<div class="nx-stats">
<h2>1,234</h2>
<p>Total Pengguna</p>
</div>
<<div>
</div>
Variasi stats dengan warna modern dan gradien.
Aktif
Selesai
Pending
Error
<div class="nx-stats nx-stats-colored nx-stats-modern nx-stats-win-blue">
<div class="nx-stats-modern-icon">
<i class="fas fa-users"></i>
</div>
<div class="nx-stats-modern-content">
<h3>789</h3>
<p>Aktif</p>
</div>
<div class="nx-stats-modern-decoration"></div>
</div>
<div class="nx-stats nx-stats-colored nx-stats-modern nx-stats-win-success">
<div class="nx-stats-modern-icon">
<i class="fas fa-check-circle"></i>
</div>
<div class="nx-stats-modern-content">
<h3>456</h3>
<p>Selesai</p>
</div>
<div class="nx-stats-modern-decoration"></div>
</div>
<div class="nx-stats nx-stats-colored nx-stats-modern nx-stats-win-warning">
<div class="nx-stats-modern-icon">
<i class="fas fa-clock"></i>
</div>
<div class="nx-stats-modern-content">
<h3>123</h3>
<p>Pending</p>
</div>
<div class="nx-stats-modern-decoration"></div>
</div>
<div class="nx-stats nx-stats-colored nx-stats-modern nx-stats-win-error">
<div class="nx-stats-modern-icon">
<i class="fas fa-exclamation-circle"></i>
</div>
<div class="nx-stats-modern-content">
<h3>45</h3>
<p>Error</p>
</div>
<div class="nx-stats-modern-decoration"></div>
</div>
<<div>
</div>
Menampilkan stats dengan icon untuk visualisasi yang lebih baik.
Total Pengunjung
Total Penjualan
<div class="nx-stats nx-stats-with-icon">
<i class="fas fa-users"></i>
<div class="nx-stats-content">
<h3>2,543</h3>
<p>Total Pengunjung</p>
</div>
</div>
<div class="nx-stats nx-stats-with-icon nx-stats-win-blue nx-stats-colored">
<i class="fas fa-shopping-cart"></i>
<div class="nx-stats-content">
<h3>1,123</h3>
<p>Total Penjualan</p>
</div>
</div>
<<div>
</div>
Menampilkan perubahan statistik dengan indikator trend.
Pendapatan Bulanan
<div class="nx-stats">
<div class="nx-stats-header">
<h3>8,234</h3>
<span class="nx-stats-trend-up">+12.5%</span>
</div>
<p>Pendapatan Bulanan</p>
</div>
<<div>
</div>
Mengelompokkan beberapa stats dalam satu container.
Followers
Following
Posts
<div class="nx-stats-group">
<div class="nx-stats-item">
<h4>235k</h4>
<p>Followers</p>
</div>
<div class="nx-stats-divider"></div>
<div class="nx-stats-item">
<h4>897</h4>
<p>Following</p>
</div>
<div class="nx-stats-divider"></div>
<div class="nx-stats-item">
<h4>1.2k</h4>
<p>Posts</p>
</div>
</div>
<<div>
</div>
Menampilkan statistik dengan indikator progress bar.
Target Penjualan
Storage Used
<div class="nx-stats">
<div class="nx-stats-progress-header">
<div>
<h3>85%</h3>
<p>Target Penjualan</p>
</div>
</div>
<div class="nx-stats-progress-bar">
<div class="nx-stats-progress-fill" style="width: 85%"></div>
</div>
</div>
<<div>
</div>
Menampilkan statistik dengan mini chart untuk visualisasi trend.
Pendapatan
Visitors
<div class="nx-stats">
<div class="nx-stats-chart-content">
<div>
<h3>$12,345</h3>
<p>Pendapatan</p>
</div>
<div class="nx-stats-mini-sparkline">
<div class="nx-stats-sparkline-bar" style="height: 20%"></div>
<div class="nx-stats-sparkline-bar" style="height: 40%"></div>
<div class="nx-stats-sparkline-bar" style="height: 60%"></div>
<div class="nx-stats-sparkline-bar" style="height: 80%"></div>
<div class="nx-stats-sparkline-bar" style="height: 100%"></div>
</div>
</div>
</div>
<<div>
</div>
Layout grid untuk menampilkan multiple stats dalam format yang rapi.
Users
Orders
Revenue
Rating
<div class="nx-stats-grid">
<div class="nx-stats-grid-item">
<i class="fas fa-users"></i>
<h4>1,234</h4>
<p>Users</p>
</div>
<!-- Repeat for other items -->
</div>
<<div>
</div>
Variasi stats dengan berbagai gaya progress bar.
Progress Striped
Progress Animated
<div class="nx-stats">
<div class="nx-stats-progress-header">
<div>
<h3>75%</h3>
<p>Progress Striped</p>
</div>
</div>
<div class="nx-stats-progress-bar">
<div class="nx-stats-progress-fill nx-stats-striped" style="width: 75%"></div>
</div>
</div>
<<div>
</div>
Menampilkan beberapa progress bar dalam satu stats.
<div class="nx-stats">
<h3>Project Status</h3>
<div class="nx-stats-progress-stack">
<div class="nx-stats-progress-item">
<div class="nx-stats-progress-label">
<span>Frontend</span>
<span>75%</span>
</div>
<div class="nx-stats-progress-bar">
<div class="nx-stats-progress-fill nx-stats-win-blue" style="width: 75%"></div>
</div>
</div>
<div class="nx-stats-progress-item">
<div class="nx-stats-progress-label">
<span>Backend</span>
<span>45%</span>
</div>
<div class="nx-stats-progress-bar">
<div class="nx-stats-progress-fill nx-stats-win-success" style="width: 45%"></div>
</div>
</div>
<div class="nx-stats-progress-item">
<div class="nx-stats-progress-label">
<span>Database</span>
<span>90%</span>
</div>
<div class="nx-stats-progress-bar">
<div class="nx-stats-progress-fill nx-stats-win-warning" style="width: 90%"></div>
</div>
</div>
</div>
</div>
<<div>
</div>
Progress bar dengan efek gradient yang menarik.
Completion Rate
Overall Progress
<div class="nx-stats">
<div class="nx-stats-progress-header">
<div>
<h3>85%</h3>
<p>Completion Rate</p>
</div>
</div>
<div class="nx-stats-progress-bar nx-stats-progress-rounded">
<div class="nx-stats-progress-fill nx-stats-progress-gradient" style="width: 85%"></div>
</div>
</div>
<div class="nx-stats">
<div class="nx-stats-progress-header">
<div>
<h3>60%</h3>
<p>Overall Progress</p>
</div>
</div>
<div class="nx-stats-progress-bar nx-stats-progress-rounded">
<div class="nx-stats-progress-fill nx-stats-progress-gradient-alt" style="width: 60%"></div>
</div>
</div>
<<div>
</div>
Tampilan stats dengan gaya kartu yang modern.
Total Users
Revenue
<div class="nx-stats-card nx-stats-shadow-hover">
<div class="nx-stats-card-icon nx-bg-soft-blue">
<i class="fas fa-users"></i>
</div>
<div class="nx-stats-card-content">
<h3>1,234</h3>
<p>Total Users</p>
<div class="nx-stats-card-trend">
<span class="nx-stats-trend-up">+12.5%</span>
<small>vs last month</small>
</div>
</div>
</div>
<<div>
</div>
Menampilkan statistik dalam format list yang detail.
<div class="nx-stats-list">
<div class="nx-stats-list-item">
<div class="nx-stats-list-icon nx-bg-soft-blue">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="nx-stats-list-content">
<div class="nx-stats-list-main">
<h4>Total Orders</h4>
<span>1,234</span>
</div>
<div class="nx-stats-list-sub">
<div class="nx-stats-progress-bar">
<div class="nx-stats-progress-fill" style="width: 75%"></div>
</div>
<small>75% dari target</small>
</div>
</div>
</div>
</div>
<<div>
</div>
Membandingkan statistik dalam format kartu yang modern.
<div class="nx-stats-comparison-cards">
<div class="nx-stats-comparison-card">
<div class="nx-stats-comparison-period current">
<div class="nx-stats-comparison-header">
<h5>Current Month</h5>
<span class="nx-badge nx-badge-soft-blue">Active</span>
</div>
<div class="nx-stats-comparison-value">
<h3>$45,678</h3>
<div class="nx-stats-trend-up">
<i class="fas fa-arrow-up"></i>
<span>12.5%</span>
</div>
</div>
<div class="nx-stats-comparison-chart">
<svg class="nx-stats-sparkline-graph" viewBox="0 0 100 30">
<polyline points="0,20 20,15 40,25 60,10 80,20 100,5"
fill="none"
stroke="#0078D4"
stroke-width="2"/>
</svg>
</div>
</div>
</div>
<div class="nx-stats-comparison-card">
<div class="nx-stats-comparison-period previous">
<div class="nx-stats-comparison-header">
<h5>Previous Month</h5>
<span class="nx-badge nx-badge-soft-gray">Past</span>
</div>
<div class="nx-stats-comparison-value">
<h3>$40,567</h3>
<div class="nx-stats-trend-down">
<i class="fas fa-arrow-down"></i>
<span>5.2%</span>
</div>
</div>
<div class="nx-stats-comparison-chart">
<svg class="nx-stats-sparkline-graph" viewBox="0 0 100 30">
<polyline points="0,15 20,25 40,15 60,20 80,10 100,15"
fill="none"
stroke="#666"
stroke-width="2"/>
</svg>
</div>
</div>
</div>
</div>
<<div>
</div>
Menampilkan statistik dengan profil avatar dan informasi pengguna.
Senior Developer
Product Manager
<div class="nx-stats nx-stats-profile">
<div class="nx-stats-profile-header">
<div class="nx-stats-avatar">
<img src="avatar.jpg" alt="User Avatar">
<span class="nx-stats-avatar-status online"></span>
</div>
<div class="nx-stats-profile-info">
<h4>John Doe</h4>
<p>Senior Developer</p>
</div>
</div>
<div class="nx-stats-profile-metrics">
<div class="nx-stats-metric">
<h5>Projects</h5>
<span>28</span>
</div>
<div class="nx-stats-divider"></div>
<div class="nx-stats-metric">
<h5>Tasks</h5>
<span>45</span>
</div>
<div class="nx-stats-divider"></div>
<div class="nx-stats-metric">
<h5>Rating</h5>
<span>4.8</span>
</div>
</div>
</div>
<<div>
</div>
Menampilkan statistik dengan profil singkat dan padat.
UI/UX Designer
<div class="nx-stats nx-stats-profile-compact">
<div class="nx-stats-profile-wrapper">
<div class="nx-stats-avatar-wrapper">
<img src="avatar.jpg" alt="User Avatar">
<div class="nx-stats-avatar-indicator">
<span class="nx-badge nx-badge-pro">PRO</span>
</div>
</div>
<div class="nx-stats-profile-details">
<div class="nx-stats-profile-name">
<h4>Alex Johnson</h4>
<span class="nx-stats-verified-badge">
<i class="fas fa-check-circle"></i>
</span>
</div>
<p class="nx-stats-profile-role">UI/UX Designer</p>
<div class="nx-stats-profile-tags">
<span class="nx-tag">Design</span>
<span class="nx-tag">Figma</span>
</div>
</div>
</div>
<div class="nx-stats-profile-progress">
<div class="nx-stats-progress-label">
<span>Project Completion</span>
<span>85%</span>
</div>
<div class="nx-stats-progress-bar nx-progress-gradient">
<div class="nx-stats-progress-fill" style="width: 85%"></div>
</div>
</div>
</div>
<<div>
</div>
Menampilkan statistik dengan profil team.
6 Members
<div class="nx-stats nx-stats-profile-team">
<div class="nx-stats-team-header">
<div class="nx-stats-team-avatars">
<div class="nx-stats-avatar-stack">
<img src="member1.jpg" alt="Team Member 1">
<img src="member2.jpg" alt="Team Member 2">
<img src="member3.jpg" alt="Team Member 3">
<span class="nx-stats-avatar-more">+3</span>
</div>
<div class="nx-stats-team-info">
<h4>Design Team</h4>
<p>6 Members</p>
</div>
</div>
<div class="nx-stats-team-status">
<span class="nx-badge nx-badge-active">Active Project</span>
</div>
</div>
<div class="nx-stats-team-metrics">
<div class="nx-stats-metric-card">
<div class="nx-stats-metric-icon">
<i class="fas fa-tasks"></i>
</div>
<div class="nx-stats-metric-data">
<h5>Tasks</h5>
<span>24/30</span>
</div>
</div>
<div class="nx-stats-metric-card">
<div class="nx-stats-metric-icon success">
<i class="fas fa-check-circle"></i>
</div>
<div class="nx-stats-metric-data">
<h5>Completed</h5>
<span>80%</span>
</div>
</div>
</div>
</div>
<<div>
</div>